@fluentui/react-select 9.5.1 → 9.5.3

package/CHANGELOG.md

@@ -1,19 +1,43 @@
 # Change Log - @fluentui/react-select
 
-This log was last generated on Thu, 23 Apr 2026 11:59:31 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Jun 2026 11:03:43 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.5.3)
+
+Wed, 24 Jun 2026 11:03:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.5.2..@fluentui/react-select_v9.5.3)
+
+### Patches
+
+- fix: move Field control props to base hooks ([PR #36312](https://github.com/microsoft/fluentui/pull/36312) by dmytrokirpa@microsoft.com)
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- Bump @fluentui/react-field to v9.5.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
+## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.5.2)
+
+Tue, 26 May 2026 09:39:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.5.1..@fluentui/react-select_v9.5.2)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
 ## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.5.1)
 
-Thu, 23 Apr 2026 11:59:31 GMT 
+Thu, 23 Apr 2026 14:21:11 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.5.0..@fluentui/react-select_v9.5.1)
 
 ### Patches
 
-- Bump @fluentui/react-field to v9.5.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 
 ## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.5.0)
 

package/lib/components/Select/useSelect.js

@@ -13,12 +13,6 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
  * @param props - props from this instance of Select
  * @param ref - reference to the `<select>` element in Select
  */ export const useSelect_unstable = (props, ref)=>{
-    // Merge props from surrounding <Field>, if any
-    props = useFieldControlProps_unstable(props, {
-        supportsLabelFor: true,
-        supportsRequired: true,
-        supportsSize: true
-    });
     const overrides = useOverrides();
     var _overrides_inputDefaultAppearance;
     const { appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', size = 'medium', ...baseProps } = props;
@@ -40,6 +34,11 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
  * @param props - props from this instance of Select (without appearance/size)
  * @param ref - reference to the `<select>` element in Select
  */ export const useSelectBase_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = useFieldControlProps_unstable(props, {
+        supportsLabelFor: true,
+        supportsRequired: true
+    });
     const { defaultValue, value, select, icon, root, onChange } = props;
     const nativeProps = getPartitionedNativeProps({
         props,

package/lib/components/Select/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectBaseProps, SelectBaseState, SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const overrides = useOverrides();\n\n  const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;\n\n  const state = useSelectBase_unstable(baseProps, ref);\n\n  if (state.icon) {\n    state.icon.children ??= <ChevronDownRegular />;\n  }\n\n  return { ...state, appearance, size };\n};\n\n/**\n * Create the base state required to render Select without design-specific props.\n *\n * @param props - props from this instance of Select (without appearance/size)\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelectBase_unstable = (props: SelectBaseProps, ref: React.Ref<HTMLSelectElement>): SelectBaseState => {\n  const { defaultValue, value, select, icon, root, onChange } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['defaultValue', 'onChange', 'value'],\n  });\n\n  const state: SelectBaseState = {\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: slot.always(select, {\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'select',\n    }),\n    icon: slot.optional(icon, {\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","appearance","inputDefaultAppearance","size","baseProps","state","useSelectBase_unstable","icon","children","defaultValue","value","select","root","onChange","nativeProps","primarySlotTagName","excludedPropNames","components","always","defaultProps","primary","elementType","optional","renderByDefault","event","target"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAC9F,SAASC,kBAAkB,QAAQ,wBAAwB;AAE3D,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,YAAYP;QAEGO;IAArB,MAAM,EAAEC,aAAaD,CAAAA,oCAAAA,UAAUE,sBAAsB,cAAhCF,+CAAAA,oCAAoC,SAAS,EAAEG,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGT;IAEtG,MAAMU,QAAQC,uBAAuBF,WAAWR;IAEhD,IAAIS,MAAME,IAAI,EAAE;YACdF;;QAAAA,cAAAA,cAAAA,MAAME,IAAI,EAACC,yDAAXH,YAAWG,yBAAa,oBAACjB;IAC3B;IAEA,OAAO;QAAE,GAAGc,KAAK;QAAEJ;QAAYE;IAAK;AACtC,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,yBAAyB,CAACX,OAAwBC;IAC7D,MAAM,EAAEa,YAAY,EAAEC,KAAK,EAAEC,MAAM,EAAEJ,IAAI,EAAEK,IAAI,EAAEC,QAAQ,EAAE,GAAGlB;IAE9D,MAAMmB,cAAc1B,0BAA0B;QAC5CO;QACAoB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAgB;YAAY;SAAQ;IAC1D;IAEA,MAAMX,QAAyB;QAC7BY,YAAY;YACVL,MAAM;YACND,QAAQ;YACRJ,MAAM;QACR;QACAI,QAAQrB,KAAK4B,MAAM,CAACP,QAAQ;YAC1BQ,cAAc;gBACZV;gBACAC;gBACAd;gBACA,GAAGkB,YAAYM,OAAO;YACxB;YACAC,aAAa;QACf;QACAd,MAAMjB,KAAKgC,QAAQ,CAACf,MAAM;YACxBgB,iBAAiB;YACjBF,aAAa;QACf;QACAT,MAAMtB,KAAK4B,MAAM,CAACN,MAAM;YACtBO,cAAcL,YAAYF,IAAI;YAC9BS,aAAa;QACf;IACF;IAEAhB,MAAMM,MAAM,CAACE,QAAQ,GAAGxB,iBAAiBmC,CAAAA;QACvCX,qBAAAA,+BAAAA,SAAWW,OAAO;YAAEd,OAAO,AAACc,MAAMC,MAAM,CAAuBf,KAAK;QAAC;IACvE;IAEA,OAAOL;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectBaseProps, SelectBaseState, SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  const overrides = useOverrides();\n\n  const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;\n\n  const state = useSelectBase_unstable(baseProps, ref);\n\n  if (state.icon) {\n    state.icon.children ??= <ChevronDownRegular />;\n  }\n\n  return { ...state, appearance, size };\n};\n\n/**\n * Create the base state required to render Select without design-specific props.\n *\n * @param props - props from this instance of Select (without appearance/size)\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelectBase_unstable = (props: SelectBaseProps, ref: React.Ref<HTMLSelectElement>): SelectBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { defaultValue, value, select, icon, root, onChange } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['defaultValue', 'onChange', 'value'],\n  });\n\n  const state: SelectBaseState = {\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: slot.always(select, {\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'select',\n    }),\n    icon: slot.optional(icon, {\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","overrides","appearance","inputDefaultAppearance","size","baseProps","state","useSelectBase_unstable","icon","children","supportsLabelFor","supportsRequired","defaultValue","value","select","root","onChange","nativeProps","primarySlotTagName","excludedPropNames","components","always","defaultProps","primary","elementType","optional","renderByDefault","event","target"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAC9F,SAASC,kBAAkB,QAAQ,wBAAwB;AAE3D,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,MAAMC,YAAYJ;QAEGI;IAArB,MAAM,EAAEC,aAAaD,CAAAA,oCAAAA,UAAUE,sBAAsB,cAAhCF,+CAAAA,oCAAoC,SAAS,EAAEG,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAEtG,MAAMO,QAAQC,uBAAuBF,WAAWL;IAEhD,IAAIM,MAAME,IAAI,EAAE;YACdF;;QAAAA,cAAAA,cAAAA,MAAME,IAAI,EAACC,yDAAXH,YAAWG,yBAAa,oBAACd;IAC3B;IAEA,OAAO;QAAE,GAAGW,KAAK;QAAEJ;QAAYE;IAAK;AACtC,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,yBAAyB,CAACR,OAAwBC;IAC7D,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEW,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,YAAY,EAAEC,KAAK,EAAEC,MAAM,EAAEN,IAAI,EAAEO,IAAI,EAAEC,QAAQ,EAAE,GAAGjB;IAE9D,MAAMkB,cAAczB,0BAA0B;QAC5CO;QACAmB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAgB;YAAY;SAAQ;IAC1D;IAEA,MAAMb,QAAyB;QAC7Bc,YAAY;YACVL,MAAM;YACND,QAAQ;YACRN,MAAM;QACR;QACAM,QAAQpB,KAAK2B,MAAM,CAACP,QAAQ;YAC1BQ,cAAc;gBACZV;gBACAC;gBACAb;gBACA,GAAGiB,YAAYM,OAAO;YACxB;YACAC,aAAa;QACf;QACAhB,MAAMd,KAAK+B,QAAQ,CAACjB,MAAM;YACxBkB,iBAAiB;YACjBF,aAAa;QACf;QACAT,MAAMrB,KAAK2B,MAAM,CAACN,MAAM;YACtBO,cAAcL,YAAYF,IAAI;YAC9BS,aAAa;QACf;IACF;IAEAlB,MAAMQ,MAAM,CAACE,QAAQ,GAAGvB,iBAAiBkC,CAAAA;QACvCX,qBAAAA,+BAAAA,SAAWW,OAAO;YAAEd,OAAO,AAACc,MAAMC,MAAM,CAAuBf,KAAK;QAAC;IACvE;IAEA,OAAOP;AACT,EAAE"}

package/lib/components/Select/useSelectStyles.styles.js

@@ -301,8 +301,6 @@ const useIconStyles = /*#__PURE__*/__styles({
  * Apply styling to the Select slots based on the state
  */
 export const useSelectStyles_unstable = state => {
-  'use no memo';
-
   const {
     size,
     appearance
@@ -312,9 +310,12 @@ export const useSelectStyles_unstable = state => {
   const iconStyles = useIconStyles();
   const rootStyles = useRootStyles();
   const selectStyles = useSelectStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.select.className = mergeClasses(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
   }
   return state;

package/lib/components/Select/useSelectStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","selectClassNames","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","base","Bt984gj","B7ck84d","mc9l5x","Eh141a","Bahqtrf","qhf8xq","h62rwi","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","li1rpt","Bsft5z2","Dlnsje","E3zdtr","By385i5","Eqx8gd","B1piin3","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","d","p","m","w","useSelectStyles","Bowrso0","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","E5pizo","sj55zd","Bceei9c","Bh6795r","B2u0y6b","Byoj8tv","z8tnut","B3aqqti","Brovlpu","Bxa1mx5","disabled","De3pzq","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","disabledUnderline","Bqenvij","uwmqm3","z189sj","Be2twd7","Bhrd7zp","Bg96gwp","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","C8i20h","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","f","h","a","useIconStyles","Bkecrkj","Bo70h7d","B7iucu3","j35jbq","a9b677","useSelectStyles_unstable","state","size","appearance","iconStyles","rootStyles","selectStyles","className"],"sources":["useSelectStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const selectClassNames = {\n    root: 'fui-Select',\n    select: 'fui-Select__select',\n    icon: 'fui-Select__icon'\n};\nconst iconSizes = {\n    small: '16px',\n    medium: '20px',\n    large: '24px'\n};\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n    small: '24px',\n    medium: '32px',\n    large: '40px'\n};\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */ const paddingRight = {\n    small: `calc(${tokens.spacingHorizontalSNudge}\n    + ${iconSizes.small}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n    medium: `calc(${tokens.spacingHorizontalMNudge}\n    + ${iconSizes.medium}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n    large: `calc(${tokens.spacingHorizontalM}\n    + ${iconSizes.large}\n    + ${tokens.spacingHorizontalSNudge}\n    + ${tokens.spacingHorizontalSNudge})`\n};\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */ const paddingLeft = {\n    small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n};\n/* end of shared values */ const useRootStyles = makeStyles({\n    base: {\n        alignItems: 'center',\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexWrap: 'nowrap',\n        fontFamily: tokens.fontFamilyBase,\n        position: 'relative',\n        '&::after': {\n            backgroundImage: `linear-gradient(\n        0deg,\n        ${tokens.colorCompoundBrandStroke} 0%,\n        ${tokens.colorCompoundBrandStroke} 50%,\n        transparent 50%,\n        transparent 100%\n      )`,\n            borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,\n            boxSizing: 'border-box',\n            content: '\"\"',\n            height: tokens.borderRadiusMedium,\n            position: 'absolute',\n            bottom: '0',\n            left: '0',\n            right: '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    }\n});\nconst useSelectStyles = makeStyles({\n    base: {\n        appearance: 'none',\n        border: '1px solid transparent',\n        borderRadius: tokens.borderRadiusMedium,\n        boxShadow: 'none',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        cursor: 'pointer',\n        flexGrow: 1,\n        maxWidth: '100%',\n        paddingBottom: 0,\n        paddingTop: 0,\n        ':focus': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        }\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    },\n    disabledUnderline: {\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled, tokens.colorTransparentStrokeDisabled, tokens.colorNeutralStrokeDisabled)\n    },\n    small: {\n        height: fieldHeights.small,\n        paddingLeft: paddingLeft.small,\n        paddingRight: paddingRight.small,\n        ...typographyStyles.caption1\n    },\n    medium: {\n        height: fieldHeights.medium,\n        paddingLeft: paddingLeft.medium,\n        paddingRight: paddingRight.medium,\n        ...typographyStyles.body1\n    },\n    large: {\n        height: fieldHeights.large,\n        paddingLeft: paddingLeft.large,\n        paddingRight: paddingRight.large,\n        ...typographyStyles.body2\n    },\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `1px 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: `1px solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0',\n        '& option': {\n            // The transparent select bg means the option background must be set so the text is visible in dark themes\n            backgroundColor: tokens.colorNeutralBackground1\n        }\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3\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});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        display: 'block',\n        position: 'absolute',\n        pointerEvents: 'none',\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    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    small: {\n        fontSize: iconSizes.small,\n        height: iconSizes.small,\n        right: tokens.spacingHorizontalSNudge,\n        width: iconSizes.small\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        height: iconSizes.medium,\n        right: tokens.spacingHorizontalMNudge,\n        width: iconSizes.medium\n    },\n    large: {\n        fontSize: iconSizes.large,\n        height: iconSizes.large,\n        right: tokens.spacingHorizontalM,\n        width: iconSizes.large\n    }\n});\n/**\n * Apply styling to the Select slots based on the state\n */ export const useSelectStyles_unstable = (state)=>{\n    'use no memo';\n    const { size, appearance } = state;\n    const disabled = state.select.disabled;\n    const invalid = `${state.select['aria-invalid']}` === 'true';\n    const iconStyles = useIconStyles();\n    const rootStyles = useRootStyles();\n    const selectStyles = useSelectStyles();\n    state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n    state.select.className = mergeClasses(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","selectClassNames","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","base","Bt984gj","B7ck84d","mc9l5x","Eh141a","Bahqtrf","qhf8xq","h62rwi","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","li1rpt","Bsft5z2","Dlnsje","E3zdtr","By385i5","Eqx8gd","B1piin3","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","d","p","m","w","useSelectStyles","Bowrso0","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","E5pizo","sj55zd","Bceei9c","Bh6795r","B2u0y6b","Byoj8tv","z8tnut","B3aqqti","Brovlpu","Bxa1mx5","disabled","De3pzq","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","disabledUnderline","Bqenvij","uwmqm3","z189sj","Be2twd7","Bhrd7zp","Bg96gwp","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","C8i20h","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","f","h","a","useIconStyles","Bkecrkj","Bo70h7d","B7iucu3","j35jbq","a9b677","useSelectStyles_unstable","state","size","appearance","iconStyles","rootStyles","selectStyles","className"],"sources":["useSelectStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const selectClassNames = {\n    root: 'fui-Select',\n    select: 'fui-Select__select',\n    icon: 'fui-Select__icon'\n};\nconst iconSizes = {\n    small: '16px',\n    medium: '20px',\n    large: '24px'\n};\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n    small: '24px',\n    medium: '32px',\n    large: '40px'\n};\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */ const paddingRight = {\n    small: `calc(${tokens.spacingHorizontalSNudge}\n    + ${iconSizes.small}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n    medium: `calc(${tokens.spacingHorizontalMNudge}\n    + ${iconSizes.medium}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n    large: `calc(${tokens.spacingHorizontalM}\n    + ${iconSizes.large}\n    + ${tokens.spacingHorizontalSNudge}\n    + ${tokens.spacingHorizontalSNudge})`\n};\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */ const paddingLeft = {\n    small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n};\n/* end of shared values */ const useRootStyles = makeStyles({\n    base: {\n        alignItems: 'center',\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexWrap: 'nowrap',\n        fontFamily: tokens.fontFamilyBase,\n        position: 'relative',\n        '&::after': {\n            backgroundImage: `linear-gradient(\n        0deg,\n        ${tokens.colorCompoundBrandStroke} 0%,\n        ${tokens.colorCompoundBrandStroke} 50%,\n        transparent 50%,\n        transparent 100%\n      )`,\n            borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,\n            boxSizing: 'border-box',\n            content: '\"\"',\n            height: tokens.borderRadiusMedium,\n            position: 'absolute',\n            bottom: '0',\n            left: '0',\n            right: '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    }\n});\nconst useSelectStyles = makeStyles({\n    base: {\n        appearance: 'none',\n        border: '1px solid transparent',\n        borderRadius: tokens.borderRadiusMedium,\n        boxShadow: 'none',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        cursor: 'pointer',\n        flexGrow: 1,\n        maxWidth: '100%',\n        paddingBottom: 0,\n        paddingTop: 0,\n        ':focus': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        }\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    },\n    disabledUnderline: {\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled, tokens.colorTransparentStrokeDisabled, tokens.colorNeutralStrokeDisabled)\n    },\n    small: {\n        height: fieldHeights.small,\n        paddingLeft: paddingLeft.small,\n        paddingRight: paddingRight.small,\n        ...typographyStyles.caption1\n    },\n    medium: {\n        height: fieldHeights.medium,\n        paddingLeft: paddingLeft.medium,\n        paddingRight: paddingRight.medium,\n        ...typographyStyles.body1\n    },\n    large: {\n        height: fieldHeights.large,\n        paddingLeft: paddingLeft.large,\n        paddingRight: paddingRight.large,\n        ...typographyStyles.body2\n    },\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `1px 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: `1px solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0',\n        '& option': {\n            // The transparent select bg means the option background must be set so the text is visible in dark themes\n            backgroundColor: tokens.colorNeutralBackground1\n        }\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3\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});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        display: 'block',\n        position: 'absolute',\n        pointerEvents: 'none',\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    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    small: {\n        fontSize: iconSizes.small,\n        height: iconSizes.small,\n        right: tokens.spacingHorizontalSNudge,\n        width: iconSizes.small\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        height: iconSizes.medium,\n        right: tokens.spacingHorizontalMNudge,\n        width: iconSizes.medium\n    },\n    large: {\n        fontSize: iconSizes.large,\n        height: iconSizes.large,\n        right: tokens.spacingHorizontalM,\n        width: iconSizes.large\n    }\n});\n/**\n * Apply styling to the Select slots based on the state\n */ export const useSelectStyles_unstable = (state)=>{\n    const { size, appearance } = state;\n    const disabled = state.select.disabled;\n    const invalid = `${state.select['aria-invalid']}` === 'true';\n    const iconStyles = useIconStyles();\n    const rootStyles = useRootStyles();\n    const selectStyles = useSelectStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.select.className = mergeClasses(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Select/useSelectStyles.styles.raw.js

@@ -219,16 +219,18 @@ const useIconStyles = makeStyles({
 /**
  * Apply styling to the Select slots based on the state
  */ export const useSelectStyles_unstable = (state)=>{
-    'use no memo';
     const { size, appearance } = state;
     const disabled = state.select.disabled;
     const invalid = `${state.select['aria-invalid']}` === 'true';
     const iconStyles = useIconStyles();
     const rootStyles = useRootStyles();
     const selectStyles = useSelectStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.select.className = mergeClasses(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
     }
     return state;

package/lib/components/Select/useSelectStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/useSelectStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n  root: 'fui-Select',\n  select: 'fui-Select__select',\n  icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n  small: `calc(${tokens.spacingHorizontalSNudge}\n    + ${iconSizes.small}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n  medium: `calc(${tokens.spacingHorizontalMNudge}\n    + ${iconSizes.medium}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n  large: `calc(${tokens.spacingHorizontalM}\n    + ${iconSizes.large}\n    + ${tokens.spacingHorizontalSNudge}\n    + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n  small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n  medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n  large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexWrap: 'nowrap',\n    fontFamily: tokens.fontFamilyBase,\n    position: 'relative',\n\n    '&::after': {\n      backgroundImage: `linear-gradient(\n        0deg,\n        ${tokens.colorCompoundBrandStroke} 0%,\n        ${tokens.colorCompoundBrandStroke} 50%,\n        transparent 50%,\n        transparent 100%\n      )`,\n      borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,\n      boxSizing: 'border-box',\n      content: '\"\"',\n      height: tokens.borderRadiusMedium,\n      position: 'absolute',\n      bottom: '0',\n      left: '0',\n      right: '0',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n\n    '&:focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n});\n\nconst useSelectStyles = makeStyles({\n  base: {\n    appearance: 'none',\n    border: '1px solid transparent',\n    borderRadius: tokens.borderRadiusMedium,\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    cursor: 'pointer',\n    flexGrow: 1,\n    maxWidth: '100%',\n    paddingBottom: 0,\n    paddingTop: 0,\n\n    ':focus': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n  disabledUnderline: {\n    ...shorthands.borderColor(\n      tokens.colorTransparentStrokeDisabled,\n      tokens.colorTransparentStrokeDisabled,\n      tokens.colorNeutralStrokeDisabled,\n    ),\n  },\n\n  small: {\n    height: fieldHeights.small,\n    paddingLeft: paddingLeft.small,\n    paddingRight: paddingRight.small,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    height: fieldHeights.medium,\n    paddingLeft: paddingLeft.medium,\n    paddingRight: paddingRight.medium,\n    ...typographyStyles.body1,\n  },\n  large: {\n    height: fieldHeights.large,\n    paddingLeft: paddingLeft.large,\n    paddingRight: paddingRight.large,\n    ...typographyStyles.body2,\n  },\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `1px solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n    '& option': {\n      // The transparent select bg means the option background must be set so the text is visible in dark themes\n      backgroundColor: tokens.colorNeutralBackground1,\n    },\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\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});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    position: 'absolute',\n    pointerEvents: 'none',\n\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  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n  small: {\n    fontSize: iconSizes.small,\n    height: iconSizes.small,\n    right: tokens.spacingHorizontalSNudge,\n    width: iconSizes.small,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    height: iconSizes.medium,\n    right: tokens.spacingHorizontalMNudge,\n    width: iconSizes.medium,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    height: iconSizes.large,\n    right: tokens.spacingHorizontalM,\n    width: iconSizes.large,\n  },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n  'use no memo';\n\n  const { size, appearance } = state;\n  const disabled = state.select.disabled;\n  const invalid = `${state.select['aria-invalid']}` === 'true';\n\n  const iconStyles = useIconStyles();\n  const rootStyles = useRootStyles();\n  const selectStyles = useSelectStyles();\n\n  state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n  state.select.className = mergeClasses(\n    selectClassNames.select,\n    selectStyles.base,\n    selectStyles[size],\n    selectStyles[appearance],\n    !disabled && appearance === 'outline' && selectStyles.outlineInteractive,\n    !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n    !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n    disabled && selectStyles.disabled,\n    disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n    state.select.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      selectClassNames.icon,\n      iconStyles.icon,\n      disabled && iconStyles.disabled,\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","selectClassNames","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","base","alignItems","boxSizing","display","flexWrap","fontFamily","fontFamilyBase","position","backgroundImage","colorCompoundBrandStroke","borderRadius","borderRadiusMedium","content","height","bottom","left","right","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","useSelectStyles","appearance","border","boxShadow","color","colorNeutralForeground1","cursor","flexGrow","maxWidth","paddingBottom","paddingTop","outlineWidth","outlineStyle","outlineColor","disabled","backgroundColor","colorTransparentBackground","borderColor","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","disabledUnderline","colorTransparentStrokeDisabled","caption1","body1","body2","outline","colorNeutralBackground1","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","underline","borderBottom","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","useIconStyles","pointerEvents","fontSize","width","useSelectStyles_unstable","state","size","iconStyles","rootStyles","selectStyles","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Select/useSelectStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n  root: 'fui-Select',\n  select: 'fui-Select__select',\n  icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n  small: `calc(${tokens.spacingHorizontalSNudge}\n    + ${iconSizes.small}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n  medium: `calc(${tokens.spacingHorizontalMNudge}\n    + ${iconSizes.medium}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n  large: `calc(${tokens.spacingHorizontalM}\n    + ${iconSizes.large}\n    + ${tokens.spacingHorizontalSNudge}\n    + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n  small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n  medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n  large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexWrap: 'nowrap',\n    fontFamily: tokens.fontFamilyBase,\n    position: 'relative',\n\n    '&::after': {\n      backgroundImage: `linear-gradient(\n        0deg,\n        ${tokens.colorCompoundBrandStroke} 0%,\n        ${tokens.colorCompoundBrandStroke} 50%,\n        transparent 50%,\n        transparent 100%\n      )`,\n      borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,\n      boxSizing: 'border-box',\n      content: '\"\"',\n      height: tokens.borderRadiusMedium,\n      position: 'absolute',\n      bottom: '0',\n      left: '0',\n      right: '0',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n\n    '&:focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n});\n\nconst useSelectStyles = makeStyles({\n  base: {\n    appearance: 'none',\n    border: '1px solid transparent',\n    borderRadius: tokens.borderRadiusMedium,\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    cursor: 'pointer',\n    flexGrow: 1,\n    maxWidth: '100%',\n    paddingBottom: 0,\n    paddingTop: 0,\n\n    ':focus': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n  disabledUnderline: {\n    ...shorthands.borderColor(\n      tokens.colorTransparentStrokeDisabled,\n      tokens.colorTransparentStrokeDisabled,\n      tokens.colorNeutralStrokeDisabled,\n    ),\n  },\n\n  small: {\n    height: fieldHeights.small,\n    paddingLeft: paddingLeft.small,\n    paddingRight: paddingRight.small,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    height: fieldHeights.medium,\n    paddingLeft: paddingLeft.medium,\n    paddingRight: paddingRight.medium,\n    ...typographyStyles.body1,\n  },\n  large: {\n    height: fieldHeights.large,\n    paddingLeft: paddingLeft.large,\n    paddingRight: paddingRight.large,\n    ...typographyStyles.body2,\n  },\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `1px solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n    '& option': {\n      // The transparent select bg means the option background must be set so the text is visible in dark themes\n      backgroundColor: tokens.colorNeutralBackground1,\n    },\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\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});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    position: 'absolute',\n    pointerEvents: 'none',\n\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  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n  small: {\n    fontSize: iconSizes.small,\n    height: iconSizes.small,\n    right: tokens.spacingHorizontalSNudge,\n    width: iconSizes.small,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    height: iconSizes.medium,\n    right: tokens.spacingHorizontalMNudge,\n    width: iconSizes.medium,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    height: iconSizes.large,\n    right: tokens.spacingHorizontalM,\n    width: iconSizes.large,\n  },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n  const { size, appearance } = state;\n  const disabled = state.select.disabled;\n  const invalid = `${state.select['aria-invalid']}` === 'true';\n\n  const iconStyles = useIconStyles();\n  const rootStyles = useRootStyles();\n  const selectStyles = useSelectStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.select.className = mergeClasses(\n    selectClassNames.select,\n    selectStyles.base,\n    selectStyles[size],\n    selectStyles[appearance],\n    !disabled && appearance === 'outline' && selectStyles.outlineInteractive,\n    !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n    !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n    disabled && selectStyles.disabled,\n    disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n    state.select.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(\n      selectClassNames.icon,\n      iconStyles.icon,\n      disabled && iconStyles.disabled,\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","selectClassNames","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","base","alignItems","boxSizing","display","flexWrap","fontFamily","fontFamilyBase","position","backgroundImage","colorCompoundBrandStroke","borderRadius","borderRadiusMedium","content","height","bottom","left","right","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","useSelectStyles","appearance","border","boxShadow","color","colorNeutralForeground1","cursor","flexGrow","maxWidth","paddingBottom","paddingTop","outlineWidth","outlineStyle","outlineColor","disabled","backgroundColor","colorTransparentBackground","borderColor","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","disabledUnderline","colorTransparentStrokeDisabled","caption1","body1","body2","outline","colorNeutralBackground1","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","underline","borderBottom","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","useIconStyles","pointerEvents","fontSize","width","useSelectStyles_unstable","state","size","iconStyles","rootStyles","selectStyles","className"],"mappings":"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"}

package/lib-commonjs/components/Select/useSelect.js

@@ -24,12 +24,6 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _reacticons = require("@fluentui/react-icons");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const useSelect_unstable = (props, ref)=>{
-    // Merge props from surrounding <Field>, if any
-    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
-        supportsLabelFor: true,
-        supportsRequired: true,
-        supportsSize: true
-    });
     const overrides = (0, _reactsharedcontexts.useOverrides_unstable)();
     var _overrides_inputDefaultAppearance;
     const { appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', size = 'medium', ...baseProps } = props;
@@ -46,6 +40,11 @@ const useSelect_unstable = (props, ref)=>{
     };
 };
 const useSelectBase_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true,
+        supportsRequired: true
+    });
     const { defaultValue, value, select, icon, root, onChange } = props;
     const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
         props,

package/lib-commonjs/components/Select/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectBaseProps, SelectBaseState, SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const overrides = useOverrides();\n\n  const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;\n\n  const state = useSelectBase_unstable(baseProps, ref);\n\n  if (state.icon) {\n    state.icon.children ??= <ChevronDownRegular />;\n  }\n\n  return { ...state, appearance, size };\n};\n\n/**\n * Create the base state required to render Select without design-specific props.\n *\n * @param props - props from this instance of Select (without appearance/size)\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelectBase_unstable = (props: SelectBaseProps, ref: React.Ref<HTMLSelectElement>): SelectBaseState => {\n  const { defaultValue, value, select, icon, root, onChange } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['defaultValue', 'onChange', 'value'],\n  });\n\n  const state: SelectBaseState = {\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: slot.always(select, {\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'select',\n    }),\n    icon: slot.optional(icon, {\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","appearance","inputDefaultAppearance","size","baseProps","state","useSelectBase_unstable","icon","children","defaultValue","value","select","root","onChange","nativeProps","primarySlotTagName","excludedPropNames","components","always","defaultProps","primary","elementType","optional","renderByDefault","event","target"],"mappings":"AAAA;;;;;;;;;;;;0BAyCaoB;eAAAA;;IAvBAZ,kBAAAA;;;;;iEAhBU,QAAQ;4BACe,wBAAwB;gCACJ,4BAA4B;4BAC3D,wBAAwB;qCAEL,kCAAkC;AAWjF,2BAA2B,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,gBAAYP,0CAAAA;QAEGO;IAArB,MAAM,EAAEC,aAAaD,CAAAA,oCAAAA,UAAUE,sBAAAA,AAAsB,MAAA,QAAhCF,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAEG,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGT;IAEtG,MAAMU,QAAQC,uBAAuBF,WAAWR;IAEhD,IAAIS,MAAME,IAAI,EAAE;YACdF;;QAAAA,CAAAA,YAAAA,CAAAA,cAAAA,MAAME,IAAI,AAAJA,EAAKC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAXH,YAAWG,QAAAA,GAAAA,WAAAA,GAAa,OAAA,aAAA,CAACjB,8BAAAA,EAAAA;IAC3B;IAEA,OAAO;QAAE,GAAGc,KAAK;QAAEJ;QAAYE;IAAK;AACtC,EAAE;AAQK,+BAA+B,CAACR,OAAwBC;IAC7D,MAAM,EAAEa,YAAY,EAAEC,KAAK,EAAEC,MAAM,EAAEJ,IAAI,EAAEK,IAAI,EAAEC,QAAQ,EAAE,GAAGlB;IAE9D,MAAMmB,kBAAc1B,yCAAAA,EAA0B;QAC5CO;QACAoB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAgB;YAAY;SAAQ;IAC1D;IAEA,MAAMX,QAAyB;QAC7BY,YAAY;YACVL,MAAM;YACND,QAAQ;YACRJ,MAAM;QACR;QACAI,QAAQrB,oBAAAA,CAAK4B,MAAM,CAACP,QAAQ;YAC1BQ,cAAc;gBACZV;gBACAC;gBACAd;gBACA,GAAGkB,YAAYM,OAAO;YACxB;YACAC,aAAa;QACf;QACAd,MAAMjB,oBAAAA,CAAKgC,QAAQ,CAACf,MAAM;YACxBgB,iBAAiB;YACjBF,aAAa;QACf;QACAT,MAAMtB,oBAAAA,CAAK4B,MAAM,CAACN,MAAM;YACtBO,cAAcL,YAAYF,IAAI;YAC9BS,aAAa;QACf;IACF;IAEAhB,MAAMM,MAAM,CAACE,QAAQ,OAAGxB,gCAAAA,EAAiBmC,CAAAA;QACvCX,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWW,OAAO;YAAEd,OAAQc,MAAMC,MAAM,CAAuBf,KAAK;QAAC;IACvE;IAEA,OAAOL;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectBaseProps, SelectBaseState, SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  const overrides = useOverrides();\n\n  const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;\n\n  const state = useSelectBase_unstable(baseProps, ref);\n\n  if (state.icon) {\n    state.icon.children ??= <ChevronDownRegular />;\n  }\n\n  return { ...state, appearance, size };\n};\n\n/**\n * Create the base state required to render Select without design-specific props.\n *\n * @param props - props from this instance of Select (without appearance/size)\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelectBase_unstable = (props: SelectBaseProps, ref: React.Ref<HTMLSelectElement>): SelectBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { defaultValue, value, select, icon, root, onChange } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['defaultValue', 'onChange', 'value'],\n  });\n\n  const state: SelectBaseState = {\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: slot.always(select, {\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'select',\n    }),\n    icon: slot.optional(icon, {\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","overrides","appearance","inputDefaultAppearance","size","baseProps","state","useSelectBase_unstable","icon","children","supportsLabelFor","supportsRequired","defaultValue","value","select","root","onChange","nativeProps","primarySlotTagName","excludedPropNames","components","always","defaultProps","primary","elementType","optional","renderByDefault","event","target"],"mappings":"AAAA;;;;;;;;;;;;0BAsCaiB;eAAAA;;IApBAT,kBAAAA;;;;;iEAhBU,QAAQ;4BACe,wBAAwB;gCACJ,4BAA4B;4BAC3D,wBAAwB;qCAEL,kCAAkC;AAWjF,2BAA2B,CAACC,OAAoBC;IACrD,MAAMC,YAAYJ,8CAAAA;QAEGI;IAArB,MAAM,EAAEC,aAAaD,CAAAA,oCAAAA,UAAUE,sBAAAA,AAAsB,MAAA,QAAhCF,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAEG,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAEtG,MAAMO,QAAQC,uBAAuBF,WAAWL;IAEhD,IAAIM,MAAME,IAAI,EAAE;YACdF;;QAAAA,CAAAA,YAAAA,CAAAA,cAAAA,MAAME,IAAAA,AAAI,EAACC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAXH,YAAWG,QAAAA,GAAAA,WAAAA,GAAa,OAAA,aAAA,CAACd,8BAAAA,EAAAA;IAC3B;IAEA,OAAO;QAAE,GAAGW,KAAK;QAAEJ;QAAYE;IAAK;AACtC,EAAE;AAQK,+BAA+B,CAACL,OAAwBC;IAC7D,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEW,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,YAAY,EAAEC,KAAK,EAAEC,MAAM,EAAEN,IAAI,EAAEO,IAAI,EAAEC,QAAQ,EAAE,GAAGjB;IAE9D,MAAMkB,kBAAczB,yCAAAA,EAA0B;QAC5CO;QACAmB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAgB;YAAY;SAAQ;IAC1D;IAEA,MAAMb,QAAyB;QAC7Bc,YAAY;YACVL,MAAM;YACND,QAAQ;YACRN,MAAM;QACR;QACAM,QAAQpB,oBAAAA,CAAK2B,MAAM,CAACP,QAAQ;YAC1BQ,cAAc;gBACZV;gBACAC;gBACAb;gBACA,GAAGiB,YAAYM,OAAO;YACxB;YACAC,aAAa;QACf;QACAhB,MAAMd,oBAAAA,CAAK+B,QAAQ,CAACjB,MAAM;YACxBkB,iBAAiB;YACjBF,aAAa;QACf;QACAT,MAAMrB,oBAAAA,CAAK2B,MAAM,CAACN,MAAM;YACtBO,cAAcL,YAAYF,IAAI;YAC9BS,aAAa;QACf;IACF;IAEAlB,MAAMQ,MAAM,CAACE,QAAQ,OAAGvB,gCAAAA,EAAiBkC,CAAAA;QACvCX,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWW,OAAO;YAAEd,OAAQc,MAAMC,MAAM,CAAuBf,KAAK;QAAC;IACvE;IAEA,OAAOP;AACT,EAAE"}

package/lib-commonjs/components/Select/useSelectStyles.styles.js

@@ -552,16 +552,18 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useSelectStyles_unstable = (state)=>{
-    'use no memo';
     const { size, appearance } = state;
     const disabled = state.select.disabled;
     const invalid = `${state.select['aria-invalid']}` === 'true';
     const iconStyles = useIconStyles();
     const rootStyles = useRootStyles();
     const selectStyles = useSelectStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(selectClassNames.root, rootStyles.base, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.select.className = (0, _react.mergeClasses)(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
     }
     return state;

package/lib-commonjs/components/Select/useSelectStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSelectStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const selectClassNames = {\n    root: 'fui-Select',\n    select: 'fui-Select__select',\n    icon: 'fui-Select__icon'\n};\nconst iconSizes = {\n    small: '16px',\n    medium: '20px',\n    large: '24px'\n};\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n    small: '24px',\n    medium: '32px',\n    large: '40px'\n};\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */ const paddingRight = {\n    small: `calc(${tokens.spacingHorizontalSNudge}\n    + ${iconSizes.small}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n    medium: `calc(${tokens.spacingHorizontalMNudge}\n    + ${iconSizes.medium}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n    large: `calc(${tokens.spacingHorizontalM}\n    + ${iconSizes.large}\n    + ${tokens.spacingHorizontalSNudge}\n    + ${tokens.spacingHorizontalSNudge})`\n};\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */ const paddingLeft = {\n    small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n};\n/* end of shared values */ const useRootStyles = makeStyles({\n    base: {\n        alignItems: 'center',\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexWrap: 'nowrap',\n        fontFamily: tokens.fontFamilyBase,\n        position: 'relative',\n        '&::after': {\n            backgroundImage: `linear-gradient(\n        0deg,\n        ${tokens.colorCompoundBrandStroke} 0%,\n        ${tokens.colorCompoundBrandStroke} 50%,\n        transparent 50%,\n        transparent 100%\n      )`,\n            borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,\n            boxSizing: 'border-box',\n            content: '\"\"',\n            height: tokens.borderRadiusMedium,\n            position: 'absolute',\n            bottom: '0',\n            left: '0',\n            right: '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    }\n});\nconst useSelectStyles = makeStyles({\n    base: {\n        appearance: 'none',\n        border: '1px solid transparent',\n        borderRadius: tokens.borderRadiusMedium,\n        boxShadow: 'none',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        cursor: 'pointer',\n        flexGrow: 1,\n        maxWidth: '100%',\n        paddingBottom: 0,\n        paddingTop: 0,\n        ':focus': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        }\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    },\n    disabledUnderline: {\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled, tokens.colorTransparentStrokeDisabled, tokens.colorNeutralStrokeDisabled)\n    },\n    small: {\n        height: fieldHeights.small,\n        paddingLeft: paddingLeft.small,\n        paddingRight: paddingRight.small,\n        ...typographyStyles.caption1\n    },\n    medium: {\n        height: fieldHeights.medium,\n        paddingLeft: paddingLeft.medium,\n        paddingRight: paddingRight.medium,\n        ...typographyStyles.body1\n    },\n    large: {\n        height: fieldHeights.large,\n        paddingLeft: paddingLeft.large,\n        paddingRight: paddingRight.large,\n        ...typographyStyles.body2\n    },\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `1px 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: `1px solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0',\n        '& option': {\n            // The transparent select bg means the option background must be set so the text is visible in dark themes\n            backgroundColor: tokens.colorNeutralBackground1\n        }\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3\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});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        display: 'block',\n        position: 'absolute',\n        pointerEvents: 'none',\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    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    small: {\n        fontSize: iconSizes.small,\n        height: iconSizes.small,\n        right: tokens.spacingHorizontalSNudge,\n        width: iconSizes.small\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        height: iconSizes.medium,\n        right: tokens.spacingHorizontalMNudge,\n        width: iconSizes.medium\n    },\n    large: {\n        fontSize: iconSizes.large,\n        height: iconSizes.large,\n        right: tokens.spacingHorizontalM,\n        width: iconSizes.large\n    }\n});\n/**\n * Apply styling to the Select slots based on the state\n */ export const useSelectStyles_unstable = (state)=>{\n    'use no memo';\n    const { size, appearance } = state;\n    const disabled = state.select.disabled;\n    const invalid = `${state.select['aria-invalid']}` === 'true';\n    const iconStyles = useIconStyles();\n    const rootStyles = useRootStyles();\n    const selectStyles = useSelectStyles();\n    state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n    state.select.className = mergeClasses(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","selectClassNames","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","base","Bt984gj","B7ck84d","mc9l5x","Eh141a","Bahqtrf","qhf8xq","h62rwi","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","li1rpt","Bsft5z2","Dlnsje","E3zdtr","By385i5","Eqx8gd","B1piin3","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","d","p","m","w","useSelectStyles","Bowrso0","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","E5pizo","sj55zd","Bceei9c","Bh6795r","B2u0y6b","Byoj8tv","z8tnut","B3aqqti","Brovlpu","Bxa1mx5","disabled","De3pzq","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","disabledUnderline","Bqenvij","uwmqm3","z189sj","Be2twd7","Bhrd7zp","Bg96gwp","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","C8i20h","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","f","h","a","useIconStyles","Bkecrkj","Bo70h7d","B7iucu3","j35jbq","a9b677","useSelectStyles_unstable","state","size","appearance","iconStyles","rootStyles","selectStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCK,gBAAgB;;;IAyNZ8H,wBAAwB;;;;uBA3NY,gBAAgB;4BAC5B,uBAAuB;AACzD,yBAAyB;IAC5B7H,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE,oBAAoB;IAC5BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAG;IACdC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;AACX,CAAC;AACD,0EAAA;AACA,MAAMC,YAAY,GAAG;IACjBH,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;AACX,CAAC;AACD;;;;;;CAMA,GAAI,MAAME,YAAY,GAAG;IACrBJ,KAAK,EAAE,CAAA,KAAA,EAAQP,kBAAM,CAACY,uBAAuB,CAAA;MACjD,EAAQN,SAAS,CAACC,KAAK,CAAA;MACvB,EAAQP,kBAAM,CAACa,oBAAoB,CAAA;MACnC,EAAQb,kBAAM,CAACa,oBAAoB,CAAA,CAAA,CAAG;IAClCL,MAAM,EAAE,CAAA,KAAA,EAAQR,kBAAM,CAACc,uBAAuB,CAAA;MAClD,EAAQR,SAAS,CAACE,MAAM,CAAA;MACxB,EAAQR,kBAAM,CAACa,oBAAoB,CAAA;MACnC,EAAQb,kBAAM,CAACa,oBAAoB,CAAA,CAAA,CAAG;IAClCJ,KAAK,EAAE,CAAA,KAAA,EAAQT,kBAAM,CAACe,kBAAkB,CAAA;MAC5C,EAAQT,SAAS,CAACG,KAAK,CAAA;MACvB,EAAQT,kBAAM,CAACY,uBAAuB,CAAA;MACtC,EAAQZ,kBAAM,CAACY,uBAAuB,CAAA,CAAA,CAAA;AACtC,CAAC;AACD;6EACA,GAAgF,MAAMI,WAAW,GAAG;IAChGT,KAAK,EAAE,CAAA,KAAA,EAAQP,kBAAM,CAACY,uBAAuB,CAAA,GAAA,EAAMZ,kBAAM,CAACa,oBAAoB,CAAA,CAAA,CAAG;IACjFL,MAAM,EAAE,CAAA,KAAA,EAAQR,kBAAM,CAACc,uBAAuB,CAAA,GAAA,EAAMd,kBAAM,CAACa,oBAAoB,CAAA,CAAA,CAAG;IAClFJ,KAAK,EAAE,CAAA,KAAA,EAAQT,kBAAM,CAACe,kBAAkB,CAAA,GAAA,EAAMf,kBAAM,CAACY,uBAAuB,CAAA,CAAA,CAAA;AAChF,CAAC;AACD,wBAAA,GAA2B,MAAMK,aAAa,GAAA,WAAA,OAAGpB,eAAA,EAAA;IAAAqB,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA4ChD,CAAC;AACF,MAAMC,eAAe,GAAA,WAAA,GAAGzD,mBAAA,EAAA;IAAAqB,IAAA,EAAA;QAAAqC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAA1D,OAAA,EAAA;QAAA2D,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAApB,MAAA,EAAA;QAAAJ,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAR,OAAA,EAAA;QAAAI,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAkB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAU,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,iBAAA,EAAA;QAAAzB,MAAA,EAAA;QAAAJ,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAR,OAAA,EAAA;QAAAI,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAtD,KAAA,EAAA;QAAAwF,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAA1E,OAAA,EAAA;QAAA2E,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA5F,MAAA,EAAA;QAAAuF,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAA1E,OAAA,EAAA;QAAA2E,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA3F,KAAA,EAAA;QAAAsF,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAA1E,OAAA,EAAA;QAAA2E,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAZ,MAAA,EAAA;QAAAjC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA8B,kBAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,SAAA,EAAA;QAAAtB,MAAA,EAAA;QAAAhC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAH,OAAA,EAAA;QAAAiB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAmC,MAAA,EAAA;IAAA;IAAA,kBAAA;QAAAvB,MAAA,EAAA;IAAA;IAAA,iBAAA;QAAAA,MAAA,EAAA;IAAA;IAAAwB,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,gBAAA,EAAA;QAAAF,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAlE,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAoE,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;IAAAnE,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;IAAAoE,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAyFvB,CAAC;AACF,MAAMC,aAAa,GAAA,WAAA,OAAG7H,eAAA,EAAA;IAAAQ,IAAA,EAAA;QAAAe,OAAA,EAAA;QAAA2D,MAAA,EAAA;QAAA1D,MAAA,EAAA;QAAAG,MAAA,EAAA;QAAAmG,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAApC,QAAA,EAAA;QAAAT,MAAA,EAAA;QAAA8C,OAAA,EAAA;IAAA;IAAAtH,KAAA,EAAA;QAAA2F,OAAA,EAAA;QAAAH,OAAA,EAAA;QAAA+B,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;IAAA;IAAAvH,MAAA,EAAA;QAAA0F,OAAA,EAAA;QAAAH,OAAA,EAAA;QAAA+B,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;IAAA;IAAAtH,KAAA,EAAA;QAAAyF,OAAA,EAAA;QAAAH,OAAA,EAAA;QAAA+B,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAA7E,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAE,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAqCrB,CAAC;AAGS,kCAAkC6E,KAAK,IAAG;IACjD,aAAa;IACb,MAAM,EAAEC,IAAI,EAAEC,UAAAA,EAAY,GAAGF,KAAK;IAClC,MAAMzC,QAAQ,GAAGyC,KAAK,CAAC7H,MAAM,CAACoF,QAAQ;IACtC,MAAMyB,OAAO,GAAG,GAAGgB,KAAK,CAAC7H,MAAM,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM;IAC5D,MAAMgI,UAAU,GAAGV,aAAa,CAAC,CAAC;IAClC,MAAMW,UAAU,GAAGpH,aAAa,CAAC,CAAC;IAClC,MAAMqH,YAAY,GAAGhF,eAAe,CAAC,CAAC;IACtC2E,KAAK,CAAC9H,IAAI,CAACoI,SAAS,OAAGzI,mBAAY,EAACI,gBAAgB,CAACC,IAAI,EAAEkI,UAAU,CAACnH,IAAI,EAAE+G,KAAK,CAAC9H,IAAI,CAACoI,SAAS,CAAC;IACjGN,KAAK,CAAC7H,MAAM,CAACmI,SAAS,GAAGzI,uBAAY,EAACI,gBAAgB,CAACE,MAAM,EAAEkI,YAAY,CAACpH,IAAI,EAAEoH,YAAY,CAACJ,IAAI,CAAC,EAAEI,YAAY,CAACH,UAAU,CAAC,EAAE,CAAC3C,QAAQ,IAAI2C,UAAU,KAAK,SAAS,IAAIG,YAAY,CAAChC,kBAAkB,EAAE,CAACd,QAAQ,IAAIyB,OAAO,IAAIkB,UAAU,KAAK,WAAW,IAAIG,YAAY,CAACrB,OAAO,EAAE,CAACzB,QAAQ,IAAIyB,OAAO,IAAIkB,UAAU,KAAK,WAAW,IAAIG,YAAY,CAAChB,gBAAgB,EAAE9B,QAAQ,IAAI8C,YAAY,CAAC9C,QAAQ,EAAEA,QAAQ,IAAI2C,UAAU,KAAK,WAAW,IAAIG,YAAY,CAACxC,iBAAiB,EAAEmC,KAAK,CAAC7H,MAAM,CAACmI,SAAS,CAAC;IAC/e,IAAIN,KAAK,CAAC5H,IAAI,EAAE;QACZ4H,KAAK,CAAC5H,IAAI,CAACkI,SAAS,OAAGzI,mBAAY,EAACI,gBAAgB,CAACG,IAAI,EAAE+H,UAAU,CAAC/H,IAAI,EAAEmF,QAAQ,IAAI4C,UAAU,CAAC5C,QAAQ,EAAE4C,UAAU,CAACF,IAAI,CAAC,EAAED,KAAK,CAAC5H,IAAI,CAACkI,SAAS,CAAC;IACxJ;IACA,OAAON,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useSelectStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const selectClassNames = {\n    root: 'fui-Select',\n    select: 'fui-Select__select',\n    icon: 'fui-Select__icon'\n};\nconst iconSizes = {\n    small: '16px',\n    medium: '20px',\n    large: '24px'\n};\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n    small: '24px',\n    medium: '32px',\n    large: '40px'\n};\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */ const paddingRight = {\n    small: `calc(${tokens.spacingHorizontalSNudge}\n    + ${iconSizes.small}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n    medium: `calc(${tokens.spacingHorizontalMNudge}\n    + ${iconSizes.medium}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n    large: `calc(${tokens.spacingHorizontalM}\n    + ${iconSizes.large}\n    + ${tokens.spacingHorizontalSNudge}\n    + ${tokens.spacingHorizontalSNudge})`\n};\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */ const paddingLeft = {\n    small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n};\n/* end of shared values */ const useRootStyles = makeStyles({\n    base: {\n        alignItems: 'center',\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexWrap: 'nowrap',\n        fontFamily: tokens.fontFamilyBase,\n        position: 'relative',\n        '&::after': {\n            backgroundImage: `linear-gradient(\n        0deg,\n        ${tokens.colorCompoundBrandStroke} 0%,\n        ${tokens.colorCompoundBrandStroke} 50%,\n        transparent 50%,\n        transparent 100%\n      )`,\n            borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,\n            boxSizing: 'border-box',\n            content: '\"\"',\n            height: tokens.borderRadiusMedium,\n            position: 'absolute',\n            bottom: '0',\n            left: '0',\n            right: '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    }\n});\nconst useSelectStyles = makeStyles({\n    base: {\n        appearance: 'none',\n        border: '1px solid transparent',\n        borderRadius: tokens.borderRadiusMedium,\n        boxShadow: 'none',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        cursor: 'pointer',\n        flexGrow: 1,\n        maxWidth: '100%',\n        paddingBottom: 0,\n        paddingTop: 0,\n        ':focus': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        }\n    },\n    disabled: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    },\n    disabledUnderline: {\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled, tokens.colorTransparentStrokeDisabled, tokens.colorNeutralStrokeDisabled)\n    },\n    small: {\n        height: fieldHeights.small,\n        paddingLeft: paddingLeft.small,\n        paddingRight: paddingRight.small,\n        ...typographyStyles.caption1\n    },\n    medium: {\n        height: fieldHeights.medium,\n        paddingLeft: paddingLeft.medium,\n        paddingRight: paddingRight.medium,\n        ...typographyStyles.body1\n    },\n    large: {\n        height: fieldHeights.large,\n        paddingLeft: paddingLeft.large,\n        paddingRight: paddingRight.large,\n        ...typographyStyles.body2\n    },\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `1px 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: `1px solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0',\n        '& option': {\n            // The transparent select bg means the option background must be set so the text is visible in dark themes\n            backgroundColor: tokens.colorNeutralBackground1\n        }\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3\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});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        display: 'block',\n        position: 'absolute',\n        pointerEvents: 'none',\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    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    small: {\n        fontSize: iconSizes.small,\n        height: iconSizes.small,\n        right: tokens.spacingHorizontalSNudge,\n        width: iconSizes.small\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        height: iconSizes.medium,\n        right: tokens.spacingHorizontalMNudge,\n        width: iconSizes.medium\n    },\n    large: {\n        fontSize: iconSizes.large,\n        height: iconSizes.large,\n        right: tokens.spacingHorizontalM,\n        width: iconSizes.large\n    }\n});\n/**\n * Apply styling to the Select slots based on the state\n */ export const useSelectStyles_unstable = (state)=>{\n    const { size, appearance } = state;\n    const disabled = state.select.disabled;\n    const invalid = `${state.select['aria-invalid']}` === 'true';\n    const iconStyles = useIconStyles();\n    const rootStyles = useRootStyles();\n    const selectStyles = useSelectStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.select.className = mergeClasses(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","selectClassNames","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","base","Bt984gj","B7ck84d","mc9l5x","Eh141a","Bahqtrf","qhf8xq","h62rwi","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","li1rpt","Bsft5z2","Dlnsje","E3zdtr","By385i5","Eqx8gd","B1piin3","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","d","p","m","w","useSelectStyles","Bowrso0","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","E5pizo","sj55zd","Bceei9c","Bh6795r","B2u0y6b","Byoj8tv","z8tnut","B3aqqti","Brovlpu","Bxa1mx5","disabled","De3pzq","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","disabledUnderline","Bqenvij","uwmqm3","z189sj","Be2twd7","Bhrd7zp","Bg96gwp","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","C8i20h","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","f","h","a","useIconStyles","Bkecrkj","Bo70h7d","B7iucu3","j35jbq","a9b677","useSelectStyles_unstable","state","size","appearance","iconStyles","rootStyles","selectStyles","className"],"mappings":"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"}

package/lib-commonjs/components/Select/useSelectStyles.styles.raw.js

@@ -235,16 +235,18 @@ const useIconStyles = (0, _react.makeStyles)({
     }
 });
 const useSelectStyles_unstable = (state)=>{
-    'use no memo';
     const { size, appearance } = state;
     const disabled = state.select.disabled;
     const invalid = `${state.select['aria-invalid']}` === 'true';
     const iconStyles = useIconStyles();
     const rootStyles = useRootStyles();
     const selectStyles = useSelectStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(selectClassNames.root, rootStyles.base, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.select.className = (0, _react.mergeClasses)(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
     }
     return state;

package/lib-commonjs/components/Select/useSelectStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/useSelectStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n  root: 'fui-Select',\n  select: 'fui-Select__select',\n  icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n  small: `calc(${tokens.spacingHorizontalSNudge}\n    + ${iconSizes.small}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n  medium: `calc(${tokens.spacingHorizontalMNudge}\n    + ${iconSizes.medium}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n  large: `calc(${tokens.spacingHorizontalM}\n    + ${iconSizes.large}\n    + ${tokens.spacingHorizontalSNudge}\n    + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n  small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n  medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n  large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexWrap: 'nowrap',\n    fontFamily: tokens.fontFamilyBase,\n    position: 'relative',\n\n    '&::after': {\n      backgroundImage: `linear-gradient(\n        0deg,\n        ${tokens.colorCompoundBrandStroke} 0%,\n        ${tokens.colorCompoundBrandStroke} 50%,\n        transparent 50%,\n        transparent 100%\n      )`,\n      borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,\n      boxSizing: 'border-box',\n      content: '\"\"',\n      height: tokens.borderRadiusMedium,\n      position: 'absolute',\n      bottom: '0',\n      left: '0',\n      right: '0',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n\n    '&:focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n});\n\nconst useSelectStyles = makeStyles({\n  base: {\n    appearance: 'none',\n    border: '1px solid transparent',\n    borderRadius: tokens.borderRadiusMedium,\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    cursor: 'pointer',\n    flexGrow: 1,\n    maxWidth: '100%',\n    paddingBottom: 0,\n    paddingTop: 0,\n\n    ':focus': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n  disabledUnderline: {\n    ...shorthands.borderColor(\n      tokens.colorTransparentStrokeDisabled,\n      tokens.colorTransparentStrokeDisabled,\n      tokens.colorNeutralStrokeDisabled,\n    ),\n  },\n\n  small: {\n    height: fieldHeights.small,\n    paddingLeft: paddingLeft.small,\n    paddingRight: paddingRight.small,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    height: fieldHeights.medium,\n    paddingLeft: paddingLeft.medium,\n    paddingRight: paddingRight.medium,\n    ...typographyStyles.body1,\n  },\n  large: {\n    height: fieldHeights.large,\n    paddingLeft: paddingLeft.large,\n    paddingRight: paddingRight.large,\n    ...typographyStyles.body2,\n  },\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `1px solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n    '& option': {\n      // The transparent select bg means the option background must be set so the text is visible in dark themes\n      backgroundColor: tokens.colorNeutralBackground1,\n    },\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\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});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    position: 'absolute',\n    pointerEvents: 'none',\n\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  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n  small: {\n    fontSize: iconSizes.small,\n    height: iconSizes.small,\n    right: tokens.spacingHorizontalSNudge,\n    width: iconSizes.small,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    height: iconSizes.medium,\n    right: tokens.spacingHorizontalMNudge,\n    width: iconSizes.medium,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    height: iconSizes.large,\n    right: tokens.spacingHorizontalM,\n    width: iconSizes.large,\n  },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n  'use no memo';\n\n  const { size, appearance } = state;\n  const disabled = state.select.disabled;\n  const invalid = `${state.select['aria-invalid']}` === 'true';\n\n  const iconStyles = useIconStyles();\n  const rootStyles = useRootStyles();\n  const selectStyles = useSelectStyles();\n\n  state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n  state.select.className = mergeClasses(\n    selectClassNames.select,\n    selectStyles.base,\n    selectStyles[size],\n    selectStyles[appearance],\n    !disabled && appearance === 'outline' && selectStyles.outlineInteractive,\n    !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n    !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n    disabled && selectStyles.disabled,\n    disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n    state.select.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      selectClassNames.icon,\n      iconStyles.icon,\n      disabled && iconStyles.disabled,\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","selectClassNames","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","base","alignItems","boxSizing","display","flexWrap","fontFamily","fontFamilyBase","position","backgroundImage","colorCompoundBrandStroke","borderRadius","borderRadiusMedium","content","height","bottom","left","right","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","useSelectStyles","appearance","border","boxShadow","color","colorNeutralForeground1","cursor","flexGrow","maxWidth","paddingBottom","paddingTop","outlineWidth","outlineStyle","outlineColor","disabled","backgroundColor","colorTransparentBackground","borderColor","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","disabledUnderline","colorTransparentStrokeDisabled","caption1","body1","body2","outline","colorNeutralBackground1","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","underline","borderBottom","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","useIconStyles","pointerEvents","fontSize","width","useSelectStyles_unstable","state","size","iconStyles","rootStyles","selectStyles","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Select/useSelectStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n  root: 'fui-Select',\n  select: 'fui-Select__select',\n  icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n  small: `calc(${tokens.spacingHorizontalSNudge}\n    + ${iconSizes.small}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n  medium: `calc(${tokens.spacingHorizontalMNudge}\n    + ${iconSizes.medium}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n  large: `calc(${tokens.spacingHorizontalM}\n    + ${iconSizes.large}\n    + ${tokens.spacingHorizontalSNudge}\n    + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n  small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n  medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n  large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexWrap: 'nowrap',\n    fontFamily: tokens.fontFamilyBase,\n    position: 'relative',\n\n    '&::after': {\n      backgroundImage: `linear-gradient(\n        0deg,\n        ${tokens.colorCompoundBrandStroke} 0%,\n        ${tokens.colorCompoundBrandStroke} 50%,\n        transparent 50%,\n        transparent 100%\n      )`,\n      borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,\n      boxSizing: 'border-box',\n      content: '\"\"',\n      height: tokens.borderRadiusMedium,\n      position: 'absolute',\n      bottom: '0',\n      left: '0',\n      right: '0',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n\n    '&:focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n});\n\nconst useSelectStyles = makeStyles({\n  base: {\n    appearance: 'none',\n    border: '1px solid transparent',\n    borderRadius: tokens.borderRadiusMedium,\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    cursor: 'pointer',\n    flexGrow: 1,\n    maxWidth: '100%',\n    paddingBottom: 0,\n    paddingTop: 0,\n\n    ':focus': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n  disabledUnderline: {\n    ...shorthands.borderColor(\n      tokens.colorTransparentStrokeDisabled,\n      tokens.colorTransparentStrokeDisabled,\n      tokens.colorNeutralStrokeDisabled,\n    ),\n  },\n\n  small: {\n    height: fieldHeights.small,\n    paddingLeft: paddingLeft.small,\n    paddingRight: paddingRight.small,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    height: fieldHeights.medium,\n    paddingLeft: paddingLeft.medium,\n    paddingRight: paddingRight.medium,\n    ...typographyStyles.body1,\n  },\n  large: {\n    height: fieldHeights.large,\n    paddingLeft: paddingLeft.large,\n    paddingRight: paddingRight.large,\n    ...typographyStyles.body2,\n  },\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `1px solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n    '& option': {\n      // The transparent select bg means the option background must be set so the text is visible in dark themes\n      backgroundColor: tokens.colorNeutralBackground1,\n    },\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\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});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    position: 'absolute',\n    pointerEvents: 'none',\n\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  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n  small: {\n    fontSize: iconSizes.small,\n    height: iconSizes.small,\n    right: tokens.spacingHorizontalSNudge,\n    width: iconSizes.small,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    height: iconSizes.medium,\n    right: tokens.spacingHorizontalMNudge,\n    width: iconSizes.medium,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    height: iconSizes.large,\n    right: tokens.spacingHorizontalM,\n    width: iconSizes.large,\n  },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n  const { size, appearance } = state;\n  const disabled = state.select.disabled;\n  const invalid = `${state.select['aria-invalid']}` === 'true';\n\n  const iconStyles = useIconStyles();\n  const rootStyles = useRootStyles();\n  const selectStyles = useSelectStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.select.className = mergeClasses(\n    selectClassNames.select,\n    selectStyles.base,\n    selectStyles[size],\n    selectStyles[appearance],\n    !disabled && appearance === 'outline' && selectStyles.outlineInteractive,\n    !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n    !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n    disabled && selectStyles.disabled,\n    disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n    state.select.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(\n      selectClassNames.icon,\n      iconStyles.icon,\n      disabled && iconStyles.disabled,\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","selectClassNames","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","base","alignItems","boxSizing","display","flexWrap","fontFamily","fontFamilyBase","position","backgroundImage","colorCompoundBrandStroke","borderRadius","borderRadiusMedium","content","height","bottom","left","right","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","useSelectStyles","appearance","border","boxShadow","color","colorNeutralForeground1","cursor","flexGrow","maxWidth","paddingBottom","paddingTop","outlineWidth","outlineStyle","outlineColor","disabled","backgroundColor","colorTransparentBackground","borderColor","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","disabledUnderline","colorTransparentStrokeDisabled","caption1","body1","body2","outline","colorNeutralBackground1","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","underline","borderBottom","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","useIconStyles","pointerEvents","fontSize","width","useSelectStyles_unstable","state","size","iconStyles","rootStyles","selectStyles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaK,gBAAAA;;;4BAkPAoF;eAAAA;;;uBAvPwC,iBAAiB;4BAC7B,wBAAwB;AAI1D,yBAAsD;IAC3DnF,MAAM;IACNC,QAAQ;IACRC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAY;IAChBC,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAEA,0EAA0E;AAC1E,MAAMC,eAAe;IACnBH,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT;AAEA;;;;;;CAMC,GACD,MAAME,eAAe;IACnBJ,OAAO,CAAC,KAAK,EAAEP,kBAAAA,CAAOY,uBAAuB,CAAC;MAC1C,EAAEN,UAAUC,KAAK,CAAC;MAClB,EAAEP,kBAAAA,CAAOa,oBAAoB,CAAC;MAC9B,EAAEb,kBAAAA,CAAOa,oBAAoB,CAAC,CAAC,CAAC;IACpCL,QAAQ,CAAC,KAAK,EAAER,kBAAAA,CAAOc,uBAAuB,CAAC;MAC3C,EAAER,UAAUE,MAAM,CAAC;MACnB,EAAER,kBAAAA,CAAOa,oBAAoB,CAAC;MAC9B,EAAEb,kBAAAA,CAAOa,oBAAoB,CAAC,CAAC,CAAC;IACpCJ,OAAO,CAAC,KAAK,EAAET,kBAAAA,CAAOe,kBAAkB,CAAC;MACrC,EAAET,UAAUG,KAAK,CAAC;MAClB,EAAET,kBAAAA,CAAOY,uBAAuB,CAAC;MACjC,EAAEZ,kBAAAA,CAAOY,uBAAuB,CAAC,CAAC,CAAC;AACzC;AAEA;6EAC6E,GAC7E,MAAMI,cAAc;IAClBT,OAAO,CAAC,KAAK,EAAEP,kBAAAA,CAAOY,uBAAuB,CAAC,GAAG,EAAEZ,kBAAAA,CAAOa,oBAAoB,CAAC,CAAC,CAAC;IACjFL,QAAQ,CAAC,KAAK,EAAER,kBAAAA,CAAOc,uBAAuB,CAAC,GAAG,EAAEd,kBAAAA,CAAOa,oBAAoB,CAAC,CAAC,CAAC;IAClFJ,OAAO,CAAC,KAAK,EAAET,kBAAAA,CAAOe,kBAAkB,CAAC,GAAG,EAAEf,kBAAAA,CAAOY,uBAAuB,CAAC,CAAC,CAAC;AACjF;AAEA,wBAAwB,GAExB,MAAMK,gBAAgBpB,qBAAAA,EAAW;IAC/BqB,MAAM;QACJC,YAAY;QACZC,WAAW;QACXC,SAAS;QACTC,UAAU;QACVC,YAAYvB,kBAAAA,CAAOwB,cAAc;QACjCC,UAAU;QAEV,YAAY;YACVC,iBAAiB,CAAC;;QAEhB,EAAE1B,kBAAAA,CAAO2B,wBAAwB,CAAC;QAClC,EAAE3B,kBAAAA,CAAO2B,wBAAwB,CAAC;;;OAGnC,CAAC;YACFC,cAAc,CAAC,IAAI,EAAE5B,kBAAAA,CAAO6B,kBAAkB,CAAC,CAAC,EAAE7B,kBAAAA,CAAO6B,kBAAkB,EAAE;YAC7ET,WAAW;YACXU,SAAS;YACTC,QAAQ/B,kBAAAA,CAAO6B,kBAAkB;YACjCJ,UAAU;YACVO,QAAQ;YACRC,MAAM;YACNC,OAAO;YACPC,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBrC,kBAAAA,CAAOsC,iBAAiB;YAC5CC,iBAAiBvC,kBAAAA,CAAOwC,kBAAkB;YAE1C,sDAAsD;gBACpDH,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QAEA,yBAAyB;YACvBJ,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBrC,kBAAAA,CAAOyC,cAAc;YACzCF,iBAAiBvC,kBAAAA,CAAO0C,kBAAkB;YAE1C,sDAAsD;gBACpDL,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;IACF;AACF;AAEA,MAAMI,sBAAkB9C,iBAAAA,EAAW;IACjCqB,MAAM;QACJ0B,YAAY;QACZC,QAAQ;QACRjB,cAAc5B,kBAAAA,CAAO6B,kBAAkB;QACvCiB,WAAW;QACX1B,WAAW;QACX2B,OAAO/C,kBAAAA,CAAOgD,uBAAuB;QACrCC,QAAQ;QACRC,UAAU;QACVC,UAAU;QACVC,eAAe;QACfC,YAAY;QAEZ,UAAU;YACRC,cAAc;YACdC,cAAc;YACdC,cAAc;QAChB;IACF;IACAC,UAAU;QACRC,iBAAiB1D,kBAAAA,CAAO2D,0BAA0B;QAClD,GAAG5D,iBAAAA,CAAW6D,WAAW,CAAC5D,kBAAAA,CAAO6D,0BAA0B,CAAC;QAC5Dd,OAAO/C,kBAAAA,CAAO8D,8BAA8B;QAC5Cb,QAAQ;QACR,kCAAkC;YAChC,GAAGlD,iBAAAA,CAAW6D,WAAW,CAAC,WAAW;QACvC;IACF;IACAG,mBAAmB;QACjB,GAAGhE,iBAAAA,CAAW6D,WAAW,CACvB5D,kBAAAA,CAAOgE,8BAA8B,EACrChE,kBAAAA,CAAOgE,8BAA8B,EACrChE,kBAAAA,CAAO6D,0BAA0B,CAClC;IACH;IAEAtD,OAAO;QACLwB,QAAQrB,aAAaH,KAAK;QAC1BS,aAAaA,YAAYT,KAAK;QAC9BI,cAAcA,aAAaJ,KAAK;QAChC,GAAGN,4BAAAA,CAAiBgE,QAAQ;IAC9B;IACAzD,QAAQ;QACNuB,QAAQrB,aAAaF,MAAM;QAC3BQ,aAAaA,YAAYR,MAAM;QAC/BG,cAAcA,aAAaH,MAAM;QACjC,GAAGP,4BAAAA,CAAiBiE,KAAK;IAC3B;IACAzD,OAAO;QACLsB,QAAQrB,aAAaD,KAAK;QAC1BO,aAAaA,YAAYP,KAAK;QAC9BE,cAAcA,aAAaF,KAAK;QAChC,GAAGR,4BAAAA,CAAiBkE,KAAK;IAC3B;IACAC,SAAS;QACPV,iBAAiB1D,kBAAAA,CAAOqE,uBAAuB;QAC/CxB,QAAQ,CAAC,UAAU,EAAE7C,kBAAAA,CAAOsE,mBAAmB,EAAE;QACjDC,mBAAmBvE,kBAAAA,CAAOwE,4BAA4B;IACxD;IACAC,oBAAoB;QAClB,WAAW;YACT,GAAG1E,iBAAAA,CAAW6D,WAAW,CAAC5D,kBAAAA,CAAO0E,wBAAwB,CAAC;YAC1DH,mBAAmBvE,kBAAAA,CAAOwE,4BAA4B;QACxD;QAEA,YAAY;YACV,GAAGzE,iBAAAA,CAAW6D,WAAW,CAAC5D,kBAAAA,CAAO2E,0BAA0B,CAAC;YAC5DJ,mBAAmBvE,kBAAAA,CAAOwE,4BAA4B;QACxD;IACF;IACAI,WAAW;QACTlB,iBAAiB1D,kBAAAA,CAAO2D,0BAA0B;QAClDkB,cAAc,CAAC,UAAU,EAAE7E,kBAAAA,CAAOwE,4BAA4B,EAAE;QAChE5C,cAAc;QACd,YAAY;YACV,0GAA0G;YAC1G8B,iBAAiB1D,kBAAAA,CAAOqE,uBAAuB;QACjD;IACF;IACA,kBAAkB;QAChBX,iBAAiB1D,kBAAAA,CAAOqE,uBAAuB;IACjD;IACA,iBAAiB;QACfX,iBAAiB1D,kBAAAA,CAAO8E,uBAAuB;IACjD;IACAC,SAAS;QACP,iDAAiD;YAC/C,GAAGhF,iBAAAA,CAAW6D,WAAW,CAAC5D,kBAAAA,CAAOgF,sBAAsB,CAAC;QAC1D;IACF;IACAC,kBAAkB;QAChB,iDAAiD;YAC/CV,mBAAmBvE,kBAAAA,CAAOgF,sBAAsB;QAClD;IACF;AACF;AAEA,MAAME,oBAAgBrF,iBAAAA,EAAW;IAC/BQ,MAAM;QACJe,WAAW;QACX2B,OAAO/C,kBAAAA,CAAOwE,4BAA4B;QAC1CnD,SAAS;QACTI,UAAU;QACV0D,eAAe;QAEf,4DAA4D;QAC5D,oEAAoE;QACpE,SAAS;YACP9D,SAAS;QACX;IACF;IACAoC,UAAU;QACRV,OAAO/C,kBAAAA,CAAO8D,8BAA8B;QAC5C,kCAAkC;YAChCf,OAAO;QACT;IACF;IACAxC,OAAO;QACL6E,UAAU9E,UAAUC,KAAK;QACzBwB,QAAQzB,UAAUC,KAAK;QACvB2B,OAAOlC,kBAAAA,CAAOY,uBAAuB;QACrCyE,OAAO/E,UAAUC,KAAK;IACxB;IACAC,QAAQ;QACN4E,UAAU9E,UAAUE,MAAM;QAC1BuB,QAAQzB,UAAUE,MAAM;QACxB0B,OAAOlC,kBAAAA,CAAOc,uBAAuB;QACrCuE,OAAO/E,UAAUE,MAAM;IACzB;IACAC,OAAO;QACL2E,UAAU9E,UAAUG,KAAK;QACzBsB,QAAQzB,UAAUG,KAAK;QACvByB,OAAOlC,kBAAAA,CAAOe,kBAAkB;QAChCsE,OAAO/E,UAAUG,KAAK;IACxB;AACF;AAKO,iCAAiC,CAAC8E;IACvC,MAAM,EAAEC,IAAI,EAAE5C,UAAU,EAAE,GAAG2C;IAC7B,MAAM9B,WAAW8B,MAAMnF,MAAM,CAACqD,QAAQ;IACtC,MAAMsB,UAAU,GAAGQ,MAAMnF,MAAM,CAAC,eAAe,EAAE,KAAK;IAEtD,MAAMqF,aAAaP;IACnB,MAAMQ,aAAazE;IACnB,MAAM0E,eAAehD;IAErB,oDAAoD;IACpD4C,MAAMpF,IAAI,CAACyF,SAAS,OAAG9F,mBAAAA,EAAaI,iBAAiBC,IAAI,EAAEuF,WAAWxE,IAAI,EAAEqE,MAAMpF,IAAI,CAACyF,SAAS;IAEhG,oDAAoD;IACpDL,MAAMnF,MAAM,CAACwF,SAAS,OAAG9F,mBAAAA,EACvBI,iBAAiBE,MAAM,EACvBuF,aAAazE,IAAI,EACjByE,YAAY,CAACH,KAAK,EAClBG,YAAY,CAAC/C,WAAW,EACxB,CAACa,YAAYb,eAAe,aAAa+C,aAAalB,kBAAkB,EACxE,CAAChB,YAAYsB,WAAWnC,eAAe,eAAe+C,aAAaZ,OAAO,EAC1E,CAACtB,YAAYsB,WAAWnC,eAAe,eAAe+C,aAAaV,gBAAgB,EACnFxB,YAAYkC,aAAalC,QAAQ,EACjCA,YAAYb,eAAe,eAAe+C,aAAa5B,iBAAiB,EACxEwB,MAAMnF,MAAM,CAACwF,SAAS;IAGxB,IAAIL,MAAMlF,IAAI,EAAE;QACd,oDAAoD;QACpDkF,MAAMlF,IAAI,CAACuF,SAAS,OAAG9F,mBAAAA,EACrBI,iBAAiBG,IAAI,EACrBoF,WAAWpF,IAAI,EACfoD,YAAYgC,WAAWhC,QAAQ,EAC/BgC,UAAU,CAACD,KAAK,EAChBD,MAAMlF,IAAI,CAACuF,SAAS;IAExB;IAEA,OAAOL;AACT,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-select",
-  "version": "9.5.1",
+  "version": "9.5.3",
   "description": "Fluent UI React Select component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,12 +12,12 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.5.1",
+    "@fluentui/react-field": "^9.5.3",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
+    "@fluentui/react-jsx-runtime": "^9.4.4",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.5",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },