@fluentui/react-combobox 9.5.39 → 9.6.0

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Tue, 09 Jan 2024 10:19:07 GMT and should not be manually modified.
+This log was last generated on Tue, 16 Jan 2024 13:07:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.6.0)
+
+Tue, 16 Jan 2024 13:07:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.40..@fluentui/react-combobox_v9.6.0)
+
+### Minor changes
+
+- feat: add "clearable" prop to Combobox & Dropdown ([PR #30033](https://github.com/microsoft/fluentui/pull/30033) by olfedias@microsoft.com)
+- feat: allow typeable space on all comboboxes, not only freeform ([PR #30295](https://github.com/microsoft/fluentui/pull/30295) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.47 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+- Bump @fluentui/react-field to v9.1.48 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.25 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+- Bump @fluentui/react-portal to v9.4.8 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+- Bump @fluentui/react-positioning to v9.12.2 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+- Bump @fluentui/react-tabster to v9.17.1 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
+
+### Patches
+
+- fix: correct version of @types/react-dom peer dep that matches for 16.x ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by mgodbolt@microsoft.com)
+
+## [9.5.40](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.40)
+
+Thu, 11 Jan 2024 09:04:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.39..@fluentui/react-combobox_v9.5.40)
+
+### Patches
+
+- Bump @fluentui/react-positioning to v9.12.1 ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by beachball)
+
 ## [9.5.39](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.39)
 
-Tue, 09 Jan 2024 10:19:07 GMT 
+Tue, 09 Jan 2024 10:21:34 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.38..@fluentui/react-combobox_v9.5.39)
 
 ### Patches

package/dist/index.d.ts

@@ -40,6 +40,10 @@ declare type ComboboxBaseProps = SelectionProps & Pick<PortalProps, 'mountNode'>
      * @default 'outline'
      */
     appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';
+    /**
+     * If set, the combobox will show an icon to clear the current value.
+     */
+    clearable?: boolean;
     /**
      * The default open state when open is uncontrolled
      */
@@ -87,7 +91,7 @@ declare type ComboboxBaseProps = SelectionProps & Pick<PortalProps, 'mountNode'>
 /**
  * State used in rendering Combobox
  */
-declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> & OptionCollectionState & SelectionState & {
+declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> & OptionCollectionState & SelectionState & {
     activeOption?: OptionValue;
     focusVisible: boolean;
     /**
@@ -132,6 +136,7 @@ export declare const ComboboxProvider: Provider<ComboboxContextValue> & FC<Provi
 export declare type ComboboxSlots = {
     root: NonNullable<Slot<'div'>>;
     expandIcon: Slot<'span'>;
+    clearIcon?: Slot<'span'>;
     input: NonNullable<Slot<'input'>>;
     listbox?: Slot<typeof Listbox>;
 };
@@ -139,7 +144,9 @@ export declare type ComboboxSlots = {
 /**
  * State used in rendering Combobox
  */
-export declare type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState;
+export declare type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState & {
+    showClearIcon?: boolean;
+};
 
 /**
  * Dropdown component: a selection control that allows users to choose from a set of possible options
@@ -162,6 +169,7 @@ export declare type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'butt
 export declare type DropdownSlots = {
     root: NonNullable<Slot<'div'>>;
     expandIcon: Slot<'span'>;
+    clearButton?: Slot<'button'>;
     button: NonNullable<Slot<'button'>>;
     listbox?: Slot<typeof Listbox>;
 };
@@ -171,6 +179,7 @@ export declare type DropdownSlots = {
  */
 export declare type DropdownState = ComponentState<DropdownSlots> & ComboboxBaseState & {
     placeholderVisible: boolean;
+    showClearButton?: boolean;
 };
 
 /**

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 {\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 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> & ComboboxBaseState;\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 {\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  };\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/renderCombobox.js

@@ -11,7 +11,8 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
             value: contextValues.combobox,
             children: [
                 /*#__PURE__*/ _jsx(state.input, {}),
-                state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {}),
+                state.clearIcon && /*#__PURE__*/ _jsx(state.clearIcon, {}),
+                /*#__PURE__*/ _jsx(state.expandIcon, {}),
                 state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {
                     mountNode: state.mountNode,
                     children: /*#__PURE__*/ _jsx(state.listbox, {})

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

@@ -1 +1 @@
-{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <state.input />\n        {state.expandIcon && <state.expandIcon />}\n        {state.listbox &&\n          (state.inlinePopup ? (\n            <state.listbox />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <state.listbox />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","root","Provider","value","combobox","input","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,MAACJ,gBAAgBK,QAAQ;YAACC,OAAOH,cAAcI,QAAQ;;8BACrD,KAACL,MAAMM,KAAK;gBACXN,MAAMO,UAAU,kBAAI,KAACP,MAAMO,UAAU;gBACrCP,MAAMQ,OAAO,IACXR,CAAAA,MAAMS,WAAW,iBAChB,KAACT,MAAMQ,OAAO,sBAEd,KAACZ;oBAAOc,WAAWV,MAAMU,SAAS;8BAChC,cAAA,KAACV,MAAMQ,OAAO;kBAElB;;;;AAIV,EAAE"}
+{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <state.input />\n        {state.clearIcon && <state.clearIcon />}\n        <state.expandIcon />\n        {state.listbox &&\n          (state.inlinePopup ? (\n            <state.listbox />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <state.listbox />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","root","Provider","value","combobox","input","clearIcon","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,MAACJ,gBAAgBK,QAAQ;YAACC,OAAOH,cAAcI,QAAQ;;8BACrD,KAACL,MAAMM,KAAK;gBACXN,MAAMO,SAAS,kBAAI,KAACP,MAAMO,SAAS;8BACpC,KAACP,MAAMQ,UAAU;gBAChBR,MAAMS,OAAO,IACXT,CAAAA,MAAMU,WAAW,iBAChB,KAACV,MAAMS,OAAO,sBAEd,KAACb;oBAAOe,WAAWX,MAAMW,SAAS;8BAChC,cAAA,KAACX,MAAMS,OAAO;kBAElB;;;;AAIV,EAAE"}

package/lib/components/Combobox/useCombobox.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
-import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
+import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
 import { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
 import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
@@ -16,6 +16,7 @@ import { useInputTriggerSlot } from './useInputTriggerSlot';
  * @param props - props from this instance of Combobox
  * @param ref - reference to root HTMLElement of Combobox
  */ export const useCombobox_unstable = (props, ref)=>{
+    var _state_clearIcon, _state_clearIcon1;
     // Merge props from surrounding <Field>, if any
     props = useFieldControlProps_unstable(props, {
         supportsLabelFor: true,
@@ -26,7 +27,7 @@ import { useInputTriggerSlot } from './useInputTriggerSlot';
         ...props,
         editable: true
     });
-    const { open, selectOption, setOpen, setValue, value, hasFocus } = baseState;
+    const { clearable, clearSelection, multiselect, open, selectedOptions, selectOption, setOpen, setValue, value, hasFocus } = baseState;
     const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
     const { disabled, freeform, inlinePopup } = props;
     const comboId = useId('combobox-');
@@ -78,16 +79,26 @@ import { useInputTriggerSlot } from './useInputTriggerSlot';
         elementType: 'div'
     });
     rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);
+    const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;
     const state = {
         components: {
             root: 'div',
             input: 'input',
             expandIcon: 'span',
-            listbox: Listbox
+            listbox: Listbox,
+            clearIcon: 'span'
         },
         root: rootSlot,
         input: triggerSlot,
         listbox: open || hasFocus ? listbox : undefined,
+        clearIcon: slot.optional(props.clearIcon, {
+            defaultProps: {
+                'aria-hidden': 'true',
+                children: /*#__PURE__*/ React.createElement(DismissIcon, null)
+            },
+            elementType: 'span',
+            renderByDefault: true
+        }),
         expandIcon: slot.optional(props.expandIcon, {
             renderByDefault: true,
             defaultProps: {
@@ -97,6 +108,7 @@ import { useInputTriggerSlot } from './useInputTriggerSlot';
             },
             elementType: 'span'
         }),
+        showClearIcon,
         ...baseState
     };
     /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};
@@ -131,5 +143,31 @@ import { useInputTriggerSlot } from './useInputTriggerSlot';
             }
         }
     }
+    const onClearIconMouseDown = useEventCallback(mergeCallbacks((_state_clearIcon = state.clearIcon) === null || _state_clearIcon === void 0 ? void 0 : _state_clearIcon.onMouseDown, (ev)=>{
+        ev.preventDefault();
+    }));
+    const onClearIconClick = useEventCallback(mergeCallbacks((_state_clearIcon1 = state.clearIcon) === null || _state_clearIcon1 === void 0 ? void 0 : _state_clearIcon1.onClick, (ev)=>{
+        clearSelection(ev);
+    }));
+    if (state.clearIcon) {
+        state.clearIcon.onMouseDown = onClearIconMouseDown;
+        state.clearIcon.onClick = onClearIconClick;
+    }
+    // Heads up! We don't support "clearable" in multiselect mode, so we should never display a slot
+    if (multiselect) {
+        state.clearIcon = undefined;
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks -- "process.env" does not change in runtime
+        React.useEffect(()=>{
+            if (clearable && multiselect) {
+                // eslint-disable-next-line no-console
+                console.error(`[@fluentui/react-combobox] "clearable" prop is not supported in multiselect mode.`);
+            }
+        }, [
+            clearable,
+            multiselect
+        ]);
+    }
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon } 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';\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\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const { open, selectOption, setOpen, setValue, value, hasFocus } = 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, comboboxPopupRef, {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, ref), {\n    state: baseState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\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 state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: open || hasFocus ? listbox : undefined,\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    ...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  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","useCombobox_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","open","selectOption","setOpen","setValue","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disabled","freeform","inlinePopup","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","useRef","listbox","state","defaultProps","children","triggerSlot","input","type","rootSlot","always","id","elementType","components","expandIcon","optional","renderByDefault","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","event","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy"],"mappings":"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"}
+{"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  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';\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\n  const baseState = useComboboxBaseState({ ...props, editable: true });\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, comboboxPopupRef, {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, ref), {\n    state: baseState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\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    ...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","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","useCombobox_unstable","props","ref","state","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","selectOption","setOpen","setValue","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disabled","freeform","inlinePopup","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","rootSlot","always","id","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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"}

package/lib/components/Combobox/useComboboxStyles.styles.js

@@ -5,6 +5,7 @@ export const comboboxClassNames = {
   root: 'fui-Combobox',
   input: 'fui-Combobox__input',
   expandIcon: 'fui-Combobox__expandIcon',
+  clearIcon: 'fui-Combobox__clearIcon',
   listbox: 'fui-Combobox__listbox'
 };
 // Matches internal heights for Select and Input, but there are no theme variables for these
@@ -255,6 +256,25 @@ const useIconStyles = /*#__PURE__*/__styles({
     Be2twd7: "f1pp30po",
     Bo70h7d: "fvc9v3g"
   },
+  hidden: {
+    mc9l5x: "fjseox"
+  },
+  visuallyHidden: {
+    Bh84pgu: "f1ekcaio",
+    Bqenvij: "f1mpe4l3",
+    B6of3ja: "fkrn0sh",
+    t21cq0: ["f179hvsh", "f1538868"],
+    jrapky: "fmxx68s",
+    Frg6f3: ["f1538868", "f179hvsh"],
+    B68tc82: "f1p9o1ba",
+    Bmxbyg5: "f1sil6mw",
+    z8tnut: "f1nbblvp",
+    z189sj: ["fifp7yv", "f1asdtw4"],
+    Byoj8tv: "f1ov4xf1",
+    uwmqm3: ["f1asdtw4", "fifp7yv"],
+    a9b677: "frkrog8",
+    qhf8xq: "f1euv43f"
+  },
   small: {
     Be2twd7: "f4ybsrx",
     Frg6f3: ["f1h9en5y", "f1xk557c"]
@@ -272,7 +292,7 @@ const useIconStyles = /*#__PURE__*/__styles({
     Bceei9c: "fdrzuqr"
   }
 }, {
-  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".f1k6fduh{cursor:pointer;}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}"]
+  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".f1k6fduh{cursor:pointer;}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".fjseox{display:none;}", ".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}", ".f1mpe4l3{height:1px;}", ".fkrn0sh{margin-top:-1px;}", ".f179hvsh{margin-right:-1px;}", ".f1538868{margin-left:-1px;}", ".fmxx68s{margin-bottom:-1px;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1nbblvp{padding-top:0px;}", ".fifp7yv{padding-right:0px;}", ".f1asdtw4{padding-left:0px;}", ".f1ov4xf1{padding-bottom:0px;}", ".frkrog8{width:1px;}", ".f1euv43f{position:absolute;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}"]
 });
 /**
  * Apply styling to the Combobox slots based on the state
@@ -281,7 +301,8 @@ export const useComboboxStyles_unstable = state => {
   const {
     appearance,
     open,
-    size
+    size,
+    showClearIcon
   } = state;
   const invalid = `${state.input['aria-invalid']}` === 'true';
   const disabled = state.input.disabled;
@@ -294,7 +315,10 @@ export const useComboboxStyles_unstable = state => {
     state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
   }
   if (state.expandIcon) {
-    state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);
+    state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);
+  }
+  if (state.clearIcon) {
+    state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);
   }
   return state;
 };

package/lib/components/Combobox/useComboboxStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","listbox","fieldHeights","small","medium","large","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","z189sj","outline","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","w","m","h","a","useInputStyles","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Bqenvij","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","Byoj8tv","uwmqm3","f","useIconStyles","icon","Bo70h7d","Frg6f3","useComboboxStyles_unstable","state","appearance","open","size","styles","iconStyles","inputStyles","className"],"sources":["useComboboxStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const comboboxClassNames = {\n    root: 'fui-Combobox',\n    input: 'fui-Combobox__input',\n    expandIcon: 'fui-Combobox__expandIcon',\n    listbox: 'fui-Combobox__listbox'\n};\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n    small: '22px',\n    medium: '30px',\n    large: '38px'\n};\n/**\n * Styles for Combobox\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        boxSizing: 'border-box',\n        columnGap: tokens.spacingHorizontalXXS,\n        display: 'inline-grid',\n        gridTemplateColumns: '1fr auto',\n        justifyContent: 'space-between',\n        minWidth: '250px',\n        position: 'relative',\n        // windows high contrast mode focus indicator\n        ':focus-within': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        },\n        // bottom focus border, shared with Input, Select, and SpinButton\n        '::after': {\n            boxSizing: 'border-box',\n            content: '\"\"',\n            position: 'absolute',\n            left: '-1px',\n            bottom: '-1px',\n            right: '-1px',\n            height: `max(2px, ${tokens.borderRadiusMedium})`,\n            borderBottomLeftRadius: tokens.borderRadiusMedium,\n            borderBottomRightRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n            clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        }\n    },\n    listbox: {\n        boxShadow: `${tokens.shadow16}`,\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        maxHeight: '80vh',\n        boxSizing: 'border-box'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // size variants\n    small: {\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    medium: {\n        paddingRight: tokens.spacingHorizontalMNudge\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        paddingRight: tokens.spacingHorizontalM\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n        ...shorthands.borderRadius(0)\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke)\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke)\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    input: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.border('0'),\n        color: tokens.colorNeutralForeground1,\n        fontFamily: tokens.fontFamilyBase,\n        '&:focus': {\n            outlineStyle: 'none'\n        },\n        '&::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        }\n    },\n    // size variants\n    small: {\n        height: fieldHeights.small,\n        ...typographyStyles.caption1,\n        ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`)\n    },\n    medium: {\n        height: fieldHeights.medium,\n        ...typographyStyles.body1,\n        ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`)\n    },\n    large: {\n        height: fieldHeights.large,\n        ...typographyStyles.body2,\n        ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`)\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        cursor: 'pointer',\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        // the SVG must have display: block for accurate positioning\n        // otherwise an extra inline space is inserted after the svg element\n        '& svg': {\n            display: 'block'\n        }\n    },\n    // icon size variants\n    small: {\n        fontSize: iconSizes.small,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    large: {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    }\n});\n/**\n * Apply styling to the Combobox slots based on the state\n */ export const useComboboxStyles_unstable = (state)=>{\n    const { appearance, open, size } = state;\n    const invalid = `${state.input['aria-invalid']}` === 'true';\n    const disabled = state.input.disabled;\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    const inputStyles = useInputStyles();\n    state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n    state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);\n    if (state.listbox) {\n        state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","comboboxClassNames","root","input","expandIcon","clearIcon","listbox","fieldHeights","small","medium","large","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","i8kkvl","mc9l5x","Budl1dq","Brf1p80","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","z189sj","outline","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bceei9c","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","d","w","m","h","a","useInputStyles","sj55zd","Bahqtrf","Brovlpu","yvdlaj","B3o7kgh","Bqenvij","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","Byoj8tv","uwmqm3","f","useIconStyles","icon","Bo70h7d","hidden","visuallyHidden","Bh84pgu","B6of3ja","t21cq0","jrapky","Frg6f3","B68tc82","Bmxbyg5","a9b677","useComboboxStyles_unstable","state","appearance","open","size","showClearIcon","styles","iconStyles","inputStyles","className"],"sources":["useComboboxStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const comboboxClassNames = {\n    root: 'fui-Combobox',\n    input: 'fui-Combobox__input',\n    expandIcon: 'fui-Combobox__expandIcon',\n    clearIcon: 'fui-Combobox__clearIcon',\n    listbox: 'fui-Combobox__listbox'\n};\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n    small: '22px',\n    medium: '30px',\n    large: '38px'\n};\n/**\n * Styles for Combobox\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        boxSizing: 'border-box',\n        columnGap: tokens.spacingHorizontalXXS,\n        display: 'inline-grid',\n        gridTemplateColumns: '1fr auto',\n        justifyContent: 'space-between',\n        minWidth: '250px',\n        position: 'relative',\n        // windows high contrast mode focus indicator\n        ':focus-within': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        },\n        // bottom focus border, shared with Input, Select, and SpinButton\n        '::after': {\n            boxSizing: 'border-box',\n            content: '\"\"',\n            position: 'absolute',\n            left: '-1px',\n            bottom: '-1px',\n            right: '-1px',\n            height: `max(2px, ${tokens.borderRadiusMedium})`,\n            borderBottomLeftRadius: tokens.borderRadiusMedium,\n            borderBottomRightRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n            clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        }\n    },\n    listbox: {\n        boxShadow: `${tokens.shadow16}`,\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        maxHeight: '80vh',\n        boxSizing: 'border-box'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // size variants\n    small: {\n        paddingRight: tokens.spacingHorizontalSNudge\n    },\n    medium: {\n        paddingRight: tokens.spacingHorizontalMNudge\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        paddingRight: tokens.spacingHorizontalM\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n        ...shorthands.borderRadius(0)\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke)\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke)\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    input: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.border('0'),\n        color: tokens.colorNeutralForeground1,\n        fontFamily: tokens.fontFamilyBase,\n        '&:focus': {\n            outlineStyle: 'none'\n        },\n        '&::placeholder': {\n            color: tokens.colorNeutralForeground4,\n            opacity: 1\n        }\n    },\n    // size variants\n    small: {\n        height: fieldHeights.small,\n        ...typographyStyles.caption1,\n        ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`)\n    },\n    medium: {\n        height: fieldHeights.medium,\n        ...typographyStyles.body1,\n        ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`)\n    },\n    large: {\n        height: fieldHeights.large,\n        ...typographyStyles.body2,\n        ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`)\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: tokens.colorTransparentBackground,\n        cursor: 'not-allowed',\n        '::placeholder': {\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    }\n});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        cursor: 'pointer',\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        // the SVG must have display: block for accurate positioning\n        // otherwise an extra inline space is inserted after the svg element\n        '& svg': {\n            display: 'block'\n        }\n    },\n    hidden: {\n        display: 'none'\n    },\n    visuallyHidden: {\n        clip: 'rect(0px, 0px, 0px, 0px)',\n        height: '1px',\n        ...shorthands.margin('-1px'),\n        ...shorthands.overflow('hidden'),\n        ...shorthands.padding('0px'),\n        width: '1px',\n        position: 'absolute'\n    },\n    // icon size variants\n    small: {\n        fontSize: iconSizes.small,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    large: {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    }\n});\n/**\n * Apply styling to the Combobox slots based on the state\n */ export const useComboboxStyles_unstable = (state)=>{\n    const { appearance, open, size, showClearIcon } = state;\n    const invalid = `${state.input['aria-invalid']}` === 'true';\n    const disabled = state.input.disabled;\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    const inputStyles = useInputStyles();\n    state.root.className = mergeClasses(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n    state.input.className = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);\n    if (state.listbox) {\n        state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);\n    }\n    if (state.clearIcon) {\n        state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/Combobox/useInputTriggerSlot.js

@@ -88,7 +88,7 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
             isTyping.current = false;
         }
         // allow space to insert a character if freeform & the last action was typing, or if the popup is closed
-        if (freeform && (isTyping.current || !open) && ev.key === ' ') {
+        if ((isTyping.current || !open) && ev.key === ' ') {
             var _triggerFromProps_onKeyDown;
             triggerFromProps === null || triggerFromProps === void 0 ? void 0 : (_triggerFromProps_onKeyDown = triggerFromProps.onKeyDown) === null || _triggerFromProps_onKeyDown === void 0 ? void 0 : _triggerFromProps_onKeyDown.call(triggerFromProps, ev);
             return;

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

@@ -1 +1 @@
-{"version":3,"sources":["useInputTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { useTriggerSlot, UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { ComboboxProps, ComboboxState } from './Combobox.types';\nimport { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UsedComboboxState = UseTriggerSlotState &\n  Pick<ComboboxState, 'value' | 'setValue' | 'selectedOptions' | 'clearSelection' | 'getOptionsMatchingText'>;\n\ntype UseInputTriggerSlotOptions = {\n  state: UsedComboboxState;\n  freeform: boolean | undefined;\n  defaultProps: Partial<ComboboxProps>;\n};\n\n/*\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useInputTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseInputTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  const {\n    state: {\n      open,\n      value,\n      activeOption,\n      selectOption,\n      setValue,\n      setActiveOption,\n      setFocusVisible,\n      multiselect,\n      selectedOptions,\n      clearSelection,\n      getOptionsMatchingText,\n      getIndexOfId,\n      setOpen,\n    },\n    freeform,\n    defaultProps,\n  } = options;\n\n  const onBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  // update value and active option based on input\n  const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(ev);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'input',\n  });\n\n  trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n  trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const defaultOnKeyDown = trigger.onKeyDown;\n  const onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      setOpen(ev, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(ev, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && ev.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if (freeform && (isTyping.current || !open) && ev.key === ' ') {\n      triggerFromProps?.onKeyDown?.(ev);\n      return;\n    }\n\n    defaultOnKeyDown?.(ev);\n  });\n\n  trigger.onKeyDown = onKeyDown;\n\n  if (hideActiveDescendant) {\n    trigger['aria-activedescendant'] = undefined;\n  }\n\n  return trigger;\n}\n"],"names":["React","mergeCallbacks","useEventCallback","ArrowLeft","ArrowRight","useTriggerSlot","getDropdownActionFromKey","useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","activeOption","selectOption","setValue","setActiveOption","setFocusVisible","multiselect","selectedOptions","clearSelection","getOptionsMatchingText","getIndexOfId","setOpen","freeform","defaultProps","onBlur","ev","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","onChange","target","matchingOption","trigger","elementType","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","key","action","current"],"mappings":"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"}
+{"version":3,"sources":["useInputTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { useTriggerSlot, UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { ComboboxProps, ComboboxState } from './Combobox.types';\nimport { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UsedComboboxState = UseTriggerSlotState &\n  Pick<ComboboxState, 'value' | 'setValue' | 'selectedOptions' | 'clearSelection' | 'getOptionsMatchingText'>;\n\ntype UseInputTriggerSlotOptions = {\n  state: UsedComboboxState;\n  freeform: boolean | undefined;\n  defaultProps: Partial<ComboboxProps>;\n};\n\n/*\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useInputTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseInputTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  const {\n    state: {\n      open,\n      value,\n      activeOption,\n      selectOption,\n      setValue,\n      setActiveOption,\n      setFocusVisible,\n      multiselect,\n      selectedOptions,\n      clearSelection,\n      getOptionsMatchingText,\n      getIndexOfId,\n      setOpen,\n    },\n    freeform,\n    defaultProps,\n  } = options;\n\n  const onBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  // update value and active option based on input\n  const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(ev);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'input',\n  });\n\n  trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n  trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const defaultOnKeyDown = trigger.onKeyDown;\n  const onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      setOpen(ev, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(ev, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && ev.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if ((isTyping.current || !open) && ev.key === ' ') {\n      triggerFromProps?.onKeyDown?.(ev);\n      return;\n    }\n\n    defaultOnKeyDown?.(ev);\n  });\n\n  trigger.onKeyDown = onKeyDown;\n\n  if (hideActiveDescendant) {\n    trigger['aria-activedescendant'] = undefined;\n  }\n\n  return trigger;\n}\n"],"names":["React","mergeCallbacks","useEventCallback","ArrowLeft","ArrowRight","useTriggerSlot","getDropdownActionFromKey","useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","activeOption","selectOption","setValue","setActiveOption","setFocusVisible","multiselect","selectedOptions","clearSelection","getOptionsMatchingText","getIndexOfId","setOpen","freeform","defaultProps","onBlur","ev","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","onChange","target","matchingOption","trigger","elementType","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","key","action","current"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\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 DropdownSlots = {\n  /* The root dropdown slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The primary slot, the element with role=\"combobox\" */\n  button: NonNullable<Slot<'button'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n  ComboboxBaseState & {\n    /* Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\n"],"names":[],"mappings":"AAAA,WAyCgE"}
+{"version":3,"sources":["Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\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 DropdownSlots = {\n  /* The root dropdown slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The dropdown clear icon */\n  clearButton?: Slot<'button'>;\n\n  /* The primary slot, the element with role=\"combobox\" */\n  button: NonNullable<Slot<'button'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n  ComboboxBaseState & {\n    /* Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n\n    showClearButton?: boolean;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\n"],"names":[],"mappings":"AAAA,WA8CgE"}

package/lib/components/Dropdown/renderDropdown.js

@@ -13,9 +13,10 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
                 /*#__PURE__*/ _jsxs(state.button, {
                     children: [
                         state.button.children,
-                        state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {})
+                        /*#__PURE__*/ _jsx(state.expandIcon, {})
                     ]
                 }),
+                state.clearButton && /*#__PURE__*/ _jsx(state.clearButton, {}),
                 state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {
                     mountNode: state.mountNode,
                     children: /*#__PURE__*/ _jsx(state.listbox, {})

package/lib/components/Dropdown/renderDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <state.button>\n          {state.button.children}\n          {state.expandIcon && <state.expandIcon />}\n        </state.button>\n        {state.listbox &&\n          (state.inlinePopup ? (\n            <state.listbox />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <state.listbox />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ComboboxContext","renderDropdown_unstable","state","contextValues","root","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,MAACJ,gBAAgBK,QAAQ;YAACC,OAAOH,cAAcI,QAAQ;;8BACrD,MAACL,MAAMM,MAAM;;wBACVN,MAAMM,MAAM,CAACC,QAAQ;wBACrBP,MAAMQ,UAAU,kBAAI,KAACR,MAAMQ,UAAU;;;gBAEvCR,MAAMS,OAAO,IACXT,CAAAA,MAAMU,WAAW,iBAChB,KAACV,MAAMS,OAAO,sBAEd,KAACb;oBAAOe,WAAWX,MAAMW,SAAS;8BAChC,cAAA,KAACX,MAAMS,OAAO;kBAElB;;;;AAIV,EAAE"}
+{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <state.button>\n          {state.button.children}\n          <state.expandIcon />\n        </state.button>\n        {state.clearButton && <state.clearButton />}\n        {state.listbox &&\n          (state.inlinePopup ? (\n            <state.listbox />\n          ) : (\n            <Portal mountNode={state.mountNode}>\n              <state.listbox />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ComboboxContext","renderDropdown_unstable","state","contextValues","root","Provider","value","combobox","button","children","expandIcon","clearButton","listbox","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAGjE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,MAACJ,gBAAgBK,QAAQ;YAACC,OAAOH,cAAcI,QAAQ;;8BACrD,MAACL,MAAMM,MAAM;;wBACVN,MAAMM,MAAM,CAACC,QAAQ;sCACtB,KAACP,MAAMQ,UAAU;;;gBAElBR,MAAMS,WAAW,kBAAI,KAACT,MAAMS,WAAW;gBACvCT,MAAMU,OAAO,IACXV,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMU,OAAO,sBAEd,KAACd;oBAAOgB,WAAWZ,MAAMY,SAAS;8BAChC,cAAA,KAACZ,MAAMU,OAAO;kBAElB;;;;AAIV,EAAE"}