Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(combobox): controlled combobox open state #1970

Merged
merged 1 commit into from
Mar 15, 2024
Merged

feat(combobox): controlled combobox open state #1970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 7 additions & 1 deletion packages/components/combobox/src/Combobox.doc.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,9 @@ AutoSuggest is used as the default behaviour. The user can type anything in the

### Controlled

Use `value` and `onValueChange` props to control the value of the combobox.
Use `value` and `onValueChange` props to control the selected item of the combobox.

Use `open` and `onOpenChange` props to control the opened state of the combobox menu.

<Canvas of={stories.Controlled} />

Expand Down Expand Up @@ -178,6 +180,10 @@ This is up to the developer to make it clear to the user which items are selecte

### Controlled

Use `value` and `onValueChange` props to control the selected items of the combobox.

Use `open` and `onOpenChange` props to control the opened state of the combobox menu.

<Canvas of={stories.MultipleSelectionControlled} />

### Disabled
Expand Down
84 changes: 61 additions & 23 deletions packages/components/combobox/src/Combobox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Checkbox, CheckboxGroup } from '@spark-ui/checkbox'
import { FormField } from '@spark-ui/form-field'
import { PenOutline } from '@spark-ui/icons/dist/icons/PenOutline'
import { RadioGroup } from '@spark-ui/radio-group'
import { Switch } from '@spark-ui/switch'
import { Tag } from '@spark-ui/tag'
import { VisuallyHidden } from '@spark-ui/visually-hidden'
import { Meta, StoryFn } from '@storybook/react'
Expand Down Expand Up @@ -47,12 +48,39 @@ export const Default: StoryFn = _args => {
)
}

export const Controlled: StoryFn = _args => {
export const Controlled: StoryFn = () => {
const [value, setValue] = useState<string | undefined>('book-2')
const [open, setOpen] = useState(true)

return (
<div className="flex flex-wrap gap-lg pb-[300px]">
<Combobox autoFilter={false} value={value} onValueChange={setValue}>
<div className="flex flex-col gap-lg">
<FormField>
<FormField.Label className="font-bold">Opened state:</FormField.Label>
<Switch checked={open} onCheckedChange={setOpen}>
{open ? 'Opened' : 'Closed'}
</Switch>
</FormField>
<FormField>
<FormField.Label className="font-bold">Selected item:</FormField.Label>
<RadioGroup value={value || ''} onValueChange={setValue}>
<RadioGroup.Radio value="book-1">To Kill a Mockingbird</RadioGroup.Radio>
<RadioGroup.Radio value="book-2">War and Peace</RadioGroup.Radio>
<RadioGroup.Radio value="book-3">The Idiot</RadioGroup.Radio>
<RadioGroup.Radio value="book-4">A Picture of Dorian Gray</RadioGroup.Radio>
<RadioGroup.Radio value="book-5">1984</RadioGroup.Radio>
<RadioGroup.Radio value="book-6">Pride and Prejudice</RadioGroup.Radio>
</RadioGroup>
</FormField>
</div>

<Combobox
open={open}
onOpenChange={setOpen}
value={value}
onValueChange={setValue}
autoFilter={false}
>
<Combobox.Trigger className="grow">
<Combobox.LeadingIcon>
<PenOutline />
Expand All @@ -74,15 +102,6 @@ export const Controlled: StoryFn = _args => {
</Combobox.Items>
</Combobox.Popover>
</Combobox>

<RadioGroup value={value || ''} onValueChange={setValue} className="grow">
<RadioGroup.Radio value="book-1">To Kill a Mockingbird</RadioGroup.Radio>
<RadioGroup.Radio value="book-2">War and Peace</RadioGroup.Radio>
<RadioGroup.Radio value="book-3">The Idiot</RadioGroup.Radio>
<RadioGroup.Radio value="book-4">A Picture of Dorian Gray</RadioGroup.Radio>
<RadioGroup.Radio value="book-5">1984</RadioGroup.Radio>
<RadioGroup.Radio value="book-6">Pride and Prejudice</RadioGroup.Radio>
</RadioGroup>
</div>
)
}
Expand Down Expand Up @@ -439,21 +458,40 @@ export const MultipleSelection: StoryFn = _args => {
)
}

export const MultipleSelectionControlled: StoryFn = _args => {
export const MultipleSelectionControlled: StoryFn = () => {
const [value, setValue] = useState<string[]>(['book-2'])
const [open, setOpen] = useState(false)

return (
<div className="flex flex-col gap-lg pb-[300px]">
<CheckboxGroup value={value} onCheckedChange={setValue} className="grow">
<Checkbox value="book-1">To Kill a Mockingbird</Checkbox>
<Checkbox value="book-2">War and Peace</Checkbox>
<Checkbox value="book-3">The Idiot</Checkbox>
<Checkbox value="book-4">A Picture of Dorian Gray</Checkbox>
<Checkbox value="book-5">1984</Checkbox>
<Checkbox value="book-6">Pride and Prejudice</Checkbox>
</CheckboxGroup>

<Combobox multiple autoFilter={false} value={value} onValueChange={setValue}>
<div className="flex flex-wrap gap-lg pb-[300px]">
<div className="flex flex-col gap-lg">
<FormField>
<FormField.Label className="font-bold">Opened state:</FormField.Label>
<Switch checked={open} onCheckedChange={setOpen}>
{open ? 'Opened' : 'Closed'}
</Switch>
</FormField>
<FormField>
<FormField.Label className="font-bold">Selected items:</FormField.Label>
<CheckboxGroup value={value} onCheckedChange={setValue} className="grow">
<Checkbox value="book-1">To Kill a Mockingbird</Checkbox>
<Checkbox value="book-2">War and Peace</Checkbox>
<Checkbox value="book-3">The Idiot</Checkbox>
<Checkbox value="book-4">A Picture of Dorian Gray</Checkbox>
<Checkbox value="book-5">1984</Checkbox>
<Checkbox value="book-6">Pride and Prejudice</Checkbox>
</CheckboxGroup>
</FormField>
</div>

<Combobox
multiple
autoFilter={false}
value={value}
onValueChange={setValue}
open={open}
onOpenChange={setOpen}
>
<Combobox.Trigger>
<Combobox.SelectedItems />
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
Expand Down
23 changes: 16 additions & 7 deletions packages/components/combobox/src/ComboboxContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,19 +128,23 @@
)
}

export const ComboboxProvider = ({

Check warning on line 131 in packages/components/combobox/src/ComboboxContext.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Arrow function has too many lines (209). Maximum allowed is 200

Check warning on line 131 in packages/components/combobox/src/ComboboxContext.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Arrow function has a complexity of 12. Maximum allowed is 8
children,
state: stateProp,
allowCustomValue = false,
autoFilter = true,
children,
defaultOpen,
defaultValue,
disabled: disabledProp = false,
multiple = false,
onValueChange,
readOnly: readOnlyProp = false,
state: stateProp,
value: controlledValue,
wrap = true,
// Value
value: controlledValue,
defaultValue,
onValueChange,
// Open
open: controlledOpen,
defaultOpen,
onOpenChange,
}: ComboboxContextProps) => {
const isMounted = useRef(false)

Expand Down Expand Up @@ -203,7 +207,7 @@
} else {
setSelectedItem(itemsMap.get(comboboxValue as string) || null)
}
}, [multiple ? JSON.stringify(comboboxValue) : comboboxValue])

