[@mantine/core] Menu: Add data-disabled prop handling to Menu.Item …

…component (#7377) * [@mantine/core] Menu.item: add data-disabled props * revert: story
mantinedev · Jan 19, 2025 · 12ee02f · 12ee02f
1 parent 41f3f19
commit 12ee02f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/packages/@mantine/core/src/components/Menu/Menu.module.css b/packages/@mantine/core/src/components/Menu/Menu.module.css
@@ -37,16 +37,18 @@
   &:where([data-disabled], :disabled) {
     color: var(--mantine-color-dimmed);
     opacity: 0.6;
-    pointer-events: none;
+    cursor: not-allowed;
   }
 
   &:where([data-hovered]) {
-    @mixin where-light {
-      background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
-    }
+    &:where(:not(:disabled, [data-disabled])) {
+      @mixin where-light {
+        background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
+      }
 
-    @mixin where-dark {
-      background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
+      @mixin where-dark {
+        background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
+      }
     }
   }
 }

diff --git a/packages/@mantine/core/src/components/Menu/MenuItem/MenuItem.tsx b/packages/@mantine/core/src/components/Menu/MenuItem/MenuItem.tsx
@@ -20,6 +20,8 @@ import classes from '../Menu.module.css';
 export type MenuItemStylesNames = 'item' | 'itemLabel' | 'itemSection';
 
 export interface MenuItemProps extends BoxProps, CompoundStylesApiProps<MenuItemFactory> {
+  'data-disabled'?: boolean;
+
   /** Item label */
   children?: React.ReactNode;
 
@@ -62,6 +64,7 @@ export const MenuItem = polymorphicFactory<MenuItemFactory>((props, ref) => {
     rightSection,
     children,
     disabled,
+    'data-disabled': dataDisabled,
     ...others
   } = useProps('MenuItem', defaultProps, props);
 
@@ -78,6 +81,9 @@ export const MenuItem = polymorphicFactory<MenuItemFactory>((props, ref) => {
   );
 
   const handleClick = createEventHandler(_others.onClick, () => {
+    if (dataDisabled) {
+      return;
+    }
     if (typeof closeMenuOnClick === 'boolean') {
       closeMenuOnClick && ctx.closeDropdownImmediately();
     } else {
@@ -103,14 +109,14 @@ export const MenuItem = polymorphicFactory<MenuItemFactory>((props, ref) => {
       role="menuitem"
       disabled={disabled}
       data-menu-item
-      data-disabled={disabled || undefined}
+      data-disabled={disabled || dataDisabled || undefined}
       data-hovered={ctx.hovered === itemIndex ? true : undefined}
       data-mantine-stop-propagation
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       onClick={handleClick}
       onKeyDown={createScopedKeydownHandler({
-        siblingSelector: '[data-menu-item]',
+        siblingSelector: '[data-menu-item]:not([data-disabled])',
         parentSelector: '[data-menu-dropdown]',
         activateOnFocus: false,
         loop: ctx.loop,