@fluentui/react-combobox 9.0.0-beta.20 → 9.0.0-beta.22

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.
Files changed (23) hide show
  1. package/CHANGELOG.json +67 -1
  2. package/CHANGELOG.md +26 -2
  3. package/lib/components/Combobox/useCombobox.js +20 -10
  4. package/lib/components/Combobox/useCombobox.js.map +1 -1
  5. package/lib/components/Dropdown/useDropdownStyles.js +7 -3
  6. package/lib/components/Dropdown/useDropdownStyles.js.map +1 -1
  7. package/lib/utils/useComboboxBaseState.js +6 -6
  8. package/lib/utils/useComboboxBaseState.js.map +1 -1
  9. package/lib/utils/useSelection.js +3 -2
  10. package/lib/utils/useSelection.js.map +1 -1
  11. package/lib/utils/useTriggerListboxSlots.js +19 -16
  12. package/lib/utils/useTriggerListboxSlots.js.map +1 -1
  13. package/lib-commonjs/components/Combobox/useCombobox.js +20 -10
  14. package/lib-commonjs/components/Combobox/useCombobox.js.map +1 -1
  15. package/lib-commonjs/components/Dropdown/useDropdownStyles.js +7 -3
  16. package/lib-commonjs/components/Dropdown/useDropdownStyles.js.map +1 -1
  17. package/lib-commonjs/utils/useComboboxBaseState.js +6 -6
  18. package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
  19. package/lib-commonjs/utils/useSelection.js +3 -2
  20. package/lib-commonjs/utils/useSelection.js.map +1 -1
  21. package/lib-commonjs/utils/useTriggerListboxSlots.js +18 -15
  22. package/lib-commonjs/utils/useTriggerListboxSlots.js.map +1 -1
  23. package/package.json +6 -6
package/CHANGELOG.json CHANGED
@@ -2,7 +2,73 @@
2
2
  "name": "@fluentui/react-combobox",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 04 Jan 2023 01:36:17 GMT",
5
+ "date": "Mon, 09 Jan 2023 21:50:48 GMT",
6
+ "tag": "@fluentui/react-combobox_v9.0.0-beta.22",
7
+ "version": "9.0.0-beta.22",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "sarah.higley@microsoft.com",
12
+ "package": "@fluentui/react-combobox",
13
+ "commit": "e361553bf9966758a89630a2d5fc94a94ded5d5f",
14
+ "comment": "fix: disabled cursor style, opening when disabled, and hover styles"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Mon, 09 Jan 2023 14:34:55 GMT",
21
+ "tag": "@fluentui/react-combobox_v9.0.0-beta.21",
22
+ "version": "9.0.0-beta.21",
23
+ "comments": {
24
+ "prerelease": [
25
+ {
26
+ "author": "sarah.higley@microsoft.com",
27
+ "package": "@fluentui/react-combobox",
28
+ "commit": "d7a98c92818f5ad8c80548dc288cc2cc55731c93",
29
+ "comment": "fix: perf improvements with useEventCallback"
30
+ },
31
+ {
32
+ "author": "sarah.higley@microsoft.com",
33
+ "package": "@fluentui/react-combobox",
34
+ "commit": "54b6220d442231ffa0c3df88359f53373690da6f",
35
+ "comment": "fix: Combobox always starts at the first option if multiselect, and correctly sets focus visible\""
36
+ },
37
+ {
38
+ "author": "beachball",
39
+ "package": "@fluentui/react-combobox",
40
+ "comment": "Bump @fluentui/react-context-selector to v9.1.5",
41
+ "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
42
+ },
43
+ {
44
+ "author": "beachball",
45
+ "package": "@fluentui/react-combobox",
46
+ "comment": "Bump @fluentui/react-field to v9.0.0-alpha.14",
47
+ "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
48
+ },
49
+ {
50
+ "author": "beachball",
51
+ "package": "@fluentui/react-combobox",
52
+ "comment": "Bump @fluentui/react-portal to v9.1.0",
53
+ "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-combobox",
58
+ "comment": "Bump @fluentui/react-positioning to v9.3.7",
59
+ "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
60
+ },
61
+ {
62
+ "author": "beachball",
63
+ "package": "@fluentui/react-combobox",
64
+ "comment": "Bump @fluentui/react-utilities to v9.4.0",
65
+ "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
66
+ }
67
+ ]
68
+ }
69
+ },
70
+ {
71
+ "date": "Wed, 04 Jan 2023 01:40:56 GMT",
6
72
  "tag": "@fluentui/react-combobox_v9.0.0-beta.20",
7
73
  "version": "9.0.0-beta.20",
8
74
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,36 @@
1
1
  # Change Log - @fluentui/react-combobox
2
2
 
3
- This log was last generated on Wed, 04 Jan 2023 01:36:17 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 09 Jan 2023 21:50:48 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.22)
8
+
9
+ Mon, 09 Jan 2023 21:50:48 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.21..@fluentui/react-combobox_v9.0.0-beta.22)
11
+
12
+ ### Changes
13
+
14
+ - fix: disabled cursor style, opening when disabled, and hover styles ([PR #26068](https://github.com/microsoft/fluentui/pull/26068) by sarah.higley@microsoft.com)
15
+
16
+ ## [9.0.0-beta.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.21)
17
+
18
+ Mon, 09 Jan 2023 14:34:55 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.20..@fluentui/react-combobox_v9.0.0-beta.21)
20
+
21
+ ### Changes
22
+
23
+ - fix: perf improvements with useEventCallback ([PR #26191](https://github.com/microsoft/fluentui/pull/26191) by sarah.higley@microsoft.com)
24
+ - fix: Combobox always starts at the first option if multiselect, and correctly sets focus visible" ([PR #26173](https://github.com/microsoft/fluentui/pull/26173) by sarah.higley@microsoft.com)
25
+ - Bump @fluentui/react-context-selector to v9.1.5 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
26
+ - Bump @fluentui/react-field to v9.0.0-alpha.14 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
27
+ - Bump @fluentui/react-portal to v9.1.0 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
28
+ - Bump @fluentui/react-positioning to v9.3.7 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
29
+ - Bump @fluentui/react-utilities to v9.4.0 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
30
+
7
31
  ## [9.0.0-beta.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.20)
8
32
 
9
- Wed, 04 Jan 2023 01:36:17 GMT
33
+ Wed, 04 Jan 2023 01:40:56 GMT
10
34
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.19..@fluentui/react-combobox_v9.0.0-beta.20)
11
35
 
12
36
  ### Changes
package/lib/components/Combobox/useCombobox.js CHANGED
@@ -37,6 +37,7 @@ export const useCombobox_unstable = (props, ref) => {
37
37
  value
38
38
  } = baseState;
39
39
  const {
40
+ disabled,
40
41
  freeform,
41
42
  multiselect
42
43
  } = props;
@@ -51,12 +52,19 @@ export const useCombobox_unstable = (props, ref) => {
51
52
  const rootRef = React.useRef(null);
52
53
  const triggerRef = React.useRef(null);
53
54
  // calculate listbox width style based on trigger width
54
- const [popupWidth, setPopupWidth] = React.useState();
55
+ const [popupDimensions, setPopupDimensions] = React.useState();
55
56
  React.useEffect(() => {
56
57
  var _a;
57
- const width = open ? `${(_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth}px` : undefined;
58
- setPopupWidth(width);
59
- }, [open]);
58
+ // only recalculate width when opening
59
+ if (open) {
60
+ const width = `${(_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth}px`;
61
+ if (width !== (popupDimensions === null || popupDimensions === void 0 ? void 0 : popupDimensions.width)) {
62
+ setPopupDimensions({
63
+ width
64
+ });
65
+ }
66
+ }
67
+ }, [open, popupDimensions]);
60
68
  // set active option and selection based on typing
61
69
  const getOptionFromInput = inputValue => {
62
70
  var _a;
@@ -92,6 +100,9 @@ export const useCombobox_unstable = (props, ref) => {
92
100
  }
93
101
  };
94
102
  baseState.setOpen = (ev, newState) => {
103
+ if (disabled) {
104
+ return;
105
+ }
95
106
  if (!newState && !freeform) {
96
107
  setValue(undefined);
97
108
  }
@@ -114,7 +125,7 @@ export const useCombobox_unstable = (props, ref) => {
114
125
  // open Combobox when typing
115
126
  const onTriggerKeyDown = ev => {
116
127
  if (!open && getDropdownActionFromKey(ev) === 'Type') {
117
- setOpen(ev, true);
128
+ baseState.setOpen(ev, true);
118
129
  }
119
130
  };
120
131
  // resolve input and listbox slot props
@@ -137,9 +148,7 @@ export const useCombobox_unstable = (props, ref) => {
137
148
  required: true,
138
149
  defaultProps: {
139
150
  children: props.children,
140
- style: {
141
- width: popupWidth
142
- }
151
+ style: popupDimensions
143
152
  }
144
153
  }) : undefined;
145
154
  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);
@@ -165,8 +174,7 @@ export const useCombobox_unstable = (props, ref) => {
165
174
  children: /*#__PURE__*/React.createElement(ChevronDownIcon, null)
166
175
  }
167
176
  }),
