diff --git a/.changeset/lovely-hotels-switch.md b/.changeset/lovely-hotels-switch.md new file mode 100644 index 000000000..c77b95b48 --- /dev/null +++ b/.changeset/lovely-hotels-switch.md @@ -0,0 +1,5 @@ +--- +"@launchpad-ui/components": patch +--- + +Consistent selection handling for menu and listbox diff --git a/packages/components/src/ListBox.tsx b/packages/components/src/ListBox.tsx index d80a120df..77369b1ed 100644 --- a/packages/components/src/ListBox.tsx +++ b/packages/components/src/ListBox.tsx @@ -4,7 +4,6 @@ import type { ListBoxProps as AriaListBoxProps, } from 'react-aria-components'; -import { Icon } from '@launchpad-ui/icons'; import { cva } from 'class-variance-authority'; import { ListBox as AriaListBox, @@ -12,8 +11,10 @@ import { composeRenderProps, } from 'react-aria-components'; +import { Icon } from '@launchpad-ui/icons'; +import { CheckboxInner } from './Checkbox'; +import { checkbox } from './Checkbox'; import styles from './styles/ListBox.module.css'; - const box = cva(styles.box); const item = cva(styles.item); @@ -58,10 +59,19 @@ const ListBoxItem = ({ ref, ...props }: ListBoxItemProps) = item({ ...renderProps, className }), )} > - {composeRenderProps(props.children, (children, { isSelected }) => ( + {composeRenderProps(props.children, (children, { selectionMode, isDisabled, isSelected }) => ( <> + {selectionMode === 'multiple' && ( +
+ +
+ )} {children} - {isSelected && } + {selectionMode === 'single' && isSelected && } ))} diff --git a/packages/components/src/Menu.tsx b/packages/components/src/Menu.tsx index 22f79f444..06631cee1 100644 --- a/packages/components/src/Menu.tsx +++ b/packages/components/src/Menu.tsx @@ -18,7 +18,6 @@ import { } from 'react-aria-components'; import { CheckboxInner, checkbox } from './Checkbox'; -import { RadioInner, radio } from './Radio'; import styles from './styles/Menu.module.css'; const menu = cva(styles.menu); @@ -75,16 +74,8 @@ const MenuItem = ({ variant = 'default', ref, ...props }: Menu )} - {selectionMode === 'single' && ( -
- -
- )} {children} + {selectionMode === 'single' && isSelected && } {hasSubmenu && } ),