diff --git a/.changeset/big-suns-complain.md b/.changeset/big-suns-complain.md
new file mode 100644
index 000000000..963c46797
--- /dev/null
+++ b/.changeset/big-suns-complain.md
@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fixes Menu Item disabled styles.
diff --git a/src/components/pickers/Menu/Menu.stories.tsx b/src/components/pickers/Menu/Menu.stories.tsx
index e27c3c7cc..12d96a8b4 100644
--- a/src/components/pickers/Menu/Menu.stories.tsx
+++ b/src/components/pickers/Menu/Menu.stories.tsx
@@ -83,6 +83,42 @@ export const Default = ({ ...props }) => {
);
};
+export const DisabledKeys = ({ ...props }) => {
+ const menu = (
+
+ );
+
+ return (
+
+ {menu}
+
+
+ }
+ aria-label="Open Context Menu"
+ />
+ {menu}
+
+
+ );
+};
+
export const InsideModal = () => {
return (
diff --git a/src/components/pickers/Menu/Menu.tsx b/src/components/pickers/Menu/Menu.tsx
index 62e36b798..909507bfa 100644
--- a/src/components/pickers/Menu/Menu.tsx
+++ b/src/components/pickers/Menu/Menu.tsx
@@ -26,7 +26,8 @@ import { MenuSection } from './MenuSection';
import { StyledMenu, StyledMenuHeader } from './styled';
export interface CubeMenuProps
- extends ContainerStyleProps,
+ extends BaseProps,
+ ContainerStyleProps,
AriaMenuProps {
selectionIcon?: MenuSelectionType;
// @deprecated
@@ -51,10 +52,11 @@ function Menu(
sectionHeadingStyles,
selectionIcon,
qa,
+ ...rest
} = props;
const domRef = useDOMRef(ref);
const contextProps = useMenuContext();
- const completeProps = mergeProps(contextProps, props);
+ const completeProps = mergeProps(contextProps, rest);
const state = useTreeState(completeProps);
const items = [...state.collection];
diff --git a/src/components/pickers/Menu/MenuButton.tsx b/src/components/pickers/Menu/MenuButton.tsx
index c4bfb9de7..81bec74f6 100644
--- a/src/components/pickers/Menu/MenuButton.tsx
+++ b/src/components/pickers/Menu/MenuButton.tsx
@@ -23,7 +23,13 @@ const StyledButton = tasty(Block, {
'': '#clear',
hovered: '#dark.03',
'pressed | selected': '#dark.06',
- '[disabled] & ![data-type="link"]': '#dark.04',
+ disabled: '#dark.04',
+ },
+ color: {
+ '': '#dark-02',
+ hovered: '#dark-02',
+ pressed: '#dark',
+ disabled: '#dark-04',
},
cursor: {
'': 'pointer',
@@ -57,8 +63,7 @@ const StyledButton = tasty(Block, {
Postfix: {
color: {
'': '#dark-03',
- 'hovered | focused': '#dark-03',
- 'pressed | selected': '#purple-text',
+ pressed: '#dark-02',
disabled: '#dark-04',
},
},