@fluentui/react-button 9.3.14 → 9.3.16

Sign up to get free protection for your applications and to get access to all the features.
Files changed (158) hide show
  1. package/CHANGELOG.json +79 -1
  2. package/CHANGELOG.md +28 -2
  3. package/lib/Button.js +0 -1
  4. package/lib/Button.js.map +1 -1
  5. package/lib/CompoundButton.js +0 -1
  6. package/lib/CompoundButton.js.map +1 -1
  7. package/lib/MenuButton.js +0 -1
  8. package/lib/MenuButton.js.map +1 -1
  9. package/lib/SplitButton.js +0 -1
  10. package/lib/SplitButton.js.map +1 -1
  11. package/lib/ToggleButton.js +0 -1
  12. package/lib/ToggleButton.js.map +1 -1
  13. package/lib/components/Button/Button.js +6 -9
  14. package/lib/components/Button/Button.js.map +1 -1
  15. package/lib/components/Button/Button.types.js +1 -2
  16. package/lib/components/Button/Button.types.js.map +1 -1
  17. package/lib/components/Button/index.js +0 -1
  18. package/lib/components/Button/index.js.map +1 -1
  19. package/lib/components/Button/renderButton.js +5 -13
  20. package/lib/components/Button/renderButton.js.map +1 -1
  21. package/lib/components/Button/useButton.js +28 -41
  22. package/lib/components/Button/useButton.js.map +1 -1
  23. package/lib/components/Button/useButtonStyles.styles.js.map +1 -1
  24. package/lib/components/CompoundButton/CompoundButton.js +6 -9
  25. package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
  26. package/lib/components/CompoundButton/CompoundButton.types.js +1 -2
  27. package/lib/components/CompoundButton/CompoundButton.types.js.map +1 -1
  28. package/lib/components/CompoundButton/index.js +0 -1
  29. package/lib/components/CompoundButton/index.js.map +1 -1
  30. package/lib/components/CompoundButton/renderCompoundButton.js +5 -13
  31. package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
  32. package/lib/components/CompoundButton/useCompoundButton.js +20 -26
  33. package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
  34. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js.map +1 -1
  35. package/lib/components/MenuButton/MenuButton.js +6 -9
  36. package/lib/components/MenuButton/MenuButton.js.map +1 -1
  37. package/lib/components/MenuButton/MenuButton.types.js +1 -2
  38. package/lib/components/MenuButton/MenuButton.types.js.map +1 -1
  39. package/lib/components/MenuButton/index.js +0 -1
  40. package/lib/components/MenuButton/index.js.map +1 -1
  41. package/lib/components/MenuButton/renderMenuButton.js +5 -13
  42. package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
  43. package/lib/components/MenuButton/useMenuButton.js +22 -27
  44. package/lib/components/MenuButton/useMenuButton.js.map +1 -1
  45. package/lib/components/MenuButton/useMenuButtonStyles.styles.js.map +1 -1
  46. package/lib/components/SplitButton/SplitButton.js +6 -9
  47. package/lib/components/SplitButton/SplitButton.js.map +1 -1
  48. package/lib/components/SplitButton/SplitButton.types.js +1 -2
  49. package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
  50. package/lib/components/SplitButton/index.js +0 -1
  51. package/lib/components/SplitButton/index.js.map +1 -1
  52. package/lib/components/SplitButton/renderSplitButton.js +4 -9
  53. package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
  54. package/lib/components/SplitButton/useSplitButton.js +54 -68
  55. package/lib/components/SplitButton/useSplitButton.js.map +1 -1
  56. package/lib/components/SplitButton/useSplitButtonStyles.styles.js.map +1 -1
  57. package/lib/components/ToggleButton/ToggleButton.js +6 -9
  58. package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
  59. package/lib/components/ToggleButton/ToggleButton.types.js +1 -2
  60. package/lib/components/ToggleButton/ToggleButton.types.js.map +1 -1
  61. package/lib/components/ToggleButton/index.js +0 -1
  62. package/lib/components/ToggleButton/index.js.map +1 -1
  63. package/lib/components/ToggleButton/renderToggleButton.js +0 -1
  64. package/lib/components/ToggleButton/renderToggleButton.js.map +1 -1
  65. package/lib/components/ToggleButton/useToggleButton.js +3 -5
  66. package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
  67. package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
  68. package/lib/contexts/ButtonContext.js +3 -6
  69. package/lib/contexts/ButtonContext.js.map +1 -1
  70. package/lib/contexts/index.js +0 -1
  71. package/lib/contexts/index.js.map +1 -1
  72. package/lib/index.js +0 -1
  73. package/lib/index.js.map +1 -1
  74. package/lib/utils/index.js +0 -1
  75. package/lib/utils/index.js.map +1 -1
  76. package/lib/utils/useToggleState.js +30 -34
  77. package/lib/utils/useToggleState.js.map +1 -1
  78. package/lib-commonjs/Button.js +0 -3
  79. package/lib-commonjs/Button.js.map +1 -1
  80. package/lib-commonjs/CompoundButton.js +0 -3
  81. package/lib-commonjs/CompoundButton.js.map +1 -1
  82. package/lib-commonjs/MenuButton.js +0 -3
  83. package/lib-commonjs/MenuButton.js.map +1 -1
  84. package/lib-commonjs/SplitButton.js +0 -3
  85. package/lib-commonjs/SplitButton.js.map +1 -1
  86. package/lib-commonjs/ToggleButton.js +0 -3
  87. package/lib-commonjs/ToggleButton.js.map +1 -1
  88. package/lib-commonjs/components/Button/Button.js +1 -3
  89. package/lib-commonjs/components/Button/Button.js.map +1 -1
  90. package/lib-commonjs/components/Button/Button.types.js +0 -3
  91. package/lib-commonjs/components/Button/Button.types.js.map +1 -1
  92. package/lib-commonjs/components/Button/index.js +0 -3
  93. package/lib-commonjs/components/Button/index.js.map +1 -1
  94. package/lib-commonjs/components/Button/renderButton.js +1 -3
  95. package/lib-commonjs/components/Button/renderButton.js.map +1 -1
  96. package/lib-commonjs/components/Button/useButton.js +1 -3
  97. package/lib-commonjs/components/Button/useButton.js.map +1 -1
  98. package/lib-commonjs/components/Button/useButtonStyles.styles.js +0 -2
  99. package/lib-commonjs/components/Button/useButtonStyles.styles.js.map +1 -1
  100. package/lib-commonjs/components/CompoundButton/CompoundButton.js +1 -3
  101. package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
  102. package/lib-commonjs/components/CompoundButton/CompoundButton.types.js +0 -3
  103. package/lib-commonjs/components/CompoundButton/CompoundButton.types.js.map +1 -1
  104. package/lib-commonjs/components/CompoundButton/index.js +0 -3
  105. package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
  106. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js +1 -3
  107. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
  108. package/lib-commonjs/components/CompoundButton/useCompoundButton.js +1 -3
  109. package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
  110. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js +0 -2
  111. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js.map +1 -1
  112. package/lib-commonjs/components/MenuButton/MenuButton.js +1 -3
  113. package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
  114. package/lib-commonjs/components/MenuButton/MenuButton.types.js +0 -3
  115. package/lib-commonjs/components/MenuButton/MenuButton.types.js.map +1 -1
  116. package/lib-commonjs/components/MenuButton/index.js +0 -3
  117. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  118. package/lib-commonjs/components/MenuButton/renderMenuButton.js +1 -3
  119. package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
  120. package/lib-commonjs/components/MenuButton/useMenuButton.js +1 -3
  121. package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
  122. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js +0 -2
  123. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js.map +1 -1
  124. package/lib-commonjs/components/SplitButton/SplitButton.js +1 -3
  125. package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
  126. package/lib-commonjs/components/SplitButton/SplitButton.types.js +0 -3
  127. package/lib-commonjs/components/SplitButton/SplitButton.types.js.map +1 -1
  128. package/lib-commonjs/components/SplitButton/index.js +0 -3
  129. package/lib-commonjs/components/SplitButton/index.js.map +1 -1
  130. package/lib-commonjs/components/SplitButton/renderSplitButton.js +1 -3
  131. package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
  132. package/lib-commonjs/components/SplitButton/useSplitButton.js +1 -3
  133. package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
  134. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js +0 -2
  135. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js.map +1 -1
  136. package/lib-commonjs/components/ToggleButton/ToggleButton.js +1 -3
  137. package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
  138. package/lib-commonjs/components/ToggleButton/ToggleButton.types.js +0 -3
  139. package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map +1 -1
  140. package/lib-commonjs/components/ToggleButton/index.js +0 -3
  141. package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
  142. package/lib-commonjs/components/ToggleButton/renderToggleButton.js +0 -3
  143. package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -1
  144. package/lib-commonjs/components/ToggleButton/useToggleButton.js +1 -3
  145. package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
  146. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js +0 -2
  147. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
  148. package/lib-commonjs/contexts/ButtonContext.js +1 -3
  149. package/lib-commonjs/contexts/ButtonContext.js.map +1 -1
  150. package/lib-commonjs/contexts/index.js +0 -3
  151. package/lib-commonjs/contexts/index.js.map +1 -1
  152. package/lib-commonjs/index.js +0 -3
  153. package/lib-commonjs/index.js.map +1 -1
  154. package/lib-commonjs/utils/index.js +0 -3
  155. package/lib-commonjs/utils/index.js.map +1 -1
  156. package/lib-commonjs/utils/useToggleState.js +1 -3
  157. package/lib-commonjs/utils/useToggleState.js.map +1 -1
  158. package/package.json +7 -7
@@ -6,72 +6,58 @@ import { MenuButton } from '../MenuButton/MenuButton';
6
6
  * Given user props, defines default props for the SplitButton and returns processed state.
7
7
  * @param props - User provided props to the SplitButton component.
8
8
  * @param ref - User provided ref to be passed to the SplitButton component.
9
- */
10
- export const useSplitButton_unstable = (props, ref) => {
11
- const {
12
- appearance = 'secondary',
13
- children,
14
- disabled = false,
15
- disabledFocusable = false,
16
- icon,
17
- iconPosition = 'before',
18
- menuButton,
19
- menuIcon,
20
- primaryActionButton,
21
- shape = 'rounded',
22
- size = 'medium'
23
- } = props;
24
- const baseId = useId('splitButton-');
25
- const menuButtonShorthand = resolveShorthand(menuButton, {
26
- defaultProps: {
27
- appearance,
28
- disabled,
29
- disabledFocusable,
30
- menuIcon,
31
- shape,
32
- size
33
- },
34
- required: true
35
- });
36
- const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
37
- defaultProps: {
38
- appearance,
39
- children,
40
- disabled,
41
- disabledFocusable,
42
- icon,
43
- iconPosition,
44
- id: baseId + '__primaryActionButton',
45
- shape,
46
- size
47
- },
48
- required: true
49
- });
50
- // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
51
- // by the user.
52
- if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
53
- menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
54
- }
55
- return {
56
- // Props passed at the top-level
57
- appearance,
58
- disabled,
59
- disabledFocusable,
60
- iconPosition,
61
- shape,
62
- size,
63
- // Slots definition
64
- components: {
65
- root: 'div',
66
- menuButton: MenuButton,
67
- primaryActionButton: Button
68
- },
69
- root: getNativeElementProps('div', {
70
- ref,
71
- ...props
72
- }),
73
- menuButton: menuButtonShorthand,
74
- primaryActionButton: primaryActionButtonShorthand
75
- };
9
+ */ export const useSplitButton_unstable = (props, ref)=>{
10
+ const { appearance ='secondary' , children , disabled =false , disabledFocusable =false , icon , iconPosition ='before' , menuButton , menuIcon , primaryActionButton , shape ='rounded' , size ='medium' } = props;
11
+ const baseId = useId('splitButton-');
12
+ const menuButtonShorthand = resolveShorthand(menuButton, {
13
+ defaultProps: {
14
+ appearance,
15
+ disabled,
16
+ disabledFocusable,
17
+ menuIcon,
18
+ shape,
19
+ size
20
+ },
21
+ required: true
22
+ });
23
+ const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
24
+ defaultProps: {
25
+ appearance,
26
+ children,
27
+ disabled,
28
+ disabledFocusable,
29
+ icon,
30
+ iconPosition,
31
+ id: baseId + '__primaryActionButton',
32
+ shape,
33
+ size
34
+ },
35
+ required: true
36
+ });
37
+ // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
38
+ // by the user.
39
+ if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
40
+ menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
41
+ }
42
+ return {
43
+ // Props passed at the top-level
44
+ appearance,
45
+ disabled,
46
+ disabledFocusable,
47
+ iconPosition,
48
+ shape,
49
+ size,
50
+ // Slots definition
51
+ components: {
52
+ root: 'div',
53
+ menuButton: MenuButton,
54
+ primaryActionButton: Button
55
+ },
56
+ root: getNativeElementProps('div', {
57
+ ref,
58
+ ...props
59
+ }),
60
+ menuButton: menuButtonShorthand,
61
+ primaryActionButton: primaryActionButtonShorthand
62
+ };
76
63
  };
77
- //# sourceMappingURL=useSplitButton.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","getNativeElementProps","resolveShorthand","useId","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","baseId","menuButtonShorthand","defaultProps","required","primaryActionButtonShorthand","id","components","root"],"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance = 'secondary',\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n } = props;\n\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = resolveShorthand(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n required: true,\n });\n\n const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n defaultProps: {\n appearance,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n required: true,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n // by the user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // Slots definition\n components: {\n root: 'div',\n menuButton: MenuButton,\n primaryActionButton: Button,\n },\n\n root: getNativeElementProps('div', { ref, ...props }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAC/D,SAASC,MAAM,QAAQ;AACvB,SAASC,UAAU,QAAQ;AAG3B;;;;;AAKA,OAAO,MAAMC,uBAAA,GAA0BA,CACrCC,KAAA,EACAC,GAAA,KACqB;EACrB,MAAM;IACJC,UAAA,GAAa;IACbC,QAAA;IACAC,QAAA,GAAW,KAAK;IAChBC,iBAAA,GAAoB,KAAK;IACzBC,IAAA;IACAC,YAAA,GAAe;IACfC,UAAA;IACAC,QAAA;IACAC,mBAAA;IACAC,KAAA,GAAQ;IACRC,IAAA,GAAO;EAAQ,CAChB,GAAGZ,KAAA;EAEJ,MAAMa,MAAA,GAASjB,KAAA,CAAM;EAErB,MAAMkB,mBAAA,GAAsBnB,gBAAA,CAAiBa,UAAA,EAAY;IACvDO,YAAA,EAAc;MACZb,UAAA;MACAE,QAAA;MACAC,iBAAA;MACAI,QAAA;MACAE,KAAA;MACAC;IACF;IACAI,QAAA,EAAU;EACZ;EAEA,MAAMC,4BAAA,GAA+BtB,gBAAA,CAAiBe,mBAAA,EAAqB;IACzEK,YAAA,EAAc;MACZb,UAAA;MACAC,QAAA;MACAC,QAAA;MACAC,iBAAA;MACAC,IAAA;MACAC,YAAA;MACAW,EAAA,EAAIL,MAAA,GAAS;MACbF,KAAA;MACAC;IACF;IACAI,QAAA,EAAU;EACZ;EAEA;EACA;EACA,IACEF,mBAAA,IACAG,4BAAA,IACA,CAACH,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;IACAA,mBAAmB,CAAC,kBAAkB,GAAGG,4BAAA,CAA6BC,EAAE;EAC1E;EAEA,OAAO;IACL;IACAhB,UAAA;IACAE,QAAA;IACAC,iBAAA;IACAE,YAAA;IACAI,KAAA;IACAC,IAAA;IAEA;IACAO,UAAA,EAAY;MACVC,IAAA,EAAM;MACNZ,UAAA,EAAYV,UAAA;MACZY,mBAAA,EAAqBb;IACvB;IAEAuB,IAAA,EAAM1B,qBAAA,CAAsB,OAAO;MAAEO,GAAA;MAAK,GAAGD;IAAM;IACnDQ,UAAA,EAAYM,mBAAA;IACZJ,mBAAA,EAAqBO;EACvB;AACF"}
1
+ {"version":3,"sources":["useSplitButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance = 'secondary',\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n } = props;\n\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = resolveShorthand(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n required: true,\n });\n\n const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n defaultProps: {\n appearance,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n required: true,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n // by the user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // Slots definition\n components: {\n root: 'div',\n menuButton: MenuButton,\n primaryActionButton: Button,\n },\n\n root: getNativeElementProps('div', { ref, ...props }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useId","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","baseId","menuButtonShorthand","defaultProps","required","primaryActionButtonShorthand","id","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AAC3F,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,UAAU,QAAQ,2BAA2B;AAGtD;;;;CAIC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC,MACqB;IACrB,MAAM,EACJC,YAAa,YAAW,EACxBC,SAAQ,EACRC,UAAW,KAAK,CAAA,EAChBC,mBAAoB,KAAK,CAAA,EACzBC,KAAI,EACJC,cAAe,SAAQ,EACvBC,WAAU,EACVC,SAAQ,EACRC,oBAAmB,EACnBC,OAAQ,UAAS,EACjBC,MAAO,SAAQ,EAChB,GAAGZ;IAEJ,MAAMa,SAASjB,MAAM;IAErB,MAAMkB,sBAAsBnB,iBAAiBa,YAAY;QACvDO,cAAc;YACZb;YACAE;YACAC;YACAI;YACAE;YACAC;QACF;QACAI,UAAU,IAAI;IAChB;IAEA,MAAMC,+BAA+BtB,iBAAiBe,qBAAqB;QACzEK,cAAc;YACZb;YACAC;YACAC;YACAC;YACAC;YACAC;YACAW,IAAIL,SAAS;YACbF;YACAC;QACF;QACAI,UAAU,IAAI;IAChB;IAEA,oHAAoH;IACpH,eAAe;IACf,IACEF,uBACAG,gCACA,CAACH,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGG,6BAA6BC,EAAE;IAC1E,CAAC;IAED,OAAO;QACL,gCAAgC;QAChChB;QACAE;QACAC;QACAE;QACAI;QACAC;QAEA,mBAAmB;QACnBO,YAAY;YACVC,MAAM;YACNZ,YAAYV;YACZY,qBAAqBb;QACvB;QAEAuB,MAAM1B,sBAAsB,OAAO;YAAEO;YAAK,GAAGD,KAAK;QAAC;QACnDQ,YAAYM;QACZJ,qBAAqBO;IACvB;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","Brbpp8k","Bcsxniv","tl7e51","mba178","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"sources":["../../../src/components/SplitButton/useSplitButtonStyles.styles.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 '@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': {\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.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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AACzC,SAASC,+BAA+B,QAAQ;AAChD,SAASC,MAAM,QAAQ;AAIvB,OAAO,MAAMC,qBAAA,GAA0D;EACrEC,IAAA,EAAM;EACNC,UAAA,EAAY;EACZC,mBAAA,EAAqB;AACvB;AAEA,MAAMC,cAAA,gBAAiBR,QAAA;EAAAO,mBAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAJ,UAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAWvB;AAEA,MAAMC,aAAA,gBAAgBf,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EA8ItB;AAEA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA8C;EAC1F,MAAMC,UAAA,GAAahC,aAAA;EACnB,MAAMiC,WAAA,GAAcxC,cAAA;EAEpB,MAAM;IAAEyC,UAAA;IAAYR,QAAA;IAAUS;EAAiB,CAAE,GAAGJ,KAAA;EAEpDA,KAAA,CAAMzC,IAAI,CAAC8C,SAAS,GAAGlD,YAAA,CACrBG,qBAAA,CAAsBC,IAAI,EAC1B0C,UAAA,CAAW/B,IAAI,EACfiC,UAAA,IAAcF,UAAU,CAACE,UAAA,CAAW,EACpC,CAACR,QAAA,IAAYS,iBAAgB,KAAMH,UAAA,CAAWN,QAAQ,EACtD,CAACA,QAAA,IAAYS,iBAAgB,KAAMH,UAAA,CAAWL,oBAAoB,EAClEI,KAAA,CAAMzC,IAAI,CAAC8C,SAAS;EAGtB,IAAIL,KAAA,CAAMxC,UAAU,EAAE;IACpBwC,KAAA,CAAMxC,UAAU,CAAC6C,SAAS,GAAGlD,YAAA,CAC3BG,qBAAA,CAAsBE,UAAU,EAChC0C,WAAA,CAAY1C,UAAU,EACtBwC,KAAA,CAAMxC,UAAU,CAAC6C,SAAS;EAE9B;EAEA,IAAIL,KAAA,CAAMvC,mBAAmB,EAAE;IAC7BuC,KAAA,CAAMvC,mBAAmB,CAAC4C,SAAS,GAAGlD,YAAA,CACpCG,qBAAA,CAAsBG,mBAAmB,EACzCyC,WAAA,CAAYzC,mBAAmB,EAC/BuC,KAAA,CAAMvC,mBAAmB,CAAC4C,SAAS;EAEvC;EAEA,OAAOL,KAAA;AACT"}
1
+ {"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","Brbpp8k","Bcsxniv","tl7e51","mba178","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["import { 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};\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: 0\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundOnBrand\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': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight'\n }\n }\n }\n },\n secondary: {\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1\n },\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover\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 ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover\n }\n },\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Pressed\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': {\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': {\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 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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;AACzB,CAAC;AACD,MAAMC,cAAc,gBAAGR,QAAA;EAAAO,mBAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAJ,UAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUtB,CAAC;AACF,MAAMC,aAAa,gBAAGf,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyHrB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,MAAMC,UAAU,GAAGhC,aAAa,CAAC,CAAC;EAClC,MAAMiC,WAAW,GAAGxC,cAAc,CAAC,CAAC;EACpC,MAAM;IAAEyC,UAAU;IAAGR,QAAQ;IAAGS;EAAmB,CAAC,GAAGJ,KAAK;EAC5DA,KAAK,CAACzC,IAAI,CAAC8C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE0C,UAAU,CAAC/B,IAAI,EAAEiC,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EAAE,CAACR,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACN,QAAQ,EAAE,CAACA,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACL,oBAAoB,EAAEI,KAAK,CAACzC,IAAI,CAAC8C,SAAS,CAAC;EACxQ,IAAIL,KAAK,CAACxC,UAAU,EAAE;IAClBwC,KAAK,CAACxC,UAAU,CAAC6C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACE,UAAU,EAAE0C,WAAW,CAAC1C,UAAU,EAAEwC,KAAK,CAACxC,UAAU,CAAC6C,SAAS,CAAC;EACnI;EACA,IAAIL,KAAK,CAACvC,mBAAmB,EAAE;IAC3BuC,KAAK,CAACvC,mBAAmB,CAAC4C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACG,mBAAmB,EAAEyC,WAAW,CAACzC,mBAAmB,EAAEuC,KAAK,CAACvC,mBAAmB,CAAC4C,SAAS,CAAC;EACvK;EACA,OAAOL,KAAK;AAChB,CAAC"}
@@ -5,14 +5,11 @@ import { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';
5
5
  import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
6
6
  /**
7
7
  * ToggleButtons are buttons that toggle between two defined states when triggered.
8
- */
9
- export const ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
10
- const state = useToggleButton_unstable(props, ref);
11
- useToggleButtonStyles_unstable(state);
12
- useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);
13
- return renderToggleButton_unstable(state);
14
- // Casting is required due to lack of distributive union to support unions on @types/react
8
+ */ export const ToggleButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
9
+ const state = useToggleButton_unstable(props, ref);
10
+ useToggleButtonStyles_unstable(state);
11
+ useCustomStyleHook_unstable('useToggleButtonStyles_unstable')(state);
12
+ return renderToggleButton_unstable(state);
13
+ // Casting is required due to lack of distributive union to support unions on @types/react
15
14
  });
16
-
17
15
  ToggleButton.displayName = 'ToggleButton';
18
- //# sourceMappingURL=ToggleButton.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToggleButton","forwardRef","props","ref","state","displayName"],"sources":["../../../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.styles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 useCustomStyleHook_unstable('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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,wBAAwB,QAAQ;AACzC,SAASC,8BAA8B,QAAQ;AAG/C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,YAAA,gBAAuDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACnG,MAAMC,KAAA,GAAQP,wBAAA,CAAyBK,KAAA,EAAOC,GAAA;EAE9CL,8BAAA,CAA+BM,KAAA;EAE/BL,2BAAA,CAA4B,kCAAkCK,KAAA;EAE9D,OAAOR,2BAAA,CAA4BQ,KAAA;EACnC;AACF;;AAEAJ,YAAA,CAAaK,WAAW,GAAG"}
1
+ {"version":3,"sources":["ToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 useCustomStyleHook_unstable('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"],"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHook_unstable","ToggleButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnG,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CL,+BAA+BM;IAE/BL,4BAA4B,kCAAkCK;IAE9D,OAAOR,4BAA4BQ;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}
@@ -1,2 +1 @@
1
- export {};
2
- //# sourceMappingURL=ToggleButton.types.js.map
1
+ export { };
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["../../../src/components/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n /**\n * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n *\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * Defines the controlled checked state of the `ToggleButton`.\n * If passed, `ToggleButton` ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onClick` events and re-rendering.\n *\n * @default false\n */\n checked?: boolean;\n};\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;\n"],"mappings":"AAAA"}
1
+ {"version":3,"sources":["ToggleButton.types.ts"],"sourcesContent":["import type { ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n /**\n * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n *\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * Defines the controlled checked state of the `ToggleButton`.\n * If passed, `ToggleButton` ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onClick` events and re-rendering.\n *\n * @default false\n */\n checked?: boolean;\n};\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;\n"],"names":[],"mappings":"AAAA,WAqB2F"}
@@ -3,4 +3,3 @@ export * from './ToggleButton.types';
3
3
  export * from './renderToggleButton';
4
4
  export * from './useToggleButton';
5
5
  export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';
6
- //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["toggleButtonClassNames","useToggleButtonStyles_unstable"],"sources":["../../../src/components/ToggleButton/index.ts"],"sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,sBAAsB,EAAEC,8BAA8B,QAAQ"}
1
+ {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["toggleButtonClassNames","useToggleButtonStyles_unstable"],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,SAASA,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
@@ -1,2 +1 @@
1
1
  export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
2
- //# sourceMappingURL=renderToggleButton.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["renderButton_unstable","renderToggleButton_unstable"],"sources":["../../../src/components/ToggleButton/renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"mappings":"AAAA,SAASA,qBAAA,IAAyBC,2BAA2B,QAAQ"}
1
+ {"version":3,"sources":["renderToggleButton.tsx"],"sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"],"names":["renderButton_unstable","renderToggleButton_unstable"],"mappings":"AAAA,SAASA,yBAAyBC,2BAA2B,QAAQ,yBAAyB"}
@@ -6,9 +6,7 @@ import { useButton_unstable } from '../Button/useButton';
6
6
  * processed state.
7
7
  * @param props - User provided props to the ToggleButton component.
8
8
  * @param ref - User provided ref to be passed to the ToggleButton component.
9
- */
10
- export const useToggleButton_unstable = (props, ref) => {
11
- const buttonState = useButton_unstable(props, ref);
12
- return useToggleState(props, buttonState);
9
+ */ export const useToggleButton_unstable = (props, ref)=>{
10
+ const buttonState = useButton_unstable(props, ref);
11
+ return useToggleState(props, buttonState);
13
12
  };
14
- //# sourceMappingURL=useToggleButton.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","useToggleState","useButton_unstable","useToggleButton_unstable","props","ref","buttonState"],"sources":["../../../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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,cAAc,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ;AAGnC;;;;;;AAMA,OAAO,MAAMC,wBAAA,GAA2BA,CACtCC,KAAA,EACAC,GAAA,KACsB;EACtB,MAAMC,WAAA,GAAcJ,kBAAA,CAAmBE,KAAA,EAAOC,GAAA;EAE9C,OAAOJ,cAAA,CAAeG,KAAA,EAAOE,WAAA;AAC/B"}
1
+ {"version":3,"sources":["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"],"names":["React","useToggleState","useButton_unstable","useToggleButton_unstable","props","ref","buttonState"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,kBAAkB,QAAQ,sBAAsB;AAGzD;;;;;CAKC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC,MACsB;IACtB,MAAMC,cAAcJ,mBAAmBE,OAAOC;IAE9C,OAAOJ,eAAeG,OAAOE;AAC/B,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"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","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","highContrast","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","Btyszwp","B8jyv7h","l9kbep","By5cl00","abbn9y","Bw5jppy","B0tp99d","B55dcl7","G867l3","gdbnj","mxns5l","o3nasb","B7d2ofm","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["import { 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': {\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': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n ...shorthands.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': {\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': {\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': {\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': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\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': {\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': {\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': {\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': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\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 rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = 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 // 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 (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"mappings":"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"}
1
+ {"version":3,"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","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","highContrast","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","Btyszwp","B8jyv7h","l9kbep","By5cl00","abbn9y","Bw5jppy","B0tp99d","B55dcl7","G867l3","gdbnj","mxns5l","o3nasb","B7d2ofm","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"sources":["useToggleButtonStyles.styles.js"],"sourcesContent":["import { 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': {\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': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':focus': {\n ...shorthands.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': {\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': {\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': {\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': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed\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 ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n },\n ':hover:active': {\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': {\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': {\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': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\n }\n }\n});\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected\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 rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n const { appearance , checked , disabled , disabledFocusable } = 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], // 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, (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, state.icon.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"mappings":"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"}
@@ -1,15 +1,12 @@
1
1
  import * as React from 'react';
2
- const buttonContext = /*#__PURE__*/React.createContext(undefined);
2
+ const buttonContext = React.createContext(undefined);
3
3
  const buttonContextDefaultValue = {};
4
4
  /**
5
5
  * @internal
6
6
  * Internal context provider used to update default values between internal components
7
- */
8
- export const ButtonContextProvider = buttonContext.Provider;
7
+ */ export const ButtonContextProvider = buttonContext.Provider;
9
8
  var _React_useContext;
10
9
  /**
11
10
  * @internal
12
11
  * Internal context hook used to update default values between internal components
13
- */
14
- export const useButtonContext = () => (_React_useContext = React.useContext(buttonContext)) !== null && _React_useContext !== void 0 ? _React_useContext : buttonContextDefaultValue;
15
- //# sourceMappingURL=ButtonContext.js.map
12
+ */ export const useButtonContext = ()=>(_React_useContext = React.useContext(buttonContext)) !== null && _React_useContext !== void 0 ? _React_useContext : buttonContextDefaultValue;
@@ -1 +1 @@
1
- {"version":3,"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","_React_useContext","useButtonContext","useContext"],"sources":["../../src/contexts/ButtonContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * @internal\n * Internal context value used to update default values between internal components\n */\nexport interface ButtonContextValue {\n size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * @internal\n * Internal context provider used to update default values between internal components\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * @internal\n * Internal context hook used to update default values between internal components\n */\nexport const useButtonContext = () => React.useContext(buttonContext) ?? buttonContextDefaultValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,MAAMC,aAAA,gBAAgBD,KAAA,CAAME,aAAa,CAAiCC,SAAA;AAU1E,MAAMC,yBAAA,GAAgD,CAAC;AAEvD;;;;AAIA,OAAO,MAAMC,qBAAA,GAAwBJ,aAAA,CAAcK,QAAQ;IAMrBC,iBAAA;AAJtC;;;;AAIA,OAAO,MAAMC,gBAAA,GAAmBA,CAAA,KAAM,CAAAD,iBAAA,GAAAP,KAAA,CAAMS,UAAU,CAACR,aAAA,eAAjBM,iBAAA,cAAAA,iBAAA,GAAmCH,yBAAyB"}
1
+ {"version":3,"sources":["ButtonContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * @internal\n * Internal context value used to update default values between internal components\n */\nexport interface ButtonContextValue {\n size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * @internal\n * Internal context provider used to update default values between internal components\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * @internal\n * Internal context hook used to update default values between internal components\n */\nexport const useButtonContext = () => React.useContext(buttonContext) ?? buttonContextDefaultValue;\n"],"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","useButtonContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,gBAAgBD,MAAME,aAAa,CAAiCC;AAU1E,MAAMC,4BAAgD,CAAC;AAEvD;;;CAGC,GACD,OAAO,MAAMC,wBAAwBJ,cAAcK,QAAQ,CAAC;IAMtBN;AAJtC;;;CAGC,GACD,OAAO,MAAMO,mBAAmB,IAAMP,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,4BAAjBD,+BAAAA,oBAAmCI,yBAAyB,CAAC"}
@@ -1,2 +1 @@
1
1
  export * from './ButtonContext';
2
- //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["../../src/contexts/index.ts"],"sourcesContent":["export * from './ButtonContext';\n"],"mappings":"AAAA,cAAc"}
1
+ {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ButtonContext';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB"}
package/lib/index.js CHANGED
@@ -5,4 +5,3 @@ export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSpli
5
5
  export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './ToggleButton';
6
6
  export { useToggleState } from './utils/index';
7
7
  export { ButtonContextProvider, useButtonContext } from './contexts/index';
8
- //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_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","useToggleState","ButtonContextProvider","useButtonContext"],"sources":["../src/index.ts"],"sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } 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} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb;AAEP,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB;AAEP,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB;AAEP,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB;AAEP,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB;AAGP,SAASC,cAAc,QAAQ;AAE/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ"}
1
+ {"version":3,"sources":["index.ts"],"sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } 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} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } 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","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","useToggleState","ButtonContextProvider","useButtonContext"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW;AAElB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAEtB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SAASC,cAAc,QAAQ,gBAAgB;AAE/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,mBAAmB"}
@@ -1,2 +1 @@
1
1
  export * from './useToggleState';
2
- //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["../../src/utils/index.ts"],"sourcesContent":["export * from './useToggleState';\n"],"mappings":"AAAA,cAAc"}
1
+ {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useToggleState';\n"],"names":[],"mappings":"AAAA,cAAc,mBAAmB"}
@@ -1,38 +1,34 @@
1
1
  import * as React from 'react';
2
2
  import { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';
3
3
  export function useToggleState(props, state) {
4
- const {
5
- checked,
6
- defaultChecked,
7
- disabled,
8
- disabledFocusable
9
- } = props;
10
- const {
11
- onClick,
12
- role
13
- } = state.root;
14
- const [checkedValue, setCheckedValue] = useControllableState({
15
- state: checked,
16
- defaultState: defaultChecked,
17
- initialState: false
18
- });
19
- const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
20
- const onToggleClick = React.useCallback(ev => {
21
- if (!disabled && !disabledFocusable) {
22
- if (ev.defaultPrevented) {
23
- return;
24
- }
25
- setCheckedValue(!checkedValue);
26
- }
27
- }, [checkedValue, disabled, disabledFocusable, setCheckedValue]);
28
- return {
29
- ...state,
30
- checked: checkedValue,
31
- root: {
32
- ...state.root,
33
- [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
34
- onClick: useEventCallback(mergeCallbacks(onClick, onToggleClick))
35
- }
36
- };
4
+ const { checked , defaultChecked , disabled , disabledFocusable } = props;
5
+ const { onClick , role } = state.root;
6
+ const [checkedValue, setCheckedValue] = useControllableState({
7
+ state: checked,
8
+ defaultState: defaultChecked,
9
+ initialState: false
10
+ });
11
+ const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
12
+ const onToggleClick = React.useCallback((ev)=>{
13
+ if (!disabled && !disabledFocusable) {
14
+ if (ev.defaultPrevented) {
15
+ return;
16
+ }
17
+ setCheckedValue(!checkedValue);
18
+ }
19
+ }, [
20
+ checkedValue,
21
+ disabled,
22
+ disabledFocusable,
23
+ setCheckedValue
24
+ ]);
25
+ return {
26
+ ...state,
27
+ checked: checkedValue,
28
+ root: {
29
+ ...state.root,
30
+ [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
31
+ onClick: useEventCallback(mergeCallbacks(onClick, onToggleClick))
32
+ }
33
+ };
37
34
  }
38
- //# sourceMappingURL=useToggleState.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","mergeCallbacks","useControllableState","useEventCallback","useToggleState","props","state","checked","defaultChecked","disabled","disabledFocusable","onClick","role","root","checkedValue","setCheckedValue","defaultState","initialState","isCheckboxTypeRole","onToggleClick","useCallback","ev","defaultPrevented"],"sources":["../../src/utils/useToggleState.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>,\n TButtonState extends Pick<ButtonState, 'root'>,\n TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>,\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n const { checked, defaultChecked, disabled, disabledFocusable } = props;\n const { onClick, role } = state.root;\n\n const [checkedValue, setCheckedValue] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n\n const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n const onToggleClick = React.useCallback(\n ev => {\n if (!disabled && !disabledFocusable) {\n if (ev.defaultPrevented) {\n return;\n }\n\n setCheckedValue(!checkedValue);\n }\n },\n [checkedValue, disabled, disabledFocusable, setCheckedValue],\n );\n\n return {\n ...state,\n\n checked: checkedValue,\n\n root: {\n ...state.root,\n [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n onClick: useEventCallback(\n mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>, onToggleClick),\n ),\n },\n } as TToggleButtonState;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,cAAc,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ;AAIvE,OAAO,SAASC,eAIdC,KAAyB,EAAEC,KAAmB,EAAsB;EACpE,MAAM;IAAEC,OAAA;IAASC,cAAA;IAAgBC,QAAA;IAAUC;EAAiB,CAAE,GAAGL,KAAA;EACjE,MAAM;IAAEM,OAAA;IAASC;EAAI,CAAE,GAAGN,KAAA,CAAMO,IAAI;EAEpC,MAAM,CAACC,YAAA,EAAcC,eAAA,CAAgB,GAAGb,oBAAA,CAAqB;IAC3DI,KAAA,EAAOC,OAAA;IACPS,YAAA,EAAcR,cAAA;IACdS,YAAA,EAAc;EAChB;EAEA,MAAMC,kBAAA,GAAqBN,IAAA,KAAS,sBAAsBA,IAAA,KAAS;EAEnE,MAAMO,aAAA,GAAgBnB,KAAA,CAAMoB,WAAW,CACrCC,EAAA,IAAM;IACJ,IAAI,CAACZ,QAAA,IAAY,CAACC,iBAAA,EAAmB;MACnC,IAAIW,EAAA,CAAGC,gBAAgB,EAAE;QACvB;MACF;MAEAP,eAAA,CAAgB,CAACD,YAAA;IACnB;EACF,GACA,CAACA,YAAA,EAAcL,QAAA,EAAUC,iBAAA,EAAmBK,eAAA,CAAgB;EAG9D,OAAO;IACL,GAAGT,KAAK;IAERC,OAAA,EAASO,YAAA;IAETD,IAAA,EAAM;MACJ,GAAGP,KAAA,CAAMO,IAAI;MACb,CAACK,kBAAA,GAAqB,iBAAiB,cAAc,GAAGJ,YAAA;MACxDH,OAAA,EAASR,gBAAA,CACPF,cAAA,CAAeU,OAAA,EAA2EQ,aAAA;IAE9F;EACF;AACF"}
1
+ {"version":3,"sources":["useToggleState.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>,\n TButtonState extends Pick<ButtonState, 'root'>,\n TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>,\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n const { checked, defaultChecked, disabled, disabledFocusable } = props;\n const { onClick, role } = state.root;\n\n const [checkedValue, setCheckedValue] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n\n const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n const onToggleClick = React.useCallback(\n ev => {\n if (!disabled && !disabledFocusable) {\n if (ev.defaultPrevented) {\n return;\n }\n\n setCheckedValue(!checkedValue);\n }\n },\n [checkedValue, disabled, disabledFocusable, setCheckedValue],\n );\n\n return {\n ...state,\n\n checked: checkedValue,\n\n root: {\n ...state.root,\n [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n onClick: useEventCallback(\n mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>, onToggleClick),\n ),\n },\n } as TToggleButtonState;\n}\n"],"names":["React","mergeCallbacks","useControllableState","useEventCallback","useToggleState","props","state","checked","defaultChecked","disabled","disabledFocusable","onClick","role","root","checkedValue","setCheckedValue","defaultState","initialState","isCheckboxTypeRole","onToggleClick","useCallback","ev","defaultPrevented"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAInG,OAAO,SAASC,eAIdC,KAAyB,EAAEC,KAAmB,EAAsB;IACpE,MAAM,EAAEC,QAAO,EAAEC,eAAc,EAAEC,SAAQ,EAAEC,kBAAiB,EAAE,GAAGL;IACjE,MAAM,EAAEM,QAAO,EAAEC,KAAI,EAAE,GAAGN,MAAMO,IAAI;IAEpC,MAAM,CAACC,cAAcC,gBAAgB,GAAGb,qBAAqB;QAC3DI,OAAOC;QACPS,cAAcR;QACdS,cAAc,KAAK;IACrB;IAEA,MAAMC,qBAAqBN,SAAS,sBAAsBA,SAAS;IAEnE,MAAMO,gBAAgBnB,MAAMoB,WAAW,CACrCC,CAAAA,KAAM;QACJ,IAAI,CAACZ,YAAY,CAACC,mBAAmB;YACnC,IAAIW,GAAGC,gBAAgB,EAAE;gBACvB;YACF,CAAC;YAEDP,gBAAgB,CAACD;QACnB,CAAC;IACH,GACA;QAACA;QAAcL;QAAUC;QAAmBK;KAAgB;IAG9D,OAAO;QACL,GAAGT,KAAK;QAERC,SAASO;QAETD,MAAM;YACJ,GAAGP,MAAMO,IAAI;YACb,CAACK,qBAAqB,iBAAiB,cAAc,CAAC,EAAEJ;YACxDH,SAASR,iBACPF,eAAeU,SAA2EQ;QAE9F;IACF;AACF,CAAC"}
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
4
4
  });
5
5
  const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
6
6
  _exportStar(require("./components/Button/index"), exports);
7
- //# sourceMappingURL=Button.js.map
8
-
9
- //# sourceMappingURL=Button.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/Button.js"],"sourcesContent":["export * from './components/Button/index';\n//# sourceMappingURL=Button.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,kCAAkC"}
1
+ {"version":3,"sources":["Button.js"],"sourcesContent":["export * from './components/Button/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
4
4
  });
5
5
  const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
6
6
  _exportStar(require("./components/CompoundButton/index"), exports);
7
- //# sourceMappingURL=CompoundButton.js.map
8
-
9
- //# sourceMappingURL=CompoundButton.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/CompoundButton.js"],"sourcesContent":["export * from './components/CompoundButton/index';\n//# sourceMappingURL=CompoundButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,0CAA0C"}
1
+ {"version":3,"sources":["CompoundButton.js"],"sourcesContent":["export * from './components/CompoundButton/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
4
4
  });
5
5
  const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
6
6
  _exportStar(require("./components/MenuButton/index"), exports);
7
- //# sourceMappingURL=MenuButton.js.map
8
-
9
- //# sourceMappingURL=MenuButton.js.map