npm - @fluentui/react-switch - Versions diffs - 9.7.2 → 9.7.3 - Mend

@fluentui/react-switch 9.7.2 → 9.7.3

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 (10) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,22 +1,35 @@
 # Change Log - @fluentui/react-switch
-This log was last generated on Thu, 23 Apr 2026 11:59:33 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:33:27 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.7.3)
+Tue, 26 May 2026 09:33:27 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.7.2..@fluentui/react-switch_v9.7.3)
+### Patches
+- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-label to v9.4.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
 ## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.7.2)
-Thu, 23 Apr 2026 11:59:33 GMT
+Thu, 23 Apr 2026 14:21:07 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.7.1..@fluentui/react-switch_v9.7.2)
 ### Patches
 - fix: update Switch component to conditionally render CircleFilled in indicator ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
-- Bump @fluentui/react-field to v9.5.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-label to v9.4.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-label to v9.4.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 ## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.7.1)

package/lib/components/Switch/useSwitchStyles.styles.js CHANGED Viewed

@@ -127,10 +127,14 @@ export const useSwitchStyles_unstable = state => {
     labelPosition,
     size
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);
   if (state.label) {
+    // eslint-disable-next-line react-hooks/immutability
     state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);
   }
   return state;

package/lib/components/Switch/useSwitchStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","sizeSmall","Be2twd7","Bqenvij","a9b677","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","oedwrj","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bg96gwp","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"sources":["useSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label'\n};\n/*\n @deprecated Use `switchClassNames.root` instead.\n / export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSizeMedium}px`,\n height: `${trackHeightMedium}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidthMedium}px`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n '> i': {\n forcedColorAdjust: 'none'\n }\n },\n '> ': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0\n },\n sizeSmall: {\n fontSize: `${thumbSizeSmall}px`,\n height: `${trackHeightSmall}px`,\n width: `${trackWidthSmall}px`\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`\n }\n }\n },\n // Disabled (both checked and unchecked)\n ':disabled, &[aria-disabled=\"true\"]': {\n cursor: 'default',\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Enabled and unchecked\n ':enabled:not(:checked):not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n }\n },\n // Enabled and checked\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorTransparentStroke\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n }\n },\n // Disabled and unchecked\n ':disabled:not(:checked), &[aria-disabled=\"true\"]:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled\n }\n },\n // Disabled and checked\n ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled\n }\n },\n '@media (forced-colors: active)': {\n ':disabled, &[aria-disabled=\"true\"]': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText'\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText'\n }\n },\n ':hover': {\n color: 'CanvasText'\n },\n ':hover:active': {\n color: 'CanvasText'\n },\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n }\n }\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0\n },\n after: {\n left: 0,\n top: 0\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n width: '100%'\n },\n sizeSmall: {\n width: `calc(${trackWidthSmall}px + 2 ${tokens.spacingHorizontalS})`,\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`\n }\n }\n }\n }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n },\n sizeSmall: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%'\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS\n }\n});\n/\n Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n const { label, labelPosition, size } = state;\n state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);\n state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","sizeSmall","Be2twd7","Bqenvij","a9b677","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","oedwrj","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bg96gwp","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"sources":["useSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label'\n};\n/*\n @deprecated Use `switchClassNames.root` instead.\n / export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSizeMedium}px`,\n height: `${trackHeightMedium}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidthMedium}px`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n '> i': {\n forcedColorAdjust: 'none'\n }\n },\n '> ': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0\n },\n sizeSmall: {\n fontSize: `${thumbSizeSmall}px`,\n height: `${trackHeightSmall}px`,\n width: `${trackWidthSmall}px`\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`\n }\n }\n },\n // Disabled (both checked and unchecked)\n ':disabled, &[aria-disabled=\"true\"]': {\n cursor: 'default',\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Enabled and unchecked\n ':enabled:not(:checked):not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n }\n },\n // Enabled and checked\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorTransparentStroke\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n }\n },\n // Disabled and unchecked\n ':disabled:not(:checked), &[aria-disabled=\"true\"]:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled\n }\n },\n // Disabled and checked\n ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled\n }\n },\n '@media (forced-colors: active)': {\n ':disabled, &[aria-disabled=\"true\"]': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText'\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText'\n }\n },\n ':hover': {\n color: 'CanvasText'\n },\n ':hover:active': {\n color: 'CanvasText'\n },\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n }\n }\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0\n },\n after: {\n left: 0,\n top: 0\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n width: '100%'\n },\n sizeSmall: {\n width: `calc(${trackWidthSmall}px + 2 ${tokens.spacingHorizontalS})`,\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`\n }\n }\n }\n }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n },\n sizeSmall: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%'\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS\n }\n});\n/\n Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n const { label, labelPosition, size } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);\n if (state.label) {\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Switch/useSwitchStyles.styles.raw.js CHANGED Viewed

@@ -264,10 +264,14 @@ const useLabelStyles = makeStyles({
     const inputStyles = useInputStyles();
     const labelStyles = useLabelStyles();
     const { label, labelPosition, size } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);
     }
     return state;

package/lib/components/Switch/useSwitchStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Switch/useSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/*\n @deprecated Use `switchClassNames.root` instead.\n /\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSizeMedium}px`,\n height: `${trackHeightMedium}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidthMedium}px`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n '> i': {\n forcedColorAdjust: 'none',\n },\n },\n\n '> ': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0,\n },\n sizeSmall: {\n fontSize: `${thumbSizeSmall}px`,\n height: `${trackHeightSmall}px`,\n width: `${trackWidthSmall}px`,\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled, &[aria-disabled=\"true\"]': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked):not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorTransparentStroke,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive,\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive,\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked), &[aria-disabled=\"true\"]:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n // Disabled and checked\n ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled,\n },\n },\n\n '@media (forced-colors: active)': {\n ':disabled, &[aria-disabled=\"true\"]': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText',\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n ':hover': {\n color: 'CanvasText',\n },\n ':hover:active': {\n color: 'CanvasText',\n },\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0,\n },\n after: {\n left: 0,\n top: 0,\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n width: '100%',\n },\n sizeSmall: {\n width: `calc(${trackWidthSmall}px + 2 ${tokens.spacingHorizontalS})`,\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n },\n sizeSmall: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%',\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n});\n\n/\n Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { label, labelPosition, size } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootBaseClassName,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(\n switchClassNames.indicator,\n indicatorBaseClassName,\n label && labelPosition === 'above' && indicatorStyles.labelAbove,\n size === 'small' && indicatorStyles.sizeSmall,\n state.indicator.className,\n );\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputBaseClassName,\n label && inputStyles[labelPosition],\n size === 'small' && inputStyles.sizeSmall,\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(\n switchClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n size === 'small' && labelStyles.sizeSmall,\n state.label.className,\n );\n }\n\n return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","alignItems","boxSizing","display","position","style","selector","useRootStyles","vertical","flexDirection","useIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","lineHeight","fill","flexShrink","fontSize","height","margin","spacingVerticalS","spacingHorizontalS","pointerEvents","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","color","forcedColorAdjust","useIndicatorStyles","labelAbove","marginTop","sizeSmall","useInputBaseClassName","cursor","opacity","transform","colorNeutralForegroundDisabled","colorNeutralStrokeAccessible","borderColor","colorNeutralForeground1","colorNeutralStrokeAccessibleHover","colorNeutralStrokeAccessiblePressed","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","colorNeutralStrokeDisabled","colorNeutralBackgroundDisabled","colorTransparentStrokeDisabled","useInputStyles","before","right","top","after","left","above","bottom","useLabelStyles","base","marginBottom","lineHeightBase300","padding","fontSizeBase200","lineHeightBase200","paddingTop","spacingVerticalXS","paddingBottom","paddingLeft","spacingHorizontalXS","paddingRight","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Switch/useSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/*\n @deprecated Use `switchClassNames.root` instead.\n /\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSizeMedium}px`,\n height: `${trackHeightMedium}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidthMedium}px`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n '> i': {\n forcedColorAdjust: 'none',\n },\n },\n\n '> ': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0,\n },\n sizeSmall: {\n fontSize: `${thumbSizeSmall}px`,\n height: `${trackHeightSmall}px`,\n width: `${trackWidthSmall}px`,\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled, &[aria-disabled=\"true\"]': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked):not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorTransparentStroke,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive,\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive,\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked), &[aria-disabled=\"true\"]:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n // Disabled and checked\n ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled,\n },\n },\n\n '@media (forced-colors: active)': {\n ':disabled, &[aria-disabled=\"true\"]': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText',\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n ':hover': {\n color: 'CanvasText',\n },\n ':hover:active': {\n color: 'CanvasText',\n },\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0,\n },\n after: {\n left: 0,\n top: 0,\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n width: '100%',\n },\n sizeSmall: {\n width: `calc(${trackWidthSmall}px + 2 ${tokens.spacingHorizontalS})`,\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n },\n sizeSmall: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%',\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n});\n\n/\n Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { label, labelPosition, size } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootBaseClassName,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.indicator.className = mergeClasses(\n switchClassNames.indicator,\n indicatorBaseClassName,\n label && labelPosition === 'above' && indicatorStyles.labelAbove,\n size === 'small' && indicatorStyles.sizeSmall,\n state.indicator.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputBaseClassName,\n label && inputStyles[labelPosition],\n size === 'small' && inputStyles.sizeSmall,\n state.input.className,\n );\n\n if (state.label) {\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(\n switchClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n size === 'small' && labelStyles.sizeSmall,\n state.label.className,\n );\n }\n\n return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","alignItems","boxSizing","display","position","style","selector","useRootStyles","vertical","flexDirection","useIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","lineHeight","fill","flexShrink","fontSize","height","margin","spacingVerticalS","spacingHorizontalS","pointerEvents","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","color","forcedColorAdjust","useIndicatorStyles","labelAbove","marginTop","sizeSmall","useInputBaseClassName","cursor","opacity","transform","colorNeutralForegroundDisabled","colorNeutralStrokeAccessible","borderColor","colorNeutralForeground1","colorNeutralStrokeAccessibleHover","colorNeutralStrokeAccessiblePressed","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","colorNeutralStrokeDisabled","colorNeutralBackgroundDisabled","colorTransparentStrokeDisabled","useInputStyles","before","right","top","after","left","above","bottom","useLabelStyles","base","marginBottom","lineHeightBase300","padding","fontSizeBase200","lineHeightBase200","paddingTop","spacingVerticalXS","paddingBottom","paddingLeft","spacingHorizontalXS","paddingRight","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"mappings":"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"}

package/lib-commonjs/components/Switch/useSwitchStyles.styles.js CHANGED Viewed

@@ -236,10 +236,14 @@ const useSwitchStyles_unstable = (state)=>{
     const inputStyles = useInputStyles();
     const labelStyles = useLabelStyles();
     const { label, labelPosition, size } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.indicator.className = (0, _react.mergeClasses)(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = (0, _react.mergeClasses)(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);
     }
     return state;

package/lib-commonjs/components/Switch/useSwitchStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label'\n};\n/*\n @deprecated Use `switchClassNames.root` instead.\n / export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSizeMedium}px`,\n height: `${trackHeightMedium}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidthMedium}px`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n '> i': {\n forcedColorAdjust: 'none'\n }\n },\n '> ': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0\n },\n sizeSmall: {\n fontSize: `${thumbSizeSmall}px`,\n height: `${trackHeightSmall}px`,\n width: `${trackWidthSmall}px`\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`\n }\n }\n },\n // Disabled (both checked and unchecked)\n ':disabled, &[aria-disabled=\"true\"]': {\n cursor: 'default',\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Enabled and unchecked\n ':enabled:not(:checked):not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n }\n },\n // Enabled and checked\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorTransparentStroke\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n }\n },\n // Disabled and unchecked\n ':disabled:not(:checked), &[aria-disabled=\"true\"]:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled\n }\n },\n // Disabled and checked\n ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled\n }\n },\n '@media (forced-colors: active)': {\n ':disabled, &[aria-disabled=\"true\"]': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText'\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText'\n }\n },\n ':hover': {\n color: 'CanvasText'\n },\n ':hover:active': {\n color: 'CanvasText'\n },\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n }\n }\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0\n },\n after: {\n left: 0,\n top: 0\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n width: '100%'\n },\n sizeSmall: {\n width: `calc(${trackWidthSmall}px + 2 ${tokens.spacingHorizontalS})`,\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`\n }\n }\n }\n }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n },\n sizeSmall: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%'\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS\n }\n});\n/\n Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n const { label, labelPosition, size } = state;\n state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);\n state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);\n }\n return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","sizeSmall","Be2twd7","Bqenvij","a9b677","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","oedwrj","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bg96gwp","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"mappings":"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"}
1	+ {"version":3,"sources":["useSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label'\n};\n/*\n @deprecated Use `switchClassNames.root` instead.\n / export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({\n style: {},\n selector: 'focus-within'\n })\n});\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column'\n }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSizeMedium}px`,\n height: `${trackHeightMedium}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidthMedium}px`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n '> i': {\n forcedColorAdjust: 'none'\n }\n },\n '> ': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n }\n }\n});\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0\n },\n sizeSmall: {\n fontSize: `${thumbSizeSmall}px`,\n height: `${trackHeightSmall}px`,\n width: `${trackWidthSmall}px`\n }\n});\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`\n }\n }\n },\n // Disabled (both checked and unchecked)\n ':disabled, &[aria-disabled=\"true\"]': {\n cursor: 'default',\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled\n },\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Enabled and unchecked\n ':enabled:not(:checked):not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n }\n },\n // Enabled and checked\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorTransparentStroke\n },\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive\n }\n }\n },\n // Disabled and unchecked\n ':disabled:not(:checked), &[aria-disabled=\"true\"]:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled\n }\n },\n // Disabled and checked\n ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled\n }\n },\n '@media (forced-colors: active)': {\n ':disabled, &[aria-disabled=\"true\"]': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText'\n },\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText'\n }\n },\n ':hover': {\n color: 'CanvasText'\n },\n ':hover:active': {\n color: 'CanvasText'\n },\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas'\n }\n }\n }\n});\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0\n },\n after: {\n left: 0,\n top: 0\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n width: '100%'\n },\n sizeSmall: {\n width: `calc(${trackWidthSmall}px + 2 ${tokens.spacingHorizontalS})`,\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`\n }\n }\n }\n }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n },\n sizeSmall: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%'\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS\n }\n});\n/\n Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n const { label, labelPosition, size } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);\n if (state.label) {\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);\n }\n return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","sizeSmall","Be2twd7","Bqenvij","a9b677","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","oedwrj","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bg96gwp","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"mappings":"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"}

package/lib-commonjs/components/Switch/useSwitchStyles.styles.raw.js CHANGED Viewed

@@ -281,10 +281,14 @@ const useSwitchStyles_unstable = (state)=>{
     const inputStyles = useInputStyles();
     const labelStyles = useLabelStyles();
     const { label, labelPosition, size } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.indicator.className = (0, _react.mergeClasses)(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = (0, _react.mergeClasses)(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);
     }
     return state;

package/lib-commonjs/components/Switch/useSwitchStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Switch/useSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/*\n @deprecated Use `switchClassNames.root` instead.\n /\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSizeMedium}px`,\n height: `${trackHeightMedium}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidthMedium}px`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n '> i': {\n forcedColorAdjust: 'none',\n },\n },\n\n '> ': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0,\n },\n sizeSmall: {\n fontSize: `${thumbSizeSmall}px`,\n height: `${trackHeightSmall}px`,\n width: `${trackWidthSmall}px`,\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled, &[aria-disabled=\"true\"]': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked):not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorTransparentStroke,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive,\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive,\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked), &[aria-disabled=\"true\"]:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n // Disabled and checked\n ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled,\n },\n },\n\n '@media (forced-colors: active)': {\n ':disabled, &[aria-disabled=\"true\"]': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText',\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n ':hover': {\n color: 'CanvasText',\n },\n ':hover:active': {\n color: 'CanvasText',\n },\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0,\n },\n after: {\n left: 0,\n top: 0,\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n width: '100%',\n },\n sizeSmall: {\n width: `calc(${trackWidthSmall}px + 2 ${tokens.spacingHorizontalS})`,\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n },\n sizeSmall: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%',\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n});\n\n/\n Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { label, labelPosition, size } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootBaseClassName,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(\n switchClassNames.indicator,\n indicatorBaseClassName,\n label && labelPosition === 'above' && indicatorStyles.labelAbove,\n size === 'small' && indicatorStyles.sizeSmall,\n state.indicator.className,\n );\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputBaseClassName,\n label && inputStyles[labelPosition],\n size === 'small' && inputStyles.sizeSmall,\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(\n switchClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n size === 'small' && labelStyles.sizeSmall,\n state.label.className,\n );\n }\n\n return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","alignItems","boxSizing","display","position","style","selector","useRootStyles","vertical","flexDirection","useIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","lineHeight","fill","flexShrink","fontSize","height","margin","spacingVerticalS","spacingHorizontalS","pointerEvents","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","color","forcedColorAdjust","useIndicatorStyles","labelAbove","marginTop","sizeSmall","useInputBaseClassName","cursor","opacity","transform","colorNeutralForegroundDisabled","colorNeutralStrokeAccessible","borderColor","colorNeutralForeground1","colorNeutralStrokeAccessibleHover","colorNeutralStrokeAccessiblePressed","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","colorNeutralStrokeDisabled","colorNeutralBackgroundDisabled","colorTransparentStrokeDisabled","useInputStyles","before","right","top","after","left","above","bottom","useLabelStyles","base","marginBottom","lineHeightBase300","padding","fontSizeBase200","lineHeightBase200","paddingTop","spacingVerticalXS","paddingBottom","paddingLeft","spacingHorizontalXS","paddingRight","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Switch/useSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/*\n @deprecated Use `switchClassNames.root` instead.\n /\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n borderRadius: tokens.borderRadiusCircular,\n border: '1px solid',\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSizeMedium}px`,\n height: `${trackHeightMedium}px`,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n pointerEvents: 'none',\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'background, border, color',\n width: `${trackWidthMedium}px`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '@media (forced-colors: active)': {\n color: 'CanvasText',\n '> i': {\n forcedColorAdjust: 'none',\n },\n },\n\n '> ': {\n transitionDuration: tokens.durationNormal,\n transitionTimingFunction: tokens.curveEasyEase,\n transitionProperty: 'transform',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n labelAbove: {\n marginTop: 0,\n },\n sizeSmall: {\n fontSize: `${thumbSizeSmall}px`,\n height: `${trackHeightSmall}px`,\n width: `${trackWidthSmall}px`,\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n margin: 0,\n opacity: 0,\n position: 'absolute',\n\n // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n // This is done so that clicking on that \"empty space\" still toggles the switch.\n width: `calc(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled, &[aria-disabled=\"true\"]': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n cursor: 'default',\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked):not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n borderColor: tokens.colorTransparentStroke,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n borderColor: tokens.colorTransparentStrokeInteractive,\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n borderColor: tokens.colorTransparentStrokeInteractive,\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked), &[aria-disabled=\"true\"]:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n // Disabled and checked\n ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n borderColor: tokens.colorTransparentStrokeDisabled,\n },\n },\n\n '@media (forced-colors: active)': {\n ':disabled, &[aria-disabled=\"true\"]': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n borderColor: 'GrayText',\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n ':hover': {\n color: 'CanvasText',\n },\n ':hover:active': {\n color: 'CanvasText',\n },\n ':enabled:checked:not([aria-disabled=\"true\"])': {\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: 'Highlight',\n color: 'Canvas',\n },\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n before: {\n right: 0,\n top: 0,\n },\n after: {\n left: 0,\n top: 0,\n },\n above: {\n bottom: 0,\n height: `calc(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n width: '100%',\n },\n sizeSmall: {\n width: `calc(${trackWidthSmall}px + 2 ${tokens.spacingHorizontalS})`,\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> ': {\n transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n cursor: 'pointer',\n\n // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n marginBottom: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n },\n sizeSmall: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n },\n above: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS,\n width: '100%',\n },\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n },\n before: {\n paddingRight: tokens.spacingHorizontalXS,\n },\n});\n\n/\n Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const indicatorBaseClassName = useIndicatorBaseClassName();\n const indicatorStyles = useIndicatorStyles();\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { label, labelPosition, size } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootBaseClassName,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.indicator.className = mergeClasses(\n switchClassNames.indicator,\n indicatorBaseClassName,\n label && labelPosition === 'above' && indicatorStyles.labelAbove,\n size === 'small' && indicatorStyles.sizeSmall,\n state.indicator.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputBaseClassName,\n label && inputStyles[labelPosition],\n size === 'small' && inputStyles.sizeSmall,\n state.input.className,\n );\n\n if (state.label) {\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = mergeClasses(\n switchClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n size === 'small' && labelStyles.sizeSmall,\n state.label.className,\n );\n }\n\n return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","alignItems","boxSizing","display","position","style","selector","useRootStyles","vertical","flexDirection","useIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","lineHeight","fill","flexShrink","fontSize","height","margin","spacingVerticalS","spacingHorizontalS","pointerEvents","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","color","forcedColorAdjust","useIndicatorStyles","labelAbove","marginTop","sizeSmall","useInputBaseClassName","cursor","opacity","transform","colorNeutralForegroundDisabled","colorNeutralStrokeAccessible","borderColor","colorNeutralForeground1","colorNeutralStrokeAccessibleHover","colorNeutralStrokeAccessiblePressed","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","colorNeutralStrokeDisabled","colorNeutralBackgroundDisabled","colorTransparentStrokeDisabled","useInputStyles","before","right","top","after","left","above","bottom","useLabelStyles","base","marginBottom","lineHeightBase300","padding","fontSizeBase200","lineHeightBase200","paddingTop","spacingVerticalXS","paddingBottom","paddingLeft","spacingHorizontalXS","paddingRight","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-switch",
-  "version": "9.7.2",
+  "version": "9.7.3",
   "description": "Fluent UI React Switch component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,14 +12,14 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.5.1",
+    "@fluentui/react-field": "^9.5.2",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
-    "@fluentui/react-label": "^9.4.1",
+    "@fluentui/react-jsx-runtime": "^9.4.3",
+    "@fluentui/react-label": "^9.4.2",
     "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-tabster": "^9.26.14",
+    "@fluentui/react-tabster": "^9.26.15",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.4",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },