@fluentui/react-select 9.5.0 → 9.5.1

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-select
 
-This log was last generated on Wed, 01 Apr 2026 15:50:22 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Apr 2026 11:59:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.5.1)
+
+Thu, 23 Apr 2026 11:59:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.5.0..@fluentui/react-select_v9.5.1)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+
 ## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.5.0)
 
-Wed, 01 Apr 2026 15:50:22 GMT 
+Wed, 01 Apr 2026 15:52:42 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.4.16..@fluentui/react-select_v9.5.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * Render the final JSX of Select

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

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * Data passed to the `onChange` callback when a new option is selected.
+ */ export { };

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

@@ -1,6 +1,6 @@
-"use strict";
+/**
+ * Data passed to the `onChange` callback when a new option is selected.
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

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, 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":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"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-commonjs/components/Select/useSelectStyles.styles.raw.js.map

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

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