@fluentui/react-button 9.1.11 → 9.1.13

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 (115) hide show
  1. package/CHANGELOG.json +75 -1
  2. package/CHANGELOG.md +25 -2
  3. package/lib/components/Button/Button.js +3 -2
  4. package/lib/components/Button/Button.js.map +1 -1
  5. package/lib/components/Button/renderButton.js +6 -4
  6. package/lib/components/Button/renderButton.js.map +1 -1
  7. package/lib/components/Button/useButton.js +0 -1
  8. package/lib/components/Button/useButton.js.map +1 -1
  9. package/lib/components/Button/useButtonStyles.js +309 -315
  10. package/lib/components/Button/useButtonStyles.js.map +1 -1
  11. package/lib/components/CompoundButton/CompoundButton.js +3 -2
  12. package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
  13. package/lib/components/CompoundButton/renderCompoundButton.js +10 -6
  14. package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
  15. package/lib/components/CompoundButton/useCompoundButton.js +4 -5
  16. package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
  17. package/lib/components/CompoundButton/useCompoundButtonStyles.js +124 -129
  18. package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  19. package/lib/components/MenuButton/MenuButton.js +3 -2
  20. package/lib/components/MenuButton/MenuButton.js.map +1 -1
  21. package/lib/components/MenuButton/renderMenuButton.js +6 -4
  22. package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
  23. package/lib/components/MenuButton/useMenuButton.js +2 -3
  24. package/lib/components/MenuButton/useMenuButton.js.map +1 -1
  25. package/lib/components/MenuButton/useMenuButtonStyles.js +61 -67
  26. package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  27. package/lib/components/SplitButton/SplitButton.js +3 -2
  28. package/lib/components/SplitButton/SplitButton.js.map +1 -1
  29. package/lib/components/SplitButton/renderSplitButton.js +6 -4
  30. package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
  31. package/lib/components/SplitButton/useSplitButton.js +2 -4
  32. package/lib/components/SplitButton/useSplitButton.js.map +1 -1
  33. package/lib/components/SplitButton/useSplitButtonStyles.js +56 -62
  34. package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  35. package/lib/components/ToggleButton/ToggleButton.js +3 -2
  36. package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
  37. package/lib/components/ToggleButton/useToggleButton.js +0 -1
  38. package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
  39. package/lib/components/ToggleButton/useToggleButtonStyles.js +246 -249
  40. package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  41. package/lib/index.js.map +1 -1
  42. package/lib/utils/useToggleState.js +4 -3
  43. package/lib/utils/useToggleState.js.map +1 -1
  44. package/lib-commonjs/Button.js +0 -2
  45. package/lib-commonjs/Button.js.map +1 -1
  46. package/lib-commonjs/CompoundButton.js +0 -2
  47. package/lib-commonjs/CompoundButton.js.map +1 -1
  48. package/lib-commonjs/MenuButton.js +0 -2
  49. package/lib-commonjs/MenuButton.js.map +1 -1
  50. package/lib-commonjs/SplitButton.js +0 -2
  51. package/lib-commonjs/SplitButton.js.map +1 -1
  52. package/lib-commonjs/ToggleButton.js +0 -2
  53. package/lib-commonjs/ToggleButton.js.map +1 -1
  54. package/lib-commonjs/components/Button/Button.js +3 -7
  55. package/lib-commonjs/components/Button/Button.js.map +1 -1
  56. package/lib-commonjs/components/Button/Button.types.js.map +1 -1
  57. package/lib-commonjs/components/Button/index.js +0 -6
  58. package/lib-commonjs/components/Button/index.js.map +1 -1
  59. package/lib-commonjs/components/Button/renderButton.js +6 -8
  60. package/lib-commonjs/components/Button/renderButton.js.map +1 -1
  61. package/lib-commonjs/components/Button/useButton.js +0 -5
  62. package/lib-commonjs/components/Button/useButton.js.map +1 -1
  63. package/lib-commonjs/components/Button/useButtonStyles.js +309 -321
  64. package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
  65. package/lib-commonjs/components/CompoundButton/CompoundButton.js +3 -7
  66. package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
  67. package/lib-commonjs/components/CompoundButton/CompoundButton.types.js.map +1 -1
  68. package/lib-commonjs/components/CompoundButton/index.js +0 -7
  69. package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
  70. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js +10 -10
  71. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
  72. package/lib-commonjs/components/CompoundButton/useCompoundButton.js +4 -9
  73. package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
  74. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +124 -134
  75. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  76. package/lib-commonjs/components/MenuButton/MenuButton.js +3 -7
  77. package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
  78. package/lib-commonjs/components/MenuButton/MenuButton.types.js.map +1 -1
  79. package/lib-commonjs/components/MenuButton/index.js +0 -7
  80. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  81. package/lib-commonjs/components/MenuButton/renderMenuButton.js +6 -8
  82. package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
  83. package/lib-commonjs/components/MenuButton/useMenuButton.js +2 -9
  84. package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
  85. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +61 -73
  86. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  87. package/lib-commonjs/components/SplitButton/SplitButton.js +3 -7
  88. package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
  89. package/lib-commonjs/components/SplitButton/SplitButton.types.js.map +1 -1
  90. package/lib-commonjs/components/SplitButton/index.js +0 -7
  91. package/lib-commonjs/components/SplitButton/index.js.map +1 -1
  92. package/lib-commonjs/components/SplitButton/renderSplitButton.js +6 -8
  93. package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
  94. package/lib-commonjs/components/SplitButton/useSplitButton.js +2 -9
  95. package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
  96. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +56 -67
  97. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  98. package/lib-commonjs/components/ToggleButton/ToggleButton.js +3 -7
  99. package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
  100. package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map +1 -1
  101. package/lib-commonjs/components/ToggleButton/index.js +0 -7
  102. package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
  103. package/lib-commonjs/components/ToggleButton/renderToggleButton.js +0 -2
  104. package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -1
  105. package/lib-commonjs/components/ToggleButton/useToggleButton.js +0 -5
  106. package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
  107. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +246 -256
  108. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  109. package/lib-commonjs/index.js +0 -12
  110. package/lib-commonjs/index.js.map +1 -1
  111. package/lib-commonjs/utils/index.js +0 -2
  112. package/lib-commonjs/utils/index.js.map +1 -1
  113. package/lib-commonjs/utils/useToggleState.js +4 -7
  114. package/lib-commonjs/utils/useToggleState.js.map +1 -1
  115. package/package.json +8 -8
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE,iBAD+D;EAErE,UAAU,EAAE,6BAFyD;EAGrE,mBAAmB,EAAE;AAHgD,CAAhE;;AAMP,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;;AA8HA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EAEA,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB;EAAxB,IAA8C,KAApD;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBAAqB,CAAC,IADW,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAHS,EAIjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QAJb,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,oBALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;EASA,IAAI,KAAK,CAAC,UAAV,EAAsB;IACpB,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;EAKD;;EAED,IAAI,KAAK,CAAC,mBAAV,EAA+B;IAC7B,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;EAKD;;EAED,OAAO,KAAP;AACD,CAhCM","sourcesContent":["import { 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\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: 0,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\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.colorNeutralStroke1,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed,\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': {\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': {\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 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"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAI9C,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;CACtB;AAED,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAWrB;AAEF,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EA4HpB;AAEF,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,UAAU,GAAGH,aAAa,EAAE;EAClC,MAAMI,WAAW,GAAGL,cAAc,EAAE;EAEpC,MAAM;IAAEM,UAAU;IAAEC,QAAQ;IAAEC;EAAiB,CAAE,GAAGL,KAAK;EAEzDA,KAAK,CAACN,IAAI,CAACY,SAAS,GAAGhB,YAAY,CACjCG,qBAAqB,CAACC,IAAI,EAC1BO,UAAU,CAACM,IAAI,EACfJ,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EACpC,CAACC,QAAQ,IAAIC,iBAAiB,KAAKJ,UAAU,CAACG,QAAQ,EACtD,CAACA,QAAQ,IAAIC,iBAAiB,KAAKJ,UAAU,CAACO,oBAAoB,EAClER,KAAK,CAACN,IAAI,CAACY,SAAS,CACrB;EAED,IAAIN,KAAK,CAACL,UAAU,EAAE;IACpBK,KAAK,CAACL,UAAU,CAACW,SAAS,GAAGhB,YAAY,CACvCG,qBAAqB,CAACE,UAAU,EAChCO,WAAW,CAACP,UAAU,EACtBK,KAAK,CAACL,UAAU,CAACW,SAAS,CAC3B;;EAGH,IAAIN,KAAK,CAACJ,mBAAmB,EAAE;IAC7BI,KAAK,CAACJ,mBAAmB,CAACU,SAAS,GAAGhB,YAAY,CAChDG,qBAAqB,CAACG,mBAAmB,EACzCM,WAAW,CAACN,mBAAmB,EAC/BI,KAAK,CAACJ,mBAAmB,CAACU,SAAS,CACpC;;EAGH,OAAON,KAAK;AACd,CAAC","names":["mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","useRootStyles","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabled","disabledFocusable","className","base","disabledHighContrast"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts"],"sourcesContent":["import { 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\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: 0,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand,\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.colorNeutralStroke1,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed,\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': {\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': {\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 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"]}
@@ -5,11 +5,12 @@ import { useToggleButtonStyles_unstable } from './useToggleButtonStyles';
5
5
  /**
6
6
  * ToggleButtons are buttons that toggle between two defined states when triggered.
7
7
  */
8
-
9
8
  export const ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
10
9
  const state = useToggleButton_unstable(props, ref);
11
10
  useToggleButtonStyles_unstable(state);
12
- return renderToggleButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
11
+ return renderToggleButton_unstable(state);
12
+ // Casting is required due to lack of distributive union to support unions on @types/react
13
13
  });
14
+
14
15
  ToggleButton.displayName = 'ToggleButton';
15
16
  //# sourceMappingURL=ToggleButton.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EAEA,8BAA8B,CAAC,KAAD,CAA9B;EAEA,OAAO,2BAA2B,CAAC,KAAD,CAAlC,CALkG,CAMlG;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToggleButton_unstable(props, ref);\n\n useToggleButtonStyles_unstable(state);\n\n return renderToggleButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,2BAA2B,QAAQ,sBAAsB;AAClE,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,8BAA8B,QAAQ,yBAAyB;AAIxE;;;AAGA,OAAO,MAAMC,YAAY,gBAA2CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGN,wBAAwB,CAACI,KAAK,EAAEC,GAAG,CAAC;EAElDJ,8BAA8B,CAACK,KAAK,CAAC;EAErC,OAAOP,2BAA2B,CAACO,KAAK,CAAC;EACzC;AACF,CAAC,CAA2C;;AAE5CJ,YAAY,CAACK,WAAW,GAAG,cAAc","names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","ToggleButton","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n const state = useToggleButton_unstable(props, ref);\n\n useToggleButtonStyles_unstable(state);\n\n return renderToggleButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"]}
@@ -6,7 +6,6 @@ import { useButton_unstable } from '../Button/useButton';
6
6
  * @param props - User provided props to the ToggleButton component.
7
7
  * @param ref - User provided ref to be passed to the ToggleButton component.
8
8
  */
9
-
10
9
  export const useToggleButton_unstable = (props, ref) => {
11
10
  const buttonState = useButton_unstable(props, ref);
12
11
  return useToggleState(props, buttonState);
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-button/src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,QAA+B,4BAA/B;AACA,SAAS,kBAAT,QAAmC,qBAAnC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CACtC,KADsC,EAEtC,GAFsC,KAGjB;EACrB,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EAEA,OAAO,cAAc,CAAC,KAAD,EAAQ,WAAR,CAArB;AACD,CAPM","sourcesContent":["import * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n props: ToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n const buttonState = useButton_unstable(props, ref);\n\n return useToggleState(props, buttonState);\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AACA,SAASA,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,kBAAkB,QAAQ,qBAAqB;AAGxD;;;;;;AAMA,OAAO,MAAMC,wBAAwB,GAAG,CACtCC,KAAwB,EACxBC,GAAqD,KAChC;EACrB,MAAMC,WAAW,GAAGJ,kBAAkB,CAACE,KAAK,EAAEC,GAAG,CAAC;EAElD,OAAOJ,cAAc,CAACG,KAAK,EAAEE,WAAW,CAAC;AAC3C,CAAC","names":["useToggleState","useButton_unstable","useToggleButton_unstable","props","ref","buttonState"],"sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n props: ToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n const buttonState = useButton_unstable(props, ref);\n\n return useToggleState(props, buttonState);\n};\n"]}