@fluentui/react-combobox 9.2.4 → 9.2.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/.swcrc +30 -0
- package/CHANGELOG.json +82 -1
- package/CHANGELOG.md +22 -2
- package/lib/Combobox.js.map +1 -1
- package/lib/ComboboxField.js.map +1 -1
- package/lib/Dropdown.js.map +1 -1
- package/lib/Listbox.js.map +1 -1
- package/lib/Option.js.map +1 -1
- package/lib/OptionGroup.js.map +1 -1
- package/lib/components/Combobox/Combobox.js.map +1 -1
- package/lib/components/Combobox/Combobox.types.js +1 -1
- package/lib/components/Combobox/Combobox.types.js.map +1 -1
- package/lib/components/Combobox/index.js.map +1 -1
- package/lib/components/Combobox/renderCombobox.js +2 -12
- package/lib/components/Combobox/renderCombobox.js.map +1 -1
- package/lib/components/Combobox/useCombobox.js +11 -11
- package/lib/components/Combobox/useCombobox.js.map +1 -1
- package/lib/components/Combobox/useComboboxStyles.js.map +1 -1
- package/lib/components/ComboboxField/ComboboxField.js +1 -2
- package/lib/components/ComboboxField/ComboboxField.js.map +1 -1
- package/lib/components/ComboboxField/index.js.map +1 -1
- package/lib/components/Dropdown/Dropdown.js.map +1 -1
- package/lib/components/Dropdown/Dropdown.types.js.map +1 -1
- package/lib/components/Dropdown/index.js.map +1 -1
- package/lib/components/Dropdown/renderDropdown.js +2 -12
- package/lib/components/Dropdown/renderDropdown.js.map +1 -1
- package/lib/components/Dropdown/useDropdown.js +4 -4
- package/lib/components/Dropdown/useDropdown.js.map +1 -1
- package/lib/components/Dropdown/useDropdownStyles.js.map +1 -1
- package/lib/components/Listbox/Listbox.js.map +1 -1
- package/lib/components/Listbox/Listbox.types.js.map +1 -1
- package/lib/components/Listbox/index.js.map +1 -1
- package/lib/components/Listbox/renderListbox.js +1 -3
- package/lib/components/Listbox/renderListbox.js.map +1 -1
- package/lib/components/Listbox/useListbox.js.map +1 -1
- package/lib/components/Listbox/useListboxStyles.js.map +1 -1
- package/lib/components/Option/Option.js.map +1 -1
- package/lib/components/Option/Option.types.js +1 -1
- package/lib/components/Option/Option.types.js.map +1 -1
- package/lib/components/Option/index.js.map +1 -1
- package/lib/components/Option/renderOption.js +1 -5
- package/lib/components/Option/renderOption.js.map +1 -1
- package/lib/components/Option/useOption.js +4 -4
- package/lib/components/Option/useOption.js.map +1 -1
- package/lib/components/Option/useOptionStyles.js.map +1 -1
- package/lib/components/OptionGroup/OptionGroup.js.map +1 -1
- package/lib/components/OptionGroup/OptionGroup.types.js.map +1 -1
- package/lib/components/OptionGroup/index.js.map +1 -1
- package/lib/components/OptionGroup/renderOptionGroup.js +1 -5
- package/lib/components/OptionGroup/renderOptionGroup.js.map +1 -1
- package/lib/components/OptionGroup/useOptionGroup.js +1 -0
- package/lib/components/OptionGroup/useOptionGroup.js.map +1 -1
- package/lib/components/OptionGroup/useOptionGroupStyles.js.map +1 -1
- package/lib/contexts/ComboboxContext.js.map +1 -1
- package/lib/contexts/ListboxContext.js.map +1 -1
- package/lib/contexts/useComboboxContextValues.js.map +1 -1
- package/lib/contexts/useListboxContextValues.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/ComboboxBase.types.js +1 -1
- package/lib/utils/ComboboxBase.types.js.map +1 -1
- package/lib/utils/OptionCollection.types.js.map +1 -1
- package/lib/utils/Selection.types.js +1 -1
- package/lib/utils/Selection.types.js.map +1 -1
- package/lib/utils/dropdownKeyActions.js +1 -0
- package/lib/utils/dropdownKeyActions.js.map +1 -1
- package/lib/utils/internalTokens.js.map +1 -1
- package/lib/utils/useComboboxBaseState.js +1 -3
- package/lib/utils/useComboboxBaseState.js.map +1 -1
- package/lib/utils/useComboboxPopup.js.map +1 -1
- package/lib/utils/useOptionCollection.js +4 -4
- package/lib/utils/useOptionCollection.js.map +1 -1
- package/lib/utils/useScrollOptionsIntoView.js.map +1 -1
- package/lib/utils/useSelection.js.map +1 -1
- package/lib/utils/useTriggerListboxSlots.js +6 -6
- package/lib/utils/useTriggerListboxSlots.js.map +1 -1
- package/lib-commonjs/Combobox.js +5 -4
- package/lib-commonjs/Combobox.js.map +1 -1
- package/lib-commonjs/ComboboxField.js +5 -4
- package/lib-commonjs/ComboboxField.js.map +1 -1
- package/lib-commonjs/Dropdown.js +5 -4
- package/lib-commonjs/Dropdown.js.map +1 -1
- package/lib-commonjs/Listbox.js +5 -4
- package/lib-commonjs/Listbox.js.map +1 -1
- package/lib-commonjs/Option.js +5 -4
- package/lib-commonjs/Option.js.map +1 -1
- package/lib-commonjs/OptionGroup.js +5 -4
- package/lib-commonjs/OptionGroup.js.map +1 -1
- package/lib-commonjs/components/Combobox/Combobox.js +21 -22
- package/lib-commonjs/components/Combobox/Combobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/Combobox.types.js +5 -2
- package/lib-commonjs/components/Combobox/Combobox.types.js.map +1 -1
- package/lib-commonjs/components/Combobox/index.js +9 -8
- package/lib-commonjs/components/Combobox/index.js.map +1 -1
- package/lib-commonjs/components/Combobox/renderCombobox.js +17 -30
- package/lib-commonjs/components/Combobox/renderCombobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/useCombobox.js +220 -246
- package/lib-commonjs/components/Combobox/useCombobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.js +642 -292
- package/lib-commonjs/components/Combobox/useComboboxStyles.js.map +1 -1
- package/lib-commonjs/components/ComboboxField/ComboboxField.js +17 -11
- package/lib-commonjs/components/ComboboxField/ComboboxField.js.map +1 -1
- package/lib-commonjs/components/ComboboxField/index.js +5 -4
- package/lib-commonjs/components/ComboboxField/index.js.map +1 -1
- package/lib-commonjs/components/Dropdown/Dropdown.js +21 -22
- package/lib-commonjs/components/Dropdown/Dropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/Dropdown.types.js +3 -2
- package/lib-commonjs/components/Dropdown/Dropdown.types.js.map +1 -1
- package/lib-commonjs/components/Dropdown/index.js +9 -8
- package/lib-commonjs/components/Dropdown/index.js.map +1 -1
- package/lib-commonjs/components/Dropdown/renderDropdown.js +17 -30
- package/lib-commonjs/components/Dropdown/renderDropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdown.js +138 -152
- package/lib-commonjs/components/Dropdown/useDropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdownStyles.js +618 -279
- package/lib-commonjs/components/Dropdown/useDropdownStyles.js.map +1 -1
- package/lib-commonjs/components/Listbox/Listbox.js +21 -22
- package/lib-commonjs/components/Listbox/Listbox.js.map +1 -1
- package/lib-commonjs/components/Listbox/Listbox.types.js +3 -2
- package/lib-commonjs/components/Listbox/Listbox.types.js.map +1 -1
- package/lib-commonjs/components/Listbox/index.js +9 -8
- package/lib-commonjs/components/Listbox/index.js.map +1 -1
- package/lib-commonjs/components/Listbox/renderListbox.js +16 -21
- package/lib-commonjs/components/Listbox/renderListbox.js.map +1 -1
- package/lib-commonjs/components/Listbox/useListbox.js +93 -109
- package/lib-commonjs/components/Listbox/useListbox.js.map +1 -1
- package/lib-commonjs/components/Listbox/useListboxStyles.js +59 -35
- package/lib-commonjs/components/Listbox/useListboxStyles.js.map +1 -1
- package/lib-commonjs/components/Option/Option.js +19 -20
- package/lib-commonjs/components/Option/Option.js.map +1 -1
- package/lib-commonjs/components/Option/Option.types.js +5 -2
- package/lib-commonjs/components/Option/Option.types.js.map +1 -1
- package/lib-commonjs/components/Option/index.js +9 -8
- package/lib-commonjs/components/Option/index.js.map +1 -1
- package/lib-commonjs/components/Option/renderOption.js +13 -20
- package/lib-commonjs/components/Option/renderOption.js.map +1 -1
- package/lib-commonjs/components/Option/useOption.js +129 -131
- package/lib-commonjs/components/Option/useOption.js.map +1 -1
- package/lib-commonjs/components/Option/useOptionStyles.js +327 -140
- package/lib-commonjs/components/Option/useOptionStyles.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/OptionGroup.js +19 -20
- package/lib-commonjs/components/OptionGroup/OptionGroup.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/OptionGroup.types.js +3 -2
- package/lib-commonjs/components/OptionGroup/OptionGroup.types.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/index.js +9 -8
- package/lib-commonjs/components/OptionGroup/index.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/renderOptionGroup.js +13 -20
- package/lib-commonjs/components/OptionGroup/renderOptionGroup.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/useOptionGroup.js +31 -38
- package/lib-commonjs/components/OptionGroup/useOptionGroup.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.js +107 -53
- package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.js.map +1 -1
- package/lib-commonjs/contexts/ComboboxContext.js +30 -22
- package/lib-commonjs/contexts/ComboboxContext.js.map +1 -1
- package/lib-commonjs/contexts/ListboxContext.js +26 -18
- package/lib-commonjs/contexts/ListboxContext.js.map +1 -1
- package/lib-commonjs/contexts/useComboboxContextValues.js +23 -32
- package/lib-commonjs/contexts/useComboboxContextValues.js.map +1 -1
- package/lib-commonjs/contexts/useListboxContextValues.js +26 -32
- package/lib-commonjs/contexts/useListboxContextValues.js.map +1 -1
- package/lib-commonjs/index.js +53 -201
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/ComboboxBase.types.js +5 -2
- package/lib-commonjs/utils/ComboboxBase.types.js.map +1 -1
- package/lib-commonjs/utils/OptionCollection.types.js +3 -2
- package/lib-commonjs/utils/OptionCollection.types.js.map +1 -1
- package/lib-commonjs/utils/Selection.types.js +5 -2
- package/lib-commonjs/utils/Selection.types.js.map +1 -1
- package/lib-commonjs/utils/dropdownKeyActions.js +80 -85
- package/lib-commonjs/utils/dropdownKeyActions.js.map +1 -1
- package/lib-commonjs/utils/internalTokens.js +11 -8
- package/lib-commonjs/utils/internalTokens.js.map +1 -1
- package/lib-commonjs/utils/useComboboxBaseState.js +106 -108
- package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
- package/lib-commonjs/utils/useComboboxPopup.js +33 -33
- package/lib-commonjs/utils/useComboboxPopup.js.map +1 -1
- package/lib-commonjs/utils/useOptionCollection.js +74 -71
- package/lib-commonjs/utils/useOptionCollection.js.map +1 -1
- package/lib-commonjs/utils/useScrollOptionsIntoView.js +35 -38
- package/lib-commonjs/utils/useScrollOptionsIntoView.js.map +1 -1
- package/lib-commonjs/utils/useSelection.js +66 -55
- package/lib-commonjs/utils/useSelection.js.map +1 -1
- package/lib-commonjs/utils/useTriggerListboxSlots.js +115 -129
- package/lib-commonjs/utils/useTriggerListboxSlots.js.map +1 -1
- package/package.json +14 -13
- package/lib-amd/Combobox.js +0 -6
- package/lib-amd/Combobox.js.map +0 -1
- package/lib-amd/ComboboxField.js +0 -6
- package/lib-amd/ComboboxField.js.map +0 -1
- package/lib-amd/Dropdown.js +0 -6
- package/lib-amd/Dropdown.js.map +0 -1
- package/lib-amd/Listbox.js +0 -6
- package/lib-amd/Listbox.js.map +0 -1
- package/lib-amd/Option.js +0 -6
- package/lib-amd/Option.js.map +0 -1
- package/lib-amd/OptionGroup.js +0 -6
- package/lib-amd/OptionGroup.js.map +0 -1
- package/lib-amd/components/Combobox/Combobox.js +0 -18
- package/lib-amd/components/Combobox/Combobox.js.map +0 -1
- package/lib-amd/components/Combobox/Combobox.types.js +0 -5
- package/lib-amd/components/Combobox/Combobox.types.js.map +0 -1
- package/lib-amd/components/Combobox/index.js +0 -10
- package/lib-amd/components/Combobox/index.js.map +0 -1
- package/lib-amd/components/Combobox/renderCombobox.js +0 -20
- package/lib-amd/components/Combobox/renderCombobox.js.map +0 -1
- package/lib-amd/components/Combobox/useCombobox.js +0 -204
- package/lib-amd/components/Combobox/useCombobox.js.map +0 -1
- package/lib-amd/components/Combobox/useComboboxStyles.js +0 -152
- package/lib-amd/components/Combobox/useComboboxStyles.js.map +0 -1
- package/lib-amd/components/ComboboxField/ComboboxField.js +0 -10
- package/lib-amd/components/ComboboxField/ComboboxField.js.map +0 -1
- package/lib-amd/components/ComboboxField/index.js +0 -6
- package/lib-amd/components/ComboboxField/index.js.map +0 -1
- package/lib-amd/components/Dropdown/Dropdown.js +0 -18
- package/lib-amd/components/Dropdown/Dropdown.js.map +0 -1
- package/lib-amd/components/Dropdown/Dropdown.types.js +0 -5
- package/lib-amd/components/Dropdown/Dropdown.types.js.map +0 -1
- package/lib-amd/components/Dropdown/index.js +0 -10
- package/lib-amd/components/Dropdown/index.js.map +0 -1
- package/lib-amd/components/Dropdown/renderDropdown.js +0 -21
- package/lib-amd/components/Dropdown/renderDropdown.js.map +0 -1
- package/lib-amd/components/Dropdown/useDropdown.js +0 -121
- package/lib-amd/components/Dropdown/useDropdown.js.map +0 -1
- package/lib-amd/components/Dropdown/useDropdownStyles.js +0 -127
- package/lib-amd/components/Dropdown/useDropdownStyles.js.map +0 -1
- package/lib-amd/components/Listbox/Listbox.js +0 -18
- package/lib-amd/components/Listbox/Listbox.js.map +0 -1
- package/lib-amd/components/Listbox/Listbox.types.js +0 -5
- package/lib-amd/components/Listbox/Listbox.types.js.map +0 -1
- package/lib-amd/components/Listbox/index.js +0 -10
- package/lib-amd/components/Listbox/index.js.map +0 -1
- package/lib-amd/components/Listbox/renderListbox.js +0 -15
- package/lib-amd/components/Listbox/renderListbox.js.map +0 -1
- package/lib-amd/components/Listbox/useListbox.js +0 -80
- package/lib-amd/components/Listbox/useListbox.js.map +0 -1
- package/lib-amd/components/Listbox/useListboxStyles.js +0 -24
- package/lib-amd/components/Listbox/useListboxStyles.js.map +0 -1
- package/lib-amd/components/Option/Option.js +0 -17
- package/lib-amd/components/Option/Option.js.map +0 -1
- package/lib-amd/components/Option/Option.types.js +0 -5
- package/lib-amd/components/Option/Option.types.js.map +0 -1
- package/lib-amd/components/Option/index.js +0 -10
- package/lib-amd/components/Option/index.js.map +0 -1
- package/lib-amd/components/Option/renderOption.js +0 -16
- package/lib-amd/components/Option/renderOption.js.map +0 -1
- package/lib-amd/components/Option/useOption.js +0 -112
- package/lib-amd/components/Option/useOption.js.map +0 -1
- package/lib-amd/components/Option/useOptionStyles.js +0 -73
- package/lib-amd/components/Option/useOptionStyles.js.map +0 -1
- package/lib-amd/components/OptionGroup/OptionGroup.js +0 -17
- package/lib-amd/components/OptionGroup/OptionGroup.js.map +0 -1
- package/lib-amd/components/OptionGroup/OptionGroup.types.js +0 -5
- package/lib-amd/components/OptionGroup/OptionGroup.types.js.map +0 -1
- package/lib-amd/components/OptionGroup/index.js +0 -10
- package/lib-amd/components/OptionGroup/index.js.map +0 -1
- package/lib-amd/components/OptionGroup/renderOptionGroup.js +0 -16
- package/lib-amd/components/OptionGroup/renderOptionGroup.js.map +0 -1
- package/lib-amd/components/OptionGroup/useOptionGroup.js +0 -33
- package/lib-amd/components/OptionGroup/useOptionGroup.js.map +0 -1
- package/lib-amd/components/OptionGroup/useOptionGroupStyles.js +0 -34
- package/lib-amd/components/OptionGroup/useOptionGroupStyles.js.map +0 -1
- package/lib-amd/contexts/ComboboxContext.js +0 -28
- package/lib-amd/contexts/ComboboxContext.js.map +0 -1
- package/lib-amd/contexts/ListboxContext.js +0 -23
- package/lib-amd/contexts/ListboxContext.js.map +0 -1
- package/lib-amd/contexts/useComboboxContextValues.js +0 -23
- package/lib-amd/contexts/useComboboxContextValues.js.map +0 -1
- package/lib-amd/contexts/useListboxContextValues.js +0 -24
- package/lib-amd/contexts/useListboxContextValues.js.map +0 -1
- package/lib-amd/index.js +0 -37
- package/lib-amd/index.js.map +0 -1
- package/lib-amd/utils/ComboboxBase.types.js +0 -5
- package/lib-amd/utils/ComboboxBase.types.js.map +0 -1
- package/lib-amd/utils/OptionCollection.types.js +0 -5
- package/lib-amd/utils/OptionCollection.types.js.map +0 -1
- package/lib-amd/utils/Selection.types.js +0 -5
- package/lib-amd/utils/Selection.types.js.map +0 -1
- package/lib-amd/utils/dropdownKeyActions.js +0 -85
- package/lib-amd/utils/dropdownKeyActions.js.map +0 -1
- package/lib-amd/utils/internalTokens.js +0 -11
- package/lib-amd/utils/internalTokens.js.map +0 -1
- package/lib-amd/utils/useComboboxBaseState.js +0 -83
- package/lib-amd/utils/useComboboxBaseState.js.map +0 -1
- package/lib-amd/utils/useComboboxPopup.js +0 -16
- package/lib-amd/utils/useComboboxPopup.js.map +0 -1
- package/lib-amd/utils/useOptionCollection.js +0 -69
- package/lib-amd/utils/useOptionCollection.js.map +0 -1
- package/lib-amd/utils/useScrollOptionsIntoView.js +0 -33
- package/lib-amd/utils/useScrollOptionsIntoView.js.map +0 -1
- package/lib-amd/utils/useSelection.js +0 -42
- package/lib-amd/utils/useSelection.js.map +0 -1
- package/lib-amd/utils/useTriggerListboxSlots.js +0 -104
- package/lib-amd/utils/useTriggerListboxSlots.js.map +0 -1
package/.swcrc
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/swcrc",
|
|
3
|
+
"exclude": [
|
|
4
|
+
"/testing",
|
|
5
|
+
"/**/*.cy.ts",
|
|
6
|
+
"/**/*.cy.tsx",
|
|
7
|
+
"/**/*.spec.ts",
|
|
8
|
+
"/**/*.spec.tsx",
|
|
9
|
+
"/**/*.test.ts",
|
|
10
|
+
"/**/*.test.tsx"
|
|
11
|
+
],
|
|
12
|
+
"jsc": {
|
|
13
|
+
"parser": {
|
|
14
|
+
"syntax": "typescript",
|
|
15
|
+
"tsx": true,
|
|
16
|
+
"decorators": false,
|
|
17
|
+
"dynamicImport": false
|
|
18
|
+
},
|
|
19
|
+
"externalHelpers": true,
|
|
20
|
+
"transform": {
|
|
21
|
+
"react": {
|
|
22
|
+
"runtime": "classic",
|
|
23
|
+
"useSpread": true
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"target": "es2019"
|
|
27
|
+
},
|
|
28
|
+
"minify": false,
|
|
29
|
+
"sourceMaps": true
|
|
30
|
+
}
|
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,88 @@
|
|
|
2
2
|
"name": "@fluentui/react-combobox",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 21 Mar 2023 21:18:41 GMT",
|
|
6
|
+
"tag": "@fluentui/react-combobox_v9.2.5",
|
|
7
|
+
"version": "9.2.5",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "tristan.watanabe@gmail.com",
|
|
12
|
+
"package": "@fluentui/react-combobox",
|
|
13
|
+
"commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
|
|
14
|
+
"comment": "chore: migrate to swc transpilation approach."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "tristan.watanabe@gmail.com",
|
|
18
|
+
"package": "@fluentui/react-combobox",
|
|
19
|
+
"commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
|
|
20
|
+
"comment": "fix: add node field to package.json exports map."
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "makotom@microsoft.com",
|
|
24
|
+
"package": "@fluentui/react-combobox",
|
|
25
|
+
"commit": "7fde5c94869ff9841b142b7ff1d0a3df0ab58f74",
|
|
26
|
+
"comment": "chore: Bumping version of @fluentui/react-icons to ^2.0.196."
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-combobox",
|
|
31
|
+
"comment": "Bump @fluentui/keyboard-keys to v9.0.2",
|
|
32
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-combobox",
|
|
37
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.15",
|
|
38
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-combobox",
|
|
43
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.27",
|
|
44
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-combobox",
|
|
49
|
+
"comment": "Bump @fluentui/react-portal to v9.2.2",
|
|
50
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-combobox",
|
|
55
|
+
"comment": "Bump @fluentui/react-positioning to v9.5.6",
|
|
56
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-combobox",
|
|
61
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.3.2",
|
|
62
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"author": "beachball",
|
|
66
|
+
"package": "@fluentui/react-combobox",
|
|
67
|
+
"comment": "Bump @fluentui/react-theme to v9.1.7",
|
|
68
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"author": "beachball",
|
|
72
|
+
"package": "@fluentui/react-combobox",
|
|
73
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.2",
|
|
74
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"author": "beachball",
|
|
78
|
+
"package": "@fluentui/react-combobox",
|
|
79
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
|
|
80
|
+
"commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"date": "Thu, 16 Mar 2023 14:36:59 GMT",
|
|
6
87
|
"tag": "@fluentui/react-combobox_v9.2.4",
|
|
7
88
|
"version": "9.2.4",
|
|
8
89
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-combobox
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 21 Mar 2023 21:18:41 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.2.5)
|
|
8
|
+
|
|
9
|
+
Tue, 21 Mar 2023 21:18:41 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.2.4..@fluentui/react-combobox_v9.2.5)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
|
|
15
|
+
- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
|
|
16
|
+
- chore: Bumping version of @fluentui/react-icons to ^2.0.196. ([PR #27100](https://github.com/microsoft/fluentui/pull/27100) by makotom@microsoft.com)
|
|
17
|
+
- Bump @fluentui/keyboard-keys to v9.0.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
18
|
+
- Bump @fluentui/react-context-selector to v9.1.15 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
19
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.27 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
20
|
+
- Bump @fluentui/react-portal to v9.2.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
21
|
+
- Bump @fluentui/react-positioning to v9.5.6 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
22
|
+
- Bump @fluentui/react-shared-contexts to v9.3.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
23
|
+
- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
24
|
+
- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
25
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
|
|
26
|
+
|
|
7
27
|
## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.2.4)
|
|
8
28
|
|
|
9
|
-
Thu, 16 Mar 2023 14:
|
|
29
|
+
Thu, 16 Mar 2023 14:36:59 GMT
|
|
10
30
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.2.3..@fluentui/react-combobox_v9.2.4)
|
|
11
31
|
|
|
12
32
|
### Patches
|
package/lib/Combobox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/Combobox.ts"],"sourcesContent":["export * from './components/Combobox/index';\n"],"mappings":"AAAA,cAAc"}
|
package/lib/ComboboxField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/ComboboxField.ts"],"sourcesContent":["export * from './components/ComboboxField/index';\n"],"mappings":"AAAA,cAAc"}
|
package/lib/Dropdown.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/Dropdown.ts"],"sourcesContent":["export * from './components/Dropdown/index';\n"],"mappings":"AAAA,cAAc"}
|
package/lib/Listbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/Listbox.ts"],"sourcesContent":["export * from './components/Listbox/index';\n"],"mappings":"AAAA,cAAc"}
|
package/lib/Option.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/Option.ts"],"sourcesContent":["export * from './components/Option/index';\n"],"mappings":"AAAA,cAAc"}
|
package/lib/OptionGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/OptionGroup.ts"],"sourcesContent":["export * from './components/OptionGroup/index';\n"],"mappings":"AAAA,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHooks_unstable","Combobox","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHooks_unstable","Combobox","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_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 const { useComboboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAE3C,SAASC,wBAAwB,QAAQ;AAEzC,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,QAAA,gBAA+CN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC3F,MAAMC,KAAA,GAAQT,oBAAA,CAAqBO,KAAA,EAAOC,GAAA;EAC1C,MAAME,aAAA,GAAgBP,wBAAA,CAAyBM,KAAA;EAE/CP,0BAAA,CAA2BO,KAAA;EAE3B,MAAM;IAAEP,0BAAA,EAA4BS;EAAe,CAAE,GAAGP,4BAAA;EACxDO,eAAA,CAAgBF,KAAA;EAEhB,OAAOR,uBAAA,CAAwBQ,KAAA,EAAOC,aAAA;AACxC;AAEAL,QAAA,CAASO,WAAW,GAAG"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
//# sourceMappingURL=Combobox.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React"],"sources":["../../../src/components/Combobox/Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n ComboboxBaseContextValues,\n ComboboxBaseOpenChangeData,\n ComboboxBaseOpenEvents,\n ComboboxBaseProps,\n ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n /* The root combobox slot */\n root: NonNullable<Slot<'div'>>;\n\n /* The dropdown arrow icon */\n expandIcon: Slot<'span'>;\n\n /* The primary slot, an input with role=\"combobox\" */\n input: NonNullable<Slot<'input'>>;\n\n /* The dropdown listbox slot */\n listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n ComboboxBaseProps & {\n /*\n * Whether the ComboBox allows freeform user input, rather than restricting to the provided options.\n */\n freeform?: boolean;\n\n /*\n * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n */\n children?: React.ReactNode;\n };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState;\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/Combobox/index.ts"],"sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|
|
@@ -10,18 +10,8 @@ export const renderCombobox_unstable = (state, contextValues) => {
|
|
|
10
10
|
slots,
|
|
11
11
|
slotProps
|
|
12
12
|
} = getSlots(state);
|
|
13
|
-
return /*#__PURE__*/React.createElement(slots.root, {
|
|
14
|
-
...slotProps.root
|
|
15
|
-
}, /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
|
|
13
|
+
return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
|
|
16
14
|
value: contextValues.combobox
|
|
17
|
-
}, /*#__PURE__*/React.createElement(slots.input,
|
|
18
|
-
...slotProps.input
|
|
19
|
-
}), slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, {
|
|
20
|
-
...slotProps.expandIcon
|
|
21
|
-
}), slots.listbox && (state.inlinePopup ? /*#__PURE__*/React.createElement(slots.listbox, {
|
|
22
|
-
...slotProps.listbox
|
|
23
|
-
}) : /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.listbox, {
|
|
24
|
-
...slotProps.listbox
|
|
25
|
-
})))));
|
|
15
|
+
}, /*#__PURE__*/React.createElement(slots.input, slotProps.input), slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, slotProps.expandIcon), slots.listbox && (state.inlinePopup ? /*#__PURE__*/React.createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.listbox, slotProps.listbox)))));
|
|
26
16
|
};
|
|
27
17
|
//# sourceMappingURL=renderCombobox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Portal","getSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","slots","slotProps","createElement","root","Provider","value","combobox","input","expandIcon","listbox","inlinePopup"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","Portal","getSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","slots","slotProps","createElement","root","Provider","value","combobox","input","expandIcon","listbox","inlinePopup"],"sources":["../../../src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n const { slots, slotProps } = getSlots<ComboboxSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <ComboboxContext.Provider value={contextValues.combobox}>\n <slots.input {...slotProps.input} />\n {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n {slots.listbox &&\n (state.inlinePopup ? (\n <slots.listbox {...slotProps.listbox} />\n ) : (\n <Portal>\n <slots.listbox {...slotProps.listbox} />\n </Portal>\n ))}\n </ComboboxContext.Provider>\n </slots.root>\n );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,MAAM,QAAQ;AACvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,eAAe,QAAQ;AAGhC;;;AAGA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAsBC,aAAA,KAAyC;EACrG,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,QAAA,CAAwBG,KAAA;EAErD,oBACEL,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,eAC5BV,KAAA,CAAAS,aAAA,CAACN,eAAA,CAAgBQ,QAAQ;IAACC,KAAA,EAAON,aAAA,CAAcO;kBAC7Cb,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMO,KAAK,EAAKN,SAAA,CAAUM,KAAK,GAC/BP,KAAA,CAAMQ,UAAU,iBAAIf,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMQ,UAAU,EAAKP,SAAA,CAAUO,UAAU,GAC9DR,KAAA,CAAMS,OAAO,KACXX,KAAA,CAAMY,WAAW,gBAChBjB,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMS,OAAO,EAAKR,SAAA,CAAUQ,OAAO,iBAEpChB,KAAA,CAAAS,aAAA,CAACR,MAAA,qBACCD,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMS,OAAO,EAAKR,SAAA,CAAUQ,OAAO,EAEvC,CAAD;AAIV"}
|
|
@@ -17,7 +17,7 @@ import { Listbox } from '../Listbox/Listbox';
|
|
|
17
17
|
* @param ref - reference to root HTMLElement of Combobox
|
|
18
18
|
*/
|
|
19
19
|
export const useCombobox_unstable = (props, ref) => {
|
|
20
|
-
var
|
|
20
|
+
var _props_input;
|
|
21
21
|
const baseState = useComboboxBaseState({
|
|
22
22
|
...props,
|
|
23
23
|
editable: true
|
|
@@ -61,10 +61,10 @@ export const useCombobox_unstable = (props, ref) => {
|
|
|
61
61
|
// calculate listbox width style based on trigger width
|
|
62
62
|
const [popupDimensions, setPopupDimensions] = React.useState();
|
|
63
63
|
React.useEffect(() => {
|
|
64
|
-
var _a;
|
|
65
64
|
// only recalculate width when opening
|
|
66
65
|
if (open) {
|
|
67
|
-
|
|
66
|
+
var _rootRef_current;
|
|
67
|
+
const width = `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px`;
|
|
68
68
|
if (width !== (popupDimensions === null || popupDimensions === void 0 ? void 0 : popupDimensions.width)) {
|
|
69
69
|
setPopupDimensions({
|
|
70
70
|
width
|
|
@@ -74,7 +74,6 @@ export const useCombobox_unstable = (props, ref) => {
|
|
|
74
74
|
}, [open, popupDimensions]);
|
|
75
75
|
// set active option and selection based on typing
|
|
76
76
|
const getOptionFromInput = inputValue => {
|
|
77
|
-
var _a;
|
|
78
77
|
const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
|
|
79
78
|
if (!searchString || searchString.length === 0) {
|
|
80
79
|
return;
|
|
@@ -87,10 +86,10 @@ export const useCombobox_unstable = (props, ref) => {
|
|
|
87
86
|
const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);
|
|
88
87
|
return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
|
|
89
88
|
}
|
|
90
|
-
|
|
89
|
+
var _matches_;
|
|
90
|
+
return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
|
|
91
91
|
};
|
|
92
|
-
/* Handle typed input */
|
|
93
|
-
// reset any typed value when an option is selected
|
|
92
|
+
/* Handle typed input */ // reset any typed value when an option is selected
|
|
94
93
|
baseState.selectOption = (ev, option) => {
|
|
95
94
|
setValue(undefined);
|
|
96
95
|
selectOption(ev, option);
|
|
@@ -147,7 +146,7 @@ export const useCombobox_unstable = (props, ref) => {
|
|
|
147
146
|
triggerSlot = resolveShorthand(props.input, {
|
|
148
147
|
required: true,
|
|
149
148
|
defaultProps: {
|
|
150
|
-
ref: useMergedRefs((
|
|
149
|
+
ref: useMergedRefs((_props_input = props.input) === null || _props_input === void 0 ? void 0 : _props_input.ref, triggerRef),
|
|
151
150
|
type: 'text',
|
|
152
151
|
value: value !== null && value !== void 0 ? value : '',
|
|
153
152
|
...triggerNativeProps
|
|
@@ -208,10 +207,10 @@ export const useCombobox_unstable = (props, ref) => {
|
|
|
208
207
|
}
|
|
209
208
|
}));
|
|
210
209
|
const onExpandIconClick = useEventCallback(mergeCallbacks(onIconClick, event => {
|
|
211
|
-
var
|
|
210
|
+
var _triggerRef_current;
|
|
212
211
|
// open and set focus
|
|
213
212
|
state.setOpen(event, !state.open);
|
|
214
|
-
(
|
|
213
|
+
(_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
|
|
215
214
|
// set focus visible=false, since this can only be done with the mouse/pointer
|
|
216
215
|
setFocusVisible(false);
|
|
217
216
|
}));
|
|
@@ -228,7 +227,8 @@ export const useCombobox_unstable = (props, ref) => {
|
|
|
228
227
|
const defaultOpenString = 'Open'; // this is english-only since it is the fallback
|
|
229
228
|
if (!hasExpandLabel) {
|
|
230
229
|
if (props['aria-labelledby']) {
|
|
231
|
-
|
|
230
|
+
var _state_expandIcon_id;
|
|
231
|
+
const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;
|
|
232
232
|
const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;
|
|
233
233
|
state.expandIcon['aria-label'] = defaultOpenString;
|
|
234
234
|
state.expandIcon.id = chevronId;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","resolveShorthand","mergeCallbacks","useEventCallback","useId","useMergedRefs","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","baseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","popupDimensions","setPopupDimensions","useEffect","width","_a","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","key","triggerSlot","listboxSlot","input","required","defaultProps","type","onChange","onBlur","onKeyDown","listbox","children","style","state","components","expandIcon","createElement","role","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","hasExpandLabel","defaultOpenString","chevronId","_b","chevronLabelledBy"],"sources":["../src/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n mergeCallbacks,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\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 baseState = useComboboxBaseState({ ...props, editable: true });\n const {\n activeOption,\n clearSelection,\n getIndexOfId,\n getOptionsMatchingText,\n hasFocus,\n open,\n selectOption,\n selectedOptions,\n setActiveOption,\n setFocusVisible,\n setOpen,\n setValue,\n value,\n } = baseState;\n const { disabled, freeform, inlinePopup, multiselect } = props;\n const comboId = useId('combobox-');\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['children', 'size'],\n });\n\n const rootRef = React.useRef<HTMLDivElement>(null);\n const triggerRef = React.useRef<HTMLInputElement>(null);\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n // calculate listbox width style based on trigger width\n const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n React.useEffect(() => {\n // only recalculate width when opening\n if (open) {\n const width = `${rootRef.current?.clientWidth}px`;\n if (width !== popupDimensions?.width) {\n setPopupDimensions({ width });\n }\n }\n }, [open, popupDimensions]);\n\n // set active option and selection based on typing\n const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n const searchString = inputValue?.trim().toLowerCase();\n\n if (!searchString || searchString.length === 0) {\n return;\n }\n\n const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n const matches = getOptionsMatchingText(matcher);\n\n // return first matching option after the current active option, looping back to the top\n if (matches.length > 1 && activeOption) {\n const startIndex = getIndexOfId(activeOption.id);\n const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n return nextMatch ?? matches[0];\n }\n\n return matches[0] ?? undefined;\n };\n\n /* Handle typed input */\n\n // reset any typed value when an option is selected\n baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n setValue(undefined);\n selectOption(ev, option);\n };\n\n const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n // handle selection and updating value if freeform is false\n if (!baseState.open && !freeform) {\n // select matching option, if the value fully matches\n if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n baseState.selectOption(ev, activeOption);\n }\n\n // reset typed value when the input loses focus while collapsed, unless freeform is true\n setValue(undefined);\n }\n };\n\n baseState.setOpen = (ev, newState: boolean) => {\n if (disabled) {\n return;\n }\n\n if (!newState && !freeform) {\n setValue(undefined);\n }\n\n setOpen(ev, newState);\n };\n\n // update value and active option based on input\n const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = ev.target.value;\n // update uncontrolled value\n baseState.setValue(inputValue);\n\n // handle updating active option based on input\n const matchingOption = getOptionFromInput(inputValue);\n setActiveOption(matchingOption);\n\n setFocusVisible(true);\n\n // clear selection for single-select if the input value no longer matches the selection\n if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n clearSelection(ev);\n }\n };\n\n // open Combobox when typing\n const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {\n if (!open && getDropdownActionFromKey(ev) === 'Type') {\n baseState.setOpen(ev, true);\n }\n\n // clear activedescendant when moving the text insertion cursor\n if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n setHideActiveDescendant(true);\n } else {\n setHideActiveDescendant(false);\n }\n };\n\n // resolve input and listbox slot props\n let triggerSlot: Slot<'input'>;\n let listboxSlot: Slot<typeof Listbox> | undefined;\n\n triggerSlot = resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n ref: useMergedRefs(props.input?.ref, triggerRef),\n type: 'text',\n value: value ?? '',\n ...triggerNativeProps,\n },\n });\n\n triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);\n\n // only resolve listbox slot if needed\n listboxSlot =\n open || hasFocus\n ? resolveShorthand(props.listbox, {\n required: true,\n defaultProps: {\n children: props.children,\n style: popupDimensions,\n },\n })\n : undefined;\n\n [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n if (hideActiveDescendant) {\n triggerSlot['aria-activedescendant'] = undefined;\n }\n\n const state: ComboboxState = {\n components: {\n root: 'div',\n input: 'input',\n expandIcon: 'span',\n listbox: Listbox,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n 'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n ...rootNativeProps,\n },\n }),\n input: triggerSlot,\n listbox: listboxSlot,\n expandIcon: resolveShorthand(props.expandIcon, {\n required: true,\n defaultProps: {\n 'aria-expanded': open,\n children: <ChevronDownIcon />,\n role: 'button',\n },\n }),\n ...baseState,\n };\n\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n /* handle open/close + focus change when clicking expandIcon */\n const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n const onExpandIconMouseDown = useEventCallback(\n mergeCallbacks(onIconMouseDown, () => {\n // do not dismiss on blur when closing via clicking the icon\n if (open) {\n baseState.ignoreNextBlur.current = true;\n }\n }),\n );\n\n const onExpandIconClick = useEventCallback(\n mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n // open and set focus\n state.setOpen(event, !state.open);\n triggerRef.current?.focus();\n\n // set focus visible=false, since this can only be done with the mouse/pointer\n setFocusVisible(false);\n }),\n );\n\n if (state.expandIcon) {\n state.expandIcon.onMouseDown = onExpandIconMouseDown;\n state.expandIcon.onClick = onExpandIconClick;\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 return state;\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["React","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","resolveShorthand","mergeCallbacks","useEventCallback","useId","useMergedRefs","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","_props_input","baseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","popupDimensions","setPopupDimensions","useEffect","_rootRef_current","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","_matches_","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","key","triggerSlot","listboxSlot","input","required","defaultProps","type","onChange","onBlur","onKeyDown","listbox","children","style","state","components","expandIcon","createElement","role","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","_triggerRef_current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy"],"sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n mergeCallbacks,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\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 baseState = useComboboxBaseState({ ...props, editable: true });\n const {\n activeOption,\n clearSelection,\n getIndexOfId,\n getOptionsMatchingText,\n hasFocus,\n open,\n selectOption,\n selectedOptions,\n setActiveOption,\n setFocusVisible,\n setOpen,\n setValue,\n value,\n } = baseState;\n const { disabled, freeform, inlinePopup, multiselect } = props;\n const comboId = useId('combobox-');\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['children', 'size'],\n });\n\n const rootRef = React.useRef<HTMLDivElement>(null);\n const triggerRef = React.useRef<HTMLInputElement>(null);\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n // calculate listbox width style based on trigger width\n const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n React.useEffect(() => {\n // only recalculate width when opening\n if (open) {\n const width = `${rootRef.current?.clientWidth}px`;\n if (width !== popupDimensions?.width) {\n setPopupDimensions({ width });\n }\n }\n }, [open, popupDimensions]);\n\n // set active option and selection based on typing\n const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n const searchString = inputValue?.trim().toLowerCase();\n\n if (!searchString || searchString.length === 0) {\n return;\n }\n\n const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n const matches = getOptionsMatchingText(matcher);\n\n // return first matching option after the current active option, looping back to the top\n if (matches.length > 1 && activeOption) {\n const startIndex = getIndexOfId(activeOption.id);\n const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n return nextMatch ?? matches[0];\n }\n\n return matches[0] ?? undefined;\n };\n\n /* Handle typed input */\n\n // reset any typed value when an option is selected\n baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n setValue(undefined);\n selectOption(ev, option);\n };\n\n const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n // handle selection and updating value if freeform is false\n if (!baseState.open && !freeform) {\n // select matching option, if the value fully matches\n if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n baseState.selectOption(ev, activeOption);\n }\n\n // reset typed value when the input loses focus while collapsed, unless freeform is true\n setValue(undefined);\n }\n };\n\n baseState.setOpen = (ev, newState: boolean) => {\n if (disabled) {\n return;\n }\n\n if (!newState && !freeform) {\n setValue(undefined);\n }\n\n setOpen(ev, newState);\n };\n\n // update value and active option based on input\n const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = ev.target.value;\n // update uncontrolled value\n baseState.setValue(inputValue);\n\n // handle updating active option based on input\n const matchingOption = getOptionFromInput(inputValue);\n setActiveOption(matchingOption);\n\n setFocusVisible(true);\n\n // clear selection for single-select if the input value no longer matches the selection\n if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n clearSelection(ev);\n }\n };\n\n // open Combobox when typing\n const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {\n if (!open && getDropdownActionFromKey(ev) === 'Type') {\n baseState.setOpen(ev, true);\n }\n\n // clear activedescendant when moving the text insertion cursor\n if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n setHideActiveDescendant(true);\n } else {\n setHideActiveDescendant(false);\n }\n };\n\n // resolve input and listbox slot props\n let triggerSlot: Slot<'input'>;\n let listboxSlot: Slot<typeof Listbox> | undefined;\n\n triggerSlot = resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n ref: useMergedRefs(props.input?.ref, triggerRef),\n type: 'text',\n value: value ?? '',\n ...triggerNativeProps,\n },\n });\n\n triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);\n\n // only resolve listbox slot if needed\n listboxSlot =\n open || hasFocus\n ? resolveShorthand(props.listbox, {\n required: true,\n defaultProps: {\n children: props.children,\n style: popupDimensions,\n },\n })\n : undefined;\n\n [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n if (hideActiveDescendant) {\n triggerSlot['aria-activedescendant'] = undefined;\n }\n\n const state: ComboboxState = {\n components: {\n root: 'div',\n input: 'input',\n expandIcon: 'span',\n listbox: Listbox,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n 'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n ...rootNativeProps,\n },\n }),\n input: triggerSlot,\n listbox: listboxSlot,\n expandIcon: resolveShorthand(props.expandIcon, {\n required: true,\n defaultProps: {\n 'aria-expanded': open,\n children: <ChevronDownIcon />,\n role: 'button',\n },\n }),\n ...baseState,\n };\n\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n /* handle open/close + focus change when clicking expandIcon */\n const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n const onExpandIconMouseDown = useEventCallback(\n mergeCallbacks(onIconMouseDown, () => {\n // do not dismiss on blur when closing via clicking the icon\n if (open) {\n baseState.ignoreNextBlur.current = true;\n }\n }),\n );\n\n const onExpandIconClick = useEventCallback(\n mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n // open and set focus\n state.setOpen(event, !state.open);\n triggerRef.current?.focus();\n\n // set focus visible=false, since this can only be done with the mouse/pointer\n setFocusVisible(false);\n }),\n );\n\n if (state.expandIcon) {\n state.expandIcon.onMouseDown = onExpandIconMouseDown;\n state.expandIcon.onClick = onExpandIconClick;\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 return state;\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","listbox","fieldHeights","small","medium","large","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","z189sj","outline","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","w","m","h","a","useInputStyles","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Bqenvij","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","Byoj8tv","uwmqm3","f","useIconStyles","icon","Bo70h7d","Frg6f3","useComboboxStyles_unstable","state","appearance","open","size","styles","iconStyles","inputStyles","className"],"sources":["../src/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n root: 'fui-Combobox',\n input: 'fui-Combobox__input',\n expandIcon: 'fui-Combobox__expandIcon',\n listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n small: '22px',\n medium: '30px',\n large: '38px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalXXS,\n display: 'inline-grid',\n gridTemplateColumns: '1fr auto',\n justifyContent: 'space-between',\n minWidth: '250px',\n position: 'relative',\n\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n },\n\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n maxHeight: '80vh',\n },\n\n listboxCollapsed: {\n display: 'none',\n },\n\n // size variants\n small: {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalM,\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n input: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n\n '&:focus': {\n outlineStyle: 'none',\n },\n\n '&::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n },\n\n // size variants\n small: {\n height: fieldHeights.small,\n ...typographyStyles.caption1,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n },\n medium: {\n height: fieldHeights.medium,\n ...typographyStyles.body1,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n },\n large: {\n height: fieldHeights.large,\n ...typographyStyles.body2,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n const { appearance, open, size } = state;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const disabled = state.input.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const inputStyles = useInputStyles();\n\n state.root.className = mergeClasses(\n comboboxClassNames.root,\n styles.root,\n styles[appearance],\n styles[size],\n !disabled && appearance === 'outline' && styles.outlineInteractive,\n invalid && appearance !== 'underline' && styles.invalid,\n invalid && appearance === 'underline' && styles.invalidUnderline,\n disabled && styles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n comboboxClassNames.input,\n inputStyles.input,\n inputStyles[size],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n if (state.listbox) {\n state.listbox.className = mergeClasses(\n comboboxClassNames.listbox,\n styles.listbox,\n !open && styles.listboxCollapsed,\n state.listbox.className,\n );\n }\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n comboboxClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","listbox","fieldHeights","small","medium","large","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","z189sj","outline","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","w","m","h","a","useInputStyles","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Bqenvij","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","Byoj8tv","uwmqm3","f","useIconStyles","icon","Bo70h7d","Frg6f3","useComboboxStyles_unstable","state","appearance","open","size","styles","iconStyles","inputStyles","className"],"sources":["../../../src/components/Combobox/useComboboxStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n root: 'fui-Combobox',\n input: 'fui-Combobox__input',\n expandIcon: 'fui-Combobox__expandIcon',\n listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n small: '22px',\n medium: '30px',\n large: '38px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalXXS,\n display: 'inline-grid',\n gridTemplateColumns: '1fr auto',\n justifyContent: 'space-between',\n minWidth: '250px',\n position: 'relative',\n\n // windows high contrast mode focus indicator\n ':focus-within': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n\n // bottom focus border, shared with Input, Select, and SpinButton\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n },\n\n listbox: {\n boxShadow: `${tokens.shadow16}`,\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n maxHeight: '80vh',\n },\n\n listboxCollapsed: {\n display: 'none',\n },\n\n // size variants\n small: {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n medium: {\n paddingRight: tokens.spacingHorizontalMNudge,\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalM,\n },\n\n // appearance variants\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n outlineInteractive: {\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n input: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n color: tokens.colorNeutralForeground1,\n fontFamily: tokens.fontFamilyBase,\n\n '&:focus': {\n outlineStyle: 'none',\n },\n\n '&::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n },\n\n // size variants\n small: {\n height: fieldHeights.small,\n ...typographyStyles.caption1,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n },\n medium: {\n height: fieldHeights.medium,\n ...typographyStyles.body1,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n },\n large: {\n height: fieldHeights.large,\n ...typographyStyles.body2,\n ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n cursor: 'pointer',\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n\n // icon size variants\n small: {\n fontSize: iconSizes.small,\n marginLeft: tokens.spacingHorizontalXXS,\n },\n medium: {\n fontSize: iconSizes.medium,\n marginLeft: tokens.spacingHorizontalXXS,\n },\n large: {\n fontSize: iconSizes.large,\n marginLeft: tokens.spacingHorizontalSNudge,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n const { appearance, open, size } = state;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const disabled = state.input.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const inputStyles = useInputStyles();\n\n state.root.className = mergeClasses(\n comboboxClassNames.root,\n styles.root,\n styles[appearance],\n styles[size],\n !disabled && appearance === 'outline' && styles.outlineInteractive,\n invalid && appearance !== 'underline' && styles.invalid,\n invalid && appearance === 'underline' && styles.invalidUnderline,\n disabled && styles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n comboboxClassNames.input,\n inputStyles.input,\n inputStyles[size],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n if (state.listbox) {\n state.listbox.className = mergeClasses(\n comboboxClassNames.listbox,\n styles.listbox,\n !open && styles.listboxCollapsed,\n state.listbox.className,\n );\n }\n\n if (state.expandIcon) {\n state.expandIcon.className = mergeClasses(\n comboboxClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
/* eslint-disable deprecation/deprecation */
|
|
2
|
-
import { getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';
|
|
1
|
+
/* eslint-disable deprecation/deprecation */import { getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';
|
|
3
2
|
import { Combobox, comboboxClassNames } from '../../Combobox';
|
|
4
3
|
/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */
|
|
5
4
|
export const comboboxFieldClassNames = /*#__PURE__*/getDeprecatedFieldClassNames(comboboxClassNames.root);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getDeprecatedFieldClassNames","makeDeprecatedField","Combobox","comboboxClassNames","comboboxFieldClassNames","root","ComboboxField"],"sources":["
|
|
1
|
+
{"version":3,"names":["getDeprecatedFieldClassNames","makeDeprecatedField","Combobox","comboboxClassNames","comboboxFieldClassNames","root","ComboboxField"],"sources":["../../../src/components/ComboboxField/ComboboxField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Combobox, comboboxClassNames, ComboboxProps } from '../../Combobox';\n\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport type ComboboxFieldProps = DeprecatedFieldProps<ComboboxProps>;\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport const comboboxFieldClassNames = getDeprecatedFieldClassNames(comboboxClassNames.root);\n/** @deprecated Use Field with Combobox: `<Field><Combobox /></Field>` */\nexport const ComboboxField: ForwardRefComponent<ComboboxFieldProps> = makeDeprecatedField(Combobox);\n"],"mappings":"AAAA,4CACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ;AAExF,SAASC,QAAQ,EAAEC,kBAAkB,QAAuB;AAI5D;AACA,OAAO,MAAMC,uBAAA,gBAA0BJ,4BAAA,CAA6BG,kBAAA,CAAmBE,IAAI;AAC3F;AACA,OAAO,MAAMC,aAAA,gBAAyDL,mBAAA,CAAoBC,QAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/ComboboxField/index.ts"],"sourcesContent":["export * from './ComboboxField';\n"],"mappings":"AAAA,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHooks_unstable","Dropdown","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["
|
|
1
|
+
{"version":3,"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHooks_unstable","Dropdown","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n const state = useDropdown_unstable(props, ref);\n const contextValues = useComboboxContextValues(state);\n\n useDropdownStyles_unstable(state);\n\n const { useDropdownStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAE3C,SAASC,wBAAwB,QAAQ;AAEzC,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,QAAA,gBAA+CN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC3F,MAAMC,KAAA,GAAQT,oBAAA,CAAqBO,KAAA,EAAOC,GAAA;EAC1C,MAAME,aAAA,GAAgBP,wBAAA,CAAyBM,KAAA;EAE/CP,0BAAA,CAA2BO,KAAA;EAE3B,MAAM;IAAEP,0BAAA,EAA4BS;EAAe,CAAE,GAAGP,4BAAA;EACxDO,eAAA,CAAgBF,KAAA;EAEhB,OAAOR,uBAAA,CAAwBQ,KAAA,EAAOC,aAAA;AACxC;AAEAL,QAAA,CAASO,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/Dropdown/Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n ComboboxBaseContextValues,\n ComboboxBaseOpenChangeData,\n ComboboxBaseOpenEvents,\n ComboboxBaseProps,\n ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n /* The root dropdown slot */\n root: NonNullable<Slot<'div'>>;\n\n /* The dropdown arrow icon */\n expandIcon: Slot<'span'>;\n\n /* The primary slot, the element with role=\"combobox\" */\n button: NonNullable<Slot<'button'>>;\n\n /* The dropdown listbox slot */\n listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n ComboboxBaseState & {\n /* Whether the placeholder is currently displayed */\n placeholderVisible: boolean;\n };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\n"],"mappings":"AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../../../src/components/Dropdown/index.ts"],"sourcesContent":["export * from './Dropdown';\nexport * from './Dropdown.types';\nexport * from './renderDropdown';\nexport * from './useDropdown';\nexport * from './useDropdownStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|