@fluentui/react-button 9.9.1 → 9.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/CHANGELOG.md +35 -6
  2. package/dist/index.d.ts +24 -2
  3. package/lib/MenuButton.js +1 -1
  4. package/lib/MenuButton.js.map +1 -1
  5. package/lib/components/Button/useButtonStyles.styles.js +2 -2
  6. package/lib/components/Button/useButtonStyles.styles.js.map +1 -1
  7. package/lib/components/Button/useButtonStyles.styles.raw.js +2 -1
  8. package/lib/components/Button/useButtonStyles.styles.raw.js.map +1 -1
  9. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js +4 -2
  10. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js.map +1 -1
  11. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.js +4 -1
  12. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.js.map +1 -1
  13. package/lib/components/MenuButton/MenuButton.types.js +3 -1
  14. package/lib/components/MenuButton/MenuButton.types.js.map +1 -1
  15. package/lib/components/MenuButton/index.js +1 -1
  16. package/lib/components/MenuButton/index.js.map +1 -1
  17. package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
  18. package/lib/components/MenuButton/useMenuButton.js +25 -4
  19. package/lib/components/MenuButton/useMenuButton.js.map +1 -1
  20. package/lib/components/MenuButton/useMenuButtonStyles.styles.js +3 -2
  21. package/lib/components/MenuButton/useMenuButtonStyles.styles.js.map +1 -1
  22. package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.js +3 -1
  23. package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.js.map +1 -1
  24. package/lib/components/SplitButton/useSplitButtonStyles.styles.js +3 -2
  25. package/lib/components/SplitButton/useSplitButtonStyles.styles.js.map +1 -1
  26. package/lib/components/SplitButton/useSplitButtonStyles.styles.raw.js +3 -1
  27. package/lib/components/SplitButton/useSplitButtonStyles.styles.raw.js.map +1 -1
  28. package/lib/components/ToggleButton/useToggleButtonStyles.styles.js +2 -2
  29. package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
  30. package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js +2 -1
  31. package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js.map +1 -1
  32. package/lib/index.js +1 -1
  33. package/lib/index.js.map +1 -1
  34. package/lib-commonjs/MenuButton.js +3 -0
  35. package/lib-commonjs/MenuButton.js.map +1 -1
  36. package/lib-commonjs/components/Button/useButtonStyles.styles.js +2 -1
  37. package/lib-commonjs/components/Button/useButtonStyles.styles.js.map +1 -1
  38. package/lib-commonjs/components/Button/useButtonStyles.styles.raw.js +2 -1
  39. package/lib-commonjs/components/Button/useButtonStyles.styles.raw.js.map +1 -1
  40. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js +4 -1
  41. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js.map +1 -1
  42. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.js +4 -1
  43. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.js.map +1 -1
  44. package/lib-commonjs/components/MenuButton/MenuButton.types.js +3 -1
  45. package/lib-commonjs/components/MenuButton/MenuButton.types.js.map +1 -1
  46. package/lib-commonjs/components/MenuButton/index.js +3 -0
  47. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  48. package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
  49. package/lib-commonjs/components/MenuButton/useMenuButton.js +25 -5
  50. package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
  51. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js +3 -1
  52. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js.map +1 -1
  53. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.js +3 -1
  54. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.js.map +1 -1
  55. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js +3 -1
  56. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js.map +1 -1
  57. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.js +3 -1
  58. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.js.map +1 -1
  59. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js +2 -1
  60. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
  61. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.js +2 -1
  62. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.js.map +1 -1
  63. package/lib-commonjs/index.js +3 -0
  64. package/lib-commonjs/index.js.map +1 -1
  65. package/package.json +5 -5
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/MenuButton/useMenuButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n root: 'fui-MenuButton',\n icon: 'fui-MenuButton__icon',\n menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n base: {\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n // Appearance variations\n outline: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n color: tokens.colorNeutralForeground1Selected,\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n },\n secondary: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n color: tokens.colorNeutralForeground1Selected,\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\nconst useIconExpandedStyles = makeStyles({\n // Appearance variations\n outline: {\n color: tokens.colorNeutralForeground1Selected,\n },\n primary: {\n /* The primary styles are exactly the same as the base styles. */\n },\n secondary: {\n color: tokens.colorNeutralForeground1Selected,\n },\n subtle: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n transparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n highContrast: {\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n },\n },\n },\n});\n\nconst useMenuIconStyles = makeStyles({\n base: {\n lineHeight: 0,\n },\n\n // Size appearance\n small: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px',\n },\n medium: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px',\n },\n large: {\n fontSize: '16px',\n height: '16px',\n lineHeight: tokens.lineHeightBase400,\n width: '16px',\n },\n\n // Not-icon only\n notIconOnly: {\n marginLeft: tokens.spacingHorizontalXS,\n },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n 'use no memo';\n\n const rootExpandedStyles = useRootExpandedStyles();\n const iconExpandedStyles = useIconExpandedStyles();\n const menuIconStyles = useMenuIconStyles();\n\n state.root.className = mergeClasses(\n menuButtonClassNames.root,\n state.root['aria-expanded'] && rootExpandedStyles.base,\n state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n menuButtonClassNames.icon,\n state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast,\n state.icon.className,\n );\n }\n\n if (state.menuIcon) {\n state.menuIcon.className = mergeClasses(\n menuButtonClassNames.menuIcon,\n menuIconStyles.base,\n menuIconStyles[state.size],\n !state.iconOnly && menuIconStyles.notIconOnly,\n state.menuIcon.className,\n );\n }\n\n useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","makeStyles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","display","outline","borderColor","colorNeutralStroke1Selected","borderWidth","strokeWidthThicker","color","colorNeutralForeground1Selected","primary","backgroundColor","colorBrandBackgroundSelected","secondary","colorNeutralBackground1Selected","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","transparent","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","useIconExpandedStyles","highContrast","useMenuIconStyles","lineHeight","small","fontSize","height","lineHeightBase200","width","medium","large","lineHeightBase400","notIconOnly","marginLeft","spacingHorizontalXS","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/MenuButton/useMenuButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n root: 'fui-MenuButton',\n icon: 'fui-MenuButton__icon',\n menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n base: {\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n // Appearance variations\n outline: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n color: tokens.colorNeutralForeground1Selected,\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n },\n secondary: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n color: tokens.colorNeutralForeground1Selected,\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\nconst useIconExpandedStyles = makeStyles({\n // Appearance variations\n outline: {\n color: tokens.colorNeutralForeground1Selected,\n },\n primary: {\n /* The primary styles are exactly the same as the base styles. */\n },\n secondary: {\n color: tokens.colorNeutralForeground1Selected,\n },\n subtle: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n transparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n highContrast: {\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n },\n },\n },\n});\n\nconst useMenuIconStyles = makeStyles({\n base: {\n lineHeight: 0,\n },\n\n // Size appearance\n small: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px',\n },\n medium: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px',\n },\n large: {\n fontSize: '16px',\n height: '16px',\n lineHeight: tokens.lineHeightBase400,\n width: '16px',\n },\n\n // Not-icon only\n notIconOnly: {\n marginLeft: tokens.spacingHorizontalXS,\n },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n const rootExpandedStyles = useRootExpandedStyles();\n const iconExpandedStyles = useIconExpandedStyles();\n const menuIconStyles = useMenuIconStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n menuButtonClassNames.root,\n state.root['aria-expanded'] && rootExpandedStyles.base,\n state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n state.root.className,\n );\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(\n menuButtonClassNames.icon,\n state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast,\n state.icon.className,\n );\n }\n\n if (state.menuIcon) {\n // eslint-disable-next-line react-hooks/immutability\n state.menuIcon.className = mergeClasses(\n menuButtonClassNames.menuIcon,\n menuIconStyles.base,\n menuIconStyles[state.size],\n !state.iconOnly && menuIconStyles.notIconOnly,\n state.menuIcon.className,\n );\n }\n\n useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","makeStyles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","display","outline","borderColor","colorNeutralStroke1Selected","borderWidth","strokeWidthThicker","color","colorNeutralForeground1Selected","primary","backgroundColor","colorBrandBackgroundSelected","secondary","colorNeutralBackground1Selected","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","transparent","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","useIconExpandedStyles","highContrast","useMenuIconStyles","lineHeight","small","fontSize","height","lineHeightBase200","width","medium","large","lineHeightBase400","notIconOnly","marginLeft","spacingHorizontalXS","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"mappings":"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"}
@@ -254,15 +254,17 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
254
254
  ]
