diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx index 8872ce1406c..bf0da8a4ca3 100644 --- a/packages/@react-spectrum/s2/src/Menu.tsx +++ b/packages/@react-spectrum/s2/src/Menu.tsx @@ -157,6 +157,7 @@ export let menuitem = style({ }, paddingBottom: '--labelPadding', backgroundColor: { // TODO: revisit color when I have access to dev mode again + // @ts-expect-error Expression produces a union type that is too complex to represent default: { default: 'transparent', isFocused: baseColor('gray-100').isFocusVisible @@ -301,6 +302,7 @@ let keyboard = style({ color: { default: 'gray-600', isDisabled: 'disabled', + // @ts-expect-error Expression produces a union type that is too complex to represent forcedColors: { isDisabled: 'GrayText' } diff --git a/packages/@react-spectrum/s2/stories/Menu.stories.tsx b/packages/@react-spectrum/s2/stories/Menu.stories.tsx index a9a90847ebc..976e749ab89 100644 --- a/packages/@react-spectrum/s2/stories/Menu.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Menu.stories.tsx @@ -242,6 +242,27 @@ export const DynamicExample: Story = { } }; +export const PreventDefaultClosingBehavior: Story = { + render: (args) => { + return ( + + + + I will close the menu by default + I will not close the menu + + Submenu + + I will close the menu + I will not close the menu + + + + + ); + } +}; + export const SelectionGroups = (args) => { let [group1, setGroup1] = useState(new Set([1])); let [group2, setGroup2] = useState(new Set()); diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx index 4bd7bf96871..23f1ef4836d 100644 --- a/packages/react-aria-components/src/Menu.tsx +++ b/packages/react-aria-components/src/Menu.tsx @@ -349,7 +349,12 @@ export interface MenuItemProps extends RenderProps void + onAction?: () => void, + /** + * Whether the menu should close when the menu item is selected. + * @default true + */ + closeOnSelect?: boolean } const MenuItemContext = createContext>(null);