Check warning on line 210 in packages/components/combobox/src/ComboboxContext.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has missing dependencies: 'comboboxValue', 'itemsMap', and 'multiple'. Either include them or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setSelectedItem' needs the current value of 'itemsMap'

Check warning on line 210 in packages/components/combobox/src/ComboboxContext.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked

// Form field state
const field = useFormFieldControl()
Expand All @@ -220,11 +224,11 @@

useEffect(() => {
setFilteredItems(autoFilter ? getFilteredItemsMap(itemsMap, inputValue) : itemsMap)
}, [inputValue, itemsMap])

Check warning on line 227 in packages/components/combobox/src/ComboboxContext.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'autoFilter'. Either include it or remove the dependency array. If 'setFilteredItems' needs the current value of 'autoFilter', you can also switch to useReducer instead of useState and read 'autoFilter' in the reducer

const multiselect = useMultipleSelection<ComboboxItem>({
selectedItems,
stateReducer: (state, { type, changes }) => {

Check warning on line 231 in packages/components/combobox/src/ComboboxContext.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Method 'stateReducer' has a complexity of 12. Maximum allowed is 8
const types = useMultipleSelection.stateChangeTypes

switch (type) {
Expand Down Expand Up @@ -281,10 +285,15 @@
const downshift = useCombobox<ComboboxItem>({
items: filteredItems,
selectedItem,
// initialSelectedItem: comboboxValue ? itemsMap.get(comboboxValue as string) : undefined,
id,
labelId,
inputValue,
...(controlledOpen != null && { isOpen: controlledOpen }),
onIsOpenChange: changes => {
if (changes.isOpen != null) {
onOpenChange?.(changes.isOpen)
}
},
initialIsOpen: defaultOpen,
...(multiple && { selectedItem: undefined }),
itemToString: item => {
Expand Down
Loading