selected state

This commit is contained in:
Nate Kelley 2025-02-24 13:00:53 -07:00
parent 6344d82159
commit f235d1a4a8
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
3 changed files with 17 additions and 5 deletions

View File

@ -210,7 +210,7 @@ export const WithSelection: Story = {
{ {
id: '1', id: '1',
label: 'Option 1', label: 'Option 1',
selected: true, selected: false,
onClick: () => console.log('Option 1 clicked') onClick: () => console.log('Option 1 clicked')
}, },
{ {
@ -220,8 +220,9 @@ export const WithSelection: Story = {
}, },
{ {
id: '3', id: '3',
label: 'Option 3', label: 'Option 3 - Selected',
onClick: () => console.log('Option 3 clicked') onClick: () => console.log('Option 3 clicked'),
selected: true
} }
], ],
children: <Button>Selection Menu</Button> children: <Button>Selection Menu</Button>

View File

@ -160,6 +160,7 @@ const DropdownItem = ({
<Wrapper <Wrapper
items={items} items={items}
disabled={disabled} disabled={disabled}
checked={selected}
onClick={onClickItem} onClick={onClickItem}
closeOnSelect={closeOnSelect} closeOnSelect={closeOnSelect}
selectType={selectType}> selectType={selectType}>

View File

@ -105,8 +105,11 @@ DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
const DropdownMenuCheckboxItem = React.forwardRef< const DropdownMenuCheckboxItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>, React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
>(({ className, children, checked, ...props }, ref) => ( closeOnSelect?: boolean;
selectType?: string;
}
>(({ className, children, onClick, checked, closeOnSelect, selectType, ...props }, ref) => (
<DropdownMenuPrimitive.CheckboxItem <DropdownMenuPrimitive.CheckboxItem
ref={ref} ref={ref}
className={cn( className={cn(
@ -114,6 +117,13 @@ const DropdownMenuCheckboxItem = React.forwardRef<
className className
)} )}
checked={checked} checked={checked}
onClick={(e) => {
if (closeOnSelect) {
e.stopPropagation();
e.preventDefault();
}
onClick?.(e);
}}
{...props}> {...props}>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator> <DropdownMenuPrimitive.ItemIndicator>