168
- ...baseState,
169
- setOpen
177
+ ...baseState
170
178
  };
171
179
  state.root.ref = useMergedRefs(state.root.ref, rootRef);
172
180
  /* handle open/close + focus change when clicking expandIcon */
@@ -185,6 +193,8 @@ export const useCombobox_unstable = (props, ref) => {
185
193
  // open and set focus
186
194
  state.setOpen(event, !state.open);
187
195
  (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
196
+ // set focus visible=false, since this can only be done with the mouse/pointer
197
+ setFocusVisible(false);
188
198
  }));
189
199
  if (state.expandIcon) {
190
200
  state.expandIcon.onMouseDown = onExpandIconMouseDown;
package/lib/components/Combobox/useCombobox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["React","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","resolveShorthand","mergeCallbacks","useEventCallback","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","freeform","multiselect","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","popupWidth","setPopupWidth","useState","useEffect","width","current","clientWidth","undefined","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","ev","onTriggerBlur","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","triggerSlot","listboxSlot","input","required","defaultProps","type","onChange","onBlur","onKeyDown","listbox","children","style","state","components","expandIcon","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n mergeCallbacks,\n useEventCallback,\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 { freeform, multiselect } = props;\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 // calculate listbox width style based on trigger width\n const [popupWidth, setPopupWidth] = React.useState<string>();\n React.useEffect(() => {\n const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n setPopupWidth(width);\n }, [open]);\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?.value.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 (!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 (\n !multiselect &&\n selectedOptions.length === 1 &&\n (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)\n ) {\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 setOpen(ev, true);\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: { width: popupWidth },\n },\n })\n : undefined;\n\n [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\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 ...rootNativeProps,\n },\n }),\n input: triggerSlot,\n listbox: listboxSlot,\n expandIcon: resolveShorthand(props.expandIcon, {\n required: true,\n defaultProps: {\n children: <ChevronDownIcon />,\n },\n }),\n ...baseState,\n setOpen,\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 );\n\n if (state.expandIcon) {\n state.expandIcon.onMouseDown = onExpandIconMouseDown;\n state.expandIcon.onClick = onExpandIconClick;\n }\n\n return state;\n};\n"]}
1
+ {"version":3,"mappings":"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","names":["React","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","resolveShorthand","mergeCallbacks","useEventCallback","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","multiselect","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","popupDimensions","setPopupDimensions","useState","useEffect","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","triggerSlot","listboxSlot","input","required","defaultProps","type","onChange","onBlur","onKeyDown","listbox","children","style","state","components","expandIcon","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n mergeCallbacks,\n useEventCallback,\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, multiselect } = props;\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 // 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?.value.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 (\n !multiselect &&\n selectedOptions.length === 1 &&\n (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)\n ) {\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\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 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 ...rootNativeProps,\n },\n }),\n input: triggerSlot,\n listbox: listboxSlot,\n expandIcon: resolveShorthand(props.expandIcon, {\n required: true,\n defaultProps: {\n children: <ChevronDownIcon />,\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\n return state;\n};\n"]}
package/lib/components/Dropdown/useDropdownStyles.js CHANGED
@@ -192,9 +192,13 @@ const useStyles = /*#__PURE__*/__styles({
192
192
  Bn1d65q: ["f1rvyvqg", "f14g86mu"],
193
193
  Bxeuatn: "f1cwzwz",
194
194
  n51gp8: ["f14g86mu", "f1rvyvqg"]
195
+ },
196
+ disabledText: {
197
+ sj55zd: "f1s2aq7o",
198
+ Bceei9c: "fdrzuqr"
195
199
  }
196
200
  }, {
197
- d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
201
+ d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
198
202
  w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
199
203
  m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
200
204
  m: "screen and (prefers-reduced-motion: reduce)"
@@ -259,8 +263,8 @@ export const useDropdownStyles_unstable = state => {
259
263
  const disabled = state.button.disabled;
260
264
  const styles = useStyles();
261
265
  const iconStyles = useIconStyles();
262
- state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
263
- state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, state.button.className);
266
+ state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
267
+ state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);
264
268
  if (state.listbox) {
265
269
  state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
266
270
  }
