@fluentui/react-combobox 9.16.9 → 9.16.11

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 (6) hide show
  1. package/CHANGELOG.md +39 -6
  2. package/lib/utils/ComboboxBase.types.js.map +1 -1
  3. package/lib/utils/useComboboxPositioning.js.map +1 -1
  4. package/lib-commonjs/utils/ComboboxBase.types.js.map +1 -1
  5. package/lib-commonjs/utils/useComboboxPositioning.js.map +1 -1
  6. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -1,20 +1,53 @@
1
1
  # Change Log - @fluentui/react-combobox
2
2
 
3
- This log was last generated on Tue, 21 Oct 2025 14:13:12 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 06 Nov 2025 14:56:55 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.16.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.16.11)
8
+
9
+ Thu, 06 Nov 2025 14:56:55 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.16.10..@fluentui/react-combobox_v9.16.11)
11
+
12
+ ### Patches
13
+
14
+ - chore: migrate source to react 19 ([PR #35434](https://github.com/microsoft/fluentui/pull/35434) by martinhochel@microsoft.com)
15
+ - Bump @fluentui/react-aria to v9.17.5 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
16
+ - Bump @fluentui/react-context-selector to v9.2.11 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
17
+ - Bump @fluentui/react-field to v9.4.10 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
18
+ - Bump @fluentui/react-jsx-runtime to v9.3.2 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
19
+ - Bump @fluentui/react-portal to v9.8.7 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
20
+ - Bump @fluentui/react-positioning to v9.20.9 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
21
+ - Bump @fluentui/react-tabster to v9.26.9 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
22
+ - Bump @fluentui/react-utilities to v9.25.3 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
23
+
24
+ ## [9.16.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.16.10)
25
+
26
+ Fri, 31 Oct 2025 16:22:06 GMT
27
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.16.9..@fluentui/react-combobox_v9.16.10)
28
+
29
+ ### Patches
30
+
31
+ - Bump @fluentui/react-aria to v9.17.4 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
32
+ - Bump @fluentui/react-context-selector to v9.2.10 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
33
+ - Bump @fluentui/react-field to v9.4.9 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
34
+ - Bump @fluentui/react-jsx-runtime to v9.3.1 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
35
+ - Bump @fluentui/react-portal to v9.8.6 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
36
+ - Bump @fluentui/react-positioning to v9.20.8 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
37
+ - Bump @fluentui/react-tabster to v9.26.8 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
38
+ - Bump @fluentui/react-utilities to v9.25.2 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
39
+
7
40
  ## [9.16.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.16.9)
8
41
 
9
- Tue, 21 Oct 2025 14:13:12 GMT
42
+ Tue, 21 Oct 2025 14:16:59 GMT
10
43
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.16.8..@fluentui/react-combobox_v9.16.9)
11
44
 
12
45
  ### Patches
13
46
 
14
- - Bump @fluentui/react-aria to v9.17.3 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
15
- - Bump @fluentui/react-field to v9.4.8 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
16
- - Bump @fluentui/react-jsx-runtime to v9.3.0 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
17
- - Bump @fluentui/react-portal to v9.8.5 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
47
+ - Bump @fluentui/react-aria to v9.17.3 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
48
+ - Bump @fluentui/react-field to v9.4.8 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
49
+ - Bump @fluentui/react-jsx-runtime to v9.3.0 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
50
+ - Bump @fluentui/react-portal to v9.8.5 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
18
51
 
19
52
  ## [9.16.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.16.8)
20
53
 
