@fluentui/react-combobox 9.9.4 → 9.9.6

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Mon, 25 Mar 2024 11:09:55 GMT and should not be manually modified.
+This log was last generated on Thu, 04 Apr 2024 12:06:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.9.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.9.6)
+
+Thu, 04 Apr 2024 12:06:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.9.5..@fluentui/react-combobox_v9.9.6)
+
+### Patches
+
+- chore: move freeform and disabled to ComboboxBase types ([PR #30947](https://github.com/microsoft/fluentui/pull/30947) by bernardo.sunderhus@gmail.com)
+
+## [9.9.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.9.5)
+
+Tue, 02 Apr 2024 09:48:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.9.4..@fluentui/react-combobox_v9.9.5)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.10.3 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.57 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-field to v9.1.60 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-portal to v9.4.19 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-positioning to v9.14.3 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-tabster to v9.19.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-utilities to v9.18.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+
 ## [9.9.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.9.4)
 
-Mon, 25 Mar 2024 11:09:55 GMT 
+Mon, 25 Mar 2024 11:12:13 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.9.3..@fluentui/react-combobox_v9.9.4)
 
 ### Patches

package/dist/index.d.ts

@@ -91,12 +91,14 @@ declare type ComboboxBaseProps = SelectionProps & Pick<PortalProps, 'mountNode'>
      * Use this with `onOptionSelect` to directly control the displayed value string
      */
     value?: string;
+    freeform?: boolean;
+    disabled?: boolean;
 };
 
 /**
  * State used in rendering Combobox
  */
-declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> & OptionCollectionState & SelectionState & {
+declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size' | 'freeform' | 'disabled'>> & Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> & OptionCollectionState & SelectionState & {
     /**
      * @deprecated - no longer used internally
      */
@@ -156,7 +158,6 @@ export declare type ComboboxOpenEvents = ComboboxBaseOpenEvents;
  * Combobox Props
  */
 export declare type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> & ComboboxBaseProps & {
-    freeform?: boolean;
     children?: React_2.ReactNode;
 };
 

package/lib/components/Combobox/Combobox.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /* The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The dropdown clear icon */\n  clearIcon?: Slot<'span'>;\n\n  /* The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    /*\n     * Whether the ComboBox allows freeform user input, rather than restricting to the provided options.\n     */\n    freeform?: boolean;\n\n    /*\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> &\n  ComboboxBaseState & {\n    showClearIcon?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /* The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The dropdown clear icon */\n  clearIcon?: Slot<'span'>;\n\n  /* The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    /*\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> &\n  ComboboxBaseState & {\n    showClearIcon?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/Combobox/useCombobox.js

@@ -33,9 +33,9 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         editable: true,
         activeDescendantController
     });
-    const { clearable, clearSelection, multiselect, open, selectedOptions, selectOption, setOpen, setValue, value, hasFocus } = baseState;
+    const { clearable, clearSelection, multiselect, open, selectedOptions, value, hasFocus } = baseState;
     const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
-    const { disabled, freeform, inlinePopup } = props;
+    const { freeform, inlinePopup } = props;
     const comboId = useId('combobox-');
     const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
         props,
@@ -45,20 +45,6 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
             'size'
         ]
     });
-    // reset any typed value when an option is selected
-    baseState.selectOption = (ev, option)=>{
-        setValue(undefined);
-        selectOption(ev, option);
-    };
-    baseState.setOpen = (ev, newState)=>{
-        if (disabled) {
-            return;
-        }
-        if (!newState && !freeform) {
-            setValue(undefined);
-        }
-        setOpen(ev, newState);
-    };
     const triggerRef = React.useRef(null);
     const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {
         state: baseState,

package/lib/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n  const baseState = useComboboxBaseState({ ...props, editable: true, activeDescendantController });\n\n  const {\n    clearable,\n    clearSelection,\n    multiselect,\n    open,\n    selectedOptions,\n    selectOption,\n    setOpen,\n    setValue,\n    value,\n    hasFocus,\n  } = baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { disabled, freeform, inlinePopup } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearIcon: slot.optional(props.clearIcon, {\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: <DismissIcon />,\n      },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    showClearIcon,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n      event.preventDefault();\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  const onClearIconMouseDown = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      ev.preventDefault();\n    }),\n  );\n  const onClearIconClick = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      clearSelection(ev);\n    }),\n  );\n\n  if (state.clearIcon) {\n    state.clearIcon.onMouseDown = onClearIconMouseDown;\n    state.clearIcon.onClick = onClearIconClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearIcon = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["React","useActiveDescendant","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","optionClassNames","useCombobox_unstable","props","ref","state","supportsLabelFor","supportsRequired","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","selectOption","setOpen","setValue","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disabled","freeform","inlinePopup","comboId","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","id","rootSlot","always","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","event","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
+{"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n  const baseState = useComboboxBaseState({ ...props, editable: true, activeDescendantController });\n\n  const { clearable, clearSelection, multiselect, open, selectedOptions, value, hasFocus } = baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { freeform, inlinePopup } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearIcon: slot.optional(props.clearIcon, {\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: <DismissIcon />,\n      },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    showClearIcon,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n      event.preventDefault();\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  const onClearIconMouseDown = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      ev.preventDefault();\n    }),\n  );\n  const onClearIconClick = useEventCallback(\n    mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n      clearSelection(ev);\n    }),\n  );\n\n  if (state.clearIcon) {\n    state.clearIcon.onMouseDown = onClearIconMouseDown;\n    state.clearIcon.onClick = onClearIconClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearIcon = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["React","useActiveDescendant","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","optionClassNames","useCombobox_unstable","props","ref","state","supportsLabelFor","supportsRequired","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","value","hasFocus","comboboxPopupRef","comboboxTargetRef","freeform","inlinePopup","comboId","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","id","undefined","rootSlot","always","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","event","preventDefault","setOpen","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\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  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     * 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  };\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"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\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  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     * 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     * Whether the ComboBox allows freeform user input, rather than restricting to the provided options.\n     */\n    freeform?: boolean;\n    disabled?: boolean;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<\n  Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size' | 'freeform' | 'disabled'>\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  };\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"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/utils/useComboboxBaseState.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';
 import { useOptionCollection } from '../utils/useOptionCollection';
 import { useSelection } from '../utils/useSelection';
@@ -6,7 +7,7 @@ import { useSelection } from '../utils/useSelection';
  * @internal
  * State shared between Combobox and Dropdown components
  */ export const useComboboxBaseState = (props)=>{
-    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController } = props;
+    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false } = props;
     const optionCollection = useOptionCollection();
     const { getOptionsMatchingValue } = optionCollection;
     const { getOptionById } = optionCollection;
