@fluentui/react-combobox 9.5.24 → 9.5.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +69 -3
- package/CHANGELOG.md +28 -4
- package/lib/components/Listbox/useListbox.js +6 -3
- package/lib/components/Listbox/useListbox.js.map +1 -1
- package/lib/components/Option/useOption.js +5 -2
- package/lib/components/Option/useOption.js.map +1 -1
- package/lib/components/OptionGroup/useOptionGroup.js +6 -3
- package/lib/components/OptionGroup/useOptionGroup.js.map +1 -1
- package/lib-commonjs/components/Listbox/useListbox.js +5 -2
- package/lib-commonjs/components/Listbox/useListbox.js.map +1 -1
- package/lib-commonjs/components/Option/useOption.js +4 -1
- package/lib-commonjs/components/Option/useOption.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/useOptionGroup.js +5 -2
- package/lib-commonjs/components/OptionGroup/useOptionGroup.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,73 @@
|
|
|
2
2
|
"name": "@fluentui/react-combobox",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 23 Oct 2023 09:48:56 GMT",
|
|
6
|
+
"tag": "@fluentui/react-combobox_v9.5.26",
|
|
7
|
+
"version": "9.5.26",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-combobox",
|
|
13
|
+
"comment": "Bump @fluentui/react-portal to v9.3.25",
|
|
14
|
+
"commit": "e4ef1febe8a185dddc10f8936944d177d50bc396"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Wed, 18 Oct 2023 17:54:02 GMT",
|
|
21
|
+
"tag": "@fluentui/react-combobox_v9.5.25",
|
|
22
|
+
"version": "9.5.25",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
27
|
+
"package": "@fluentui/react-combobox",
|
|
28
|
+
"commit": "967882a55a7333effea42e4c24a64e8547309116",
|
|
29
|
+
"comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "beachball",
|
|
33
|
+
"package": "@fluentui/react-combobox",
|
|
34
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.41",
|
|
35
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "beachball",
|
|
39
|
+
"package": "@fluentui/react-combobox",
|
|
40
|
+
"comment": "Bump @fluentui/react-field to v9.1.38",
|
|
41
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-combobox",
|
|
46
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.18",
|
|
47
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-combobox",
|
|
52
|
+
"comment": "Bump @fluentui/react-portal to v9.3.24",
|
|
53
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-combobox",
|
|
58
|
+
"comment": "Bump @fluentui/react-positioning to v9.9.21",
|
|
59
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-combobox",
|
|
64
|
+
"comment": "Bump @fluentui/react-utilities to v9.15.1",
|
|
65
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
66
|
+
}
|
|
67
|
+
]
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"date": "Thu, 12 Oct 2023 14:55:44 GMT",
|
|
6
72
|
"tag": "@fluentui/react-combobox_v9.5.24",
|
|
7
73
|
"version": "9.5.24",
|
|
8
74
|
"comments": {
|
|
@@ -11,13 +77,13 @@
|
|
|
11
77
|
"author": "beachball",
|
|
12
78
|
"package": "@fluentui/react-combobox",
|
|
13
79
|
"comment": "Bump @fluentui/react-field to v9.1.37",
|
|
14
|
-
"commit": "
|
|
80
|
+
"commit": "8178c3cae60005bc21137aa1f3e766e18cdb4a30"
|
|
15
81
|
},
|
|
16
82
|
{
|
|
17
83
|
"author": "beachball",
|
|
18
84
|
"package": "@fluentui/react-combobox",
|
|
19
85
|
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.17",
|
|
20
|
-
"commit": "
|
|
86
|
+
"commit": "8178c3cae60005bc21137aa1f3e766e18cdb4a30"
|
|
21
87
|
}
|
|
22
88
|
]
|
|
23
89
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,18 +1,42 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-combobox
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 23 Oct 2023 09:48:56 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.26)
|
|
8
|
+
|
|
9
|
+
Mon, 23 Oct 2023 09:48:56 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.25..@fluentui/react-combobox_v9.5.26)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-portal to v9.3.25 ([commit](https://github.com/microsoft/fluentui/commit/e4ef1febe8a185dddc10f8936944d177d50bc396) by beachball)
|
|
15
|
+
|
|
16
|
+
## [9.5.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.25)
|
|
17
|
+
|
|
18
|
+
Wed, 18 Oct 2023 17:54:02 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.24..@fluentui/react-combobox_v9.5.25)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- chore: migrate from getNativeElementProps to getIntrinsicElementProps ([PR #29499](https://github.com/microsoft/fluentui/pull/29499) by bernardo.sunderhus@gmail.com)
|
|
24
|
+
- Bump @fluentui/react-context-selector to v9.1.41 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
25
|
+
- Bump @fluentui/react-field to v9.1.38 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
26
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.18 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
27
|
+
- Bump @fluentui/react-portal to v9.3.24 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
28
|
+
- Bump @fluentui/react-positioning to v9.9.21 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
29
|
+
- Bump @fluentui/react-utilities to v9.15.1 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
30
|
+
|
|
7
31
|
## [9.5.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.24)
|
|
8
32
|
|
|
9
|
-
Thu, 12 Oct 2023 14:
|
|
33
|
+
Thu, 12 Oct 2023 14:55:44 GMT
|
|
10
34
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.23..@fluentui/react-combobox_v9.5.24)
|
|
11
35
|
|
|
12
36
|
### Patches
|
|
13
37
|
|
|
14
|
-
- Bump @fluentui/react-field to v9.1.37 ([PR #
|
|
15
|
-
- Bump @fluentui/react-jsx-runtime to v9.0.17 ([PR #
|
|
38
|
+
- Bump @fluentui/react-field to v9.1.37 ([PR #29513](https://github.com/microsoft/fluentui/pull/29513) by beachball)
|
|
39
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.17 ([PR #29513](https://github.com/microsoft/fluentui/pull/29513) by beachball)
|
|
16
40
|
|
|
17
41
|
## [9.5.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.23)
|
|
18
42
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';
|
|
4
4
|
import { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';
|
|
5
5
|
import { useOptionCollection } from '../../utils/useOptionCollection';
|
|
@@ -73,8 +73,11 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
|
|
|
73
73
|
components: {
|
|
74
74
|
root: 'div'
|
|
75
75
|
},
|
|
76
|
-
root: slot.always(
|
|
77
|
-
|
|
76
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
77
|
+
// FIXME:
|
|
78
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
79
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
80
|
+
ref: ref,
|
|
78
81
|
role: multiselect ? 'menu' : 'listbox',
|
|
79
82
|
'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,
|
|
80
83
|
'aria-multiselectable': multiselect,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\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 'aria-multiselectable': multiselect,\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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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useContextSelector } from '@fluentui/react-context-selector';
|
|
4
4
|
import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
|
|
5
5
|
import { ComboboxContext } from '../../contexts/ComboboxContext';
|
|
@@ -110,7 +110,10 @@ function getTextString(text, children) {
|
|
|
110
110
|
root: 'div',
|
|
111
111
|
checkIcon: 'span'
|
|
112
112
|
},
|
|
113
|
-
root: slot.always(
|
|
113
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
114
|
+
// FIXME:
|
|
115
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
116
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
114
117
|
ref: useMergedRefs(ref, optionRef),
|
|
115
118
|
'aria-disabled': disabled ? 'true' : undefined,
|
|
116
119
|
id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n if (text !== undefined) {\n return text;\n }\n\n let textString = '';\n let hasNonStringChild = false;\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n textString += child;\n } else {\n hasNonStringChild = true;\n }\n });\n\n // warn if an Option has non-string children and no text prop\n if (hasNonStringChild) {\n // eslint-disable-next-line no-console\n console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n }\n\n return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n const { children, disabled, text, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const optionText = getTextString(text, children);\n const optionValue = value ?? optionText;\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(\n () => ({ id, disabled, text: optionText, value: optionValue }),\n [id, disabled, optionText, optionValue],\n );\n\n // context values\n const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n const selected = useContextSelector(ListboxContext, ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n });\n const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n // current active option?\n const active = useContextSelector(ListboxContext, ctx => {\n return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n });\n\n // check icon\n let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n if (multiselect) {\n CheckIcon = selected ? <Checkmark12Filled /> : '';\n }\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n // clicked option should always become active option\n setActiveOption(optionData);\n\n // close on option click for single-select options in a combobox\n if (!multiselect) {\n setOpen?.(event, false);\n }\n\n // handle selection change\n selectOption(event, optionData);\n\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n const semanticProps = multiselect\n ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n : { role: 'option', 'aria-selected': selected };\n\n return {\n components: {\n root: 'div',\n checkIcon: 'span',\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: useMergedRefs(ref, optionRef) as React.Ref<HTMLDivElement>,\n 'aria-disabled': disabled ? ('true' as const) : undefined,\n id,\n ...semanticProps,\n ...props,\n onClick,\n }),\n { elementType: 'div' },\n ),\n checkIcon: slot.optional(props.checkIcon, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon,\n },\n elementType: 'span',\n }),\n active,\n disabled,\n focusVisible,\n multiselect,\n selected,\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useContextSelector","CheckmarkFilled","Checkmark12Filled","ComboboxContext","ListboxContext","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","focusVisible","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","active","activeOption","CheckIcon","onClick","event","preventDefault","useEffect","current","semanticProps","role","components","root","checkIcon","always","elementType","optional","renderByDefault","defaultProps"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Create the state required to render OptionGroup.
|
|
5
5
|
*
|
|
@@ -16,8 +16,11 @@ import { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';
|
|
|
16
16
|
root: 'div',
|
|
17
17
|
label: 'span'
|
|
18
18
|
},
|
|
19
|
-
root: slot.always(
|
|
20
|
-
|
|
19
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
20
|
+
// FIXME:
|
|
21
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
22
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
23
|
+
ref: ref,
|
|
21
24
|
role: 'group',
|
|
22
25
|
'aria-labelledby': label ? labelId : undefined,
|
|
23
26
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/**\n * Create the state required to render OptionGroup.\n *\n * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n *\n * @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n const labelId = useId('group-label');\n const { label } = props;\n\n return {\n components: {\n root: 'div',\n label: 'span',\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: 'group',\n 'aria-labelledby': label ? labelId : undefined,\n ...props,\n }),\n { elementType: 'div' },\n ),\n label: slot.optional(label, {\n defaultProps: {\n id: labelId,\n role: 'presentation',\n },\n elementType: 'span',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useOptionGroup_unstable","props","ref","labelId","label","components","root","always","role","undefined","elementType","optional","defaultProps","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGlF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAMC,UAAUL,MAAM;IACtB,MAAM,EAAEM,KAAK,EAAE,GAAGH;IAElB,OAAO;QACLI,YAAY;YACVC,MAAM;YACNF,OAAO;QACT;QACAE,MAAMP,KAAKQ,MAAM,CACfV,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACLM,MAAM;YACN,mBAAmBJ,QAAQD,UAAUM;YACrC,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN,OAAOL,KAAKY,QAAQ,CAACP,OAAO;YAC1BQ,cAAc;gBACZC,IAAIV;gBACJK,MAAM;YACR;YACAE,aAAa;QACf;IACF;AACF,EAAE"}
|
|
@@ -76,8 +76,11 @@ const useListbox_unstable = (props, ref)=>{
|
|
|
76
76
|
components: {
|
|
77
77
|
root: 'div'
|
|
78
78
|
},
|
|
79
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
80
|
-
|
|
79
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
80
|
+
// FIXME:
|
|
81
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
82
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
83
|
+
ref: ref,
|
|
81
84
|
role: multiselect ? 'menu' : 'listbox',
|
|
82
85
|
'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,
|
|
83
86
|
'aria-multiselectable': multiselect,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useListbox.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
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 'aria-multiselectable': multiselect,\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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"}
|
|
@@ -113,7 +113,10 @@ const useOption_unstable = (props, ref)=>{
|
|
|
113
113
|
root: 'div',
|
|
114
114
|
checkIcon: 'span'
|
|
115
115
|
},
|
|
116
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
116
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
117
|
+
// FIXME:
|
|
118
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
119
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
117
120
|
ref: (0, _reactutilities.useMergedRefs)(ref, optionRef),
|
|
118
121
|
'aria-disabled': disabled ? 'true' : undefined,
|
|
119
122
|
id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOption.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useOption.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nfunction getTextString(text, children) {\n if (text !== undefined) {\n return text;\n }\n let textString = '';\n let hasNonStringChild = false;\n React.Children.forEach(children, (child)=>{\n if (typeof child === 'string') {\n textString += child;\n } else {\n hasNonStringChild = true;\n }\n });\n // warn if an Option has non-string children and no text prop\n if (hasNonStringChild) {\n // eslint-disable-next-line no-console\n console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n }\n return textString;\n}\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */ export const useOption_unstable = (props, ref)=>{\n const { children, disabled, text, value } = props;\n const optionRef = React.useRef(null);\n const optionText = getTextString(text, children);\n const optionValue = value !== null && value !== void 0 ? value : optionText;\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n // data used for context registration & events\n const optionData = React.useMemo(()=>({\n id,\n disabled,\n text: optionText,\n value: optionValue\n }), [\n id,\n disabled,\n optionText,\n optionValue\n ]);\n // context values\n const focusVisible = useContextSelector(ListboxContext, (ctx)=>ctx.focusVisible);\n const multiselect = useContextSelector(ListboxContext, (ctx)=>ctx.multiselect);\n const registerOption = useContextSelector(ListboxContext, (ctx)=>ctx.registerOption);\n const selected = useContextSelector(ListboxContext, (ctx)=>{\n const selectedOptions = ctx.selectedOptions;\n return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);\n });\n const selectOption = useContextSelector(ListboxContext, (ctx)=>ctx.selectOption);\n const setActiveOption = useContextSelector(ListboxContext, (ctx)=>ctx.setActiveOption);\n const setOpen = useContextSelector(ComboboxContext, (ctx)=>ctx.setOpen);\n // current active option?\n const active = useContextSelector(ListboxContext, (ctx)=>{\n var _ctx_activeOption, _ctx_activeOption1;\n return ((_ctx_activeOption = ctx.activeOption) === null || _ctx_activeOption === void 0 ? void 0 : _ctx_activeOption.id) !== undefined && ((_ctx_activeOption1 = ctx.activeOption) === null || _ctx_activeOption1 === void 0 ? void 0 : _ctx_activeOption1.id) === id;\n });\n // check icon\n let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);\n if (multiselect) {\n CheckIcon = selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';\n }\n const onClick = (event)=>{\n var _props_onClick;\n if (disabled) {\n event.preventDefault();\n return;\n }\n // clicked option should always become active option\n setActiveOption(optionData);\n // close on option click for single-select options in a combobox\n if (!multiselect) {\n setOpen === null || setOpen === void 0 ? void 0 : setOpen(event, false);\n }\n // handle selection change\n selectOption(event, optionData);\n (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);\n };\n // register option data with context\n React.useEffect(()=>{\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [\n id,\n optionData,\n registerOption\n ]);\n const semanticProps = multiselect ? {\n role: 'menuitemcheckbox',\n 'aria-checked': selected\n } : {\n role: 'option',\n 'aria-selected': selected\n };\n return {\n components: {\n root: 'div',\n checkIcon: 'span'\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: useMergedRefs(ref, optionRef),\n 'aria-disabled': disabled ? 'true' : undefined,\n id,\n ...semanticProps,\n ...props,\n onClick\n }), {\n elementType: 'div'\n }),\n checkIcon: slot.optional(props.checkIcon, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon\n },\n elementType: 'span'\n }),\n active,\n disabled,\n focusVisible,\n multiselect,\n selected\n };\n};\n"],"names":["useOption_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","useId","optionData","useMemo","focusVisible","useContextSelector","ListboxContext","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","ComboboxContext","active","_ctx_activeOption","_ctx_activeOption1","activeOption","CheckIcon","createElement","CheckmarkFilled","Checkmark12Filled","onClick","event","_props_onClick","preventDefault","call","useEffect","current","semanticProps","role","components","root","checkIcon","slot","always","getIntrinsicElementProps","useMergedRefs","elementType","optional","renderByDefault","defaultProps"],"mappings":"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"}
|
|
@@ -19,8 +19,11 @@ const useOptionGroup_unstable = (props, ref)=>{
|
|
|
19
19
|
root: 'div',
|
|
20
20
|
label: 'span'
|
|
21
21
|
},
|
|
22
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
23
|
-
|
|
22
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
23
|
+
// FIXME:
|
|
24
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
25
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
26
|
+
ref: ref,
|
|
24
27
|
role: 'group',
|
|
25
28
|
'aria-labelledby': label ? labelId : undefined,
|
|
26
29
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOptionGroup.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useOptionGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render OptionGroup.\n *\n * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n *\n * @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */ export const useOptionGroup_unstable = (props, ref)=>{\n const labelId = useId('group-label');\n const { label } = props;\n return {\n components: {\n root: 'div',\n label: 'span'\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: 'group',\n 'aria-labelledby': label ? labelId : undefined,\n ...props\n }), {\n elementType: 'div'\n }),\n label: slot.optional(label, {\n defaultProps: {\n id: labelId,\n role: 'presentation'\n },\n elementType: 'span'\n })\n };\n};\n"],"names":["useOptionGroup_unstable","props","ref","labelId","useId","label","components","root","slot","always","getIntrinsicElementProps","role","undefined","elementType","optional","defaultProps","id"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;gCAC+B;AAS3C,MAAMA,0BAA0B,CAACC,OAAOC;IAC/C,MAAMC,UAAUC,IAAAA,qBAAK,EAAC;IACtB,MAAM,EAAEC,KAAK,EAAE,GAAGJ;IAClB,OAAO;QACHK,YAAY;YACRC,MAAM;YACNF,OAAO;QACX;QACAE,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FR,KAAKA;YACLS,MAAM;YACN,mBAAmBN,QAAQF,UAAUS;YACrC,GAAGX,KAAK;QACZ,IAAI;YACAY,aAAa;QACjB;QACAR,OAAOG,oBAAI,CAACM,QAAQ,CAACT,OAAO;YACxBU,cAAc;gBACVC,IAAIb;gBACJQ,MAAM;YACV;YACAE,aAAa;QACjB;IACJ;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-combobox",
|
|
3
|
-
"version": "9.5.
|
|
3
|
+
"version": "9.5.26",
|
|
4
4
|
"description": "Fluent UI React Combobox component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -34,15 +34,15 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@fluentui/keyboard-keys": "^9.0.6",
|
|
37
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
38
|
-
"@fluentui/react-field": "^9.1.
|
|
37
|
+
"@fluentui/react-context-selector": "^9.1.41",
|
|
38
|
+
"@fluentui/react-field": "^9.1.38",
|
|
39
39
|
"@fluentui/react-icons": "^2.0.217",
|
|
40
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
41
|
-
"@fluentui/react-portal": "^9.3.
|
|
42
|
-
"@fluentui/react-positioning": "^9.9.
|
|
40
|
+
"@fluentui/react-jsx-runtime": "^9.0.18",
|
|
41
|
+
"@fluentui/react-portal": "^9.3.25",
|
|
42
|
+
"@fluentui/react-positioning": "^9.9.21",
|
|
43
43
|
"@fluentui/react-shared-contexts": "^9.10.0",
|
|
44
44
|
"@fluentui/react-theme": "^9.1.14",
|
|
45
|
-
"@fluentui/react-utilities": "^9.15.
|
|
45
|
+
"@fluentui/react-utilities": "^9.15.1",
|
|
46
46
|
"@griffel/react": "^1.5.14",
|
|
47
47
|
"@swc/helpers": "^0.5.1"
|
|
48
48
|
},
|