package/lib/utils/ComboboxBase.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantChangeEvent, ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\nimport { ListboxContextValue } from '../contexts/ListboxContext';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n HighlightedOptionProps &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * Controls the colors and borders of the combobox trigger.\n * @default 'outline'\n */\n appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n /**\n * If set, the combobox will show an icon to clear the current value.\n */\n clearable?: boolean;\n\n /**\n * The default open state when open is uncontrolled\n */\n defaultOpen?: boolean;\n\n /**\n * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n */\n defaultValue?: string;\n\n /**\n * Disable auto-focusing on the first item when mounting.\n *\n * @default false\n */\n disableAutoFocus?: boolean;\n\n /**\n * Render the combobox's popup inline in the DOM.\n * This has accessibility benefits, particularly for touch screen readers.\n */\n inlinePopup?: boolean;\n\n /**\n * Callback when the open/closed state of the dropdown changes\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n /**\n * Sets the open/closed state of the dropdown.\n * Use together with onOpenChange to fully control the dropdown's visibility\n */\n open?: boolean;\n\n /**\n * If set, the placeholder will show when no value is selected\n */\n placeholder?: string;\n\n /**\n * Configure the positioning of the combobox dropdown.\n * Please refer to the [positioning documentation](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default#anchor-to-target)\n * for more details.\n *\n * @defaultvalue below\n */\n positioning?: PositioningShorthand;\n\n /**\n * Controls the size of the combobox faceplate\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * The value displayed by the Combobox.\n * Use this with `onOptionSelect` to directly control the displayed value string\n */\n value?: string;\n };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<\n Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>\n> &\n Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n OptionCollectionState &\n SelectionState & {\n /**\n * @deprecated - no longer used internally\n */\n activeOption?: OptionValue;\n\n /**\n * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n * @see ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE for writing styles involving focusVisible\n */\n focusVisible: boolean;\n\n /**\n * @deprecated - no longer used internally\n * Whether the next blur event should be ignored, and the combobox/dropdown will not close.\n */\n ignoreNextBlur: React.MutableRefObject<boolean | null>;\n\n /**\n * @deprecated - no longer used internally\n */\n setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n /**\n * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n * @see useSetKeyboardNavigation for imperatively setting focus visible state\n */\n setFocusVisible(focusVisible: boolean): void;\n\n /**\n * whether the combobox/dropdown currently has focus\n */\n hasFocus: boolean;\n\n setHasFocus(hasFocus: boolean): void;\n\n setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n setValue(newValue: string | undefined): void;\n\n onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n disabled: boolean;\n freeform: boolean;\n\n onActiveDescendantChange: (event: ActiveDescendantChangeEvent) => void;\n };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n open: boolean;\n};\n\n/** Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n | React.MouseEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n combobox: ComboboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n listbox: ListboxContextValue;\n};\n\nexport type ActiveOptionChangeData = EventData<'change', ActiveDescendantChangeEvent> & {\n previousOption: OptionValue | null | undefined;\n nextOption: OptionValue | null | undefined;\n};\n\nexport type HighlightedOptionProps = {\n onActiveOptionChange?: EventHandler<ActiveOptionChangeData>;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["../src/utils/ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantChangeEvent, ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\nimport { ListboxContextValue } from '../contexts/ListboxContext';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n HighlightedOptionProps &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * Controls the colors and borders of the combobox trigger.\n * @default 'outline'\n */\n appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n /**\n * If set, the combobox will show an icon to clear the current value.\n */\n clearable?: boolean;\n\n /**\n * The default open state when open is uncontrolled\n */\n defaultOpen?: boolean;\n\n /**\n * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n */\n defaultValue?: string;\n\n /**\n * Disable auto-focusing on the first item when mounting.\n *\n * @default false\n */\n disableAutoFocus?: boolean;\n\n /**\n * Render the combobox's popup inline in the DOM.\n * This has accessibility benefits, particularly for touch screen readers.\n */\n inlinePopup?: boolean;\n\n /**\n * Callback when the open/closed state of the dropdown changes\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n /**\n * Sets the open/closed state of the dropdown.\n * Use together with onOpenChange to fully control the dropdown's visibility\n */\n open?: boolean;\n\n /**\n * If set, the placeholder will show when no value is selected\n */\n placeholder?: string;\n\n /**\n * Configure the positioning of the combobox dropdown.\n * Please refer to the [positioning documentation](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default#anchor-to-target)\n * for more details.\n *\n * @defaultvalue below\n */\n positioning?: PositioningShorthand;\n\n /**\n * Controls the size of the combobox faceplate\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * The value displayed by the Combobox.\n * Use this with `onOptionSelect` to directly control the displayed value string\n */\n value?: string;\n };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<\n Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>\n> &\n Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n OptionCollectionState &\n SelectionState & {\n /**\n * @deprecated - no longer used internally\n */\n activeOption?: OptionValue;\n\n /**\n * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n * @see ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE for writing styles involving focusVisible\n */\n focusVisible: boolean;\n\n /**\n * @deprecated - no longer used internally\n * Whether the next blur event should be ignored, and the combobox/dropdown will not close.\n */\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ignoreNextBlur: React.MutableRefObject<boolean | null>;\n\n /**\n * @deprecated - no longer used internally\n */\n setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n /**\n * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n * @see useSetKeyboardNavigation for imperatively setting focus visible state\n */\n setFocusVisible(focusVisible: boolean): void;\n\n /**\n * whether the combobox/dropdown currently has focus\n */\n hasFocus: boolean;\n\n setHasFocus(hasFocus: boolean): void;\n\n setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n setValue(newValue: string | undefined): void;\n\n onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n disabled: boolean;\n freeform: boolean;\n\n onActiveDescendantChange: (event: ActiveDescendantChangeEvent) => void;\n };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n open: boolean;\n};\n\n/** Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n | React.MouseEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n combobox: ComboboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n listbox: ListboxContextValue;\n};\n\nexport type ActiveOptionChangeData = EventData<'change', ActiveDescendantChangeEvent> & {\n previousOption: OptionValue | null | undefined;\n nextOption: OptionValue | null | undefined;\n};\n\nexport type HighlightedOptionProps = {\n onActiveOptionChange?: EventHandler<ActiveOptionChangeData>;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
package/lib/utils/useComboboxPositioning.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/useComboboxPositioning.ts"],"sourcesContent":["'use client';\n\nimport { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport * as React from 'react';\n\nexport function useComboboxPositioning(props: ComboboxBaseProps): [\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n listboxRef: React.MutableRefObject<any>,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n triggerRef: React.MutableRefObject<any>,\n] {\n const { positioning } = props;\n\n // Set a default set of fallback positions to try if the dropdown does not fit on screen\n const fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n // popper options\n const popperOptions = {\n position: 'below' as const,\n align: 'start' as const,\n offset: { crossAxis: 0, mainAxis: 2 },\n fallbackPositions,\n matchTargetSize: 'width' as const,\n autoSize: true,\n ...resolvePositioningShorthand(positioning),\n };\n\n const { targetRef, containerRef } = usePositioning(popperOptions);\n\n return [containerRef, targetRef];\n}\n"],"names":["resolvePositioningShorthand","usePositioning","React","useComboboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","autoSize","targetRef","containerRef"],"mappings":"AAAA;AAEA,SAAoCA,2BAA2B,EAAEC,cAAc,QAAQ,8BAA8B;AAErH,YAAYC,WAAW,QAAQ;AAE/B,OAAO,SAASC,uBAAuBC,KAAwB;IAM7D,MAAM,EAAEC,WAAW,EAAE,GAAGD;IAExB,wFAAwF;IACxF,MAAME,oBAAiD;QAAC;QAAS;QAAS;QAAa;QAAU;KAAa;IAE9G,iBAAiB;IACjB,MAAMC,gBAAgB;QACpBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YAAEC,WAAW;YAAGC,UAAU;QAAE;QACpCN;QACAO,iBAAiB;QACjBC,UAAU;QACV,GAAGd,4BAA4BK,YAAY;IAC7C;IAEA,MAAM,EAAEU,SAAS,EAAEC,YAAY,EAAE,GAAGf,eAAeM;IAEnD,OAAO;QAACS;QAAcD;KAAU;AAClC"}
1
+ {"version":3,"sources":["../src/utils/useComboboxPositioning.ts"],"sourcesContent":["'use client';\n\nimport { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport * as React from 'react';\n\nexport function useComboboxPositioning(props: ComboboxBaseProps): [\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-deprecated\n listboxRef: React.MutableRefObject<any>,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-deprecated\n triggerRef: React.MutableRefObject<any>,\n] {\n const { positioning } = props;\n\n // Set a default set of fallback positions to try if the dropdown does not fit on screen\n const fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n // popper options\n const popperOptions = {\n position: 'below' as const,\n align: 'start' as const,\n offset: { crossAxis: 0, mainAxis: 2 },\n fallbackPositions,\n matchTargetSize: 'width' as const,\n autoSize: true,\n ...resolvePositioningShorthand(positioning),\n };\n\n const { targetRef, containerRef } = usePositioning(popperOptions);\n\n return [containerRef, targetRef];\n}\n"],"names":["resolvePositioningShorthand","usePositioning","React","useComboboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","autoSize","targetRef","containerRef"],"mappings":"AAAA;AAEA,SAAoCA,2BAA2B,EAAEC,cAAc,QAAQ,8BAA8B;AAErH,YAAYC,WAAW,QAAQ;AAE/B,OAAO,SAASC,uBAAuBC,KAAwB;IAM7D,MAAM,EAAEC,WAAW,EAAE,GAAGD;IAExB,wFAAwF;IACxF,MAAME,oBAAiD;QAAC;QAAS;QAAS;QAAa;QAAU;KAAa;IAE9G,iBAAiB;IACjB,MAAMC,gBAAgB;QACpBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YAAEC,WAAW;YAAGC,UAAU;QAAE;QACpCN;QACAO,iBAAiB;QACjBC,UAAU;QACV,GAAGd,4BAA4BK,YAAY;IAC7C;IAEA,MAAM,EAAEU,SAAS,EAAEC,YAAY,EAAE,GAAGf,eAAeM;IAEnD,OAAO;QAACS;QAAcD;KAAU;AAClC"}
package/lib-commonjs/utils/ComboboxBase.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantChangeEvent, ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\nimport { ListboxContextValue } from '../contexts/ListboxContext';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n HighlightedOptionProps &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * Controls the colors and borders of the combobox trigger.\n * @default 'outline'\n */\n appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n /**\n * If set, the combobox will show an icon to clear the current value.\n */\n clearable?: boolean;\n\n /**\n * The default open state when open is uncontrolled\n */\n defaultOpen?: boolean;\n\n /**\n * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n */\n defaultValue?: string;\n\n /**\n * Disable auto-focusing on the first item when mounting.\n *\n * @default false\n */\n disableAutoFocus?: boolean;\n\n /**\n * Render the combobox's popup inline in the DOM.\n * This has accessibility benefits, particularly for touch screen readers.\n */\n inlinePopup?: boolean;\n\n /**\n * Callback when the open/closed state of the dropdown changes\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n /**\n * Sets the open/closed state of the dropdown.\n * Use together with onOpenChange to fully control the dropdown's visibility\n */\n open?: boolean;\n\n /**\n * If set, the placeholder will show when no value is selected\n */\n placeholder?: string;\n\n /**\n * Configure the positioning of the combobox dropdown.\n * Please refer to the [positioning documentation](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default#anchor-to-target)\n * for more details.\n *\n * @defaultvalue below\n */\n positioning?: PositioningShorthand;\n\n /**\n * Controls the size of the combobox faceplate\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * The value displayed by the Combobox.\n * Use this with `onOptionSelect` to directly control the displayed value string\n */\n value?: string;\n };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<\n Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>\n> &\n Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n OptionCollectionState &\n SelectionState & {\n /**\n * @deprecated - no longer used internally\n */\n activeOption?: OptionValue;\n\n /**\n * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n * @see ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE for writing styles involving focusVisible\n */\n focusVisible: boolean;\n\n /**\n * @deprecated - no longer used internally\n * Whether the next blur event should be ignored, and the combobox/dropdown will not close.\n */\n ignoreNextBlur: React.MutableRefObject<boolean | null>;\n\n /**\n * @deprecated - no longer used internally\n */\n setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n /**\n * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n * @see useSetKeyboardNavigation for imperatively setting focus visible state\n */\n setFocusVisible(focusVisible: boolean): void;\n\n /**\n * whether the combobox/dropdown currently has focus\n */\n hasFocus: boolean;\n\n setHasFocus(hasFocus: boolean): void;\n\n setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n setValue(newValue: string | undefined): void;\n\n onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n disabled: boolean;\n freeform: boolean;\n\n onActiveDescendantChange: (event: ActiveDescendantChangeEvent) => void;\n };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n open: boolean;\n};\n\n/** Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n | React.MouseEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n combobox: ComboboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n listbox: ListboxContextValue;\n};\n\nexport type ActiveOptionChangeData = EventData<'change', ActiveDescendantChangeEvent> & {\n previousOption: OptionValue | null | undefined;\n nextOption: OptionValue | null | undefined;\n};\n\nexport type HighlightedOptionProps = {\n onActiveOptionChange?: EventHandler<ActiveOptionChangeData>;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
1
+ {"version":3,"sources":["../src/utils/ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantChangeEvent, ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\nimport { ListboxContextValue } from '../contexts/ListboxContext';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n HighlightedOptionProps &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * Controls the colors and borders of the combobox trigger.\n * @default 'outline'\n */\n appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n /**\n * If set, the combobox will show an icon to clear the current value.\n */\n clearable?: boolean;\n\n /**\n * The default open state when open is uncontrolled\n */\n defaultOpen?: boolean;\n\n /**\n * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n */\n defaultValue?: string;\n\n /**\n * Disable auto-focusing on the first item when mounting.\n *\n * @default false\n */\n disableAutoFocus?: boolean;\n\n /**\n * Render the combobox's popup inline in the DOM.\n * This has accessibility benefits, particularly for touch screen readers.\n */\n inlinePopup?: boolean;\n\n /**\n * Callback when the open/closed state of the dropdown changes\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n /**\n * Sets the open/closed state of the dropdown.\n * Use together with onOpenChange to fully control the dropdown's visibility\n */\n open?: boolean;\n\n /**\n * If set, the placeholder will show when no value is selected\n */\n placeholder?: string;\n\n /**\n * Configure the positioning of the combobox dropdown.\n * Please refer to the [positioning documentation](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default#anchor-to-target)\n * for more details.\n *\n * @defaultvalue below\n */\n positioning?: PositioningShorthand;\n\n /**\n * Controls the size of the combobox faceplate\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * The value displayed by the Combobox.\n * Use this with `onOptionSelect` to directly control the displayed value string\n */\n value?: string;\n };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<\n Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>\n> &\n Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n OptionCollectionState &\n SelectionState & {\n /**\n * @deprecated - no longer used internally\n */\n activeOption?: OptionValue;\n\n /**\n * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n * @see ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE for writing styles involving focusVisible\n */\n focusVisible: boolean;\n\n /**\n * @deprecated - no longer used internally\n * Whether the next blur event should be ignored, and the combobox/dropdown will not close.\n */\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ignoreNextBlur: React.MutableRefObject<boolean | null>;\n\n /**\n * @deprecated - no longer used internally\n */\n setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n /**\n * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n * @see useSetKeyboardNavigation for imperatively setting focus visible state\n */\n setFocusVisible(focusVisible: boolean): void;\n\n /**\n * whether the combobox/dropdown currently has focus\n */\n hasFocus: boolean;\n\n setHasFocus(hasFocus: boolean): void;\n\n setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n setValue(newValue: string | undefined): void;\n\n onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n disabled: boolean;\n freeform: boolean;\n\n onActiveDescendantChange: (event: ActiveDescendantChangeEvent) => void;\n };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n open: boolean;\n};\n\n/** Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n | React.MouseEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n combobox: ComboboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n listbox: ListboxContextValue;\n};\n\nexport type ActiveOptionChangeData = EventData<'change', ActiveDescendantChangeEvent> & {\n previousOption: OptionValue | null | undefined;\n nextOption: OptionValue | null | undefined;\n};\n\nexport type HighlightedOptionProps = {\n onActiveOptionChange?: EventHandler<ActiveOptionChangeData>;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
package/lib-commonjs/utils/useComboboxPositioning.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/useComboboxPositioning.ts"],"sourcesContent":["'use client';\n\nimport { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport * as React from 'react';\n\nexport function useComboboxPositioning(props: ComboboxBaseProps): [\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n listboxRef: React.MutableRefObject<any>,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n triggerRef: React.MutableRefObject<any>,\n] {\n const { positioning } = props;\n\n // Set a default set of fallback positions to try if the dropdown does not fit on screen\n const fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n // popper options\n const popperOptions = {\n position: 'below' as const,\n align: 'start' as const,\n offset: { crossAxis: 0, mainAxis: 2 },\n fallbackPositions,\n matchTargetSize: 'width' as const,\n autoSize: true,\n ...resolvePositioningShorthand(positioning),\n };\n\n const { targetRef, containerRef } = usePositioning(popperOptions);\n\n return [containerRef, targetRef];\n}\n"],"names":["resolvePositioningShorthand","usePositioning","React","useComboboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","autoSize","targetRef","containerRef"],"mappings":"AAAA;;;;;+BAMgBG;;;;;;;kCAJuE,8BAA8B;iEAE9F,QAAQ;AAExB,gCAAgCC,KAAwB;IAM7D,MAAM,EAAEC,WAAW,EAAE,GAAGD;IAExB,wFAAwF;IACxF,MAAME,oBAAiD;QAAC;QAAS;QAAS;QAAa;QAAU;KAAa;IAE9G,iBAAiB;IACjB,MAAMC,gBAAgB;QACpBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YAAEC,WAAW;YAAGC,UAAU;QAAE;QACpCN;QACAO,iBAAiB;QACjBC,UAAU;QACV,OAAGd,6CAAAA,EAA4BK,YAAY;IAC7C;IAEA,MAAM,EAAEU,SAAS,EAAEC,YAAY,EAAE,OAAGf,gCAAAA,EAAeM;IAEnD,OAAO;QAACS;QAAcD;KAAU;AAClC"}
1
+ {"version":3,"sources":["../src/utils/useComboboxPositioning.ts"],"sourcesContent":["'use client';\n\nimport { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport * as React from 'react';\n\nexport function useComboboxPositioning(props: ComboboxBaseProps): [\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-deprecated\n listboxRef: React.MutableRefObject<any>,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-deprecated\n triggerRef: React.MutableRefObject<any>,\n] {\n const { positioning } = props;\n\n // Set a default set of fallback positions to try if the dropdown does not fit on screen\n const fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n // popper options\n const popperOptions = {\n position: 'below' as const,\n align: 'start' as const,\n offset: { crossAxis: 0, mainAxis: 2 },\n fallbackPositions,\n matchTargetSize: 'width' as const,\n autoSize: true,\n ...resolvePositioningShorthand(positioning),\n };\n\n const { targetRef, containerRef } = usePositioning(popperOptions);\n\n return [containerRef, targetRef];\n}\n"],"names":["resolvePositioningShorthand","usePositioning","React","useComboboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","autoSize","targetRef","containerRef"],"mappings":"AAAA;;;;;+BAMgBG;;;;;;;kCAJuE,8BAA8B;iEAE9F,QAAQ;AAExB,gCAAgCC,KAAwB;IAM7D,MAAM,EAAEC,WAAW,EAAE,GAAGD;IAExB,wFAAwF;IACxF,MAAME,oBAAiD;QAAC;QAAS;QAAS;QAAa;QAAU;KAAa;IAE9G,iBAAiB;IACjB,MAAMC,gBAAgB;QACpBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YAAEC,WAAW;YAAGC,UAAU;QAAE;QACpCN;QACAO,iBAAiB;QACjBC,UAAU;QACV,OAAGd,6CAAAA,EAA4BK,YAAY;IAC7C;IAEA,MAAM,EAAEU,SAAS,EAAEC,YAAY,EAAE,OAAGf,gCAAAA,EAAeM;IAEnD,OAAO;QAACS;QAAcD;KAAU;AAClC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-combobox",
3
- "version": "9.16.9",
3
+ "version": "9.16.11",
4
4
  "description": "Fluent UI React Combobox component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -19,18 +19,18 @@
19
19
  "@fluentui/scripts-cypress": "*"
20
20
  },
21
21
  "dependencies": {
22
- "@fluentui/react-aria": "^9.17.3",
22
+ "@fluentui/react-aria": "^9.17.5",
23
23
  "@fluentui/keyboard-keys": "^9.0.8",
24
- "@fluentui/react-context-selector": "^9.2.9",
25
- "@fluentui/react-field": "^9.4.8",
24
+ "@fluentui/react-context-selector": "^9.2.11",
25
+ "@fluentui/react-field": "^9.4.10",
26
26
  "@fluentui/react-icons": "^2.0.245",
27
- "@fluentui/react-jsx-runtime": "^9.3.0",
28
- "@fluentui/react-portal": "^9.8.5",
29
- "@fluentui/react-positioning": "^9.20.7",
27
+ "@fluentui/react-jsx-runtime": "^9.3.2",
28
+ "@fluentui/react-portal": "^9.8.7",
29
+ "@fluentui/react-positioning": "^9.20.9",
30
30
  "@fluentui/react-shared-contexts": "^9.25.2",
31
- "@fluentui/react-tabster": "^9.26.7",
31
+ "@fluentui/react-tabster": "^9.26.9",
32
32
  "@fluentui/react-theme": "^9.2.0",
33
- "@fluentui/react-utilities": "^9.25.1",
33
+ "@fluentui/react-utilities": "^9.25.3",
34
34
  "@griffel/react": "^1.5.22",
35
35
  "@swc/helpers": "^0.5.1"
36
36
  },