255
255
  });
256
256
  const useSplitButtonStyles_unstable = (state)=>{
257
- 'use no memo';
258
257
  const rootStyles = useRootStyles();
259
258
  const focusStyles = useFocusStyles();
260
259
  const { appearance, disabled, disabledFocusable } = state;
260
+ // eslint-disable-next-line react-hooks/immutability
261
261
  state.root.className = (0, _react.mergeClasses)(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
262
262
  if (state.menuButton) {
263
+ // eslint-disable-next-line react-hooks/immutability
263
264
  state.menuButton.className = (0, _react.mergeClasses)(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
264
265
  }
265
266
  if (state.primaryActionButton) {
267
+ // eslint-disable-next-line react-hooks/immutability
266
268
  state.primaryActionButton.className = (0, _react.mergeClasses)(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
267
269
  }
268
270
  return state;
@@ -1 +1 @@
1
- {"version":3,"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitButtonClassNames = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n }),\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0\n })\n});\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n },\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: MIN_TARGET_SIZE\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n }\n },\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed\n }\n }\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed\n }\n }\n },\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n }\n }\n },\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n }\n }\n }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const { appearance, disabled, disabledFocusable } = state;\n state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n }\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","vlshuh","B3s9tpx","rfylfo","k5lds2","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}
1
+ {"version":3,"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitButtonClassNames = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n }),\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0\n })\n});\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n },\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: MIN_TARGET_SIZE\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand\n }\n },\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed\n }\n }\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed\n }\n }\n },\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled\n }\n }\n },\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n },\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText'\n }\n }\n }\n }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const { appearance, disabled, disabledFocusable } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n if (state.menuButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n }\n if (state.primaryActionButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","vlshuh","B3s9tpx","rfylfo","k5lds2","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}
@@ -160,15 +160,17 @@ const useRootStyles = (0, _react.makeStyles)({
160
160
  }
161
161
  });
162
162
  const useSplitButtonStyles_unstable = (state)=>{
163
- 'use no memo';
164
163
  const rootStyles = useRootStyles();
165
164
  const focusStyles = useFocusStyles();
166
165
  const { appearance, disabled, disabledFocusable } = state;
166
+ // eslint-disable-next-line react-hooks/immutability
167
167
  state.root.className = (0, _react.mergeClasses)(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
168
168
  if (state.menuButton) {
169
+ // eslint-disable-next-line react-hooks/immutability
169
170
  state.menuButton.className = (0, _react.mergeClasses)(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
170
171
  }
171
172
  if (state.primaryActionButton) {
173
+ // eslint-disable-next-line react-hooks/immutability
172
174
  state.primaryActionButton.className = (0, _react.mergeClasses)(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
173
175
  }
174
176
  return state;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: MIN_TARGET_SIZE,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n },\n\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n appearance && rootStyles[appearance],\n (disabled || disabledFocusable) && rootStyles.disabled,\n (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","borderTopRightRadius","borderBottomRightRadius","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","useRootStyles","base","display","justifyContent","position","verticalAlign","minWidth","outline","primary","borderRightColor","colorNeutralStrokeOnBrand","secondary","subtle","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","transparent","circular","rounded","square","disabled","colorNeutralStrokeDisabled","disabledHighContrast","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: MIN_TARGET_SIZE,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n },\n\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n\n ':hover:active,:active:focus-visible': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, disabled, disabledFocusable } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n appearance && rootStyles[appearance],\n (disabled || disabledFocusable) && rootStyles.disabled,\n (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n state.root.className,\n );\n\n if (state.menuButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n // eslint-disable-next-line react-hooks/immutability\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","borderTopRightRadius","borderBottomRightRadius","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","useRootStyles","base","display","justifyContent","position","verticalAlign","minWidth","outline","primary","borderRightColor","colorNeutralStrokeOnBrand","secondary","subtle","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","transparent","circular","rounded","square","disabled","colorNeutralStrokeDisabled","disabledHighContrast","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"mappings":"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"}
@@ -895,13 +895,13 @@ const usePrimaryHighContrastStyles = /*#__PURE__*/ (0, _react.__styles)({
895
895
  ]
896
896
  });
897
897
  const useToggleButtonStyles_unstable = (state)=>{
898
- 'use no memo';
899
898
  const rootCheckedStyles = useRootCheckedStyles();
900
899
  const accessibleCheckedStyles = useCheckedAccessibleStyles();
901
900
  const rootDisabledStyles = useRootDisabledStyles();
902
901
  const iconCheckedStyles = useIconCheckedStyles();
903
902
  const primaryHighContrastStyles = usePrimaryHighContrastStyles();
904
903
  const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;
904
+ // eslint-disable-next-line react-hooks/immutability
905
905
  state.root.className = (0, _react.mergeClasses)(toggleButtonClassNames.root, // Primary high contrast styles
906
906
  appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles
907
907
  checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Opt-in accessible checked styles
@@ -909,6 +909,7 @@ const useToggleButtonStyles_unstable = (state)=>{
909
909
  (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name
910
910
  state.root.className);
911
911
  if (state.icon) {
912
+ // eslint-disable-next-line react-hooks/immutability
912
913
  state.icon.className = (0, _react.mergeClasses)(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
913
914
  }
914
915
  (0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
@@ -1 +1 @@
1
- {"version":3,"sources":["useToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const toggleButtonClassNames = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon'\n};\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed\n }\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight'\n }\n }\n },\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed\n },\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n })\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed\n }\n }\n});\nconst useCheckedAccessibleStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n // Appearance variations\n outline: {\n // There's no longer a reason to thicken the outline variant's border\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n primary: {\n // primary has an inner stroke for the checked style\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,\n // need to not have the default focus style that removes the outline\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`\n })\n },\n subtle: {\n // override subtle-appearance-specific icon color on hover\n ':hover': {\n [`& .${toggleButtonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n }\n }\n },\n transparent: {\n },\n secondary: {\n }\n});\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n ':hover': {\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n ...shorthands.borderColor('transparent')\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\n }\n }\n});\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations with isAccessible=false\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto'\n }\n }\n});\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto'\n }\n },\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n ':focus': {\n ...shorthands.borderColor('GrayText')\n }\n }\n }\n});\nexport const useToggleButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootCheckedStyles = useRootCheckedStyles();\n const accessibleCheckedStyles = useCheckedAccessibleStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;\n state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles\n checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Opt-in accessible checked styles\n isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance], // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name\n state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","Bpjbzib","im15vp","Hjvxdg","Gpfmf1","ustxxc","Brsut9c","highContrast","By8wz76","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","B7iucu3","B8gzw0y","Bbkh6qg","F230oe","Bdw8ktp","Bj1xduy","Bhh2cfd","Bahaeuw","Bv2bamp","vxuvv6","Bli9q98","Bx2tt8t","yad0b3","j2fop7","B6rz4yo","Buk7464","Bqg8rp8","pjr8j7","Bgs2klq","Hwei09","Bi9aqk7","Fihjvf","nhyz0p","Buw724y","Bn7qjfh","B0u7xl9","md97jv","h3ptyc","s1kvfj","kogrdj","dqx2i2","o0nolc","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","p","useCheckedAccessibleStyles","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Dhobit","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bpkdmpa","ysa4qo","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","accessibleCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","isAccessible","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAMCQ,sBAAsB;;;IAwPtBiG,8BAA8B;;;;uBA1PU,gBAAgB;uCAC5B,kCAAkC;AACpE,+BAA+B;IAClChG,IAAI,EAAE,kBAAkB;IACxBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAA9D,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAE,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAG,MAAA,EAAA;QAAAM,OAAA,EAAA;QAAA6C,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,OAAA,EAAA;QAAAnE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAO,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAA6C,SAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAArE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAO,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAA+C,WAAA,EAAA;QAAAtE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAO,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAgD,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;gBAAAD,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA6G5B,CAAC;AACF,MAAME,0BAA0B,GAAA,WAAA,OAAGlF,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAO,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAAuC,OAAA,EAAA;QAAAxD,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA0D,OAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAhB,MAAA,EAAA;QAAAiB,MAAA,EAAA;IAAA;IAAAhB,WAAA,EAAA,CAAA;IAAAF,SAAA,EAAA,CAAA;AAAA,GAAA;IAAAG,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAG,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;IAAAF,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA4ClC,CAAC;AACF,MAAMe,qBAAqB,GAAA,WAAA,GAAG9F,mBAAA,EAAA;IAAAM,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAO,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAAuC,OAAA,EAAA,CAAA;IAAAK,OAAA,EAAA;QAAAlE,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAG,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA8C,SAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAArE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAQ,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAgD,WAAA,EAAA;QAAAtE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAQ,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAiD,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAuD7B,CAAC;AACF,MAAMgB,oBAAoB,GAAA,WAAA,OAAG/F,eAAA,EAAA;IAAAgG,mBAAA,EAAA;QAAApF,MAAA,EAAA;IAAA;IAAAmB,YAAA,EAAA;QAAAO,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAwC,CAAA,EAAA;QAAA;KAAA;IAAAE,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAW5B,CAAC;AACF,MAAMiB,4BAA4B,GAAA,WAAA,OAAGjG,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAA0B,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA4D,QAAA,EAAA;QAAAjE,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAA2B,MAAA,EAAA;QAAAJ,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAR,OAAA,EAAA;QAAAI,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAwB,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAoBpC,CAAC;AACK,wCAAwCoB,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,iBAAiB,GAAGhG,oBAAoB,CAAC,CAAC;IAChD,MAAMiG,uBAAuB,GAAGpB,0BAA0B,CAAC,CAAC;IAC5D,MAAMqB,kBAAkB,GAAGT,qBAAqB,CAAC,CAAC;IAClD,MAAMU,iBAAiB,GAAGT,oBAAoB,CAAC,CAAC;IAChD,MAAMU,yBAAyB,GAAGR,4BAA4B,CAAC,CAAC;IAChE,MAAM,EAAES,UAAU,EAAEC,OAAO,EAAET,QAAQ,EAAEU,iBAAiB,EAAEC,YAAAA,EAAc,GAAGT,KAAK;IAChFA,KAAK,CAACjG,IAAI,CAAC2G,SAAS,OAAG/G,mBAAY,EAACG,sBAAsB,CAACC,IAAI,EAAE,+BAAA;IACjEuG,UAAU,KAAK,SAAS,IAAID,yBAAyB,CAACnG,IAAI,EAAEoG,UAAU,KAAK,SAAS,KAAKR,QAAQ,IAAIU,iBAAAA,CAAiB,CAAC,GAAIH,yBAAyB,CAACP,QAAQ,EAAE,iBAAA;IAC/JS,OAAO,IAAIN,iBAAiB,CAAC/F,IAAI,EAAEqG,OAAO,IAAIN,iBAAiB,CAACtE,YAAY,EAAE2E,UAAU,IAAIC,OAAO,IAAIN,iBAAiB,CAACK,UAAU,CAAC,EAAE,mCAAA;IACtIG,YAAY,IAAIF,OAAO,IAAIL,uBAAuB,CAAChG,IAAI,EAAEuG,YAAY,IAAIH,UAAU,IAAIC,OAAO,IAAIL,uBAAuB,CAACI,UAAU,CAAC,EAAE,AACvI,kBADuI;KACtIR,QAAQ,IAAIU,iBAAAA,CAAiB,IAAKL,kBAAkB,CAACjG,IAAI,EAAEoG,UAAU,KAAKR,QAAQ,IAAIU,iBAAAA,CAAiB,CAAC,GAAIL,kBAAkB,CAACG,UAAU,CAAC,EAAE,2BAAA;IAC7IN,KAAK,CAACjG,IAAI,CAAC2G,SAAS,CAAC;IACrB,IAAIV,KAAK,CAAChG,IAAI,EAAE;QACZgG,KAAK,CAAChG,IAAI,CAAC0G,SAAS,OAAG/G,mBAAY,EAACG,sBAAsB,CAACE,IAAI,EAAEuG,OAAO,IAAI,CAACE,YAAY,KAAKH,UAAU,KAAK,QAAQ,IAAIA,UAAU,KAAK,aAAA,CAAa,CAAC,GAAIF,iBAAiB,CAACR,mBAAmB,EAAEQ,iBAAiB,CAACzE,YAAY,EAAEqE,KAAK,CAAChG,IAAI,CAAC0G,SAAS,CAAC;IAC1P;QACA7G,+CAAwB,EAACmG,KAAK,CAAC;IAC/B,OAAOA,KAAK;AAChB,CAAC"}
1
+ {"version":3,"sources":["useToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const toggleButtonClassNames = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon'\n};\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed\n }\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight'\n }\n }\n },\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed\n },\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n })\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed\n }\n }\n});\nconst useCheckedAccessibleStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n // Appearance variations\n outline: {\n // There's no longer a reason to thicken the outline variant's border\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n primary: {\n // primary has an inner stroke for the checked style\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,\n // need to not have the default focus style that removes the outline\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`\n })\n },\n subtle: {\n // override subtle-appearance-specific icon color on hover\n ':hover': {\n [`& .${toggleButtonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n }\n }\n },\n transparent: {\n },\n secondary: {\n }\n});\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n ':hover': {\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n ...shorthands.borderColor('transparent')\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\n }\n }\n});\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations with isAccessible=false\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto'\n }\n }\n});\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto'\n }\n },\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n ':focus': {\n ...shorthands.borderColor('GrayText')\n }\n }\n }\n});\nexport const useToggleButtonStyles_unstable = (state)=>{\n const rootCheckedStyles = useRootCheckedStyles();\n const accessibleCheckedStyles = useCheckedAccessibleStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles\n checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Opt-in accessible checked styles\n isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance], // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name\n state.root.className);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","Bpjbzib","im15vp","Hjvxdg","Gpfmf1","ustxxc","Brsut9c","highContrast","By8wz76","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","B7iucu3","B8gzw0y","Bbkh6qg","F230oe","Bdw8ktp","Bj1xduy","Bhh2cfd","Bahaeuw","Bv2bamp","vxuvv6","Bli9q98","Bx2tt8t","yad0b3","j2fop7","B6rz4yo","Buk7464","Bqg8rp8","pjr8j7","Bgs2klq","Hwei09","Bi9aqk7","Fihjvf","nhyz0p","Buw724y","Bn7qjfh","B0u7xl9","md97jv","h3ptyc","s1kvfj","kogrdj","dqx2i2","o0nolc","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","p","useCheckedAccessibleStyles","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Dhobit","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bpkdmpa","ysa4qo","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","accessibleCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","isAccessible","className"],"mappings":"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"}
@@ -266,15 +266,16 @@ const usePrimaryHighContrastStyles = (0, _react.makeStyles)({
266
266
  }
267
267
  });
268
268
  const useToggleButtonStyles_unstable = (state)=>{
269
- 'use no memo';
270
269
  const rootCheckedStyles = useRootCheckedStyles();
271
270
  const accessibleCheckedStyles = useCheckedAccessibleStyles();
272
271
  const rootDisabledStyles = useRootDisabledStyles();
273
272
  const iconCheckedStyles = useIconCheckedStyles();
274
273
  const primaryHighContrastStyles = usePrimaryHighContrastStyles();
275
274
  const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;
275
+ // eslint-disable-next-line react-hooks/immutability
276
276
  state.root.className = (0, _react.mergeClasses)(toggleButtonClassNames.root, appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance], (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], state.root.className);
277
277
  if (state.icon) {
278
+ // eslint-disable-next-line react-hooks/immutability
278
279
  state.icon.className = (0, _react.mergeClasses)(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
279
280
  }
280
281
  (0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n }),\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useCheckedAccessibleStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n // Appearance variations\n outline: {\n // There's no longer a reason to thicken the outline variant's border\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n primary: {\n // primary has an inner stroke for the checked style\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,\n\n // need to not have the default focus style that removes the outline\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`,\n }),\n },\n\n subtle: {\n // override subtle-appearance-specific icon color on hover\n ':hover': {\n [`& .${toggleButtonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n },\n\n transparent: {\n /* No styles */\n },\n\n secondary: {\n /* No styles */\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations with isAccessible=false\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto',\n },\n },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto',\n },\n },\n\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n 'use no memo';\n\n const rootCheckedStyles = useRootCheckedStyles();\n const accessibleCheckedStyles = useCheckedAccessibleStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base,\n appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n // Checked styles\n checked && rootCheckedStyles.base,\n checked && rootCheckedStyles.highContrast,\n appearance && checked && rootCheckedStyles[appearance],\n\n // Opt-in accessible checked styles\n isAccessible && checked && accessibleCheckedStyles.base,\n isAccessible && appearance && checked && accessibleCheckedStyles[appearance],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n toggleButtonClassNames.icon,\n checked &&\n !isAccessible &&\n (appearance === 'subtle' || appearance === 'transparent') &&\n iconCheckedStyles.subtleOrTransparent,\n iconCheckedStyles.highContrast,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","makeStyles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","backgroundColor","colorNeutralBackground1Selected","borderColor","colorNeutralStroke1","color","colorNeutralForeground1Selected","borderWidth","strokeWidthThin","display","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","highContrast","forcedColorAdjust","border","outlineColor","outline","colorTransparentBackgroundSelected","strokeWidthThicker","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackgroundSelected","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","transparent","colorNeutralForeground2BrandSelected","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useCheckedAccessibleStyles","colorBrandBackground","outlineOffset","strokeWidthThickest","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","colorTransparentBackground","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","accessibleCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","isAccessible","className"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('Highlight'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n\n ...createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n }),\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandSelected,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useCheckedAccessibleStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n // Appearance variations\n outline: {\n // There's no longer a reason to thicken the outline variant's border\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n primary: {\n // primary has an inner stroke for the checked style\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,\n\n // need to not have the default focus style that removes the outline\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`,\n }),\n },\n\n subtle: {\n // override subtle-appearance-specific icon color on hover\n ':hover': {\n [`& .${toggleButtonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n },\n\n transparent: {\n /* No styles */\n },\n\n secondary: {\n /* No styles */\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations with isAccessible=false\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto',\n },\n },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto',\n },\n },\n\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n const rootCheckedStyles = useRootCheckedStyles();\n const accessibleCheckedStyles = useCheckedAccessibleStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base,\n appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n // Checked styles\n checked && rootCheckedStyles.base,\n checked && rootCheckedStyles.highContrast,\n appearance && checked && rootCheckedStyles[appearance],\n\n // Opt-in accessible checked styles\n isAccessible && checked && accessibleCheckedStyles.base,\n isAccessible && appearance && checked && accessibleCheckedStyles[appearance],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(\n toggleButtonClassNames.icon,\n checked &&\n !isAccessible &&\n (appearance === 'subtle' || appearance === 'transparent') &&\n iconCheckedStyles.subtleOrTransparent,\n iconCheckedStyles.highContrast,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","makeStyles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","backgroundColor","colorNeutralBackground1Selected","borderColor","colorNeutralStroke1","color","colorNeutralForeground1Selected","borderWidth","strokeWidthThin","display","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","highContrast","forcedColorAdjust","border","outlineColor","outline","colorTransparentBackgroundSelected","strokeWidthThicker","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackgroundSelected","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","transparent","colorNeutralForeground2BrandSelected","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useCheckedAccessibleStyles","colorBrandBackground","outlineOffset","strokeWidthThickest","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","colorTransparentBackground","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","accessibleCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","isAccessible","className"],"mappings":"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"}
@@ -75,6 +75,9 @@ _export(exports, {
75
75
  useCompoundButton_unstable: function() {
76
76
  return _CompoundButton.useCompoundButton_unstable;
77
77
  },
78
+ useMenuButtonBase_unstable: function() {
79
+ return _MenuButton.useMenuButtonBase_unstable;
80
+ },
78
81
  useMenuButtonStyles_unstable: function() {
79
82
  return _MenuButton.useMenuButtonStyles_unstable;
80
83
  },
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n useButtonBase_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState, ButtonBaseProps, ButtonBaseState } from './Button';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n useToggleButtonBase_unstable,\n} from './ToggleButton';\nexport type {\n ToggleButtonProps,\n ToggleButtonState,\n ToggleButtonBaseProps,\n ToggleButtonBaseState,\n} from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","useButtonBase_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"mappings":";;;;;;;;;;;UACQ;eAANA;;;eAiDO4B,6BAAqB;;;eAxC5BtB,8BAAc;;;eAQdK,sBAAU;;IAQVK;uCAAW;;IAQXK;yCAAY;;;eAhCZpB,wBAAgB;;IAShBM;uDAAwB;;;eAQxBK,gCAAoB;;yBAhBC;eAArBV;;IASAM,6BAA6B;;;IAQ7BK;oDAAyB;;;eAOzBI,uCAA0B;;;eAQ1BK,yCAA2B;;;eAP3BJ,kCAAqB;;;eAQrBK,oCAAsB;;;eA9BtBlB,8BAAsB;;;eA4CQwB,wBAAgB;;;eA9C9C1B,gCAAwB;;;eACxBC,0BAAkB;;;eAQlBK,gDAAgC;;;eAChCC,0CAA0B;;;eAO1BI,wCAA4B;;;eAC5BC,kCAAsB;;;eAOtBI,0CAA6B;;;eAC7BC,oCAAuB;;IASvBM;yDAA4B;;;eAF5BF,4CAA8B;;;eAC9BC,sCAAwB;;;eAUjBE,qBAAc;;;wBAzChB,WAAW;gCAQX,mBAAmB;4BAQnB,eAAe;6BAQf,gBAAgB;8BAShB,iBAAiB;uBAQO,gBAAgB;wBAES,mBAAmB"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n useButtonBase_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState, ButtonBaseProps, ButtonBaseState } from './Button';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n useMenuButtonBase_unstable,\n} from './MenuButton';\nexport type {\n MenuButtonProps,\n MenuButtonSlots,\n MenuButtonState,\n MenuButtonBaseProps,\n MenuButtonBaseState,\n} from './MenuButton';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n useToggleButtonBase_unstable,\n} from './ToggleButton';\nexport type {\n ToggleButtonProps,\n ToggleButtonState,\n ToggleButtonBaseProps,\n ToggleButtonBaseState,\n} from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","useButtonBase_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","useMenuButtonBase_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"mappings":";;;;;;;;;;;IACEA;6BAAM;;yBAwDsB;eAArB6B;;;eA/CPvB,8BAAc;;;eAQdK,sBAAU;;;eAeVM,wBAAW;;gBAQC;eAAZK;;;eAvCArB,wBAAgB;;;eAShBM,wCAAwB;;;eAQxBK,gCAAoB;;;eAhBpBV,6BAAqB;;;eASrBM,6CAA6B;;;eAQ7BK,qCAAyB;;;eAczBK,uCAA0B;;IAQ1BK,2BAA2B;;;IAP3BJ,qBAAqB;;;0BAQC;eAAtBK;;;eArCAnB,8BAAsB;;oBAmDwB;eAAhByB;;;eArD9B3B,gCAAwB;;;eACxBC,0BAAkB;;;eAQlBK,gDAAgC;;;eAChCC,0CAA0B;;;eAS1BM,sCAA0B;;;eAF1BF,wCAA4B;;;eAC5BC,kCAAsB;;;eActBK,0CAA6B;;;eAC7BC,oCAAuB;;;eASvBM,0CAA4B;;;eAF5BF,4CAA8B;;;eAC9BC,sCAAwB;;;eAUjBE,qBAAc;;;wBAhDhB,WAAW;gCAQX,mBAAmB;4BASnB,eAAe;6BAcf,gBAAgB;8BAShB,iBAAiB;uBAQO,gBAAgB;wBAES,mBAAmB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-button",
3
- "version": "9.9.1",
3
+ "version": "9.10.0",
4
4
  "description": "Fluent UI React Button component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -13,13 +13,13 @@
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
15
  "@fluentui/keyboard-keys": "^9.0.8",
16
- "@fluentui/react-aria": "^9.17.11",
16
+ "@fluentui/react-aria": "^9.17.13",
17
17
  "@fluentui/react-icons": "^2.0.245",
18
- "@fluentui/react-jsx-runtime": "^9.4.2",
18
+ "@fluentui/react-jsx-runtime": "^9.4.4",
19
19
  "@fluentui/react-shared-contexts": "^9.26.2",
20
- "@fluentui/react-tabster": "^9.26.14",
20
+ "@fluentui/react-tabster": "^9.26.16",
21
21
  "@fluentui/react-theme": "^9.2.1",
22
- "@fluentui/react-utilities": "^9.26.3",
22
+ "@fluentui/react-utilities": "^9.26.5",
23
23
  "@griffel/react": "^1.5.32",
24
24
  "@swc/helpers": "^0.5.1"
25
25
  },