@fluentui/react-combobox 9.7.0 → 9.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -2
- package/lib/components/Dropdown/useDropdown.js +2 -1
- package/lib/components/Dropdown/useDropdown.js.map +1 -1
- package/lib/components/Listbox/useListbox.js +0 -1
- package/lib/components/Listbox/useListbox.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdown.js +2 -1
- package/lib-commonjs/components/Dropdown/useDropdown.js.map +1 -1
- package/lib-commonjs/components/Listbox/useListbox.js +0 -1
- package/lib-commonjs/components/Listbox/useListbox.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,38 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-combobox
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 26 Jan 2024 10:38:59 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.7.2)
|
|
8
|
+
|
|
9
|
+
Fri, 26 Jan 2024 10:38:59 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.7.1..@fluentui/react-combobox_v9.7.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-positioning to v9.13.0 ([PR #30391](https://github.com/microsoft/fluentui/pull/30391) by beachball)
|
|
15
|
+
|
|
16
|
+
## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.7.1)
|
|
17
|
+
|
|
18
|
+
Tue, 23 Jan 2024 15:10:58 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.7.0..@fluentui/react-combobox_v9.7.1)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- fix: aria-multiselectable is unnecessary with menu roles ([PR #30225](https://github.com/microsoft/fluentui/pull/30225) by sarah.higley@microsoft.com)
|
|
24
|
+
- fix(Dropdown): add `type=button` to `clearButton` ([PR #30362](https://github.com/microsoft/fluentui/pull/30362) by olfedias@microsoft.com)
|
|
25
|
+
- Bump @fluentui/react-context-selector to v9.1.50 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
|
|
26
|
+
- Bump @fluentui/react-field to v9.1.51 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
|
|
27
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.28 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
|
|
28
|
+
- Bump @fluentui/react-portal to v9.4.11 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
|
|
29
|
+
- Bump @fluentui/react-positioning to v9.12.5 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
|
|
30
|
+
- Bump @fluentui/react-tabster to v9.17.4 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
|
|
31
|
+
- Bump @fluentui/react-utilities to v9.17.0 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)
|
|
32
|
+
|
|
7
33
|
## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.7.0)
|
|
8
34
|
|
|
9
|
-
Thu, 18 Jan 2024 14:
|
|
35
|
+
Thu, 18 Jan 2024 14:25:01 GMT
|
|
10
36
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.6.1..@fluentui/react-combobox_v9.7.0)
|
|
11
37
|
|
|
12
38
|
### Minor changes
|
|
@@ -76,7 +76,8 @@ import { useButtonTriggerSlot } from './useButtonTriggerSlot';
|
|
|
76
76
|
'aria-label': 'Clear selection',
|
|
77
77
|
children: /*#__PURE__*/ React.createElement(DismissIcon, null),
|
|
78
78
|
// Safari doesn't allow to focus an element with this
|
|
79
|
-
tabIndex: 0
|
|
79
|
+
tabIndex: 0,
|
|
80
|
+
type: 'button'
|
|
80
81
|
},
|
|
81
82
|
elementType: 'button',
|
|
82
83
|
renderByDefault: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n mergeCallbacks,\n useMergedRefs,\n slot,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n\n const baseState = useComboboxBaseState(props);\n const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'button',\n excludedPropNames: ['children'],\n });\n\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n state: baseState,\n triggerRef,\n defaultProps: {\n children: props.children,\n },\n });\n\n const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, ref), {\n state: baseState,\n defaultProps: {\n type: 'button',\n tabIndex: 0,\n children: baseState.value || props.placeholder,\n ...triggerNativeProps,\n },\n });\n\n const rootSlot = slot.always(props.root, {\n defaultProps: {\n 'aria-owns': !props.inlinePopup && open ? listbox?.id : undefined,\n children: props.children,\n ...rootNativeProps,\n },\n elementType: 'div',\n });\n rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n const state: DropdownState = {\n components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n root: rootSlot,\n button: trigger,\n listbox: open || hasFocus ? listbox : undefined,\n clearButton: slot.optional(props.clearButton, {\n defaultProps: {\n 'aria-label': 'Clear selection',\n children: <DismissIcon />,\n // Safari doesn't allow to focus an element with this\n tabIndex: 0,\n },\n elementType: 'button',\n renderByDefault: true,\n }),\n expandIcon: slot.optional(props.expandIcon, {\n renderByDefault: true,\n defaultProps: {\n children: <ChevronDownIcon />,\n },\n elementType: 'span',\n }),\n placeholderVisible: !baseState.value && !!props.placeholder,\n showClearButton,\n ...baseState,\n };\n\n const onClearButtonClick = useEventCallback(\n mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n clearSelection(ev);\n triggerRef.current?.focus();\n }),\n );\n\n if (state.clearButton) {\n state.clearButton.onClick = onClearButtonClick;\n }\n\n // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n if (multiselect) {\n state.clearButton = undefined;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n React.useEffect(() => {\n if (clearable && multiselect) {\n // eslint-disable-next-line no-console\n console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n }\n }, [clearable, multiselect]);\n }\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","useDropdown_unstable","props","ref","state","supportsLabelFor","supportsSize","baseState","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","trigger","button","type","tabIndex","value","placeholder","rootSlot","always","inlinePopup","id","undefined","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,sBAAsBC,eAAe,EAAEC,kBAAkBC,WAAW,QAAQ,wBAAwB;AAC7G,SACEC,yBAAyB,EACzBC,cAAc,EACdC,aAAa,EACbC,IAAI,EACJC,gBAAgB,QACX,4BAA4B;AACnC,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,OAAO,QAAQ,qBAAqB;AAE7C,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;
|
|
1
|
+
{"version":3,"sources":["useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n mergeCallbacks,\n useMergedRefs,\n slot,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n\n const baseState = useComboboxBaseState(props);\n const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'button',\n excludedPropNames: ['children'],\n });\n\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n state: baseState,\n triggerRef,\n defaultProps: {\n children: props.children,\n },\n });\n\n const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, ref), {\n state: baseState,\n defaultProps: {\n type: 'button',\n tabIndex: 0,\n children: baseState.value || props.placeholder,\n ...triggerNativeProps,\n },\n });\n\n const rootSlot = slot.always(props.root, {\n defaultProps: {\n 'aria-owns': !props.inlinePopup && open ? listbox?.id : undefined,\n children: props.children,\n ...rootNativeProps,\n },\n elementType: 'div',\n });\n rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n const state: DropdownState = {\n components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n root: rootSlot,\n button: trigger,\n listbox: open || hasFocus ? listbox : undefined,\n clearButton: slot.optional(props.clearButton, {\n defaultProps: {\n 'aria-label': 'Clear selection',\n children: <DismissIcon />,\n // Safari doesn't allow to focus an element with this\n tabIndex: 0,\n type: 'button',\n },\n elementType: 'button',\n renderByDefault: true,\n }),\n expandIcon: slot.optional(props.expandIcon, {\n renderByDefault: true,\n defaultProps: {\n children: <ChevronDownIcon />,\n },\n elementType: 'span',\n }),\n placeholderVisible: !baseState.value && !!props.placeholder,\n showClearButton,\n ...baseState,\n };\n\n const onClearButtonClick = useEventCallback(\n mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n clearSelection(ev);\n triggerRef.current?.focus();\n }),\n );\n\n if (state.clearButton) {\n state.clearButton.onClick = onClearButtonClick;\n }\n\n // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n if (multiselect) {\n state.clearButton = undefined;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n React.useEffect(() => {\n if (clearable && multiselect) {\n // eslint-disable-next-line no-console\n console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n }\n }, [clearable, multiselect]);\n }\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","useDropdown_unstable","props","ref","state","supportsLabelFor","supportsSize","baseState","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","trigger","button","type","tabIndex","value","placeholder","rootSlot","always","inlinePopup","id","undefined","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
|
|
@@ -80,7 +80,6 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
|
|
|
80
80
|
ref: ref,
|
|
81
81
|
role: multiselect ? 'menu' : 'listbox',
|
|
82
82
|
'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,
|
|
83
|
-
'aria-multiselectable': multiselect,
|
|
84
83
|
tabIndex: 0,
|
|
85
84
|
...props
|
|
86
85
|
}), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\n\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n const { multiselect } = props;\n const optionCollection = useOptionCollection();\n const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\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 const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\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\n const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n setFocusVisible(false);\n };\n\n // get state from parent combobox, if it exists\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasComboboxContext\n ? {\n activeOption: comboboxActiveOption,\n focusVisible: comboboxFocusVisible,\n selectedOptions: comboboxSelectedOptions,\n selectOption: comboboxSelectOption,\n setActiveOption: comboboxSetActiveOption,\n }\n : {\n activeOption,\n focusVisible,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n const state: ListboxState = {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n role: multiselect ? 'menu' : 'listbox',\n 'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n
|
|
1
|
+
{"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\n\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n const { multiselect } = props;\n const optionCollection = useOptionCollection();\n const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\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 const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\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\n const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n setFocusVisible(false);\n };\n\n // get state from parent combobox, if it exists\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasComboboxContext\n ? {\n activeOption: comboboxActiveOption,\n focusVisible: comboboxFocusVisible,\n selectedOptions: comboboxSelectedOptions,\n selectOption: comboboxSelectOption,\n setActiveOption: comboboxSetActiveOption,\n }\n : {\n activeOption,\n focusVisible,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n const state: ListboxState = {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n role: multiselect ? 'menu' : 'listbox',\n 'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n tabIndex: 0,\n ...props,\n }),\n { elementType: 'div' },\n ),\n multiselect,\n clearSelection,\n ...optionCollection,\n ...optionContextValues,\n };\n\n const scrollContainerRef = useScrollOptionsIntoView(state);\n state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","useContextSelector","useHasParentContext","getDropdownActionFromKey","getIndexFromAction","useOptionCollection","useScrollOptionsIntoView","useSelection","ComboboxContext","useListbox_unstable","props","ref","multiselect","optionCollection","getCount","getOptionAtIndex","getIndexOfId","clearSelection","selectedOptions","selectOption","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","onKeyDown","event","action","open","maxIndex","activeIndex","id","newIndex","preventDefault","onMouseOver","hasComboboxContext","comboboxActiveOption","ctx","comboboxFocusVisible","comboboxSelectedOptions","comboboxSelectOption","comboboxSetActiveOption","optionContextValues","state","components","root","always","role","undefined","tabIndex","elementType","scrollContainerRef"],"mappings":"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"}
|
|
@@ -79,7 +79,8 @@ const useDropdown_unstable = (props, ref)=>{
|
|
|
79
79
|
'aria-label': 'Clear selection',
|
|
80
80
|
children: /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null),
|
|
81
81
|
// Safari doesn't allow to focus an element with this
|
|
82
|
-
tabIndex: 0
|
|
82
|
+
tabIndex: 0,
|
|
83
|
+
type: 'button'
|
|
83
84
|
},
|
|
84
85
|
elementType: 'button',
|
|
85
86
|
renderByDefault: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDropdown.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */ export const useDropdown_unstable = (props, ref)=>{\n var _state_clearButton;\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsSize: true\n });\n const baseState = useComboboxBaseState(props);\n const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'button',\n excludedPropNames: [\n 'children'\n ]\n });\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n const triggerRef = React.useRef(null);\n const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n state: baseState,\n triggerRef,\n defaultProps: {\n children: props.children\n }\n });\n var _props_button;\n const trigger = useButtonTriggerSlot((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, useMergedRefs(triggerRef, ref), {\n state: baseState,\n defaultProps: {\n type: 'button',\n tabIndex: 0,\n children: baseState.value || props.placeholder,\n ...triggerNativeProps\n }\n });\n const rootSlot = slot.always(props.root, {\n defaultProps: {\n 'aria-owns': !props.inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n children: props.children,\n ...rootNativeProps\n },\n elementType: 'div'\n });\n rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n const state = {\n components: {\n root: 'div',\n button: 'button',\n clearButton: 'button',\n expandIcon: 'span',\n listbox: Listbox\n },\n root: rootSlot,\n button: trigger,\n listbox: open || hasFocus ? listbox : undefined,\n clearButton: slot.optional(props.clearButton, {\n defaultProps: {\n 'aria-label': 'Clear selection',\n children: /*#__PURE__*/ React.createElement(DismissIcon, null),\n // Safari doesn't allow to focus an element with this\n tabIndex: 0\n },\n elementType: 'button',\n renderByDefault: true\n }),\n expandIcon: slot.optional(props.expandIcon, {\n renderByDefault: true,\n defaultProps: {\n children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null)\n },\n elementType: 'span'\n }),\n placeholderVisible: !baseState.value && !!props.placeholder,\n showClearButton,\n ...baseState\n };\n const onClearButtonClick = useEventCallback(mergeCallbacks((_state_clearButton = state.clearButton) === null || _state_clearButton === void 0 ? void 0 : _state_clearButton.onClick, (ev)=>{\n var _triggerRef_current;\n clearSelection(ev);\n (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n }));\n if (state.clearButton) {\n state.clearButton.onClick = onClearButtonClick;\n }\n // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n if (multiselect) {\n state.clearButton = undefined;\n }\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n React.useEffect(()=>{\n if (clearable && multiselect) {\n // eslint-disable-next-line no-console\n console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n }\n }, [\n clearable,\n multiselect\n ]);\n }\n return state;\n};\n"],"names":["useDropdown_unstable","props","ref","_state_clearButton","useFieldControlProps_unstable","supportsLabelFor","supportsSize","baseState","useComboboxBaseState","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","triggerRef","React","useRef","listbox","useListboxSlot","state","defaultProps","children","_props_button","trigger","useButtonTriggerSlot","button","useMergedRefs","type","tabIndex","value","placeholder","rootSlot","slot","always","inlinePopup","id","undefined","elementType","showClearButton","length","components","clearButton","expandIcon","Listbox","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","placeholderVisible","onClearButtonClick","useEventCallback","mergeCallbacks","onClick","ev","_triggerRef_current","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":";;;;+BAiBiBA;;;eAAAA;;;;iEAjBM;4BACuB;4BACuC;gCACY;sCAC5D;wCACE;yBACf;gCACO;sCACM;AAS1B,MAAMA,uBAAuB,CAACC,OAAOC;IAC5C,IAAIC;IACJ,+CAA+C;IAC/CF,QAAQG,IAAAA,yCAA6B,EAACH,OAAO;QACzCI,kBAAkB;QAClBC,cAAc;IAClB;IACA,MAAMC,YAAYC,IAAAA,0CAAoB,EAACP;IACvC,MAAM,EAAEQ,SAAS,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,IAAI,EAAEC,eAAe,EAAE,GAAGP;IACpF,MAAM,EAAEQ,SAASC,kBAAkB,EAAEC,MAAMC,eAAe,EAAE,GAAGC,IAAAA,yCAAyB,EAAC;QACrFlB;QACAmB,oBAAoB;QACpBC,mBAAmB;YACf;SACH;IACL;IACA,MAAM,CAACC,kBAAkBC,kBAAkB,GAAGC,IAAAA,8CAAsB,EAACvB;IACrE,MAAMwB,aAAaC,OAAMC,MAAM,CAAC;IAChC,MAAMC,UAAUC,IAAAA,8BAAc,EAAC5B,MAAM2B,OAAO,EAAEN,kBAAkB;QAC5DQ,OAAOvB;QACPkB;QACAM,cAAc;YACVC,UAAU/B,MAAM+B,QAAQ;QAC5B;IACJ;IACA,IAAIC;IACJ,MAAMC,UAAUC,IAAAA,0CAAoB,EAAC,AAACF,CAAAA,gBAAgBhC,MAAMmC,MAAM,AAAD,MAAO,QAAQH,kBAAkB,KAAK,IAAIA,gBAAgB,CAAC,GAAGI,IAAAA,6BAAa,EAACZ,YAAYvB,MAAM;QAC3J4B,OAAOvB;QACPwB,cAAc;YACVO,MAAM;YACNC,UAAU;YACVP,UAAUzB,UAAUiC,KAAK,IAAIvC,MAAMwC,WAAW;YAC9C,GAAGzB,kBAAkB;QACzB;IACJ;IACA,MAAM0B,WAAWC,oBAAI,CAACC,MAAM,CAAC3C,MAAMgB,IAAI,EAAE;QACrCc,cAAc;YACV,aAAa,CAAC9B,MAAM4C,WAAW,IAAIhC,OAAOe,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQkB,EAAE,GAAGC;YACzGf,UAAU/B,MAAM+B,QAAQ;YACxB,GAAGd,eAAe;QACtB;QACA8B,aAAa;IACjB;IACAN,SAASxC,GAAG,GAAGmC,IAAAA,6BAAa,EAACK,SAASxC,GAAG,EAAEqB;IAC3C,MAAM0B,kBAAkBnC,gBAAgBoC,MAAM,GAAG,KAAKzC,aAAa,CAACG;IACpE,MAAMkB,QAAQ;QACVqB,YAAY;YACRlC,MAAM;YACNmB,QAAQ;YACRgB,aAAa;YACbC,YAAY;YACZzB,SAAS0B,gBAAO;QACpB;QACArC,MAAMyB;QACNN,QAAQF;QACRN,SAASf,QAAQF,WAAWiB,UAAUmB;QACtCK,aAAaT,oBAAI,CAACY,QAAQ,CAACtD,MAAMmD,WAAW,EAAE;YAC1CrB,cAAc;gBACV,cAAc;gBACdC,UAAU,WAAW,GAAGN,OAAM8B,aAAa,CAACC,0BAAW,EAAE;gBACzD,qDAAqD;gBACrDlB,UAAU;
|
|
1
|
+
{"version":3,"sources":["useDropdown.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, slot, useEventCallback } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */ export const useDropdown_unstable = (props, ref)=>{\n var _state_clearButton;\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsSize: true\n });\n const baseState = useComboboxBaseState(props);\n const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'button',\n excludedPropNames: [\n 'children'\n ]\n });\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n const triggerRef = React.useRef(null);\n const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n state: baseState,\n triggerRef,\n defaultProps: {\n children: props.children\n }\n });\n var _props_button;\n const trigger = useButtonTriggerSlot((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, useMergedRefs(triggerRef, ref), {\n state: baseState,\n defaultProps: {\n type: 'button',\n tabIndex: 0,\n children: baseState.value || props.placeholder,\n ...triggerNativeProps\n }\n });\n const rootSlot = slot.always(props.root, {\n defaultProps: {\n 'aria-owns': !props.inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n children: props.children,\n ...rootNativeProps\n },\n elementType: 'div'\n });\n rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n const state = {\n components: {\n root: 'div',\n button: 'button',\n clearButton: 'button',\n expandIcon: 'span',\n listbox: Listbox\n },\n root: rootSlot,\n button: trigger,\n listbox: open || hasFocus ? listbox : undefined,\n clearButton: slot.optional(props.clearButton, {\n defaultProps: {\n 'aria-label': 'Clear selection',\n children: /*#__PURE__*/ React.createElement(DismissIcon, null),\n // Safari doesn't allow to focus an element with this\n tabIndex: 0,\n type: 'button'\n },\n elementType: 'button',\n renderByDefault: true\n }),\n expandIcon: slot.optional(props.expandIcon, {\n renderByDefault: true,\n defaultProps: {\n children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null)\n },\n elementType: 'span'\n }),\n placeholderVisible: !baseState.value && !!props.placeholder,\n showClearButton,\n ...baseState\n };\n const onClearButtonClick = useEventCallback(mergeCallbacks((_state_clearButton = state.clearButton) === null || _state_clearButton === void 0 ? void 0 : _state_clearButton.onClick, (ev)=>{\n var _triggerRef_current;\n clearSelection(ev);\n (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n }));\n if (state.clearButton) {\n state.clearButton.onClick = onClearButtonClick;\n }\n // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n if (multiselect) {\n state.clearButton = undefined;\n }\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n React.useEffect(()=>{\n if (clearable && multiselect) {\n // eslint-disable-next-line no-console\n console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n }\n }, [\n clearable,\n multiselect\n ]);\n }\n return state;\n};\n"],"names":["useDropdown_unstable","props","ref","_state_clearButton","useFieldControlProps_unstable","supportsLabelFor","supportsSize","baseState","useComboboxBaseState","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","triggerRef","React","useRef","listbox","useListboxSlot","state","defaultProps","children","_props_button","trigger","useButtonTriggerSlot","button","useMergedRefs","type","tabIndex","value","placeholder","rootSlot","slot","always","inlinePopup","id","undefined","elementType","showClearButton","length","components","clearButton","expandIcon","Listbox","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","placeholderVisible","onClearButtonClick","useEventCallback","mergeCallbacks","onClick","ev","_triggerRef_current","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
|
|
@@ -83,7 +83,6 @@ const useListbox_unstable = (props, ref)=>{
|
|
|
83
83
|
ref: ref,
|
|
84
84
|
role: multiselect ? 'menu' : 'listbox',
|
|
85
85
|
'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,
|
|
86
|
-
'aria-multiselectable': multiselect,
|
|
87
86
|
tabIndex: 0,
|
|
88
87
|
...props
|
|
89
88
|
}), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useListbox.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */ export const useListbox_unstable = (props, ref)=>{\n const { multiselect } = props;\n const optionCollection = useOptionCollection();\n const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n const [activeOption, setActiveOption] = React.useState();\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 const onKeyDown = (event)=>{\n const action = getDropdownActionFromKey(event, {\n open: true\n });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n switch(action){\n case 'Select':\n case 'CloseSelect':\n 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 const onMouseOver = (event)=>{\n setFocusVisible(false);\n };\n // get state from parent combobox, if it exists\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const comboboxActiveOption = useContextSelector(ComboboxContext, (ctx)=>ctx.activeOption);\n const comboboxFocusVisible = useContextSelector(ComboboxContext, (ctx)=>ctx.focusVisible);\n const comboboxSelectedOptions = useContextSelector(ComboboxContext, (ctx)=>ctx.selectedOptions);\n const comboboxSelectOption = useContextSelector(ComboboxContext, (ctx)=>ctx.selectOption);\n const comboboxSetActiveOption = useContextSelector(ComboboxContext, (ctx)=>ctx.setActiveOption);\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasComboboxContext ? {\n activeOption: comboboxActiveOption,\n focusVisible: comboboxFocusVisible,\n selectedOptions: comboboxSelectedOptions,\n selectOption: comboboxSelectOption,\n setActiveOption: comboboxSetActiveOption\n } : {\n activeOption,\n focusVisible,\n selectedOptions,\n selectOption,\n setActiveOption\n };\n const state = {\n components: {\n root: 'div'\n },\n root: slot.always(getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref,\n role: multiselect ? 'menu' : 'listbox',\n 'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,\n
|
|
1
|
+
{"version":3,"sources":["useListbox.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */ export const useListbox_unstable = (props, ref)=>{\n const { multiselect } = props;\n const optionCollection = useOptionCollection();\n const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n const [activeOption, setActiveOption] = React.useState();\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 const onKeyDown = (event)=>{\n const action = getDropdownActionFromKey(event, {\n open: true\n });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n switch(action){\n case 'Select':\n case 'CloseSelect':\n 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 const onMouseOver = (event)=>{\n setFocusVisible(false);\n };\n // get state from parent combobox, if it exists\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const comboboxActiveOption = useContextSelector(ComboboxContext, (ctx)=>ctx.activeOption);\n const comboboxFocusVisible = useContextSelector(ComboboxContext, (ctx)=>ctx.focusVisible);\n const comboboxSelectedOptions = useContextSelector(ComboboxContext, (ctx)=>ctx.selectedOptions);\n const comboboxSelectOption = useContextSelector(ComboboxContext, (ctx)=>ctx.selectOption);\n const comboboxSetActiveOption = useContextSelector(ComboboxContext, (ctx)=>ctx.setActiveOption);\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasComboboxContext ? {\n activeOption: comboboxActiveOption,\n focusVisible: comboboxFocusVisible,\n selectedOptions: comboboxSelectedOptions,\n selectOption: comboboxSelectOption,\n setActiveOption: comboboxSetActiveOption\n } : {\n activeOption,\n focusVisible,\n selectedOptions,\n selectOption,\n setActiveOption\n };\n const state = {\n components: {\n root: 'div'\n },\n root: slot.always(getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref,\n role: multiselect ? 'menu' : 'listbox',\n 'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,\n tabIndex: 0,\n ...props\n }), {\n elementType: 'div'\n }),\n multiselect,\n clearSelection,\n ...optionCollection,\n ...optionContextValues\n };\n const scrollContainerRef = useScrollOptionsIntoView(state);\n state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n return state;\n};\n"],"names":["useListbox_unstable","props","ref","multiselect","optionCollection","useOptionCollection","getCount","getOptionAtIndex","getIndexOfId","clearSelection","selectedOptions","selectOption","useSelection","activeOption","setActiveOption","React","useState","focusVisible","setFocusVisible","onKeyDown","event","action","getDropdownActionFromKey","open","maxIndex","activeIndex","id","newIndex","getIndexFromAction","preventDefault","onMouseOver","hasComboboxContext","useHasParentContext","ComboboxContext","comboboxActiveOption","useContextSelector","ctx","comboboxFocusVisible","comboboxSelectedOptions","comboboxSelectOption","comboboxSetActiveOption","optionContextValues","state","components","root","slot","always","getIntrinsicElementProps","role","undefined","tabIndex","elementType","scrollContainerRef","useScrollOptionsIntoView","useMergedRefs","useEventCallback","mergeCallbacks"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-combobox",
|
|
3
|
-
"version": "9.7.
|
|
3
|
+
"version": "9.7.2",
|
|
4
4
|
"description": "Fluent UI React Combobox component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -34,16 +34,16 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@fluentui/keyboard-keys": "^9.0.7",
|
|
37
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
38
|
-
"@fluentui/react-field": "^9.1.
|
|
37
|
+
"@fluentui/react-context-selector": "^9.1.50",
|
|
38
|
+
"@fluentui/react-field": "^9.1.51",
|
|
39
39
|
"@fluentui/react-icons": "^2.0.224",
|
|
40
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
41
|
-
"@fluentui/react-portal": "^9.4.
|
|
42
|
-
"@fluentui/react-positioning": "^9.
|
|
40
|
+
"@fluentui/react-jsx-runtime": "^9.0.28",
|
|
41
|
+
"@fluentui/react-portal": "^9.4.11",
|
|
42
|
+
"@fluentui/react-positioning": "^9.13.0",
|
|
43
43
|
"@fluentui/react-shared-contexts": "^9.14.0",
|
|
44
|
-
"@fluentui/react-tabster": "^9.17.
|
|
44
|
+
"@fluentui/react-tabster": "^9.17.4",
|
|
45
45
|
"@fluentui/react-theme": "^9.1.16",
|
|
46
|
-
"@fluentui/react-utilities": "^9.
|
|
46
|
+
"@fluentui/react-utilities": "^9.17.0",
|
|
47
47
|
"@griffel/react": "^1.5.14",
|
|
48
48
|
"@swc/helpers": "^0.5.1"
|
|
49
49
|
},
|