@fluentui/react-combobox 9.5.39 → 9.6.0

package/lib/components/Dropdown/useDropdown.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
-import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
-import { getPartitionedNativeProps, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
+import { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, slot, useEventCallback } from '@fluentui/react-utilities';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
 import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
 import { Listbox } from '../Listbox/Listbox';
@@ -16,13 +16,14 @@ import { useButtonTriggerSlot } from './useButtonTriggerSlot';
  * @param props - props from this instance of Dropdown
  * @param ref - reference to root HTMLElement of Dropdown
  */ export const useDropdown_unstable = (props, ref)=>{
+    var _state_clearButton;
     // Merge props from surrounding <Field>, if any
     props = useFieldControlProps_unstable(props, {
         supportsLabelFor: true,
         supportsSize: true
     });
     const baseState = useComboboxBaseState(props);
-    const { open, hasFocus } = baseState;
+    const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;
     const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
         props,
         primarySlotTagName: 'button',
@@ -58,16 +59,28 @@ import { useButtonTriggerSlot } from './useButtonTriggerSlot';
         elementType: 'div'
     });
     rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);
+    const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;
     const state = {
         components: {
             root: 'div',
             button: 'button',
+            clearButton: 'button',
             expandIcon: 'span',
             listbox: Listbox
         },
         root: rootSlot,
         button: trigger,
         listbox: open || hasFocus ? listbox : undefined,
+        clearButton: slot.optional(props.clearButton, {
+            defaultProps: {
+                'aria-label': 'Clear selection',
+                children: /*#__PURE__*/ React.createElement(DismissIcon, null),
+                // Safari doesn't allow to focus an element with this
+                tabIndex: 0
+            },
+            elementType: 'button',
+            renderByDefault: true
+        }),
         expandIcon: slot.optional(props.expandIcon, {
             renderByDefault: true,
             defaultProps: {
@@ -76,7 +89,32 @@ import { useButtonTriggerSlot } from './useButtonTriggerSlot';
             elementType: 'span'
         }),
         placeholderVisible: !baseState.value && !!props.placeholder,
+        showClearButton,
         ...baseState
     };
+    const onClearButtonClick = useEventCallback(mergeCallbacks((_state_clearButton = state.clearButton) === null || _state_clearButton === void 0 ? void 0 : _state_clearButton.onClick, (ev)=>{
+        var _triggerRef_current;
+        clearSelection(ev);
+        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
+    }));
+    if (state.clearButton) {
+        state.clearButton.onClick = onClearButtonClick;
+    }
+    // Heads up! We don't support "clearable" in multiselect mode, so we should never display a slot
+    if (multiselect) {
+        state.clearButton = 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/Dropdown/useDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState(props);\n  const { open, hasFocus } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      tabIndex: 0,\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !props.inlinePopup && open ? listbox?.id : undefined,\n      children: props.children,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    button: trigger,\n    listbox: open || hasFocus ? listbox : undefined,\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n      elementType: 'span',\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    ...baseState,\n  };\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","useMergedRefs","slot","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","useDropdown_unstable","props","ref","supportsLabelFor","supportsSize","baseState","open","hasFocus","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","state","defaultProps","children","trigger","button","type","tabIndex","value","placeholder","rootSlot","always","inlinePopup","id","undefined","elementType","components","expandIcon","optional","renderByDefault","placeholderVisible"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,sBAAsBC,eAAe,QAAQ,wBAAwB;AAC9E,SAASC,yBAAyB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC3F,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,OAAO,QAAQ,qBAAqB;AAE7C,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,+CAA+C;IAC/CD,QAAQZ,8BAA8BY,OAAO;QAAEE,kBAAkB;QAAMC,cAAc;IAAK;IAE1F,MAAMC,YAAYV,qBAAqBM;IACvC,MAAM,EAAEK,IAAI,EAAEC,QAAQ,EAAE,GAAGF;IAE3B,MAAM,EAAEG,SAASC,kBAAkB,EAAEC,MAAMC,eAAe,EAAE,GAAGnB,0BAA0B;QACvFS;QACAW,oBAAoB;QACpBC,mBAAmB;YAAC;SAAW;IACjC;IAEA,MAAM,CAACC,kBAAkBC,kBAAkB,GAAGnB,uBAAuBK;IAErE,MAAMe,aAAa5B,MAAM6B,MAAM,CAAoB;IACnD,MAAMC,UAAUpB,eAAeG,MAAMiB,OAAO,EAAEJ,kBAAkB;QAC9DK,OAAOd;QACPW;QACAI,cAAc;YACZC,UAAUpB,MAAMoB,QAAQ;QAC1B;IACF;QAEqCpB;IAArC,MAAMqB,UAAUvB,qBAAqBE,CAAAA,gBAAAA,MAAMsB,MAAM,cAAZtB,2BAAAA,gBAAgB,CAAC,GAAGR,cAAcuB,YAAYd,MAAM;QACvFiB,OAAOd;QACPe,cAAc;YACZI,MAAM;YACNC,UAAU;YACVJ,UAAUhB,UAAUqB,KAAK,IAAIzB,MAAM0B,WAAW;YAC9C,GAAGlB,kBAAkB;QACvB;IACF;IAEA,MAAMmB,WAAWlC,KAAKmC,MAAM,CAAC5B,MAAMS,IAAI,EAAE;QACvCU,cAAc;YACZ,aAAa,CAACnB,MAAM6B,WAAW,IAAIxB,OAAOY,oBAAAA,8BAAAA,QAASa,EAAE,GAAGC;YACxDX,UAAUpB,MAAMoB,QAAQ;YACxB,GAAGV,eAAe;QACpB;QACAsB,aAAa;IACf;IACAL,SAAS1B,GAAG,GAAGT,cAAcmC,SAAS1B,GAAG,EAAEa;IAE3C,MAAMI,QAAuB;QAC3Be,YAAY;YAAExB,MAAM;YAAOa,QAAQ;YAAUY,YAAY;YAAQjB,SAASrB;QAAQ;QAClFa,MAAMkB;QACNL,QAAQD;QACRJ,SAASZ,QAAQC,WAAWW,UAAUc;QACtCG,YAAYzC,KAAK0C,QAAQ,CAACnC,MAAMkC,UAAU,EAAE;YAC1CE,iBAAiB;YACjBjB,cAAc;gBACZC,wBAAU,oBAAC9B;YACb;YACA0C,aAAa;QACf;QACAK,oBAAoB,CAACjC,UAAUqB,KAAK,IAAI,CAAC,CAACzB,MAAM0B,WAAW;QAC3D,GAAGtB,SAAS;IACd;IAEA,OAAOc;AACT,EAAE"}
+{"version":3,"sources":["useDropdown.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  useMergedRefs,\n  slot,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState(props);\n  const { clearable, clearSelection, hasFocus, multiselect, open, selectedOptions } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      tabIndex: 0,\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !props.inlinePopup && open ? listbox?.id : undefined,\n      children: props.children,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearButton = selectedOptions.length > 0 && clearable && !multiselect;\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    button: trigger,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearButton: slot.optional(props.clearButton, {\n      defaultProps: {\n        'aria-label': 'Clear selection',\n        children: <DismissIcon />,\n        // Safari doesn't allow to focus an element with this\n        tabIndex: 0,\n      },\n      elementType: 'button',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n      elementType: 'span',\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    showClearButton,\n    ...baseState,\n  };\n\n  const onClearButtonClick = useEventCallback(\n    mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n      clearSelection(ev);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.clearButton) {\n    state.clearButton.onClick = onClearButtonClick;\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.clearButton = 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","useMergedRefs","slot","useEventCallback","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","useDropdown_unstable","props","ref","state","supportsLabelFor","supportsSize","baseState","clearable","clearSelection","hasFocus","multiselect","open","selectedOptions","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","trigger","button","type","tabIndex","value","placeholder","rootSlot","always","inlinePopup","id","undefined","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}

package/lib/components/Dropdown/useDropdownStyles.styles.js

@@ -1,9 +1,11 @@
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 import { iconSizes } from '../../utils/internalTokens';
 export const dropdownClassNames = {
   root: 'fui-Dropdown',
   button: 'fui-Dropdown__button',
+  clearButton: 'fui-Dropdown__clearButton',
   expandIcon: 'fui-Dropdown__expandIcon',
   listbox: 'fui-Dropdown__listbox'
 };
@@ -17,7 +19,7 @@ const useStyles = /*#__PURE__*/__styles({
     B7oj6ja: ["f1jar5jt", "fyu767a"],
     Btl43ni: ["fyu767a", "f1jar5jt"],
     B7ck84d: "f1ewtqcl",
-    mc9l5x: "f14t3ns0",
+    mc9l5x: "ftuwxu6",
     Bf4jedk: "f1exfvgq",
     qhf8xq: "f10pi13n",
     Bbr2w1p: "f14a1fxs",
@@ -48,7 +50,9 @@ const useStyles = /*#__PURE__*/__styles({
     Bioka5o: "fb7uyps",
     H713fs: "f1cmft4k",
     B9ooomg: "f1x58t8o",
-    Bercvud: "f1ibeo51"
+    Bercvud: "f1ibeo51",
+    Bz04dq9: "f132nw8t",
+    Budl3uf: "f1htdosj"
   },
   listbox: {
     B7ck84d: "f1ewtqcl",
@@ -204,9 +208,12 @@ const useStyles = /*#__PURE__*/__styles({
   disabledText: {
     sj55zd: "f1s2aq7o",
     Bceei9c: "fdrzuqr"
+  },
+  hidden: {
+    mc9l5x: "fjseox"
   }
 }, {
-  d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".f122n59{align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
+  d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:inline-flex;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".f122n59{align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
   w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
   m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
@@ -223,6 +230,7 @@ const useStyles = /*#__PURE__*/__styles({
   }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
     m: "(forced-colors: active)"
   }]],
+  t: ["@supports selector(:has(*)){.f132nw8t:has(.fui-Dropdown__clearButton:focus)::after{border-bottom-color:initial;}}", "@supports selector(:has(*)){.f1htdosj:has(.fui-Dropdown__clearButton:focus)::after{transform:scaleX(0);}}"],
   f: [".ftqa4ok:focus{outline-style:none;}"],
   h: [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
   a: [".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"]
@@ -255,6 +263,10 @@ const useIconStyles = /*#__PURE__*/__styles({
 }, {
   d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f12w6cgp{grid-column-start:icon;}", ".f8bv1bt{grid-column-end:end;}", ".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);}"]
 });
+const useBaseClearButtonStyle = /*#__PURE__*/__resetStyles("r1ekmruf", "r1aeuc1g", {
+  r: [".r1ekmruf{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-right:var(--spacingHorizontalMNudge);padding:0;position:relative;}", ".r1ekmruf:focus{outline-style:none;}", ".r1ekmruf:focus-visible{outline-style:none;}", ".r1ekmruf[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1ekmruf[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1aeuc1g{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-left:var(--spacingHorizontalMNudge);padding:0;position:relative;}", ".r1aeuc1g:focus{outline-style:none;}", ".r1aeuc1g:focus-visible{outline-style:none;}", ".r1aeuc1g[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1aeuc1g[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
+  s: ["@media (forced-colors: active){.r1ekmruf[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r1aeuc1g[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
+});
 /**
  * Apply styling to the Dropdown slots based on the state
  */
@@ -263,19 +275,24 @@ export const useDropdownStyles_unstable = state => {
     appearance,
     open,
     placeholderVisible,
+    showClearButton,
     size
   } = state;
   const invalid = `${state.button['aria-invalid']}` === 'true';
   const disabled = state.button.disabled;
   const styles = useStyles();
   const iconStyles = useIconStyles();
+  const clearButtonStyle = useBaseClearButtonStyle();
   state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
   state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);
   if (state.listbox) {
     state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);
   }
   if (state.expandIcon) {
-    state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, state.expandIcon.className);
+    state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);
+  }
+  if (state.clearButton) {
+    state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);
   }
   return state;
 };

package/lib/components/Dropdown/useDropdownStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","expandIcon","listbox","useStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","mc9l5x","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","Bt984gj","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","large","outline","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","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","d","w","m","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","styles","iconStyles","className"],"sources":["useDropdownStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\n    root: 'fui-Dropdown',\n    button: 'fui-Dropdown__button',\n    expandIcon: 'fui-Dropdown__expandIcon',\n    listbox: 'fui-Dropdown__listbox'\n};\n/**\n * Styles for Dropdown\n */ const useStyles = makeStyles({\n    root: {\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        boxSizing: 'border-box',\n        display: 'inline-block',\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(${tokens.strokeWidthThick}, ${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        boxSizing: 'border-box',\n        boxShadow: `${tokens.shadow16}`,\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        maxHeight: '80vh'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    button: {\n        alignItems: 'center',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.border('0'),\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXXS,\n        cursor: 'pointer',\n        display: 'grid',\n        fontFamily: tokens.fontFamilyBase,\n        gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n        justifyContent: 'space-between',\n        textAlign: 'left',\n        width: '100%',\n        '&:focus': {\n            outlineStyle: 'none'\n        }\n    },\n    placeholder: {\n        color: tokens.colorNeutralForeground4\n    },\n    // size variants\n    small: {\n        ...typographyStyles.caption1,\n        ...shorthands.padding('3px', tokens.spacingHorizontalSNudge, '3px', `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`)\n    },\n    medium: {\n        ...typographyStyles.body1,\n        ...shorthands.padding('5px', tokens.spacingHorizontalMNudge, '5px', `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`)\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...typographyStyles.body2,\n        ...shorthands.padding('7px', tokens.spacingHorizontalM, '7px', `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`)\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', 'transparent')\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent')\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    disabledText: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    }\n});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        gridColumnStart: 'icon',\n        gridColumnEnd: 'end',\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    }\n});\n/**\n * Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n    const { appearance, open, placeholderVisible, size } = state;\n    const invalid = `${state.button['aria-invalid']}` === 'true';\n    const disabled = state.button.disabled;\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n    state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);\n    if (state.listbox) {\n        state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(dropdownClassNames.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":["createFocusOutlineStyle","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","mc9l5x","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","Bz04dq9","Budl3uf","E5pizo","Bxyxcbc","listboxCollapsed","Bt984gj","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","large","outline","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","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","hidden","d","w","m","t","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useBaseClearButtonStyle","r","s","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className"],"sources":["useDropdownStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\n    root: 'fui-Dropdown',\n    button: 'fui-Dropdown__button',\n    clearButton: 'fui-Dropdown__clearButton',\n    expandIcon: 'fui-Dropdown__expandIcon',\n    listbox: 'fui-Dropdown__listbox'\n};\n/**\n * Styles for Dropdown\n */ const useStyles = makeStyles({\n    root: {\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        boxSizing: 'border-box',\n        display: 'inline-flex',\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(${tokens.strokeWidthThick}, ${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        '@supports selector(:has(*))': {\n            [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n                borderBottomColor: 'initial',\n                transform: 'scaleX(0)'\n            }\n        }\n    },\n    listbox: {\n        boxSizing: 'border-box',\n        boxShadow: `${tokens.shadow16}`,\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        maxHeight: '80vh'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    button: {\n        alignItems: 'center',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.border('0'),\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXXS,\n        cursor: 'pointer',\n        display: 'grid',\n        fontFamily: tokens.fontFamilyBase,\n        gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n        justifyContent: 'space-between',\n        textAlign: 'left',\n        width: '100%',\n        '&:focus': {\n            outlineStyle: 'none'\n        }\n    },\n    placeholder: {\n        color: tokens.colorNeutralForeground4\n    },\n    // size variants\n    small: {\n        ...typographyStyles.caption1,\n        ...shorthands.padding('3px', tokens.spacingHorizontalSNudge, '3px', `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`)\n    },\n    medium: {\n        ...typographyStyles.body1,\n        ...shorthands.padding('5px', tokens.spacingHorizontalMNudge, '5px', `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`)\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...typographyStyles.body2,\n        ...shorthands.padding('7px', tokens.spacingHorizontalM, '7px', `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`)\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', 'transparent')\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent')\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    disabledText: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    },\n    hidden: {\n        display: 'none'\n    }\n});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        gridColumnStart: 'icon',\n        gridColumnEnd: 'end',\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    }\n});\nconst useBaseClearButtonStyle = makeResetStyles({\n    alignSelf: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    cursor: 'pointer',\n    height: 'fit-content',\n    margin: 0,\n    marginRight: tokens.spacingHorizontalMNudge,\n    padding: 0,\n    position: 'relative',\n    ...createFocusOutlineStyle()\n});\n/**\n * Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n    const { appearance, open, placeholderVisible, showClearButton, size } = state;\n    const invalid = `${state.button['aria-invalid']}` === 'true';\n    const disabled = state.button.disabled;\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    const clearButtonStyle = useBaseClearButtonStyle();\n    state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n    state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);\n    if (state.listbox) {\n        state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, !open && styles.listboxCollapsed, state.listbox.className);\n    }\n    if (state.expandIcon) {\n        state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);\n    }\n    if (state.clearButton) {\n        state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);\n    }\n    return state;\n};\n"],"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 { 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';\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     * 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    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<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> &\n  Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n  OptionCollectionState &\n  SelectionState & {\n    /* Option data for the currently highlighted option (not the selected option) */\n    activeOption?: OptionValue;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    /**\n     * whether the combobox/dropdown currently has focus\n     */\n    hasFocus: 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    setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n    setFocusVisible(focusVisible: boolean): void;\n\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string | undefined): 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};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\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';\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    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    /* Option data for the currently highlighted option (not the selected option) */\n    activeOption?: OptionValue;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    /**\n     * whether the combobox/dropdown currently has focus\n     */\n    hasFocus: 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    setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n    setFocusVisible(focusVisible: boolean): void;\n\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string | undefined): 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};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/utils/useComboboxBaseState.js

@@ -5,7 +5,7 @@ import { useSelection } from '../utils/useSelection';
 /**
  * State shared between Combobox and Dropdown components
  */ export const useComboboxBaseState = (props)=>{
-    const { appearance = 'outline', children, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium' } = props;
+    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium' } = props;
     const optionCollection = useOptionCollection();
     const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;
     const [activeOption, setActiveOption] = React.useState();
@@ -93,6 +93,7 @@ import { useSelection } from '../utils/useSelection';
         ...selectionState,
         activeOption,
         appearance,
+        clearable,
         focusVisible,
         hasFocus,
         ignoreNextBlur,

package/lib/utils/useComboboxBaseState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\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 * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    editable = false,\n    inlinePopup = false,\n    mountNode = undefined,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // 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 or children\n  React.useEffect(() => {\n    if (open && !activeOption) {\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        selectedOption && setActiveOption(selectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else if (!open) {\n      // reset the active option when closing\n      setActiveOption(undefined);\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, children]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption,\n    appearance,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    mountNode,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n    multiselect,\n  };\n};\n"],"names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"mappings":"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"}
+{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\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 * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\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  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // 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 or children\n  React.useEffect(() => {\n    if (open && !activeOption) {\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        selectedOption && setActiveOption(selectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else if (!open) {\n      // reset the active option when closing\n      setActiveOption(undefined);\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, children]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption,\n    appearance,\n    clearable,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    mountNode,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n    multiselect,\n  };\n};\n"],"names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"mappings":"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"}

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

@@ -19,7 +19,8 @@ const renderCombobox_unstable = (state, contextValues)=>{
             value: contextValues.combobox,
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
-                state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {}),
+                state.clearIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearIcon, {}),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {}),
                 state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
                     mountNode: state.mountNode,
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})

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

@@ -1 +1 @@
-{"version":3,"sources":["renderCombobox.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Combobox\n */ export const renderCombobox_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {\n        children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {\n            value: contextValues.combobox,\n            children: [\n                /*#__PURE__*/ _jsx(state.input, {}),\n                state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {}),\n                state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {\n                    mountNode: state.mountNode,\n                    children: /*#__PURE__*/ _jsx(state.listbox, {})\n                }))\n            ]\n        })\n    });\n};\n"],"names":["renderCombobox_unstable","state","contextValues","assertSlots","_jsx","root","children","_jsxs","ComboboxContext","Provider","value","combobox","input","expandIcon","listbox","inlinePopup","Portal","mountNode"],"mappings":";;;;+BAMiBA;;;eAAAA;;;4BAN4B;6BACtB;gCACK;iCACI;AAGrB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGC,IAAAA,gBAAK,EAACC,gCAAe,CAACC,QAAQ,EAAE;YACpDC,OAAOR,cAAcS,QAAQ;YAC7BL,UAAU;gBACN,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMW,KAAK,EAAE,CAAC;gBACjCX,MAAMY,UAAU,IAAI,WAAW,GAAGT,IAAAA,eAAI,EAACH,MAAMY,UAAU,EAAE,CAAC;gBAC1DZ,MAAMa,OAAO,IAAKb,CAAAA,MAAMc,WAAW,GAAG,WAAW,GAAGX,IAAAA,eAAI,EAACH,MAAMa,OAAO,EAAE,CAAC,KAAK,WAAW,GAAGV,IAAAA,eAAI,EAACY,mBAAM,EAAE;oBACrGC,WAAWhB,MAAMgB,SAAS;oBAC1BX,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMa,OAAO,EAAE,CAAC;gBACjD,EAAC;aACJ;QACL;IACJ;AACJ"}
+{"version":3,"sources":["renderCombobox.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Combobox\n */ export const renderCombobox_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {\n        children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {\n            value: contextValues.combobox,\n            children: [\n                /*#__PURE__*/ _jsx(state.input, {}),\n                state.clearIcon && /*#__PURE__*/ _jsx(state.clearIcon, {}),\n                /*#__PURE__*/ _jsx(state.expandIcon, {}),\n                state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {\n                    mountNode: state.mountNode,\n                    children: /*#__PURE__*/ _jsx(state.listbox, {})\n                }))\n            ]\n        })\n    });\n};\n"],"names":["renderCombobox_unstable","state","contextValues","assertSlots","_jsx","root","children","_jsxs","ComboboxContext","Provider","value","combobox","input","clearIcon","expandIcon","listbox","inlinePopup","Portal","mountNode"],"mappings":";;;;+BAMiBA;;;eAAAA;;;4BAN4B;6BACtB;gCACK;iCACI;AAGrB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGC,IAAAA,gBAAK,EAACC,gCAAe,CAACC,QAAQ,EAAE;YACpDC,OAAOR,cAAcS,QAAQ;YAC7BL,UAAU;gBACN,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMW,KAAK,EAAE,CAAC;gBACjCX,MAAMY,SAAS,IAAI,WAAW,GAAGT,IAAAA,eAAI,EAACH,MAAMY,SAAS,EAAE,CAAC;gBACxD,WAAW,GAAGT,IAAAA,eAAI,EAACH,MAAMa,UAAU,EAAE,CAAC;gBACtCb,MAAMc,OAAO,IAAKd,CAAAA,MAAMe,WAAW,GAAG,WAAW,GAAGZ,IAAAA,eAAI,EAACH,MAAMc,OAAO,EAAE,CAAC,KAAK,WAAW,GAAGX,IAAAA,eAAI,EAACa,mBAAM,EAAE;oBACrGC,WAAWjB,MAAMiB,SAAS;oBAC1BZ,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMc,OAAO,EAAE,CAAC;gBACjD,EAAC;aACJ;QACL;IACJ;AACJ"}

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

@@ -19,6 +19,7 @@ const _Listbox = require("../Listbox/Listbox");
 const _useListboxSlot = require("../../utils/useListboxSlot");
 const _useInputTriggerSlot = require("./useInputTriggerSlot");
 const useCombobox_unstable = (props, ref)=>{
+    var _state_clearIcon, _state_clearIcon1;
     // Merge props from surrounding <Field>, if any
     props = (0, _reactfield.useFieldControlProps_unstable)(props, {
         supportsLabelFor: true,
@@ -29,7 +30,7 @@ const useCombobox_unstable = (props, ref)=>{
         ...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] = (0, _useComboboxPositioning.useComboboxPositioning)(props);
     const { disabled, freeform, inlinePopup } = props;
     const comboId = (0, _reactutilities.useId)('combobox-');
@@ -81,16 +82,26 @@ const useCombobox_unstable = (props, ref)=>{
         elementType: 'div'
     });
     rootSlot.ref = (0, _reactutilities.useMergedRefs)(rootSlot.ref, comboboxTargetRef);
+    const showClearIcon = selectedOptions.length > 0 && clearable && !multiselect;
     const state = {
         components: {
             root: 'div',
             input: 'input',
             expandIcon: 'span',
-            listbox: _Listbox.Listbox
+            listbox: _Listbox.Listbox,
+            clearIcon: 'span'
         },
         root: rootSlot,
         input: triggerSlot,
         listbox: open || hasFocus ? listbox : undefined,
+        clearIcon: _reactutilities.slot.optional(props.clearIcon, {
+            defaultProps: {
+                'aria-hidden': 'true',
+                children: /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null)
+            },
+            elementType: 'span',
+            renderByDefault: true
+        }),
         expandIcon: _reactutilities.slot.optional(props.expandIcon, {
             renderByDefault: true,
             defaultProps: {
@@ -100,6 +111,7 @@ const useCombobox_unstable = (props, ref)=>{
             },
             elementType: 'span'
         }),
+        showClearIcon,
         ...baseState
     };
     /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};
@@ -134,5 +146,31 @@ const useCombobox_unstable = (props, ref)=>{
             }
         }
     }
+    const onClearIconMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((_state_clearIcon = state.clearIcon) === null || _state_clearIcon === void 0 ? void 0 : _state_clearIcon.onMouseDown, (ev)=>{
+        ev.preventDefault();
+    }));
+    const onClearIconClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.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-commonjs/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon } 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';\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    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsRequired: true,\n        supportsSize: true\n    });\n    const baseState = useComboboxBaseState({\n        ...props,\n        editable: true\n    });\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    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, comboboxPopupRef, {\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, ref), {\n        state: baseState,\n        freeform,\n        defaultProps: {\n            type: 'text',\n            value: value !== null && value !== void 0 ? value : '',\n            ...triggerNativeProps\n        }\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 state = {\n        components: {\n            root: 'div',\n            input: 'input',\n            expandIcon: 'span',\n            listbox: Listbox\n        },\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: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),\n                role: 'button'\n            },\n            elementType: 'span'\n        }),\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    return state;\n};\n"],"names":["useCombobox_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","baseState","useComboboxBaseState","editable","open","selectOption","setOpen","setValue","value","hasFocus","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","disabled","freeform","inlinePopup","comboId","useId","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","React","useRef","listbox","useListboxSlot","state","defaultProps","children","_props_input","triggerSlot","useInputTriggerSlot","input","useMergedRefs","type","rootSlot","slot","always","id","elementType","components","expandIcon","Listbox","optional","renderByDefault","createElement","ChevronDownIcon","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","useEventCallback","mergeCallbacks","event","_triggerRef_current","preventDefault","current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy"],"mappings":"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"}
+{"version":3,"sources":["useCombobox.js"],"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 { 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';\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 baseState = useComboboxBaseState({\n        ...props,\n        editable: true\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, comboboxPopupRef, {\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, ref), {\n        state: baseState,\n        freeform,\n        defaultProps: {\n            type: 'text',\n            value: value !== null && value !== void 0 ? value : '',\n            ...triggerNativeProps\n        }\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        ...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","baseState","useComboboxBaseState","editable","clearable","clearSelection","multiselect","open","selectedOptions","selectOption","setOpen","setValue","value","hasFocus","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","disabled","freeform","inlinePopup","comboId","useId","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","React","useRef","listbox","useListboxSlot","state","defaultProps","children","_props_input","triggerSlot","useInputTriggerSlot","input","useMergedRefs","type","rootSlot","slot","always","id","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":";;;;+BAiBiBA;;;eAAAA;;;;iEAjBM;4BACuB;4BACuC;gCACmB;sCACnE;wCACE;yBACf;gCACO;qCACK;AASzB,MAAMA,uBAAuB,CAACC,OAAOC;IAC5C,IAAIC,kBAAkBC;IACtB,+CAA+C;IAC/CH,QAAQI,IAAAA,yCAA6B,EAACJ,OAAO;QACzCK,kBAAkB;QAClBC,kBAAkB;QAClBC,cAAc;IAClB;IACA,MAAMC,YAAYC,IAAAA,0CAAoB,EAAC;QACnC,GAAGT,KAAK;QACRU,UAAU;IACd;IACA,MAAM,EAAEC,SAAS,EAAEC,cAAc,EAAEC,WAAW,EAAEC,IAAI,EAAEC,eAAe,EAAEC,YAAY,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGZ;IAC5H,MAAM,CAACa,kBAAkBC,kBAAkB,GAAGC,IAAAA,8CAAsB,EAACvB;IACrE,MAAM,EAAEwB,QAAQ,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAG1B;IAC5C,MAAM2B,UAAUC,IAAAA,qBAAK,EAAC;IACtB,MAAM,EAAEC,SAASC,kBAAkB,EAAEC,MAAMC,eAAe,EAAE,GAAGC,IAAAA,yCAAyB,EAAC;QACrFjC;QACAkC,oBAAoB;QACpBC,mBAAmB;YACf;YACA;SACH;IACL;IACA,mDAAmD;IACnD3B,UAAUQ,YAAY,GAAG,CAACoB,IAAIC;QAC1BnB,SAASoB;QACTtB,aAAaoB,IAAIC;IACrB;IACA7B,UAAUS,OAAO,GAAG,CAACmB,IAAIG;QACrB,IAAIf,UAAU;YACV;QACJ;QACA,IAAI,CAACe,YAAY,CAACd,UAAU;YACxBP,SAASoB;QACb;QACArB,QAAQmB,IAAIG;IAChB;IACA,MAAMC,aAAaC,OAAMC,MAAM,CAAC;IAChC,MAAMC,UAAUC,IAAAA,8BAAc,EAAC5C,MAAM2C,OAAO,EAAEtB,kBAAkB;QAC5DwB,OAAOrC;QACPgC;QACAM,cAAc;YACVC,UAAU/C,MAAM+C,QAAQ;QAC5B;IACJ;IACA,IAAIC;IACJ,MAAMC,cAAcC,IAAAA,wCAAmB,EAAC,AAACF,CAAAA,eAAehD,MAAMmD,KAAK,AAAD,MAAO,QAAQH,iBAAiB,KAAK,IAAIA,eAAe,CAAC,GAAGI,IAAAA,6BAAa,EAACZ,YAAYvC,MAAM;QAC1J4C,OAAOrC;QACPiB;QACAqB,cAAc;YACVO,MAAM;YACNlC,OAAOA,UAAU,QAAQA,UAAU,KAAK,IAAIA,QAAQ;YACpD,GAAGW,kBAAkB;QACzB;IACJ;IACA,MAAMwB,WAAWC,oBAAI,CAACC,MAAM,CAACxD,MAAM+B,IAAI,EAAE;QACrCe,cAAc;YACV,aAAa,CAACpB,eAAeZ,OAAO6B,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQc,EAAE,GAAGnB;YACnG,GAAGN,eAAe;QACtB;QACA0B,aAAa;IACjB;IACAJ,SAASrD,GAAG,GAAGmD,IAAAA,6BAAa,EAACE,SAASrD,GAAG,EAAEqB;IAC3C,MAAMqC,gBAAgB5C,gBAAgB6C,MAAM,GAAG,KAAKjD,aAAa,CAACE;IAClE,MAAMgC,QAAQ;QACVgB,YAAY;YACR9B,MAAM;YACNoB,OAAO;YACPW,YAAY;YACZnB,SAASoB,gBAAO;YAChBC,WAAW;QACf;QACAjC,MAAMuB;QACNH,OAAOF;QACPN,SAAS7B,QAAQM,WAAWuB,UAAUL;QACtC0B,WAAWT,oBAAI,CAACU,QAAQ,CAACjE,MAAMgE,SAAS,EAAE;YACtClB,cAAc;gBACV,eAAe;gBACfC,UAAU,WAAW,GAAGN,OAAMyB,aAAa,CAACC,0BAAW,EAAE;YAC7D;YACAT,aAAa;YACbU,iBAAiB;QACrB;QACAN,YAAYP,oBAAI,CAACU,QAAQ,CAACjE,MAAM8D,UAAU,EAAE;YACxCM,iBAAiB;YACjBtB,cAAc;gBACV,iBAAiBhC;gBACjBiC,UAAU,WAAW,GAAGN,OAAMyB,aAAa,CAACG,8BAAe,EAAE;gBAC7DC,MAAM;YACV;YACAZ,aAAa;QACjB;QACAC;QACA,GAAGnD,SAAS;IAChB;IACA,6DAA6D,GAAG,MAAM,EAAE+D,aAAaC,eAAe,EAAE,GAAG3B,MAAMiB,UAAU,IAAI,CAAC;IAC9H,MAAMW,wBAAwBC,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAACH,iBAAiB,CAACI;QAC5E,IAAIC;QACJD,MAAME,cAAc;QACpBjC,MAAM5B,OAAO,CAAC2D,OAAO,CAAC/B,MAAM/B,IAAI;QAC/B+D,CAAAA,sBAAsBrC,WAAWuC,OAAO,AAAD,MAAO,QAAQF,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBG,KAAK;IAC9H;IACA,IAAInC,MAAMiB,UAAU,EAAE;QAClBjB,MAAMiB,UAAU,CAACS,WAAW,GAAGE;QAC/B,iGAAiG;QACjG,6BAA6B;QAC7B,0DAA0D;QAC1D,yGAAyG;QACzG,mEAAmE;QACnE,kGAAkG;QAClG,MAAMQ,iBAAiBpC,MAAMiB,UAAU,CAAC,aAAa,IAAIjB,MAAMiB,UAAU,CAAC,kBAAkB;QAC5F,MAAMoB,oBAAoB,QAAQ,gDAAgD;QAClF,IAAI,CAACD,gBAAgB;YACjB,IAAIjF,KAAK,CAAC,kBAAkB,EAAE;gBAC1B,IAAImF;gBACJ,MAAMC,YAAY,AAACD,CAAAA,uBAAuBtC,MAAMiB,UAAU,CAACL,EAAE,AAAD,MAAO,QAAQ0B,yBAAyB,KAAK,IAAIA,uBAAuB,CAAC,EAAExD,QAAQ,QAAQ,CAAC;gBACxJ,MAAM0D,oBAAoB,CAAC,EAAED,UAAU,CAAC,EAAEvC,MAAMM,KAAK,CAAC,kBAAkB,CAAC,CAAC;gBAC1EN,MAAMiB,UAAU,CAAC,aAAa,GAAGoB;gBACjCrC,MAAMiB,UAAU,CAACL,EAAE,GAAG2B;gBACtBvC,MAAMiB,UAAU,CAAC,kBAAkB,GAAGuB;YAC1C,OAAO,IAAIrF,KAAK,CAAC,aAAa,EAAE;gBAC5B6C,MAAMiB,UAAU,CAAC,aAAa,GAAG,CAAC,EAAEoB,kBAAkB,CAAC,EAAElF,KAAK,CAAC,aAAa,CAAC,CAAC;YAClF,OAAO;gBACH6C,MAAMiB,UAAU,CAAC,aAAa,GAAGoB;YACrC;QACJ;IACJ;IACA,MAAMI,uBAAuBZ,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAAC,AAACzE,CAAAA,mBAAmB2C,MAAMmB,SAAS,AAAD,MAAO,QAAQ9D,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBqE,WAAW,EAAE,CAACnC;QAChLA,GAAG0C,cAAc;IACrB;IACA,MAAMS,mBAAmBb,IAAAA,gCAAgB,EAACC,IAAAA,8BAAc,EAAC,AAACxE,CAAAA,oBAAoB0C,MAAMmB,SAAS,AAAD,MAAO,QAAQ7D,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBqF,OAAO,EAAE,CAACpD;QAC3KxB,eAAewB;IACnB;IACA,IAAIS,MAAMmB,SAAS,EAAE;QACjBnB,MAAMmB,SAAS,CAACO,WAAW,GAAGe;QAC9BzC,MAAMmB,SAAS,CAACwB,OAAO,GAAGD;IAC9B;IACA,gGAAgG;IAChG,IAAI1E,aAAa;QACbgC,MAAMmB,SAAS,GAAG1B;IACtB;IACA,IAAImD,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,kGAAkG;QAClGlD,OAAMmD,SAAS,CAAC;YACZ,IAAIjF,aAAaE,aAAa;gBAC1B,sCAAsC;gBACtCgF,QAAQC,KAAK,CAAC,CAAC,iFAAiF,CAAC;YACrG;QACJ,GAAG;YACCnF;YACAE;SACH;IACL;IACA,OAAOgC;AACX"}