From 0d97a8c79fdccd35b865ad1318c20e812eba0873 Mon Sep 17 00:00:00 2001 From: jer3m01 Date: Tue, 27 Feb 2024 00:41:17 +0100 Subject: [PATCH] chore: merge develop (#344) Co-authored-by: Ante Novokmet Co-authored-by: Omar Elhawary --- apps/docs/src/routes/docs/core/components/combobox.mdx | 1 + apps/docs/src/routes/docs/core/components/select.mdx | 1 + packages/core/src/combobox/combobox-base.tsx | 7 ++++++- packages/core/src/combobox/combobox-listbox.tsx | 1 + packages/core/src/select/select-base.tsx | 7 ++++++- 5 files changed, 15 insertions(+), 2 deletions(-) diff --git a/apps/docs/src/routes/docs/core/components/combobox.mdx b/apps/docs/src/routes/docs/core/components/combobox.mdx index b4d0eb4f..1154ebdb 100644 --- a/apps/docs/src/routes/docs/core/components/combobox.mdx +++ b/apps/docs/src/routes/docs/core/components/combobox.mdx @@ -915,6 +915,7 @@ We expose a CSS custom property `--kb-combobox-content-transform-origin` which c | removeOnBackspace | `boolean`
When `multiple` is true, whether the last selected option should be removed when the user press the Backspace key and the input is empty. | | allowDuplicateSelectionEvents | `boolean`
Whether `onChange` should fire even if the new value is the same as the last. | | disallowEmptySelection | `boolean`
Whether the combobox allows empty selection or not. | +| closeOnSelection | `boolean`
Whether the combobox closes after selection. | | selectionBehavior | `'toggle' \| 'replace'`
How selection should behave in the combobox. | | virtualized | `boolean`
Whether the combobox uses virtual scrolling. | | modal | `boolean`
Whether the combobox should be the only visible content for screen readers, when set to `true`:
- interaction with outside elements will be disabled.
- scroll will be locked.
- focus will be locked inside the combobox content.
- elements outside the combobox content will not be visible for screen readers. | diff --git a/apps/docs/src/routes/docs/core/components/select.mdx b/apps/docs/src/routes/docs/core/components/select.mdx index 19bcafb7..97e69ff4 100644 --- a/apps/docs/src/routes/docs/core/components/select.mdx +++ b/apps/docs/src/routes/docs/core/components/select.mdx @@ -894,6 +894,7 @@ We expose a CSS custom property `--kb-select-content-transform-origin` which can | onOpenChange | `(open: boolean) => void`
Event handler called when the open state of the select changes. | | allowDuplicateSelectionEvents | `boolean`
Whether `onChange` should fire even if the new value is the same as the last. | | disallowEmptySelection | `boolean`
Whether the select allows empty selection or not. | +| closeOnSelection | `boolean`
Whether the select closes after selection. | | selectionBehavior | `'toggle' \| 'replace'`
How selection should behave in the select. | | virtualized | `boolean`
Whether the select uses virtual scrolling. | | modal | `boolean`
Whether the select should be the only visible content for screen readers, when set to `true`:
- interaction with outside elements will be disabled.
- scroll will be locked.
- focus will be locked inside the select content.
- elements outside the select content will not be visible for screen readers. | diff --git a/packages/core/src/combobox/combobox-base.tsx b/packages/core/src/combobox/combobox-base.tsx index 35aedd26..b048596f 100644 --- a/packages/core/src/combobox/combobox-base.tsx +++ b/packages/core/src/combobox/combobox-base.tsx @@ -182,6 +182,9 @@ export interface ComboboxBaseOptions /** Whether the combobox allows empty selection. */ disallowEmptySelection?: boolean; + /** Whether the combobox closes after selection. */ + closeOnSelection?: boolean; + /** * When `selectionMode` is "multiple". * Whether the last selected option should be removed when the user press the Backspace key and the input is empty. @@ -266,6 +269,7 @@ export function ComboboxBase( allowsEmptyCollection: false, disallowEmptySelection: false, allowDuplicateSelectionEvents: true, + closeOnSelection: props.selectionMode === "single", removeOnBackspace: true, gutter: 8, sameWidth: true, @@ -304,6 +308,7 @@ export function ComboboxBase( "defaultFilter", "shouldFocusWrap", "allowsEmptyCollection", + "closeOnSelection", "removeOnBackspace", "selectionBehavior", "selectionMode", @@ -511,7 +516,7 @@ export function ComboboxBase( onSelectionChange: (selectedKeys) => { local.onChange?.(getOptionsFromValues(selectedKeys)); - if (local.selectionMode === "single") { + if (local.closeOnSelection) { // Only close if an option is selected. // Prevents the combobox to close and reopen when the input is cleared. if (disclosureState.isOpen() && selectedKeys.size > 0) { diff --git a/packages/core/src/combobox/combobox-listbox.tsx b/packages/core/src/combobox/combobox-listbox.tsx index d2fffbd2..a7c31a65 100644 --- a/packages/core/src/combobox/combobox-listbox.tsx +++ b/packages/core/src/combobox/combobox-listbox.tsx @@ -61,6 +61,7 @@ export function ComboboxListbox