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

View File

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

View File

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