@fluentui/react-button 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230321-0440.1

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 (159) hide show
  1. package/CHANGELOG.json +17 -17
  2. package/CHANGELOG.md +11 -11
  3. package/lib/Button.js +1 -1
  4. package/lib/Button.js.map +1 -1
  5. package/lib/CompoundButton.js +1 -1
  6. package/lib/CompoundButton.js.map +1 -1
  7. package/lib/MenuButton.js +1 -1
  8. package/lib/MenuButton.js.map +1 -1
  9. package/lib/SplitButton.js +1 -1
  10. package/lib/SplitButton.js.map +1 -1
  11. package/lib/ToggleButton.js +1 -1
  12. package/lib/ToggleButton.js.map +1 -1
  13. package/lib/components/Button/Button.js +6 -6
  14. package/lib/components/Button/Button.js.map +1 -1
  15. package/lib/components/Button/Button.types.js.map +1 -1
  16. package/lib/components/Button/index.js +4 -4
  17. package/lib/components/Button/index.js.map +1 -1
  18. package/lib/components/Button/renderButton.js +9 -3
  19. package/lib/components/Button/renderButton.js.map +1 -1
  20. package/lib/components/Button/useButton.js +12 -13
  21. package/lib/components/Button/useButton.js.map +1 -1
  22. package/lib/components/Button/useButtonStyles.js +14 -14
  23. package/lib/components/Button/useButtonStyles.js.map +1 -1
  24. package/lib/components/CompoundButton/CompoundButton.js +6 -6
  25. package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
  26. package/lib/components/CompoundButton/CompoundButton.types.js.map +1 -1
  27. package/lib/components/CompoundButton/index.js +5 -5
  28. package/lib/components/CompoundButton/index.js.map +1 -1
  29. package/lib/components/CompoundButton/renderCompoundButton.js +13 -3
  30. package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
  31. package/lib/components/CompoundButton/useCompoundButton.js +8 -8
  32. package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
  33. package/lib/components/CompoundButton/useCompoundButtonStyles.js +7 -7
  34. package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  35. package/lib/components/MenuButton/MenuButton.js +6 -6
  36. package/lib/components/MenuButton/MenuButton.js.map +1 -1
  37. package/lib/components/MenuButton/MenuButton.types.js.map +1 -1
  38. package/lib/components/MenuButton/index.js +5 -5
  39. package/lib/components/MenuButton/index.js.map +1 -1
  40. package/lib/components/MenuButton/renderMenuButton.js +9 -3
  41. package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
  42. package/lib/components/MenuButton/useMenuButton.js +9 -8
  43. package/lib/components/MenuButton/useMenuButton.js.map +1 -1
  44. package/lib/components/MenuButton/useMenuButtonStyles.js +10 -10
  45. package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  46. package/lib/components/SplitButton/SplitButton.js +6 -6
  47. package/lib/components/SplitButton/SplitButton.js.map +1 -1
  48. package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
  49. package/lib/components/SplitButton/index.js +5 -5
  50. package/lib/components/SplitButton/index.js.map +1 -1
  51. package/lib/components/SplitButton/renderSplitButton.js +9 -3
  52. package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
  53. package/lib/components/SplitButton/useSplitButton.js +13 -14
  54. package/lib/components/SplitButton/useSplitButton.js.map +1 -1
  55. package/lib/components/SplitButton/useSplitButtonStyles.js +6 -6
  56. package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  57. package/lib/components/ToggleButton/ToggleButton.js +6 -6
  58. package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
  59. package/lib/components/ToggleButton/ToggleButton.types.js.map +1 -1
  60. package/lib/components/ToggleButton/index.js +5 -5
  61. package/lib/components/ToggleButton/index.js.map +1 -1
  62. package/lib/components/ToggleButton/renderToggleButton.js +1 -1
  63. package/lib/components/ToggleButton/renderToggleButton.js.map +1 -1
  64. package/lib/components/ToggleButton/useToggleButton.js +2 -3
  65. package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
  66. package/lib/components/ToggleButton/useToggleButtonStyles.js +9 -9
  67. package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  68. package/lib/contexts/ButtonContext.js +5 -2
  69. package/lib/contexts/ButtonContext.js.map +1 -1
  70. package/lib/contexts/index.js +1 -1
  71. package/lib/contexts/index.js.map +1 -1
  72. package/lib/index.js +7 -7
  73. package/lib/index.js.map +1 -1
  74. package/lib/utils/index.js +1 -1
  75. package/lib/utils/index.js.map +1 -1
  76. package/lib/utils/useToggleState.js +4 -4
  77. package/lib/utils/useToggleState.js.map +1 -1
  78. package/lib-commonjs/Button.js +4 -5
  79. package/lib-commonjs/Button.js.map +1 -1
  80. package/lib-commonjs/CompoundButton.js +4 -5
  81. package/lib-commonjs/CompoundButton.js.map +1 -1
  82. package/lib-commonjs/MenuButton.js +4 -5
  83. package/lib-commonjs/MenuButton.js.map +1 -1
  84. package/lib-commonjs/SplitButton.js +4 -5
  85. package/lib-commonjs/SplitButton.js.map +1 -1
  86. package/lib-commonjs/ToggleButton.js +4 -5
  87. package/lib-commonjs/ToggleButton.js.map +1 -1
  88. package/lib-commonjs/components/Button/Button.js +21 -19
  89. package/lib-commonjs/components/Button/Button.js.map +1 -1
  90. package/lib-commonjs/components/Button/Button.types.js +2 -3
  91. package/lib-commonjs/components/Button/Button.types.js.map +1 -1
  92. package/lib-commonjs/components/Button/index.js +19 -17
  93. package/lib-commonjs/components/Button/index.js.map +1 -1
  94. package/lib-commonjs/components/Button/renderButton.js +26 -14
  95. package/lib-commonjs/components/Button/renderButton.js.map +1 -1
  96. package/lib-commonjs/components/Button/useButton.js +52 -40
  97. package/lib-commonjs/components/Button/useButton.js.map +1 -1
  98. package/lib-commonjs/components/Button/useButtonStyles.js +477 -1135
  99. package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
  100. package/lib-commonjs/components/CompoundButton/CompoundButton.js +21 -19
  101. package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
  102. package/lib-commonjs/components/CompoundButton/CompoundButton.types.js +2 -3
  103. package/lib-commonjs/components/CompoundButton/CompoundButton.types.js.map +1 -1
  104. package/lib-commonjs/components/CompoundButton/index.js +20 -18
  105. package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
  106. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js +30 -14
  107. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
  108. package/lib-commonjs/components/CompoundButton/useCompoundButton.js +36 -30
  109. package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
  110. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +184 -315
  111. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  112. package/lib-commonjs/components/MenuButton/MenuButton.js +22 -19
  113. package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
  114. package/lib-commonjs/components/MenuButton/MenuButton.types.js +2 -3
  115. package/lib-commonjs/components/MenuButton/MenuButton.types.js.map +1 -1
  116. package/lib-commonjs/components/MenuButton/index.js +20 -18
  117. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  118. package/lib-commonjs/components/MenuButton/renderMenuButton.js +26 -14
  119. package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
  120. package/lib-commonjs/components/MenuButton/useMenuButton.js +37 -33
  121. package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
  122. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +106 -166
  123. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  124. package/lib-commonjs/components/SplitButton/SplitButton.js +22 -19
  125. package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
  126. package/lib-commonjs/components/SplitButton/SplitButton.types.js +2 -3
  127. package/lib-commonjs/components/SplitButton/SplitButton.types.js.map +1 -1
  128. package/lib-commonjs/components/SplitButton/index.js +20 -18
  129. package/lib-commonjs/components/SplitButton/index.js.map +1 -1
  130. package/lib-commonjs/components/SplitButton/renderSplitButton.js +22 -13
  131. package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
  132. package/lib-commonjs/components/SplitButton/useSplitButton.js +79 -66
  133. package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
  134. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +106 -263
  135. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  136. package/lib-commonjs/components/ToggleButton/ToggleButton.js +21 -19
  137. package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
  138. package/lib-commonjs/components/ToggleButton/ToggleButton.types.js +2 -3
  139. package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map +1 -1
  140. package/lib-commonjs/components/ToggleButton/index.js +20 -18
  141. package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
  142. package/lib-commonjs/components/ToggleButton/renderToggleButton.js +8 -6
  143. package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -1
  144. package/lib-commonjs/components/ToggleButton/useToggleButton.js +16 -14
  145. package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
  146. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +380 -897
  147. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  148. package/lib-commonjs/contexts/ButtonContext.js +19 -17
  149. package/lib-commonjs/contexts/ButtonContext.js.map +1 -1
  150. package/lib-commonjs/contexts/index.js +4 -5
  151. package/lib-commonjs/contexts/index.js.map +1 -1
  152. package/lib-commonjs/index.js +179 -47
  153. package/lib-commonjs/index.js.map +1 -1
  154. package/lib-commonjs/utils/index.js +4 -5
  155. package/lib-commonjs/utils/index.js.map +1 -1
  156. package/lib-commonjs/utils/useToggleState.js +40 -40
  157. package/lib-commonjs/utils/useToggleState.js.map +1 -1
  158. package/package.json +12 -11
  159. package/.swcrc +0 -39