@@ -43,14 +44,23 @@ import { useSelection } from '../utils/useSelection';
     // when the trigger is focused - the listbox should but hidden until the open state is changed
     const [hasFocus, setHasFocus] = React.useState(false);
     const ignoreNextBlur = React.useRef(false);
-    const selectionState = useSelection(props);
-    const { selectedOptions } = selectionState;
     // calculate value based on props, internal value changes, and selected options
     const isFirstMount = useFirstMount();
     const [controllableValue, setValue] = useControllableState({
         state: props.value,
         initialState: undefined
     });
+    const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);
+    // reset any typed value when an option is selected
+    const selectOption = React.useCallback((ev, option)=>{
+        ReactDOM.unstable_batchedUpdates(()=>{
+            setValue(undefined);
+            baseSelectOption(ev, option);
+        });
+    }, [
+        setValue,
+        baseSelectOption
+    ]);
     const value = React.useMemo(()=>{
         // don't compute the value if it is defined through props or setValue,
         if (controllableValue !== undefined) {
@@ -87,13 +97,24 @@ import { useSelection } from '../utils/useSelection';
         initialState: false
     });
     const setOpen = React.useCallback((event, newState)=>{
+        if (disabled) {
+            return;
+        }
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
             open: newState
         });
-        setOpenState(newState);
+        ReactDOM.unstable_batchedUpdates(()=>{
+            if (!newState && !freeform) {
+                setValue(undefined);
+            }
+            setOpenState(newState);
+        });
     }, [
         onOpenChange,
-        setOpenState
+        setOpenState,
+        setValue,
+        freeform,
+        disabled
     ]);
     // update active option based on change in open state
     React.useEffect(()=>{
@@ -129,7 +150,11 @@ import { useSelection } from '../utils/useSelection';
     ]);
     return {
         ...optionCollection,
-        ...selectionState,
+        freeform,
+        disabled,
+        selectOption,
+        clearSelection,
+        selectedOptions,
         activeOption: UNSAFE_activeOption,
         appearance,
         clearable,

package/lib/utils/useComboboxBaseState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { 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';\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    activeDescendantController: ActiveDescendantImperativeRef;\n  },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    clearable = false,\n    editable = false,\n    inlinePopup = false,\n    mountNode = undefined,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n    activeDescendantController,\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  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    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      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state\n  React.useEffect(() => {\n    if (open) {\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 or children\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) {\n      if (!activeDescendantController.active()) {\n        activeDescendantController.first();\n      }\n    }\n    // this should only be run in response to changes in the open state or children\n  }, [open, children, activeDescendantController]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\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  };\n};\n"],"names":["React","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","setActiveOption","onOptionClick","e"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAElG,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE,SAASC,YAAY,QAAQ,wBAAwB;AAGrD;;;CAGC,GACD,OAAO,MAAMC,uBAAuB,CAClCC;IAMA,MAAM,EACJC,aAAa,SAAS,EACtBC,QAAQ,EACRC,YAAY,KAAK,EACjBC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,YAAYC,SAAS,EACrBC,WAAW,EACXC,YAAY,EACZC,OAAO,QAAQ,EACfC,0BAA0B,EAC3B,GAAGX;IAEJ,MAAMY,mBAAmBf;IACzB,MAAM,EAAEgB,uBAAuB,EAAE,GAAGD;IAEpC,MAAM,EAAEE,aAAa,EAAE,GAAGF;IAC1B,MAAMG,kBAAkBtB,MAAMuB,WAAW,CAAC;QACxC,MAAMC,iBAAiBN,2BAA2BO,MAAM;QACxD,OAAOD,iBAAiBH,cAAcG,kBAAkBV;IAC1D,GAAG;QAACI;QAA4BG;KAAc;IAE9C,+DAA+D;IAC/D,gEAAgE;IAChE,MAAMK,sBAAsBJ;IAC5B,gEAAgE;IAChE,MAAMK,yBAAyB3B,MAAMuB,WAAW,CAC9C,CAACK;QACC,IAAIC,aAAsCf;QAC1C,IAAI,OAAOc,WAAW,YAAY;YAChC,MAAME,eAAeR;YACrBO,aAAaD,OAAOE;QACtB;QAEA,IAAID,YAAY;YACdX,2BAA2Ba,KAAK,CAACF,WAAWG,EAAE;QAChD,OAAO;YACLd,2BAA2Be,IAAI;QACjC;IACF,GACA;QAACf;QAA4BI;KAAgB;IAG/C,uDAAuD;IACvD,yFAAyF;IACzF,MAAM,CAACY,cAAcC,gBAAgB,GAAGnC,MAAMoC,QAAQ,CAAC;IAEvD,gEAAgE;IAChE,8FAA8F;IAC9F,MAAM,CAACC,UAAUC,YAAY,GAAGtC,MAAMoC,QAAQ,CAAC;IAE/C,MAAMG,iBAAiBvC,MAAMwC,MAAM,CAAC;IAEpC,MAAMC,iBAAiBpC,aAAaE;IACpC,MAAM,EAAEmC,eAAe,EAAE,GAAGD;IAE5B,+EAA+E;IAC/E,MAAME,eAAexC;IACrB,MAAM,CAACyC,mBAAmBC,SAAS,GAAG5C,qBAAqB;QACzD6C,OAAOvC,MAAMwC,KAAK;QAClBC,cAAclC;IAChB;IAEA,MAAMiC,QAAQ/C,MAAMiD,OAAO,CAAC;QAC1B,sEAAsE;QACtE,IAAIL,sBAAsB9B,WAAW;YACnC,OAAO8B;QACT;QAEA,6DAA6D;QAC7D,IAAID,gBAAgBpC,MAAM2C,YAAY,KAAKpC,WAAW;YACpD,OAAOP,MAAM2C,YAAY;QAC3B;QAEA,MAAMC,sBAAsB/B,wBAAwBgC,CAAAA;YAClD,OAAOV,gBAAgBW,QAAQ,CAACD;QAClC,GAAGE,GAAG,CAAC1B,CAAAA,SAAUA,OAAO2B,IAAI;QAE5B,IAAIxC,aAAa;YACf,oFAAoF;YACpF,OAAOJ,WAAW,KAAKwC,oBAAoBK,IAAI,CAAC;QAClD;QAEA,OAAOL,mBAAmB,CAAC,EAAE;IAE7B,kDAAkD;IAClD,0EAA0E;IAC1E,4CAA4C;IAC5C,uDAAuD;IACzD,GAAG;QAACP;QAAmBjC;QAAUS;QAAyBL;QAAaR,MAAM2C,YAAY;QAAER;KAAgB;IAE3G,6DAA6D;IAC7D,MAAM,CAACe,MAAMC,aAAa,GAAGzD,qBAAqB;QAChD6C,OAAOvC,MAAMkD,IAAI;QACjBE,cAAcpD,MAAMqD,WAAW;QAC/BZ,cAAc;IAChB;IAEA,MAAMa,UAAU7D,MAAMuB,WAAW,CAC/B,CAACuC,OAA+BC;QAC9B/C,yBAAAA,mCAAAA,aAAe8C,OAAO;YAAEL,MAAMM;QAAS;QACvCL,aAAaK;IACf,GACA;QAAC/C;QAAc0C;KAAa;IAG9B,qDAAqD;IACrD1D,MAAMgE,SAAS,CAAC;QACd,IAAIP,MAAM;YACR,sFAAsF;YACtF,IAAI,CAAC1C,eAAe2B,gBAAgBuB,MAAM,GAAG,GAAG;gBAC9C,MAAMC,iBAAiB9C,wBAAwB+C,CAAAA,IAAKA,MAAMzB,eAAe,CAAC,EAAE,EAAE0B,GAAG;gBACjF,IAAIF,2BAAAA,qCAAAA,eAAgBlC,EAAE,EAAE;oBACtBd,2BAA2Ba,KAAK,CAACmC,eAAelC,EAAE;gBACpD;YACF;QACF,OAAO;YACLd,2BAA2Be,IAAI;QACjC;IACA,+EAA+E;IAC/E,uDAAuD;IACzD,GAAG;QAACwB;QAAMvC;KAA2B;IAErC,+FAA+F;IAC/FlB,MAAMgE,SAAS,CAAC;QACd,IAAIP,MAAM;YACR,IAAI,CAACvC,2BAA2BO,MAAM,IAAI;gBACxCP,2BAA2BmD,KAAK;YAClC;QACF;IACA,+EAA+E;IACjF,GAAG;QAACZ;QAAMhD;QAAUS;KAA2B;IAE/C,OAAO;QACL,GAAGC,gBAAgB;QACnB,GAAGsB,cAAc;QACjBX,cAAcJ;QACdlB;QACAE;QACAwB;QACAK;QACA3B;QACAC;QACA4C;QACApB;QACAiC,iBAAiB3C;QACjBQ;QACAG;QACAuB;QACAhB;QACA5B;QACA8B;QACAhC;QACAwD,eAAerE,iBAAiB,CAACsE;YAC/B,IAAI,CAACzD,aAAa;gBAChB8C,QAAQW,GAAG;YACb;QACF;IACF;AACF,EAAE"}
+{"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 { 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    activeDescendantController: ActiveDescendantImperativeRef;\n  },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\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  } = 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 or children\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) {\n      if (!activeDescendantController.active()) {\n        activeDescendantController.first();\n      }\n    }\n    // this should only be run in response to changes in the open state or children\n  }, [open, children, activeDescendantController]);\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  };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","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","setActiveOption","onOptionClick","e"],"mappings":"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"}

package/lib-commonjs/components/Combobox/useCombobox.js

@@ -36,9 +36,9 @@ const useCombobox_unstable = (props, ref)=>{
         editable: true,
         activeDescendantController
     });
