Merge pull request #6488 from peconomou929/feature/add-context-to-menu

Fix #6489: add menu context to menu
primefaces · Apr 30, 2024 · a6973cf · a6973cf
2 parents 935f481 + 68cb21c
commit a6973cf
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 5 deletions.
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
@@ -34403,6 +34403,40 @@
                             "optional": false,
                             "readonly": false,
                             "type": "MenuState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MenuContext": {
+                    "description": "Defines current options in Menu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuItem",
+                            "description": "Current menuitem"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the menuitem"
+                        },
+                        {
+                            "name": "parentId",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "null | string",
+                            "description": "Id of the submenu header containing the menuitem"
                         }
                     ],
                     "callbacks": []

diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js
@@ -29,6 +29,10 @@ export const Menu = React.memo(
             }
         });
 
+        const getMenuItemPTOptions = (key, menuContext) => {
+            return ptm(key, { context: menuContext });
+        };
+
         useHandleStyle(MenuBase.css.styles, isUnstyled, { name: 'menu' });
         const menuRef = React.useRef(null);
         const listRef = React.useRef(null);
@@ -335,20 +339,21 @@ export const Menu = React.memo(
                 return null;
             }
 
+            const menuContext = { item, index, parentId };
             const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });
             const iconClassName = classNames('p-menuitem-icon', item.icon);
             const iconProps = mergeProps(
                 {
                     className: cx('icon')
                 },
-                ptm('icon')
+                getMenuItemPTOptions('icon', menuContext)
             );
             const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props });
             const labelProps = mergeProps(
                 {
                     className: cx('label')
                 },
-                ptm('label')
+                getMenuItemPTOptions('label', menuContext)
             );
             const label = item.label && <span {...labelProps}>{item.label}</span>;
             const key = item.id || (parentId || idState) + '_' + index;
@@ -358,7 +363,7 @@ export const Menu = React.memo(
                     onMouseMove: (event) => onItemMouseMove(event, key),
                     className: cx('content')
                 },
-                ptm('content')
+                getMenuItemPTOptions('content', menuContext)
             );
 
             const actionProps = mergeProps(
@@ -373,7 +378,7 @@ export const Menu = React.memo(
                     'aria-disabled': item.disabled,
                     'data-p-disabled': item.disabled
                 },
-                ptm('action')
+                getMenuItemPTOptions('action', menuContext)
             );
 
             let content = (
@@ -412,7 +417,7 @@ export const Menu = React.memo(
                     'data-p-focused': focusedOptionId() === key,
                     'data-p-disabled': item.disabled || false
                 },
-                ptm('menuitem')
+                getMenuItemPTOptions('menuitem', menuContext)
             );
 
             return <li {...menuitemProps}>{content}</li>;

diff --git a/components/lib/menu/menu.d.ts b/components/lib/menu/menu.d.ts
@@ -24,6 +24,25 @@ export declare type MenuPassThroughTransitionType = ReactCSSTransitionProps | ((
 export interface MenuPassThroughMethodOptions {
     props: MenuProps;
     state: MenuState;
+    context: MenuContext;
+}
+
+/**
+ * Defines current options in Menu component.
+ */
+export interface MenuContext {
+    /**
+     * Current menuitem
+     */
+    item: MenuItem;
+    /**
+     * Index of the menuitem
+     */
+    index: number;
+    /**
+     * Id of the submenu header containing the menuitem
+     */
+    parentId: string | null;
 }
 
 /**