npm - @fluentui/react-combobox - Versions diffs - 9.13.2 → 9.13.4 - Mend

@fluentui/react-combobox 9.13.2 → 9.13.4

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 (17) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-combobox
-This log was last generated on Tue, 23 Jul 2024 20:09:20 GMT and should not be manually modified.
+This log was last generated on Thu, 15 Aug 2024 08:18:51 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.13.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.13.4)
+Thu, 15 Aug 2024 08:18:51 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.13.3..@fluentui/react-combobox_v9.13.4)
+### Patches
+- fix: check icon slot does not collapse ([PR #32243](https://github.com/microsoft/fluentui/pull/32243) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-aria to v9.13.3 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
+- Bump @fluentui/react-field to v9.1.73 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
+- Bump @fluentui/react-portal to v9.4.32 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
+- Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
+## [9.13.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.13.3)
+Tue, 30 Jul 2024 18:47:32 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.13.2..@fluentui/react-combobox_v9.13.3)
+### Patches
+- fix: only call activedescendant focus when combobox/dropdown is opened ([PR #32156](https://github.com/microsoft/fluentui/pull/32156) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-field to v9.1.72 ([PR #32157](https://github.com/microsoft/fluentui/pull/32157) by beachball)
+- Bump @fluentui/react-positioning to v9.15.7 ([PR #32157](https://github.com/microsoft/fluentui/pull/32157) by beachball)
 ## [9.13.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.13.2)
-Tue, 23 Jul 2024 20:09:20 GMT
+Tue, 23 Jul 2024 20:13:14 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.13.1..@fluentui/react-combobox_v9.13.2)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -93,7 +93,9 @@ export declare type ComboboxBaseProps = SelectionProps & HighlightedOptionProps
      */
     placeholder?: string;
     /**
-     * Configure the positioning of the combobox dropdown
+     * Configure the positioning of the combobox dropdown.
+     * Please refer to the [positioning documentation](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default#anchor-to-target)
+     * for more details.
      *
      * @defaultvalue below
      */

package/lib/components/Listbox/useListbox.js CHANGED Viewed

@@ -120,10 +120,12 @@ const UNSAFE_noLongerUsed = {
         ...UNSAFE_noLongerUsed
     };
     React.useEffect(()=>{
-        if (!hasParentActiveDescendantContext) {
-            // disable focus-visible attributes until focus is received
-            activeDescendantController.hideFocusVisibleAttributes();
+        // if the listbox has a parent context, that parent context should handle the activedescendant
+        if (hasParentActiveDescendantContext) {
+            return;
         }
+        // disable focus-visible attributes until focus is received
+        activeDescendantController.hideFocusVisibleAttributes();
         if (!disableAutoFocus) {
             // if it is single-select and there is a selected option, start at the selected option
             if (!multiselect && optionContextValues.selectedOptions.length > 0) {

package/lib/components/Listbox/useListbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useEventCallback,\n slot,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport {\n ActiveDescendantChangeEvent,\n useActiveDescendant,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n activeOption: undefined,\n focusVisible: false,\n setActiveOption: () => null,\n};\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 'use no memo';\n\n const { multiselect, disableAutoFocus = false } = props;\n const optionCollection = useOptionCollection();\n\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller,\n } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(optionClassNames.root),\n });\n\n const hasListboxContext = useHasParentContext(ListboxContext);\n const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n const contextGetOptionById = useListboxContext_unstable(ctx => ctx.getOptionById);\n const contextGetOptionsMatchingValue = useListboxContext_unstable(ctx => ctx.getOptionsMatchingValue);\n\n const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;\n const getOptionsMatchingValue = hasListboxContext\n ? contextGetOptionsMatchingValue\n : optionCollection.getOptionsMatchingValue;\n\n const listenerRef = React.useMemo(() => {\n let element: HTMLDivElement \| null = null;\n\n const listener = (untypedEvent: Event) => {\n // Typescript doesn't support custom event types on handler\n const event = untypedEvent as ActiveDescendantChangeEvent;\n onActiveDescendantChange?.(event);\n };\n\n return (el: HTMLDivElement \| null) => {\n if (!el) {\n element?.removeEventListener('activedescendantchange', listener);\n return;\n }\n\n element = el;\n element.addEventListener('activedescendantchange', listener);\n };\n }, [onActiveDescendantChange]);\n\n const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);\n useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);\n\n const activeDescendantContext = useActiveDescendantContext();\n const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const activeOptionId = activeDescendantController.active();\n const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n switch (action) {\n case 'First':\n case 'Last':\n case 'Next':\n case 'Previous':\n case 'PageDown':\n case 'PageUp':\n case 'CloseSelect':\n case 'Select':\n event.preventDefault();\n break;\n }\n\n switch (action) {\n case 'Next':\n if (activeOption) {\n activeDescendantController.next();\n } else {\n activeDescendantController.first();\n }\n break;\n case 'Previous':\n if (activeOption) {\n activeDescendantController.prev();\n } else {\n activeDescendantController.first();\n }\n break;\n case 'PageUp':\n case 'First':\n activeDescendantController.first();\n break;\n case 'PageDown':\n case 'Last':\n activeDescendantController.last();\n break;\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n }\n };\n\n // get state from parent combobox, if it exists\n const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasListboxContext\n ? {\n selectedOptions: contextSelectedOptions,\n selectOption: contextSelectOption,\n ...UNSAFE_noLongerUsed,\n }\n : {\n selectedOptions,\n selectOption,\n ...UNSAFE_noLongerUsed,\n };\n\n React.useEffect(() => {\n if (!hasParentActiveDescendantContext) {\n // disable focus-visible attributes until focus is received\n activeDescendantController.hideFocusVisibleAttributes();\n }\n\n if (!disableAutoFocus) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && optionContextValues.selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === optionContextValues.selectedOptions[0]).pop();\n\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n\n // otherwise start at the first option\n else {\n activeDescendantController.first();\n }\n }\n\n return () => {\n activeDescendantController.blur();\n };\n\n // this should only be run once in the lifecycle of the Listbox\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const onFocus = React.useCallback(() => {\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n activeDescendantController.showFocusVisibleAttributes();\n\n if (isNavigatingWithKeyboard) {\n activeDescendantController.scrollActiveIntoView();\n }\n }, [activeDescendantController, hasParentActiveDescendantContext, isNavigatingWithKeyboard]);\n\n const onBlur = React.useCallback(() => {\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n activeDescendantController.hideFocusVisibleAttributes();\n }, [activeDescendantController, hasParentActiveDescendantContext]);\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: useMergedRefs(ref as React.Ref<HTMLDivElement>, activeParentRef, activeDescendantListboxRef, listenerRef),\n role: multiselect ? 'menu' : 'listbox',\n tabIndex: 0,\n ...props,\n }),\n { elementType: 'div' },\n ),\n standalone: !hasListboxContext,\n multiselect,\n clearSelection,\n activeDescendantController,\n onActiveDescendantChange,\n ...optionCollection,\n ...optionContextValues,\n };\n\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","slot","useMergedRefs","useHasParentContext","useActiveDescendant","useActiveDescendantContext","useHasParentActiveDescendantContext","getDropdownActionFromKey","useOptionCollection","useSelection","optionClassNames","ListboxContext","useListboxContext_unstable","useOnKeyboardNavigationChange","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","disableAutoFocus","optionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","el","classList","contains","root","hasListboxContext","onActiveDescendantChange","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","isNavigatingWithKeyboard","setIsNavigatingWithKeyboard","useState","activeDescendantContext","hasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","onKeyDown","action","open","activeOptionId","active","preventDefault","next","first","prev","last","contextSelectedOptions","contextSelectOption","optionContextValues","useEffect","hideFocusVisibleAttributes","length","selectedOption","v","pop","id","focus","blur","onFocus","useCallback","showFocusVisibleAttributes","scrollActiveIntoView","onBlur","state","components","always","role","tabIndex","elementType","standalone"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useEventCallback,\n slot,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport {\n ActiveDescendantChangeEvent,\n useActiveDescendant,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n activeOption: undefined,\n focusVisible: false,\n setActiveOption: () => null,\n};\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 'use no memo';\n\n const { multiselect, disableAutoFocus = false } = props;\n const optionCollection = useOptionCollection();\n\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller,\n } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(optionClassNames.root),\n });\n\n const hasListboxContext = useHasParentContext(ListboxContext);\n const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n const contextGetOptionById = useListboxContext_unstable(ctx => ctx.getOptionById);\n const contextGetOptionsMatchingValue = useListboxContext_unstable(ctx => ctx.getOptionsMatchingValue);\n\n const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;\n const getOptionsMatchingValue = hasListboxContext\n ? contextGetOptionsMatchingValue\n : optionCollection.getOptionsMatchingValue;\n\n const listenerRef = React.useMemo(() => {\n let element: HTMLDivElement \| null = null;\n\n const listener = (untypedEvent: Event) => {\n // Typescript doesn't support custom event types on handler\n const event = untypedEvent as ActiveDescendantChangeEvent;\n onActiveDescendantChange?.(event);\n };\n\n return (el: HTMLDivElement \| null) => {\n if (!el) {\n element?.removeEventListener('activedescendantchange', listener);\n return;\n }\n\n element = el;\n element.addEventListener('activedescendantchange', listener);\n };\n }, [onActiveDescendantChange]);\n\n const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);\n useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);\n\n const activeDescendantContext = useActiveDescendantContext();\n const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const activeOptionId = activeDescendantController.active();\n const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n switch (action) {\n case 'First':\n case 'Last':\n case 'Next':\n case 'Previous':\n case 'PageDown':\n case 'PageUp':\n case 'CloseSelect':\n case 'Select':\n event.preventDefault();\n break;\n }\n\n switch (action) {\n case 'Next':\n if (activeOption) {\n activeDescendantController.next();\n } else {\n activeDescendantController.first();\n }\n break;\n case 'Previous':\n if (activeOption) {\n activeDescendantController.prev();\n } else {\n activeDescendantController.first();\n }\n break;\n case 'PageUp':\n case 'First':\n activeDescendantController.first();\n break;\n case 'PageDown':\n case 'Last':\n activeDescendantController.last();\n break;\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n }\n };\n\n // get state from parent combobox, if it exists\n const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasListboxContext\n ? {\n selectedOptions: contextSelectedOptions,\n selectOption: contextSelectOption,\n ...UNSAFE_noLongerUsed,\n }\n : {\n selectedOptions,\n selectOption,\n ...UNSAFE_noLongerUsed,\n };\n\n React.useEffect(() => {\n // if the listbox has a parent context, that parent context should handle the activedescendant\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n // disable focus-visible attributes until focus is received\n activeDescendantController.hideFocusVisibleAttributes();\n\n if (!disableAutoFocus) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && optionContextValues.selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === optionContextValues.selectedOptions[0]).pop();\n\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n\n // otherwise start at the first option\n else {\n activeDescendantController.first();\n }\n }\n\n return () => {\n activeDescendantController.blur();\n };\n\n // this should only be run once in the lifecycle of the Listbox\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const onFocus = React.useCallback(() => {\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n activeDescendantController.showFocusVisibleAttributes();\n\n if (isNavigatingWithKeyboard) {\n activeDescendantController.scrollActiveIntoView();\n }\n }, [activeDescendantController, hasParentActiveDescendantContext, isNavigatingWithKeyboard]);\n\n const onBlur = React.useCallback(() => {\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n activeDescendantController.hideFocusVisibleAttributes();\n }, [activeDescendantController, hasParentActiveDescendantContext]);\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: useMergedRefs(ref as React.Ref<HTMLDivElement>, activeParentRef, activeDescendantListboxRef, listenerRef),\n role: multiselect ? 'menu' : 'listbox',\n tabIndex: 0,\n ...props,\n }),\n { elementType: 'div' },\n ),\n standalone: !hasListboxContext,\n multiselect,\n clearSelection,\n activeDescendantController,\n onActiveDescendantChange,\n ...optionCollection,\n ...optionContextValues,\n };\n\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","slot","useMergedRefs","useHasParentContext","useActiveDescendant","useActiveDescendantContext","useHasParentActiveDescendantContext","getDropdownActionFromKey","useOptionCollection","useSelection","optionClassNames","ListboxContext","useListboxContext_unstable","useOnKeyboardNavigationChange","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","disableAutoFocus","optionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","el","classList","contains","root","hasListboxContext","onActiveDescendantChange","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","isNavigatingWithKeyboard","setIsNavigatingWithKeyboard","useState","activeDescendantContext","hasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","onKeyDown","action","open","activeOptionId","active","preventDefault","next","first","prev","last","contextSelectedOptions","contextSelectOption","optionContextValues","useEffect","hideFocusVisibleAttributes","length","selectedOption","v","pop","id","focus","blur","onFocus","useCallback","showFocusVisibleAttributes","scrollActiveIntoView","onBlur","state","components","always","role","tabIndex","elementType","standalone"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/Option/useOptionStyles.styles.js CHANGED Viewed

@@ -92,6 +92,7 @@ const useStyles = /*#__PURE__*/__styles({
   },
   selected: {},
   checkIcon: {
+    Bnnss6s: "fi64zpg",
     Be2twd7: "fod5ikn",
     Frg6f3: ["f18b9hdq", "fn6qj8t"],
     t21cq0: ["f1xk557c", "f1h9en5y"],
@@ -161,7 +162,7 @@ const useStyles = /*#__PURE__*/__styles({
     p: -2
   }], [".f1kurthe[data-activedescendant-focusvisible]::after{border-radius:var(--borderRadiusMedium);}", {
     p: -1
-  }], ".fwq15dy[data-activedescendant-focusvisible]::after{top:-2px;}", ".f1pb3wry[data-activedescendant-focusvisible]::after{bottom:-2px;}", ".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}", ".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}", ".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".fd7fpy0{visibility:hidden;}", ".fvc9v3g svg{display:block;}", ".f1022m68{visibility:visible;}", [".f1l3cf7o{border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}", {
+  }], ".fwq15dy[data-activedescendant-focusvisible]::after{top:-2px;}", ".f1pb3wry[data-activedescendant-focusvisible]::after{bottom:-2px;}", ".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}", ".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fi64zpg{flex-shrink:0;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}", ".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".fd7fpy0{visibility:hidden;}", ".fvc9v3g svg{display:block;}", ".f1022m68{visibility:visible;}", [".f1l3cf7o{border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}", {
     p: -2
   }], [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
     p: -1

package/lib/components/Option/useOptionStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","B7cbj04","Bewtojm","b50fsz","B1wzb3v","Bqwk70n","B37u8z8","avt0cx","f0sref","B9fkznv","Be3o27t","Bertapg","B53xpsf","Bsv72rj","B39dzdd","Btq9bd3","Bqfxd14","atup0s","Fffuxt","Bttcd12","Beitzug","Bqougee","B86i8pi","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","Bbusuzp","selected","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","p","h","a","m","useOptionStyles_unstable","state","multiselect","styles","className"],"sources":["useOptionStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n position: 'relative',\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n }\n },\n active: {\n [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px'\n }\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n },\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n selected: {},\n checkIcon: {\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n '& svg': {\n display: 'block'\n }\n },\n selectedCheck: {\n visibility: 'visible'\n },\n multiselectCheck: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: tokens.borderRadiusSmall,\n boxSizing: 'border-box',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible'\n },\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n },\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/*\n Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n 'use no memo';\n const { disabled, multiselect, selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uCAAuC,QAAQ,sBAAsB;AAC9E,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE;AACf,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAxD,MAAA;IAAAa,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAiC,OAAA;EAAA;EAAAC,QAAA;EAAAlE,SAAA;~~IAAAa~~,OAAA;~~IAAAsD~~,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,aAAA;IAAAF,OAAA;EAAA;EAAAG,gBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;~~IAAAtF~~,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;~~IAAAmF~~,OAAA;~~IAAA/E~~,MAAA;IAAAT,OAAA;~~IAAAyF~~,OAAA;IAAAC,OAAA;~~IAAA/E~~,OAAA;~~IAAAgF~~,OAAA;IAAAC,MAAA;IAAAzB,OAAA;EAAA;EAAA0B,wBAAA;IAAAC,MAAA;~~IAAAxF~~,MAAA;~~IAAA8E~~,MAAA;IAAAJ,MAAA;IAAAR,OAAA;IAAAI,MAAA;EAAA;EAAAmB,aAAA;~~IAAAzF~~,MAAA;IAAAyD,OAAA;EAAA;~~EAAAiC~~,wBAAA;IAAAZ,MAAA;IAAAJ,MAAA;IAAAR,OAAA;IAAAI,MAAA;EAAA;AAAA;EAAAqB,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,~~CA8FrB~~,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wBAAwB,GAAIC,KAAK,IAAG;EACjD,aAAa;;EACb,MAAM;~~IAAEzC~~,QAAQ;~~IAAE0C~~,WAAW;~~IAAExC~~;EAAS,CAAC,~~GAAGuC~~,KAAK;EACjD,MAAME,MAAM,~~GAAG1G~~,SAAS,CAAC,CAAC;~~EAC1BwG~~,KAAK,~~CAAC1G~~,IAAI,~~CAAC6G~~,SAAS,~~GAAGhH~~,YAAY,CAACE,gBAAgB,CAACC,IAAI,~~EAAE4G~~,MAAM,~~CAAC5G~~,IAAI,~~EAAE4G~~,MAAM,~~CAAC1E~~,MAAM,EAAE+B,QAAQ,~~IAAI2C~~,MAAM,~~CAAC3C~~,QAAQ,EAAEE,QAAQ,~~IAAIyC~~,MAAM,~~CAACzC~~,QAAQ,~~EAAEuC~~,KAAK,~~CAAC1G~~,IAAI,~~CAAC6G~~,SAAS,CAAC;EACtK,IAAIH,KAAK,~~CAACzG~~,SAAS,EAAE;~~IACjByG~~,KAAK,~~CAACzG~~,SAAS,~~CAAC4G~~,SAAS,~~GAAGhH~~,YAAY,CAACE,gBAAgB,CAACE,SAAS,~~EAAE2G~~,MAAM,~~CAAC3G~~,SAAS,~~EAAE0G~~,WAAW,IAAIC,MAAM,CAACnC,gBAAgB,~~EAAEN~~,QAAQ,~~IAAIyC~~,MAAM,CAACpC,aAAa,~~EAAEL~~,QAAQ,~~IAAIwC~~,WAAW,IAAIC,MAAM,CAACZ,wBAAwB,~~EAAE/B~~,QAAQ,~~IAAI2C~~,MAAM,CAACV,aAAa,~~EAAEjC~~,QAAQ,~~IAAI0C~~,WAAW,IAAIC,MAAM,CAACT,wBAAwB,EAAEO,KAAK,~~CAACzG~~,SAAS,~~CAAC4G~~,SAAS,CAAC;EACzV;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","B7cbj04","Bewtojm","b50fsz","B1wzb3v","Bqwk70n","B37u8z8","avt0cx","f0sref","B9fkznv","Be3o27t","Bertapg","B53xpsf","Bsv72rj","B39dzdd","Btq9bd3","Bqfxd14","atup0s","Fffuxt","Bttcd12","Beitzug","Bqougee","B86i8pi","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","Bbusuzp","selected","Bnnss6s","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","p","h","a","m","useOptionStyles_unstable","state","multiselect","styles","className"],"sources":["useOptionStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n position: 'relative',\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n }\n },\n active: {\n [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px'\n }\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n },\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n selected: {},\n checkIcon: {\n flexShrink: 0,\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n '& svg': {\n display: 'block'\n }\n },\n selectedCheck: {\n visibility: 'visible'\n },\n multiselectCheck: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: tokens.borderRadiusSmall,\n boxSizing: 'border-box',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible'\n },\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n },\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/*\n Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n 'use no memo';\n const { disabled, multiselect, selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/utils/ComboboxBase.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["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 \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>;\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"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1	+ {"version":3,"sources":["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>;\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"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/utils/useComboboxBaseState.js CHANGED Viewed

@@ -117,6 +117,25 @@ import { useSelection } from '../utils/useSelection';
         freeform,
         disabled
     ]);
+    // update active option based on change in open state
+    React.useEffect(()=>{
+        if (open) {
+            // if it is single-select and there is a selected option, start at the selected option
+            if (!multiselect && selectedOptions.length > 0) {
+                const selectedOption = getOptionsMatchingValue((v)=>v === selectedOptions[0]).pop();
+                if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) {
+                    activeDescendantController.focus(selectedOption.id);
+                }
+            }
+        } else {
+            activeDescendantController.blur();
+        }
+    // this should only be run in response to changes in the open state
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        open,
+        activeDescendantController
+    ]);
     // Fallback focus when children are updated in an open popover results in no item being focused
     React.useEffect(()=>{
         if (open && !disableAutoFocus && !activeDescendantController.active()) {

package/lib/utils/useComboboxBaseState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport { SelectionEvents } from './Selection.types';\n\n/*\n @internal\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & {\n children?: React.ReactNode;\n editable?: boolean;\n disabled?: boolean;\n freeform?: boolean;\n activeDescendantController: ActiveDescendantImperativeRef;\n },\n): ComboboxBaseState => {\n 'use no memo';\n\n const {\n appearance = 'outline',\n disableAutoFocus,\n children,\n clearable = false,\n editable = false,\n inlinePopup = false,\n mountNode = undefined,\n multiselect,\n onOpenChange,\n size = 'medium',\n activeDescendantController,\n freeform = false,\n disabled = false,\n onActiveOptionChange = null,\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionsMatchingValue } = optionCollection;\n\n const { getOptionById } = optionCollection;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n // Keeping some kind of backwards compatible functionality here\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_activeOption = getActiveOption();\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_setActiveOption = React.useCallback(\n (option: OptionValue \| undefined \| ((prev: OptionValue \| undefined) => OptionValue \| undefined)) => {\n let nextOption: OptionValue \| undefined = undefined;\n if (typeof option === 'function') {\n const activeOption = getActiveOption();\n nextOption = option(activeOption);\n }\n\n if (nextOption) {\n activeDescendantController.focus(nextOption.id);\n } else {\n activeDescendantController.blur();\n }\n },\n [activeDescendantController, getActiveOption],\n );\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n // when the trigger is focused - the listbox should but hidden until the open state is changed\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n // reset any typed value when an option is selected\n const selectOption = React.useCallback(\n (ev: SelectionEvents, option: OptionValue) => {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n baseSelectOption(ev, option);\n });\n },\n [setValue, baseSelectOption],\n );\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n if (disabled) {\n return;\n }\n onOpenChange?.(event, { open: newState });\n ReactDOM.unstable_batchedUpdates(() => {\n if (!newState && !freeform) {\n setValue(undefined);\n }\n setOpenState(newState);\n });\n },\n [onOpenChange, setOpenState, setValue, freeform, disabled],\n );\n\n // Fallback focus when children are updated in an open popover results in no item being focused\n React.useEffect(() => {\n if (open && !disableAutoFocus && !activeDescendantController.active()) {\n activeDescendantController.first();\n }\n // this should only be run in response to changes in the open state or children\n }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n const nextOption = optionCollection.getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n return {\n ...optionCollection,\n freeform,\n disabled,\n selectOption,\n clearSelection,\n selectedOptions,\n activeOption: UNSAFE_activeOption,\n appearance,\n clearable,\n focusVisible,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n hasFocus,\n setActiveOption: UNSAFE_setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n multiselect,\n onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (!multiselect) {\n setOpen(e, false);\n }\n }),\n onActiveDescendantChange,\n };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport { SelectionEvents } from './Selection.types';\n\n/*\n @internal\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & {\n children?: React.ReactNode;\n editable?: boolean;\n disabled?: boolean;\n freeform?: boolean;\n activeDescendantController: ActiveDescendantImperativeRef;\n },\n): ComboboxBaseState => {\n 'use no memo';\n\n const {\n appearance = 'outline',\n disableAutoFocus,\n children,\n clearable = false,\n editable = false,\n inlinePopup = false,\n mountNode = undefined,\n multiselect,\n onOpenChange,\n size = 'medium',\n activeDescendantController,\n freeform = false,\n disabled = false,\n onActiveOptionChange = null,\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionsMatchingValue } = optionCollection;\n\n const { getOptionById } = optionCollection;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n // Keeping some kind of backwards compatible functionality here\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_activeOption = getActiveOption();\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_setActiveOption = React.useCallback(\n (option: OptionValue \| undefined \| ((prev: OptionValue \| undefined) => OptionValue \| undefined)) => {\n let nextOption: OptionValue \| undefined = undefined;\n if (typeof option === 'function') {\n const activeOption = getActiveOption();\n nextOption = option(activeOption);\n }\n\n if (nextOption) {\n activeDescendantController.focus(nextOption.id);\n } else {\n activeDescendantController.blur();\n }\n },\n [activeDescendantController, getActiveOption],\n );\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n // when the trigger is focused - the listbox should but hidden until the open state is changed\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n // reset any typed value when an option is selected\n const selectOption = React.useCallback(\n (ev: SelectionEvents, option: OptionValue) => {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n baseSelectOption(ev, option);\n });\n },\n [setValue, baseSelectOption],\n );\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n if (disabled) {\n return;\n }\n onOpenChange?.(event, { open: newState });\n ReactDOM.unstable_batchedUpdates(() => {\n if (!newState && !freeform) {\n setValue(undefined);\n }\n setOpenState(newState);\n });\n },\n [onOpenChange, setOpenState, setValue, freeform, disabled],\n );\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n } else {\n activeDescendantController.blur();\n }\n // this should only be run in response to changes in the open state\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, activeDescendantController]);\n\n // Fallback focus when children are updated in an open popover results in no item being focused\n React.useEffect(() => {\n if (open && !disableAutoFocus && !activeDescendantController.active()) {\n activeDescendantController.first();\n }\n // this should only be run in response to changes in the open state or children\n }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n const nextOption = optionCollection.getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n return {\n ...optionCollection,\n freeform,\n disabled,\n selectOption,\n clearSelection,\n selectedOptions,\n activeOption: UNSAFE_activeOption,\n appearance,\n clearable,\n focusVisible,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n hasFocus,\n setActiveOption: UNSAFE_setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n multiselect,\n onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (!multiselect) {\n setOpen(e, false);\n }\n }),\n onActiveDescendantChange,\n };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/Listbox/useListbox.js CHANGED Viewed

@@ -123,10 +123,12 @@ const useListbox_unstable = (props, ref)=>{
         ...UNSAFE_noLongerUsed
     };
     _react.useEffect(()=>{
-        if (!hasParentActiveDescendantContext) {
-            // disable focus-visible attributes until focus is received
-            activeDescendantController.hideFocusVisibleAttributes();
+        // if the listbox has a parent context, that parent context should handle the activedescendant
+        if (hasParentActiveDescendantContext) {
+            return;
         }
+        // disable focus-visible attributes until focus is received
+        activeDescendantController.hideFocusVisibleAttributes();
         if (!disableAutoFocus) {
             // if it is single-select and there is a selected option, start at the selected option
             if (!multiselect && optionContextValues.selectedOptions.length > 0) {

package/lib-commonjs/components/Listbox/useListbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useEventCallback,\n slot,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport {\n ActiveDescendantChangeEvent,\n useActiveDescendant,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n activeOption: undefined,\n focusVisible: false,\n setActiveOption: () => null,\n};\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 'use no memo';\n\n const { multiselect, disableAutoFocus = false } = props;\n const optionCollection = useOptionCollection();\n\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller,\n } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(optionClassNames.root),\n });\n\n const hasListboxContext = useHasParentContext(ListboxContext);\n const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n const contextGetOptionById = useListboxContext_unstable(ctx => ctx.getOptionById);\n const contextGetOptionsMatchingValue = useListboxContext_unstable(ctx => ctx.getOptionsMatchingValue);\n\n const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;\n const getOptionsMatchingValue = hasListboxContext\n ? contextGetOptionsMatchingValue\n : optionCollection.getOptionsMatchingValue;\n\n const listenerRef = React.useMemo(() => {\n let element: HTMLDivElement \| null = null;\n\n const listener = (untypedEvent: Event) => {\n // Typescript doesn't support custom event types on handler\n const event = untypedEvent as ActiveDescendantChangeEvent;\n onActiveDescendantChange?.(event);\n };\n\n return (el: HTMLDivElement \| null) => {\n if (!el) {\n element?.removeEventListener('activedescendantchange', listener);\n return;\n }\n\n element = el;\n element.addEventListener('activedescendantchange', listener);\n };\n }, [onActiveDescendantChange]);\n\n const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);\n useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);\n\n const activeDescendantContext = useActiveDescendantContext();\n const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const activeOptionId = activeDescendantController.active();\n const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n switch (action) {\n case 'First':\n case 'Last':\n case 'Next':\n case 'Previous':\n case 'PageDown':\n case 'PageUp':\n case 'CloseSelect':\n case 'Select':\n event.preventDefault();\n break;\n }\n\n switch (action) {\n case 'Next':\n if (activeOption) {\n activeDescendantController.next();\n } else {\n activeDescendantController.first();\n }\n break;\n case 'Previous':\n if (activeOption) {\n activeDescendantController.prev();\n } else {\n activeDescendantController.first();\n }\n break;\n case 'PageUp':\n case 'First':\n activeDescendantController.first();\n break;\n case 'PageDown':\n case 'Last':\n activeDescendantController.last();\n break;\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n }\n };\n\n // get state from parent combobox, if it exists\n const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasListboxContext\n ? {\n selectedOptions: contextSelectedOptions,\n selectOption: contextSelectOption,\n ...UNSAFE_noLongerUsed,\n }\n : {\n selectedOptions,\n selectOption,\n ...UNSAFE_noLongerUsed,\n };\n\n React.useEffect(() => {\n if (!hasParentActiveDescendantContext) {\n // disable focus-visible attributes until focus is received\n activeDescendantController.hideFocusVisibleAttributes();\n }\n\n if (!disableAutoFocus) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && optionContextValues.selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === optionContextValues.selectedOptions[0]).pop();\n\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n\n // otherwise start at the first option\n else {\n activeDescendantController.first();\n }\n }\n\n return () => {\n activeDescendantController.blur();\n };\n\n // this should only be run once in the lifecycle of the Listbox\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const onFocus = React.useCallback(() => {\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n activeDescendantController.showFocusVisibleAttributes();\n\n if (isNavigatingWithKeyboard) {\n activeDescendantController.scrollActiveIntoView();\n }\n }, [activeDescendantController, hasParentActiveDescendantContext, isNavigatingWithKeyboard]);\n\n const onBlur = React.useCallback(() => {\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n activeDescendantController.hideFocusVisibleAttributes();\n }, [activeDescendantController, hasParentActiveDescendantContext]);\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: useMergedRefs(ref as React.Ref<HTMLDivElement>, activeParentRef, activeDescendantListboxRef, listenerRef),\n role: multiselect ? 'menu' : 'listbox',\n tabIndex: 0,\n ...props,\n }),\n { elementType: 'div' },\n ),\n standalone: !hasListboxContext,\n multiselect,\n clearSelection,\n activeDescendantController,\n onActiveDescendantChange,\n ...optionCollection,\n ...optionContextValues,\n };\n\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n\n return state;\n};\n"],"names":["useListbox_unstable","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","props","ref","multiselect","disableAutoFocus","optionCollection","useOptionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","hasListboxContext","useHasParentContext","ListboxContext","onActiveDescendantChange","useListboxContext_unstable","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","React","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","isNavigatingWithKeyboard","setIsNavigatingWithKeyboard","useState","useOnKeyboardNavigationChange","activeDescendantContext","useActiveDescendantContext","hasParentActiveDescendantContext","useHasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","useSelection","onKeyDown","action","getDropdownActionFromKey","open","activeOptionId","active","preventDefault","next","first","prev","last","contextSelectedOptions","contextSelectOption","optionContextValues","useEffect","hideFocusVisibleAttributes","length","selectedOption","v","pop","id","focus","blur","onFocus","useCallback","showFocusVisibleAttributes","scrollActiveIntoView","onBlur","state","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","tabIndex","elementType","standalone","useEventCallback","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useEventCallback,\n slot,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport {\n ActiveDescendantChangeEvent,\n useActiveDescendant,\n useActiveDescendantContext,\n useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n activeOption: undefined,\n focusVisible: false,\n setActiveOption: () => null,\n};\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 'use no memo';\n\n const { multiselect, disableAutoFocus = false } = props;\n const optionCollection = useOptionCollection();\n\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller,\n } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(optionClassNames.root),\n });\n\n const hasListboxContext = useHasParentContext(ListboxContext);\n const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n const contextGetOptionById = useListboxContext_unstable(ctx => ctx.getOptionById);\n const contextGetOptionsMatchingValue = useListboxContext_unstable(ctx => ctx.getOptionsMatchingValue);\n\n const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;\n const getOptionsMatchingValue = hasListboxContext\n ? contextGetOptionsMatchingValue\n : optionCollection.getOptionsMatchingValue;\n\n const listenerRef = React.useMemo(() => {\n let element: HTMLDivElement \| null = null;\n\n const listener = (untypedEvent: Event) => {\n // Typescript doesn't support custom event types on handler\n const event = untypedEvent as ActiveDescendantChangeEvent;\n onActiveDescendantChange?.(event);\n };\n\n return (el: HTMLDivElement \| null) => {\n if (!el) {\n element?.removeEventListener('activedescendantchange', listener);\n return;\n }\n\n element = el;\n element.addEventListener('activedescendantchange', listener);\n };\n }, [onActiveDescendantChange]);\n\n const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);\n useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);\n\n const activeDescendantContext = useActiveDescendantContext();\n const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const activeOptionId = activeDescendantController.active();\n const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n switch (action) {\n case 'First':\n case 'Last':\n case 'Next':\n case 'Previous':\n case 'PageDown':\n case 'PageUp':\n case 'CloseSelect':\n case 'Select':\n event.preventDefault();\n break;\n }\n\n switch (action) {\n case 'Next':\n if (activeOption) {\n activeDescendantController.next();\n } else {\n activeDescendantController.first();\n }\n break;\n case 'Previous':\n if (activeOption) {\n activeDescendantController.prev();\n } else {\n activeDescendantController.first();\n }\n break;\n case 'PageUp':\n case 'First':\n activeDescendantController.first();\n break;\n case 'PageDown':\n case 'Last':\n activeDescendantController.last();\n break;\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n }\n };\n\n // get state from parent combobox, if it exists\n const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasListboxContext\n ? {\n selectedOptions: contextSelectedOptions,\n selectOption: contextSelectOption,\n ...UNSAFE_noLongerUsed,\n }\n : {\n selectedOptions,\n selectOption,\n ...UNSAFE_noLongerUsed,\n };\n\n React.useEffect(() => {\n // if the listbox has a parent context, that parent context should handle the activedescendant\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n // disable focus-visible attributes until focus is received\n activeDescendantController.hideFocusVisibleAttributes();\n\n if (!disableAutoFocus) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && optionContextValues.selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === optionContextValues.selectedOptions[0]).pop();\n\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n\n // otherwise start at the first option\n else {\n activeDescendantController.first();\n }\n }\n\n return () => {\n activeDescendantController.blur();\n };\n\n // this should only be run once in the lifecycle of the Listbox\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const onFocus = React.useCallback(() => {\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n activeDescendantController.showFocusVisibleAttributes();\n\n if (isNavigatingWithKeyboard) {\n activeDescendantController.scrollActiveIntoView();\n }\n }, [activeDescendantController, hasParentActiveDescendantContext, isNavigatingWithKeyboard]);\n\n const onBlur = React.useCallback(() => {\n if (hasParentActiveDescendantContext) {\n return;\n }\n\n activeDescendantController.hideFocusVisibleAttributes();\n }, [activeDescendantController, hasParentActiveDescendantContext]);\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: useMergedRefs(ref as React.Ref<HTMLDivElement>, activeParentRef, activeDescendantListboxRef, listenerRef),\n role: multiselect ? 'menu' : 'listbox',\n tabIndex: 0,\n ...props,\n }),\n { elementType: 'div' },\n ),\n standalone: !hasListboxContext,\n multiselect,\n clearSelection,\n activeDescendantController,\n onActiveDescendantChange,\n ...optionCollection,\n ...optionContextValues,\n };\n\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n\n return state;\n};\n"],"names":["useListbox_unstable","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","props","ref","multiselect","disableAutoFocus","optionCollection","useOptionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","hasListboxContext","useHasParentContext","ListboxContext","onActiveDescendantChange","useListboxContext_unstable","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","React","useMemo","element","listener","untypedEvent","event","removeEventListener","addEventListener","isNavigatingWithKeyboard","setIsNavigatingWithKeyboard","useState","useOnKeyboardNavigationChange","activeDescendantContext","useActiveDescendantContext","hasParentActiveDescendantContext","useHasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","useSelection","onKeyDown","action","getDropdownActionFromKey","open","activeOptionId","active","preventDefault","next","first","prev","last","contextSelectedOptions","contextSelectOption","optionContextValues","useEffect","hideFocusVisibleAttributes","length","selectedOption","v","pop","id","focus","blur","onFocus","useCallback","showFocusVisibleAttributes","scrollActiveIntoView","onBlur","state","components","slot","always","getIntrinsicElementProps","useMergedRefs","role","tabIndex","elementType","standalone","useEventCallback","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/Option/useOptionStyles.styles.js CHANGED Viewed

@@ -137,6 +137,7 @@ const optionClassNames = {
     },
     selected: {},
     checkIcon: {
+        Bnnss6s: "fi64zpg",
         Be2twd7: "fod5ikn",
         Frg6f3: [
             "f18b9hdq",
@@ -259,6 +260,7 @@ const optionClassNames = {
         ".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}",
         ".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}",
         ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".fi64zpg{flex-shrink:0;}",
         ".fod5ikn{font-size:var(--fontSizeBase400);}",
         ".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}",
         ".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}",

package/lib-commonjs/components/Option/useOptionStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useOptionStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n position: 'relative',\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n }\n },\n active: {\n [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px'\n }\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n },\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n selected: {},\n checkIcon: {\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n '& svg': {\n display: 'block'\n }\n },\n selectedCheck: {\n visibility: 'visible'\n },\n multiselectCheck: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: tokens.borderRadiusSmall,\n boxSizing: 'border-box',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible'\n },\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n },\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/*\n Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n 'use no memo';\n const { disabled, multiselect, selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);\n }\n return state;\n};\n"],"names":["optionClassNames","useOptionStyles_unstable","root","checkIcon","useStyles","__styles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","B7cbj04","Bewtojm","b50fsz","B1wzb3v","Bqwk70n","B37u8z8","avt0cx","f0sref","B9fkznv","Be3o27t","Bertapg","B53xpsf","Bsv72rj","B39dzdd","Btq9bd3","Bqfxd14","atup0s","Fffuxt","Bttcd12","Beitzug","Bqougee","B86i8pi","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","Bbusuzp","selected","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","p","h","a","m","state","multiselect","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,gBAAgB;eAAhBA;;~~IAuGIC~~,wBAAwB;eAAxBA;;;~~uBAxGoC~~;AAC9C,MAAMD,mBAAmB;IAC5BE,MAAM;IACNC,WAAW;AACf;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAH,MAAA;QAAAI,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,UAAA;QAAAxD,QAAA;QAAAa,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAiC,SAAA;IAAA;IAAAC,UAAA,CAAA;IAAAnE,WAAA;~~QAAAc~~,SAAA;~~QAAAsD~~,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,eAAA;QAAAF,SAAA;IAAA;IAAAG,kBAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;~~QAAAtF~~,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;~~QAAAmF~~,SAAA;~~QAAA/E~~,QAAA;QAAAT,SAAA;~~QAAAyF~~,SAAA;QAAAC,SAAA;~~QAAA/E~~,SAAA;~~QAAAgF~~,SAAA;QAAAC,QAAA;QAAAzB,SAAA;IAAA;IAAA0B,0BAAA;QAAAC,QAAA;~~QAAAxF~~,QAAA;~~QAAA8E~~,QAAA;QAAAJ,QAAA;YAAA;YAAA;SAAA;QAAAR,SAAA;QAAAI,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAmB,eAAA;~~QAAAzF~~,QAAA;QAAAyD,SAAA;IAAA;~~IAAAiC~~,0BAAA;QAAAZ,QAAA;QAAAJ,QAAA;YAAA;YAAA;SAAA;QAAAR,SAAA;QAAAI,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAqB,GAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;~~AAiGX~~,~~MAAM1G~~,~~2BAA4B2G~~,CAAAA;IACzC;IACA,MAAM,~~EAAExC~~,QAAQ,~~EAAEyC~~,WAAW,~~EAAEvC~~,QAAAA,EAAU,~~GAAGsC~~;IAC5C,MAAME,~~SAAS1G~~;~~IACfwG~~,~~MAAM1G~~,IAAI,~~CAAC6G~~,SAAS,GAAGC,IAAAA,mBAAY,~~EAAChH~~,iBAAiBE,IAAI,~~EAAE4G~~,~~OAAO5G~~,IAAI,~~EAAE4G~~,~~OAAOzE~~,MAAM,EAAE+B,~~YAAY0C~~,~~OAAO1C~~,QAAQ,EAAEE,~~YAAYwC~~,~~OAAOxC~~,QAAQ,~~EAAEsC~~,~~MAAM1G~~,IAAI,~~CAAC6G~~,SAAS;IACrK,IAAIH,~~MAAMzG~~,SAAS,EAAE;~~QACjByG~~,~~MAAMzG~~,SAAS,~~CAAC4G~~,SAAS,GAAGC,IAAAA,mBAAY,~~EAAChH~~,iBAAiBG,SAAS,~~EAAE2G~~,~~OAAO3G~~,SAAS,~~EAAE0G~~,eAAeC,OAAOlC,gBAAgB,~~EAAEN~~,~~YAAYwC~~,OAAOnC,aAAa,~~EAAEL~~,~~YAAYuC~~,eAAeC,OAAOX,wBAAwB,~~EAAE/B~~,~~YAAY0C~~,OAAOT,aAAa,~~EAAEjC~~,~~YAAYyC~~,eAAeC,OAAOR,wBAAwB,EAAEM,~~MAAMzG~~,SAAS,~~CAAC4G~~,SAAS;IACxV;IACA,OAAOH;AACX"}
1	+ {"version":3,"sources":["useOptionStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n position: 'relative',\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n }\n },\n active: {\n [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px'\n }\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n },\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n selected: {},\n checkIcon: {\n flexShrink: 0,\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n '& svg': {\n display: 'block'\n }\n },\n selectedCheck: {\n visibility: 'visible'\n },\n multiselectCheck: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: tokens.borderRadiusSmall,\n boxSizing: 'border-box',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible'\n },\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n },\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/*\n Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n 'use no memo';\n const { disabled, multiselect, selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);\n }\n return state;\n};\n"],"names":["optionClassNames","useOptionStyles_unstable","root","checkIcon","useStyles","__styles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","B7cbj04","Bewtojm","b50fsz","B1wzb3v","Bqwk70n","B37u8z8","avt0cx","f0sref","B9fkznv","Be3o27t","Bertapg","B53xpsf","Bsv72rj","B39dzdd","Btq9bd3","Bqfxd14","atup0s","Fffuxt","Bttcd12","Beitzug","Bqougee","B86i8pi","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","Bbusuzp","selected","Bnnss6s","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","p","h","a","m","state","multiselect","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/utils/ComboboxBase.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["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 \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>;\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":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
1	+ {"version":3,"sources":["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>;\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":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}

package/lib-commonjs/utils/useComboboxBaseState.js CHANGED Viewed

@@ -125,6 +125,25 @@ const useComboboxBaseState = (props)=>{
         freeform,
         disabled
     ]);
+    // update active option based on change in open state
+    _react.useEffect(()=>{
+        if (open) {
+            // if it is single-select and there is a selected option, start at the selected option
+            if (!multiselect && selectedOptions.length > 0) {
+                const selectedOption = getOptionsMatchingValue((v)=>v === selectedOptions[0]).pop();
+                if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) {
+                    activeDescendantController.focus(selectedOption.id);
+                }
+            }
+        } else {
+            activeDescendantController.blur();
+        }
+    // this should only be run in response to changes in the open state
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        open,
+        activeDescendantController
+    ]);
     // Fallback focus when children are updated in an open popover results in no item being focused
     _react.useEffect(()=>{
         if (open && !disableAutoFocus && !activeDescendantController.active()) {

package/lib-commonjs/utils/useComboboxBaseState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport { SelectionEvents } from './Selection.types';\n\n/*\n @internal\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & {\n children?: React.ReactNode;\n editable?: boolean;\n disabled?: boolean;\n freeform?: boolean;\n activeDescendantController: ActiveDescendantImperativeRef;\n },\n): ComboboxBaseState => {\n 'use no memo';\n\n const {\n appearance = 'outline',\n disableAutoFocus,\n children,\n clearable = false,\n editable = false,\n inlinePopup = false,\n mountNode = undefined,\n multiselect,\n onOpenChange,\n size = 'medium',\n activeDescendantController,\n freeform = false,\n disabled = false,\n onActiveOptionChange = null,\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionsMatchingValue } = optionCollection;\n\n const { getOptionById } = optionCollection;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n // Keeping some kind of backwards compatible functionality here\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_activeOption = getActiveOption();\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_setActiveOption = React.useCallback(\n (option: OptionValue \| undefined \| ((prev: OptionValue \| undefined) => OptionValue \| undefined)) => {\n let nextOption: OptionValue \| undefined = undefined;\n if (typeof option === 'function') {\n const activeOption = getActiveOption();\n nextOption = option(activeOption);\n }\n\n if (nextOption) {\n activeDescendantController.focus(nextOption.id);\n } else {\n activeDescendantController.blur();\n }\n },\n [activeDescendantController, getActiveOption],\n );\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n // when the trigger is focused - the listbox should but hidden until the open state is changed\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n // reset any typed value when an option is selected\n const selectOption = React.useCallback(\n (ev: SelectionEvents, option: OptionValue) => {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n baseSelectOption(ev, option);\n });\n },\n [setValue, baseSelectOption],\n );\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n if (disabled) {\n return;\n }\n onOpenChange?.(event, { open: newState });\n ReactDOM.unstable_batchedUpdates(() => {\n if (!newState && !freeform) {\n setValue(undefined);\n }\n setOpenState(newState);\n });\n },\n [onOpenChange, setOpenState, setValue, freeform, disabled],\n );\n\n // Fallback focus when children are updated in an open popover results in no item being focused\n React.useEffect(() => {\n if (open && !disableAutoFocus && !activeDescendantController.active()) {\n activeDescendantController.first();\n }\n // this should only be run in response to changes in the open state or children\n }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n const nextOption = optionCollection.getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n return {\n ...optionCollection,\n freeform,\n disabled,\n selectOption,\n clearSelection,\n selectedOptions,\n activeOption: UNSAFE_activeOption,\n appearance,\n clearable,\n focusVisible,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n hasFocus,\n setActiveOption: UNSAFE_setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n multiselect,\n onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (!multiselect) {\n setOpen(e, false);\n }\n }),\n onActiveDescendantChange,\n };\n};\n"],"names":["useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","useOptionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","React","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","useFirstMount","controllableValue","setValue","useControllableState","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","useSelection","ev","ReactDOM","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","first","onActiveDescendantChange","useEventCallback","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport { SelectionEvents } from './Selection.types';\n\n/*\n @internal\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & {\n children?: React.ReactNode;\n editable?: boolean;\n disabled?: boolean;\n freeform?: boolean;\n activeDescendantController: ActiveDescendantImperativeRef;\n },\n): ComboboxBaseState => {\n 'use no memo';\n\n const {\n appearance = 'outline',\n disableAutoFocus,\n children,\n clearable = false,\n editable = false,\n inlinePopup = false,\n mountNode = undefined,\n multiselect,\n onOpenChange,\n size = 'medium',\n activeDescendantController,\n freeform = false,\n disabled = false,\n onActiveOptionChange = null,\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionsMatchingValue } = optionCollection;\n\n const { getOptionById } = optionCollection;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n // Keeping some kind of backwards compatible functionality here\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_activeOption = getActiveOption();\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_setActiveOption = React.useCallback(\n (option: OptionValue \| undefined \| ((prev: OptionValue \| undefined) => OptionValue \| undefined)) => {\n let nextOption: OptionValue \| undefined = undefined;\n if (typeof option === 'function') {\n const activeOption = getActiveOption();\n nextOption = option(activeOption);\n }\n\n if (nextOption) {\n activeDescendantController.focus(nextOption.id);\n } else {\n activeDescendantController.blur();\n }\n },\n [activeDescendantController, getActiveOption],\n );\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n // when the trigger is focused - the listbox should but hidden until the open state is changed\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n // reset any typed value when an option is selected\n const selectOption = React.useCallback(\n (ev: SelectionEvents, option: OptionValue) => {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n baseSelectOption(ev, option);\n });\n },\n [setValue, baseSelectOption],\n );\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n if (disabled) {\n return;\n }\n onOpenChange?.(event, { open: newState });\n ReactDOM.unstable_batchedUpdates(() => {\n if (!newState && !freeform) {\n setValue(undefined);\n }\n setOpenState(newState);\n });\n },\n [onOpenChange, setOpenState, setValue, freeform, disabled],\n );\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n } else {\n activeDescendantController.blur();\n }\n // this should only be run in response to changes in the open state\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, activeDescendantController]);\n\n // Fallback focus when children are updated in an open popover results in no item being focused\n React.useEffect(() => {\n if (open && !disableAutoFocus && !activeDescendantController.active()) {\n activeDescendantController.first();\n }\n // this should only be run in response to changes in the open state or children\n }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n const nextOption = optionCollection.getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n return {\n ...optionCollection,\n freeform,\n disabled,\n selectOption,\n clearSelection,\n selectedOptions,\n activeOption: UNSAFE_activeOption,\n appearance,\n clearable,\n focusVisible,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n hasFocus,\n setActiveOption: UNSAFE_setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n multiselect,\n onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (!multiselect) {\n setOpen(e, false);\n }\n }),\n onActiveDescendantChange,\n };\n};\n"],"names":["useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","useOptionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","React","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","useFirstMount","controllableValue","setValue","useControllableState","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","useSelection","ev","ReactDOM","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","useEventCallback","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;oEACG;gCAC4C;qCAElC;8BAEP;AAQtB,MAAMA,uBAAuB,CAClCC;IAQA;IAEA,MAAM,EACJC,aAAa,SAAS,EACtBC,gBAAgB,EAChBC,QAAQ,EACRC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,YAAYC,SAAS,EACrBC,WAAW,EACXC,YAAY,EACZC,OAAO,QAAQ,EACfC,0BAA0B,EAC1BC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,uBAAuB,IAAI,EAC5B,GAAGf;IAEJ,MAAMgB,mBAAmBC,IAAAA,wCAAAA;IACzB,MAAM,EAAEC,uBAAuB,EAAE,GAAGF;IAEpC,MAAM,EAAEG,aAAa,EAAE,GAAGH;IAC1B,MAAMI,kBAAkBC,OAAMC,WAAW,CAAC;QACxC,MAAMC,iBAAiBX,2BAA2BY,MAAM;QACxD,OAAOD,iBAAiBJ,cAAcI,kBAAkBf;IAC1D,GAAG;QAACI;QAA4BO;KAAc;IAE9C,+DAA+D;IAC/D,gEAAgE;IAChE,MAAMM,sBAAsBL;IAC5B,gEAAgE;IAChE,MAAMM,yBAAyBL,OAAMC,WAAW,CAC9C,CAACK;QACC,IAAIC,aAAsCpB;QAC1C,IAAI,OAAOmB,WAAW,YAAY;YAChC,MAAME,eAAeT;YACrBQ,aAAaD,OAAOE;QACtB;QAEA,IAAID,YAAY;YACdhB,2BAA2BkB,KAAK,CAACF,WAAWG,EAAE;QAChD,OAAO;YACLnB,2BAA2BoB,IAAI;QACjC;IACF,GACA;QAACpB;QAA4BQ;KAAgB;IAG/C,uDAAuD;IACvD,yFAAyF;IACzF,MAAM,CAACa,cAAcC,gBAAgB,GAAGb,OAAMc,QAAQ,CAAC;IAEvD,gEAAgE;IAChE,8FAA8F;IAC9F,MAAM,CAACC,UAAUC,YAAY,GAAGhB,OAAMc,QAAQ,CAAC;IAE/C,MAAMG,iBAAiBjB,OAAMkB,MAAM,CAAC;IAEpC,+EAA+E;IAC/E,MAAMC,eAAeC,IAAAA,6BAAAA;IACrB,MAAM,CAACC,mBAAmBC,SAAS,GAAGC,IAAAA,oCAAAA,EAAqB;QACzDC,OAAO7C,MAAM8C,KAAK;QAClBC,cAAcvC;IAChB;IAEA,MAAM,EAAEwC,eAAe,EAAEC,cAAcC,gBAAgB,EAAEC,cAAc,EAAE,GAAGC,IAAAA,0BAAAA,EAAapD;IAEzF,mDAAmD;IACnD,MAAMiD,eAAe5B,OAAMC,WAAW,CACpC,CAAC+B,IAAqB1B;QACpB2B,UAASC,uBAAuB,CAAC;YAC/BZ,SAASnC;YACT0C,iBAAiBG,IAAI1B;QACvB;IACF,GACA;QAACgB;QAAUO;KAAiB;IAG9B,MAAMJ,QAAQzB,OAAMmC,OAAO,CAAC;QAC1B,sEAAsE;QACtE,IAAId,sBAAsBlC,WAAW;YACnC,OAAOkC;QACT;QAEA,6DAA6D;QAC7D,IAAIF,gBAAgBxC,MAAMyD,YAAY,KAAKjD,WAAW;YACpD,OAAOR,MAAMyD,YAAY;QAC3B;QAEA,MAAMC,sBAAsBxC,wBAAwByC,CAAAA;YAClD,OAAOX,gBAAgBY,QAAQ,CAACD;QAClC,GAAGE,GAAG,CAAClC,CAAAA,SAAUA,OAAOmC,IAAI;QAE5B,IAAIrD,aAAa;YACf,oFAAoF;YACpF,OAAOJ,WAAW,KAAKqD,oBAAoBK,IAAI,CAAC;QAClD;QAEA,OAAOL,mBAAmB,CAAC,EAAE;IAE7B,kDAAkD;IAClD,0EAA0E;IAC1E,4CAA4C;IAC5C,uDAAuD;IACzD,GAAG;QAAChB;QAAmBrC;QAAUa;QAAyBT;QAAaT,MAAMyD,YAAY;QAAET;KAAgB;IAE3G,6DAA6D;IAC7D,MAAM,CAACgB,MAAMC,aAAa,GAAGrB,IAAAA,oCAAAA,EAAqB;QAChDC,OAAO7C,MAAMgE,IAAI;QACjBE,cAAclE,MAAMmE,WAAW;QAC/BpB,cAAc;IAChB;IAEA,MAAMqB,UAAU/C,OAAMC,WAAW,CAC/B,CAAC+C,OAA+BC;QAC9B,IAAIxD,UAAU;YACZ;QACF;QACAJ,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAe2D,OAAO;YAAEL,MAAMM;QAAS;QACvChB,UAASC,uBAAuB,CAAC;YAC/B,IAAI,CAACe,YAAY,CAACzD,UAAU;gBAC1B8B,SAASnC;YACX;YACAyD,aAAaK;QACf;IACF,GACA;QAAC5D;QAAcuD;QAActB;QAAU9B;QAAUC;KAAS;IAG5D,qDAAqD;IACrDO,OAAMkD,SAAS,CAAC;QACd,IAAIP,MAAM;YACR,sFAAsF;YACtF,IAAI,CAACvD,eAAeuC,gBAAgBwB,MAAM,GAAG,GAAG;gBAC9C,MAAMC,iBAAiBvD,wBAAwBwD,CAAAA,IAAKA,MAAM1B,eAAe,CAAC,EAAE,EAAE2B,GAAG;gBACjF,IAAIF,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgB1C,EAAE,EAAE;oBACtBnB,2BAA2BkB,KAAK,CAAC2C,eAAe1C,EAAE;gBACpD;YACF;QACF,OAAO;YACLnB,2BAA2BoB,IAAI;QACjC;IACA,mEAAmE;IACnE,uDAAuD;IACzD,GAAG;QAACgC;QAAMpD;KAA2B;IAErC,+FAA+F;IAC/FS,OAAMkD,SAAS,CAAC;QACd,IAAIP,QAAQ,CAAC9D,oBAAoB,CAACU,2BAA2BY,MAAM,IAAI;YACrEZ,2BAA2BgE,KAAK;QAClC;IACA,+EAA+E;IACjF,GAAG;QAACZ;QAAM7D;QAAUD;QAAkBU;QAA4BO;KAAc;IAEhF,MAAM0D,2BAA2BC,IAAAA,gCAAAA,EAAiB,CAACT;QACjD,MAAMU,iBAAiBV,MAAMW,MAAM,CAACC,UAAU,GAAGjE,iBAAiBG,aAAa,CAACkD,MAAMW,MAAM,CAACC,UAAU,IAAI;QAC3G,MAAMrD,aAAaZ,iBAAiBG,aAAa,CAACkD,MAAMW,MAAM,CAACjD,EAAE;QACjEhB,yBAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAuBsD,OAAO;YAAEA;YAAOa,MAAM;YAAUH;YAAgBnD;QAAW;IACpF;IAEA,OAAO;QACL,GAAGZ,gBAAgB;QACnBH;QACAC;QACAmC;QACAE;QACAH;QACAnB,cAAcJ;QACdxB;QACAG;QACA6B;QACAK;QACAhC;QACAC;QACAyD;QACA5B;QACA+C,iBAAiBzD;QACjBQ;QACAG;QACA+B;QACAzB;QACAhC;QACAmC;QACArC;QACA2E,eAAeN,IAAAA,gCAAAA,EAAiB,CAACO;YAC/B,IAAI,CAAC5E,aAAa;gBAChB2D,QAAQiB,GAAG;YACb;QACF;QACAR;IACF;AACF"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.13.2",
+  "version": "9.13.4",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,16 +35,16 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "^9.13.2",
+    "@fluentui/react-aria": "^9.13.3",
     "@fluentui/keyboard-keys": "^9.0.7",
     "@fluentui/react-context-selector": "^9.1.65",
-    "@fluentui/react-field": "^9.1.71",
+    "@fluentui/react-field": "^9.1.73",
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.0.42",
-    "@fluentui/react-portal": "^9.4.31",
-    "@fluentui/react-positioning": "^9.15.6",
+    "@fluentui/react-portal": "^9.4.32",
+    "@fluentui/react-positioning": "^9.15.7",
     "@fluentui/react-shared-contexts": "^9.20.0",
-    "@fluentui/react-tabster": "^9.22.3",
+    "@fluentui/react-tabster": "^9.22.4",
     "@fluentui/react-theme": "^9.1.19",
     "@fluentui/react-utilities": "^9.18.13",
     "@griffel/react": "^1.5.22",