package/lib/components/Dropdown/useDropdownStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["tokens","typographyStyles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","expandIcon","listbox","useStyles","useIconStyles","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","invalid","disabled","styles","iconStyles","className","invalidUnderline","placeholder","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.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 { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\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(${tokens.strokeWidthThick}, ${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\n listboxCollapsed: {\n display: 'none',\n },\n\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n\n '&:focus': {\n outlineStyle: 'none',\n },\n },\n\n placeholder: {\n color: tokens.colorNeutralForeground4,\n },\n\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding(\n '3px',\n tokens.spacingHorizontalSNudge,\n '3px',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(\n '5px',\n tokens.spacingHorizontalMNudge,\n '5px',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding(\n '7px',\n tokens.spacingHorizontalM,\n '7px',\n `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n ),\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 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', 'transparent'),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\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 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 useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\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\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n const { appearance, open, placeholderVisible, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n\n state.root.className = mergeClasses(\n dropdownClassNames.root,\n styles.root,\n styles[appearance],\n invalid && appearance !== 'underline' && styles.invalid,\n invalid && appearance === 'underline' && styles.invalidUnderline,\n disabled && styles.disabled,\n state.root.className,\n );\n\n state.button.className = mergeClasses(\n dropdownClassNames.button,\n styles.button,\n styles[size],\n placeholderVisible && styles.placeholder,\n state.button.className,\n );\n\n if (state.listbox) {\n state.listbox.className = mergeClasses(\n dropdownClassNames.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 dropdownClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"]}
1
+ {"version":3,"mappings":"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","names":["tokens","typographyStyles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","expandIcon","listbox","useStyles","useIconStyles","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","invalid","disabled","styles","iconStyles","className","outlineInteractive","invalidUnderline","placeholder","disabledText","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.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 { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\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(${tokens.strokeWidthThick}, ${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\n listboxCollapsed: {\n display: 'none',\n },\n\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n\n '&:focus': {\n outlineStyle: 'none',\n },\n },\n\n placeholder: {\n color: tokens.colorNeutralForeground4,\n },\n\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding(\n '3px',\n tokens.spacingHorizontalSNudge,\n '3px',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(\n '5px',\n tokens.spacingHorizontalMNudge,\n '5px',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding(\n '7px',\n tokens.spacingHorizontalM,\n '7px',\n `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n ),\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 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', 'transparent'),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\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 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 disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\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\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n const { appearance, open, placeholderVisible, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n\n state.root.className = mergeClasses(\n dropdownClassNames.root,\n styles.root,\n styles[appearance],\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.button.className = mergeClasses(\n dropdownClassNames.button,\n styles.button,\n styles[size],\n placeholderVisible && styles.placeholder,\n disabled && styles.disabledText,\n state.button.className,\n );\n\n if (state.listbox) {\n state.listbox.className = mergeClasses(\n dropdownClassNames.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 dropdownClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"]}
package/lib/utils/useComboboxBaseState.js CHANGED
@@ -57,19 +57,19 @@ export const useComboboxBaseState = props => {
57
57
  defaultState: props.defaultOpen,
58
58
  initialState: false
59
59
  });
60
- const setOpen = (event, newState) => {
60
+ const setOpen = React.useCallback((event, newState) => {
61
61
  onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
62
62
  open: newState
63
63
  });
64
64
  setOpenState(newState);
65
- };
65
+ }, [onOpenChange, setOpenState]);
66
66
  // update active option based on change in open state
67
67
  React.useEffect(() => {
68
68
  if (open && !activeOption) {
69
- // if there is a selection, start at the most recently selected item
70
- if (selectedOptions.length > 0) {
71
- const lastSelectedOption = getOptionsMatchingText(v => v === selectedOptions[selectedOptions.length - 1]).pop();
72
- lastSelectedOption && setActiveOption(lastSelectedOption);
69
+ // if it is single-select and there is a selected option, start at the selected option
70
+ if (!multiselect && selectedOptions.length > 0) {
71
+ const selectedOption = getOptionsMatchingText(v => v === selectedOptions[0]).pop();
72
+ selectedOption && setActiveOption(selectedOption);
73
73
  }
74
74
  // default to starting at the first option
75
75
  else {
package/lib/utils/useComboboxBaseState.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingText","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","lastSelectedOption","v","pop"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (props: ComboboxBaseProps & { editable?: boolean }): ComboboxBaseState => {\n const {\n appearance = 'outline',\n editable = false,\n inlinePopup = false,\n multiselect,\n onOpenChange,\n size = 'medium',\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionAtIndex, getOptionsMatchingText } = optionCollection;\n\n const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n const selectionState = useSelection(props);\n const { selectedOptions } = selectionState;\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptions.join(', ');\n }\n\n return selectedOptions[0];\n }, [controllableValue, editable, isFirstMount, multiselect, props.defaultValue, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = (event: ComboboxBaseOpenEvents, newState: boolean) => {\n onOpenChange?.(event, { open: newState });\n setOpenState(newState);\n };\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open && !activeOption) {\n // if there is a selection, start at the most recently selected item\n if (selectedOptions.length > 0) {\n const lastSelectedOption = getOptionsMatchingText(v => v === selectedOptions[selectedOptions.length - 1]).pop();\n lastSelectedOption && setActiveOption(lastSelectedOption);\n }\n // default to starting at the first option\n else {\n setActiveOption(getOptionAtIndex(0));\n }\n } else if (!open) {\n // reset the active option when closing\n setActiveOption(undefined);\n }\n // this should only be run in response to changes in the open state\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n return {\n ...optionCollection,\n ...selectionState,\n activeOption,\n appearance,\n focusVisible,\n hasFocus,\n ignoreNextBlur,\n inlinePopup,\n open,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n };\n};\n"]}
1
+ {"version":3,"mappings":"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","names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingText","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (props: ComboboxBaseProps & { editable?: boolean }): ComboboxBaseState => {\n const {\n appearance = 'outline',\n editable = false,\n inlinePopup = false,\n multiselect,\n onOpenChange,\n size = 'medium',\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionAtIndex, getOptionsMatchingText } = optionCollection;\n\n const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n const selectionState = useSelection(props);\n const { selectedOptions } = selectionState;\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptions.join(', ');\n }\n\n return selectedOptions[0];\n }, [controllableValue, editable, isFirstMount, multiselect, props.defaultValue, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n onOpenChange?.(event, { open: newState });\n setOpenState(newState);\n },\n [onOpenChange, setOpenState],\n );\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open && !activeOption) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingText(v => v === selectedOptions[0]).pop();\n selectedOption && setActiveOption(selectedOption);\n }\n // default to starting at the first option\n else {\n setActiveOption(getOptionAtIndex(0));\n }\n } else if (!open) {\n // reset the active option when closing\n setActiveOption(undefined);\n }\n // this should only be run in response to changes in the open state\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n return {\n ...optionCollection,\n ...selectionState,\n activeOption,\n appearance,\n focusVisible,\n hasFocus,\n ignoreNextBlur,\n inlinePopup,\n open,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n };\n};\n"]}
package/lib/utils/useSelection.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { useCallback } from 'react';
1
2
  import { useControllableState } from '@fluentui/react-utilities';
2
3
  export const useSelection = props => {
3
4
  const {
@@ -10,7 +11,7 @@ export const useSelection = props => {
10
11
  defaultState: defaultSelectedOptions,
11
12
  initialState: []
12
13
  });
13
- const selectOption = (event, option) => {
14
+ const selectOption = useCallback((event, option) => {
14
15
  // if the option is disabled, do nothing
15
16
  if (option.disabled) {
16
17
  return;
@@ -34,7 +35,7 @@ export const useSelection = props => {
34
35
  optionText: option.text,
35
36
  selectedOptions: newSelection
36
37
  });
37
- };
38
+ }, [onOptionSelect, multiselect, selectedOptions, setSelectedOptions]);
38
39
  const clearSelection = event => {
39
40
  setSelectedOptions([]);
40
41
  onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
package/lib/utils/useSelection.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"AAAA,SAASA,oBAAoB,QAAQ,2BAA2B;AAIhE,OAAO,MAAMC,YAAY,GAAIC,KAAqB,IAAoB;EACpE,MAAM;IAAEC,sBAAsB;IAAEC,WAAW;IAAEC;EAAc,CAAE,GAAGH,KAAK;EAErE,MAAM,CAACI,eAAe,EAAEC,kBAAkB,CAAC,GAAGP,oBAAoB,CAAC;IACjEQ,KAAK,EAAEN,KAAK,CAACI,eAAe;IAC5BG,YAAY,EAAEN,sBAAsB;IACpCO,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,YAAY,GAAG,CAACC,KAAsB,EAAEC,MAAmB,KAAI;IACnE;IACA,IAAIA,MAAM,CAACC,QAAQ,EAAE;MACnB;;IAGF;IACA,IAAIC,YAAY,GAAG,CAACF,MAAM,CAACG,KAAK,CAAC;IAEjC;IACA,IAAIZ,WAAW,EAAE;MACf,MAAMa,aAAa,GAAGX,eAAe,CAACY,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAKN,MAAM,CAACG,KAAK,CAAC;MACxE,IAAIC,aAAa,GAAG,CAAC,CAAC,EAAE;QACtB;QACAF,YAAY,GAAG,CAAC,GAAGT,eAAe,CAACc,KAAK,CAAC,CAAC,EAAEH,aAAa,CAAC,EAAE,GAAGX,eAAe,CAACc,KAAK,CAACH,aAAa,GAAG,CAAC,CAAC,CAAC;OACzG,MAAM;QACL;QACAF,YAAY,GAAG,CAAC,GAAGT,eAAe,EAAEO,MAAM,CAACG,KAAK,CAAC;;;IAIrDT,kBAAkB,CAACQ,YAAY,CAAC;IAChCV,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGO,KAAK,EAAE;MAAES,WAAW,EAAER,MAAM,CAACG,KAAK;MAAEM,UAAU,EAAET,MAAM,CAACU,IAAI;MAAEjB,eAAe,EAAES;IAAY,CAAE,CAAC;EAChH,CAAC;EAED,MAAMS,cAAc,GAAIZ,KAAsB,IAAI;IAChDL,kBAAkB,CAAC,EAAE,CAAC;IACtBF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGO,KAAK,EAAE;MAAES,WAAW,EAAEI,SAAS;MAAEH,UAAU,EAAEG,SAAS;MAAEnB,eAAe,EAAE;IAAE,CAAE,CAAC;EACjG,CAAC;EAED,OAAO;IAAEkB,cAAc;IAAEb,YAAY;IAAEL;EAAe,CAAE;AAC1D,CAAC","names":["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"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useSelection.ts"],"sourcesContent":["import { 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 = (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\n const clearSelection = (event: SelectionEvents) => {\n setSelectedOptions([]);\n onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n };\n\n return { clearSelection, selectOption, selectedOptions };\n};\n"]}
1
+ {"version":3,"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,oBAAoB,QAAQ,2BAA2B;AAIhE,OAAO,MAAMC,YAAY,GAAIC,KAAqB,IAAoB;EACpE,MAAM;IAAEC,sBAAsB;IAAEC,WAAW;IAAEC;EAAc,CAAE,GAAGH,KAAK;EAErE,MAAM,CAACI,eAAe,EAAEC,kBAAkB,CAAC,GAAGP,oBAAoB,CAAC;IACjEQ,KAAK,EAAEN,KAAK,CAACI,eAAe;IAC5BG,YAAY,EAAEN,sBAAsB;IACpCO,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,YAAY,GAAGZ,WAAW,CAC9B,CAACa,KAAsB,EAAEC,MAAmB,KAAI;IAC9C;IACA,IAAIA,MAAM,CAACC,QAAQ,EAAE;MACnB;;IAGF;IACA,IAAIC,YAAY,GAAG,CAACF,MAAM,CAACG,KAAK,CAAC;IAEjC;IACA,IAAIZ,WAAW,EAAE;MACf,MAAMa,aAAa,GAAGX,eAAe,CAACY,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAKN,MAAM,CAACG,KAAK,CAAC;MACxE,IAAIC,aAAa,GAAG,CAAC,CAAC,EAAE;QACtB;QACAF,YAAY,GAAG,CAAC,GAAGT,eAAe,CAACc,KAAK,CAAC,CAAC,EAAEH,aAAa,CAAC,EAAE,GAAGX,eAAe,CAACc,KAAK,CAACH,aAAa,GAAG,CAAC,CAAC,CAAC;OACzG,MAAM;QACL;QACAF,YAAY,GAAG,CAAC,GAAGT,eAAe,EAAEO,MAAM,CAACG,KAAK,CAAC;;;IAIrDT,kBAAkB,CAACQ,YAAY,CAAC;IAChCV,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGO,KAAK,EAAE;MAAES,WAAW,EAAER,MAAM,CAACG,KAAK;MAAEM,UAAU,EAAET,MAAM,CAACU,IAAI;MAAEjB,eAAe,EAAES;IAAY,CAAE,CAAC;EAChH,CAAC,EACD,CAACV,cAAc,EAAED,WAAW,EAAEE,eAAe,EAAEC,kBAAkB,CAAC,CACnE;EAED,MAAMiB,cAAc,GAAIZ,KAAsB,IAAI;IAChDL,kBAAkB,CAAC,EAAE,CAAC;IACtBF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGO,KAAK,EAAE;MAAES,WAAW,EAAEI,SAAS;MAAEH,UAAU,EAAEG,SAAS;MAAEnB,eAAe,EAAE;IAAE,CAAE,CAAC;EACjG,CAAC;EAED,OAAO;IAAEkB,cAAc;IAAEb,YAAY;IAAEL;EAAe,CAAE;AAC1D,CAAC","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"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/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"]}
package/lib/utils/useTriggerListboxSlots.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { mergeCallbacks, useMergedRefs } from '@fluentui/react-utilities';
2
+ import { mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
3
3
  import { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';
4
4
  /*
5
5
  * useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,
@@ -42,23 +42,26 @@ export function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSl
42
42
  // functionally both ref and triggerRef will always be the same element type
43
43
  ref: useMergedRefs(ref, triggerSlot === null || triggerSlot === void 0 ? void 0 : triggerSlot.ref, triggerRef)
44
44
  };
45
+ /*
46
+ * Handle focus when clicking the listbox popup:
47
+ * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)
48
+ * 2. Do not close the listbox on button/input blur when clicking into the listbox
49
+ */
50
+ const listboxOnClick = useEventCallback(mergeCallbacks(event => {
51
+ var _a;
52
+ (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
53
+ }, listbox === null || listbox === void 0 ? void 0 : listbox.onClick));
54
+ const listboxOnMouseOver = useEventCallback(mergeCallbacks(event => {
55
+ setFocusVisible(false);
56
+ }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseOver));
57
+ const listboxOnMouseDown = useEventCallback(mergeCallbacks(event => {
58
+ ignoreNextBlur.current = true;
59
+ }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseDown));
45
60
  // listbox is nullable, only add event handlers if it exists
46
61
  if (listbox) {
47
- /*
48
- * Handle focus when clicking the listbox popup:
49
- * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)
50
- * 2. Do not close the listbox on button/input blur when clicking into the listbox
51
- */
52
- listbox.onClick = mergeCallbacks(event => {
53
- var _a;
54
- (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
55
- }, listbox.onClick);
56
- listbox.onMouseOver = mergeCallbacks(event => {
57
- setFocusVisible(false);
58
- }, listbox.onMouseOver);
59
- listbox.onMouseDown = mergeCallbacks(event => {
60
- ignoreNextBlur.current = true;
61
- }, listbox.onMouseDown);
62
+ listbox.onClick = listboxOnClick;
63
+ listbox.onMouseOver = listboxOnMouseOver;
64
+ listbox.onMouseDown = listboxOnMouseDown;
62
65
  }
63
66
  // the trigger should open/close the popup on click or blur
64
67
  trigger.onBlur = mergeCallbacks(event => {
package/lib/utils/useTriggerListboxSlots.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["React","mergeCallbacks","useMergedRefs","getDropdownActionFromKey","getIndexFromAction","useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","useRef","listbox","tabIndex","undefined","trigger","id","role","onClick","event","current","focus","onMouseOver","onMouseDown","onBlur","onFocus","onKeyDown","action","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, 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 listbox: typeof listboxSlot = listboxSlot && {\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 // listbox is nullable, only add event handlers if it exists\n if (listbox) {\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 listbox.onClick = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n triggerRef.current?.focus();\n }, listbox.onClick);\n\n listbox.onMouseOver = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n setFocusVisible(false);\n }, listbox.onMouseOver);\n\n listbox.onMouseDown = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n ignoreNextBlur.current = true;\n }, listbox.onMouseDown);\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"]}
1
+ {"version":3,"mappings":"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","names":["React","mergeCallbacks","useEventCallback","useMergedRefs","getDropdownActionFromKey","getIndexFromAction","useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","useRef","listbox","tabIndex","undefined","trigger","id","role","listboxOnClick","event","current","focus","onClick","listboxOnMouseOver","onMouseOver","listboxOnMouseDown","onMouseDown","onBlur","onFocus","onKeyDown","action","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, 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 listbox: typeof listboxSlot = listboxSlot && {\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"]}
package/lib-commonjs/components/Combobox/useCombobox.js CHANGED
@@ -43,6 +43,7 @@ const useCombobox_unstable = (props, ref) => {
43
43
  value
44
44
  } = baseState;
45
45
  const {
46
+ disabled,
46
47
  freeform,
47
48
  multiselect
48
49
  } = props;
@@ -57,12 +58,19 @@ const useCombobox_unstable = (props, ref) => {
57
58
  const rootRef = React.useRef(null);
58
59
  const triggerRef = React.useRef(null);
59
60
  // calculate listbox width style based on trigger width
60
- const [popupWidth, setPopupWidth] = React.useState();
61
+ const [popupDimensions, setPopupDimensions] = React.useState();
61
62
  React.useEffect(() => {
62
63
  var _a;
63
- const width = open ? `${(_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth}px` : undefined;
64
- setPopupWidth(width);
65
- }, [open]);
64
+ // only recalculate width when opening
65
+ if (open) {
66
+ const width = `${(_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth}px`;
67
+ if (width !== (popupDimensions === null || popupDimensions === void 0 ? void 0 : popupDimensions.width)) {
68
+ setPopupDimensions({
69
+ width
70
+ });
71
+ }
72
+ }
73
+ }, [open, popupDimensions]);
66
74
  // set active option and selection based on typing
67
75
  const getOptionFromInput = inputValue => {
68
76
  var _a;
@@ -98,6 +106,9 @@ const useCombobox_unstable = (props, ref) => {
98
106
  }
99
107
  };
100
108
  baseState.setOpen = (ev, newState) => {
109
+ if (disabled) {
110
+ return;
111
+ }
101
112
  if (!newState && !freeform) {
102
113
  setValue(undefined);
103
114
  }
@@ -120,7 +131,7 @@ const useCombobox_unstable = (props, ref) => {
120
131
  // open Combobox when typing
121
132
  const onTriggerKeyDown = ev => {
122
133
  if (!open && dropdownKeyActions_1.getDropdownActionFromKey(ev) === 'Type') {
123
- setOpen(ev, true);
134
+ baseState.setOpen(ev, true);
124
135
  }
125
136
  };
126
137
  // resolve input and listbox slot props
@@ -143,9 +154,7 @@ const useCombobox_unstable = (props, ref) => {
143
154
  required: true,
144
155
  defaultProps: {
145
156
  children: props.children,
146
- style: {
147
- width: popupWidth
148
- }
157
+ style: popupDimensions
149
158
  }
150
159
  }) : undefined;
151
160
  [triggerSlot, listboxSlot] = useComboboxPopup_1.useComboboxPopup(props, triggerSlot, listboxSlot);
@@ -171,8 +180,7 @@ const useCombobox_unstable = (props, ref) => {
171
180
  children: React.createElement(react_icons_1.ChevronDownRegular, null)
172
181
  }
173
182
  }),
174
- ...baseState,
175
- setOpen
183
+ ...baseState
176
184
  };
177
185
  state.root.ref = react_utilities_1.useMergedRefs(state.root.ref, rootRef);
178
186
  /* handle open/close + focus change when clicking expandIcon */
@@ -191,6 +199,8 @@ const useCombobox_unstable = (props, ref) => {
191
199
  // open and set focus
192
200
  state.setOpen(event, !state.open);
193
201
  (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
202
+ // set focus visible=false, since this can only be done with the mouse/pointer
203
+ setFocusVisible(false);
194
204
  }));
195
205
  if (state.expandIcon) {
196
206
  state.expandIcon.onMouseDown = onExpandIconMouseDown;
package/lib-commonjs/components/Combobox/useCombobox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["useCombobox_unstable","props","ref","baseState","useComboboxBaseState_1","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","freeform","multiselect","primary","triggerNativeProps","root","rootNativeProps","react_utilities_1","primarySlotTagName","excludedPropNames","rootRef","React","useRef","triggerRef","popupWidth","setPopupWidth","useState","useEffect","width","current","clientWidth","undefined","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","ev","onTriggerBlur","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","dropdownKeyActions_1","triggerSlot","listboxSlot","input","required","defaultProps","type","onChange","onBlur","onKeyDown","listbox","children","style","useComboboxPopup_1","useTriggerListboxSlots_1","state","components","expandIcon","Listbox_1","react_icons_1","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n mergeCallbacks,\n useEventCallback,\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 { freeform, multiselect } = props;\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 // calculate listbox width style based on trigger width\n const [popupWidth, setPopupWidth] = React.useState<string>();\n React.useEffect(() => {\n const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n setPopupWidth(width);\n }, [open]);\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?.value.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 (!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 (\n !multiselect &&\n selectedOptions.length === 1 &&\n (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)\n ) {\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 setOpen(ev, true);\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: { width: popupWidth },\n },\n })\n : undefined;\n\n [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\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 ...rootNativeProps,\n },\n }),\n input: triggerSlot,\n listbox: listboxSlot,\n expandIcon: resolveShorthand(props.expandIcon, {\n required: true,\n defaultProps: {\n children: <ChevronDownIcon />,\n },\n }),\n ...baseState,\n setOpen,\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 );\n\n if (state.expandIcon) {\n state.expandIcon.onMouseDown = onExpandIconMouseDown;\n state.expandIcon.onClick = onExpandIconClick;\n }\n\n return state;\n};\n"]}
1
+ {"version":3,"mappings":"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","names":["useCombobox_unstable","props","ref","baseState","useComboboxBaseState_1","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","multiselect","primary","triggerNativeProps","root","rootNativeProps","react_utilities_1","primarySlotTagName","excludedPropNames","rootRef","React","useRef","triggerRef","popupDimensions","setPopupDimensions","useState","useEffect","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","dropdownKeyActions_1","triggerSlot","listboxSlot","input","required","defaultProps","type","onChange","onBlur","onKeyDown","listbox","children","style","useComboboxPopup_1","useTriggerListboxSlots_1","state","components","expandIcon","Listbox_1","react_icons_1","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n mergeCallbacks,\n useEventCallback,\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, multiselect } = props;\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 // 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?.value.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 (\n !multiselect &&\n selectedOptions.length === 1 &&\n (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)\n ) {\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\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 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 ...rootNativeProps,\n },\n }),\n input: triggerSlot,\n listbox: listboxSlot,\n expandIcon: resolveShorthand(props.expandIcon, {\n required: true,\n defaultProps: {\n children: <ChevronDownIcon />,\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\n return state;\n};\n"]}
package/lib-commonjs/components/Dropdown/useDropdownStyles.js CHANGED
@@ -198,9 +198,13 @@ const useStyles = /*#__PURE__*/react_1.__styles({
198
198
  Bn1d65q: ["f1rvyvqg", "f14g86mu"],
199
199
  Bxeuatn: "f1cwzwz",
200
200
  n51gp8: ["f14g86mu", "f1rvyvqg"]
201
+ },
202
+ disabledText: {
203
+ sj55zd: "f1s2aq7o",
204
+ Bceei9c: "fdrzuqr"
201
205
  }
202
206
  }, {
203
- d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
207
+ d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
204
208
  w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
205
209
  m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
206
210
  m: "screen and (prefers-reduced-motion: reduce)"
@@ -265,8 +269,8 @@ const useDropdownStyles_unstable = state => {
265
269
  const disabled = state.button.disabled;
266
270
  const styles = useStyles();
267
271
  const iconStyles = useIconStyles();
268
- state.root.className = react_1.mergeClasses(exports.dropdownClassNames.root, styles.root, styles[appearance], invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
269
- state.button.className = react_1.mergeClasses(exports.dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, state.button.className);
272
+ state.root.className = react_1.mergeClasses(exports.dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
273
+ state.button.className = react_1.mergeClasses(exports.dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);
270
274
  if (state.listbox) {
271
275
  state.listbox.className = react_1.mergeClasses(exports.dropdownClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
272
276
  }
package/lib-commonjs/components/Dropdown/useDropdownStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["exports","root","button","expandIcon","listbox","useStyles","react_1","useIconStyles","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","invalid","disabled","styles","iconStyles","className","invalidUnderline","placeholder","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.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 { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\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(${tokens.strokeWidthThick}, ${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\n listboxCollapsed: {\n display: 'none',\n },\n\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n\n '&:focus': {\n outlineStyle: 'none',\n },\n },\n\n placeholder: {\n color: tokens.colorNeutralForeground4,\n },\n\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding(\n '3px',\n tokens.spacingHorizontalSNudge,\n '3px',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(\n '5px',\n tokens.spacingHorizontalMNudge,\n '5px',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding(\n '7px',\n tokens.spacingHorizontalM,\n '7px',\n `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n ),\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 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', 'transparent'),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\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 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 useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\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\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n const { appearance, open, placeholderVisible, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n\n state.root.className = mergeClasses(\n dropdownClassNames.root,\n styles.root,\n styles[appearance],\n invalid && appearance !== 'underline' && styles.invalid,\n invalid && appearance === 'underline' && styles.invalidUnderline,\n disabled && styles.disabled,\n state.root.className,\n );\n\n state.button.className = mergeClasses(\n dropdownClassNames.button,\n styles.button,\n styles[size],\n placeholderVisible && styles.placeholder,\n state.button.className,\n );\n\n if (state.listbox) {\n state.listbox.className = mergeClasses(\n dropdownClassNames.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 dropdownClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"]}
1
+ {"version":3,"mappings":"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","names":["exports","root","button","expandIcon","listbox","useStyles","react_1","useIconStyles","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","invalid","disabled","styles","iconStyles","className","outlineInteractive","invalidUnderline","placeholder","disabledText","listboxCollapsed","icon"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.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 { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n root: 'fui-Dropdown',\n button: 'fui-Dropdown__button',\n expandIcon: 'fui-Dropdown__expandIcon',\n listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n display: 'inline-block',\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(${tokens.strokeWidthThick}, ${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\n listboxCollapsed: {\n display: 'none',\n },\n\n button: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('0'),\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXXS,\n cursor: 'pointer',\n display: 'grid',\n fontFamily: tokens.fontFamilyBase,\n gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n justifyContent: 'space-between',\n textAlign: 'left',\n width: '100%',\n\n '&:focus': {\n outlineStyle: 'none',\n },\n },\n\n placeholder: {\n color: tokens.colorNeutralForeground4,\n },\n\n // size variants\n small: {\n ...typographyStyles.caption1,\n ...shorthands.padding(\n '3px',\n tokens.spacingHorizontalSNudge,\n '3px',\n `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n medium: {\n ...typographyStyles.body1,\n ...shorthands.padding(\n '5px',\n tokens.spacingHorizontalMNudge,\n '5px',\n `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n ),\n },\n large: {\n columnGap: tokens.spacingHorizontalSNudge,\n ...typographyStyles.body2,\n ...shorthands.padding(\n '7px',\n tokens.spacingHorizontalM,\n '7px',\n `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n ),\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 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', 'transparent'),\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\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 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 disabledText: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n fontSize: tokens.fontSizeBase500,\n gridColumnStart: 'icon',\n gridColumnEnd: 'end',\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\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n const { appearance, open, placeholderVisible, size } = state;\n const invalid = `${state.button['aria-invalid']}` === 'true';\n const disabled = state.button.disabled;\n const styles = useStyles();\n const iconStyles = useIconStyles();\n\n state.root.className = mergeClasses(\n dropdownClassNames.root,\n styles.root,\n styles[appearance],\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.button.className = mergeClasses(\n dropdownClassNames.button,\n styles.button,\n styles[size],\n placeholderVisible && styles.placeholder,\n disabled && styles.disabledText,\n state.button.className,\n );\n\n if (state.listbox) {\n state.listbox.className = mergeClasses(\n dropdownClassNames.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 dropdownClassNames.expandIcon,\n iconStyles.icon,\n iconStyles[size],\n disabled && iconStyles.disabled,\n state.expandIcon.className,\n );\n }\n\n return state;\n};\n"]}
package/lib-commonjs/utils/useComboboxBaseState.js CHANGED
@@ -63,19 +63,19 @@ const useComboboxBaseState = props => {
63
63
  defaultState: props.defaultOpen,
64
64
  initialState: false
65
65
  });
66
- const setOpen = (event, newState) => {
66
+ const setOpen = React.useCallback((event, newState) => {
67
67
  onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
68
68
  open: newState
69
69
  });
70
70
  setOpenState(newState);
71
- };
71
+ }, [onOpenChange, setOpenState]);
72
72
  // update active option based on change in open state
73
73
  React.useEffect(() => {
74
74
  if (open && !activeOption) {
75
- // if there is a selection, start at the most recently selected item
76
- if (selectedOptions.length > 0) {
77
- const lastSelectedOption = getOptionsMatchingText(v => v === selectedOptions[selectedOptions.length - 1]).pop();
78
- lastSelectedOption && setActiveOption(lastSelectedOption);
75
+ // if it is single-select and there is a selected option, start at the selected option
76
+ if (!multiselect && selectedOptions.length > 0) {
77
+ const selectedOption = getOptionsMatchingText(v => v === selectedOptions[0]).pop();
78
+ selectedOption && setActiveOption(selectedOption);
79
79
  }
80
80
  // default to starting at the first option
81
81
  else {
package/lib-commonjs/utils/useComboboxBaseState.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["useComboboxBaseState","props","appearance","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","useOptionCollection_1","getOptionAtIndex","getOptionsMatchingText","activeOption","setActiveOption","React","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","useSelection_1","selectedOptions","isFirstMount","react_utilities_1","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","lastSelectedOption","v","pop","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (props: ComboboxBaseProps & { editable?: boolean }): ComboboxBaseState => {\n const {\n appearance = 'outline',\n editable = false,\n inlinePopup = false,\n multiselect,\n onOpenChange,\n size = 'medium',\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionAtIndex, getOptionsMatchingText } = optionCollection;\n\n const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n const selectionState = useSelection(props);\n const { selectedOptions } = selectionState;\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptions.join(', ');\n }\n\n return selectedOptions[0];\n }, [controllableValue, editable, isFirstMount, multiselect, props.defaultValue, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = (event: ComboboxBaseOpenEvents, newState: boolean) => {\n onOpenChange?.(event, { open: newState });\n setOpenState(newState);\n };\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open && !activeOption) {\n // if there is a selection, start at the most recently selected item\n if (selectedOptions.length > 0) {\n const lastSelectedOption = getOptionsMatchingText(v => v === selectedOptions[selectedOptions.length - 1]).pop();\n lastSelectedOption && setActiveOption(lastSelectedOption);\n }\n // default to starting at the first option\n else {\n setActiveOption(getOptionAtIndex(0));\n }\n } else if (!open) {\n // reset the active option when closing\n setActiveOption(undefined);\n }\n // this should only be run in response to changes in the open state\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n return {\n ...optionCollection,\n ...selectionState,\n activeOption,\n appearance,\n focusVisible,\n hasFocus,\n ignoreNextBlur,\n inlinePopup,\n open,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n };\n};\n"]}
1
+ {"version":3,"mappings":"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","names":["useComboboxBaseState","props","appearance","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","useOptionCollection_1","getOptionAtIndex","getOptionsMatchingText","activeOption","setActiveOption","React","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","useSelection_1","selectedOptions","isFirstMount","react_utilities_1","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (props: ComboboxBaseProps & { editable?: boolean }): ComboboxBaseState => {\n const {\n appearance = 'outline',\n editable = false,\n inlinePopup = false,\n multiselect,\n onOpenChange,\n size = 'medium',\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionAtIndex, getOptionsMatchingText } = optionCollection;\n\n const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n const selectionState = useSelection(props);\n const { selectedOptions } = selectionState;\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptions.join(', ');\n }\n\n return selectedOptions[0];\n }, [controllableValue, editable, isFirstMount, multiselect, props.defaultValue, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n onOpenChange?.(event, { open: newState });\n setOpenState(newState);\n },\n [onOpenChange, setOpenState],\n );\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open && !activeOption) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingText(v => v === selectedOptions[0]).pop();\n selectedOption && setActiveOption(selectedOption);\n }\n // default to starting at the first option\n else {\n setActiveOption(getOptionAtIndex(0));\n }\n } else if (!open) {\n // reset the active option when closing\n setActiveOption(undefined);\n }\n // this should only be run in response to changes in the open state\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n return {\n ...optionCollection,\n ...selectionState,\n activeOption,\n appearance,\n focusVisible,\n hasFocus,\n ignoreNextBlur,\n inlinePopup,\n open,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n };\n};\n"]}
package/lib-commonjs/utils/useSelection.js CHANGED
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useSelection = void 0;
7
+ const react_1 = /*#__PURE__*/require("react");
7
8
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
8
9
  const useSelection = props => {
9
10
  const {
@@ -16,7 +17,7 @@ const useSelection = props => {
16
17
  defaultState: defaultSelectedOptions,
17
18
  initialState: []
18
19
  });
19
- const selectOption = (event, option) => {
20
+ const selectOption = react_1.useCallback((event, option) => {
20
21
  // if the option is disabled, do nothing
21
22
  if (option.disabled) {
22
23
  return;
@@ -40,7 +41,7 @@ const useSelection = props => {
40
41
  optionText: option.text,
41
42
  selectedOptions: newSelection
42
43
  });
43
- };
44
+ }, [onOptionSelect, multiselect, selectedOptions, setSelectedOptions]);
44
45
  const clearSelection = event => {
45
46
  setSelectedOptions([]);
46
47
  onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
package/lib-commonjs/utils/useSelection.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAA;AAIO,MAAMA,YAAY,GAAIC,KAAqB,IAAoB;EACpE,MAAM;IAAEC,sBAAsB;IAAEC,WAAW;IAAEC;EAAc,CAAE,GAAGH,KAAK;EAErE,MAAM,CAACI,eAAe,EAAEC,kBAAkB,CAAC,GAAGC,sCAAoB,CAAC;IACjEC,KAAK,EAAEP,KAAK,CAACI,eAAe;IAC5BI,YAAY,EAAEP,sBAAsB;IACpCQ,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,YAAY,GAAG,CAACC,KAAsB,EAAEC,MAAmB,KAAI;IACnE;IACA,IAAIA,MAAM,CAACC,QAAQ,EAAE;MACnB;;IAGF;IACA,IAAIC,YAAY,GAAG,CAACF,MAAM,CAACG,KAAK,CAAC;IAEjC;IACA,IAAIb,WAAW,EAAE;MACf,MAAMc,aAAa,GAAGZ,eAAe,CAACa,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAKN,MAAM,CAACG,KAAK,CAAC;MACxE,IAAIC,aAAa,GAAG,CAAC,CAAC,EAAE;QACtB;QACAF,YAAY,GAAG,CAAC,GAAGV,eAAe,CAACe,KAAK,CAAC,CAAC,EAAEH,aAAa,CAAC,EAAE,GAAGZ,eAAe,CAACe,KAAK,CAACH,aAAa,GAAG,CAAC,CAAC,CAAC;OACzG,MAAM;QACL;QACAF,YAAY,GAAG,CAAC,GAAGV,eAAe,EAAEQ,MAAM,CAACG,KAAK,CAAC;;;IAIrDV,kBAAkB,CAACS,YAAY,CAAC;IAChCX,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGQ,KAAK,EAAE;MAAES,WAAW,EAAER,MAAM,CAACG,KAAK;MAAEM,UAAU,EAAET,MAAM,CAACU,IAAI;MAAElB,eAAe,EAAEU;IAAY,CAAE,CAAC;EAChH,CAAC;EAED,MAAMS,cAAc,GAAIZ,KAAsB,IAAI;IAChDN,kBAAkB,CAAC,EAAE,CAAC;IACtBF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGQ,KAAK,EAAE;MAAES,WAAW,EAAEI,SAAS;MAAEH,UAAU,EAAEG,SAAS;MAAEpB,eAAe,EAAE;IAAE,CAAE,CAAC;EACjG,CAAC;EAED,OAAO;IAAEmB,cAAc;IAAEb,YAAY;IAAEN;EAAe,CAAE;AAC1D,CAAC;AAxCYqB,oBAAY","names":["useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","react_utilities_1","state","defaultState","initialState","selectOption","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useSelection.ts"],"sourcesContent":["import { 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 = (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\n const clearSelection = (event: SelectionEvents) => {\n setSelectedOptions([]);\n onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n };\n\n return { clearSelection, selectOption, selectedOptions };\n};\n"]}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACA;AAIO,MAAMA,YAAY,GAAIC,KAAqB,IAAoB;EACpE,MAAM;IAAEC,sBAAsB;IAAEC,WAAW;IAAEC;EAAc,CAAE,GAAGH,KAAK;EAErE,MAAM,CAACI,eAAe,EAAEC,kBAAkB,CAAC,GAAGC,sCAAoB,CAAC;IACjEC,KAAK,EAAEP,KAAK,CAACI,eAAe;IAC5BI,YAAY,EAAEP,sBAAsB;IACpCQ,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,YAAY,GAAGC,mBAAW,CAC9B,CAACC,KAAsB,EAAEC,MAAmB,KAAI;IAC9C;IACA,IAAIA,MAAM,CAACC,QAAQ,EAAE;MACnB;;IAGF;IACA,IAAIC,YAAY,GAAG,CAACF,MAAM,CAACG,KAAK,CAAC;IAEjC;IACA,IAAId,WAAW,EAAE;MACf,MAAMe,aAAa,GAAGb,eAAe,CAACc,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAKN,MAAM,CAACG,KAAK,CAAC;MACxE,IAAIC,aAAa,GAAG,CAAC,CAAC,EAAE;QACtB;QACAF,YAAY,GAAG,CAAC,GAAGX,eAAe,CAACgB,KAAK,CAAC,CAAC,EAAEH,aAAa,CAAC,EAAE,GAAGb,eAAe,CAACgB,KAAK,CAACH,aAAa,GAAG,CAAC,CAAC,CAAC;OACzG,MAAM;QACL;QACAF,YAAY,GAAG,CAAC,GAAGX,eAAe,EAAES,MAAM,CAACG,KAAK,CAAC;;;IAIrDX,kBAAkB,CAACU,YAAY,CAAC;IAChCZ,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGS,KAAK,EAAE;MAAES,WAAW,EAAER,MAAM,CAACG,KAAK;MAAEM,UAAU,EAAET,MAAM,CAACU,IAAI;MAAEnB,eAAe,EAAEW;IAAY,CAAE,CAAC;EAChH,CAAC,EACD,CAACZ,cAAc,EAAED,WAAW,EAAEE,eAAe,EAAEC,kBAAkB,CAAC,CACnE;EAED,MAAMmB,cAAc,GAAIZ,KAAsB,IAAI;IAChDP,kBAAkB,CAAC,EAAE,CAAC;IACtBF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGS,KAAK,EAAE;MAAES,WAAW,EAAEI,SAAS;MAAEH,UAAU,EAAEG,SAAS;MAAErB,eAAe,EAAE;IAAE,CAAE,CAAC;EACjG,CAAC;EAED,OAAO;IAAEoB,cAAc;IAAEd,YAAY;IAAEN;EAAe,CAAE;AAC1D,CAAC;AA3CYsB,oBAAY","names":["useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","react_utilities_1","state","defaultState","initialState","selectOption","react_1","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/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"]}
package/lib-commonjs/utils/useTriggerListboxSlots.js CHANGED
@@ -48,23 +48,26 @@ function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
48
48
  // functionally both ref and triggerRef will always be the same element type
49
49
  ref: react_utilities_1.useMergedRefs(ref, triggerSlot === null || triggerSlot === void 0 ? void 0 : triggerSlot.ref, triggerRef)
50
50
  };
51
+ /*
52
+ * Handle focus when clicking the listbox popup:
53
+ * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)
54
+ * 2. Do not close the listbox on button/input blur when clicking into the listbox
55
+ */
56
+ const listboxOnClick = react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(event => {
57
+ var _a;
58
+ (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
59
+ }, listbox === null || listbox === void 0 ? void 0 : listbox.onClick));
60
+ const listboxOnMouseOver = react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(event => {
61
+ setFocusVisible(false);
62
+ }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseOver));
63
+ const listboxOnMouseDown = react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(event => {
64
+ ignoreNextBlur.current = true;
65
+ }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseDown));
51
66
  // listbox is nullable, only add event handlers if it exists
52
67
  if (listbox) {
53
- /*
54
- * Handle focus when clicking the listbox popup:
55
- * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)
56
- * 2. Do not close the listbox on button/input blur when clicking into the listbox
57
- */
58
- listbox.onClick = react_utilities_1.mergeCallbacks(event => {
59
- var _a;
60
- (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
61
- }, listbox.onClick);
62
- listbox.onMouseOver = react_utilities_1.mergeCallbacks(event => {
63
- setFocusVisible(false);
64
- }, listbox.onMouseOver);
65
- listbox.onMouseDown = react_utilities_1.mergeCallbacks(event => {
66
- ignoreNextBlur.current = true;
67
- }, listbox.onMouseDown);
68
+ listbox.onClick = listboxOnClick;
69
+ listbox.onMouseOver = listboxOnMouseOver;
70
+ listbox.onMouseDown = listboxOnMouseDown;
68
71
  }
69
72
  // the trigger should open/close the popup on click or blur
70
73
  trigger.onBlur = react_utilities_1.mergeCallbacks(event => {
package/lib-commonjs/utils/useTriggerListboxSlots.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","React","useRef","listbox","tabIndex","undefined","trigger","id","role","react_utilities_1","onClick","event","current","focus","onMouseOver","onMouseDown","onBlur","onFocus","onKeyDown","action","dropdownKeyActions_1","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, 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 listbox: typeof listboxSlot = listboxSlot && {\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 // listbox is nullable, only add event handlers if it exists\n if (listbox) {\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 listbox.onClick = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n triggerRef.current?.focus();\n }, listbox.onClick);\n\n listbox.onMouseOver = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n setFocusVisible(false);\n }, listbox.onMouseOver);\n\n listbox.onMouseDown = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n ignoreNextBlur.current = true;\n }, listbox.onMouseDown);\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"]}
1
+ {"version":3,"mappings":"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","names":["useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","React","useRef","listbox","tabIndex","undefined","trigger","id","role","react_utilities_1","listboxOnClick","event","current","focus","onClick","listboxOnMouseOver","onMouseOver","listboxOnMouseDown","onMouseDown","onBlur","onFocus","onKeyDown","action","dropdownKeyActions_1","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, 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 listbox: typeof listboxSlot = listboxSlot && {\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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-combobox",
3
- "version": "9.0.0-beta.20",
3
+ "version": "9.0.0-beta.22",
4
4
  "description": "Fluent UI React Combobox component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -32,13 +32,13 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@fluentui/keyboard-keys": "^9.0.1",
35
- "@fluentui/react-context-selector": "^9.1.4",
36
- "@fluentui/react-field": "9.0.0-alpha.13",
35
+ "@fluentui/react-context-selector": "^9.1.5",
36
+ "@fluentui/react-field": "9.0.0-alpha.14",
37
37
  "@fluentui/react-icons": "^2.0.175",
38
- "@fluentui/react-portal": "^9.0.15",
39
- "@fluentui/react-positioning": "^9.3.6",
38
+ "@fluentui/react-portal": "^9.1.0",
39
+ "@fluentui/react-positioning": "^9.3.7",
40
40
  "@fluentui/react-theme": "^9.1.5",
41
- "@fluentui/react-utilities": "^9.3.1",
41
+ "@fluentui/react-utilities": "^9.4.0",
42
42
  "@griffel/react": "^1.5.2",
43
43
  "tslib": "^2.1.0"
44
44
  },