@@ -1,7 +1,6 @@
1
- import * as React from "react";
2
- import { getNativeElementProps, resolveShorthand, useId } from "@fluentui/react-utilities";
3
- import { Button } from "../Button/Button";
4
- import { MenuButton } from "../MenuButton/MenuButton";
1
+ import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
2
+ import { Button } from '../Button/Button';
3
+ import { MenuButton } from '../MenuButton/MenuButton';
5
4
  /**
6
5
  * Given user props, defines default props for the SplitButton and returns processed state.
7
6
  * @param props - User provided props to the SplitButton component.
@@ -9,19 +8,19 @@ import { MenuButton } from "../MenuButton/MenuButton";
9
8
  */
10
9
  export const useSplitButton_unstable = (props, ref) => {
11
10
  const {
12
- appearance = "secondary",
11
+ appearance = 'secondary',
13
12
  children,
14
13
  disabled = false,
15
14
  disabledFocusable = false,
16
15
  icon,
17
- iconPosition = "before",
16
+ iconPosition = 'before',
18
17
  menuButton,
19
18
  menuIcon,
20
19
  primaryActionButton,
21
- shape = "rounded",
22
- size = "medium"
20
+ shape = 'rounded',
21
+ size = 'medium'
23
22
  } = props;
24
- const baseId = useId("splitButton-");
23
+ const baseId = useId('splitButton-');
25
24
  const menuButtonShorthand = resolveShorthand(menuButton, {
26
25
  defaultProps: {
27
26
  appearance,
@@ -41,7 +40,7 @@ export const useSplitButton_unstable = (props, ref) => {
41
40
  disabledFocusable,
42
41
  icon,
43
42
  iconPosition,
44
- id: baseId + "__primaryActionButton",
43
+ id: baseId + '__primaryActionButton',
45
44
  shape,
46
45
  size
47
46
  },
@@ -49,8 +48,8 @@ export const useSplitButton_unstable = (props, ref) => {
49
48
  });
50
49
  // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
51
50
  // by the user.
52
- if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand["aria-label"] && !menuButtonShorthand["aria-labelledby"]) {
53
- menuButtonShorthand["aria-labelledby"] = primaryActionButtonShorthand.id;
51
+ if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
52
+ menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
54
53
  }
55
54
  return {
56
55
  // Props passed at the top-level
@@ -62,11 +61,11 @@ export const useSplitButton_unstable = (props, ref) => {
62
61
  size,
63
62
  // Slots definition
64
63
  components: {
65
- root: "div",
64
+ root: 'div',
66
65
  menuButton: MenuButton,
67
66
  primaryActionButton: Button
68
67
  },
69
- root: getNativeElementProps("div", {
68
+ root: getNativeElementProps('div', {
70
69
  ref,
71
70
  ...props
72
71
  }),
@@ -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,"names":["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":["../../../../../../../../../packages/react-components/react-button/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":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAC1F,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,UAAU,QAAQ,0BAA0B;AAGrD;;;;;AAKA,OAAO,MAAMC,uBAAuB,GAAGA,CACrCC,KAAuB,EACvBC,GAAqD,KACjC;EACpB,MAAM;IACJC,UAAU,GAAG,WAAW;IACxBC,QAAQ;IACRC,QAAQ,GAAG,KAAK;IAChBC,iBAAiB,GAAG,KAAK;IACzBC,IAAI;IACJC,YAAY,GAAG,QAAQ;IACvBC,UAAU;IACVC,QAAQ;IACRC,mBAAmB;IACnBC,KAAK,GAAG,SAAS;IACjBC,IAAI,GAAG;EAAQ,CAChB,GAAGZ,KAAK;EAET,MAAMa,MAAM,GAAGjB,KAAK,CAAC,cAAc,CAAC;EAEpC,MAAMkB,mBAAmB,GAAGnB,gBAAgB,CAACa,UAAU,EAAE;IACvDO,YAAY,EAAE;MACZb,UAAU;MACVE,QAAQ;MACRC,iBAAiB;MACjBI,QAAQ;MACRE,KAAK;MACLC;KACD;IACDI,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,4BAA4B,GAAGtB,gBAAgB,CAACe,mBAAmB,EAAE;IACzEK,YAAY,EAAE;MACZb,UAAU;MACVC,QAAQ;MACRC,QAAQ;MACRC,iBAAiB;MACjBC,IAAI;MACJC,YAAY;MACZW,EAAE,EAAEL,MAAM,GAAG,uBAAuB;MACpCF,KAAK;MACLC;KACD;IACDI,QAAQ,EAAE;GACX,CAAC;EAEF;EACA;EACA,IACEF,mBAAmB,IACnBG,4BAA4B,IAC5B,CAACH,mBAAmB,CAAC,YAAY,CAAC,IAClC,CAACA,mBAAmB,CAAC,iBAAiB,CAAC,EACvC;IACAA,mBAAmB,CAAC,iBAAiB,CAAC,GAAGG,4BAA4B,CAACC,EAAE;;EAG1E,OAAO;IACL;IACAhB,UAAU;IACVE,QAAQ;IACRC,iBAAiB;IACjBE,YAAY;IACZI,KAAK;IACLC,IAAI;IAEJ;IACAO,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXZ,UAAU,EAAEV,UAAU;MACtBY,mBAAmB,EAAEb;KACtB;IAEDuB,IAAI,EAAE1B,qBAAqB,CAAC,KAAK,EAAE;MAAEO,GAAG;MAAE,GAAGD;IAAK,CAAE,CAAC;IACrDQ,UAAU,EAAEM,mBAAmB;IAC/BJ,mBAAmB,EAAEO;GACtB;AACH,CAAC"}
@@ -1,10 +1,10 @@
1
- import { __styles, mergeClasses } from "@griffel/react";
2
- import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
3
- import { tokens } from "@fluentui/react-theme";
1
+ import { __styles, mergeClasses } from '@griffel/react';
2
+ import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
3
+ import { tokens } from '@fluentui/react-theme';
4
4
  export const splitButtonClassNames = {
5
- root: "fui-SplitButton",
6
- menuButton: "fui-SplitButton__menuButton",
7
- primaryActionButton: "fui-SplitButton__primaryActionButton"
5
+ root: 'fui-SplitButton',
6
+ menuButton: 'fui-SplitButton__menuButton',
7
+ primaryActionButton: 'fui-SplitButton__primaryActionButton'
8
8
  };
9
9
  const useFocusStyles = /*#__PURE__*/__styles({
10
10
  primaryActionButton: {
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","Brovlpu","B486eqv","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","f","i","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.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,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,UAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,EAWvB;AAEA,MAAMC,aAAA,gBAAgBnB,QAAA;EAAAoB,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,GAAc5C,cAAA;EAEpB,MAAM;IAAE6C,UAAA;IAAYR,QAAA;IAAUS;EAAiB,CAAE,GAAGJ,KAAA;EAEpDA,KAAA,CAAM7C,IAAI,CAACkD,SAAS,GAAGtD,YAAA,CACrBG,qBAAA,CAAsBC,IAAI,EAC1B8C,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,CAAM7C,IAAI,CAACkD,SAAS;EAGtB,IAAIL,KAAA,CAAM5C,UAAU,EAAE;IACpB4C,KAAA,CAAM5C,UAAU,CAACiD,SAAS,GAAGtD,YAAA,CAC3BG,qBAAA,CAAsBE,UAAU,EAChC8C,WAAA,CAAY9C,UAAU,EACtB4C,KAAA,CAAM5C,UAAU,CAACiD,SAAS;EAE9B;EAEA,IAAIL,KAAA,CAAM3C,mBAAmB,EAAE;IAC7B2C,KAAA,CAAM3C,mBAAmB,CAACgD,SAAS,GAAGtD,YAAA,CACpCG,qBAAA,CAAsBG,mBAAmB,EACzC6C,WAAA,CAAY7C,mBAAmB,EAC/B2C,KAAA,CAAM3C,mBAAmB,CAACgD,SAAS;EAEvC;EAEA,OAAOL,KAAA;AACT"}
1
+ {"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","Brovlpu","B486eqv","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","f","i","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":["../../../../../../../../../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 '@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,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,gBAAGR,QAAA;EAAAO,mBAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,UAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,EAWrB;AAEF,MAAMC,aAAa,gBAAGnB,QAAA;EAAAoB,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,EA8IpB;AAEF,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,UAAU,GAAGhC,aAAa,EAAE;EAClC,MAAMiC,WAAW,GAAG5C,cAAc,EAAE;EAEpC,MAAM;IAAE6C,UAAU;IAAER,QAAQ;IAAES;EAAiB,CAAE,GAAGJ,KAAK;EAEzDA,KAAK,CAAC7C,IAAI,CAACkD,SAAS,GAAGtD,YAAY,CACjCG,qBAAqB,CAACC,IAAI,EAC1B8C,UAAU,CAAC/B,IAAI,EACfiC,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EACpC,CAACR,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACN,QAAQ,EACtD,CAACA,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACL,oBAAoB,EAClEI,KAAK,CAAC7C,IAAI,CAACkD,SAAS,CACrB;EAED,IAAIL,KAAK,CAAC5C,UAAU,EAAE;IACpB4C,KAAK,CAAC5C,UAAU,CAACiD,SAAS,GAAGtD,YAAY,CACvCG,qBAAqB,CAACE,UAAU,EAChC8C,WAAW,CAAC9C,UAAU,EACtB4C,KAAK,CAAC5C,UAAU,CAACiD,SAAS,CAC3B;;EAGH,IAAIL,KAAK,CAAC3C,mBAAmB,EAAE;IAC7B2C,KAAK,CAAC3C,mBAAmB,CAACgD,SAAS,GAAGtD,YAAY,CAChDG,qBAAqB,CAACG,mBAAmB,EACzC6C,WAAW,CAAC7C,mBAAmB,EAC/B2C,KAAK,CAAC3C,mBAAmB,CAACgD,SAAS,CACpC;;EAGH,OAAOL,KAAK;AACd,CAAC"}
@@ -1,8 +1,8 @@
1
- import * as React from "react";
2
- import { renderToggleButton_unstable } from "./renderToggleButton";
3
- import { useToggleButton_unstable } from "./useToggleButton";
4
- import { useToggleButtonStyles_unstable } from "./useToggleButtonStyles";
5
- import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
1
+ import * as React from 'react';
2
+ import { renderToggleButton_unstable } from './renderToggleButton';
3
+ import { useToggleButton_unstable } from './useToggleButton';
4
+ import { useToggleButtonStyles_unstable } from './useToggleButtonStyles';
5
+ import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
6
6
  /**
7
7
  * ToggleButtons are buttons that toggle between two defined states when triggered.
8
8
  */
@@ -17,5 +17,5 @@ export const ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
17
17
  // Casting is required due to lack of distributive union to support unions on @types/react
18
18
  });
19
19
 
20
- ToggleButton.displayName = "ToggleButton";
20
+ ToggleButton.displayName = 'ToggleButton';
21
21
  //# sourceMappingURL=ToggleButton.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHooks_unstable","ToggleButton","forwardRef","props","ref","state","useCustomStyles","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';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_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 const { useToggleButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(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,4BAA4B,QAAQ;AAE7C;;;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/B,MAAM;IAAEN,8BAAA,EAAgCO;EAAe,CAAE,GAAGN,4BAAA;EAC5DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOR,2BAAA,CAA4BQ,KAAA;EACnC;AACF;;AAEAJ,YAAA,CAAaM,WAAW,GAAG"}
1
+ {"version":3,"names":["React","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonStyles_unstable","useCustomStyleHooks_unstable","ToggleButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"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';\nimport { useCustomStyleHooks_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 const { useToggleButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,2BAA2B,QAAQ,sBAAsB;AAClE,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,8BAA8B,QAAQ,yBAAyB;AAGxE,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,YAAY,gBAA2CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGP,wBAAwB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAElDL,8BAA8B,CAACM,KAAK,CAAC;EAErC,MAAM;IAAEN,8BAA8B,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EAC1FM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOR,2BAA2B,CAACQ,KAAK,CAAC;EACzC;AACF,CAAC,CAA2C;;AAE5CJ,YAAY,CAACM,WAAW,GAAG,cAAc"}
@@ -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,"file":"ToggleButton.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"","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"]}
@@ -1,6 +1,6 @@
1
- export * from "./ToggleButton";
2
- export * from "./ToggleButton.types";
3
- export * from "./renderToggleButton";
4
- export * from "./useToggleButton";
5
- export { toggleButtonClassNames, useToggleButtonStyles_unstable } from "./useToggleButtonStyles";
1
+ export * from './ToggleButton';
2
+ export * from './ToggleButton.types';
3
+ export * from './renderToggleButton';
4
+ export * from './useToggleButton';
5
+ export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
6
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';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,sBAAsB,EAAEC,8BAA8B,QAAQ"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"]}
@@ -1,2 +1,2 @@
1
- export { renderButton_unstable as renderToggleButton_unstable } from "../Button/renderButton";
1
+ export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
2
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,"file":"renderToggleButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"]}
@@ -1,6 +1,5 @@
1
- import * as React from "react";
2
- import { useToggleState } from "../../utils/useToggleState";
3
- import { useButton_unstable } from "../Button/useButton";
1
+ import { useToggleState } from '../../utils/useToggleState';
2
+ import { useButton_unstable } from '../Button/useButton';
4
3
  /**
5
4
  * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
6
5
  * processed state.
@@ -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,"names":["useToggleState","useButton_unstable","useToggleButton_unstable","props","ref","buttonState"],"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"],"mappings":"AACA,SAASA,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,kBAAkB,QAAQ,qBAAqB;AAGxD;;;;;;AAMA,OAAO,MAAMC,wBAAwB,GAAGA,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"}
@@ -1,11 +1,11 @@
1
- import { iconFilledClassName, iconRegularClassName } from "@fluentui/react-icons";
2
- import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
3
- import { tokens } from "@fluentui/react-theme";
4
- import { shorthands, mergeClasses, __styles } from "@griffel/react";
5
- import { useButtonStyles_unstable } from "../Button/useButtonStyles";
1
+ import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
2
+ import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
3
+ import { tokens } from '@fluentui/react-theme';
4
+ import { shorthands, mergeClasses, __styles } from '@griffel/react';
5
+ import { useButtonStyles_unstable } from '../Button/useButtonStyles';
6
6
  export const toggleButtonClassNames = {
7
- root: "fui-ToggleButton",
8
- icon: "fui-ToggleButton__icon"
7
+ root: 'fui-ToggleButton',
8
+ icon: 'fui-ToggleButton__icon'
9
9
  };
10
10
  const useRootCheckedStyles = /*#__PURE__*/__styles({
11
11
  base: {
@@ -370,7 +370,7 @@ export const useToggleButtonStyles_unstable = state => {
370
370
  } = state;
371
371
  state.root.className = mergeClasses(toggleButtonClassNames.root,
372
372
  // Primary high contrast styles
373
- appearance === "primary" && primaryHighContrastStyles.base, appearance === "primary" && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,
373
+ appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,
374
374
  // Checked styles
375
375
  checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance],
376
376
  // Disabled styles
@@ -378,7 +378,7 @@ export const useToggleButtonStyles_unstable = state => {
378
378
  // User provided class name
379
379
  state.root.className);
380
380
  if (state.icon) {
381
- state.icon.className = mergeClasses(toggleButtonClassNames.icon, (appearance === "subtle" || appearance === "transparent") && iconCheckedStyles.subtleOrTransparent, state.icon.className);
381
+ state.icon.className = mergeClasses(toggleButtonClassNames.icon, (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, state.icon.className);
382
382
  }
383
383
  useButtonStyles_unstable(state);
384
384
  return state;
@@ -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","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","f","i","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.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';\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":"AAAA,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ;AAC1D,SAASC,+BAA+B,QAAQ;AAChD,SAASC,MAAM,QAAQ;AACvB,SAASC,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB;AACrD,SAASC,wBAAwB,QAAQ;AAKzC,OAAO,MAAMC,sBAAA,GAAsD;EACjEC,IAAA,EAAM;EACNC,IAAA,EAAM;AACR;AAEA,MAAMC,oBAAA,gBAAuBL,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAzD,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAG,MAAA;IAAAM,MAAA;IAAAwC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAhE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA0C,SAAA;EAAAC,MAAA;IAAAlE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA4C,WAAA;IAAAnE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAA6C,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,EAgI7B;AAEA,MAAMC,qBAAA,gBAAwBhF,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAkC,OAAA;EAAAO,OAAA;IAAA/D,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA2C,SAAA;EAAAC,MAAA;IAAAlE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA6C,WAAA;IAAAnE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAA8C,CAAA;EAAAC,CAAA;AAAA,EAkE9B;AAEA,MAAMK,oBAAA,gBAAuBjF,QAAA;EAAAkF,mBAAA;IAAAtE,MAAA;EAAA;AAAA;EAAA+D,CAAA;AAAA,EAK7B;AAEA,MAAMQ,4BAAA,gBAA+BnF,QAAA;EAAAM,IAAA;IAAA0B,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA8C,QAAA;IAAAnD,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAsB,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAe,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EAsBrC;AAEA,OAAO,MAAMQ,8BAAA,GAAkCC,KAAA,IAAgD;EAC7F,MAAMC,iBAAA,GAAoBlF,oBAAA;EAC1B,MAAMmF,kBAAA,GAAqBR,qBAAA;EAC3B,MAAMS,iBAAA,GAAoBR,oBAAA;EAC1B,MAAMS,yBAAA,GAA4BP,4BAAA;EAElC,MAAM;IAAEQ,UAAA;IAAYC,OAAA;IAASR,QAAA;IAAUS;EAAiB,CAAE,GAAGP,KAAA;EAE7DA,KAAA,CAAMnF,IAAI,CAAC2F,SAAS,GAAG/F,YAAA,CACrBG,sBAAA,CAAuBC,IAAI;EAE3B;EACAwF,UAAA,KAAe,aAAaD,yBAAA,CAA0BpF,IAAI,EAC1DqF,UAAA,KAAe,cAAcP,QAAA,IAAYS,iBAAgB,KAAMH,yBAAA,CAA0BN,QAAQ;EAEjG;EACAQ,OAAA,IAAWL,iBAAA,CAAkBjF,IAAI,EACjCsF,OAAA,IAAWL,iBAAA,CAAkBxD,YAAY,EACzC4D,UAAA,IAAcC,OAAA,IAAWL,iBAAiB,CAACI,UAAA,CAAW;EAGtD;EAAC,CAAAP,QAAA,IAAYS,iBAAgB,KAAML,kBAAA,CAAmBlF,IAAI,EAC1DqF,UAAA,KAAeP,QAAA,IAAYS,iBAAgB,KAAML,kBAAkB,CAACG,UAAA,CAAW;EAE/E;EACAL,KAAA,CAAMnF,IAAI,CAAC2F,SAAS;EAGtB,IAAIR,KAAA,CAAMlF,IAAI,EAAE;IACdkF,KAAA,CAAMlF,IAAI,CAAC0F,SAAS,GAAG/F,YAAA,CACrBG,sBAAA,CAAuBE,IAAI,EAC3B,CAACuF,UAAA,KAAe,YAAYA,UAAA,KAAe,aAAY,KAAMF,iBAAA,CAAkBP,mBAAmB,EAClGI,KAAA,CAAMlF,IAAI,CAAC0F,SAAS;EAExB;EAEA7F,wBAAA,CAAyBqF,KAAA;EAEzB,OAAOA,KAAA;AACT"}
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","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","f","i","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"sources":["../../../../../../../../../packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.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';\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,4 +1,4 @@
1
- import * as React from "react";
1
+ import * as React from 'react';
2
2
  const buttonContext = /*#__PURE__*/React.createContext(undefined);
3
3
  const buttonContextDefaultValue = {};
4
4
  /**
@@ -10,5 +10,8 @@ export const ButtonContextProvider = buttonContext.Provider;
10
10
  * @internal
11
11
  * Internal context hook used to update default values between internal components
12
12
  */
13
- export const useButtonContext = () => React.useContext(buttonContext) ?? buttonContextDefaultValue;
13
+ export const useButtonContext = () => {
14
+ var _a;
15
+ return (_a = React.useContext(buttonContext)) !== null && _a !== void 0 ? _a : buttonContextDefaultValue;
16
+ };
14
17
  //# sourceMappingURL=ButtonContext.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","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;AAE3D;;;;AAIA,OAAO,MAAMC,gBAAA,GAAmBA,CAAA,KAAMP,KAAA,CAAMQ,UAAU,CAACP,aAAA,KAAkBG,yBAAA"}
1
+ {"version":3,"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","useButtonContext","_a","useContext"],"sources":["../../../../../../../../packages/react-components/react-button/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,MAAMC,aAAa,gBAAGD,KAAK,CAACE,aAAa,CAAiCC,SAAS,CAAC;AAUpF,MAAMC,yBAAyB,GAAuB,EAAE;AAExD;;;;AAIA,OAAO,MAAMC,qBAAqB,GAAGJ,aAAa,CAACK,QAAQ;AAE3D;;;;AAIA,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAK;EAAA,IAAAC,EAAA;EAAC,QAAAA,EAAA,GAAAR,KAAK,CAACS,UAAU,CAACR,aAAa,CAAC,cAAAO,EAAA,cAAAA,EAAA,GAAIJ,yBAAyB;AAAA"}
@@ -1,2 +1,2 @@
1
- export * from "./ButtonContext";
1
+ export * from './ButtonContext';
2
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,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-button/src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './ButtonContext';\n"]}
package/lib/index.js CHANGED
@@ -1,8 +1,8 @@
1
- export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from "./Button";
2
- export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from "./CompoundButton";
3
- export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from "./MenuButton";
4
- export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from "./SplitButton";
5
- export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from "./ToggleButton";
6
- export { useToggleState } from "./utils/index";
7
- export { ButtonContextProvider, useButtonContext } from "./contexts/index";
1
+ export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from './Button';
2
+ export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from './CompoundButton';
3
+ export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './MenuButton';
4
+ export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './SplitButton';
5
+ export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './ToggleButton';
6
+ export { useToggleState } from './utils/index';
7
+ export { ButtonContextProvider, useButtonContext } from './contexts/index';
8
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,"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":["../../../../../../../packages/react-components/react-button/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,UAAU;AAEjB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,kBAAkB;AAEzB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,cAAc;AAErB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,eAAe;AAEtB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,gBAAgB;AAGvB,SAASC,cAAc,QAAQ,eAAe;AAE9C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,kBAAkB"}
@@ -1,2 +1,2 @@
1
- export * from "./useToggleState";
1
+ export * from './useToggleState';
2
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,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-button/src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './useToggleState';\n"]}
@@ -1,5 +1,5 @@
1
- import * as React from "react";
2
- import { mergeCallbacks, useControllableState, useEventCallback } from "@fluentui/react-utilities";
1
+ import * as React from 'react';
2
+ import { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';
3
3
  export function useToggleState(props, state) {
4
4
  const {
5
5
  checked,
@@ -16,7 +16,7 @@ export function useToggleState(props, state) {
16
16
  defaultState: defaultChecked,
17
17
  initialState: false
18
18
  });
19
- const isCheckboxTypeRole = role === "menuitemcheckbox" || role === "checkbox";
19
+ const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
20
20
  const onToggleClick = React.useCallback(ev => {
21
21
  if (!disabled && !disabledFocusable) {
22
22
  if (ev.defaultPrevented) {
@@ -30,7 +30,7 @@ export function useToggleState(props, state) {
30
30
  checked: checkedValue,
31
31
  root: {
32
32
  ...state.root,
33
- [isCheckboxTypeRole ? "aria-checked" : "aria-pressed"]: checkedValue,
33
+ [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
34
34
  onClick: useEventCallback(mergeCallbacks(onClick, onToggleClick))
35
35
  }
36
36
  };
@@ -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,"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":["../../../../../../../../packages/react-components/react-button/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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAIlG,OAAM,SAAUC,cAAcA,CAI5BC,KAAyB,EAAEC,KAAmB;EAC9C,MAAM;IAAEC,OAAO;IAAEC,cAAc;IAAEC,QAAQ;IAAEC;EAAiB,CAAE,GAAGL,KAAK;EACtE,MAAM;IAAEM,OAAO;IAAEC;EAAI,CAAE,GAAGN,KAAK,CAACO,IAAI;EAEpC,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGb,oBAAoB,CAAC;IAC3DI,KAAK,EAAEC,OAAO;IACdS,YAAY,EAAER,cAAc;IAC5BS,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,kBAAkB,GAAGN,IAAI,KAAK,kBAAkB,IAAIA,IAAI,KAAK,UAAU;EAE7E,MAAMO,aAAa,GAAGnB,KAAK,CAACoB,WAAW,CACrCC,EAAE,IAAG;IACH,IAAI,CAACZ,QAAQ,IAAI,CAACC,iBAAiB,EAAE;MACnC,IAAIW,EAAE,CAACC,gBAAgB,EAAE;QACvB;;MAGFP,eAAe,CAAC,CAACD,YAAY,CAAC;;EAElC,CAAC,EACD,CAACA,YAAY,EAAEL,QAAQ,EAAEC,iBAAiB,EAAEK,eAAe,CAAC,CAC7D;EAED,OAAO;IACL,GAAGT,KAAK;IAERC,OAAO,EAAEO,YAAY;IAErBD,IAAI,EAAE;MACJ,GAAGP,KAAK,CAACO,IAAI;MACb,CAACK,kBAAkB,GAAG,cAAc,GAAG,cAAc,GAAGJ,YAAY;MACpEH,OAAO,EAAER,gBAAgB,CACvBF,cAAc,CAACU,OAAyE,EAAEQ,aAAa,CAAC;;GAGvF;AACzB"}
@@ -1,9 +1,8 @@
1
1
  "use strict";
2
+
2
3
  Object.defineProperty(exports, "__esModule", {
3
- value: true
4
+ value: true
4
5
  });
5
- const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
6
- _exportStar(require("./components/Button/index"), exports);
7
- //# sourceMappingURL=Button.js.map
8
-
6
+ const tslib_1 = /*#__PURE__*/require("tslib");
7
+ tslib_1.__exportStar(require("./components/Button/index"), exports);
9
8
  //# 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,"names":["tslib_1","__exportStar","require","exports"],"sources":["../../../../../../../packages/react-components/react-button/src/Button.tsx"],"sourcesContent":["export * from './components/Button/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,+BAAAC,OAAA"}
@@ -1,9 +1,8 @@
1
1
  "use strict";
2
+
2
3
  Object.defineProperty(exports, "__esModule", {
3
- value: true
4
+ value: true
4
5
  });
5
- const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
6
- _exportStar(require("./components/CompoundButton/index"), exports);
7
- //# sourceMappingURL=CompoundButton.js.map
8
-
6
+ const tslib_1 = /*#__PURE__*/require("tslib");
7
+ tslib_1.__exportStar(require("./components/CompoundButton/index"), exports);
9
8
  //# 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,"names":["tslib_1","__exportStar","require","exports"],"sources":["../../../../../../../packages/react-components/react-button/src/CompoundButton.ts"],"sourcesContent":["export * from './components/CompoundButton/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,uCAAAC,OAAA"}
@@ -1,9 +1,8 @@
1
1
  "use strict";
2
+
2
3
  Object.defineProperty(exports, "__esModule", {
3
- value: true
4
+ value: true
4
5
  });
5
- const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
6
- _exportStar(require("./components/MenuButton/index"), exports);
7
- //# sourceMappingURL=MenuButton.js.map
8
-
6
+ const tslib_1 = /*#__PURE__*/require("tslib");
7
+ tslib_1.__exportStar(require("./components/MenuButton/index"), exports);
9
8
  //# sourceMappingURL=MenuButton.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/MenuButton.js"],"sourcesContent":["export * from \"./components/MenuButton/index\";\n//# sourceMappingURL=MenuButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,sCAAsC"}
1
+ {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../../../../../../../packages/react-components/react-button/src/MenuButton.ts"],"sourcesContent":["export * from './components/MenuButton/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,mCAAAC,OAAA"}