npm - @fluentui/react-select - Versions diffs - 9.75.0-experimental.css-modules.20261031-810ab07afb.0 → 9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 - Mend

@fluentui/react-select 9.75.0-experimental.css-modules.20261031-810ab07afb.0 → 9.75.1-experimental.positioning-engine.20261103-19efe125d1.0

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

Files changed (21) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,21 +1,21 @@
 # Change Log - @fluentui/react-select
-<!-- This log was last generated on Sat, 31 Oct 2026 11:08:54 GMT and should not be manually modified. -->
+<!-- This log was last generated on Tue, 03 Nov 2026 14:18:08 GMT and should not be manually modified. -->
 <!-- Start content -->
-## [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)
+## [9.75.1-experimental.positioning-engine.20261103-19efe125d1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0)
-Sat, 31 Oct 2026 11:08:54 GMT
+Tue, 03 Nov 2026 14:18:08 GMT
 ### Changes
-- 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)
+- Release 9.75.1-experimental.positioning-engine.20261103-19efe125d1 ([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.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.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)

package/README.md CHANGED Viewed

@@ -3,9 +3,3 @@
 **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/useSelectStyles.styles.js CHANGED Viewed

@@ -267,7 +267,7 @@ const useIconStyles = /*#__PURE__*/__styles({
     mc9l5x: "ftgm304",
     qhf8xq: "f1euv43f",
     Bkecrkj: "f1aehjj5",
-    Bo70h7d: "fvc9v3g"
+    fz51y7: "f1amoxe3"
   },
   disabled: {
     sj55zd: "f1s2aq7o",
@@ -292,7 +292,7 @@ const useIconStyles = /*#__PURE__*/__styles({
     a9b677: "fq4mcun"
   }
 }, {
-  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".f1aehjj5{pointer-events:none;}", ".fvc9v3g svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".f13lnp83{right:var(--spacingHorizontalSNudge);}", ".f1i5nn0v{left:var(--spacingHorizontalSNudge);}", ".fjw5fx7{width:16px;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".fnyteob{right:var(--spacingHorizontalMNudge);}", ".f1enpzzf{left:var(--spacingHorizontalMNudge);}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".f8b87gs{right:var(--spacingHorizontalM);}", ".fedtrts{left:var(--spacingHorizontalM);}", ".fq4mcun{width:24px;}"],
+  d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".f1aehjj5{pointer-events:none;}", ".f1amoxe3 svg,.f1amoxe3 .fui-Icon-font{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".f13lnp83{right:var(--spacingHorizontalSNudge);}", ".f1i5nn0v{left:var(--spacingHorizontalSNudge);}", ".fjw5fx7{width:16px;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".fnyteob{right:var(--spacingHorizontalMNudge);}", ".f1enpzzf{left:var(--spacingHorizontalMNudge);}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".f8b87gs{right:var(--spacingHorizontalM);}", ".fedtrts{left:var(--spacingHorizontalM);}", ".fq4mcun{width:24px;}"],
   m: [["@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}", {
     m: "(forced-colors: active)"
   }]]

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

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

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

@@ -185,9 +185,8 @@ const useIconStyles = makeStyles({
         display: 'block',
         position: 'absolute',
         pointerEvents: 'none',
-        // the SVG must have display: block for accurate positioning
-        // otherwise an extra inline space is inserted after the svg element
-        '& svg': {
+        // Block display avoids inline baseline space for both icon renderers.
+        '& svg, & .fui-Icon-font': {
             display: 'block'
         }
     },

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

	@@ -1 +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":"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"}
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 // Block display avoids inline baseline space for both icon renderers.\n '& svg, & .fui-Icon-font': {\n display: 'block',\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n right: tokens.spacingHorizontalSNudge,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n right: tokens.spacingHorizontalMNudge,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n right: tokens.spacingHorizontalM,\n width: iconSizes.large,\n },\n});\n\n/\n Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n // eslint-disable-next-line react-hooks/immutability\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && appearance === 'outline' && selectStyles.outlineInteractive,\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n state.select.className,\n );\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","selectClassNames","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","base","alignItems","boxSizing","display","flexWrap","fontFamily","fontFamilyBase","position","backgroundImage","colorCompoundBrandStroke","borderRadius","borderRadiusMedium","content","height","bottom","left","right","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","useSelectStyles","appearance","border","boxShadow","color","colorNeutralForeground1","cursor","flexGrow","maxWidth","paddingBottom","paddingTop","outlineWidth","outlineStyle","outlineColor","disabled","backgroundColor","colorTransparentBackground","borderColor","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","disabledUnderline","colorTransparentStrokeDisabled","caption1","body1","body2","outline","colorNeutralBackground1","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","underline","borderBottom","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","useIconStyles","pointerEvents","fontSize","width","useSelectStyles_unstable","state","size","iconStyles","rootStyles","selectStyles","className"],"mappings":"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"}

package/lib-commonjs/components/Select/useSelectStyles.styles.cjs CHANGED Viewed

@@ -484,7 +484,7 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
         mc9l5x: "ftgm304",
         qhf8xq: "f1euv43f",
         Bkecrkj: "f1aehjj5",
-        Bo70h7d: "fvc9v3g"
+        fz51y7: "f1amoxe3"
     },
     disabled: {
         sj55zd: "f1s2aq7o",
@@ -524,7 +524,7 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".ftgm304{display:block;}",
         ".f1euv43f{position:absolute;}",
         ".f1aehjj5{pointer-events:none;}",
-        ".fvc9v3g svg{display:block;}",
+        ".f1amoxe3 svg,.f1amoxe3 .fui-Icon-font{display:block;}",
         ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
         ".f4ybsrx{font-size:16px;}",
         ".fd461yt{height:16px;}",

package/lib-commonjs/components/Select/useSelectStyles.styles.cjs.map CHANGED Viewed

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

package/lib-commonjs/components/Select/useSelectStyles.styles.raw.cjs CHANGED Viewed

@@ -203,9 +203,8 @@ const useIconStyles = (0, _react.makeStyles)({
         display: 'block',
         position: 'absolute',
         pointerEvents: 'none',
-        // the SVG must have display: block for accurate positioning
-        // otherwise an extra inline space is inserted after the svg element
-        '& svg': {
+        // Block display avoids inline baseline space for both icon renderers.
+        '& svg, & .fui-Icon-font': {
             display: 'block'
         }
     },

package/lib-commonjs/components/Select/useSelectStyles.styles.raw.cjs.map CHANGED Viewed

	@@ -1 +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":"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"}
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 // Block display avoids inline baseline space for both icon renderers.\n '& svg, & .fui-Icon-font': {\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/package.json CHANGED Viewed

@@ -1,28 +1,25 @@
 {
   "name": "@fluentui/react-select",
-  "version": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
+  "version": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
   "description": "Fluent UI React Select component",
   "main": "lib-commonjs/index.cjs",
   "module": "lib/index.js",
   "typings": "./dist/index.d.ts",
-  "sideEffects": [
-    "**/*.css"
-  ],
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
+    "@fluentui/react-field": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-shared-contexts": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-theme": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-utilities": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
+    "@fluentui/react-jsx-runtime": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-shared-contexts": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-theme": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-utilities": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
     "@griffel/react": "^1.5.32",
-    "@swc/helpers": "^0.5.1",
-    "clsx": "^2.1.1"
+    "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <20.0.0",

package/lib/components/Select/Select.module.css DELETED Viewed

@@ -1,232 +0,0 @@
-@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/useSelectStyles.styles.css.js DELETED Viewed

@@ -1,15 +0,0 @@
-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 DELETED Viewed

@@ -1 +0,0 @@

- {"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 DELETED Viewed

@@ -1,15 +0,0 @@
-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 DELETED Viewed

@@ -1 +0,0 @@

package/lib-commonjs/components/Select/Select.module.css DELETED Viewed

@@ -1,232 +0,0 @@
-@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-commonjs/components/Select/useSelectStyles.styles.css.cjs DELETED Viewed

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get selectClassNames () {
-        return selectClassNames;
-    },
-    get useSelectStyles_unstable () {
-        return useSelectStyles_unstable;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _clsx = require("clsx");
-const _Selectmodulecss = /*#__PURE__*/ _interop_require_default._(require("./Select.module.css"));
-const selectClassNames = {
-    root: 'fui-Select',
-    select: 'fui-Select__select',
-    icon: 'fui-Select__icon'
-};
-const useSelectStyles_unstable = (state)=>{
-    state.root.className = (0, _clsx.clsx)(selectClassNames.root, _Selectmodulecss.default.root, _Selectmodulecss.default[state.size], _Selectmodulecss.default[state.appearance], state.select.disabled && _Selectmodulecss.default.disabled, String(state.select['aria-invalid']) === 'true' && _Selectmodulecss.default.invalid, state.root.className);
-    state.select.className = (0, _clsx.clsx)(selectClassNames.select, _Selectmodulecss.default.select, state.select.className);
-    if (state.icon) {
-        state.icon.className = (0, _clsx.clsx)(selectClassNames.icon, _Selectmodulecss.default.icon, state.icon.className);
-    }
-    return state;
-};

package/lib-commonjs/components/Select/useSelectStyles.styles.css.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"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":";;;;;;;;;;;QAKaE;;;QAMAI;;;;;sBAXQ,OAAO;0EAGT,sBAAsB;AAElC,yBAAsD;IAC3DH,MAAM;IACNC,QAAQ;IACRC,MAAM;AACR,EAAE;AAEK,iCAAiC,CAACE;IACvCA,MAAMJ,IAAI,CAACK,SAAS,OAAGR,UAAAA,EACrBE,iBAAiBC,IAAI,EACrBF,wBAAAA,CAAOE,IAAI,EACXF,wBAAM,CAACM,MAAME,IAAI,CAAC,EAClBR,wBAAM,CAACM,MAAMG,UAAU,CAAC,EACxBH,MAAMH,MAAM,CAACO,QAAQ,IAAIV,wBAAAA,CAAOU,QAAQ,EACxCC,OAAOL,MAAMH,MAAM,CAAC,eAAe,MAAM,UAAUH,wBAAAA,CAAOY,OAAO,EACjEN,MAAMJ,IAAI,CAACK,SAAS;IAEtBD,MAAMH,MAAM,CAACI,SAAS,OAAGR,UAAAA,EAAKE,iBAAiBE,MAAM,EAAEH,wBAAAA,CAAOG,MAAM,EAAEG,MAAMH,MAAM,CAACI,SAAS;IAC5F,IAAID,MAAMF,IAAI,EAAE;QACdE,MAAMF,IAAI,CAACG,SAAS,OAAGR,UAAAA,EAAKE,iBAAiBG,IAAI,EAAEJ,wBAAAA,CAAOI,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IACtF;IACA,OAAOD;AACT,EAAE"}

package/lib-commonjs/components/Select/useSelectStyles.styles.raw.css.cjs DELETED Viewed

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get selectClassNames () {
-        return selectClassNames;
-    },
-    get useSelectStyles_unstable () {
-        return useSelectStyles_unstable;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _clsx = require("clsx");
-const _Selectmodulecss = /*#__PURE__*/ _interop_require_default._(require("./Select.module.css"));
-const selectClassNames = {
-    root: 'fui-Select',
-    select: 'fui-Select__select',
-    icon: 'fui-Select__icon'
-};
-const useSelectStyles_unstable = (state)=>{
-    state.root.className = (0, _clsx.clsx)(selectClassNames.root, _Selectmodulecss.default.root, _Selectmodulecss.default[state.size], _Selectmodulecss.default[state.appearance], state.select.disabled && _Selectmodulecss.default.disabled, String(state.select['aria-invalid']) === 'true' && _Selectmodulecss.default.invalid, state.root.className);
-    state.select.className = (0, _clsx.clsx)(selectClassNames.select, _Selectmodulecss.default.select, state.select.className);
-    if (state.icon) {
-        state.icon.className = (0, _clsx.clsx)(selectClassNames.icon, _Selectmodulecss.default.icon, state.icon.className);
-    }
-    return state;
-};

package/lib-commonjs/components/Select/useSelectStyles.styles.raw.css.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"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":";;;;;;;;;;;QAKaE;;;QAMAI;;;;;sBAXQ,OAAO;0EAGT,sBAAsB;AAElC,yBAAsD;IAC3DH,MAAM;IACNC,QAAQ;IACRC,MAAM;AACR,EAAE;AAEK,iCAAiC,CAACE;IACvCA,MAAMJ,IAAI,CAACK,SAAS,OAAGR,UAAAA,EACrBE,iBAAiBC,IAAI,EACrBF,wBAAAA,CAAOE,IAAI,EACXF,wBAAM,CAACM,MAAME,IAAI,CAAC,EAClBR,wBAAM,CAACM,MAAMG,UAAU,CAAC,EACxBH,MAAMH,MAAM,CAACO,QAAQ,IAAIV,wBAAAA,CAAOU,QAAQ,EACxCC,OAAOL,MAAMH,MAAM,CAAC,eAAe,MAAM,UAAUH,wBAAAA,CAAOY,OAAO,EACjEN,MAAMJ,IAAI,CAACK,SAAS;IAEtBD,MAAMH,MAAM,CAACI,SAAS,OAAGR,UAAAA,EAAKE,iBAAiBE,MAAM,EAAEH,wBAAAA,CAAOG,MAAM,EAAEG,MAAMH,MAAM,CAACI,SAAS;IAC5F,IAAID,MAAMF,IAAI,EAAE;QACdE,MAAMF,IAAI,CAACG,SAAS,OAAGR,UAAAA,EAAKE,iBAAiBG,IAAI,EAAEJ,wBAAAA,CAAOI,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IACtF;IACA,OAAOD;AACT,EAAE"}