@fluentui/react-combobox 9.17.3 → 9.17.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +33 -2
- package/dist/index.d.cts +747 -0
- package/lib/Combobox.js +1 -1
- package/lib/Combobox.js.map +1 -1
- package/lib/Dropdown.js +1 -1
- package/lib/Dropdown.js.map +1 -1
- package/lib/Listbox.js +1 -1
- package/lib/Listbox.js.map +1 -1
- package/lib/Option.js +1 -1
- package/lib/Option.js.map +1 -1
- package/lib/OptionGroup.js +1 -1
- package/lib/OptionGroup.js.map +1 -1
- package/lib/components/Combobox/Combobox.js +6 -6
- package/lib/components/Combobox/Combobox.js.map +1 -1
- package/lib/components/Combobox/index.js +4 -4
- package/lib/components/Combobox/index.js.map +1 -1
- package/lib/components/Combobox/renderCombobox.js +5 -5
- package/lib/components/Combobox/renderCombobox.js.map +1 -1
- package/lib/components/Combobox/useCombobox.js +21 -14
- package/lib/components/Combobox/useCombobox.js.map +1 -1
- package/lib/components/Combobox/useComboboxStyles.styles.js +3 -3
- package/lib/components/Combobox/useComboboxStyles.styles.js.map +1 -1
- package/lib/components/Combobox/useComboboxStyles.styles.raw.js +3 -3
- package/lib/components/Combobox/useComboboxStyles.styles.raw.js.map +1 -1
- package/lib/components/Combobox/useInputTriggerSlot.js +5 -5
- package/lib/components/Combobox/useInputTriggerSlot.js.map +1 -1
- package/lib/components/Dropdown/Dropdown.js +6 -6
- package/lib/components/Dropdown/Dropdown.js.map +1 -1
- package/lib/components/Dropdown/index.js +4 -4
- package/lib/components/Dropdown/index.js.map +1 -1
- package/lib/components/Dropdown/renderDropdown.js +5 -5
- package/lib/components/Dropdown/renderDropdown.js.map +1 -1
- package/lib/components/Dropdown/useButtonTriggerSlot.js +4 -4
- package/lib/components/Dropdown/useButtonTriggerSlot.js.map +1 -1
- package/lib/components/Dropdown/useDropdown.js +21 -14
- package/lib/components/Dropdown/useDropdown.js.map +1 -1
- package/lib/components/Dropdown/useDropdownStyles.styles.js +4 -4
- package/lib/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
- package/lib/components/Dropdown/useDropdownStyles.styles.raw.js +4 -4
- package/lib/components/Dropdown/useDropdownStyles.styles.raw.js.map +1 -1
- package/lib/components/Listbox/Listbox.js +6 -6
- package/lib/components/Listbox/Listbox.js.map +1 -1
- package/lib/components/Listbox/index.js +4 -4
- package/lib/components/Listbox/index.js.map +1 -1
- package/lib/components/Listbox/renderListbox.js +3 -3
- package/lib/components/Listbox/renderListbox.js.map +1 -1
- package/lib/components/Listbox/useListbox.js +10 -10
- package/lib/components/Listbox/useListbox.js.map +1 -1
- package/lib/components/Listbox/useListboxStyles.styles.js +2 -2
- package/lib/components/Listbox/useListboxStyles.styles.js.map +1 -1
- package/lib/components/Listbox/useListboxStyles.styles.raw.js +2 -2
- package/lib/components/Option/Option.js +5 -5
- package/lib/components/Option/Option.js.map +1 -1
- package/lib/components/Option/index.js +4 -4
- package/lib/components/Option/index.js.map +1 -1
- package/lib/components/Option/renderOption.js +1 -1
- package/lib/components/Option/useOption.js +5 -5
- package/lib/components/Option/useOption.js.map +1 -1
- package/lib/components/Option/useOptionStyles.styles.js +3 -3
- package/lib/components/Option/useOptionStyles.styles.js.map +1 -1
- package/lib/components/Option/useOptionStyles.styles.raw.js +3 -3
- package/lib/components/OptionGroup/OptionGroup.js +5 -5
- package/lib/components/OptionGroup/OptionGroup.js.map +1 -1
- package/lib/components/OptionGroup/index.js +4 -4
- package/lib/components/OptionGroup/index.js.map +1 -1
- package/lib/components/OptionGroup/renderOptionGroup.js +1 -1
- package/lib/components/OptionGroup/useOptionGroup.js +1 -1
- package/lib/components/OptionGroup/useOptionGroupStyles.styles.js +2 -2
- package/lib/components/OptionGroup/useOptionGroupStyles.styles.js.map +1 -1
- package/lib/components/OptionGroup/useOptionGroupStyles.styles.raw.js +2 -2
- package/lib/contexts/ComboboxContext.js +1 -1
- package/lib/contexts/ListboxContext.js +1 -1
- package/lib/contexts/useComboboxContextValues.js +1 -1
- package/lib/contexts/useListboxContextValues.js +3 -3
- package/lib/contexts/useListboxContextValues.js.map +1 -1
- package/lib/hooks/useComboboxFilter.js +2 -2
- package/lib/hooks/useComboboxFilter.js.map +1 -1
- package/lib/hooks/useTabsterEscapeIgnore.js +15 -0
- package/lib/hooks/useTabsterEscapeIgnore.js.map +1 -0
- package/lib/index.js +15 -15
- package/lib/index.js.map +1 -1
- package/lib/utils/dropdownKeyActions.js +1 -1
- package/lib/utils/useComboboxBaseState.js +5 -5
- package/lib/utils/useComboboxBaseState.js.map +1 -1
- package/lib/utils/useComboboxPositioning.js +1 -1
- package/lib/utils/useListboxSlot.js +3 -3
- package/lib/utils/useListboxSlot.js.map +1 -1
- package/lib/utils/useOptionCollection.js +1 -1
- package/lib/utils/useSelection.js +2 -2
- package/lib/utils/useTriggerSlot.js +5 -16
- package/lib/utils/useTriggerSlot.js.map +1 -1
- package/lib-commonjs/{Combobox.js → Combobox.cjs} +1 -1
- package/lib-commonjs/{Combobox.js.map → Combobox.cjs.map} +1 -1
- package/lib-commonjs/{Dropdown.js → Dropdown.cjs} +1 -1
- package/lib-commonjs/{Dropdown.js.map → Dropdown.cjs.map} +1 -1
- package/lib-commonjs/{Listbox.js → Listbox.cjs} +1 -1
- package/lib-commonjs/{Listbox.js.map → Listbox.cjs.map} +1 -1
- package/lib-commonjs/{Option.js → Option.cjs} +1 -1
- package/lib-commonjs/{Option.js.map → Option.cjs.map} +1 -1
- package/lib-commonjs/{OptionGroup.js → OptionGroup.cjs} +1 -1
- package/lib-commonjs/{OptionGroup.js.map → OptionGroup.cjs.map} +1 -1
- package/lib-commonjs/components/Combobox/{Combobox.js → Combobox.cjs} +4 -4
- package/lib-commonjs/components/Combobox/{Combobox.js.map → Combobox.cjs.map} +1 -1
- package/lib-commonjs/components/Combobox/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/Combobox/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/Combobox/{renderCombobox.js → renderCombobox.cjs} +2 -2
- package/lib-commonjs/components/Combobox/{renderCombobox.js.map → renderCombobox.cjs.map} +1 -1
- package/lib-commonjs/components/Combobox/{useCombobox.js → useCombobox.cjs} +15 -8
- package/lib-commonjs/components/Combobox/useCombobox.cjs.map +1 -0
- package/lib-commonjs/components/Combobox/useComboboxStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/Combobox/{useComboboxStyles.styles.raw.js → useComboboxStyles.styles.raw.cjs} +1 -1
- package/lib-commonjs/components/Combobox/{useComboboxStyles.styles.raw.js.map → useComboboxStyles.styles.raw.cjs.map} +1 -1
- package/lib-commonjs/components/Combobox/{useInputTriggerSlot.js → useInputTriggerSlot.cjs} +2 -2
- package/lib-commonjs/components/Combobox/{useInputTriggerSlot.js.map → useInputTriggerSlot.cjs.map} +1 -1
- package/lib-commonjs/components/Dropdown/{Dropdown.js → Dropdown.cjs} +4 -4
- package/lib-commonjs/components/Dropdown/{Dropdown.js.map → Dropdown.cjs.map} +1 -1
- package/lib-commonjs/components/Dropdown/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/Dropdown/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/Dropdown/{renderDropdown.js → renderDropdown.cjs} +2 -2
- package/lib-commonjs/components/Dropdown/{renderDropdown.js.map → renderDropdown.cjs.map} +1 -1
- package/lib-commonjs/components/Dropdown/{useButtonTriggerSlot.js → useButtonTriggerSlot.cjs} +2 -2
- package/lib-commonjs/components/Dropdown/{useButtonTriggerSlot.js.map → useButtonTriggerSlot.cjs.map} +1 -1
- package/lib-commonjs/components/Dropdown/{useDropdown.js → useDropdown.cjs} +15 -8
- package/lib-commonjs/components/Dropdown/useDropdown.cjs.map +1 -0
- package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/Dropdown/{useDropdownStyles.styles.raw.js → useDropdownStyles.styles.raw.cjs} +1 -1
- package/lib-commonjs/components/Dropdown/{useDropdownStyles.styles.raw.js.map → useDropdownStyles.styles.raw.cjs.map} +1 -1
- package/lib-commonjs/components/Listbox/{Listbox.js → Listbox.cjs} +4 -4
- package/lib-commonjs/components/Listbox/{Listbox.js.map → Listbox.cjs.map} +1 -1
- package/lib-commonjs/components/Listbox/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/Listbox/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/Listbox/{renderListbox.js → renderListbox.cjs} +1 -1
- package/lib-commonjs/components/Listbox/{renderListbox.js.map → renderListbox.cjs.map} +1 -1
- package/lib-commonjs/components/Listbox/{useListbox.js → useListbox.cjs} +5 -5
- package/lib-commonjs/components/Listbox/{useListbox.js.map → useListbox.cjs.map} +1 -1
- package/lib-commonjs/components/Listbox/useListboxStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/Option/{Option.js → Option.cjs} +3 -3
- package/lib-commonjs/components/Option/{Option.js.map → Option.cjs.map} +1 -1
- package/lib-commonjs/components/Option/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/Option/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/Option/{useOption.js → useOption.cjs} +1 -1
- package/lib-commonjs/components/Option/{useOption.js.map → useOption.cjs.map} +1 -1
- package/lib-commonjs/components/Option/useOptionStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/OptionGroup/{OptionGroup.js → OptionGroup.cjs} +3 -3
- package/lib-commonjs/components/OptionGroup/{OptionGroup.js.map → OptionGroup.cjs.map} +1 -1
- package/lib-commonjs/components/OptionGroup/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/OptionGroup/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.cjs.map +1 -0
- package/lib-commonjs/contexts/{useListboxContextValues.js → useListboxContextValues.cjs} +1 -1
- package/lib-commonjs/contexts/{useListboxContextValues.js.map → useListboxContextValues.cjs.map} +1 -1
- package/lib-commonjs/hooks/{useComboboxFilter.js → useComboboxFilter.cjs} +1 -1
- package/lib-commonjs/hooks/{useComboboxFilter.js.map → useComboboxFilter.cjs.map} +1 -1
- package/lib-commonjs/hooks/useTabsterEscapeIgnore.cjs +22 -0
- package/lib-commonjs/hooks/useTabsterEscapeIgnore.cjs.map +1 -0
- package/lib-commonjs/{index.js → index.cjs} +15 -15
- package/lib-commonjs/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/utils/{useComboboxBaseState.js → useComboboxBaseState.cjs} +2 -2
- package/lib-commonjs/utils/{useComboboxBaseState.js.map → useComboboxBaseState.cjs.map} +1 -1
- package/lib-commonjs/utils/{useListboxSlot.js → useListboxSlot.cjs} +1 -1
- package/lib-commonjs/utils/{useListboxSlot.js.map → useListboxSlot.cjs.map} +1 -1
- package/lib-commonjs/utils/{useTriggerSlot.js → useTriggerSlot.cjs} +2 -13
- package/lib-commonjs/utils/useTriggerSlot.cjs.map +1 -0
- package/package.json +24 -18
- package/lib-commonjs/components/Combobox/useCombobox.js.map +0 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js.map +0 -1
- package/lib-commonjs/components/Dropdown/useDropdown.js.map +0 -1
- package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js.map +0 -1
- package/lib-commonjs/components/Listbox/useListboxStyles.styles.js.map +0 -1
- package/lib-commonjs/components/Option/useOptionStyles.styles.js.map +0 -1
- package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.js.map +0 -1
- package/lib-commonjs/utils/useTriggerSlot.js.map +0 -1
- /package/lib-commonjs/{Selection.js → Selection.cjs} +0 -0
- /package/lib-commonjs/{Selection.js.map → Selection.cjs.map} +0 -0
- /package/lib-commonjs/components/Combobox/{Combobox.types.js → Combobox.types.cjs} +0 -0
- /package/lib-commonjs/components/Combobox/{Combobox.types.js.map → Combobox.types.cjs.map} +0 -0
- /package/lib-commonjs/components/Combobox/{useComboboxStyles.styles.js → useComboboxStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/Dropdown/{Dropdown.types.js → Dropdown.types.cjs} +0 -0
- /package/lib-commonjs/components/Dropdown/{Dropdown.types.js.map → Dropdown.types.cjs.map} +0 -0
- /package/lib-commonjs/components/Dropdown/{useDropdownStyles.styles.js → useDropdownStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/Listbox/{Listbox.types.js → Listbox.types.cjs} +0 -0
- /package/lib-commonjs/components/Listbox/{Listbox.types.js.map → Listbox.types.cjs.map} +0 -0
- /package/lib-commonjs/components/Listbox/{useListboxStyles.styles.js → useListboxStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/Listbox/{useListboxStyles.styles.raw.js → useListboxStyles.styles.raw.cjs} +0 -0
- /package/lib-commonjs/components/Listbox/{useListboxStyles.styles.raw.js.map → useListboxStyles.styles.raw.cjs.map} +0 -0
- /package/lib-commonjs/components/Option/{Option.types.js → Option.types.cjs} +0 -0
- /package/lib-commonjs/components/Option/{Option.types.js.map → Option.types.cjs.map} +0 -0
- /package/lib-commonjs/components/Option/{renderOption.js → renderOption.cjs} +0 -0
- /package/lib-commonjs/components/Option/{renderOption.js.map → renderOption.cjs.map} +0 -0
- /package/lib-commonjs/components/Option/{useOptionStyles.styles.js → useOptionStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/Option/{useOptionStyles.styles.raw.js → useOptionStyles.styles.raw.cjs} +0 -0
- /package/lib-commonjs/components/Option/{useOptionStyles.styles.raw.js.map → useOptionStyles.styles.raw.cjs.map} +0 -0
- /package/lib-commonjs/components/OptionGroup/{OptionGroup.types.js → OptionGroup.types.cjs} +0 -0
- /package/lib-commonjs/components/OptionGroup/{OptionGroup.types.js.map → OptionGroup.types.cjs.map} +0 -0
- /package/lib-commonjs/components/OptionGroup/{renderOptionGroup.js → renderOptionGroup.cjs} +0 -0
- /package/lib-commonjs/components/OptionGroup/{renderOptionGroup.js.map → renderOptionGroup.cjs.map} +0 -0
- /package/lib-commonjs/components/OptionGroup/{useOptionGroup.js → useOptionGroup.cjs} +0 -0
- /package/lib-commonjs/components/OptionGroup/{useOptionGroup.js.map → useOptionGroup.cjs.map} +0 -0
- /package/lib-commonjs/components/OptionGroup/{useOptionGroupStyles.styles.js → useOptionGroupStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/OptionGroup/{useOptionGroupStyles.styles.raw.js → useOptionGroupStyles.styles.raw.cjs} +0 -0
- /package/lib-commonjs/components/OptionGroup/{useOptionGroupStyles.styles.raw.js.map → useOptionGroupStyles.styles.raw.cjs.map} +0 -0
- /package/lib-commonjs/contexts/{ComboboxContext.js → ComboboxContext.cjs} +0 -0
- /package/lib-commonjs/contexts/{ComboboxContext.js.map → ComboboxContext.cjs.map} +0 -0
- /package/lib-commonjs/contexts/{ListboxContext.js → ListboxContext.cjs} +0 -0
- /package/lib-commonjs/contexts/{ListboxContext.js.map → ListboxContext.cjs.map} +0 -0
- /package/lib-commonjs/contexts/{useComboboxContextValues.js → useComboboxContextValues.cjs} +0 -0
- /package/lib-commonjs/contexts/{useComboboxContextValues.js.map → useComboboxContextValues.cjs.map} +0 -0
- /package/lib-commonjs/utils/{ComboboxBase.types.js → ComboboxBase.types.cjs} +0 -0
- /package/lib-commonjs/utils/{ComboboxBase.types.js.map → ComboboxBase.types.cjs.map} +0 -0
- /package/lib-commonjs/utils/{OptionCollection.types.js → OptionCollection.types.cjs} +0 -0
- /package/lib-commonjs/utils/{OptionCollection.types.js.map → OptionCollection.types.cjs.map} +0 -0
- /package/lib-commonjs/utils/{Selection.types.js → Selection.types.cjs} +0 -0
- /package/lib-commonjs/utils/{Selection.types.js.map → Selection.types.cjs.map} +0 -0
- /package/lib-commonjs/utils/{dropdownKeyActions.js → dropdownKeyActions.cjs} +0 -0
- /package/lib-commonjs/utils/{dropdownKeyActions.js.map → dropdownKeyActions.cjs.map} +0 -0
- /package/lib-commonjs/utils/{internalTokens.js → internalTokens.cjs} +0 -0
- /package/lib-commonjs/utils/{internalTokens.js.map → internalTokens.cjs.map} +0 -0
- /package/lib-commonjs/utils/{isComboboxOptionElement.js → isComboboxOptionElement.cjs} +0 -0
- /package/lib-commonjs/utils/{isComboboxOptionElement.js.map → isComboboxOptionElement.cjs.map} +0 -0
- /package/lib-commonjs/utils/{useComboboxPositioning.js → useComboboxPositioning.cjs} +0 -0
- /package/lib-commonjs/utils/{useComboboxPositioning.js.map → useComboboxPositioning.cjs.map} +0 -0
- /package/lib-commonjs/utils/{useOptionCollection.js → useOptionCollection.cjs} +0 -0
- /package/lib-commonjs/utils/{useOptionCollection.js.map → useOptionCollection.cjs.map} +0 -0
- /package/lib-commonjs/utils/{useSelection.js → useSelection.cjs} +0 -0
- /package/lib-commonjs/utils/{useSelection.js.map → useSelection.cjs.map} +0 -0
package/lib/index.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
2
|
-
export { ComboboxProvider } from
|
|
3
|
-
export { ListboxProvider, useListboxContext_unstable } from
|
|
4
|
-
export { useComboboxContextValues } from
|
|
5
|
-
export { useListboxContextValues } from
|
|
6
|
-
export { Listbox, listboxClassNames, renderListbox_unstable, useListboxStyles_unstable, useListbox_unstable } from
|
|
7
|
-
export { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable, useOptionBase_unstable } from
|
|
8
|
-
export { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useComboboxBase_unstable, useCombobox_unstable } from
|
|
9
|
-
export { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdownBase_unstable, useDropdown_unstable } from
|
|
10
|
-
export { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from
|
|
11
|
-
export { useComboboxFilter } from
|
|
2
|
+
export { ComboboxProvider } from "./contexts/ComboboxContext.js";
|
|
3
|
+
export { ListboxProvider, useListboxContext_unstable } from "./contexts/ListboxContext.js";
|
|
4
|
+
export { useComboboxContextValues } from "./contexts/useComboboxContextValues.js";
|
|
5
|
+
export { useListboxContextValues } from "./contexts/useListboxContextValues.js";
|
|
6
|
+
export { Listbox, listboxClassNames, renderListbox_unstable, useListboxStyles_unstable, useListbox_unstable } from "./Listbox.js";
|
|
7
|
+
export { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable, useOptionBase_unstable } from "./Option.js";
|
|
8
|
+
export { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useComboboxBase_unstable, useCombobox_unstable } from "./Combobox.js";
|
|
9
|
+
export { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdownBase_unstable, useDropdown_unstable } from "./Dropdown.js";
|
|
10
|
+
export { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from "./OptionGroup.js";
|
|
11
|
+
export { useComboboxFilter } from "./hooks/useComboboxFilter.js";
|
|
12
12
|
// internals splitting the combobox logic into state hook and slot hooks
|
|
13
|
-
export { useComboboxBaseState } from
|
|
14
|
-
export { useButtonTriggerSlot } from
|
|
15
|
-
export { useInputTriggerSlot } from
|
|
16
|
-
export { useListboxSlot } from
|
|
17
|
-
export { isComboboxOptionElement } from
|
|
13
|
+
export { useComboboxBaseState } from "./utils/useComboboxBaseState.js";
|
|
14
|
+
export { useButtonTriggerSlot } from "./components/Dropdown/useButtonTriggerSlot.js";
|
|
15
|
+
export { useInputTriggerSlot } from "./components/Combobox/useInputTriggerSlot.js";
|
|
16
|
+
export { useListboxSlot } from "./utils/useListboxSlot.js";
|
|
17
|
+
export { isComboboxOptionElement } from "./utils/isComboboxOptionElement.js";
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider, useListboxContext_unstable } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n useOptionBase_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useComboboxBase_unstable,\n useCombobox_unstable,\n} from './Combobox';\nexport type {\n BaseComboboxProps,\n BaseComboboxState,\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdownBase_unstable,\n useDropdown_unstable,\n} from './Dropdown';\nexport type {\n DropdownBaseHookProps,\n DropdownBaseHookState,\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './Dropdown';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\nexport type { OptionOnSelectData, SelectionEvents } from './Selection';\n\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n\n// internals splitting the combobox logic into state hook and slot hooks\nexport { useComboboxBaseState } from './utils/useComboboxBaseState';\nexport { useButtonTriggerSlot } from './components/Dropdown/useButtonTriggerSlot';\nexport { useInputTriggerSlot } from './components/Combobox/useInputTriggerSlot';\nexport { useListboxSlot } from './utils/useListboxSlot';\nexport type { ComboboxBaseState, ComboboxBaseProps } from './utils/ComboboxBase.types';\nexport { isComboboxOptionElement } from './utils/isComboboxOptionElement';\n"],"names":["ComboboxProvider","ListboxProvider","useListboxContext_unstable","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","useOptionBase_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxBase_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdownBase_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useComboboxFilter","useComboboxBaseState","useButtonTriggerSlot","useInputTriggerSlot","useListboxSlot","isComboboxOptionElement"],"mappings":"AAAA,4DAA4D;AAC5D,SAASA,gBAAgB,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider, useListboxContext_unstable } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n useOptionBase_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useComboboxBase_unstable,\n useCombobox_unstable,\n} from './Combobox';\nexport type {\n BaseComboboxProps,\n BaseComboboxState,\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdownBase_unstable,\n useDropdown_unstable,\n} from './Dropdown';\nexport type {\n DropdownBaseHookProps,\n DropdownBaseHookState,\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './Dropdown';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\nexport type { OptionOnSelectData, SelectionEvents } from './Selection';\n\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n\n// internals splitting the combobox logic into state hook and slot hooks\nexport { useComboboxBaseState } from './utils/useComboboxBaseState';\nexport { useButtonTriggerSlot } from './components/Dropdown/useButtonTriggerSlot';\nexport { useInputTriggerSlot } from './components/Combobox/useInputTriggerSlot';\nexport { useListboxSlot } from './utils/useListboxSlot';\nexport type { ComboboxBaseState, ComboboxBaseProps } from './utils/ComboboxBase.types';\nexport { isComboboxOptionElement } from './utils/isComboboxOptionElement';\n"],"names":["ComboboxProvider","ListboxProvider","useListboxContext_unstable","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","useOptionBase_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxBase_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdownBase_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useComboboxFilter","useComboboxBaseState","useButtonTriggerSlot","useInputTriggerSlot","useListboxSlot","isComboboxOptionElement"],"mappings":"AAAA,4DAA4D;AAC5D,SAASA,gBAAgB,QAAQ,gCAA6B;AAE9D,SAASC,eAAe,EAAEC,0BAA0B,QAAQ,+BAA4B;AAExF,SAASC,wBAAwB,QAAQ,yCAAsC;AAC/E,SAASC,uBAAuB,QAAQ,wCAAqC;AAC7E,SACEC,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,eAAY;AAEnB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,cAAW;AAElB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,wBAAwB,EACxBC,oBAAoB,QACf,gBAAa;AAWpB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,wBAAwB,EACxBC,oBAAoB,QACf,gBAAa;AAWpB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,mBAAgB;AAIvB,SAASC,iBAAiB,QAAQ,+BAA4B;AAE9D,wEAAwE;AACxE,SAASC,oBAAoB,QAAQ,kCAA+B;AACpE,SAASC,oBAAoB,QAAQ,gDAA6C;AAClF,SAASC,mBAAmB,QAAQ,+CAA4C;AAChF,SAASC,cAAc,QAAQ,4BAAyB;AAExD,SAASC,uBAAuB,QAAQ,qCAAkC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
3
|
-
import * as ReactDOM from
|
|
4
|
-
import { useControllableState, useEventCallback, useFirstMount } from
|
|
5
|
-
import { useOptionCollection } from
|
|
6
|
-
import { useSelection } from
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import * as ReactDOM from "react-dom";
|
|
4
|
+
import { useControllableState, useEventCallback, useFirstMount } from "@fluentui/react-utilities";
|
|
5
|
+
import { useOptionCollection } from "./useOptionCollection.js";
|
|
6
|
+
import { useSelection } from "./useSelection.js";
|
|
7
7
|
/**
|
|
8
8
|
* State shared between Combobox and Dropdown components
|
|
9
9
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/useComboboxBaseState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport type { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport type { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport type { SelectionEvents } from './Selection.types';\n\n/**\n * State shared between Combobox and Dropdown components\n *\n * @internal\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & {\n children?: React.ReactNode;\n editable?: boolean;\n disabled?: boolean;\n freeform?: boolean;\n activeDescendantController: ActiveDescendantImperativeRef;\n },\n): ComboboxBaseState => {\n const {\n appearance = 'outline',\n disableAutoFocus,\n children,\n clearable = false,\n editable = false,\n inlinePopup = false,\n mountNode = undefined,\n multiselect,\n onOpenChange,\n size = 'medium',\n activeDescendantController,\n freeform = false,\n disabled = false,\n onActiveOptionChange = null,\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionsMatchingValue } = optionCollection;\n\n const { getOptionById } = optionCollection;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n // Keeping some kind of backwards compatible functionality here\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_activeOption = getActiveOption();\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_setActiveOption = React.useCallback(\n (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n let nextOption: OptionValue | undefined = undefined;\n if (typeof option === 'function') {\n const activeOption = getActiveOption();\n nextOption = option(activeOption);\n }\n\n if (nextOption) {\n activeDescendantController.focus(nextOption.id);\n } else {\n activeDescendantController.blur();\n }\n },\n [activeDescendantController, getActiveOption],\n );\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n // when the trigger is focused - the listbox should but hidden until the open state is changed\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n // reset any typed value when an option is selected\n const selectOption = React.useCallback(\n (ev: SelectionEvents, option: OptionValue) => {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n baseSelectOption(ev, option);\n });\n },\n [setValue, baseSelectOption],\n );\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n if (disabled) {\n return;\n }\n onOpenChange?.(event, { open: newState });\n ReactDOM.unstable_batchedUpdates(() => {\n if (!newState && !freeform) {\n setValue(undefined);\n }\n setOpenState(newState);\n });\n },\n [onOpenChange, setOpenState, setValue, freeform, disabled],\n );\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n } else {\n activeDescendantController.blur();\n }\n // this should only be run in response to changes in the open state\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, activeDescendantController]);\n\n // Fallback focus when children are updated in an open popover results in no item being focused\n React.useEffect(() => {\n if (open && !disableAutoFocus && !activeDescendantController.active()) {\n activeDescendantController.first();\n }\n // this should only be run in response to changes in the open state or children\n }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n const nextOption = optionCollection.getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n return {\n ...optionCollection,\n freeform,\n disabled,\n selectOption,\n clearSelection,\n selectedOptions,\n activeOption: UNSAFE_activeOption,\n appearance,\n clearable,\n focusVisible,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n hasFocus,\n setActiveOption: UNSAFE_setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n multiselect,\n onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (!multiselect) {\n setOpen(e, false);\n }\n }),\n onActiveDescendantChange,\n };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/utils/useComboboxBaseState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport type { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport type { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport type { SelectionEvents } from './Selection.types';\n\n/**\n * State shared between Combobox and Dropdown components\n *\n * @internal\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & {\n children?: React.ReactNode;\n editable?: boolean;\n disabled?: boolean;\n freeform?: boolean;\n activeDescendantController: ActiveDescendantImperativeRef;\n },\n): ComboboxBaseState => {\n const {\n appearance = 'outline',\n disableAutoFocus,\n children,\n clearable = false,\n editable = false,\n inlinePopup = false,\n mountNode = undefined,\n multiselect,\n onOpenChange,\n size = 'medium',\n activeDescendantController,\n freeform = false,\n disabled = false,\n onActiveOptionChange = null,\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionsMatchingValue } = optionCollection;\n\n const { getOptionById } = optionCollection;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n // Keeping some kind of backwards compatible functionality here\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_activeOption = getActiveOption();\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_setActiveOption = React.useCallback(\n (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n let nextOption: OptionValue | undefined = undefined;\n if (typeof option === 'function') {\n const activeOption = getActiveOption();\n nextOption = option(activeOption);\n }\n\n if (nextOption) {\n activeDescendantController.focus(nextOption.id);\n } else {\n activeDescendantController.blur();\n }\n },\n [activeDescendantController, getActiveOption],\n );\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n // when the trigger is focused - the listbox should but hidden until the open state is changed\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n // reset any typed value when an option is selected\n const selectOption = React.useCallback(\n (ev: SelectionEvents, option: OptionValue) => {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n baseSelectOption(ev, option);\n });\n },\n [setValue, baseSelectOption],\n );\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n if (disabled) {\n return;\n }\n onOpenChange?.(event, { open: newState });\n ReactDOM.unstable_batchedUpdates(() => {\n if (!newState && !freeform) {\n setValue(undefined);\n }\n setOpenState(newState);\n });\n },\n [onOpenChange, setOpenState, setValue, freeform, disabled],\n );\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n } else {\n activeDescendantController.blur();\n }\n // this should only be run in response to changes in the open state\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, activeDescendantController]);\n\n // Fallback focus when children are updated in an open popover results in no item being focused\n React.useEffect(() => {\n if (open && !disableAutoFocus && !activeDescendantController.active()) {\n activeDescendantController.first();\n }\n // this should only be run in response to changes in the open state or children\n }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n const nextOption = optionCollection.getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n return {\n ...optionCollection,\n freeform,\n disabled,\n selectOption,\n clearSelection,\n selectedOptions,\n activeOption: UNSAFE_activeOption,\n appearance,\n clearable,\n focusVisible,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n hasFocus,\n setActiveOption: UNSAFE_setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n multiselect,\n onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (!multiselect) {\n setOpen(e, false);\n }\n }),\n onActiveDescendantChange,\n };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { resolvePositioningShorthand, usePositioning } from
|
|
2
|
+
import { resolvePositioningShorthand, usePositioning } from "@fluentui/react-positioning";
|
|
3
3
|
export function useComboboxPositioning(props) {
|
|
4
4
|
const { positioning } = props;
|
|
5
5
|
// Set a default set of fallback positions to try if the dropdown does not fit on screen
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { useFieldControlProps_unstable } from
|
|
3
|
-
import { mergeCallbacks, useId, useEventCallback, slot, isResolvedShorthand, useMergedRefs } from
|
|
4
|
-
import { Listbox } from
|
|
2
|
+
import { useFieldControlProps_unstable } from "@fluentui/react-field";
|
|
3
|
+
import { mergeCallbacks, useId, useEventCallback, slot, isResolvedShorthand, useMergedRefs } from "@fluentui/react-utilities";
|
|
4
|
+
import { Listbox } from "../Listbox.js";
|
|
5
5
|
/**
|
|
6
6
|
* @internal
|
|
7
7
|
* @returns listbox slot with desired behaviour and props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/useListboxSlot.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { type FieldControlProps, useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n mergeCallbacks,\n useId,\n useEventCallback,\n slot,\n isResolvedShorthand,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { Listbox } from '../Listbox';\nimport type { ListboxProps } from '../Listbox';\n\nexport type UseListboxSlotState = Pick<ComboboxBaseState, 'multiselect'>;\n\ntype UseListboxSlotOptions = {\n state: UseListboxSlotState;\n triggerRef:\n | React.RefObject<HTMLInputElement | null>\n | React.RefObject<HTMLButtonElement | null>\n | React.RefObject<HTMLButtonElement | HTMLInputElement | null>;\n defaultProps?: Partial<ListboxProps>;\n};\n\n/**\n * @internal\n * @returns listbox slot with desired behaviour and props\n */\nexport function useListboxSlot(\n listboxSlotFromProp: Slot<typeof Listbox> | undefined,\n ref: React.Ref<HTMLDivElement>,\n options: UseListboxSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined {\n const {\n state: { multiselect },\n triggerRef,\n defaultProps,\n } = options;\n\n const listboxId = useId(\n 'fluent-listbox',\n isResolvedShorthand(listboxSlotFromProp) ? listboxSlotFromProp.id : undefined,\n );\n\n const listboxSlot = slot.optional(listboxSlotFromProp, {\n renderByDefault: true,\n elementType: Listbox,\n defaultProps: {\n id: listboxId,\n multiselect,\n tabIndex: undefined,\n ...defaultProps,\n },\n });\n\n const fieldControlProps = useFieldControlProps_unstable({ id: listboxId } as FieldControlProps, {\n supportsLabelFor: true,\n });\n\n // Use the field's label to provide an accessible name for the listbox if it doesn't already have one\n if (\n listboxSlot &&\n !listboxSlot['aria-label'] &&\n !listboxSlot['aria-labelledby'] &&\n fieldControlProps['aria-labelledby']\n ) {\n listboxSlot['aria-labelledby'] = fieldControlProps['aria-labelledby'];\n }\n\n /**\n * Clicking on the listbox should never blur the trigger\n * in a combobox\n */\n const onMouseDown = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n }, listboxSlot?.onMouseDown),\n );\n\n const onClick = useEventCallback(\n // eslint-disable-next-line react-hooks/refs\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n triggerRef.current?.focus();\n }, listboxSlot?.onClick),\n );\n\n const listboxRef = useMergedRefs(listboxSlot?.ref, ref);\n if (listboxSlot) {\n listboxSlot.ref = listboxRef;\n listboxSlot.onMouseDown = onMouseDown;\n listboxSlot.onClick = onClick;\n }\n\n return listboxSlot;\n}\n"],"names":["useFieldControlProps_unstable","mergeCallbacks","useId","useEventCallback","slot","isResolvedShorthand","useMergedRefs","Listbox","useListboxSlot","listboxSlotFromProp","ref","options","state","multiselect","triggerRef","defaultProps","listboxId","id","undefined","listboxSlot","optional","renderByDefault","elementType","tabIndex","fieldControlProps","supportsLabelFor","onMouseDown","event","preventDefault","onClick","current","focus","listboxRef"],"mappings":"AAAA;AAGA,SAAiCA,6BAA6B,QAAQ,wBAAwB;AAC9F,SACEC,cAAc,EACdC,KAAK,EACLC,gBAAgB,EAChBC,IAAI,EACJC,mBAAmB,EACnBC,aAAa,QACR,4BAA4B;AAGnC,SAASC,OAAO,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/utils/useListboxSlot.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { type FieldControlProps, useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n mergeCallbacks,\n useId,\n useEventCallback,\n slot,\n isResolvedShorthand,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { Listbox } from '../Listbox';\nimport type { ListboxProps } from '../Listbox';\n\nexport type UseListboxSlotState = Pick<ComboboxBaseState, 'multiselect'>;\n\ntype UseListboxSlotOptions = {\n state: UseListboxSlotState;\n triggerRef:\n | React.RefObject<HTMLInputElement | null>\n | React.RefObject<HTMLButtonElement | null>\n | React.RefObject<HTMLButtonElement | HTMLInputElement | null>;\n defaultProps?: Partial<ListboxProps>;\n};\n\n/**\n * @internal\n * @returns listbox slot with desired behaviour and props\n */\nexport function useListboxSlot(\n listboxSlotFromProp: Slot<typeof Listbox> | undefined,\n ref: React.Ref<HTMLDivElement>,\n options: UseListboxSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined {\n const {\n state: { multiselect },\n triggerRef,\n defaultProps,\n } = options;\n\n const listboxId = useId(\n 'fluent-listbox',\n isResolvedShorthand(listboxSlotFromProp) ? listboxSlotFromProp.id : undefined,\n );\n\n const listboxSlot = slot.optional(listboxSlotFromProp, {\n renderByDefault: true,\n elementType: Listbox,\n defaultProps: {\n id: listboxId,\n multiselect,\n tabIndex: undefined,\n ...defaultProps,\n },\n });\n\n const fieldControlProps = useFieldControlProps_unstable({ id: listboxId } as FieldControlProps, {\n supportsLabelFor: true,\n });\n\n // Use the field's label to provide an accessible name for the listbox if it doesn't already have one\n if (\n listboxSlot &&\n !listboxSlot['aria-label'] &&\n !listboxSlot['aria-labelledby'] &&\n fieldControlProps['aria-labelledby']\n ) {\n listboxSlot['aria-labelledby'] = fieldControlProps['aria-labelledby'];\n }\n\n /**\n * Clicking on the listbox should never blur the trigger\n * in a combobox\n */\n const onMouseDown = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n }, listboxSlot?.onMouseDown),\n );\n\n const onClick = useEventCallback(\n // eslint-disable-next-line react-hooks/refs\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n triggerRef.current?.focus();\n }, listboxSlot?.onClick),\n );\n\n const listboxRef = useMergedRefs(listboxSlot?.ref, ref);\n if (listboxSlot) {\n listboxSlot.ref = listboxRef;\n listboxSlot.onMouseDown = onMouseDown;\n listboxSlot.onClick = onClick;\n }\n\n return listboxSlot;\n}\n"],"names":["useFieldControlProps_unstable","mergeCallbacks","useId","useEventCallback","slot","isResolvedShorthand","useMergedRefs","Listbox","useListboxSlot","listboxSlotFromProp","ref","options","state","multiselect","triggerRef","defaultProps","listboxId","id","undefined","listboxSlot","optional","renderByDefault","elementType","tabIndex","fieldControlProps","supportsLabelFor","onMouseDown","event","preventDefault","onClick","current","focus","listboxRef"],"mappings":"AAAA;AAGA,SAAiCA,6BAA6B,QAAQ,wBAAwB;AAC9F,SACEC,cAAc,EACdC,KAAK,EACLC,gBAAgB,EAChBC,IAAI,EACJC,mBAAmB,EACnBC,aAAa,QACR,4BAA4B;AAGnC,SAASC,OAAO,QAAQ,gBAAa;AAcrC;;;CAGC,GACD,OAAO,SAASC,eACdC,mBAAqD,EACrDC,GAA8B,EAC9BC,OAA8B;IAE9B,MAAM,EACJC,OAAO,EAAEC,WAAW,EAAE,EACtBC,UAAU,EACVC,YAAY,EACb,GAAGJ;IAEJ,MAAMK,YAAYd,MAChB,kBACAG,oBAAoBI,uBAAuBA,oBAAoBQ,EAAE,GAAGC;IAGtE,MAAMC,cAAcf,KAAKgB,QAAQ,CAACX,qBAAqB;QACrDY,iBAAiB;QACjBC,aAAaf;QACbQ,cAAc;YACZE,IAAID;YACJH;YACAU,UAAUL;YACV,GAAGH,YAAY;QACjB;IACF;IAEA,MAAMS,oBAAoBxB,8BAA8B;QAAEiB,IAAID;IAAU,GAAwB;QAC9FS,kBAAkB;IACpB;IAEA,qGAAqG;IACrG,IACEN,eACA,CAACA,WAAW,CAAC,aAAa,IAC1B,CAACA,WAAW,CAAC,kBAAkB,IAC/BK,iBAAiB,CAAC,kBAAkB,EACpC;QACAL,WAAW,CAAC,kBAAkB,GAAGK,iBAAiB,CAAC,kBAAkB;IACvE;IAEA;;;GAGC,GACD,MAAME,cAAcvB,iBAClBF,eAAe,CAAC0B;QACdA,MAAMC,cAAc;IACtB,GAAGT,wBAAAA,kCAAAA,YAAaO,WAAW;IAG7B,MAAMG,UAAU1B,iBACd,4CAA4C;IAC5CF,eAAe,CAAC0B;YAEdb;QADAa,MAAMC,cAAc;SACpBd,sBAAAA,WAAWgB,OAAO,cAAlBhB,0CAAAA,oBAAoBiB,KAAK;IAC3B,GAAGZ,wBAAAA,kCAAAA,YAAaU,OAAO;IAGzB,MAAMG,aAAa1B,cAAca,wBAAAA,kCAAAA,YAAaT,GAAG,EAAEA;IACnD,IAAIS,aAAa;QACfA,YAAYT,GAAG,GAAGsB;QAClBb,YAAYO,WAAW,GAAGA;QAC1BP,YAAYU,OAAO,GAAGA;IACxB;IAEA,OAAOV;AACT"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
3
|
-
import { useControllableState } from
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { useControllableState } from "@fluentui/react-utilities";
|
|
4
4
|
export const useSelection = (props)=>{
|
|
5
5
|
const { defaultSelectedOptions, multiselect, onOptionSelect } = props;
|
|
6
6
|
const [selectedOptions, setSelectedOptions] = useControllableState({
|
|
@@ -1,30 +1,19 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
3
|
-
import { useSetKeyboardNavigation
|
|
4
|
-
import { mergeCallbacks, slot, useEventCallback, useMergedRefs } from
|
|
5
|
-
import { getDropdownActionFromKey } from
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { useSetKeyboardNavigation } from "@fluentui/react-tabster";
|
|
4
|
+
import { mergeCallbacks, slot, useEventCallback, useMergedRefs } from "@fluentui/react-utilities";
|
|
5
|
+
import { getDropdownActionFromKey } from "./dropdownKeyActions.js";
|
|
6
6
|
/**
|
|
7
7
|
* Shared trigger behaviour for combobox and dropdown
|
|
8
8
|
* @returns trigger slot with desired behaviour and props
|
|
9
9
|
*/ export function useTriggerSlot(triggerSlotFromProp, ref, options) {
|
|
10
10
|
const { state: { open, setOpen, setHasFocus }, defaultProps, elementType, activeDescendantController } = options;
|
|
11
|
-
// need to prevent tabster from also handling escape when the dropdown is open
|
|
12
|
-
// event.stopPropagation() isn't enough here, since tabster uses the capture phase
|
|
13
|
-
const ignoreEscapeKeyAttribute = useTabsterAttributes({
|
|
14
|
-
focusable: {
|
|
15
|
-
ignoreKeydown: {
|
|
16
|
-
Escape: open
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
const tabsterOverrides = useMergedTabsterAttributes_unstable(ignoreEscapeKeyAttribute, typeof defaultProps === 'object' ? defaultProps : {});
|
|
21
11
|
const trigger = slot.always(triggerSlotFromProp, {
|
|
22
12
|
defaultProps: {
|
|
23
13
|
type: 'text',
|
|
24
14
|
'aria-expanded': open,
|
|
25
15
|
role: 'combobox',
|
|
26
|
-
...typeof defaultProps === 'object' && defaultProps
|
|
27
|
-
...tabsterOverrides
|
|
16
|
+
...typeof defaultProps === 'object' && defaultProps
|
|
28
17
|
},
|
|
29
18
|
elementType
|
|
30
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/useTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n useSetKeyboardNavigation,\n useTabsterAttributes,\n useMergedTabsterAttributes_unstable,\n} from '@fluentui/react-tabster';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../utils/dropdownKeyActions';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport type { OptionValue } from './OptionCollection.types';\n\nexport type UseTriggerSlotState = Pick<\n ComboboxBaseState,\n 'open' | 'getOptionById' | 'selectOption' | 'setOpen' | 'multiselect' | 'setHasFocus'\n>;\n\ntype UseTriggerSlotOptions = {\n state: UseTriggerSlotState;\n defaultProps: unknown;\n activeDescendantController: ActiveDescendantImperativeRef;\n};\n\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'button'>>,\n ref: React.Ref<HTMLButtonElement>,\n options: UseTriggerSlotOptions & { elementType: 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;\n\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'input'>>,\n ref: React.Ref<HTMLInputElement>,\n options: UseTriggerSlotOptions & { elementType: 'input' },\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n\n/**\n * Shared trigger behaviour for combobox and dropdown\n * @returns trigger slot with desired behaviour and props\n */\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'input'>> | NonNullable<Slot<'button'>>,\n ref: React.Ref<HTMLButtonElement> | React.Ref<HTMLInputElement>,\n options: UseTriggerSlotOptions & { elementType: 'input' | 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> | SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n const {\n state: { open, setOpen, setHasFocus },\n defaultProps,\n elementType,\n activeDescendantController,\n } = options;\n\n // need to prevent tabster from also handling escape when the dropdown is open\n // event.stopPropagation() isn't enough here, since tabster uses the capture phase\n const ignoreEscapeKeyAttribute = useTabsterAttributes({\n focusable: {\n ignoreKeydown: { Escape: open },\n },\n });\n\n const tabsterOverrides = useMergedTabsterAttributes_unstable(\n ignoreEscapeKeyAttribute,\n typeof defaultProps === 'object' ? defaultProps : {},\n );\n\n const trigger = slot.always(triggerSlotFromProp, {\n defaultProps: {\n type: 'text',\n 'aria-expanded': open,\n role: 'combobox',\n ...(typeof defaultProps === 'object' && defaultProps),\n ...tabsterOverrides,\n },\n elementType,\n });\n\n // handle trigger focus/blur\n const triggerRef = React.useRef<HTMLButtonElement | HTMLInputElement>(null);\n trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref) as React.Ref<HTMLButtonElement & HTMLInputElement>;\n\n // the trigger should open/close the popup on click or blur\n trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n setOpen(event, false);\n setHasFocus(false);\n }, trigger.onBlur);\n\n trigger.onFocus = mergeCallbacks(\n (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n if (event.target === event.currentTarget) {\n setHasFocus(true);\n }\n },\n trigger.onFocus,\n );\n trigger.onClick = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n },\n trigger.onClick,\n );\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks(\n useTriggerKeydown({ activeDescendantController, ...options.state }),\n trigger.onKeyDown,\n );\n\n return trigger as SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n}\n\nfunction useTriggerKeydown(\n options: {\n activeDescendantController: ActiveDescendantImperativeRef;\n } & Pick<UseTriggerSlotState, 'setOpen' | 'selectOption' | 'getOptionById' | 'multiselect' | 'open'>,\n) {\n const { activeDescendantController, getOptionById, setOpen, selectOption, multiselect, open } = options;\n\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n const first = () => {\n activeDescendantController.first();\n };\n\n const last = () => {\n activeDescendantController.last();\n };\n\n const next = (activeOption: OptionValue | undefined) => {\n if (activeOption) {\n activeDescendantController.next();\n } else {\n activeDescendantController.first();\n }\n };\n\n const previous = (activeOption: OptionValue | undefined) => {\n if (activeOption) {\n activeDescendantController.prev();\n } else {\n activeDescendantController.first();\n }\n };\n\n const pageUp = () => {\n for (let i = 0; i < 10; i++) {\n activeDescendantController.prev();\n }\n };\n\n const pageDown = () => {\n for (let i = 0; i < 10; i++) {\n activeDescendantController.next();\n }\n };\n\n const setKeyboardNavigation = useSetKeyboardNavigation();\n return useEventCallback((e: React.KeyboardEvent<HTMLInputElement> & React.KeyboardEvent<HTMLButtonElement>) => {\n const action = getDropdownActionFromKey(e, { open, multiselect });\n const activeOption = getActiveOption();\n\n switch (action) {\n case 'First':\n case 'Last':\n case 'Next':\n case 'Previous':\n case 'PageDown':\n case 'PageUp':\n case 'Open':\n case 'Close':\n case 'CloseSelect':\n case 'Select':\n e.preventDefault();\n break;\n }\n\n setKeyboardNavigation(true);\n\n switch (action) {\n case 'First':\n first();\n break;\n case 'Last':\n last();\n break;\n case 'Next':\n next(activeOption);\n break;\n case 'Previous':\n previous(activeOption);\n break;\n case 'PageDown':\n pageDown();\n break;\n case 'PageUp':\n pageUp();\n break;\n case 'Open':\n setOpen(e, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n e.stopPropagation();\n setOpen(e, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(e, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(e, activeOption);\n break;\n case 'Tab':\n !multiselect && activeOption && selectOption(e, activeOption);\n break;\n }\n });\n}\n"],"names":["React","useSetKeyboardNavigation","useTabsterAttributes","useMergedTabsterAttributes_unstable","mergeCallbacks","slot","useEventCallback","useMergedRefs","getDropdownActionFromKey","useTriggerSlot","triggerSlotFromProp","ref","options","state","open","setOpen","setHasFocus","defaultProps","elementType","activeDescendantController","ignoreEscapeKeyAttribute","focusable","ignoreKeydown","Escape","tabsterOverrides","trigger","always","type","role","triggerRef","useRef","onBlur","event","onFocus","target","currentTarget","onClick","onKeyDown","useTriggerKeydown","getOptionById","selectOption","multiselect","getActiveOption","useCallback","activeOptionId","active","undefined","first","last","next","activeOption","previous","prev","pageUp","i","pageDown","setKeyboardNavigation","e","action","preventDefault","stopPropagation","disabled"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/utils/useTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSetKeyboardNavigation } from '@fluentui/react-tabster';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../utils/dropdownKeyActions';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport type { OptionValue } from './OptionCollection.types';\n\nexport type UseTriggerSlotState = Pick<\n ComboboxBaseState,\n 'open' | 'getOptionById' | 'selectOption' | 'setOpen' | 'multiselect' | 'setHasFocus'\n>;\n\ntype UseTriggerSlotOptions = {\n state: UseTriggerSlotState;\n defaultProps: unknown;\n activeDescendantController: ActiveDescendantImperativeRef;\n};\n\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'button'>>,\n ref: React.Ref<HTMLButtonElement>,\n options: UseTriggerSlotOptions & { elementType: 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;\n\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'input'>>,\n ref: React.Ref<HTMLInputElement>,\n options: UseTriggerSlotOptions & { elementType: 'input' },\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n\n/**\n * Shared trigger behaviour for combobox and dropdown\n * @returns trigger slot with desired behaviour and props\n */\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'input'>> | NonNullable<Slot<'button'>>,\n ref: React.Ref<HTMLButtonElement> | React.Ref<HTMLInputElement>,\n options: UseTriggerSlotOptions & { elementType: 'input' | 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> | SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n const {\n state: { open, setOpen, setHasFocus },\n defaultProps,\n elementType,\n activeDescendantController,\n } = options;\n\n const trigger = slot.always(triggerSlotFromProp, {\n defaultProps: {\n type: 'text',\n 'aria-expanded': open,\n role: 'combobox',\n ...(typeof defaultProps === 'object' && defaultProps),\n },\n elementType,\n });\n\n // handle trigger focus/blur\n const triggerRef = React.useRef<HTMLButtonElement | HTMLInputElement>(null);\n trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref) as React.Ref<HTMLButtonElement & HTMLInputElement>;\n\n // the trigger should open/close the popup on click or blur\n trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n setOpen(event, false);\n setHasFocus(false);\n }, trigger.onBlur);\n\n trigger.onFocus = mergeCallbacks(\n (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n if (event.target === event.currentTarget) {\n setHasFocus(true);\n }\n },\n trigger.onFocus,\n );\n trigger.onClick = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n },\n trigger.onClick,\n );\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks(\n useTriggerKeydown({ activeDescendantController, ...options.state }),\n trigger.onKeyDown,\n );\n\n return trigger as SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n}\n\nfunction useTriggerKeydown(\n options: {\n activeDescendantController: ActiveDescendantImperativeRef;\n } & Pick<UseTriggerSlotState, 'setOpen' | 'selectOption' | 'getOptionById' | 'multiselect' | 'open'>,\n) {\n const { activeDescendantController, getOptionById, setOpen, selectOption, multiselect, open } = options;\n\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n const first = () => {\n activeDescendantController.first();\n };\n\n const last = () => {\n activeDescendantController.last();\n };\n\n const next = (activeOption: OptionValue | undefined) => {\n if (activeOption) {\n activeDescendantController.next();\n } else {\n activeDescendantController.first();\n }\n };\n\n const previous = (activeOption: OptionValue | undefined) => {\n if (activeOption) {\n activeDescendantController.prev();\n } else {\n activeDescendantController.first();\n }\n };\n\n const pageUp = () => {\n for (let i = 0; i < 10; i++) {\n activeDescendantController.prev();\n }\n };\n\n const pageDown = () => {\n for (let i = 0; i < 10; i++) {\n activeDescendantController.next();\n }\n };\n\n const setKeyboardNavigation = useSetKeyboardNavigation();\n return useEventCallback((e: React.KeyboardEvent<HTMLInputElement> & React.KeyboardEvent<HTMLButtonElement>) => {\n const action = getDropdownActionFromKey(e, { open, multiselect });\n const activeOption = getActiveOption();\n\n switch (action) {\n case 'First':\n case 'Last':\n case 'Next':\n case 'Previous':\n case 'PageDown':\n case 'PageUp':\n case 'Open':\n case 'Close':\n case 'CloseSelect':\n case 'Select':\n e.preventDefault();\n break;\n }\n\n setKeyboardNavigation(true);\n\n switch (action) {\n case 'First':\n first();\n break;\n case 'Last':\n last();\n break;\n case 'Next':\n next(activeOption);\n break;\n case 'Previous':\n previous(activeOption);\n break;\n case 'PageDown':\n pageDown();\n break;\n case 'PageUp':\n pageUp();\n break;\n case 'Open':\n setOpen(e, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n e.stopPropagation();\n setOpen(e, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(e, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(e, activeOption);\n break;\n case 'Tab':\n !multiselect && activeOption && selectOption(e, activeOption);\n break;\n }\n });\n}\n"],"names":["React","useSetKeyboardNavigation","mergeCallbacks","slot","useEventCallback","useMergedRefs","getDropdownActionFromKey","useTriggerSlot","triggerSlotFromProp","ref","options","state","open","setOpen","setHasFocus","defaultProps","elementType","activeDescendantController","trigger","always","type","role","triggerRef","useRef","onBlur","event","onFocus","target","currentTarget","onClick","onKeyDown","useTriggerKeydown","getOptionById","selectOption","multiselect","getActiveOption","useCallback","activeOptionId","active","undefined","first","last","next","activeOption","previous","prev","pageUp","i","pageDown","setKeyboardNavigation","e","action","preventDefault","stopPropagation","disabled"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Combobox.ts"],"sourcesContent":["export type {\n ActiveOptionChangeData,\n BaseComboboxProps,\n BaseComboboxState,\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './components/Combobox/index';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useComboboxBase_unstable,\n useCombobox_unstable,\n} from './components/Combobox/index';\n"],"names":["Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxBase_unstable","useCombobox_unstable"],"mappings":";;;;;;;;;;;;eAYEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eAEvBE,+BAAwB;;;eADxBD,iCAA0B;;;eAE1BE,2BAAoB;;;uBACf,
|
|
1
|
+
{"version":3,"sources":["../src/Combobox.ts"],"sourcesContent":["export type {\n ActiveOptionChangeData,\n BaseComboboxProps,\n BaseComboboxState,\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './components/Combobox/index';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useComboboxBase_unstable,\n useCombobox_unstable,\n} from './components/Combobox/index';\n"],"names":["Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxBase_unstable","useCombobox_unstable"],"mappings":";;;;;;;;;;;;eAYEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eAEvBE,+BAAwB;;;eADxBD,iCAA0B;;;eAE1BE,2BAAoB;;;uBACf,iCAA8B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Dropdown.ts"],"sourcesContent":["export type {\n ActiveOptionChangeData,\n DropdownBaseHookProps,\n DropdownBaseHookState,\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './components/Dropdown/index';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdownBase_unstable,\n useDropdown_unstable,\n} from './components/Dropdown/index';\n"],"names":["Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdownBase_unstable","useDropdown_unstable"],"mappings":";;;;;;;;;;;;eAYEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eAEvBE,+BAAwB;;;eADxBD,iCAA0B;;;eAE1BE,2BAAoB;;;uBACf,
|
|
1
|
+
{"version":3,"sources":["../src/Dropdown.ts"],"sourcesContent":["export type {\n ActiveOptionChangeData,\n DropdownBaseHookProps,\n DropdownBaseHookState,\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './components/Dropdown/index';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdownBase_unstable,\n useDropdown_unstable,\n} from './components/Dropdown/index';\n"],"names":["Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdownBase_unstable","useDropdown_unstable"],"mappings":";;;;;;;;;;;;eAYEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eAEvBE,+BAAwB;;;eADxBD,iCAA0B;;;eAE1BE,2BAAoB;;;uBACf,iCAA8B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Listbox.ts"],"sourcesContent":["export type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './components/Listbox/index';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './components/Listbox/index';\n"],"names":["Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable"],"mappings":";;;;;;;;;;;;eAEEA,cAAO;;;eACPC,wBAAiB;;;eACjBC,6BAAsB;;;eACtBC,gCAAyB;;;eACzBC,0BAAmB;;;uBACd,
|
|
1
|
+
{"version":3,"sources":["../src/Listbox.ts"],"sourcesContent":["export type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './components/Listbox/index';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './components/Listbox/index';\n"],"names":["Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable"],"mappings":";;;;;;;;;;;;eAEEA,cAAO;;;eACPC,wBAAiB;;;eACjBC,6BAAsB;;;eACtBC,gCAAyB;;;eACzBC,0BAAmB;;;uBACd,gCAA6B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Option.ts"],"sourcesContent":["export type { OptionProps, OptionSlots, OptionState } from './components/Option/index';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n useOptionBase_unstable,\n} from './components/Option/index';\n"],"names":["Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","useOptionBase_unstable"],"mappings":";;;;;;;;;;;;eAEEA,aAAM;;;eACNC,uBAAgB;;;eAChBC,4BAAqB;;;eAGrBG,6BAAsB;;;eAFtBF,+BAAwB;;;eACxBC,yBAAkB;;;uBAEb
|
|
1
|
+
{"version":3,"sources":["../src/Option.ts"],"sourcesContent":["export type { OptionProps, OptionSlots, OptionState } from './components/Option/index';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n useOptionBase_unstable,\n} from './components/Option/index';\n"],"names":["Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","useOptionBase_unstable"],"mappings":";;;;;;;;;;;;eAEEA,aAAM;;;eACNC,uBAAgB;;;eAChBC,4BAAqB;;;eAGrBG,6BAAsB;;;eAFtBF,+BAAwB;;;eACxBC,yBAAkB;;;uBAEb,+BAA4B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/OptionGroup.ts"],"sourcesContent":["export type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './components/OptionGroup/index';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './components/OptionGroup/index';\n"],"names":["OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable"],"mappings":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,
|
|
1
|
+
{"version":3,"sources":["../src/OptionGroup.ts"],"sourcesContent":["export type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './components/OptionGroup/index';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './components/OptionGroup/index';\n"],"names":["OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable"],"mappings":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,oCAAiC"}
|
|
@@ -11,10 +11,10 @@ Object.defineProperty(exports, "Combobox", {
|
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
-
const _useCombobox = require("./useCombobox");
|
|
15
|
-
const _renderCombobox = require("./renderCombobox");
|
|
16
|
-
const _useComboboxStylesstyles = require("./useComboboxStyles.styles");
|
|
17
|
-
const _useComboboxContextValues = require("../../contexts/useComboboxContextValues");
|
|
14
|
+
const _useCombobox = require("./useCombobox.cjs");
|
|
15
|
+
const _renderCombobox = require("./renderCombobox.cjs");
|
|
16
|
+
const _useComboboxStylesstyles = require("./useComboboxStyles.styles.cjs");
|
|
17
|
+
const _useComboboxContextValues = require("../../contexts/useComboboxContextValues.cjs");
|
|
18
18
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
19
19
|
const Combobox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
20
20
|
const state = (0, _useCombobox.useCombobox_unstable)(props, ref);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Combobox/Combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n const state = useCombobox_unstable(props, ref);\n const contextValues = useComboboxContextValues(state);\n\n useComboboxStyles_unstable(state);\n\n useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,
|
|
1
|
+
{"version":3,"sources":["../src/components/Combobox/Combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n const state = useCombobox_unstable(props, ref);\n const contextValues = useComboboxContextValues(state);\n\n useComboboxStyles_unstable(state);\n\n useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,mBAAgB;gCACb,sBAAmB;yCAChB,gCAA6B;0CAE/B,6CAA0C;qCAEvC,kCAAkC;AAKvE,MAAMM,WAAAA,WAAAA,GAA+CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQT,iCAAAA,EAAqBO,OAAOC;IAC1C,MAAME,oBAAgBP,kDAAAA,EAAyBM;QAE/CP,mDAAAA,EAA2BO;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOR,uCAAAA,EAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
|
|
@@ -28,7 +28,7 @@ _export(exports, {
|
|
|
28
28
|
return _useCombobox.useCombobox_unstable;
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
|
-
const _Combobox = require("./Combobox");
|
|
32
|
-
const _renderCombobox = require("./renderCombobox");
|
|
33
|
-
const _useCombobox = require("./useCombobox");
|
|
34
|
-
const _useComboboxStylesstyles = require("./useComboboxStyles.styles");
|
|
31
|
+
const _Combobox = require("./Combobox.cjs");
|
|
32
|
+
const _renderCombobox = require("./renderCombobox.cjs");
|
|
33
|
+
const _useCombobox = require("./useCombobox.cjs");
|
|
34
|
+
const _useComboboxStylesstyles = require("./useComboboxStyles.styles.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Combobox/index.ts"],"sourcesContent":["export { Combobox } from './Combobox';\nexport type {\n ActiveOptionChangeData,\n BaseComboboxProps,\n BaseComboboxState,\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox.types';\nexport { renderCombobox_unstable } from './renderCombobox';\nexport { useComboboxBase_unstable, useCombobox_unstable } from './useCombobox';\nexport { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';\n"],"names":["Combobox","renderCombobox_unstable","useComboboxBase_unstable","useCombobox_unstable","comboboxClassNames","useComboboxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAcRI,2CAAkB;;;eAFlBH,uCAAuB;;;eACvBC,qCAAwB;;;eACJG,mDAA0B;;;eADpBF,iCAAoB;;;0BAb9B,
|
|
1
|
+
{"version":3,"sources":["../src/components/Combobox/index.ts"],"sourcesContent":["export { Combobox } from './Combobox';\nexport type {\n ActiveOptionChangeData,\n BaseComboboxProps,\n BaseComboboxState,\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox.types';\nexport { renderCombobox_unstable } from './renderCombobox';\nexport { useComboboxBase_unstable, useCombobox_unstable } from './useCombobox';\nexport { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';\n"],"names":["Combobox","renderCombobox_unstable","useComboboxBase_unstable","useCombobox_unstable","comboboxClassNames","useComboboxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAcRI,2CAAkB;;;eAFlBH,uCAAuB;;;eACvBC,qCAAwB;;;eACJG,mDAA0B;;;eADpBF,iCAAoB;;;0BAb9B,gBAAa;gCAYE,sBAAmB;6BACI,mBAAgB;yCAChB,gCAA6B"}
|
|
@@ -12,8 +12,8 @@ const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
|
12
12
|
const _reactportal = require("@fluentui/react-portal");
|
|
13
13
|
const _reactaria = require("@fluentui/react-aria");
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
-
const _ComboboxContext = require("../../contexts/ComboboxContext");
|
|
16
|
-
const _ListboxContext = require("../../contexts/ListboxContext");
|
|
15
|
+
const _ComboboxContext = require("../../contexts/ComboboxContext.cjs");
|
|
16
|
+
const _ListboxContext = require("../../contexts/ListboxContext.cjs");
|
|
17
17
|
const renderCombobox_unstable = (state, contextValues)=>{
|
|
18
18
|
(0, _reactutilities.assertSlots)(state);
|
|
19
19
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, BaseComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: BaseComboboxState, contextValues: ComboboxContextValues): JSXElement => {\n assertSlots<ComboboxSlots>(state);\n\n return (\n <state.root>\n <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n <ListboxProvider value={contextValues.listbox}>\n {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n <ComboboxContext.Provider value={contextValues.combobox}>\n <state.input />\n {state.clearIcon && <state.clearIcon />}\n {state.expandIcon && <state.expandIcon />}\n {state.listbox &&\n (state.inlinePopup ? (\n <state.listbox />\n ) : (\n <Portal mountNode={state.mountNode}>\n <state.listbox />\n </Portal>\n ))}\n {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n </ComboboxContext.Provider>\n </ListboxProvider>\n </ActiveDescendantContextProvider>\n </state.root>\n );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","ListboxProvider","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","listbox","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","mountNode"],"mappings":";;;;+BAcaK;;;;;;4BAbb,iCAAiD;6BAC1B,yBAAyB;2BACA,uBAAuB;gCAE3C,4BAA4B;iCAExB,
|
|
1
|
+
{"version":3,"sources":["../src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, BaseComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: BaseComboboxState, contextValues: ComboboxContextValues): JSXElement => {\n assertSlots<ComboboxSlots>(state);\n\n return (\n <state.root>\n <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n <ListboxProvider value={contextValues.listbox}>\n {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n <ComboboxContext.Provider value={contextValues.combobox}>\n <state.input />\n {state.clearIcon && <state.clearIcon />}\n {state.expandIcon && <state.expandIcon />}\n {state.listbox &&\n (state.inlinePopup ? (\n <state.listbox />\n ) : (\n <Portal mountNode={state.mountNode}>\n <state.listbox />\n </Portal>\n ))}\n {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n </ComboboxContext.Provider>\n </ListboxProvider>\n </ActiveDescendantContextProvider>\n </state.root>\n );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","ListboxProvider","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","listbox","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","mountNode"],"mappings":";;;;+BAcaK;;;;;;4BAbb,iCAAiD;6BAC1B,yBAAyB;2BACA,uBAAuB;gCAE3C,4BAA4B;iCAExB,oCAAiC;gCAEjC,mCAAgC;AAKzD,gCAAgC,CAACC,OAA0BC;QAChEL,2BAAAA,EAA2BI;IAE3B,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACP,0CAAAA,EAAAA;YAAgCQ,OAAOF,cAAcG,gBAAgB;sBACpE,WAAA,OAAA,eAAA,EAACN,+BAAAA,EAAAA;gBAAgBK,OAAOF,cAAcI,OAAO;0BAE3C,WAAA,OAAA,gBAAA,EAACR,gCAAAA,CAAgBS,QAAQ,EAAA;oBAACH,OAAOF,cAAcM,QAAQ;;0CACrD,eAAA,EAACP,MAAMQ,KAAK,EAAA,CAAA;wBACXR,MAAMS,SAAS,IAAA,WAAA,GAAI,mBAAA,EAACT,MAAMS,SAAS,EAAA,CAAA;wBACnCT,MAAMU,UAAU,IAAA,WAAA,OAAI,eAAA,EAACV,MAAMU,UAAU,EAAA,CAAA;wBACrCV,MAAMK,OAAO,IACXL,CAAAA,MAAMW,WAAW,GAAA,WAAA,OAChB,eAAA,EAACX,MAAMK,OAAO,EAAA,CAAA,KAAA,WAAA,OAEd,eAAA,EAACX,mBAAAA,EAAAA;4BAAOkB,WAAWZ,MAAMY,SAAS;sCAChC,WAAA,OAAA,eAAA,EAACZ,MAAMK,OAAO,EAAA,CAAA;2BAElB;;;;;;AAOd,EAAE"}
|
|
@@ -24,12 +24,13 @@ const _reactfield = require("@fluentui/react-field");
|
|
|
24
24
|
const _reacticons = require("@fluentui/react-icons");
|
|
25
25
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
26
26
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
27
|
-
const _useComboboxBaseState = require("../../utils/useComboboxBaseState");
|
|
28
|
-
const _useComboboxPositioning = require("../../utils/useComboboxPositioning");
|
|
29
|
-
const _Listbox = require("../Listbox/Listbox");
|
|
30
|
-
const _useListboxSlot = require("../../utils/useListboxSlot");
|
|
31
|
-
const _useInputTriggerSlot = require("./useInputTriggerSlot");
|
|
32
|
-
const _isComboboxOptionElement = require("../../utils/isComboboxOptionElement");
|
|
27
|
+
const _useComboboxBaseState = require("../../utils/useComboboxBaseState.cjs");
|
|
28
|
+
const _useComboboxPositioning = require("../../utils/useComboboxPositioning.cjs");
|
|
29
|
+
const _Listbox = require("../Listbox/Listbox.cjs");
|
|
30
|
+
const _useListboxSlot = require("../../utils/useListboxSlot.cjs");
|
|
31
|
+
const _useInputTriggerSlot = require("./useInputTriggerSlot.cjs");
|
|
32
|
+
const _isComboboxOptionElement = require("../../utils/isComboboxOptionElement.cjs");
|
|
33
|
+
const _useTabsterEscapeIgnore = require("../../hooks/useTabsterEscapeIgnore.cjs");
|
|
33
34
|
const useComboboxBase_unstable = (props, ref)=>{
|
|
34
35
|
var _state_clearIcon, _state_clearIcon1;
|
|
35
36
|
// Merge props from surrounding <Field>, if any
|
|
@@ -190,7 +191,9 @@ const useComboboxBase_unstable = (props, ref)=>{
|
|
|
190
191
|
return state;
|
|
191
192
|
};
|
|
192
193
|
const useCombobox_unstable = (props, ref)=>{
|
|
193
|
-
const
|
|
194
|
+
const fieldContext = (0, _reactfield.useFieldContext_unstable)();
|
|
195
|
+
var _fieldContext_size;
|
|
196
|
+
const { appearance = 'outline', size = (_fieldContext_size = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.size) !== null && _fieldContext_size !== void 0 ? _fieldContext_size : 'medium', ...baseProps } = props;
|
|
194
197
|
const baseState = useComboboxBase_unstable(baseProps, ref);
|
|
195
198
|
if (baseState.clearIcon) {
|
|
196
199
|
var _baseState_clearIcon;
|
|
@@ -205,6 +208,10 @@ const useCombobox_unstable = (props, ref)=>{
|
|
|
205
208
|
return {
|
|
206
209
|
...baseState,
|
|
207
210
|
appearance,
|
|
208
|
-
size
|
|
211
|
+
size,
|
|
212
|
+
input: {
|
|
213
|
+
...(0, _useTabsterEscapeIgnore.useTabsterEscapeIgnore)(baseState.input, baseState.open),
|
|
214
|
+
...baseState.input
|
|
215
|
+
}
|
|
209
216
|
};
|
|
210
217
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useFieldContext_unstable, useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n mergeCallbacks,\n useEventCallback,\n useId,\n useMergedRefs,\n slot,\n useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type {\n BaseComboboxProps,\n BaseComboboxState,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxState,\n} from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';\nimport { useTabsterEscapeIgnore } from '../../hooks/useTabsterEscapeIgnore';\n\n/**\n * Create the base state required to render Combobox, without design-only props.\n *\n * @param props - props from this instance of Combobox (without appearance and size)\n * @param ref - reference to root HTMLInputElement of Combobox\n */\nexport const useComboboxBase_unstable = (\n props: BaseComboboxProps,\n ref: React.Ref<HTMLInputElement>,\n): BaseComboboxState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n matchOption: isComboboxOptionElement,\n });\n const comboboxInternalState = useComboboxBaseState({ ...props, editable: true, activeDescendantController });\n const { appearance: _appearance, size: _size, ...baseState } = comboboxInternalState;\n\n const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } =\n baseState;\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n const { disableAutoFocus = false, freeform, inlinePopup } = props;\n const comboId = useId('combobox-');\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['children'],\n });\n\n const triggerRef = React.useRef<HTMLInputElement>(null);\n\n const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n state: comboboxInternalState,\n triggerRef,\n defaultProps: {\n children: props.children,\n disableAutoFocus,\n },\n });\n\n const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n state: comboboxInternalState,\n freeform,\n defaultProps: {\n type: 'text',\n value: value ?? '',\n 'aria-controls': open ? listbox?.id : undefined,\n ...triggerNativeProps,\n },\n activeDescendantController,\n });\n\n const rootSlot = slot.always(props.root, {\n defaultProps: {\n 'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n ...rootNativeProps,\n },\n elementType: 'div',\n });\n rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;\n const state: BaseComboboxState = {\n components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n root: rootSlot,\n input: triggerSlot,\n listbox: open || hasFocus ? listbox : undefined,\n clearIcon: slot.optional(props.clearIcon, {\n defaultProps: {\n 'aria-hidden': 'true',\n },\n elementType: 'span',\n renderByDefault: true,\n }),\n expandIcon: slot.optional(props.expandIcon, {\n renderByDefault: true,\n defaultProps: {\n 'aria-disabled': disabled ? 'true' : undefined,\n 'aria-expanded': open,\n role: 'button',\n },\n elementType: 'span',\n }),\n showClearIcon,\n activeDescendantController,\n ...baseState,\n };\n\n const { targetDocument } = useFluent();\n\n useOnClickOutside({\n element: targetDocument,\n callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n disabled: !open,\n });\n\n /* handle open/close + focus change when clicking expandIcon */\n const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n\n const onExpandIconMouseDown = useEventCallback(\n // eslint-disable-next-line react-hooks/refs\n mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n event.preventDefault();\n state.setOpen(event, !state.open);\n triggerRef.current?.focus();\n }),\n );\n\n if (state.expandIcon) {\n state.expandIcon.onMouseDown = onExpandIconMouseDown;\n\n // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n // using the following steps:\n // 1. If there is an aria-label, it is \"Open [aria-label]\"\n // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n if (!hasExpandLabel) {\n if (props['aria-labelledby']) {\n const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n state.expandIcon['aria-label'] = defaultOpenString;\n state.expandIcon.id = chevronId;\n state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n } else if (props['aria-label']) {\n state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n } else {\n state.expandIcon['aria-label'] = defaultOpenString;\n }\n }\n }\n\n const onClearIconMouseDown = useEventCallback(\n mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n ev.preventDefault();\n }),\n );\n const onClearIconClick = useEventCallback(\n mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n clearSelection(ev);\n }),\n );\n\n if (state.clearIcon) {\n state.clearIcon.onMouseDown = onClearIconMouseDown;\n state.clearIcon.onClick = onClearIconClick;\n }\n\n // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n if (multiselect) {\n state.clearIcon = undefined;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n React.useEffect(() => {\n if (clearable && multiselect) {\n // eslint-disable-next-line no-console\n console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n }\n }, [clearable, multiselect]);\n }\n\n return state;\n};\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n const fieldContext = useFieldContext_unstable();\n const { appearance = 'outline', size = fieldContext?.size ?? 'medium', ...baseProps } = props;\n const baseState = useComboboxBase_unstable(baseProps, ref);\n\n if (baseState.clearIcon) {\n baseState.clearIcon.children ??= <DismissIcon />;\n }\n\n if (baseState.expandIcon) {\n baseState.expandIcon.children ??= <ChevronDownIcon />;\n }\n\n return {\n ...baseState,\n appearance,\n size,\n input: {\n ...useTabsterEscapeIgnore(baseState.input, baseState.open),\n ...baseState.input,\n },\n };\n};\n"],"names":["React","useActiveDescendant","useFieldContext_unstable","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useOnClickOutside","useFluent_unstable","useFluent","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","isComboboxOptionElement","useTabsterEscapeIgnore","useComboboxBase_unstable","props","ref","state","supportsLabelFor","supportsRequired","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","comboboxInternalState","editable","appearance","_appearance","size","_size","baseState","clearable","clearSelection","disabled","multiselect","open","selectedOptions","setOpen","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disableAutoFocus","freeform","inlinePopup","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","id","undefined","rootSlot","always","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","targetDocument","element","callback","event","refs","onMouseDown","onIconMouseDown","onExpandIconMouseDown","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error","useCombobox_unstable","fieldContext","baseProps"],"mappings":"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"}
|