-    const { clearable, clearSelection, multiselect, open, selectedOptions, selectOption, setOpen, setValue, value, hasFocus } = baseState;
+    const { clearable, clearSelection, multiselect, open, selectedOptions, value, hasFocus } = baseState;
     const [comboboxPopupRef, comboboxTargetRef] = (0, _useComboboxPositioning.useComboboxPositioning)(props);
-    const { disabled, freeform, inlinePopup } = props;
+    const { freeform, inlinePopup } = props;
     const comboId = (0, _reactutilities.useId)('combobox-');
     const { primary: triggerNativeProps, root: rootNativeProps } = (0, _reactutilities.getPartitionedNativeProps)({
         props,
@@ -48,20 +48,6 @@ const useCombobox_unstable = (props, ref)=>{
             'size'
         ]
     });
-    // reset any typed value when an option is selected
-    baseState.selectOption = (ev, option)=>{
-        setValue(undefined);
-        selectOption(ev, option);
-    };
-    baseState.setOpen = (ev, newState)=>{
-        if (disabled) {
-            return;
-        }
-        if (!newState && !freeform) {
-            setValue(undefined);
-        }
-        setOpen(ev, newState);
-    };
     const triggerRef = _react.useRef(null);
     const listbox = (0, _useListboxSlot.useListboxSlot)(props.listbox, (0, _reactutilities.useMergedRefs)(comboboxPopupRef, activeDescendantListboxRef), {
         state: baseState,

package/lib-commonjs/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.js"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */ export const useCombobox_unstable = (props, ref)=>{\n    var _state_clearIcon, _state_clearIcon1;\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsRequired: true,\n        supportsSize: true\n    });\n    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = useActiveDescendant({\n        matchOption: (el)=>el.classList.contains(optionClassNames.root)\n    });\n    const baseState = useComboboxBaseState({\n        ...props,\n        editable: true,\n        activeDescendantController\n    });\n    const { clearable, clearSelection, multiselect, open, selectedOptions, selectOption, setOpen, setValue, value, hasFocus } = baseState;\n    const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n    const { disabled, freeform, inlinePopup } = props;\n    const comboId = useId('combobox-');\n    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'input',\n        excludedPropNames: [\n            'children',\n            'size'\n        ]\n    });\n    // reset any typed value when an option is selected\n    baseState.selectOption = (ev, option)=>{\n        setValue(undefined);\n        selectOption(ev, option);\n    };\n    baseState.setOpen = (ev, newState)=>{\n        if (disabled) {\n            return;\n        }\n        if (!newState && !freeform) {\n            setValue(undefined);\n        }\n        setOpen(ev, newState);\n    };\n    const triggerRef = React.useRef(null);\n    const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n        state: baseState,\n        triggerRef,\n        defaultProps: {\n            children: props.children\n        }\n    });\n    var _props_input;\n    const triggerSlot = useInputTriggerSlot((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n        state: baseState,\n        freeform,\n        defaultProps: {\n            type: 'text',\n            value: value !== null && value !== void 0 ? value : '',\n            'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            ...triggerNativeProps\n        },\n        activeDescendantController\n    });\n    const rootSlot = slot.always(props.root, {\n        defaultProps: {\n            'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            ...rootNativeProps\n        },\n        elementType: 'div'\n    });\n    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n    const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;\n    const state = {\n        components: {\n            root: 'div',\n            input: 'input',\n            expandIcon: 'span',\n            listbox: Listbox,\n            clearIcon: 'span'\n        },\n        root: rootSlot,\n        input: triggerSlot,\n        listbox: open || hasFocus ? listbox : undefined,\n        clearIcon: slot.optional(props.clearIcon, {\n            defaultProps: {\n                'aria-hidden': 'true',\n                children: /*#__PURE__*/ React.createElement(DismissIcon, null)\n            },\n            elementType: 'span',\n            renderByDefault: true\n        }),\n        expandIcon: slot.optional(props.expandIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                'aria-expanded': open,\n                children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),\n                role: 'button'\n            },\n            elementType: 'span'\n        }),\n        showClearIcon,\n        activeDescendantController,\n        ...baseState\n    };\n    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n    const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, (event)=>{\n        var _triggerRef_current;\n        event.preventDefault();\n        state.setOpen(event, !state.open);\n        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n    }));\n    if (state.expandIcon) {\n        state.expandIcon.onMouseDown = onExpandIconMouseDown;\n        // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n        // using the following steps:\n        // 1. If there is an aria-label, it is \"Open [aria-label]\"\n        // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n        // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n        // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n        const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n        const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n        if (!hasExpandLabel) {\n            if (props['aria-labelledby']) {\n                var _state_expandIcon_id;\n                const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;\n                const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n                state.expandIcon['aria-label'] = defaultOpenString;\n                state.expandIcon.id = chevronId;\n                state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n            } else if (props['aria-label']) {\n                state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n            } else {\n                state.expandIcon['aria-label'] = defaultOpenString;\n            }\n        }\n    }\n    const onClearIconMouseDown = useEventCallback(mergeCallbacks((_state_clearIcon = state.clearIcon) === null || _state_clearIcon === void 0 ? void 0 : _state_clearIcon.onMouseDown, (ev)=>{\n        ev.preventDefault();\n    }));\n    const onClearIconClick = useEventCallback(mergeCallbacks((_state_clearIcon1 = state.clearIcon) === null || _state_clearIcon1 === void 0 ? void 0 : _state_clearIcon1.onClick, (ev)=>{\n        clearSelection(ev);\n    }));\n    if (state.clearIcon) {\n        state.clearIcon.onMouseDown = onClearIconMouseDown;\n        state.clearIcon.onClick = onClearIconClick;\n    }\n    // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n    if (multiselect) {\n        state.clearIcon = undefined;\n    }\n    if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n        React.useEffect(()=>{\n            if (clearable && multiselect) {\n                // eslint-disable-next-line no-console\n                console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n            }\n        }, [\n            clearable,\n            multiselect\n        ]);\n    }\n    return state;\n};\n"],"names":["useCombobox_unstable","props","ref","_state_clearIcon","_state_clearIcon1","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","baseState","useComboboxBaseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","selectOption","setOpen","setValue","value","hasFocus","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","disabled","freeform","inlinePopup","comboId","useId","primary","triggerNativeProps","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","React","useRef","listbox","useListboxSlot","useMergedRefs","state","defaultProps","children","_props_input","triggerSlot","useInputTriggerSlot","input","type","id","rootSlot","slot","always","elementType","showClearIcon","length","components","expandIcon","Listbox","clearIcon","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","useEventCallback","mergeCallbacks","event","_triggerRef_current","preventDefault","current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy","onClearIconMouseDown","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
+{"version":3,"sources":["useCombobox.js"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */ export const useCombobox_unstable = (props, ref)=>{\n    var _state_clearIcon, _state_clearIcon1;\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsRequired: true,\n        supportsSize: true\n    });\n    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = useActiveDescendant({\n        matchOption: (el)=>el.classList.contains(optionClassNames.root)\n    });\n    const baseState = useComboboxBaseState({\n        ...props,\n        editable: true,\n        activeDescendantController\n    });\n    const { clearable, clearSelection, multiselect, open, selectedOptions, value, hasFocus } = baseState;\n    const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n    const { freeform, inlinePopup } = props;\n    const comboId = useId('combobox-');\n    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'input',\n        excludedPropNames: [\n            'children',\n            'size'\n        ]\n    });\n    const triggerRef = React.useRef(null);\n    const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n        state: baseState,\n        triggerRef,\n        defaultProps: {\n            children: props.children\n        }\n    });\n    var _props_input;\n    const triggerSlot = useInputTriggerSlot((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n        state: baseState,\n        freeform,\n        defaultProps: {\n            type: 'text',\n            value: value !== null && value !== void 0 ? value : '',\n            'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            ...triggerNativeProps\n        },\n        activeDescendantController\n    });\n    const rootSlot = slot.always(props.root, {\n        defaultProps: {\n            'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            ...rootNativeProps\n        },\n        elementType: 'div'\n    });\n    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n    const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;\n    const state = {\n        components: {\n            root: 'div',\n            input: 'input',\n            expandIcon: 'span',\n            listbox: Listbox,\n            clearIcon: 'span'\n        },\n        root: rootSlot,\n        input: triggerSlot,\n        listbox: open || hasFocus ? listbox : undefined,\n        clearIcon: slot.optional(props.clearIcon, {\n            defaultProps: {\n                'aria-hidden': 'true',\n                children: /*#__PURE__*/ React.createElement(DismissIcon, null)\n            },\n            elementType: 'span',\n            renderByDefault: true\n        }),\n        expandIcon: slot.optional(props.expandIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                'aria-expanded': open,\n                children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),\n                role: 'button'\n            },\n            elementType: 'span'\n        }),\n        showClearIcon,\n        activeDescendantController,\n        ...baseState\n    };\n    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n    const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, (event)=>{\n        var _triggerRef_current;\n        event.preventDefault();\n        state.setOpen(event, !state.open);\n        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n    }));\n    if (state.expandIcon) {\n        state.expandIcon.onMouseDown = onExpandIconMouseDown;\n        // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n        // using the following steps:\n        // 1. If there is an aria-label, it is \"Open [aria-label]\"\n        // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n        // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n        // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n        const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n        const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n        if (!hasExpandLabel) {\n            if (props['aria-labelledby']) {\n                var _state_expandIcon_id;\n                const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;\n                const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n                state.expandIcon['aria-label'] = defaultOpenString;\n                state.expandIcon.id = chevronId;\n                state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n            } else if (props['aria-label']) {\n                state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n            } else {\n                state.expandIcon['aria-label'] = defaultOpenString;\n            }\n        }\n    }\n    const onClearIconMouseDown = useEventCallback(mergeCallbacks((_state_clearIcon = state.clearIcon) === null || _state_clearIcon === void 0 ? void 0 : _state_clearIcon.onMouseDown, (ev)=>{\n        ev.preventDefault();\n    }));\n    const onClearIconClick = useEventCallback(mergeCallbacks((_state_clearIcon1 = state.clearIcon) === null || _state_clearIcon1 === void 0 ? void 0 : _state_clearIcon1.onClick, (ev)=>{\n        clearSelection(ev);\n    }));\n    if (state.clearIcon) {\n        state.clearIcon.onMouseDown = onClearIconMouseDown;\n        state.clearIcon.onClick = onClearIconClick;\n    }\n    // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n    if (multiselect) {\n        state.clearIcon = undefined;\n    }\n    if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n        React.useEffect(()=>{\n            if (clearable && multiselect) {\n                // eslint-disable-next-line no-console\n                console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n            }\n        }, [\n            clearable,\n            multiselect\n        ]);\n    }\n    return state;\n};\n"],"names":["useCombobox_unstable","props","ref","_state_clearIcon","_state_clearIcon1","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","useActiveDescendant","matchOption","el","classList","contains","optionClassNames","root","baseState","useComboboxBaseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","value","hasFocus","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","freeform","inlinePopup","comboId","useId","primary","triggerNativeProps","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","triggerRef","React","useRef","listbox","useListboxSlot","useMergedRefs","state","defaultProps","children","_props_input","triggerSlot","useInputTriggerSlot","input","type","id","undefined","rootSlot","slot","always","elementType","showClearIcon","length","components","expandIcon","Listbox","clearIcon","optional","createElement","DismissIcon","renderByDefault","ChevronDownIcon","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","useEventCallback","mergeCallbacks","event","_triggerRef_current","preventDefault","setOpen","current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}

package/lib-commonjs/utils/useComboboxBaseState.js

@@ -10,11 +10,12 @@ Object.defineProperty(exports, "useComboboxBaseState", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactdom = /*#__PURE__*/ _interop_require_wildcard._(require("react-dom"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _useOptionCollection = require("../utils/useOptionCollection");
 const _useSelection = require("../utils/useSelection");
 const useComboboxBaseState = (props)=>{
-    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController } = props;
+    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false } = props;
     const optionCollection = (0, _useOptionCollection.useOptionCollection)();
     const { getOptionsMatchingValue } = optionCollection;
     const { getOptionById } = optionCollection;
@@ -51,14 +52,23 @@ const useComboboxBaseState = (props)=>{
     // when the trigger is focused - the listbox should but hidden until the open state is changed
     const [hasFocus, setHasFocus] = _react.useState(false);
     const ignoreNextBlur = _react.useRef(false);
-    const selectionState = (0, _useSelection.useSelection)(props);
-    const { selectedOptions } = selectionState;
     // calculate value based on props, internal value changes, and selected options
     const isFirstMount = (0, _reactutilities.useFirstMount)();
     const [controllableValue, setValue] = (0, _reactutilities.useControllableState)({
         state: props.value,
         initialState: undefined
     });
+    const { selectedOptions, selectOption: baseSelectOption, clearSelection } = (0, _useSelection.useSelection)(props);
+    // reset any typed value when an option is selected
+    const selectOption = _react.useCallback((ev, option)=>{
+        _reactdom.unstable_batchedUpdates(()=>{
+            setValue(undefined);
+            baseSelectOption(ev, option);
+        });
+    }, [
+        setValue,
+        baseSelectOption
+    ]);
     const value = _react.useMemo(()=>{
         // don't compute the value if it is defined through props or setValue,
         if (controllableValue !== undefined) {
@@ -95,13 +105,24 @@ const useComboboxBaseState = (props)=>{
         initialState: false
     });
     const setOpen = _react.useCallback((event, newState)=>{
+        if (disabled) {
+            return;
+        }
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
             open: newState
         });
-        setOpenState(newState);
+        _reactdom.unstable_batchedUpdates(()=>{
+            if (!newState && !freeform) {
+                setValue(undefined);
+            }
+            setOpenState(newState);
+        });
     }, [
         onOpenChange,
-        setOpenState
+        setOpenState,
+        setValue,
+        freeform,
+        disabled
     ]);
     // update active option based on change in open state
     _react.useEffect(()=>{
@@ -137,7 +158,11 @@ const useComboboxBaseState = (props)=>{
     ]);
     return {
         ...optionCollection,
-        ...selectionState,
+        freeform,
+        disabled,
+        selectOption,
+        clearSelection,
+        selectedOptions,
         activeOption: UNSAFE_activeOption,
         appearance,
         clearable,

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

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxBaseState.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { useSelection } from '../utils/useSelection';\n/**\n * @internal\n * State shared between Combobox and Dropdown components\n */ export const useComboboxBaseState = (props)=>{\n    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController } = props;\n    const optionCollection = useOptionCollection();\n    const { getOptionsMatchingValue } = optionCollection;\n    const { getOptionById } = optionCollection;\n    const getActiveOption = React.useCallback(()=>{\n        const activeOptionId = activeDescendantController.active();\n        return activeOptionId ? getOptionById(activeOptionId) : undefined;\n    }, [\n        activeDescendantController,\n        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((option)=>{\n        let nextOption = undefined;\n        if (typeof option === 'function') {\n            const activeOption = getActiveOption();\n            nextOption = option(activeOption);\n        }\n        if (nextOption) {\n            activeDescendantController.focus(nextOption.id);\n        } else {\n            activeDescendantController.blur();\n        }\n    }, [\n        activeDescendantController,\n        getActiveOption\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    // 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    const ignoreNextBlur = React.useRef(false);\n    const selectionState = useSelection(props);\n    const { selectedOptions } = selectionState;\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    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        // handle defaultValue here, so it is overridden by selection\n        if (isFirstMount && props.defaultValue !== undefined) {\n            return props.defaultValue;\n        }\n        const selectedOptionsText = getOptionsMatchingValue((optionValue)=>{\n            return selectedOptions.includes(optionValue);\n        }).map((option)=>option.text);\n        if (multiselect) {\n            // editable inputs should not display multiple selected options in the input as text\n            return editable ? '' : selectedOptionsText.join(', ');\n        }\n        return selectedOptionsText[0];\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    }, [\n        controllableValue,\n        editable,\n        getOptionsMatchingValue,\n        multiselect,\n        props.defaultValue,\n        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    const setOpen = React.useCallback((event, newState)=>{\n        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {\n            open: newState\n        });\n        setOpenState(newState);\n    }, [\n        onOpenChange,\n        setOpenState\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 === null || selectedOption === void 0 ? void 0 : 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 or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n        open,\n        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) {\n            if (!activeDescendantController.active()) {\n                activeDescendantController.first();\n            }\n        }\n    // this should only be run in response to changes in the open state or children\n    }, [\n        open,\n        children,\n        activeDescendantController\n    ]);\n    return {\n        ...optionCollection,\n        ...selectionState,\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)=>{\n            if (!multiselect) {\n                setOpen(e, false);\n            }\n        })\n    };\n};\n"],"names":["useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","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","selectionState","useSelection","selectedOptions","isFirstMount","useFirstMount","controllableValue","setValue","useControllableState","state","value","initialState","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","setActiveOption","onOptionClick","useEventCallback","e"],"mappings":"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"}
+{"version":3,"sources":["useComboboxBaseState.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { useSelection } from '../utils/useSelection';\n/**\n * @internal\n * State shared between Combobox and Dropdown components\n */ export const useComboboxBaseState = (props)=>{\n    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false } = props;\n    const optionCollection = useOptionCollection();\n    const { getOptionsMatchingValue } = optionCollection;\n    const { getOptionById } = optionCollection;\n    const getActiveOption = React.useCallback(()=>{\n        const activeOptionId = activeDescendantController.active();\n        return activeOptionId ? getOptionById(activeOptionId) : undefined;\n    }, [\n        activeDescendantController,\n        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((option)=>{\n        let nextOption = undefined;\n        if (typeof option === 'function') {\n            const activeOption = getActiveOption();\n            nextOption = option(activeOption);\n        }\n        if (nextOption) {\n            activeDescendantController.focus(nextOption.id);\n        } else {\n            activeDescendantController.blur();\n        }\n    }, [\n        activeDescendantController,\n        getActiveOption\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    // 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    const ignoreNextBlur = React.useRef(false);\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    const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n    // reset any typed value when an option is selected\n    const selectOption = React.useCallback((ev, option)=>{\n        ReactDOM.unstable_batchedUpdates(()=>{\n            setValue(undefined);\n            baseSelectOption(ev, option);\n        });\n    }, [\n        setValue,\n        baseSelectOption\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        // handle defaultValue here, so it is overridden by selection\n        if (isFirstMount && props.defaultValue !== undefined) {\n            return props.defaultValue;\n        }\n        const selectedOptionsText = getOptionsMatchingValue((optionValue)=>{\n            return selectedOptions.includes(optionValue);\n        }).map((option)=>option.text);\n        if (multiselect) {\n            // editable inputs should not display multiple selected options in the input as text\n            return editable ? '' : selectedOptionsText.join(', ');\n        }\n        return selectedOptionsText[0];\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    }, [\n        controllableValue,\n        editable,\n        getOptionsMatchingValue,\n        multiselect,\n        props.defaultValue,\n        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    const setOpen = React.useCallback((event, newState)=>{\n        if (disabled) {\n            return;\n        }\n        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {\n            open: newState\n        });\n        ReactDOM.unstable_batchedUpdates(()=>{\n            if (!newState && !freeform) {\n                setValue(undefined);\n            }\n            setOpenState(newState);\n        });\n    }, [\n        onOpenChange,\n        setOpenState,\n        setValue,\n        freeform,\n        disabled\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 === null || selectedOption === void 0 ? void 0 : 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 or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [\n        open,\n        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) {\n            if (!activeDescendantController.active()) {\n                activeDescendantController.first();\n            }\n        }\n    // this should only be run in response to changes in the open state or children\n    }, [\n        open,\n        children,\n        activeDescendantController\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)=>{\n            if (!multiselect) {\n                setOpen(e, false);\n            }\n        })\n    };\n};\n"],"names":["useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","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","setActiveOption","onOptionClick","useEventCallback","e"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.9.4",
+  "version": "9.9.6",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,18 +33,18 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "^9.10.2",
+    "@fluentui/react-aria": "^9.10.3",
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-context-selector": "^9.1.56",
-    "@fluentui/react-field": "^9.1.59",
+    "@fluentui/react-context-selector": "^9.1.57",
+    "@fluentui/react-field": "^9.1.60",
     "@fluentui/react-icons": "^2.0.224",
-    "@fluentui/react-jsx-runtime": "^9.0.34",
-    "@fluentui/react-portal": "^9.4.18",
-    "@fluentui/react-positioning": "^9.14.2",
-    "@fluentui/react-shared-contexts": "^9.15.2",
-    "@fluentui/react-tabster": "^9.19.5",
+    "@fluentui/react-jsx-runtime": "^9.0.35",
+    "@fluentui/react-portal": "^9.4.19",
+    "@fluentui/react-positioning": "^9.14.3",
+    "@fluentui/react-shared-contexts": "^9.16.0",
+    "@fluentui/react-tabster": "^9.19.6",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.5",
+    "@fluentui/react-utilities": "^9.18.6",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },