@fluentui/react-combobox 9.3.4 → 9.4.1
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.json +141 -1
- package/CHANGELOG.md +41 -2
- package/dist/index.d.ts +2 -2
- package/lib/Combobox.js +0 -1
- package/lib/Combobox.js.map +1 -1
- package/lib/Dropdown.js +0 -1
- package/lib/Dropdown.js.map +1 -1
- package/lib/Listbox.js +0 -1
- package/lib/Listbox.js.map +1 -1
- package/lib/Option.js +0 -1
- package/lib/Option.js.map +1 -1
- package/lib/OptionGroup.js +0 -1
- package/lib/OptionGroup.js.map +1 -1
- package/lib/Selection.js +1 -0
- package/lib/Selection.js.map +1 -0
- package/lib/components/Combobox/Combobox.js +6 -8
- package/lib/components/Combobox/Combobox.js.map +1 -1
- package/lib/components/Combobox/Combobox.types.js +0 -1
- package/lib/components/Combobox/Combobox.types.js.map +1 -1
- package/lib/components/Combobox/index.js +0 -1
- package/lib/components/Combobox/index.js.map +1 -1
- package/lib/components/Combobox/renderCombobox.js +6 -11
- package/lib/components/Combobox/renderCombobox.js.map +1 -1
- package/lib/components/Combobox/useCombobox.js +228 -251
- package/lib/components/Combobox/useCombobox.js.map +1 -1
- package/lib/components/Combobox/useComboboxStyles.styles.js.map +1 -1
- package/lib/components/Dropdown/Dropdown.js +6 -8
- package/lib/components/Dropdown/Dropdown.js.map +1 -1
- package/lib/components/Dropdown/Dropdown.types.js +1 -2
- package/lib/components/Dropdown/Dropdown.types.js.map +1 -1
- package/lib/components/Dropdown/index.js +0 -1
- package/lib/components/Dropdown/index.js.map +1 -1
- package/lib/components/Dropdown/renderDropdown.js +6 -11
- package/lib/components/Dropdown/renderDropdown.js.map +1 -1
- package/lib/components/Dropdown/useDropdown.js +127 -136
- package/lib/components/Dropdown/useDropdown.js.map +1 -1
- package/lib/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
- package/lib/components/Listbox/Listbox.js +6 -8
- package/lib/components/Listbox/Listbox.js.map +1 -1
- package/lib/components/Listbox/Listbox.types.js +1 -2
- package/lib/components/Listbox/Listbox.types.js.map +1 -1
- package/lib/components/Listbox/index.js +0 -1
- package/lib/components/Listbox/index.js.map +1 -1
- package/lib/components/Listbox/renderListbox.js +6 -11
- package/lib/components/Listbox/renderListbox.js.map +1 -1
- package/lib/components/Listbox/useListbox.js +77 -89
- package/lib/components/Listbox/useListbox.js.map +1 -1
- package/lib/components/Listbox/useListboxStyles.styles.js.map +1 -1
- package/lib/components/Option/Option.js +5 -7
- package/lib/components/Option/Option.js.map +1 -1
- package/lib/components/Option/Option.types.js +0 -1
- package/lib/components/Option/Option.types.js.map +1 -1
- package/lib/components/Option/index.js +0 -1
- package/lib/components/Option/index.js.map +1 -1
- package/lib/components/Option/renderOption.js +4 -9
- package/lib/components/Option/renderOption.js.map +1 -1
- package/lib/components/Option/useOption.js +115 -113
- package/lib/components/Option/useOption.js.map +1 -1
- package/lib/components/Option/useOptionStyles.styles.js +1 -1
- package/lib/components/Option/useOptionStyles.styles.js.map +1 -1
- package/lib/components/OptionGroup/OptionGroup.js +5 -7
- package/lib/components/OptionGroup/OptionGroup.js.map +1 -1
- package/lib/components/OptionGroup/OptionGroup.types.js +1 -2
- package/lib/components/OptionGroup/OptionGroup.types.js.map +1 -1
- package/lib/components/OptionGroup/index.js +0 -1
- package/lib/components/OptionGroup/index.js.map +1 -1
- package/lib/components/OptionGroup/renderOptionGroup.js +4 -9
- package/lib/components/OptionGroup/renderOptionGroup.js.map +1 -1
- package/lib/components/OptionGroup/useOptionGroup.js +21 -25
- package/lib/components/OptionGroup/useOptionGroup.js.map +1 -1
- package/lib/components/OptionGroup/useOptionGroupStyles.styles.js.map +1 -1
- package/lib/contexts/ComboboxContext.js +16 -17
- package/lib/contexts/ComboboxContext.js.map +1 -1
- package/lib/contexts/ListboxContext.js +12 -13
- package/lib/contexts/ListboxContext.js.map +1 -1
- package/lib/contexts/useComboboxContextValues.js +16 -28
- package/lib/contexts/useComboboxContextValues.js.map +1 -1
- package/lib/contexts/useListboxContextValues.js +17 -26
- package/lib/contexts/useListboxContextValues.js.map +1 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/ComboboxBase.types.js +0 -1
- package/lib/utils/ComboboxBase.types.js.map +1 -1
- package/lib/utils/OptionCollection.types.js +1 -2
- package/lib/utils/OptionCollection.types.js.map +1 -1
- package/lib/utils/Selection.types.js +0 -1
- package/lib/utils/Selection.types.js.map +1 -1
- package/lib/utils/dropdownKeyActions.js +66 -77
- package/lib/utils/dropdownKeyActions.js.map +1 -1
- package/lib/utils/internalTokens.js +3 -4
- package/lib/utils/internalTokens.js.map +1 -1
- package/lib/utils/useComboboxBaseState.js +94 -96
- package/lib/utils/useComboboxBaseState.js.map +1 -1
- package/lib/utils/useComboboxPopup.js +33 -30
- package/lib/utils/useComboboxPopup.js.map +1 -1
- package/lib/utils/useOptionCollection.js +65 -64
- package/lib/utils/useOptionCollection.js.map +1 -1
- package/lib/utils/useScrollOptionsIntoView.js +25 -32
- package/lib/utils/useScrollOptionsIntoView.js.map +1 -1
- package/lib/utils/useSelection.js +57 -49
- package/lib/utils/useSelection.js.map +1 -1
- package/lib/utils/useTriggerListboxSlots.js +105 -119
- package/lib/utils/useTriggerListboxSlots.js.map +1 -1
- package/lib-commonjs/Combobox.js +0 -3
- package/lib-commonjs/Combobox.js.map +1 -1
- package/lib-commonjs/Dropdown.js +0 -3
- package/lib-commonjs/Dropdown.js.map +1 -1
- package/lib-commonjs/Listbox.js +0 -3
- package/lib-commonjs/Listbox.js.map +1 -1
- package/lib-commonjs/Option.js +0 -3
- package/lib-commonjs/Option.js.map +1 -1
- package/lib-commonjs/OptionGroup.js +0 -3
- package/lib-commonjs/OptionGroup.js.map +1 -1
- package/lib-commonjs/Selection.js +6 -0
- package/lib-commonjs/Selection.js.map +1 -0
- package/lib-commonjs/components/Combobox/Combobox.js +1 -3
- package/lib-commonjs/components/Combobox/Combobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/Combobox.types.js +0 -3
- package/lib-commonjs/components/Combobox/Combobox.types.js.map +1 -1
- package/lib-commonjs/components/Combobox/index.js +0 -3
- package/lib-commonjs/components/Combobox/index.js.map +1 -1
- package/lib-commonjs/components/Combobox/renderCombobox.js +1 -3
- package/lib-commonjs/components/Combobox/renderCombobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/useCombobox.js +1 -3
- package/lib-commonjs/components/Combobox/useCombobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js +0 -2
- package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Dropdown/Dropdown.js +1 -3
- package/lib-commonjs/components/Dropdown/Dropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/Dropdown.types.js +0 -3
- package/lib-commonjs/components/Dropdown/Dropdown.types.js.map +1 -1
- package/lib-commonjs/components/Dropdown/index.js +0 -3
- package/lib-commonjs/components/Dropdown/index.js.map +1 -1
- package/lib-commonjs/components/Dropdown/renderDropdown.js +1 -3
- package/lib-commonjs/components/Dropdown/renderDropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdown.js +1 -3
- package/lib-commonjs/components/Dropdown/useDropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js +0 -2
- package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Listbox/Listbox.js +1 -3
- package/lib-commonjs/components/Listbox/Listbox.js.map +1 -1
- package/lib-commonjs/components/Listbox/Listbox.types.js +0 -3
- package/lib-commonjs/components/Listbox/Listbox.types.js.map +1 -1
- package/lib-commonjs/components/Listbox/index.js +0 -3
- package/lib-commonjs/components/Listbox/index.js.map +1 -1
- package/lib-commonjs/components/Listbox/renderListbox.js +1 -3
- package/lib-commonjs/components/Listbox/renderListbox.js.map +1 -1
- package/lib-commonjs/components/Listbox/useListbox.js +1 -3
- package/lib-commonjs/components/Listbox/useListbox.js.map +1 -1
- package/lib-commonjs/components/Listbox/useListboxStyles.styles.js +0 -2
- package/lib-commonjs/components/Listbox/useListboxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Option/Option.js +1 -3
- package/lib-commonjs/components/Option/Option.js.map +1 -1
- package/lib-commonjs/components/Option/Option.types.js +0 -3
- package/lib-commonjs/components/Option/Option.types.js.map +1 -1
- package/lib-commonjs/components/Option/index.js +0 -3
- package/lib-commonjs/components/Option/index.js.map +1 -1
- package/lib-commonjs/components/Option/renderOption.js +1 -3
- package/lib-commonjs/components/Option/renderOption.js.map +1 -1
- package/lib-commonjs/components/Option/useOption.js +1 -3
- package/lib-commonjs/components/Option/useOption.js.map +1 -1
- package/lib-commonjs/components/Option/useOptionStyles.styles.js +1 -3
- package/lib-commonjs/components/Option/useOptionStyles.styles.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/OptionGroup.js +1 -3
- package/lib-commonjs/components/OptionGroup/OptionGroup.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/OptionGroup.types.js +0 -3
- package/lib-commonjs/components/OptionGroup/OptionGroup.types.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/index.js +0 -3
- package/lib-commonjs/components/OptionGroup/index.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/renderOptionGroup.js +1 -3
- package/lib-commonjs/components/OptionGroup/renderOptionGroup.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/useOptionGroup.js +1 -3
- package/lib-commonjs/components/OptionGroup/useOptionGroup.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.js +0 -2
- package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.js.map +1 -1
- package/lib-commonjs/contexts/ComboboxContext.js +2 -4
- package/lib-commonjs/contexts/ComboboxContext.js.map +1 -1
- package/lib-commonjs/contexts/ListboxContext.js +2 -4
- package/lib-commonjs/contexts/ListboxContext.js.map +1 -1
- package/lib-commonjs/contexts/useComboboxContextValues.js +1 -3
- package/lib-commonjs/contexts/useComboboxContextValues.js.map +1 -1
- package/lib-commonjs/contexts/useListboxContextValues.js +1 -3
- package/lib-commonjs/contexts/useListboxContextValues.js.map +1 -1
- package/lib-commonjs/index.js +0 -3
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/ComboboxBase.types.js +0 -3
- package/lib-commonjs/utils/ComboboxBase.types.js.map +1 -1
- package/lib-commonjs/utils/OptionCollection.types.js +0 -3
- package/lib-commonjs/utils/OptionCollection.types.js.map +1 -1
- package/lib-commonjs/utils/Selection.types.js +0 -3
- package/lib-commonjs/utils/Selection.types.js.map +1 -1
- package/lib-commonjs/utils/dropdownKeyActions.js +1 -3
- package/lib-commonjs/utils/dropdownKeyActions.js.map +1 -1
- package/lib-commonjs/utils/internalTokens.js +1 -3
- package/lib-commonjs/utils/internalTokens.js.map +1 -1
- package/lib-commonjs/utils/useComboboxBaseState.js +1 -3
- package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
- package/lib-commonjs/utils/useComboboxPopup.js +1 -3
- package/lib-commonjs/utils/useComboboxPopup.js.map +1 -1
- package/lib-commonjs/utils/useOptionCollection.js +1 -3
- package/lib-commonjs/utils/useOptionCollection.js.map +1 -1
- package/lib-commonjs/utils/useScrollOptionsIntoView.js +1 -3
- package/lib-commonjs/utils/useScrollOptionsIntoView.js.map +1 -1
- package/lib-commonjs/utils/useSelection.js +1 -3
- package/lib-commonjs/utils/useSelection.js.map +1 -1
- package/lib-commonjs/utils/useTriggerListboxSlots.js +5 -7
- package/lib-commonjs/utils/useTriggerListboxSlots.js.map +1 -1
- package/package.json +12 -12
|
@@ -1,53 +1,61 @@
|
|
|
1
1
|
import { useCallback } from 'react';
|
|
2
2
|
import { useControllableState } from '@fluentui/react-utilities';
|
|
3
|
-
export const useSelection = props
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const [selectedOptions, setSelectedOptions] = useControllableState({
|
|
10
|
-
state: props.selectedOptions,
|
|
11
|
-
defaultState: defaultSelectedOptions,
|
|
12
|
-
initialState: []
|
|
13
|
-
});
|
|
14
|
-
const selectOption = useCallback((event, option) => {
|
|
15
|
-
// if the option is disabled, do nothing
|
|
16
|
-
if (option.disabled) {
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
// for single-select, always return the selected option
|
|
20
|
-
let newSelection = [option.value];
|
|
21
|
-
// toggle selected state of the option for multiselect
|
|
22
|
-
if (multiselect) {
|
|
23
|
-
const selectedIndex = selectedOptions.findIndex(o => o === option.value);
|
|
24
|
-
if (selectedIndex > -1) {
|
|
25
|
-
// deselect option
|
|
26
|
-
newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];
|
|
27
|
-
} else {
|
|
28
|
-
// select option
|
|
29
|
-
newSelection = [...selectedOptions, option.value];
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
setSelectedOptions(newSelection);
|
|
33
|
-
onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
|
|
34
|
-
optionValue: option.value,
|
|
35
|
-
optionText: option.text,
|
|
36
|
-
selectedOptions: newSelection
|
|
3
|
+
export const useSelection = (props)=>{
|
|
4
|
+
const { defaultSelectedOptions , multiselect , onOptionSelect } = props;
|
|
5
|
+
const [selectedOptions, setSelectedOptions] = useControllableState({
|
|
6
|
+
state: props.selectedOptions,
|
|
7
|
+
defaultState: defaultSelectedOptions,
|
|
8
|
+
initialState: []
|
|
37
9
|
});
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
10
|
+
const selectOption = useCallback((event, option)=>{
|
|
11
|
+
// if the option is disabled, do nothing
|
|
12
|
+
if (option.disabled) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
// for single-select, always return the selected option
|
|
16
|
+
let newSelection = [
|
|
17
|
+
option.value
|
|
18
|
+
];
|
|
19
|
+
// toggle selected state of the option for multiselect
|
|
20
|
+
if (multiselect) {
|
|
21
|
+
const selectedIndex = selectedOptions.findIndex((o)=>o === option.value);
|
|
22
|
+
if (selectedIndex > -1) {
|
|
23
|
+
// deselect option
|
|
24
|
+
newSelection = [
|
|
25
|
+
...selectedOptions.slice(0, selectedIndex),
|
|
26
|
+
...selectedOptions.slice(selectedIndex + 1)
|
|
27
|
+
];
|
|
28
|
+
} else {
|
|
29
|
+
// select option
|
|
30
|
+
newSelection = [
|
|
31
|
+
...selectedOptions,
|
|
32
|
+
option.value
|
|
33
|
+
];
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
setSelectedOptions(newSelection);
|
|
37
|
+
onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
|
|
38
|
+
optionValue: option.value,
|
|
39
|
+
optionText: option.text,
|
|
40
|
+
selectedOptions: newSelection
|
|
41
|
+
});
|
|
42
|
+
}, [
|
|
43
|
+
onOptionSelect,
|
|
44
|
+
multiselect,
|
|
45
|
+
selectedOptions,
|
|
46
|
+
setSelectedOptions
|
|
47
|
+
]);
|
|
48
|
+
const clearSelection = (event)=>{
|
|
49
|
+
setSelectedOptions([]);
|
|
50
|
+
onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
|
|
51
|
+
optionValue: undefined,
|
|
52
|
+
optionText: undefined,
|
|
53
|
+
selectedOptions: []
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
return {
|
|
57
|
+
clearSelection,
|
|
58
|
+
selectOption,
|
|
59
|
+
selectedOptions
|
|
60
|
+
};
|
|
52
61
|
};
|
|
53
|
-
//# sourceMappingURL=useSelection.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["useSelection.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\n const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n const [selectedOptions, setSelectedOptions] = useControllableState({\n state: props.selectedOptions,\n defaultState: defaultSelectedOptions,\n initialState: [],\n });\n\n const selectOption = useCallback(\n (event: SelectionEvents, option: OptionValue) => {\n // if the option is disabled, do nothing\n if (option.disabled) {\n return;\n }\n\n // for single-select, always return the selected option\n let newSelection = [option.value];\n\n // toggle selected state of the option for multiselect\n if (multiselect) {\n const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n if (selectedIndex > -1) {\n // deselect option\n newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n } else {\n // select option\n newSelection = [...selectedOptions, option.value];\n }\n }\n\n setSelectedOptions(newSelection);\n onOptionSelect?.(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });\n },\n [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n );\n\n const clearSelection = (event: SelectionEvents) => {\n setSelectedOptions([]);\n onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n };\n\n return { clearSelection, selectOption, selectedOptions };\n};\n"],"names":["useCallback","useControllableState","useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","state","defaultState","initialState","selectOption","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"mappings":"AAAA,SAASA,WAAW,QAAQ,QAAQ;AACpC,SAASC,oBAAoB,QAAQ,4BAA4B;AAIjE,OAAO,MAAMC,eAAe,CAACC,QAA0C;IACrE,MAAM,EAAEC,uBAAsB,EAAEC,YAAW,EAAEC,eAAc,EAAE,GAAGH;IAEhE,MAAM,CAACI,iBAAiBC,mBAAmB,GAAGP,qBAAqB;QACjEQ,OAAON,MAAMI,eAAe;QAC5BG,cAAcN;QACdO,cAAc,EAAE;IAClB;IAEA,MAAMC,eAAeZ,YACnB,CAACa,OAAwBC,SAAwB;QAC/C,wCAAwC;QACxC,IAAIA,OAAOC,QAAQ,EAAE;YACnB;QACF,CAAC;QAED,uDAAuD;QACvD,IAAIC,eAAe;YAACF,OAAOG,KAAK;SAAC;QAEjC,sDAAsD;QACtD,IAAIZ,aAAa;YACf,MAAMa,gBAAgBX,gBAAgBY,SAAS,CAACC,CAAAA,IAAKA,MAAMN,OAAOG,KAAK;YACvE,IAAIC,gBAAgB,CAAC,GAAG;gBACtB,kBAAkB;gBAClBF,eAAe;uBAAIT,gBAAgBc,KAAK,CAAC,GAAGH;uBAAmBX,gBAAgBc,KAAK,CAACH,gBAAgB;iBAAG;YAC1G,OAAO;gBACL,gBAAgB;gBAChBF,eAAe;uBAAIT;oBAAiBO,OAAOG,KAAK;iBAAC;YACnD,CAAC;QACH,CAAC;QAEDT,mBAAmBQ;QACnBV,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAiBO,OAAO;YAAES,aAAaR,OAAOG,KAAK;YAAEM,YAAYT,OAAOU,IAAI;YAAEjB,iBAAiBS;QAAa;IAC9G,GACA;QAACV;QAAgBD;QAAaE;QAAiBC;KAAmB;IAGpE,MAAMiB,iBAAiB,CAACZ,QAA2B;QACjDL,mBAAmB,EAAE;QACrBF,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAiBO,OAAO;YAAES,aAAaI;YAAWH,YAAYG;YAAWnB,iBAAiB,EAAE;QAAC;IAC/F;IAEA,OAAO;QAAEkB;QAAgBb;QAAcL;IAAgB;AACzD,EAAE"}
|
|
@@ -5,124 +5,110 @@ import { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownK
|
|
|
5
5
|
* useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,
|
|
6
6
|
* with the semantics and event handlers needed for the Combobox and Dropdown components.
|
|
7
7
|
* The element type of the ref should always match the element type used in the trigger shorthand.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
*/
|
|
52
|
-
const listboxOnClick = useEventCallback(mergeCallbacks(event => {
|
|
53
|
-
var _triggerRef_current;
|
|
54
|
-
(_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
|
|
55
|
-
}, listbox === null || listbox === void 0 ? void 0 : listbox.onClick));
|
|
56
|
-
const listboxOnMouseOver = useEventCallback(mergeCallbacks(event => {
|
|
57
|
-
setFocusVisible(false);
|
|
58
|
-
}, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseOver));
|
|
59
|
-
const listboxOnMouseDown = useEventCallback(mergeCallbacks(event => {
|
|
60
|
-
ignoreNextBlur.current = true;
|
|
61
|
-
}, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseDown));
|
|
62
|
-
// listbox is nullable, only add event handlers if it exists
|
|
63
|
-
if (listbox) {
|
|
64
|
-
listbox.onClick = listboxOnClick;
|
|
65
|
-
listbox.onMouseOver = listboxOnMouseOver;
|
|
66
|
-
listbox.onMouseDown = listboxOnMouseDown;
|
|
67
|
-
}
|
|
68
|
-
// the trigger should open/close the popup on click or blur
|
|
69
|
-
trigger.onBlur = mergeCallbacks(event => {
|
|
70
|
-
if (!ignoreNextBlur.current) {
|
|
71
|
-
setOpen(event, false);
|
|
8
|
+
*/ export function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
|
|
9
|
+
const { multiselect } = props;
|
|
10
|
+
const { activeOption , getCount , getIndexOfId , getOptionAtIndex , ignoreNextBlur , open , selectOption , setActiveOption , setFocusVisible , setHasFocus , setOpen } = state;
|
|
11
|
+
// handle trigger focus/blur
|
|
12
|
+
const triggerRef = React.useRef(null);
|
|
13
|
+
// resolve listbox shorthand props
|
|
14
|
+
const listboxId = useId('fluent-listbox', listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id);
|
|
15
|
+
const listbox = listboxSlot && {
|
|
16
|
+
id: listboxId,
|
|
17
|
+
multiselect,
|
|
18
|
+
tabIndex: undefined,
|
|
19
|
+
...listboxSlot
|
|
20
|
+
};
|
|
21
|
+
// resolve trigger shorthand props
|
|
22
|
+
const trigger = {
|
|
23
|
+
'aria-expanded': open,
|
|
24
|
+
'aria-activedescendant': open ? activeOption === null || activeOption === void 0 ? void 0 : activeOption.id : undefined,
|
|
25
|
+
role: 'combobox',
|
|
26
|
+
...triggerSlot,
|
|
27
|
+
// explicitly type the ref as an intersection here to prevent type errors
|
|
28
|
+
// since the `children` prop has mutually incompatible types between input/button
|
|
29
|
+
// functionally both ref and triggerRef will always be the same element type
|
|
30
|
+
ref: useMergedRefs(ref, triggerSlot === null || triggerSlot === void 0 ? void 0 : triggerSlot.ref, triggerRef)
|
|
31
|
+
};
|
|
32
|
+
/*
|
|
33
|
+
* Handle focus when clicking the listbox popup:
|
|
34
|
+
* 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)
|
|
35
|
+
* 2. Do not close the listbox on button/input blur when clicking into the listbox
|
|
36
|
+
*/ const listboxOnClick = useEventCallback(mergeCallbacks((event)=>{
|
|
37
|
+
var _triggerRef_current;
|
|
38
|
+
(_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
|
|
39
|
+
}, listbox === null || listbox === void 0 ? void 0 : listbox.onClick));
|
|
40
|
+
const listboxOnMouseOver = useEventCallback(mergeCallbacks((event)=>{
|
|
41
|
+
setFocusVisible(false);
|
|
42
|
+
}, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseOver));
|
|
43
|
+
const listboxOnMouseDown = useEventCallback(mergeCallbacks((event)=>{
|
|
44
|
+
ignoreNextBlur.current = true;
|
|
45
|
+
}, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseDown));
|
|
46
|
+
// listbox is nullable, only add event handlers if it exists
|
|
47
|
+
if (listbox) {
|
|
48
|
+
listbox.onClick = listboxOnClick;
|
|
49
|
+
listbox.onMouseOver = listboxOnMouseOver;
|
|
50
|
+
listbox.onMouseDown = listboxOnMouseDown;
|
|
72
51
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
52
|
+
// the trigger should open/close the popup on click or blur
|
|
53
|
+
trigger.onBlur = mergeCallbacks((event)=>{
|
|
54
|
+
if (!ignoreNextBlur.current) {
|
|
55
|
+
setOpen(event, false);
|
|
56
|
+
}
|
|
57
|
+
ignoreNextBlur.current = false;
|
|
58
|
+
setHasFocus(false);
|
|
59
|
+
}, trigger.onBlur);
|
|
60
|
+
trigger.onClick = mergeCallbacks((event)=>{
|
|
61
|
+
setOpen(event, !open);
|
|
62
|
+
}, trigger.onClick);
|
|
63
|
+
trigger.onFocus = mergeCallbacks((event)=>{
|
|
64
|
+
setHasFocus(true);
|
|
65
|
+
}, trigger.onFocus);
|
|
66
|
+
// handle combobox keyboard interaction
|
|
67
|
+
trigger.onKeyDown = mergeCallbacks((event)=>{
|
|
68
|
+
const action = getDropdownActionFromKey(event, {
|
|
69
|
+
open,
|
|
70
|
+
multiselect
|
|
71
|
+
});
|
|
72
|
+
const maxIndex = getCount() - 1;
|
|
73
|
+
const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
|
|
74
|
+
let newIndex = activeIndex;
|
|
75
|
+
switch(action){
|
|
76
|
+
case 'Open':
|
|
77
|
+
event.preventDefault();
|
|
78
|
+
setFocusVisible(true);
|
|
79
|
+
setOpen(event, true);
|
|
80
|
+
break;
|
|
81
|
+
case 'Close':
|
|
82
|
+
// stop propagation for escape key to avoid dismissing any parent popups
|
|
83
|
+
event.stopPropagation();
|
|
84
|
+
event.preventDefault();
|
|
85
|
+
setOpen(event, false);
|
|
86
|
+
break;
|
|
87
|
+
case 'CloseSelect':
|
|
88
|
+
!multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(event, false);
|
|
89
|
+
// fallthrough
|
|
90
|
+
case 'Select':
|
|
91
|
+
activeOption && selectOption(event, activeOption);
|
|
92
|
+
event.preventDefault();
|
|
93
|
+
break;
|
|
94
|
+
case 'Tab':
|
|
95
|
+
!multiselect && activeOption && selectOption(event, activeOption);
|
|
96
|
+
break;
|
|
97
|
+
default:
|
|
98
|
+
newIndex = getIndexFromAction(action, activeIndex, maxIndex);
|
|
99
|
+
}
|
|
100
|
+
if (newIndex !== activeIndex) {
|
|
101
|
+
// prevent default page scroll/keyboard action if the index changed
|
|
102
|
+
event.preventDefault();
|
|
103
|
+
setActiveOption(getOptionAtIndex(newIndex));
|
|
104
|
+
setFocusVisible(true);
|
|
105
|
+
}
|
|
106
|
+
}, trigger.onKeyDown);
|
|
107
|
+
trigger.onMouseOver = mergeCallbacks((event)=>{
|
|
108
|
+
setFocusVisible(false);
|
|
109
|
+
}, trigger.onMouseOver);
|
|
110
|
+
return [
|
|
111
|
+
trigger,
|
|
112
|
+
listbox
|
|
113
|
+
];
|
|
127
114
|
}
|
|
128
|
-
//# sourceMappingURL=useTriggerListboxSlots.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","mergeCallbacks","useId","useEventCallback","useMergedRefs","getDropdownActionFromKey","getIndexFromAction","useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","useRef","listboxId","id","listbox","tabIndex","undefined","trigger","role","listboxOnClick","event","_triggerRef_current","current","focus","onClick","listboxOnMouseOver","onMouseOver","listboxOnMouseDown","onMouseDown","onBlur","onFocus","onKeyDown","action","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled"],"sources":["../../src/utils/useTriggerListboxSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useId, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport { Listbox } from '../components/Listbox/Listbox';\nimport type { ComboboxBaseProps, ComboboxBaseState } from './ComboboxBase.types';\n\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement>,\n triggerSlot?: ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\n/*\n * useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement | HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n const { multiselect } = props;\n const {\n activeOption,\n getCount,\n getIndexOfId,\n getOptionAtIndex,\n ignoreNextBlur,\n open,\n selectOption,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n } = state;\n\n // handle trigger focus/blur\n const triggerRef: typeof ref = React.useRef(null);\n\n // resolve listbox shorthand props\n const listboxId = useId('fluent-listbox', listboxSlot?.id);\n const listbox: typeof listboxSlot = listboxSlot && {\n id: listboxId,\n multiselect,\n tabIndex: undefined,\n ...listboxSlot,\n };\n\n // resolve trigger shorthand props\n const trigger: typeof triggerSlot = {\n 'aria-expanded': open,\n 'aria-activedescendant': open ? activeOption?.id : undefined,\n role: 'combobox',\n ...triggerSlot,\n // explicitly type the ref as an intersection here to prevent type errors\n // since the `children` prop has mutually incompatible types between input/button\n // functionally both ref and triggerRef will always be the same element type\n ref: useMergedRefs(ref, triggerSlot?.ref, triggerRef) as React.Ref<HTMLButtonElement & HTMLInputElement>,\n };\n\n /*\n * Handle focus when clicking the listbox popup:\n * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)\n * 2. Do not close the listbox on button/input blur when clicking into the listbox\n */\n const listboxOnClick = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n triggerRef.current?.focus();\n }, listbox?.onClick),\n );\n\n const listboxOnMouseOver = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n setFocusVisible(false);\n }, listbox?.onMouseOver),\n );\n\n const listboxOnMouseDown = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n ignoreNextBlur.current = true;\n }, listbox?.onMouseDown),\n );\n\n // listbox is nullable, only add event handlers if it exists\n if (listbox) {\n listbox.onClick = listboxOnClick;\n listbox.onMouseOver = listboxOnMouseOver;\n listbox.onMouseDown = listboxOnMouseDown;\n }\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 if (!ignoreNextBlur.current) {\n setOpen(event, false);\n }\n\n ignoreNextBlur.current = false;\n\n setHasFocus(false);\n }, trigger.onBlur);\n\n trigger.onClick = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n },\n trigger.onClick,\n );\n\n trigger.onFocus = mergeCallbacks(\n (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n setHasFocus(true);\n },\n trigger.onFocus,\n );\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks(\n (event: React.KeyboardEvent<HTMLButtonElement> & React.KeyboardEvent<HTMLInputElement>) => {\n const action = getDropdownActionFromKey(event, { open, multiselect });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Open':\n event.preventDefault();\n setFocusVisible(true);\n setOpen(event, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n event.stopPropagation();\n event.preventDefault();\n setOpen(event, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(event, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(event, activeOption);\n event.preventDefault();\n break;\n case 'Tab':\n !multiselect && activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n setFocusVisible(true);\n }\n },\n trigger.onKeyDown,\n );\n\n trigger.onMouseOver = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setFocusVisible(false);\n },\n trigger.onMouseOver,\n );\n\n return [trigger, listbox];\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useTriggerListboxSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useId, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport { Listbox } from '../components/Listbox/Listbox';\nimport type { ComboboxBaseProps, ComboboxBaseState } from './ComboboxBase.types';\n\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement>,\n triggerSlot?: ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\n/*\n * useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement | HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n const { multiselect } = props;\n const {\n activeOption,\n getCount,\n getIndexOfId,\n getOptionAtIndex,\n ignoreNextBlur,\n open,\n selectOption,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n } = state;\n\n // handle trigger focus/blur\n const triggerRef: typeof ref = React.useRef(null);\n\n // resolve listbox shorthand props\n const listboxId = useId('fluent-listbox', listboxSlot?.id);\n const listbox: typeof listboxSlot = listboxSlot && {\n id: listboxId,\n multiselect,\n tabIndex: undefined,\n ...listboxSlot,\n };\n\n // resolve trigger shorthand props\n const trigger: typeof triggerSlot = {\n 'aria-expanded': open,\n 'aria-activedescendant': open ? activeOption?.id : undefined,\n role: 'combobox',\n ...triggerSlot,\n // explicitly type the ref as an intersection here to prevent type errors\n // since the `children` prop has mutually incompatible types between input/button\n // functionally both ref and triggerRef will always be the same element type\n ref: useMergedRefs(ref, triggerSlot?.ref, triggerRef) as React.Ref<HTMLButtonElement & HTMLInputElement>,\n };\n\n /*\n * Handle focus when clicking the listbox popup:\n * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)\n * 2. Do not close the listbox on button/input blur when clicking into the listbox\n */\n const listboxOnClick = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n triggerRef.current?.focus();\n }, listbox?.onClick),\n );\n\n const listboxOnMouseOver = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n setFocusVisible(false);\n }, listbox?.onMouseOver),\n );\n\n const listboxOnMouseDown = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n ignoreNextBlur.current = true;\n }, listbox?.onMouseDown),\n );\n\n // listbox is nullable, only add event handlers if it exists\n if (listbox) {\n listbox.onClick = listboxOnClick;\n listbox.onMouseOver = listboxOnMouseOver;\n listbox.onMouseDown = listboxOnMouseDown;\n }\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 if (!ignoreNextBlur.current) {\n setOpen(event, false);\n }\n\n ignoreNextBlur.current = false;\n\n setHasFocus(false);\n }, trigger.onBlur);\n\n trigger.onClick = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n },\n trigger.onClick,\n );\n\n trigger.onFocus = mergeCallbacks(\n (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n setHasFocus(true);\n },\n trigger.onFocus,\n );\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks(\n (event: React.KeyboardEvent<HTMLButtonElement> & React.KeyboardEvent<HTMLInputElement>) => {\n const action = getDropdownActionFromKey(event, { open, multiselect });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Open':\n event.preventDefault();\n setFocusVisible(true);\n setOpen(event, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n event.stopPropagation();\n event.preventDefault();\n setOpen(event, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(event, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(event, activeOption);\n event.preventDefault();\n break;\n case 'Tab':\n !multiselect && activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n setFocusVisible(true);\n }\n },\n trigger.onKeyDown,\n );\n\n trigger.onMouseOver = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setFocusVisible(false);\n },\n trigger.onMouseOver,\n );\n\n return [trigger, listbox];\n}\n"],"names":["React","mergeCallbacks","useId","useEventCallback","useMergedRefs","getDropdownActionFromKey","getIndexFromAction","useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","useRef","listboxId","id","listbox","tabIndex","undefined","trigger","role","listboxOnClick","event","current","focus","onClick","listboxOnMouseOver","onMouseOver","listboxOnMouseDown","onMouseDown","onBlur","onFocus","onKeyDown","action","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled"],"mappings":"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"}
|
package/lib-commonjs/Combobox.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["Combobox.js"],"sourcesContent":["export * from './components/Combobox/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
package/lib-commonjs/Dropdown.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["Dropdown.js"],"sourcesContent":["export * from './components/Dropdown/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
package/lib-commonjs/Listbox.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["Listbox.js"],"sourcesContent":["export * from './components/Listbox/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
package/lib-commonjs/Option.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["Option.js"],"sourcesContent":["export * from './components/Option/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
|
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
});
|
|
5
5
|
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
6
|
_exportStar(require("./components/OptionGroup/index"), exports);
|
|
7
|
-
//# sourceMappingURL=OptionGroup.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=OptionGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["OptionGroup.js"],"sourcesContent":["export * from './components/OptionGroup/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["Selection.js"],"sourcesContent":["export * from './utils/Selection.types';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
|
@@ -20,6 +20,4 @@ const Combobox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
20
20
|
(0, _reactSharedContexts.useCustomStyleHook_unstable)('useComboboxStyles_unstable')(state);
|
|
21
21
|
return (0, _renderCombobox.renderCombobox_unstable)(state, contextValues);
|
|
22
22
|
});
|
|
23
|
-
Combobox.displayName = 'Combobox';
|
|
24
|
-
|
|
25
|
-
//# sourceMappingURL=Combobox.js.map
|
|
23
|
+
Combobox.displayName = 'Combobox';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["Combobox.js"],"sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */ export const Combobox = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const state = useCombobox_unstable(props, ref);\n const contextValues = useComboboxContextValues(state);\n useComboboxStyles_unstable(state);\n useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n return renderCombobox_unstable(state, contextValues);\n});\nCombobox.displayName = 'Combobox';\n"],"names":["Combobox","React","forwardRef","props","ref","state","useCombobox_unstable","contextValues","useComboboxContextValues","useComboboxStyles_unstable","useCustomStyleHook_unstable","renderCombobox_unstable","displayName"],"mappings":";;;;+BAQiBA;;aAAAA;;;6DARM;6BACc;gCACG;yCACG;0CACF;qCACG;AAGjC,MAAMA,WAAW,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACrE,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1C,MAAMG,gBAAgBC,IAAAA,kDAAwB,EAACH;IAC/CI,IAAAA,mDAA0B,EAACJ;IAC3BK,IAAAA,gDAA2B,EAAC,8BAA8BL;IAC1D,OAAOM,IAAAA,uCAAuB,EAACN,OAAOE;AAC1C;AACAP,SAASY,WAAW,GAAG"}
|
|
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
});
|
|
5
5
|
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
6
6
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
7
|
-
//# sourceMappingURL=Combobox.types.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=Combobox.types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["Combobox.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;6DAAuB"}
|
|
@@ -8,6 +8,3 @@ _exportStar(require("./Combobox.types"), exports);
|
|
|
8
8
|
_exportStar(require("./renderCombobox"), exports);
|
|
9
9
|
_exportStar(require("./useCombobox"), exports);
|
|
10
10
|
_exportStar(require("./useComboboxStyles.styles"), exports);
|
|
11
|
-
//# sourceMappingURL=index.js.map
|
|
12
|
-
|
|
13
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles.styles';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA"}
|
|
@@ -15,6 +15,4 @@ const renderCombobox_unstable = (state, contextValues)=>{
|
|
|
15
15
|
return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_comboboxContext.ComboboxContext.Provider, {
|
|
16
16
|
value: contextValues.combobox
|
|
17
17
|
}, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.input, slotProps.input), slots.expandIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.expandIcon, slotProps.expandIcon), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.listbox, slotProps.listbox) : /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_reactPortal.Portal, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.listbox, slotProps.listbox)))));
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
//# sourceMappingURL=renderCombobox.js.map
|
|
18
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["renderCombobox.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { Portal } from '@fluentui/react-portal';\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Combobox\n */ export const renderCombobox_unstable = (state, contextValues)=>{\n const { slots , slotProps } = getSlotsNext(state);\n return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(ComboboxContext.Provider, {\n value: contextValues.combobox\n }, /*#__PURE__*/ createElement(slots.input, slotProps.input), slots.expandIcon && /*#__PURE__*/ createElement(slots.expandIcon, slotProps.expandIcon), slots.listbox && (state.inlinePopup ? /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/ createElement(Portal, null, /*#__PURE__*/ createElement(slots.listbox, slotProps.listbox)))));\n};\n"],"names":["renderCombobox_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","root","ComboboxContext","Provider","value","combobox","input","expandIcon","listbox","inlinePopup","Portal"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAMjCA;;aAAAA;;6BAN2D;iCAC9C;gCACD;iCACG;AAGrB,MAAMA,0BAA0B,CAACC,OAAOC,gBAAgB;IAC/D,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,gCAAe,CAACC,QAAQ,EAAE;QACjHC,OAAOR,cAAcS,QAAQ;IACjC,GAAG,WAAW,GAAGL,IAAAA,8BAAa,EAACH,MAAMS,KAAK,EAAER,UAAUQ,KAAK,GAAGT,MAAMU,UAAU,IAAI,WAAW,GAAGP,IAAAA,8BAAa,EAACH,MAAMU,UAAU,EAAET,UAAUS,UAAU,GAAGV,MAAMW,OAAO,IAAKb,CAAAA,MAAMc,WAAW,GAAG,WAAW,GAAGT,IAAAA,8BAAa,EAACH,MAAMW,OAAO,EAAEV,UAAUU,OAAO,IAAI,WAAW,GAAGR,IAAAA,8BAAa,EAACU,mBAAM,EAAE,IAAI,EAAE,WAAW,GAAGV,IAAAA,8BAAa,EAACH,MAAMW,OAAO,EAAEV,UAAUU,OAAO,EAAE,AAAD;AACxW"}
|