@fluentui/react-select 9.74.7-experimental.cli-api.20261006-ccaa611d58.0 → 9.75.0-experimental.css-modules.20261031-810ab07afb.0

package/CHANGELOG.md

@@ -1,22 +1,44 @@
 # Change Log - @fluentui/react-select
 
-<!-- This log was last generated on Tue, 06 Oct 2026 11:40:31 GMT and should not be manually modified. -->
+<!-- This log was last generated on Sat, 31 Oct 2026 11:08:54 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
-## [9.74.7-experimental.cli-api.20261006-ccaa611d58.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.74.7-experimental.cli-api.20261006-ccaa611d58.0)
+## [9.75.0-experimental.css-modules.20261031-810ab07afb.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.75.0-experimental.css-modules.20261031-810ab07afb.0)
 
-Tue, 06 Oct 2026 11:40:31 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.5.5..@fluentui/react-select_v9.74.7-experimental.cli-api.20261006-ccaa611d58.0)
+Sat, 31 Oct 2026 11:08:54 GMT
 
 ### Changes
 
-- Release 9.74.7-experimental.cli-api.20261006-ccaa611d58 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
-- Bump @fluentui/react-field to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-theme to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-utilities to v9.74.7-experimental.cli-api.20261006-ccaa611d58.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Release 9.75.0-experimental.css-modules.20261031-810ab07afb ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
+- Bump @fluentui/react-field to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.5.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.5.7)
+
+Mon, 19 Oct 2026 16:49:01 GMT
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.27.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.5.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.5.6)
+
+Tue, 22 Sep 2026 11:25:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.5.5..@fluentui/react-select_v9.5.6)
+
+### Patches
+
+- fix: remove unused react-dom and @types/react-dom peer dependencies, mark @types/react as optional ([PR #36559](https://github.com/microsoft/fluentui/pull/36559) by martinhochel@microsoft.com)
+- Bump @fluentui/react-field to v9.5.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
 
 ## [9.5.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.5.5)
 

package/README.md

@@ -3,3 +3,9 @@
 **React Select components for [Fluent UI React](https://react.fluentui.dev)**
 
 The Select component provides a styled wrapper around the native `<select>` element. It is recommended over Combobox when features like filtering and virtualization are not required. It provides better cross-platform functionality particularly on mobile, and better accessibility.
+
+## Opt-in CSS Modules styles
+
+CSS Modules alternatives are available for `Select`. The default exports and component imports continue to use Griffel.
+
+To opt in, configure your bundler to replace each `use<Component>Styles.styles.js` module with its adjacent `use<Component>Styles.styles.css.js` alternative (or `.styles.ts` with `.styles.css.ts` for source builds). Apply the replacement consistently to client and server bundles. The CSS loader must provide a default class-name map and retain the adjacent `.module.css` asset, including CSS from dependencies. All component rules are in `@layer fluentui` and use the theme custom properties supplied by `FluentProvider`.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,iBAAc;AACjD,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,wBAAwB,QAAQ,8BAA2B;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":["'use client';\n\nimport * 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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,iBAAc;AACjD,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,wBAAwB,QAAQ,8BAA2B;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.module.css

@@ -0,0 +1,232 @@
+@layer fluentui {
+  .root::after {
+    background-image: linear-gradient(
+      0deg,
+      var(--colorCompoundBrandStroke) 0%,
+      var(--colorCompoundBrandStroke) 50%,
+      transparent 50%,
+      transparent 100%
+    );
+    border-radius: 0 0 var(--borderRadiusMedium) var(--borderRadiusMedium);
+    box-sizing: border-box;
+    content: '';
+    height: var(--borderRadiusMedium);
+    position: absolute;
+    bottom: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    transform: scaleX(0);
+    transition-property: transform;
+    transition-duration: var(--durationUltraFast);
+    transition-delay: var(--curveAccelerateMid);
+  }
+
+  .root:focus-within::after {
+    transform: scaleX(1);
+    transition-property: transform;
+    transition-duration: var(--durationNormal);
+    transition-delay: var(--curveDecelerateMid);
+  }
+
+  .root {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: nowrap;
+    font-family: var(--fontFamilyBase);
+    position: relative;
+  }
+
+  .select:focus {
+    outline-width: var(--strokeWidthThick);
+    outline-style: solid;
+    outline-color: transparent;
+  }
+
+  .select {
+    appearance: none;
+    border: var(--strokeWidthThin) solid transparent;
+    border-radius: var(--borderRadiusMedium);
+    box-shadow: none;
+    box-sizing: border-box;
+    color: var(--colorNeutralForeground1);
+    cursor: pointer;
+    flex-grow: 1;
+    max-width: 100%;
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+
+  :where(.small) > .select {
+    height: var(--spacingHorizontalXXL);
+    padding-inline-start: calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));
+    padding-inline-end: calc(
+      var(--spacingHorizontalSNudge) + var(--spacingHorizontalL) + var(--spacingHorizontalXXS) +
+        var(--spacingHorizontalXXS)
+    );
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase200);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase200);
+  }
+
+  :where(.medium) > .select {
+    height: var(--spacingHorizontalXXXL);
+    padding-inline-start: calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));
+    padding-inline-end: calc(
+      var(--spacingHorizontalMNudge) + var(--spacingHorizontalXL) + var(--spacingHorizontalXXS) +
+        var(--spacingHorizontalXXS)
+    );
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase300);
+  }
+
+  :where(.large) > .select {
+    height: calc(var(--spacingHorizontalXS) * 10);
+    padding-inline-start: calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));
+    padding-inline-end: calc(
+      var(--spacingHorizontalM) + var(--spacingHorizontalXXL) + var(--spacingHorizontalSNudge) +
+        var(--spacingHorizontalSNudge)
+    );
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase400);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase400);
+  }
+
+  :where(.outline) > .select {
+    background-color: var(--colorNeutralBackground1);
+    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+    border-bottom-color: var(--colorNeutralStrokeAccessible);
+  }
+
+  :where(.underline) > .select option {
+    background-color: var(--colorNeutralBackground1);
+  }
+
+  :where(.underline) > .select {
+    background-color: var(--colorTransparentBackground);
+    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);
+    border-radius: 0;
+  }
+
+  :where(.filled-lighter) > .select {
+    background-color: var(--colorNeutralBackground1);
+  }
+
+  :where(.filled-darker) > .select {
+    background-color: var(--colorNeutralBackground3);
+  }
+
+  :where(.outline:not(.disabled)) > .select:hover {
+    border-top-color: var(--colorNeutralStroke1Hover);
+    border-inline-end-color: var(--colorNeutralStroke1Hover);
+    border-bottom-color: var(--colorNeutralStrokeAccessible);
+    border-inline-start-color: var(--colorNeutralStroke1Hover);
+  }
+
+  :where(.outline:not(.disabled)) > .select:active {
+    border-top-color: var(--colorNeutralStroke1Pressed);
+    border-inline-end-color: var(--colorNeutralStroke1Pressed);
+    border-bottom-color: var(--colorNeutralStrokeAccessible);
+    border-inline-start-color: var(--colorNeutralStroke1Pressed);
+  }
+
+  :where(.invalid:not(.disabled):not(.underline)) > .select:not(:focus-within),
+  :where(.invalid:not(.disabled):not(.underline)) > .select:hover:not(:focus-within) {
+    border-top-color: var(--colorPaletteRedBorder2);
+    border-inline-end-color: var(--colorPaletteRedBorder2);
+    border-bottom-color: var(--colorPaletteRedBorder2);
+    border-inline-start-color: var(--colorPaletteRedBorder2);
+  }
+
+  :where(.invalid.underline:not(.disabled)) > .select:not(:focus-within),
+  :where(.invalid.underline:not(.disabled)) > .select:hover:not(:focus-within) {
+    border-bottom-color: var(--colorPaletteRedBorder2);
+  }
+
+  :where(.disabled) > .select {
+    background-color: var(--colorTransparentBackground);
+    border-top-color: var(--colorNeutralStrokeDisabled);
+    border-inline-end-color: var(--colorNeutralStrokeDisabled);
+    border-bottom-color: var(--colorNeutralStrokeDisabled);
+    border-inline-start-color: var(--colorNeutralStrokeDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+    cursor: not-allowed;
+  }
+
+  :where(.disabled.underline) > .select {
+    border-top-color: var(--colorTransparentStrokeDisabled);
+    border-inline-end-color: var(--colorTransparentStrokeDisabled);
+    border-bottom-color: var(--colorNeutralStrokeDisabled);
+    border-inline-start-color: var(--colorTransparentStrokeDisabled);
+  }
+
+  .icon svg {
+    display: block;
+  }
+
+  .icon {
+    box-sizing: border-box;
+    color: var(--colorNeutralStrokeAccessible);
+    display: block;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  :where(.disabled) > .icon {
+    color: var(--colorNeutralForegroundDisabled);
+  }
+
+  :where(.small) > .icon {
+    font-size: var(--fontSizeBase400);
+    height: var(--spacingHorizontalL);
+    inset-inline-end: var(--spacingHorizontalSNudge);
+    width: var(--spacingHorizontalL);
+  }
+
+  :where(.medium) > .icon {
+    font-size: var(--fontSizeBase500);
+    height: var(--spacingHorizontalXL);
+    inset-inline-end: var(--spacingHorizontalMNudge);
+    width: var(--spacingHorizontalXL);
+  }
+
+  :where(.large) > .icon {
+    font-size: var(--fontSizeBase600);
+    height: var(--spacingHorizontalXXL);
+    inset-inline-end: var(--spacingHorizontalM);
+    width: var(--spacingHorizontalXXL);
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .root::after {
+      transition-duration: 0.01ms;
+      transition-delay: 0.01ms;
+    }
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .root:focus-within::after {
+      transition-duration: 0.01ms;
+      transition-delay: 0.01ms;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.disabled) > .select {
+      border-top-color: GrayText;
+      border-inline-end-color: GrayText;
+      border-bottom-color: GrayText;
+      border-inline-start-color: GrayText;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.disabled) > .icon {
+      color: GrayText;
+    }
+  }
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/Select.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, DistributiveOmit, 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\nexport type SelectBaseProps = DistributiveOmit<SelectProps, 'appearance' | 'size'>;\nexport type SelectBaseState = DistributiveOmit<SelectState, '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":[],"mappings":"AA6CA;;CAEC,GACD,WAKE"}
+{"version":3,"sources":["../../../src/components/Select/Select.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, DistributiveOmit, 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\nexport type SelectBaseProps = DistributiveOmit<SelectProps, 'appearance' | 'size'>;\nexport type SelectBaseState = DistributiveOmit<SelectState, '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":[],"mappings":"AA6CA;;CAEC,GACD,WAKE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type {\n  SelectBaseProps,\n  SelectBaseState,\n  SelectOnChangeData,\n  SelectProps,\n  SelectSlots,\n  SelectState,\n} from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelectBase_unstable, useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","useSelectBase_unstable","useSelect_unstable","selectClassNames","useSelectStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAW;AASlC,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,sBAAsB,EAAEC,kBAAkB,QAAQ,iBAAc;AACzE,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,8BAA2B"}
+{"version":3,"sources":["../../../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type {\n  SelectBaseProps,\n  SelectBaseState,\n  SelectOnChangeData,\n  SelectProps,\n  SelectSlots,\n  SelectState,\n} from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelectBase_unstable, useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","useSelectBase_unstable","useSelect_unstable","selectClassNames","useSelectStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAW;AASlC,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,sBAAsB,EAAEC,kBAAkB,QAAQ,iBAAc;AACzE,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,8BAA2B"}

package/lib/components/Select/renderSelect.js

@@ -1,5 +1,5 @@
-  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from "@fluentui/react-utilities";
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of Select
  */ export const renderSelect_unstable = (state)=>{

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 { JSXElement } from '@fluentui/react-utilities';\nimport type { SelectBaseState, SelectSlots } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectBaseState): JSXElement => {\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;AAIxD;;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 { JSXElement } from '@fluentui/react-utilities';\nimport type { SelectBaseState, SelectSlots } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectBaseState): JSXElement => {\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,GAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;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

@@ -13,14 +13,13 @@ import { useOverrides_unstable as useOverrides } from "@fluentui/react-shared-co
  * @param props - props from this instance of Select
  * @param ref - reference to the `<select>` element in Select
  */ export const useSelect_unstable = (props, ref)=>{
+    var _overrides_inputDefaultAppearance, _ref;
     const overrides = useOverrides();
     const fieldContext = useFieldContext_unstable();
-    var _overrides_inputDefaultAppearance, _fieldContext_size;
-    const { appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', size = (_fieldContext_size = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.size) !== null && _fieldContext_size !== void 0 ? _fieldContext_size : 'medium', ...baseProps } = props;
+    const { appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', size = (_ref = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.size) !== null && _ref !== void 0 ? _ref : 'medium', ...baseProps } = props;
     const state = useSelectBase_unstable(baseProps, ref);
     if (state.icon) {
-        var _state_icon;
-        var _children;
+        var _state_icon, _children;
         (_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ React.createElement(ChevronDownRegular, null);
     }
     return {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldContext_unstable, useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectBaseProps, SelectBaseState, SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  const overrides = useOverrides();\n  const fieldContext = useFieldContext_unstable();\n\n  const {\n    appearance = overrides.inputDefaultAppearance ?? 'outline',\n    size = fieldContext?.size ?? 'medium',\n    ...baseProps\n  } = props;\n\n  const state = useSelectBase_unstable(baseProps, ref);\n\n  if (state.icon) {\n    state.icon.children ??= <ChevronDownRegular />;\n  }\n\n  return { ...state, appearance, size };\n};\n\n/**\n * Create the base state required to render Select without design-specific props.\n *\n * @param props - props from this instance of Select (without appearance/size)\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelectBase_unstable = (props: SelectBaseProps, ref: React.Ref<HTMLSelectElement>): SelectBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { defaultValue, value, select, icon, root, onChange } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['defaultValue', 'onChange', 'value'],\n  });\n\n  const state: SelectBaseState = {\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: slot.always(select, {\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'select',\n    }),\n    icon: slot.optional(icon, {\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"],"names":["React","useFieldContext_unstable","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","overrides","fieldContext","appearance","inputDefaultAppearance","size","baseProps","state","useSelectBase_unstable","icon","children","supportsLabelFor","supportsRequired","defaultValue","value","select","root","onChange","nativeProps","primarySlotTagName","excludedPropNames","components","always","defaultProps","primary","elementType","optional","renderByDefault","event","target"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,6BAA6B,QAAQ,wBAAwB;AAChG,SAASC,yBAAyB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAC9F,SAASC,kBAAkB,QAAQ,wBAAwB;AAE3D,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,MAAMC,YAAYJ;IAClB,MAAMK,eAAeZ;QAGNW,mCACNC;IAFT,MAAM,EACJC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,cAAhCH,+CAAAA,oCAAoC,SAAS,EAC1DI,OAAOH,CAAAA,qBAAAA,yBAAAA,mCAAAA,aAAcG,IAAI,cAAlBH,gCAAAA,qBAAsB,QAAQ,EACrC,GAAGI,WACJ,GAAGP;IAEJ,MAAMQ,QAAQC,uBAAuBF,WAAWN;IAEhD,IAAIO,MAAME,IAAI,EAAE;YACdF;;QAAAA,cAAAA,cAAAA,MAAME,IAAI,EAACC,yDAAXH,YAAWG,yBAAa,oBAACf;IAC3B;IAEA,OAAO;QAAE,GAAGY,KAAK;QAAEJ;QAAYE;IAAK;AACtC,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,yBAAyB,CAACT,OAAwBC;IAC7D,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEY,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,YAAY,EAAEC,KAAK,EAAEC,MAAM,EAAEN,IAAI,EAAEO,IAAI,EAAEC,QAAQ,EAAE,GAAGlB;IAE9D,MAAMmB,cAAc1B,0BAA0B;QAC5CO;QACAoB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAgB;YAAY;SAAQ;IAC1D;IAEA,MAAMb,QAAyB;QAC7Bc,YAAY;YACVL,MAAM;YACND,QAAQ;YACRN,MAAM;QACR;QACAM,QAAQrB,KAAK4B,MAAM,CAACP,QAAQ;YAC1BQ,cAAc;gBACZV;gBACAC;gBACAd;gBACA,GAAGkB,YAAYM,OAAO;YACxB;YACAC,aAAa;QACf;QACAhB,MAAMf,KAAKgC,QAAQ,CAACjB,MAAM;YACxBkB,iBAAiB;YACjBF,aAAa;QACf;QACAT,MAAMtB,KAAK4B,MAAM,CAACN,MAAM;YACtBO,cAAcL,YAAYF,IAAI;YAC9BS,aAAa;QACf;IACF;IAEAlB,MAAMQ,MAAM,CAACE,QAAQ,GAAGxB,iBAAiBmC,CAAAA;QACvCX,qBAAAA,+BAAAA,SAAWW,OAAO;YAAEd,OAAO,AAACc,MAAMC,MAAM,CAAuBf,KAAK;QAAC;IACvE;IAEA,OAAOP;AACT,EAAE"}
+{"version":3,"sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldContext_unstable, useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectBaseProps, SelectBaseState, SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  const overrides = useOverrides();\n  const fieldContext = useFieldContext_unstable();\n\n  const {\n    appearance = overrides.inputDefaultAppearance ?? 'outline',\n    size = fieldContext?.size ?? 'medium',\n    ...baseProps\n  } = props;\n\n  const state = useSelectBase_unstable(baseProps, ref);\n\n  if (state.icon) {\n    state.icon.children ??= <ChevronDownRegular />;\n  }\n\n  return { ...state, appearance, size };\n};\n\n/**\n * Create the base state required to render Select without design-specific props.\n *\n * @param props - props from this instance of Select (without appearance/size)\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelectBase_unstable = (props: SelectBaseProps, ref: React.Ref<HTMLSelectElement>): SelectBaseState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { defaultValue, value, select, icon, root, onChange } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['defaultValue', 'onChange', 'value'],\n  });\n\n  const state: SelectBaseState = {\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: slot.always(select, {\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n      elementType: 'select',\n    }),\n    icon: slot.optional(icon, {\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'span',\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"],"names":["React","useFieldContext_unstable","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","overrides","fieldContext","appearance","inputDefaultAppearance","size","baseProps","state","useSelectBase_unstable","icon","children","supportsLabelFor","supportsRequired","defaultValue","value","select","root","onChange","nativeProps","primarySlotTagName","excludedPropNames","components","always","defaultProps","primary","elementType","optional","renderByDefault","event","target"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,6BAA6B,QAAQ,wBAAwB;AAChG,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;QAKtCC;IAJf,MAAMA,YAAYJ;IAClB,MAAMK,eAAeZ;IAErB,MAAM,EACJa,cAAaF,oCAAAA,UAAUG,sBAAsB,cAAhCH,+CAAAA,oCAAoC,SAAS,EAC1DI,eAAOH,yBAAAA,mCAAAA,aAAcG,IAAI,uCAAI,QAAQ,EACrC,GAAGC,WACJ,GAAGP;IAEJ,MAAMQ,QAAQC,uBAAuBF,WAAWN;IAEhD,IAAIO,MAAME,IAAI,EAAE;YACdF,aAAAA;SAAAA,YAAAA,CAAAA,cAAAA,MAAME,IAAI,EAACC,QAAQ,cAAnBH,uBAAAA,YAAAA,YAAWG,QAAQ,iBAAK,oBAACf;IAC3B;IAEA,OAAO;QAAE,GAAGY,KAAK;QAAEJ;QAAYE;IAAK;AACtC,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,yBAAyB,CAACT,OAAwBC;IAC7D,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEY,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,YAAY,EAAEC,KAAK,EAAEC,MAAM,EAAEN,IAAI,EAAEO,IAAI,EAAEC,QAAQ,EAAE,GAAGlB;IAE9D,MAAMmB,cAAc1B,0BAA0B;QAC5CO;QACAoB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAgB;YAAY;SAAQ;IAC1D;IAEA,MAAMb,QAAyB;QAC7Bc,YAAY;YACVL,MAAM;YACND,QAAQ;YACRN,MAAM;QACR;QACAM,QAAQrB,KAAK4B,MAAM,CAACP,QAAQ;YAC1BQ,cAAc;gBACZV;gBACAC;gBACAd;gBACA,GAAGkB,YAAYM,OAAO;YACxB;YACAC,aAAa;QACf;QACAhB,MAAMf,KAAKgC,QAAQ,CAACjB,MAAM;YACxBkB,iBAAiB;YACjBF,aAAa;QACf;QACAT,MAAMtB,KAAK4B,MAAM,CAACN,MAAM;YACtBO,cAAcL,YAAYF,IAAI;YAC9BS,aAAa;QACf;IACF;IAEAlB,MAAMQ,MAAM,CAACE,QAAQ,GAAGxB,iBAAiBmC,CAAAA;QACvCX,qBAAAA,+BAAAA,SAAWW,OAAO;YAAEd,OAAO,AAACc,MAAMC,MAAM,CAAuBf,KAAK;QAAC;IACvE;IAEA,OAAOP;AACT,EAAE"}

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

@@ -0,0 +1,15 @@
+import { clsx } from "clsx";
+import styles from "./Select.module.css";
+export const selectClassNames = {
+    root: 'fui-Select',
+    select: 'fui-Select__select',
+    icon: 'fui-Select__icon'
+};
+export const useSelectStyles_unstable = (state)=>{
+    state.root.className = clsx(selectClassNames.root, styles.root, styles[state.size], styles[state.appearance], state.select.disabled && styles.disabled, String(state.select['aria-invalid']) === 'true' && styles.invalid, state.root.className);
+    state.select.className = clsx(selectClassNames.select, styles.select, state.select.className);
+    if (state.icon) {
+        state.icon.className = clsx(selectClassNames.icon, styles.icon, state.icon.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Select/useSelectStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectState, SelectSlots } from './Select.types';\nimport styles from './Select.module.css';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n  root: 'fui-Select',\n  select: 'fui-Select__select',\n  icon: 'fui-Select__icon',\n};\n\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n  state.root.className = clsx(\n    selectClassNames.root,\n    styles.root,\n    styles[state.size],\n    styles[state.appearance],\n    state.select.disabled && styles.disabled,\n    String(state.select['aria-invalid']) === 'true' && styles.invalid,\n    state.root.className,\n  );\n  state.select.className = clsx(selectClassNames.select, styles.select, state.select.className);\n  if (state.icon) {\n    state.icon.className = clsx(selectClassNames.icon, styles.icon, state.icon.className);\n  }\n  return state;\n};\n"],"names":["clsx","styles","selectClassNames","root","select","icon","useSelectStyles_unstable","state","className","size","appearance","disabled","String","invalid"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,sBAAsB;AAEzC,OAAO,MAAMC,mBAAgD;IAC3DC,MAAM;IACNC,QAAQ;IACRC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,2BAA2B,CAACC;IACvCA,MAAMJ,IAAI,CAACK,SAAS,GAAGR,KACrBE,iBAAiBC,IAAI,EACrBF,OAAOE,IAAI,EACXF,MAAM,CAACM,MAAME,IAAI,CAAC,EAClBR,MAAM,CAACM,MAAMG,UAAU,CAAC,EACxBH,MAAMH,MAAM,CAACO,QAAQ,IAAIV,OAAOU,QAAQ,EACxCC,OAAOL,MAAMH,MAAM,CAAC,eAAe,MAAM,UAAUH,OAAOY,OAAO,EACjEN,MAAMJ,IAAI,CAACK,SAAS;IAEtBD,MAAMH,MAAM,CAACI,SAAS,GAAGR,KAAKE,iBAAiBE,MAAM,EAAEH,OAAOG,MAAM,EAAEG,MAAMH,MAAM,CAACI,SAAS;IAC5F,IAAID,MAAMF,IAAI,EAAE;QACdE,MAAMF,IAAI,CAACG,SAAS,GAAGR,KAAKE,iBAAiBG,IAAI,EAAEJ,OAAOI,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IACtF;IACA,OAAOD;AACT,EAAE"}

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

@@ -0,0 +1,15 @@
+import { clsx } from "clsx";
+import styles from "./Select.module.css";
+export const selectClassNames = {
+    root: 'fui-Select',
+    select: 'fui-Select__select',
+    icon: 'fui-Select__icon'
+};
+export const useSelectStyles_unstable = (state)=>{
+    state.root.className = clsx(selectClassNames.root, styles.root, styles[state.size], styles[state.appearance], state.select.disabled && styles.disabled, String(state.select['aria-invalid']) === 'true' && styles.invalid, state.root.className);
+    state.select.className = clsx(selectClassNames.select, styles.select, state.select.className);
+    if (state.icon) {
+        state.icon.className = clsx(selectClassNames.icon, styles.icon, state.icon.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Select/useSelectStyles.styles.css.ts"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectState, SelectSlots } from './Select.types';\nimport styles from './Select.module.css';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n  root: 'fui-Select',\n  select: 'fui-Select__select',\n  icon: 'fui-Select__icon',\n};\n\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n  state.root.className = clsx(\n    selectClassNames.root,\n    styles.root,\n    styles[state.size],\n    styles[state.appearance],\n    state.select.disabled && styles.disabled,\n    String(state.select['aria-invalid']) === 'true' && styles.invalid,\n    state.root.className,\n  );\n  state.select.className = clsx(selectClassNames.select, styles.select, state.select.className);\n  if (state.icon) {\n    state.icon.className = clsx(selectClassNames.icon, styles.icon, state.icon.className);\n  }\n  return state;\n};\n"],"names":["clsx","styles","selectClassNames","root","select","icon","useSelectStyles_unstable","state","className","size","appearance","disabled","String","invalid"],"mappings":"AAAA,SAASA,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,sBAAsB;AAEzC,OAAO,MAAMC,mBAAgD;IAC3DC,MAAM;IACNC,QAAQ;IACRC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,2BAA2B,CAACC;IACvCA,MAAMJ,IAAI,CAACK,SAAS,GAAGR,KACrBE,iBAAiBC,IAAI,EACrBF,OAAOE,IAAI,EACXF,MAAM,CAACM,MAAME,IAAI,CAAC,EAClBR,MAAM,CAACM,MAAMG,UAAU,CAAC,EACxBH,MAAMH,MAAM,CAACO,QAAQ,IAAIV,OAAOU,QAAQ,EACxCC,OAAOL,MAAMH,MAAM,CAAC,eAAe,MAAM,UAAUH,OAAOY,OAAO,EACjEN,MAAMJ,IAAI,CAACK,SAAS;IAEtBD,MAAMH,MAAM,CAACI,SAAS,GAAGR,KAAKE,iBAAiBE,MAAM,EAAEH,OAAOG,MAAM,EAAEG,MAAMH,MAAM,CAACI,SAAS;IAC5F,IAAID,MAAMF,IAAI,EAAE;QACdE,MAAMF,IAAI,CAACG,SAAS,GAAGR,KAAKE,iBAAiBG,IAAI,EAAEJ,OAAOI,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IACtF;IACA,OAAOD;AACT,EAAE"}

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

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

package/lib-commonjs/Select.cjs

@@ -5,26 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    Select: function() {
+    get Select () {
         return _index.Select;
     },
-    renderSelect_unstable: function() {
+    get renderSelect_unstable () {
         return _index.renderSelect_unstable;
     },
-    selectClassNames: function() {
+    get selectClassNames () {
         return _index.selectClassNames;
     },
-    useSelectBase_unstable: function() {
+    get useSelectBase_unstable () {
         return _index.useSelectBase_unstable;
     },
-    useSelectStyles_unstable: function() {
+    get useSelectStyles_unstable () {
         return _index.useSelectStyles_unstable;
     },
-    useSelect_unstable: function() {
+    get useSelect_unstable () {
         return _index.useSelect_unstable;
     }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * 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;;;;;;;;;;;;iEAEuB,QAAQ;2BACI,iBAAc;8BACX,oBAAiB;uCACd,8BAA2B;qCAGxB,kCAAkC;AAKvE,MAAMK,SAAAA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQR,6BAAAA,EAAmBM,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOP,mCAAAA,EAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * 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;;;;;;;;;;;;iEAEuB,QAAQ;2BACI,iBAAc;8BACX,oBAAiB;uCACd,8BAA2B;qCAGxB,kCAAkC;AAKvE,MAAMK,SAAAA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQR,6BAAAA,EAAmBM,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOP,mCAAAA,EAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}