feat(Item): add ref to itemWrapper options (#84)

* feat(Item): add ref to itemWrapper options * fix(CompositeBar/Item): set ref required prop
gravity-ui · Aug 17, 2023 · 1f3be59 · 1f3be59
1 parent 4646563
commit 1f3be59
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/components/CompositeBar/Item/Item.tsx b/src/components/CompositeBar/Item/Item.tsx
@@ -203,7 +203,7 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
     const params = {icon: iconNode, title: titleNode};
     let node;
 
-    const opts = {compact, collapsed: false, item};
+    const opts = {compact, collapsed: false, item, ref};
 
     if (typeof item.itemWrapper === 'function') {
         node = item.itemWrapper(params, makeNode, opts) as React.ReactElement;
@@ -224,7 +224,7 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
 Item.displayName = 'Item';
 
 interface CollapsedPopupProps {
-    anchorRef?: React.RefObject<HTMLElement>;
+    anchorRef: React.RefObject<HTMLElement>;
     onClose: () => void;
 }
 
@@ -273,7 +273,7 @@ function CollapsedPopup({
 
                         const titleNode = renderItemTitle(collapseItem);
                         const params = {title: titleNode};
-                        const opts = {compact, collapsed: true, item: collapseItem};
+                        const opts = {compact, collapsed: true, item: collapseItem, ref: anchorRef};
                         if (typeof collapseItem.itemWrapper === 'function') {
                             return collapseItem.itemWrapper(params, makeCollapseNode, opts);
                         } else {

diff --git a/src/components/types.ts b/src/components/types.ts
@@ -26,7 +26,12 @@ export interface MenuItem {
     itemWrapper?: (
         p: MakeItemParams,
         makeItem: (p: MakeItemParams) => React.ReactNode,
-        opts: {collapsed: boolean; compact: boolean; item: MenuItem},
+        opts: {
+            collapsed: boolean;
+            compact: boolean;
+            item: MenuItem;
+            ref: React.RefObject<HTMLElement>;
+        },
     ) => React.ReactNode;
     rightAdornment?: React.ReactNode;
     type?: MenuItemType;