Fixed #2914 - Add id option to MenuItem API

primefaces · May 22, 2022 · f905d23 · f905d23
1 parent f3a6647
commit f905d23
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 11 deletions.
diff --git a/components/lib/contextmenu/ContextMenuSub.js b/components/lib/contextmenu/ContextMenuSub.js
@@ -117,7 +117,7 @@ export const ContextMenuSub = React.memo((props) => {
         }
 
         return (
-            <li key={key} role="none" className={className} style={item.style} onMouseEnter={(event) => onItemMouseEnter(event, item)}>
+            <li key={key} role="none" id={item.id} className={className} style={item.style} onMouseEnter={(event) => onItemMouseEnter(event, item)}>
                 {content}
                 {submenu}
             </li>

diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js
@@ -234,7 +234,7 @@ export const MegaMenu = React.memo(React.forwardRef((props, ref) => {
             }
 
             return (
-                <li key={key} className={className} style={item.style} role="none">
+                <li key={key} id={item.id} className={className} style={item.style} role="none">
                     {content}
                 </li>
             )
@@ -249,7 +249,7 @@ export const MegaMenu = React.memo(React.forwardRef((props, ref) => {
 
         return (
             <React.Fragment key={submenu.label}>
-                <li className={className} style={submenu.style} role="presentation">{submenu.label}</li>
+                <li id={submenu.id} className={className} style={submenu.style} role="presentation">{submenu.label}</li>
                 {items}
             </React.Fragment>
         )
@@ -312,7 +312,7 @@ export const MegaMenu = React.memo(React.forwardRef((props, ref) => {
         const panel = createCategoryPanel(category);
 
         return (
-            <li key={category.label + '_' + index} className={className} style={category.style} onMouseEnter={e => onCategoryMouseEnter(e, category)} role="none">
+            <li key={category.label + '_' + index} id={category.id} className={className} style={category.style} onMouseEnter={e => onCategoryMouseEnter(e, category)} role="none">
                 <a href={category.url || '#'} className={linkClassName} target={category.target} onClick={e => onCategoryClick(e, category)} onKeyDown={e => onCategoryKeyDown(e, category)}
                     role="menuitem" aria-haspopup={category.items != null}>
                     {icon}
@@ -350,7 +350,6 @@ export const MegaMenu = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
-
     const otherProps = ObjectUtils.findDiffKeys(props, MegaMenu.defaultProps);
     const className = classNames('p-megamenu p-component', {
         'p-megamenu-horizontal': props.orientation === 'horizontal',

diff --git a/components/lib/menubar/MenubarSub.js b/components/lib/menubar/MenubarSub.js
@@ -210,7 +210,7 @@ export const MenubarSub = React.memo(React.forwardRef((props, ref) => {
         }
 
         return (
-            <li key={key} role="none" className={className} style={item.style} onMouseEnter={(event) => onItemMouseEnter(event, item)}>
+            <li key={key} role="none" id={item.id} className={className} style={item.style} onMouseEnter={(event) => onItemMouseEnter(event, item)}>
                 {content}
                 {submenu}
             </li>

diff --git a/components/lib/menuitem/MenuItem.d.ts b/components/lib/menuitem/MenuItem.d.ts
@@ -17,6 +17,7 @@ interface MenuItemOptions {
 type MenuItemTemplateType = React.ReactNode | ((item: MenuItem, options: MenuItemOptions) => React.ReactNode);
 
 export interface MenuItem {
+    id?: string;
     label?: string;
     icon?: any;
     url?: string;

diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js
@@ -132,7 +132,7 @@ export const PanelMenuSub = React.memo((props) => {
         }
 
         return (
-            <li key={key} className={className} style={item.style} role="none">
+            <li key={key} id={item.id} className={className} style={item.style} role="none">
                 {content}
                 {submenu}
             </li>

diff --git a/components/lib/slidemenu/SlideMenuSub.js b/components/lib/slidemenu/SlideMenuSub.js
@@ -83,7 +83,7 @@ export const SlideMenuSub = React.memo((props) => {
         }
 
         return (
-            <li key={key} className={className} style={item.style}>
+            <li key={key} id={item.id} className={className} style={item.style}>
                 {content}
                 {submenu}
             </li>

diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js
@@ -68,7 +68,7 @@ export const Steps = React.memo(React.forwardRef((props, ref) => {
         }
 
         return (
-            <li key={key} className={className} style={item.style} role="tab" aria-selected={active} aria-expanded={active}>
+            <li key={key} id={item.id} className={className} style={item.style} role="tab" aria-selected={active} aria-expanded={active}>
                 {content}
             </li>
         )

diff --git a/components/lib/tieredmenu/TieredMenuSub.js b/components/lib/tieredmenu/TieredMenuSub.js
@@ -166,7 +166,7 @@ export const TieredMenuSub = React.memo((props) => {
     }
 
     const createMenuItem = (item, index) => {
-        const { className: _className, style, disabled, icon: _icon, label: _label, items, target, url, template } = item;
+        const { id, className: _className, style, disabled, icon: _icon, label: _label, items, target, url, template } = item;
         const key = _label + '_' + index;
         const active = activeItemState === item;
         const className = classNames('p-menuitem', { 'p-menuitem-active': active }, _className);
@@ -204,7 +204,7 @@ export const TieredMenuSub = React.memo((props) => {
         }
 
         return (
-            <li key={key} className={className} style={style} onMouseEnter={(event) => onItemMouseEnter(event, item)} role="none">
+            <li key={key} id={item} className={className} style={style} onMouseEnter={(event) => onItemMouseEnter(event, item)} role="none">
                 {content}
                 {submenu}
             </li>