Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

dropdown update

This commit is contained in:
Nate Kelley 2025-03-03 10:15:06 -07:00
parent d0625a3252
commit 45b9eb10ec
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
2 changed files with 55 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/components/ui/dropdown/Dropdown.stories.tsx
View File

@ -541,7 +541,6 @@ export const WithFooterContent: Story = {
// Example with numbered items // Example with numbered items
export const WithNumberedItems: Story = { export const WithNumberedItems: Story = {
args: { args: {
menuHeader: 'Numbered Menu Items',
items: [ items: [
{ {
value: '1', value: '1',

75
web/src/components/ui/dropdown/Dropdown.tsx
View File

@ -126,6 +126,9 @@ export const Dropdown: React.FC<DropdownProps> = React.memo(
}; };
}, [selectType, filteredItems]); }, [selectType, filteredItems]);
// Keep track of selectable item index
let hotkeyIndex = -1;
const dropdownItems = selectType === 'multiple' ? unselectedItems : filteredItems; const dropdownItems = selectType === 'multiple' ? unselectedItems : filteredItems;
return ( return (
@ -155,29 +158,41 @@ export const Dropdown: React.FC<DropdownProps> = React.memo(
<div className="max-h-[350px] overflow-y-auto"> <div className="max-h-[350px] overflow-y-auto">
{hasShownItem ? ( {hasShownItem ? (
<> <>
{selectedItems.map((item, index) => ( {selectedItems.map((item) => {
<DropdownItemSelector // Only increment index for selectable items
item={item} if ((item as DropdownItem).value && !(item as DropdownItem).items) {
index={index} hotkeyIndex++;
selectType={selectType} }
onSelect={onSelect} return (
closeOnSelect={closeOnSelect} <DropdownItemSelector
key={dropdownItemKey(item, index)} item={item}
/> index={hotkeyIndex}
))} selectType={selectType}
onSelect={onSelect}
closeOnSelect={closeOnSelect}
key={dropdownItemKey(item, hotkeyIndex)}
/>
);
})}
{selectedItems.length > 0 && <DropdownMenuSeparator />} {selectedItems.length > 0 && <DropdownMenuSeparator />}
{dropdownItems.map((item, index) => ( {dropdownItems.map((item) => {
<DropdownItemSelector // Only increment index for selectable items
item={item} if ((item as DropdownItem).value && !(item as DropdownItem).items) {
index={index} hotkeyIndex++;
selectType={selectType} }
onSelect={onSelect} return (
closeOnSelect={closeOnSelect} <DropdownItemSelector
key={dropdownItemKey(item, index)} item={item}
/> index={hotkeyIndex}
))} selectType={selectType}
onSelect={onSelect}
closeOnSelect={closeOnSelect}
key={dropdownItemKey(item, hotkeyIndex)}
/>
);
})}
</> </>
) : ( ) : (
<DropdownMenuItem disabled className="text-gray-light text-center"> <DropdownMenuItem disabled className="text-gray-light text-center">
@ -253,6 +268,26 @@ const DropdownItem: React.FC<
if (onSelect) onSelect(value); if (onSelect) onSelect(value);
}); });
// Add hotkey support when showIndex is true
useHotkeys(
showIndex ? `${index}` : '',
(e) => {
e.preventDefault();
if (!disabled) {
onClickItem(e as unknown as React.MouseEvent<HTMLDivElement>);
// Close the dropdown if closeOnSelect is true
if (closeOnSelect) {
const dropdownTrigger = document.querySelector('[data-state="open"][role="menu"]');
if (dropdownTrigger) {
const closeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
dropdownTrigger.dispatchEvent(closeEvent);
}
}
}
},
{ enabled: showIndex && !disabled }
);
const isSubItem = items && items.length > 0; const isSubItem = items && items.length > 0;
const isSelectable = !!selectType && selectType !== 'none'; const isSelectable = !!selectType && selectType !== 'none';