npm - @fluentui/react-combobox - Versions diffs - 9.11.5 → 9.11.6 - Mend

@fluentui/react-combobox 9.11.5 → 9.11.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,25 @@
 # Change Log - @fluentui/react-combobox
-This log was last generated on Mon, 20 May 2024 12:36:29 GMT and should not be manually modified.
+This log was last generated on Thu, 23 May 2024 07:57:53 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.11.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.11.6)
+Thu, 23 May 2024 07:57:53 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.11.5..@fluentui/react-combobox_v9.11.6)
+### Patches
+- chore: replace usage of .shorthands() in styles ([PR #31432](https://github.com/microsoft/fluentui/pull/31432) by olfedias@microsoft.com)
+- Bump @fluentui/react-aria to v9.11.4 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+- Bump @fluentui/react-portal to v9.4.26 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+- Bump @fluentui/react-positioning to v9.15.2 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
 ## [9.11.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.11.5)
-Mon, 20 May 2024 12:36:29 GMT
+Mon, 20 May 2024 12:44:53 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.11.4..@fluentui/react-combobox_v9.11.5)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -43,6 +43,7 @@ declare type ComboboxBaseOpenChangeData = {
     open: boolean;
 };
+/** Possible event types for onOpen */
 declare type ComboboxBaseOpenEvents = React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.FocusEvent<HTMLElement>;
 /**
@@ -170,6 +171,9 @@ export declare type ComboboxOpenEvents = ComboboxBaseOpenEvents;
  */
 export declare type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> & ComboboxBaseProps & {
     freeform?: boolean;
+    /**
+     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.
+     */
     children?: React_2.ReactNode;
 };
@@ -181,10 +185,15 @@ export declare type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>,
 export declare const ComboboxProvider: Provider<ComboboxContextValue> & FC<ProviderProps<ComboboxContextValue>>;
 export declare type ComboboxSlots = {
+    /** The root combobox slot */
     root: NonNullable<Slot<'div'>>;
+    /** The dropdown arrow icon */
     expandIcon?: Slot<'span'>;
+    /** The dropdown clear icon */
     clearIcon?: Slot<'span'>;
+    /** The primary slot, an input with role="combobox" */
     input: NonNullable<Slot<'input'>>;
+    /** The dropdown listbox slot */
     listbox?: Slot<typeof Listbox>;
 };
@@ -215,10 +224,15 @@ export declare type DropdownOpenEvents = ComboboxBaseOpenEvents;
 export declare type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;
 export declare type DropdownSlots = {
+    /** The root dropdown slot */
     root: NonNullable<Slot<'div'>>;
+    /** The dropdown arrow icon */
     expandIcon?: Slot<'span'>;
+    /** The dropdown clear icon */
     clearButton?: Slot<'button'>;
+    /** The primary slot, the element with role="combobox" */
     button: NonNullable<Slot<'button'>>;
+    /** The dropdown listbox slot */
     listbox?: Slot<typeof Listbox>;
 };
@@ -226,6 +240,7 @@ export declare type DropdownSlots = {
  * State used in rendering Dropdown
  */
 export declare type DropdownState = ComponentState<DropdownSlots> & Omit<ComboboxBaseState, 'freeform'> & {
+    /** Whether the placeholder is currently displayed */
     placeholderVisible: boolean;
     showClearButton?: boolean;
     activeDescendantController: ActiveDescendantImperativeRef;
@@ -263,6 +278,7 @@ export declare type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps
 export declare const ListboxProvider: React_2.Provider<ListboxContextValue | undefined> & React_2.FC<React_2.ProviderProps<ListboxContextValue | undefined>>;
 export declare type ListboxSlots = {
+    /** The root slot, a `<div>` with `role="listbox"` */
     root: Slot<'div'>;
 };
@@ -318,6 +334,7 @@ declare type OptionCollectionState = {
     getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue[];
     /** The unordered option data. */
     options: OptionValue[];
+    /** A function that child options call to register their values. Returns a function to unregister the option. */
     registerOption: (option: OptionValue, element: HTMLElement) => () => void;
 };
@@ -334,7 +351,12 @@ export declare const optionGroupClassNames: SlotClassNames<OptionGroupSlots>;
 export declare type OptionGroupProps = ComponentProps<Partial<OptionGroupSlots>>;
 export declare type OptionGroupSlots = {
+    /** The root group wrapper */
     root: NonNullable<Slot<'div'>>;
+    /**
+     * The option group label, displayed as static text before the child options.
+     * If not using label, it's recommended to set `aria-label` directly on the OptionGroup instead.
+     */
     label?: Slot<'span'>;
 };
@@ -343,6 +365,10 @@ export declare type OptionGroupSlots = {
  */
 export declare type OptionGroupState = ComponentState<OptionGroupSlots>;
+/**
+ * Data for the onOptionSelect callback.
+ * `optionValue` and `optionText` will be undefined if multiple options are modified at once.
+ */
 export declare type OptionOnSelectData = {
     optionValue: string | undefined;
     optionText: string | undefined;
@@ -358,6 +384,11 @@ export declare type OptionProps = ComponentProps<Partial<OptionSlots>> & {
      * Disabled options cannot be selected, but are still keyboard navigable
      */
     disabled?: boolean;
+    /**
+     * Defines a unique identifier for the option.
+     * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.
+     * Defaults to `text` if not provided.
+     */
     value?: string;
 } & ({
     /**
@@ -379,7 +410,9 @@ export declare type OptionProps = ComponentProps<Partial<OptionSlots>> & {
 });
 export declare type OptionSlots = {
+    /** The root option slot, with role="option" */
     root: NonNullable<Slot<'div'>>;
+    /** The check icon that is visible for selected options */
     checkIcon: Slot<'span'>;
 };
@@ -395,7 +428,9 @@ export declare type OptionState = ComponentState<OptionSlots> & Pick<OptionProps
      * @deprecated - no longer used internally
      */
     focusVisible: boolean;
+    /** If true, the option is part of a multiselect combobox or listbox */
     multiselect?: boolean;
+    /** If true, the option is selected */
     selected: boolean;
 };
@@ -435,6 +470,7 @@ export declare const renderOption_unstable: (state: OptionState) => JSX.Element;
  */
 export declare const renderOptionGroup_unstable: (state: OptionGroupState) => JSX.Element;
+/** Possible event types for onOptionSelect */
 export declare type SelectionEvents = React_2.ChangeEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;
 declare type SelectionProps = {
@@ -450,6 +486,7 @@ declare type SelectionProps = {
      * @default false
      */
     multiselect?: boolean;
+    /** Callback when an option is selected */
     onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;
     /**
      * An array of selected option keys.
@@ -459,6 +496,7 @@ declare type SelectionProps = {
     selectedOptions?: string[];
 };
+/** Values returned by the useSelection hook */
 declare type SelectionState = {
     clearSelection: (event: SelectionEvents) => void;
     selectedOptions: string[];

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

	@@ -1 +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"}
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"}

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

@@ -20,10 +20,11 @@ const fieldHeights = {
 const useStyles = /*#__PURE__*/__styles({
   root: {
     Bt984gj: "f122n59",
-    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
-    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
-    B7oj6ja: ["f1jar5jt", "fyu767a"],
-    Btl43ni: ["fyu767a", "f1jar5jt"],
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5",
     B7ck84d: "f1ewtqcl",
     i8kkvl: "f14mj54c",
     mc9l5x: "fwk3njj",
@@ -43,9 +44,10 @@ const useStyles = /*#__PURE__*/__styles({
     Dlnsje: "f145g4dw",
     d9w3h3: ["f1kp91vd", "f1ibwz09"],
     B3778ie: ["f1ibwz09", "f1kp91vd"],
-    Bcgy8vk: "f14pi962",
-    Bw17bha: "f1lh990p",
-    B1q35kw: "f1jc6hxc",
+    B1q35kw: 0,
+    Bw17bha: 0,
+    Bcgy8vk: 0,
+    Bjuhk93: "f1mnjydx",
     Gjdm7m: "f13evtba",
     b1kco5: "f1yk9hq",
     Ba2ppi3: "fhwpy7i",
@@ -63,10 +65,11 @@ const useStyles = /*#__PURE__*/__styles({
   },
   listbox: {
     E5pizo: "f1hg901r",
-    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
-    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
-    B7oj6ja: ["f1jar5jt", "fyu767a"],
-    Btl43ni: ["fyu767a", "f1jar5jt"],
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5",
     Bxyxcbc: "fmmk62d",
     B7ck84d: "f1ewtqcl"
   },
@@ -91,18 +94,23 @@ const useStyles = /*#__PURE__*/__styles({
   },
   outline: {
     De3pzq: "fxugw4r",
-    B4j52fo: "f192inf7",
-    Bekrc4i: ["f5tn483", "f1ojsxk5"],
-    Bn0qgzm: "f1vxd6vx",
-    ibv6hh: ["f1ojsxk5", "f5tn483"],
-    icvyot: "fzkkow9",
-    vrafjx: ["fcdblym", "fjik90z"],
-    oivjwe: "fg706s2",
-    wvpqe5: ["fjik90z", "fcdblym"],
-    g2u3we: "fj3muxo",
-    h3c5rm: ["f1akhkt", "f1lxtadh"],
+    Bgfg5da: 0,
     B9xav0g: "f1c1zstj",
-    zhjwy3: ["f1lxtadh", "f1akhkt"]
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fhz96rm"
   },
   outlineInteractive: {
     Bgoe8wy: "fvcxoqz",
@@ -116,43 +124,55 @@ const useStyles = /*#__PURE__*/__styles({
   },
   underline: {
     De3pzq: "f1c21dwh",
-    Bn0qgzm: "f1vxd6vx",
-    oivjwe: "fg706s2",
-    B9xav0g: "f1c1zstj",
-    Bbmb7ep: ["f1krrbdw", "f1deotkl"],
-    Beyfa6y: ["f1deotkl", "f1krrbdw"],
-    B7oj6ja: ["f10ostut", "f1ozlkrg"],
-    Btl43ni: ["f1ozlkrg", "f10ostut"]
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    Bgfg5da: "f9ez7ne",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "fokr779"
   },
   "filled-lighter": {
     De3pzq: "fxugw4r",
-    B4j52fo: "f192inf7",
-    Bekrc4i: ["f5tn483", "f1ojsxk5"],
-    Bn0qgzm: "f1vxd6vx",
-    ibv6hh: ["f1ojsxk5", "f5tn483"],
-    icvyot: "fzkkow9",
-    vrafjx: ["fcdblym", "fjik90z"],
-    oivjwe: "fg706s2",
-    wvpqe5: ["fjik90z", "fcdblym"],
-    g2u3we: "fghlq4f",
-    h3c5rm: ["f1gn591s", "fjscplz"],
-    B9xav0g: "fb073pr",
-    zhjwy3: ["fjscplz", "f1gn591s"]
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f88035w"
   },
   "filled-darker": {
     De3pzq: "f16xq7d1",
-    B4j52fo: "f192inf7",
-    Bekrc4i: ["f5tn483", "f1ojsxk5"],
-    Bn0qgzm: "f1vxd6vx",
-    ibv6hh: ["f1ojsxk5", "f5tn483"],
-    icvyot: "fzkkow9",
-    vrafjx: ["fcdblym", "fjik90z"],
-    oivjwe: "fg706s2",
-    wvpqe5: ["fjik90z", "fcdblym"],
-    g2u3we: "fghlq4f",
-    h3c5rm: ["f1gn591s", "fjscplz"],
-    B9xav0g: "fb073pr",
-    zhjwy3: ["fjscplz", "f1gn591s"]
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f88035w"
   },
   invalid: {
     tvckwq: "fs4k3qj",
@@ -176,7 +196,23 @@ const useStyles = /*#__PURE__*/__styles({
     n51gp8: ["f14g86mu", "f1rvyvqg"]
   }
 }, {
-  d: [".f122n59{align-items:center;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".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);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".f1hg901r{box-shadow:var(--shadow16);}", ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".f19g0ac{z-index:1;}", ".frvgh55{height:24px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1d2rq10{height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".fbhnoac{height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  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);}", {
+    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
+  }], ".fmmk62d{max-height:80vh;}", ".fjseox{display:none;}", ".f19g0ac{z-index:1;}", ".frvgh55{height:24px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1d2rq10{height:32px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}", ".fbhnoac{height:40px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}", {
+    p: -2
+  }], ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", [".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}", {
+    p: -1
+  }], [".fokr779{border-radius:0;}", {
+    p: -1
+  }], [".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -2
+  }], ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", [".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -2
+  }], ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
   w: [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
   m: [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
@@ -200,10 +236,23 @@ const useInputStyles = /*#__PURE__*/__styles({
   input: {
     qb2dma: "f1ub7u0d",
     De3pzq: "f1c21dwh",
-    B4j52fo: "fre7gi1",
-    Bekrc4i: ["f1358rze", "f1rvrf73"],
-    Bn0qgzm: "fqdk4by",
-    ibv6hh: ["f1rvrf73", "f1358rze"],
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f3bhgqh",
     sj55zd: "f19n0e5",
     Bahqtrf: "fk6fouc",
     Brovlpu: "ftqa4ok",
@@ -215,30 +264,33 @@ const useInputStyles = /*#__PURE__*/__styles({
     Be2twd7: "fy9rknc",
     Bhrd7zp: "figsok6",
     Bg96gwp: "fwrc4pm",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1xile11", "fqznh8f"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: ["fxe2rs", "f1gflqzi"]
   },
   medium: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "fkhj508",
     Bhrd7zp: "figsok6",
     Bg96gwp: "f1i3iumi",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1e60jzv", "f135dnwl"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: ["fzy81xo", "f58b53b"]
   },
   large: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "fod5ikn",
     Bhrd7zp: "figsok6",
     Bg96gwp: "faaz57k",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["fnphzt9", "flt1dlf"]
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: ["f1kdav7a", "footqm6"]
   },
   disabled: {
     sj55zd: "f1s2aq7o",
@@ -247,7 +299,21 @@ const useInputStyles = /*#__PURE__*/__styles({
     yvdlaj: "fahhnxm"
   }
 }, {
-  d: [".f1ub7u0d{align-self:stretch;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"],
+  d: [".f1ub7u0d{align-self:stretch;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", [".f3bhgqh{border:none;}", {
+    p: -2
+  }], ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", [".fxe2rs{padding:0 0 0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", {
+    p: -1
+  }], [".f1gflqzi{padding:0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS)) 0 0;}", {
+    p: -1
+  }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".fzy81xo{padding:0 0 0 calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", {
+    p: -1
+  }], [".f58b53b{padding:0 calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)) 0 0;}", {
+    p: -1
+  }], ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", [".f1kdav7a{padding:0 0 0 calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", {
+    p: -1
+  }], [".footqm6{padding:0 calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)) 0 0;}", {
+    p: -1
+  }], ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"],
   f: [".ftqa4ok:focus{outline-style:none;}"]
 });
 const useIconStyles = /*#__PURE__*/__styles({
@@ -265,16 +331,19 @@ const useIconStyles = /*#__PURE__*/__styles({
   visuallyHidden: {
     Bh84pgu: "f1ekcaio",
     Bqenvij: "f1mpe4l3",
-    B6of3ja: "fkrn0sh",
-    t21cq0: ["f179hvsh", "f1538868"],
-    jrapky: "fmxx68s",
-    Frg6f3: ["f1538868", "f179hvsh"],
-    B68tc82: "f1p9o1ba",
-    Bmxbyg5: "f1sil6mw",
-    z8tnut: "f1nbblvp",
-    z189sj: ["fifp7yv", "f1asdtw4"],
-    Byoj8tv: "f1ov4xf1",
-    uwmqm3: ["f1asdtw4", "fifp7yv"],
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: "f1jlpb2r",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1c5fvqg",
     a9b677: "frkrog8",
     qhf8xq: "f1euv43f"
   },
@@ -295,7 +364,13 @@ const useIconStyles = /*#__PURE__*/__styles({
     Bceei9c: "fdrzuqr"
   }
 }, {
-  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".f1k6fduh{cursor:pointer;}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".fjseox{display:none;}", ".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}", ".f1mpe4l3{height:1px;}", ".fkrn0sh{margin-top:-1px;}", ".f179hvsh{margin-right:-1px;}", ".f1538868{margin-left:-1px;}", ".fmxx68s{margin-bottom:-1px;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1nbblvp{padding-top:0px;}", ".fifp7yv{padding-right:0px;}", ".f1asdtw4{padding-left:0px;}", ".f1ov4xf1{padding-bottom:0px;}", ".frkrog8{width:1px;}", ".f1euv43f{position:absolute;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}"]
+  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".f1k6fduh{cursor:pointer;}", ".ftgm304{display:block;}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".fvc9v3g svg{display:block;}", ".fjseox{display:none;}", ".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}", ".f1mpe4l3{height:1px;}", [".f1jlpb2r{margin:-1px;}", {
+    p: -1
+  }], [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], [".f1c5fvqg{padding:0px;}", {
+    p: -1
+  }], ".frkrog8{width:1px;}", ".f1euv43f{position:absolute;}", ".f4ybsrx{font-size:16px;}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}"]
 });
 /**
  * Apply styling to the Combobox slots based on the state

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

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