@fluentui/react-combobox 9.11.8 → 9.13.0

package/CHANGELOG.md

@@ -1,12 +1,47 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Mon, 17 Jun 2024 07:31:08 GMT and should not be manually modified.
+This log was last generated on Thu, 04 Jul 2024 15:13:30 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.13.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.13.0)
+
+Thu, 04 Jul 2024 15:13:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.12.0..@fluentui/react-combobox_v9.13.0)
+
+### Minor changes
+
+- vertically align combobox and dropdown components ([PR #31812](https://github.com/microsoft/fluentui/pull/31812) by kirpadv@gmail.com)
+
+## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.12.0)
+
+Mon, 01 Jul 2024 20:30:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.11.8..@fluentui/react-combobox_v9.12.0)
+
+### Minor changes
+
+- feat: Add disableAutoFocus to Combobox and Listbox for cases when the popover is open on focus. ([PR #31852](https://github.com/microsoft/fluentui/pull/31852) by estebanmu@microsoft.com)
+- fix: Listbox updates activedescendant correctly ([PR #31415](https://github.com/microsoft/fluentui/pull/31415) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-aria to v9.13.0 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.63 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-field to v9.1.69 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.40 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-portal to v9.4.29 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-positioning to v9.15.4 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-tabster to v9.22.1 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-utilities to v9.18.11 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+
+### Patches
+
+- chore: add eslint react-compiler ([PR #31457](https://github.com/microsoft/fluentui/pull/31457) by seanmonahan@microsoft.com)
+- fix: add autoSize: true to Combobox and Dropdown by default ([PR #31864](https://github.com/microsoft/fluentui/pull/31864) by sarah.higley@microsoft.com)
+- close controlled dropdown by clicking outside ([PR #31786](https://github.com/microsoft/fluentui/pull/31786) by kirpadv@gmail.com)
+- style: turn off react-compiler lints for non compliant code ([PR #31795](https://github.com/microsoft/fluentui/pull/31795) by martinhochel@microsoft.com)
+- chore: Update react-icons package to ^2.0.245 ([PR #31802](https://github.com/microsoft/fluentui/pull/31802) by ololubek@microsoft.com)
+
 ## [9.11.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.11.8)
 
-Mon, 17 Jun 2024 07:31:08 GMT 
+Mon, 17 Jun 2024 07:34:17 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.11.7..@fluentui/react-combobox_v9.11.8)
 
 ### Patches

package/dist/index.d.ts

@@ -68,6 +68,12 @@ export declare type ComboboxBaseProps = SelectionProps & HighlightedOptionProps
      * The default value displayed in the trigger input or button when the combobox's value is uncontrolled
      */
     defaultValue?: string;
+    /**
+     * Disable auto-focusing on the first item when mounting.
+     *
+     * @default false
+     */
+    disableAutoFocus?: boolean;
     /**
      * Render the combobox's popup inline in the DOM.
      * This has accessibility benefits, particularly for touch screen readers.
@@ -260,7 +266,7 @@ export declare const listboxClassNames: SlotClassNames<ListboxSlots>;
 /**
  * Context shared with all Listbox Options
  */
-export declare type ListboxContextValue = Pick<ListboxState, 'activeOption' | 'focusVisible' | 'multiselect' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'setActiveOption'> & {
+export declare type ListboxContextValue = Pick<ListboxState, 'activeOption' | 'focusVisible' | 'getOptionById' | 'getOptionsMatchingValue' | 'multiselect' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'setActiveOption'> & {
     onOptionClick: (e: React_2.MouseEvent<HTMLElement>) => void;
     onActiveDescendantChange?: (e: ActiveDescendantChangeEvent) => void;
 };
@@ -273,7 +279,14 @@ export declare type ListboxContextValues = {
 /**
  * Listbox Props
  */
-export declare type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps;
+export declare type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps & {
+    /**
+     * Disable auto-focusing on the first item when mounting.
+     *
+     * @default false
+     */
+    disableAutoFocus?: boolean;
+};
 
 export declare const ListboxProvider: React_2.Provider<ListboxContextValue | undefined> & React_2.FC<React_2.ProviderProps<ListboxContextValue | undefined>>;
 
@@ -300,6 +313,7 @@ export declare type ListboxState = ComponentState<ListboxSlots> & OptionCollecti
      * @see activeDescendantController.focus(id)
      */
     setActiveOption(option?: OptionValue): void;
+    standalone: boolean;
     selectOption(event: SelectionEvents, option: OptionValue): void;
     activeDescendantController: ActiveDescendantImperativeRef;
     onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;

package/lib/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Combobox.ts"],"sourcesContent":["export * from './components/Combobox/index';\n"],"names":[],"mappings":"AAAA,cAAc,8BAA8B"}
+{"version":3,"sources":["Combobox.ts"],"sourcesContent":["export * from './components/Combobox/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,8BAA8B"}

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Dropdown.ts"],"sourcesContent":["export * from './components/Dropdown/index';\n"],"names":[],"mappings":"AAAA,cAAc,8BAA8B"}
+{"version":3,"sources":["Dropdown.ts"],"sourcesContent":["export * from './components/Dropdown/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,8BAA8B"}

package/lib/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Listbox.ts"],"sourcesContent":["export * from './components/Listbox/index';\n"],"names":[],"mappings":"AAAA,cAAc,6BAA6B"}
+{"version":3,"sources":["Listbox.ts"],"sourcesContent":["export * from './components/Listbox/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,6BAA6B"}

package/lib/Option.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Option.ts"],"sourcesContent":["export * from './components/Option/index';\n"],"names":[],"mappings":"AAAA,cAAc,4BAA4B"}
+{"version":3,"sources":["Option.ts"],"sourcesContent":["export * from './components/Option/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,4BAA4B"}

package/lib/OptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["OptionGroup.ts"],"sourcesContent":["export * from './components/OptionGroup/index';\n"],"names":[],"mappings":"AAAA,cAAc,iCAAiC"}
+{"version":3,"sources":["OptionGroup.ts"],"sourcesContent":["export * from './components/OptionGroup/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,iCAAiC"}

package/lib/Selection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Selection.ts"],"sourcesContent":["export * from './utils/Selection.types';\n"],"names":[],"mappings":"AAAA,cAAc,0BAA0B"}
+{"version":3,"sources":["Selection.ts"],"sourcesContent":["export * from './utils/Selection.types';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,0BAA0B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useComboboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
+{"version":3,"sources":["Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useComboboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxProvider value={contextValues.listbox}>\n          {/*eslint-disable-next-line deprecation/deprecation*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.input />\n            {state.clearIcon && <state.clearIcon />}\n            {state.expandIcon && <state.expandIcon />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line deprecation/deprecation*/}\n          </ComboboxContext.Provider>\n        </ListboxProvider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","ListboxProvider","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","listbox","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,eAAe,QAAQ,gCAAgC;AAEhE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DL,YAA2BI;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACP;YAAgCQ,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN;gBAAgBK,OAAOF,cAAcI,OAAO;0BAE3C,cAAA,MAACR,gBAAgBS,QAAQ;oBAACH,OAAOF,cAAcM,QAAQ;;sCACrD,KAACP,MAAMQ,KAAK;wBACXR,MAAMS,SAAS,kBAAI,KAACT,MAAMS,SAAS;wBACnCT,MAAMU,UAAU,kBAAI,KAACV,MAAMU,UAAU;wBACrCV,MAAMK,OAAO,IACXL,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMK,OAAO,sBAEd,KAACX;4BAAOkB,WAAWZ,MAAMY,SAAS;sCAChC,cAAA,KAACZ,MAAMK,OAAO;0BAElB;;;;;;AAOd,EAAE"}
+{"version":3,"sources":["renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxProvider value={contextValues.listbox}>\n          {/*eslint-disable-next-line deprecation/deprecation*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.input />\n            {state.clearIcon && <state.clearIcon />}\n            {state.expandIcon && <state.expandIcon />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line deprecation/deprecation*/}\n          </ComboboxContext.Provider>\n        </ListboxProvider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","ListboxProvider","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","listbox","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","mountNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,eAAe,QAAQ,gCAAgC;AAEhE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DL,YAA2BI;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACP;YAAgCQ,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN;gBAAgBK,OAAOF,cAAcI,OAAO;0BAE3C,cAAA,MAACR,gBAAgBS,QAAQ;oBAACH,OAAOF,cAAcM,QAAQ;;sCACrD,KAACP,MAAMQ,KAAK;wBACXR,MAAMS,SAAS,kBAAI,KAACT,MAAMS,SAAS;wBACnCT,MAAMU,UAAU,kBAAI,KAACV,MAAMU,UAAU;wBACrCV,MAAMK,OAAO,IACXL,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMK,OAAO,sBAEd,KAACX;4BAAOkB,WAAWZ,MAAMY,SAAS;sCAChC,cAAA,KAACZ,MAAMK,OAAO;0BAElB;;;;;;AAOd,EAAE"}

package/lib/components/Combobox/useCombobox.js

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { useActiveDescendant } from '@fluentui/react-aria';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
-import { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot, useOnClickOutside } from '@fluentui/react-utilities';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
 import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
 import { Listbox } from '../Listbox/Listbox';
@@ -18,6 +19,7 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
  * @param props - props from this instance of Combobox
  * @param ref - reference to root HTMLElement of Combobox
  */ export const useCombobox_unstable = (props, ref)=>{
+    'use no memo';
     var _state_clearIcon, _state_clearIcon1;
     // Merge props from surrounding <Field>, if any
     props = useFieldControlProps_unstable(props, {
@@ -33,9 +35,9 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         editable: true,
         activeDescendantController
     });
-    const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, value, hasFocus } = baseState;
+    const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } = baseState;
     const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
-    const { freeform, inlinePopup } = props;
+    const { disableAutoFocus = false, freeform, inlinePopup } = props;
     const comboId = useId('combobox-');
     const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
         props,
@@ -50,7 +52,8 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         state: baseState,
         triggerRef,
         defaultProps: {
-            children: props.children
+            children: props.children,
+            disableAutoFocus
         }
     });
     var _props_input;
@@ -107,6 +110,17 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         activeDescendantController,
         ...baseState
     };
+    const { targetDocument } = useFluent();
+    useOnClickOutside({
+        element: targetDocument,
+        callback: (event)=>setOpen(event, false),
+        refs: [
+            triggerRef,
+            comboboxPopupRef,
+            comboboxTargetRef
+        ],
+        disabled: !open
+    });
     /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};
     const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, (event)=>{
         var _triggerRef_current;

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

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

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

@@ -32,6 +32,7 @@ const useStyles = /*#__PURE__*/__styles({
     Brf1p80: "f1869bpl",
     Bf4jedk: "f1exfvgq",
     qhf8xq: "f10pi13n",
+    ha4doy: "fmrv4ls",
     Bbr2w1p: "f14a1fxs",
     Bduesf4: "f3e99gv",
     Bpq79vn: "fhljsf7",
@@ -198,7 +199,7 @@ const useStyles = /*#__PURE__*/__styles({
 }, {
   d: [".f122n59{align-items:center;}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
     p: -1
-  }], ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{justify-content:space-between;}", ".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;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", [".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}", {
+  }], ".f1ewtqcl{box-sizing:border-box;}", ".f14mj54c{column-gap:var(--spacingHorizontalXXS);}", ".fwk3njj{display:inline-grid;}", ".fz17x9o{grid-template-columns:1fr auto;}", ".f1869bpl{justify-content:space-between;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".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;}", ".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", [".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}", {
     p: -1
   }], ".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);}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
     p: -1
@@ -376,6 +377,8 @@ const useIconStyles = /*#__PURE__*/__styles({
  * Apply styling to the Combobox slots based on the state
  */
 export const useComboboxStyles_unstable = state => {
+  'use no memo';
+
   const {
     appearance,
     open,

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

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

package/lib/components/Combobox/useInputTriggerSlot.js

@@ -9,6 +9,7 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
  * with the semantics and event handlers needed for the Combobox and Dropdown components.
  * The element type of the ref should always match the element type used in the trigger shorthand.
  */ export function useInputTriggerSlot(triggerFromProps, ref, options) {
+    'use no memo';
     const { state: { open, value, selectOption, setValue, multiselect, selectedOptions, clearSelection, getOptionById, setOpen }, freeform, defaultProps, activeDescendantController } = options;
     const onBlur = (event)=>{
         // handle selection and updating value if freeform is false

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles.styles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n  const state = useDropdown_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useDropdownStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);\n\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Dropdown","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
+{"version":3,"sources":["Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles.styles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n  const state = useDropdown_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useDropdownStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);\n\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Dropdown","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Dropdown';\nexport * from './Dropdown.types';\nexport * from './renderDropdown';\nexport * from './useDropdown';\nexport * from './useDropdownStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Dropdown';\nexport * from './Dropdown.types';\nexport * from './renderDropdown';\nexport * from './useDropdown';\nexport * from './useDropdownStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxContext.Provider value={contextValues.listbox}>\n          {/*eslint-disable-next-line deprecation/deprecation*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.button>\n              {state.button.children}\n              {state.expandIcon && <state.expandIcon />}\n            </state.button>\n            {state.clearButton && <state.clearButton />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line deprecation/deprecation*/}\n          </ComboboxContext.Provider>\n        </ListboxContext.Provider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ActiveDescendantContextProvider","ComboboxContext","ListboxContext","renderDropdown_unstable","state","contextValues","root","value","activeDescendant","Provider","listbox","combobox","button","children","expandIcon","clearButton","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,+BAA+B,QAAQ,uBAAuB;AACvE,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,cAAc,QAAQ,gCAAgC;AAE/D;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DN,YAA2BK;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACN;YAAgCO,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN,eAAeO,QAAQ;gBAACF,OAAOF,cAAcK,OAAO;0BAEnD,cAAA,MAACT,gBAAgBQ,QAAQ;oBAACF,OAAOF,cAAcM,QAAQ;;sCACrD,MAACP,MAAMQ,MAAM;;gCACVR,MAAMQ,MAAM,CAACC,QAAQ;gCACrBT,MAAMU,UAAU,kBAAI,KAACV,MAAMU,UAAU;;;wBAEvCV,MAAMW,WAAW,kBAAI,KAACX,MAAMW,WAAW;wBACvCX,MAAMM,OAAO,IACXN,CAAAA,MAAMY,WAAW,iBAChB,KAACZ,MAAMM,OAAO,sBAEd,KAACZ;4BAAOmB,WAAWb,MAAMa,SAAS;sCAChC,cAAA,KAACb,MAAMM,OAAO;0BAElB;;;;;;AAOd,EAAE"}
+{"version":3,"sources":["renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxContext.Provider value={contextValues.listbox}>\n          {/*eslint-disable-next-line deprecation/deprecation*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.button>\n              {state.button.children}\n              {state.expandIcon && <state.expandIcon />}\n            </state.button>\n            {state.clearButton && <state.clearButton />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line deprecation/deprecation*/}\n          </ComboboxContext.Provider>\n        </ListboxContext.Provider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ActiveDescendantContextProvider","ComboboxContext","ListboxContext","renderDropdown_unstable","state","contextValues","root","value","activeDescendant","Provider","listbox","combobox","button","children","expandIcon","clearButton","inlinePopup","mountNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,+BAA+B,QAAQ,uBAAuB;AACvE,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,cAAc,QAAQ,gCAAgC;AAE/D;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DN,YAA2BK;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACN;YAAgCO,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN,eAAeO,QAAQ;gBAACF,OAAOF,cAAcK,OAAO;0BAEnD,cAAA,MAACT,gBAAgBQ,QAAQ;oBAACF,OAAOF,cAAcM,QAAQ;;sCACrD,MAACP,MAAMQ,MAAM;;gCACVR,MAAMQ,MAAM,CAACC,QAAQ;gCACrBT,MAAMU,UAAU,kBAAI,KAACV,MAAMU,UAAU;;;wBAEvCV,MAAMW,WAAW,kBAAI,KAACX,MAAMW,WAAW;wBACvCX,MAAMM,OAAO,IACXN,CAAAA,MAAMY,WAAW,iBAChB,KAACZ,MAAMM,OAAO,sBAEd,KAACZ;4BAAOmB,WAAWb,MAAMa,SAAS;sCAChC,cAAA,KAACb,MAAMM,OAAO;0BAElB;;;;;;AAOd,EAAE"}

package/lib/components/Dropdown/useButtonTriggerSlot.js

@@ -8,6 +8,7 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
  * with the semantics and event handlers needed for the Combobox and Dropdown components.
  * The element type of the ref should always match the element type used in the trigger shorthand.
  */ export function useButtonTriggerSlot(triggerFromProps, ref, options) {
+    'use no memo';
     const { state: { open, setOpen, getOptionById }, defaultProps, activeDescendantController } = options;
     // jump to matching option based on typing
     const searchString = React.useRef('');
@@ -64,9 +65,11 @@ import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
             setKeyTimeout(()=>{
                 searchString.current = '';
             }, 500);
+            if (open) {
+                moveToNextMatchingOptionWithSameCharacterHandling();
+            }
             // update state
             !open && setOpen(ev, true);
-            moveToNextMatchingOptionWithSameCharacterHandling();
         }
     };
     const trigger = useTriggerSlot(triggerFromProps, ref, {