@fluentui/react-select 9.3.7 → 9.4.1

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-select
 
-This log was last generated on Fri, 11 Jul 2025 15:56:58 GMT and should not be manually modified.
+This log was last generated on Mon, 28 Jul 2025 18:44:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.4.1)
+
+Mon, 28 Jul 2025 18:44:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.4.0..@fluentui/react-select_v9.4.1)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.4.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.4.0)
+
+Thu, 17 Jul 2025 13:49:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.3.7..@fluentui/react-select_v9.4.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-field to v9.4.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.3.7)
 
-Fri, 11 Jul 2025 15:56:58 GMT 
+Fri, 11 Jul 2025 15:59:24 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.3.6..@fluentui/react-select_v9.3.7)
 
 ### Patches

package/lib/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Select.ts"],"sourcesContent":["export type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './components/Select/index';\nexport {\n  Select,\n  renderSelect_unstable,\n  selectClassNames,\n  useSelectStyles_unstable,\n  useSelect_unstable,\n} from './components/Select/index';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelect_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,gBAAgB,EAChBC,wBAAwB,EACxBC,kBAAkB,QACb,4BAA4B"}
+{"version":3,"sources":["../src/Select.ts"],"sourcesContent":["export type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './components/Select/index';\nexport {\n  Select,\n  renderSelect_unstable,\n  selectClassNames,\n  useSelectStyles_unstable,\n  useSelect_unstable,\n} from './components/Select/index';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelect_unstable"],"mappings":"AACA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,gBAAgB,EAChBC,wBAAwB,EACxBC,kBAAkB,QACb,4BAA4B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles.styles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n  const state = useSelect_unstable(props, ref);\n\n  useSelectStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSelectStyles_unstable')(state);\n\n  return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"names":["React","useSelect_unstable","renderSelect_unstable","useSelectStyles_unstable","useCustomStyleHook_unstable","Select","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles.styles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n  const state = useSelect_unstable(props, ref);\n\n  useSelectStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSelectStyles_unstable')(state);\n\n  return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"names":["React","useSelect_unstable","renderSelect_unstable","useSelectStyles_unstable","useCustomStyleHook_unstable","Select","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/Select.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n  /*\n   * Wrapper for both the select and icon, renders as a `<span>`.\n   * The `className` and `style` props on `<Select>` are applied to this slot;\n   * All other top-level props are applied to the primary slot, `select`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /** Primary slot: the actual `<select>` element */\n  select: NonNullable<Slot<'select'>>;\n\n  /** the icon, typically a down arrow */\n  icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n  /**\n   * Controls the colors and borders of the Select.\n   *\n   * @default 'outline'\n   */\n  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n  /**\n   * Called when the user changes the select element's value by selecting an option.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n  /**\n   * Matches the Input sizes\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n  /**\n   * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n   */\n  value: string;\n};\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Select/Select.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n  /*\n   * Wrapper for both the select and icon, renders as a `<span>`.\n   * The `className` and `style` props on `<Select>` are applied to this slot;\n   * All other top-level props are applied to the primary slot, `select`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /** Primary slot: the actual `<select>` element */\n  select: NonNullable<Slot<'select'>>;\n\n  /** the icon, typically a down arrow */\n  icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n  /**\n   * Controls the colors and borders of the Select.\n   *\n   * @default 'outline'\n   */\n  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n  /**\n   * Called when the user changes the select element's value by selecting an option.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n  /**\n   * Matches the Input sizes\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n  /**\n   * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n   */\n  value: string;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","useSelect_unstable","selectClassNames","useSelectStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAElC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}
+{"version":3,"sources":["../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","useSelect_unstable","selectClassNames","useSelectStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAElC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/renderSelect.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n  assertSlots<SelectSlots>(state);\n  return (\n    <state.root>\n      <state.select>{state.select.children}</state.select>\n      {state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSelect_unstable","state","root","select","children","icon"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,MAAM;0BAAEF,MAAME,MAAM,CAACC,QAAQ;;YACnCH,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAGhC,EAAE"}
+{"version":3,"sources":["../src/components/Select/renderSelect.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n  assertSlots<SelectSlots>(state);\n  return (\n    <state.root>\n      <state.select>{state.select.children}</state.select>\n      {state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSelect_unstable","state","root","select","children","icon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,MAAM;0BAAEF,MAAME,MAAM,CAACC,QAAQ;;YACnCH,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAGhC,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["import * 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 { 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 {\n    defaultValue,\n    value,\n    select,\n    icon,\n    root,\n    appearance = overrides.inputDefaultAppearance ?? 'outline',\n\n    onChange,\n    size = 'medium',\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],\n  });\n\n  const state: SelectState = {\n    size,\n    appearance,\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      defaultProps: { children: <ChevronDownRegular /> },\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","defaultValue","value","select","icon","root","appearance","inputDefaultAppearance","onChange","size","nativeProps","primarySlotTagName","excludedPropNames","state","components","always","defaultProps","primary","elementType","optional","renderByDefault","children","event","target"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,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;QAQHO;IANf,MAAM,EACJC,YAAY,EACZC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,IAAI,EACJC,aAAaN,CAAAA,oCAAAA,UAAUO,sBAAsB,cAAhCP,+CAAAA,oCAAoC,SAAS,EAE1DQ,QAAQ,EACRC,OAAO,QAAQ,EAChB,GAAGd;IAEJ,MAAMe,cAActB,0BAA0B;QAC5CO;QACAgB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAc;YAAgB;YAAY;YAAQ;SAAQ;IAChF;IAEA,MAAMC,QAAqB;QACzBJ;QACAH;QACAQ,YAAY;YACVT,MAAM;YACNF,QAAQ;YACRC,MAAM;QACR;QACAD,QAAQb,KAAKyB,MAAM,CAACZ,QAAQ;YAC1Ba,cAAc;gBACZf;gBACAC;gBACAN;gBACA,GAAGc,YAAYO,OAAO;YACxB;YACAC,aAAa;QACf;QACAd,MAAMd,KAAK6B,QAAQ,CAACf,MAAM;YACxBgB,iBAAiB;YACjBJ,cAAc;gBAAEK,wBAAU,oBAAC9B;YAAsB;YACjD2B,aAAa;QACf;QACAb,MAAMf,KAAKyB,MAAM,CAACV,MAAM;YACtBW,cAAcN,YAAYL,IAAI;YAC9Ba,aAAa;QACf;IACF;IAEAL,MAAMV,MAAM,CAACK,QAAQ,GAAGnB,iBAAiBiC,CAAAA;QACvCd,qBAAAA,+BAAAA,SAAWc,OAAO;YAAEpB,OAAO,AAACoB,MAAMC,MAAM,CAAuBrB,KAAK;QAAC;IACvE;IAEA,OAAOW;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["import * 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 { 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 {\n    defaultValue,\n    value,\n    select,\n    icon,\n    root,\n    appearance = overrides.inputDefaultAppearance ?? 'outline',\n\n    onChange,\n    size = 'medium',\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],\n  });\n\n  const state: SelectState = {\n    size,\n    appearance,\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      defaultProps: { children: <ChevronDownRegular /> },\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","defaultValue","value","select","icon","root","appearance","inputDefaultAppearance","onChange","size","nativeProps","primarySlotTagName","excludedPropNames","state","components","always","defaultProps","primary","elementType","optional","renderByDefault","children","event","target"],"mappings":"AAAA,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;QAQHO;IANf,MAAM,EACJC,YAAY,EACZC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,IAAI,EACJC,aAAaN,CAAAA,oCAAAA,UAAUO,sBAAsB,cAAhCP,+CAAAA,oCAAoC,SAAS,EAE1DQ,QAAQ,EACRC,OAAO,QAAQ,EAChB,GAAGd;IAEJ,MAAMe,cAActB,0BAA0B;QAC5CO;QACAgB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAc;YAAgB;YAAY;YAAQ;SAAQ;IAChF;IAEA,MAAMC,QAAqB;QACzBJ;QACAH;QACAQ,YAAY;YACVT,MAAM;YACNF,QAAQ;YACRC,MAAM;QACR;QACAD,QAAQb,KAAKyB,MAAM,CAACZ,QAAQ;YAC1Ba,cAAc;gBACZf;gBACAC;gBACAN;gBACA,GAAGc,YAAYO,OAAO;YACxB;YACAC,aAAa;QACf;QACAd,MAAMd,KAAK6B,QAAQ,CAACf,MAAM;YACxBgB,iBAAiB;YACjBJ,cAAc;gBAAEK,wBAAU,oBAAC9B;YAAsB;YACjD2B,aAAa;QACf;QACAb,MAAMf,KAAKyB,MAAM,CAACV,MAAM;YACtBW,cAAcN,YAAYL,IAAI;YAC9Ba,aAAa;QACf;IACF;IAEAL,MAAMV,MAAM,CAACK,QAAQ,GAAGnB,iBAAiBiC,CAAAA;QACvCd,qBAAAA,+BAAAA,SAAWc,OAAO;YAAEpB,OAAO,AAACoB,MAAMC,MAAM,CAAuBrB,KAAK;QAAC;IACvE;IAEA,OAAOW;AACT,EAAE"}

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

@@ -0,0 +1,234 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const selectClassNames = {
+    root: 'fui-Select',
+    select: 'fui-Select__select',
+    icon: 'fui-Select__icon'
+};
+const iconSizes = {
+    small: '16px',
+    medium: '20px',
+    large: '24px'
+};
+//TODO: Should fieldHeights be a set of global design tokens or constants?
+const fieldHeights = {
+    small: '24px',
+    medium: '32px',
+    large: '40px'
+};
+/* Since the <select> element must span the full width and cannot have children,
+ * the right padding needs to be calculated from the sum of the following:
+ * 1. Field padding-right
+ * 2. Icon width
+ * 3. Content-icon spacing
+ * 4. Content inner padding
+ */ const paddingRight = {
+    small: `calc(${tokens.spacingHorizontalSNudge}
+    + ${iconSizes.small}
+    + ${tokens.spacingHorizontalXXS}
+    + ${tokens.spacingHorizontalXXS})`,
+    medium: `calc(${tokens.spacingHorizontalMNudge}
+    + ${iconSizes.medium}
+    + ${tokens.spacingHorizontalXXS}
+    + ${tokens.spacingHorizontalXXS})`,
+    large: `calc(${tokens.spacingHorizontalM}
+    + ${iconSizes.large}
+    + ${tokens.spacingHorizontalSNudge}
+    + ${tokens.spacingHorizontalSNudge})`
+};
+/* Left padding is calculated from the outer padding + inner content padding values
+ * since <select> can't have additional child content or custom inner layout */ const paddingLeft = {
+    small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,
+    medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,
+    large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`
+};
+/* end of shared values */ const useRootStyles = makeStyles({
+    base: {
+        alignItems: 'center',
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexWrap: 'nowrap',
+        fontFamily: tokens.fontFamilyBase,
+        position: 'relative',
+        '&::after': {
+            backgroundImage: `linear-gradient(
+        0deg,
+        ${tokens.colorCompoundBrandStroke} 0%,
+        ${tokens.colorCompoundBrandStroke} 50%,
+        transparent 50%,
+        transparent 100%
+      )`,
+            borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,
+            boxSizing: 'border-box',
+            content: '""',
+            height: tokens.borderRadiusMedium,
+            position: 'absolute',
+            bottom: '0',
+            left: '0',
+            right: '0',
+            transform: 'scaleX(0)',
+            transitionProperty: 'transform',
+            transitionDuration: tokens.durationUltraFast,
+            transitionDelay: tokens.curveAccelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        '&:focus-within::after': {
+            transform: 'scaleX(1)',
+            transitionProperty: 'transform',
+            transitionDuration: tokens.durationNormal,
+            transitionDelay: tokens.curveDecelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        }
+    }
+});
+const useSelectStyles = makeStyles({
+    base: {
+        appearance: 'none',
+        border: '1px solid transparent',
+        borderRadius: tokens.borderRadiusMedium,
+        boxShadow: 'none',
+        boxSizing: 'border-box',
+        color: tokens.colorNeutralForeground1,
+        cursor: 'pointer',
+        flexGrow: 1,
+        maxWidth: '100%',
+        paddingBottom: 0,
+        paddingTop: 0,
+        ':focus': {
+            outlineWidth: '2px',
+            outlineStyle: 'solid',
+            outlineColor: 'transparent'
+        }
+    },
+    disabled: {
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+        color: tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed',
+        '@media (forced-colors: active)': {
+            ...shorthands.borderColor('GrayText')
+        }
+    },
+    disabledUnderline: {
+        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled, tokens.colorTransparentStrokeDisabled, tokens.colorNeutralStrokeDisabled)
+    },
+    small: {
+        height: fieldHeights.small,
+        paddingLeft: paddingLeft.small,
+        paddingRight: paddingRight.small,
+        ...typographyStyles.caption1
+    },
+    medium: {
+        height: fieldHeights.medium,
+        paddingLeft: paddingLeft.medium,
+        paddingRight: paddingRight.medium,
+        ...typographyStyles.body1
+    },
+    large: {
+        height: fieldHeights.large,
+        paddingLeft: paddingLeft.large,
+        paddingRight: paddingRight.large,
+        ...typographyStyles.body2
+    },
+    outline: {
+        backgroundColor: tokens.colorNeutralBackground1,
+        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        borderBottomColor: tokens.colorNeutralStrokeAccessible
+    },
+    outlineInteractive: {
+        '&:hover': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
+            borderBottomColor: tokens.colorNeutralStrokeAccessible
+        },
+        '&:active': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: tokens.colorNeutralStrokeAccessible
+        }
+    },
+    underline: {
+        backgroundColor: tokens.colorTransparentBackground,
+        borderBottom: `1px solid ${tokens.colorNeutralStrokeAccessible}`,
+        borderRadius: '0',
+        '& option': {
+            // The transparent select bg means the option background must be set so the text is visible in dark themes
+            backgroundColor: tokens.colorNeutralBackground1
+        }
+    },
+    'filled-lighter': {
+        backgroundColor: tokens.colorNeutralBackground1
+    },
+    'filled-darker': {
+        backgroundColor: tokens.colorNeutralBackground3
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)
+        }
+    },
+    invalidUnderline: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            borderBottomColor: tokens.colorPaletteRedBorder2
+        }
+    }
+});
+const useIconStyles = makeStyles({
+    icon: {
+        boxSizing: 'border-box',
+        color: tokens.colorNeutralStrokeAccessible,
+        display: 'block',
+        position: 'absolute',
+        pointerEvents: 'none',
+        // the SVG must have display: block for accurate positioning
+        // otherwise an extra inline space is inserted after the svg element
+        '& svg': {
+            display: 'block'
+        }
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    },
+    small: {
+        fontSize: iconSizes.small,
+        height: iconSizes.small,
+        right: tokens.spacingHorizontalSNudge,
+        width: iconSizes.small
+    },
+    medium: {
+        fontSize: iconSizes.medium,
+        height: iconSizes.medium,
+        right: tokens.spacingHorizontalMNudge,
+        width: iconSizes.medium
+    },
+    large: {
+        fontSize: iconSizes.large,
+        height: iconSizes.large,
+        right: tokens.spacingHorizontalM,
+        width: iconSizes.large
+    }
+});
+/**
+ * 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();
+    state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);
+    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) {
+        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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Select/useSelectStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { 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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"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Select,\n  selectClassNames,\n  renderSelect_unstable,\n  useSelectStyles_unstable,\n  useSelect_unstable,\n} from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select';\n"],"names":["Select","selectClassNames","renderSelect_unstable","useSelectStyles_unstable","useSelect_unstable"],"rangeMappings":"","mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Select,\n  selectClassNames,\n  renderSelect_unstable,\n  useSelectStyles_unstable,\n  useSelect_unstable,\n} from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select';\n"],"names":["Select","selectClassNames","renderSelect_unstable","useSelectStyles_unstable","useSelect_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW"}

package/lib-commonjs/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Select.ts"],"sourcesContent":["export type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './components/Select/index';\nexport {\n  Select,\n  renderSelect_unstable,\n  selectClassNames,\n  useSelectStyles_unstable,\n  useSelect_unstable,\n} from './components/Select/index';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelect_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,MAAM;eAANA,aAAM;;IACNC,qBAAqB;eAArBA,4BAAqB;;IACrBC,gBAAgB;eAAhBA,uBAAgB;;IAChBC,wBAAwB;eAAxBA,+BAAwB;;IACxBC,kBAAkB;eAAlBA,yBAAkB;;;uBACb"}
+{"version":3,"sources":["../src/Select.ts"],"sourcesContent":["export type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './components/Select/index';\nexport {\n  Select,\n  renderSelect_unstable,\n  selectClassNames,\n  useSelectStyles_unstable,\n  useSelect_unstable,\n} from './components/Select/index';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelect_unstable"],"mappings":";;;;;;;;;;;;eAEEA,aAAM;;;eACNC,4BAAqB;;;eACrBC,uBAAgB;;;eAChBC,+BAAwB;;;eACxBC,yBAAkB;;;uBACb,4BAA4B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles.styles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n  const state = useSelect_unstable(props, ref);\n\n  useSelectStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSelectStyles_unstable')(state);\n\n  return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"names":["Select","React","forwardRef","props","ref","state","useSelect_unstable","useSelectStyles_unstable","useCustomStyleHook_unstable","renderSelect_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;2BACY;8BACG;uCACG;qCAGG;AAKrC,MAAMA,SAAAA,WAAAA,GAA2CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQC,IAAAA,6BAAAA,EAAmBH,OAAOC;IAExCG,IAAAA,+CAAAA,EAAyBF;IAEzBG,IAAAA,gDAAAA,EAA4B,4BAA4BH;IAExD,OAAOI,IAAAA,mCAAAA,EAAsBJ;AAC/B;AAEAL,OAAOU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles.styles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n  const state = useSelect_unstable(props, ref);\n\n  useSelectStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSelectStyles_unstable')(state);\n\n  return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"names":["React","useSelect_unstable","renderSelect_unstable","useSelectStyles_unstable","useCustomStyleHook_unstable","Select","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;2BACI,cAAc;8BACX,iBAAiB;uCACd,2BAA2B;qCAGxB,kCAAkC;AAKvE,eAAMA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,iCAAAA,EAAmBM,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOP,mCAAAA,EAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/Select.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n  /*\n   * Wrapper for both the select and icon, renders as a `<span>`.\n   * The `className` and `style` props on `<Select>` are applied to this slot;\n   * All other top-level props are applied to the primary slot, `select`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /** Primary slot: the actual `<select>` element */\n  select: NonNullable<Slot<'select'>>;\n\n  /** the icon, typically a down arrow */\n  icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n  /**\n   * Controls the colors and borders of the Select.\n   *\n   * @default 'outline'\n   */\n  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n  /**\n   * Called when the user changes the select element's value by selecting an option.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n  /**\n   * Matches the Input sizes\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n  /**\n   * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n   */\n  value: string;\n};\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
+{"version":3,"sources":["../src/components/Select/Select.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n  /*\n   * Wrapper for both the select and icon, renders as a `<span>`.\n   * The `className` and `style` props on `<Select>` are applied to this slot;\n   * All other top-level props are applied to the primary slot, `select`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /** Primary slot: the actual `<select>` element */\n  select: NonNullable<Slot<'select'>>;\n\n  /** the icon, typically a down arrow */\n  icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n  /**\n   * Controls the colors and borders of the Select.\n   *\n   * @default 'outline'\n   */\n  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n  /**\n   * Called when the user changes the select element's value by selecting an option.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n  /**\n   * Matches the Input sizes\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n  /**\n   * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n   */\n  value: string;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelect_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,MAAM;eAANA,cAAM;;IAENC,qBAAqB;eAArBA,mCAAqB;;IAErBC,gBAAgB;eAAhBA,uCAAgB;;IAAEC,wBAAwB;eAAxBA,+CAAwB;;IAD1CC,kBAAkB;eAAlBA,6BAAkB;;;wBAHJ;8BAEe;2BACH;uCACwB"}
+{"version":3,"sources":["../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","useSelect_unstable","selectClassNames","useSelectStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eAENC,mCAAqB;;;eAErBE,uCAAgB;;;eAAEC,+CAAwB;;;eAD1CF,6BAAkB;;;wBAHJ,WAAW;8BAEI,iBAAiB;2BACpB,cAAc;uCACU,2BAA2B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/renderSelect.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n  assertSlots<SelectSlots>(state);\n  return (\n    <state.root>\n      <state.select>{state.select.children}</state.select>\n      {state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["renderSelect_unstable","state","assertSlots","_jsxs","root","_jsx","select","children","icon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,wBAAwB,CAACC;IACpCC,IAAAA,2BAAAA,EAAyBD;IACzB,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;0BACTC,IAAAA,eAAA,EAACJ,MAAMK,MAAM,EAAA;0BAAEL,MAAMK,MAAM,CAACC,QAAQ;;YACnCN,MAAMO,IAAI,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACJ,MAAMO,IAAI,EAAA,CAAA;;;AAGhC"}
+{"version":3,"sources":["../src/components/Select/renderSelect.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n  assertSlots<SelectSlots>(state);\n  return (\n    <state.root>\n      <state.select>{state.select.children}</state.select>\n      {state.icon && <state.icon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSelect_unstable","state","root","select","children","icon"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IACzB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,MAAM,EAAA;0BAAEF,MAAME,MAAM,CAACC,QAAQ;;YACnCH,MAAMI,IAAI,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;;;AAGhC,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["import * 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 { 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 {\n    defaultValue,\n    value,\n    select,\n    icon,\n    root,\n    appearance = overrides.inputDefaultAppearance ?? 'outline',\n\n    onChange,\n    size = 'medium',\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],\n  });\n\n  const state: SelectState = {\n    size,\n    appearance,\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      defaultProps: { children: <ChevronDownRegular /> },\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":["useSelect_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","overrides","useOverrides","defaultValue","value","select","icon","root","appearance","inputDefaultAppearance","onChange","size","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","state","components","slot","always","defaultProps","primary","elementType","optional","renderByDefault","children","React","createElement","ChevronDownRegular","useEventCallback","event","target"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;4BACuB;gCACoB;4BAC/B;qCAEmB;AAW/C,MAAMA,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQE,IAAAA,yCAAAA,EAA8BF,OAAO;QAAEG,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,YAAYC,IAAAA,0CAAAA;QAQHD;IANf,MAAM,EACJE,YAAY,EACZC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,IAAI,EACJC,aAAaP,CAAAA,oCAAAA,UAAUQ,sBAAsB,AAAtBA,MAAsB,QAAhCR,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAE1DS,QAAQ,EACRC,OAAO,QAAQ,EAChB,GAAGhB;IAEJ,MAAMiB,cAAcC,IAAAA,yCAAAA,EAA0B;QAC5ClB;QACAmB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAc;YAAgB;YAAY;YAAQ;SAAQ;IAChF;IAEA,MAAMC,QAAqB;QACzBL;QACAH;QACAS,YAAY;YACVV,MAAM;YACNF,QAAQ;YACRC,MAAM;QACR;QACAD,QAAQa,oBAAAA,CAAKC,MAAM,CAACd,QAAQ;YAC1Be,cAAc;gBACZjB;gBACAC;gBACAR;gBACA,GAAGgB,YAAYS,OAAO;YACxB;YACAC,aAAa;QACf;QACAhB,MAAMY,oBAAAA,CAAKK,QAAQ,CAACjB,MAAM;YACxBkB,iBAAiB;YACjBJ,cAAc;gBAAEK,UAAAA,WAAAA,GAAUC,OAAAC,aAAA,CAACC,8BAAAA,EAAAA;YAAsB;YACjDN,aAAa;QACf;QACAf,MAAMW,oBAAAA,CAAKC,MAAM,CAACZ,MAAM;YACtBa,cAAcR,YAAYL,IAAI;YAC9Be,aAAa;QACf;IACF;IAEAN,MAAMX,MAAM,CAACK,QAAQ,GAAGmB,IAAAA,gCAAAA,EAAiBC,CAAAA;QACvCpB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWoB,OAAO;YAAE1B,OAAO0B,MAAOC,MAAM,CAAuB3B,KAAK;QAAC;IACvE;IAEA,OAAOY;AACT"}
+{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["import * 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 { 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 {\n    defaultValue,\n    value,\n    select,\n    icon,\n    root,\n    appearance = overrides.inputDefaultAppearance ?? 'outline',\n\n    onChange,\n    size = 'medium',\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],\n  });\n\n  const state: SelectState = {\n    size,\n    appearance,\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      defaultProps: { children: <ChevronDownRegular /> },\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","defaultValue","value","select","icon","root","appearance","inputDefaultAppearance","onChange","size","nativeProps","primarySlotTagName","excludedPropNames","state","components","always","defaultProps","primary","elementType","optional","renderByDefault","children","event","target"],"mappings":";;;;+BAgBaQ;;;;;;;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;QAQHO;IANf,MAAM,EACJC,YAAY,EACZC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,IAAI,EACJC,aAAaN,CAAAA,oCAAAA,UAAUO,sBAAAA,AAAsB,MAAA,QAAhCP,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAE1DQ,QAAQ,EACRC,OAAO,QAAQ,EAChB,GAAGd;IAEJ,MAAMe,kBAActB,yCAAAA,EAA0B;QAC5CO;QACAgB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAc;YAAgB;YAAY;YAAQ;SAAQ;IAChF;IAEA,MAAMC,QAAqB;QACzBJ;QACAH;QACAQ,YAAY;YACVT,MAAM;YACNF,QAAQ;YACRC,MAAM;QACR;QACAD,QAAQb,oBAAAA,CAAKyB,MAAM,CAACZ,QAAQ;YAC1Ba,cAAc;gBACZf;gBACAC;gBACAN;gBACA,GAAGc,YAAYO,OAAO;YACxB;YACAC,aAAa;QACf;QACAd,MAAMd,oBAAAA,CAAK6B,QAAQ,CAACf,MAAM;YACxBgB,iBAAiB;YACjBJ,cAAc;gBAAEK,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAAC9B,8BAAAA,EAAAA;YAAsB;YACjD2B,aAAa;QACf;QACAb,MAAMf,oBAAAA,CAAKyB,MAAM,CAACV,MAAM;YACtBW,cAAcN,YAAYL,IAAI;YAC9Ba,aAAa;QACf;IACF;IAEAL,MAAMV,MAAM,CAACK,QAAQ,OAAGnB,gCAAAA,EAAiBiC,CAAAA;QACvCd,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWc,OAAO;YAAEpB,OAAQoB,MAAMC,MAAM,CAAuBrB,KAAK;QAAC;IACvE;IAEA,OAAOW;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["useSelectStyles.styles.js"],"sourcesContent":["import { 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":["selectClassNames","useSelectStyles_unstable","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","tokens","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","__styles","base","Bt984gj","B7ck84d","mc9l5x","Eh141a","Bahqtrf","qhf8xq","h62rwi","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","li1rpt","Bsft5z2","Dlnsje","E3zdtr","By385i5","Eqx8gd","B1piin3","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","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","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","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","Bbusuzp","j35jbq","a9b677","state","size","appearance","iconStyles","rootStyles","selectStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,gBAAgB;eAAhBA;;IAyNIC,wBAAwB;eAAxBA;;;uBA3NoC;4BACZ;AAClC,MAAMD,mBAAmB;IAC5BE,MAAM;IACNC,QAAQ;IACRC,MAAM;AACV;AACA,MAAMC,YAAY;IACdC,OAAO;IACPC,QAAQ;IACRC,OAAO;AACX;AACA,0EAAA;AACA,MAAMC,eAAe;IACjBH,OAAO;IACPC,QAAQ;IACRC,OAAO;AACX;AACA;;;;;;CAMA,GAAI,MAAME,eAAe;IACrBJ,OAAO,CAAA,KAAA,EAAQK,kBAAM,CAACC,uBAAuB,CAAA;MACjD,EAAQP,UAAUC,KAAK,CAAA;MACvB,EAAQK,kBAAM,CAACE,oBAAoB,CAAA;MACnC,EAAQF,kBAAM,CAACE,oBAAoB,CAAA,CAAA,CAAG;IAClCN,QAAQ,CAAA,KAAA,EAAQI,kBAAM,CAACG,uBAAuB,CAAA;MAClD,EAAQT,UAAUE,MAAM,CAAA;MACxB,EAAQI,kBAAM,CAACE,oBAAoB,CAAA;MACnC,EAAQF,kBAAM,CAACE,oBAAoB,CAAA,CAAA,CAAG;IAClCL,OAAO,CAAA,KAAA,EAAQG,kBAAM,CAACI,kBAAkB,CAAA;MAC5C,EAAQV,UAAUG,KAAK,CAAA;MACvB,EAAQG,kBAAM,CAACC,uBAAuB,CAAA;MACtC,EAAQD,kBAAM,CAACC,uBAAuB,CAAA,CAAA,CAAA;AACtC;AACA;6EACA,GAAgF,MAAMI,cAAc;IAChGV,OAAO,CAAA,KAAA,EAAQK,kBAAM,CAACC,uBAAuB,CAAA,GAAA,EAAMD,kBAAM,CAACE,oBAAoB,CAAA,CAAA,CAAG;IACjFN,QAAQ,CAAA,KAAA,EAAQI,kBAAM,CAACG,uBAAuB,CAAA,GAAA,EAAMH,kBAAM,CAACE,oBAAoB,CAAA,CAAA,CAAG;IAClFL,OAAO,CAAA,KAAA,EAAQG,kBAAM,CAACI,kBAAkB,CAAA,GAAA,EAAMJ,kBAAM,CAACC,uBAAuB,CAAA,CAAA,CAAA;AAChF;AACA,wBAAA,GAA2B,MAAMK,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AA6CjD,MAAMC,kBAAe,WAAA,GAAGrC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAqC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAA1D,SAAA;QAAA2D,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,UAAA;QAAAC,QAAA;QAAApB,QAAA;QAAAJ,QAAA;YAAA;YAAA;SAAA;QAAAR,SAAA;QAAAI,QAAA;YAAA;YAAA;SAAA;QAAAkB,QAAA;QAAAC,SAAA;QAAAU,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,mBAAA;QAAAzB,QAAA;QAAAJ,QAAA;YAAA;YAAA;SAAA;QAAAR,SAAA;QAAAI,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAxD,OAAA;QAAA0F,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAA1E,SAAA;QAAA2E,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAA9F,QAAA;QAAAyF,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAA1E,SAAA;QAAA2E,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAA7F,OAAA;QAAAwF,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAA1E,SAAA;QAAA2E,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAC,SAAA;QAAAZ,QAAA;QAAAjC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAA8B,oBAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,WAAA;QAAAtB,QAAA;QAAAhC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAH,SAAA;QAAAiB,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAmC,QAAA;IAAA;IAAA,kBAAA;QAAAvB,QAAA;IAAA;IAAA,iBAAA;QAAAA,QAAA;IAAA;IAAAwB,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,kBAAA;QAAAF,QAAA;IAAA;AAAA,GAAA;IAAAlE,GAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,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,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAoE,GAAA;QAAA;QAAA;QAAA;KAAA;IAAAnE,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;IAAAoE,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AA0FxB,MAAMC,gBAAa,WAAA,GAAGzG,IAAAA,eAAA,EAAA;IAAAd,MAAA;QAAAiB,SAAA;QAAA2D,QAAA;QAAA1D,QAAA;QAAAG,QAAA;QAAAmG,SAAA;QAAAC,SAAA;IAAA;IAAApC,UAAA;QAAAT,QAAA;QAAA8C,SAAA;IAAA;IAAAxH,OAAA;QAAA6F,SAAA;QAAAH,SAAA;QAAA+B,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;IAAA;IAAAzH,QAAA;QAAA4F,SAAA;QAAAH,SAAA;QAAA+B,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;IAAA;IAAAxH,OAAA;QAAA2F,SAAA;QAAAH,SAAA;QAAA+B,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAA7E,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAE,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AAwCX,MAAMpD,2BAA4BgI,CAAAA;IACzC;IACA,MAAM,EAAEC,IAAI,EAAEC,UAAAA,EAAY,GAAGF;IAC7B,MAAMxC,WAAWwC,MAAM9H,MAAM,CAACsF,QAAQ;IACtC,MAAMyB,UAAU,CAAA,EAAGe,MAAM9H,MAAM,CAAC,eAAe,CAAA,CAAE,KAAK;IACtD,MAAMiI,aAAaT;IACnB,MAAMU,aAAapH;IACnB,MAAMqH,eAAe/E;IACrB0E,MAAM/H,IAAI,CAACqI,SAAS,GAAGC,IAAAA,mBAAY,EAACxI,iBAAiBE,IAAI,EAAEmI,WAAWlH,IAAI,EAAE8G,MAAM/H,IAAI,CAACqI,SAAS;IAChGN,MAAM9H,MAAM,CAACoI,SAAS,GAAGC,IAAAA,mBAAY,EAACxI,iBAAiBG,MAAM,EAAEmI,aAAanH,IAAI,EAAEmH,YAAY,CAACJ,KAAK,EAAEI,YAAY,CAACH,WAAW,EAAE,CAAC1C,YAAY0C,eAAe,aAAaG,aAAa/B,kBAAkB,EAAE,CAACd,YAAYyB,WAAWiB,eAAe,eAAeG,aAAapB,OAAO,EAAE,CAACzB,YAAYyB,WAAWiB,eAAe,eAAeG,aAAaf,gBAAgB,EAAE9B,YAAY6C,aAAa7C,QAAQ,EAAEA,YAAY0C,eAAe,eAAeG,aAAavC,iBAAiB,EAAEkC,MAAM9H,MAAM,CAACoI,SAAS;IAC9e,IAAIN,MAAM7H,IAAI,EAAE;QACZ6H,MAAM7H,IAAI,CAACmI,SAAS,GAAGC,IAAAA,mBAAY,EAACxI,iBAAiBI,IAAI,EAAEgI,WAAWhI,IAAI,EAAEqF,YAAY2C,WAAW3C,QAAQ,EAAE2C,UAAU,CAACF,KAAK,EAAED,MAAM7H,IAAI,CAACmI,SAAS;IACvJ;IACA,OAAON;AACX"}
+{"version":3,"sources":["useSelectStyles.styles.js"],"sourcesContent":["import { 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","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","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","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","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","Bbusuzp","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

@@ -0,0 +1,250 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    selectClassNames: function() {
+        return selectClassNames;
+    },
+    useSelectStyles_unstable: function() {
+        return useSelectStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const selectClassNames = {
+    root: 'fui-Select',
+    select: 'fui-Select__select',
+    icon: 'fui-Select__icon'
+};
+const iconSizes = {
+    small: '16px',
+    medium: '20px',
+    large: '24px'
+};
+//TODO: Should fieldHeights be a set of global design tokens or constants?
+const fieldHeights = {
+    small: '24px',
+    medium: '32px',
+    large: '40px'
+};
+/* Since the <select> element must span the full width and cannot have children,
+ * the right padding needs to be calculated from the sum of the following:
+ * 1. Field padding-right
+ * 2. Icon width
+ * 3. Content-icon spacing
+ * 4. Content inner padding
+ */ const paddingRight = {
+    small: `calc(${_reacttheme.tokens.spacingHorizontalSNudge}
+    + ${iconSizes.small}
+    + ${_reacttheme.tokens.spacingHorizontalXXS}
+    + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+    medium: `calc(${_reacttheme.tokens.spacingHorizontalMNudge}
+    + ${iconSizes.medium}
+    + ${_reacttheme.tokens.spacingHorizontalXXS}
+    + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+    large: `calc(${_reacttheme.tokens.spacingHorizontalM}
+    + ${iconSizes.large}
+    + ${_reacttheme.tokens.spacingHorizontalSNudge}
+    + ${_reacttheme.tokens.spacingHorizontalSNudge})`
+};
+/* Left padding is calculated from the outer padding + inner content padding values
+ * since <select> can't have additional child content or custom inner layout */ const paddingLeft = {
+    small: `calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+    medium: `calc(${_reacttheme.tokens.spacingHorizontalMNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
+    large: `calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`
+};
+/* end of shared values */ const useRootStyles = (0, _react.makeStyles)({
+    base: {
+        alignItems: 'center',
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexWrap: 'nowrap',
+        fontFamily: _reacttheme.tokens.fontFamilyBase,
+        position: 'relative',
+        '&::after': {
+            backgroundImage: `linear-gradient(
+        0deg,
+        ${_reacttheme.tokens.colorCompoundBrandStroke} 0%,
+        ${_reacttheme.tokens.colorCompoundBrandStroke} 50%,
+        transparent 50%,
+        transparent 100%
+      )`,
+            borderRadius: `0 0 ${_reacttheme.tokens.borderRadiusMedium} ${_reacttheme.tokens.borderRadiusMedium}`,
+            boxSizing: 'border-box',
+            content: '""',
+            height: _reacttheme.tokens.borderRadiusMedium,
+            position: 'absolute',
+            bottom: '0',
+            left: '0',
+            right: '0',
+            transform: 'scaleX(0)',
+            transitionProperty: 'transform',
+            transitionDuration: _reacttheme.tokens.durationUltraFast,
+            transitionDelay: _reacttheme.tokens.curveAccelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        },
+        '&:focus-within::after': {
+            transform: 'scaleX(1)',
+            transitionProperty: 'transform',
+            transitionDuration: _reacttheme.tokens.durationNormal,
+            transitionDelay: _reacttheme.tokens.curveDecelerateMid,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms'
+            }
+        }
+    }
+});
+const useSelectStyles = (0, _react.makeStyles)({
+    base: {
+        appearance: 'none',
+        border: '1px solid transparent',
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        boxShadow: 'none',
+        boxSizing: 'border-box',
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        cursor: 'pointer',
+        flexGrow: 1,
+        maxWidth: '100%',
+        paddingBottom: 0,
+        paddingTop: 0,
+        ':focus': {
+            outlineWidth: '2px',
+            outlineStyle: 'solid',
+            outlineColor: 'transparent'
+        }
+    },
+    disabled: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed',
+        '@media (forced-colors: active)': {
+            ..._react.shorthands.borderColor('GrayText')
+        }
+    },
+    disabledUnderline: {
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeDisabled, _reacttheme.tokens.colorTransparentStrokeDisabled, _reacttheme.tokens.colorNeutralStrokeDisabled)
+    },
+    small: {
+        height: fieldHeights.small,
+        paddingLeft: paddingLeft.small,
+        paddingRight: paddingRight.small,
+        ..._reacttheme.typographyStyles.caption1
+    },
+    medium: {
+        height: fieldHeights.medium,
+        paddingLeft: paddingLeft.medium,
+        paddingRight: paddingRight.medium,
+        ..._reacttheme.typographyStyles.body1
+    },
+    large: {
+        height: fieldHeights.large,
+        paddingLeft: paddingLeft.large,
+        paddingRight: paddingRight.large,
+        ..._reacttheme.typographyStyles.body2
+    },
+    outline: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+        borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
+    },
+    outlineInteractive: {
+        '&:hover': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
+        },
+        '&:active': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
+        }
+    },
+    underline: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        borderBottom: `1px solid ${_reacttheme.tokens.colorNeutralStrokeAccessible}`,
+        borderRadius: '0',
+        '& option': {
+            // The transparent select bg means the option background must be set so the text is visible in dark themes
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground1
+        }
+    },
+    'filled-lighter': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1
+    },
+    'filled-darker': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground3
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
+        }
+    },
+    invalidUnderline: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            borderBottomColor: _reacttheme.tokens.colorPaletteRedBorder2
+        }
+    }
+});
+const useIconStyles = (0, _react.makeStyles)({
+    icon: {
+        boxSizing: 'border-box',
+        color: _reacttheme.tokens.colorNeutralStrokeAccessible,
+        display: 'block',
+        position: 'absolute',
+        pointerEvents: 'none',
+        // the SVG must have display: block for accurate positioning
+        // otherwise an extra inline space is inserted after the svg element
+        '& svg': {
+            display: 'block'
+        }
+    },
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    },
+    small: {
+        fontSize: iconSizes.small,
+        height: iconSizes.small,
+        right: _reacttheme.tokens.spacingHorizontalSNudge,
+        width: iconSizes.small
+    },
+    medium: {
+        fontSize: iconSizes.medium,
+        height: iconSizes.medium,
+        right: _reacttheme.tokens.spacingHorizontalMNudge,
+        width: iconSizes.medium
+    },
+    large: {
+        fontSize: iconSizes.large,
+        height: iconSizes.large,
+        right: _reacttheme.tokens.spacingHorizontalM,
+        width: iconSizes.large
+    }
+});
+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();
+    state.root.className = (0, _react.mergeClasses)(selectClassNames.root, rootStyles.base, state.root.className);
+    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) {
+        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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Select/useSelectStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { 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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"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Select,\n  selectClassNames,\n  renderSelect_unstable,\n  useSelectStyles_unstable,\n  useSelect_unstable,\n} from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelect_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,MAAM;eAANA,cAAM;;IAENC,qBAAqB;eAArBA,6BAAqB;;IADrBC,gBAAgB;eAAhBA,wBAAgB;;IAEhBC,wBAAwB;eAAxBA,gCAAwB;;IACxBC,kBAAkB;eAAlBA,0BAAkB;;;wBACb"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Select,\n  selectClassNames,\n  renderSelect_unstable,\n  useSelectStyles_unstable,\n  useSelect_unstable,\n} from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select';\n"],"names":["Select","selectClassNames","renderSelect_unstable","useSelectStyles_unstable","useSelect_unstable"],"mappings":";;;;;;;;;;;;eACEA,cAAM;;;eAENE,6BAAqB;;;eADrBD,wBAAgB;;;eAEhBE,gCAAwB;;;eACxBC,0BAAkB;;;wBACb,WAAW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-select",
-  "version": "9.3.7",
+  "version": "9.4.1",
   "description": "Fluent UI React Select component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,12 +18,12 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.3.7",
+    "@fluentui/react-field": "^9.4.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.1.2",
+    "@fluentui/react-jsx-runtime": "^9.1.3",
     "@fluentui/react-shared-contexts": "^9.24.0",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.22.0",
+    "@fluentui/react-utilities": "^9.23.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },