@fluentui/react-button 9.0.0-nightly.46b9ea7036.0 → 9.0.0-rc.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (166) hide show
  1. package/CHANGELOG.json +380 -31
  2. package/CHANGELOG.md +88 -20
  3. package/dist/react-button.d.ts +42 -34
  4. package/lib/components/Button/Button.js +7 -7
  5. package/lib/components/Button/Button.js.map +1 -1
  6. package/lib/components/Button/Button.types.d.ts +6 -6
  7. package/lib/components/Button/index.d.ts +2 -2
  8. package/lib/components/Button/index.js +1 -2
  9. package/lib/components/Button/index.js.map +1 -1
  10. package/lib/components/Button/renderButton.d.ts +1 -1
  11. package/lib/components/Button/renderButton.js +13 -9
  12. package/lib/components/Button/renderButton.js.map +1 -1
  13. package/lib/components/Button/useButton.d.ts +1 -1
  14. package/lib/components/Button/useButton.js +22 -25
  15. package/lib/components/Button/useButton.js.map +1 -1
  16. package/lib/components/Button/useButtonStyles.d.ts +2 -9
  17. package/lib/components/Button/useButtonStyles.js +118 -90
  18. package/lib/components/Button/useButtonStyles.js.map +1 -1
  19. package/lib/components/CompoundButton/CompoundButton.js +7 -7
  20. package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
  21. package/lib/components/CompoundButton/CompoundButton.types.d.ts +4 -4
  22. package/lib/components/CompoundButton/index.d.ts +1 -1
  23. package/lib/components/CompoundButton/index.js +1 -1
  24. package/lib/components/CompoundButton/index.js.map +1 -1
  25. package/lib/components/CompoundButton/renderCompoundButton.d.ts +1 -1
  26. package/lib/components/CompoundButton/renderCompoundButton.js +15 -9
  27. package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
  28. package/lib/components/CompoundButton/useCompoundButton.d.ts +1 -1
  29. package/lib/components/CompoundButton/useCompoundButton.js +9 -9
  30. package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
  31. package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +2 -1
  32. package/lib/components/CompoundButton/useCompoundButtonStyles.js +52 -48
  33. package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  34. package/lib/components/MenuButton/MenuButton.js +7 -7
  35. package/lib/components/MenuButton/MenuButton.js.map +1 -1
  36. package/lib/components/MenuButton/MenuButton.types.d.ts +3 -4
  37. package/lib/components/MenuButton/index.d.ts +1 -1
  38. package/lib/components/MenuButton/index.js +1 -1
  39. package/lib/components/MenuButton/index.js.map +1 -1
  40. package/lib/components/MenuButton/renderMenuButton.d.ts +1 -1
  41. package/lib/components/MenuButton/renderMenuButton.js +13 -9
  42. package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
  43. package/lib/components/MenuButton/useMenuButton.d.ts +1 -1
  44. package/lib/components/MenuButton/useMenuButton.js +11 -11
  45. package/lib/components/MenuButton/useMenuButton.js.map +1 -1
  46. package/lib/components/MenuButton/useMenuButtonStyles.d.ts +2 -1
  47. package/lib/components/MenuButton/useMenuButtonStyles.js +8 -6
  48. package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  49. package/lib/components/SplitButton/SplitButton.js +7 -7
  50. package/lib/components/SplitButton/SplitButton.js.map +1 -1
  51. package/lib/components/SplitButton/SplitButton.types.d.ts +6 -4
  52. package/lib/components/SplitButton/index.d.ts +1 -1
  53. package/lib/components/SplitButton/index.js +1 -1
  54. package/lib/components/SplitButton/index.js.map +1 -1
  55. package/lib/components/SplitButton/renderSplitButton.d.ts +1 -1
  56. package/lib/components/SplitButton/renderSplitButton.js +9 -7
  57. package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
  58. package/lib/components/SplitButton/useSplitButton.d.ts +1 -1
  59. package/lib/components/SplitButton/useSplitButton.js +41 -45
  60. package/lib/components/SplitButton/useSplitButton.js.map +1 -1
  61. package/lib/components/SplitButton/useSplitButtonStyles.d.ts +2 -1
  62. package/lib/components/SplitButton/useSplitButtonStyles.js +38 -34
  63. package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  64. package/lib/components/ToggleButton/ToggleButton.js +7 -7
  65. package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
  66. package/lib/components/ToggleButton/ToggleButton.types.d.ts +2 -1
  67. package/lib/components/ToggleButton/index.d.ts +1 -1
  68. package/lib/components/ToggleButton/index.js +1 -1
  69. package/lib/components/ToggleButton/index.js.map +1 -1
  70. package/lib/components/ToggleButton/renderToggleButton.d.ts +1 -1
  71. package/lib/components/ToggleButton/renderToggleButton.js +1 -1
  72. package/lib/components/ToggleButton/renderToggleButton.js.map +1 -1
  73. package/lib/components/ToggleButton/useToggleButton.d.ts +1 -1
  74. package/lib/components/ToggleButton/useToggleButton.js +32 -30
  75. package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
  76. package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +2 -1
  77. package/lib/components/ToggleButton/useToggleButtonStyles.js +47 -43
  78. package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  79. package/lib-commonjs/Button.js +1 -1
  80. package/lib-commonjs/CompoundButton.js +1 -1
  81. package/lib-commonjs/MenuButton.js +1 -1
  82. package/lib-commonjs/SplitButton.js +1 -1
  83. package/lib-commonjs/ToggleButton.js +1 -1
  84. package/lib-commonjs/components/Button/Button.js +8 -8
  85. package/lib-commonjs/components/Button/Button.js.map +1 -1
  86. package/lib-commonjs/components/Button/Button.types.d.ts +6 -6
  87. package/lib-commonjs/components/Button/index.d.ts +2 -2
  88. package/lib-commonjs/components/Button/index.js +10 -6
  89. package/lib-commonjs/components/Button/index.js.map +1 -1
  90. package/lib-commonjs/components/Button/renderButton.d.ts +1 -1
  91. package/lib-commonjs/components/Button/renderButton.js +17 -14
  92. package/lib-commonjs/components/Button/renderButton.js.map +1 -1
  93. package/lib-commonjs/components/Button/useButton.d.ts +1 -1
  94. package/lib-commonjs/components/Button/useButton.js +26 -29
  95. package/lib-commonjs/components/Button/useButton.js.map +1 -1
  96. package/lib-commonjs/components/Button/useButtonStyles.d.ts +2 -9
  97. package/lib-commonjs/components/Button/useButtonStyles.js +121 -92
  98. package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
  99. package/lib-commonjs/components/CompoundButton/CompoundButton.js +8 -8
  100. package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
  101. package/lib-commonjs/components/CompoundButton/CompoundButton.types.d.ts +4 -4
  102. package/lib-commonjs/components/CompoundButton/index.d.ts +1 -1
  103. package/lib-commonjs/components/CompoundButton/index.js +10 -4
  104. package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
  105. package/lib-commonjs/components/CompoundButton/renderCompoundButton.d.ts +1 -1
  106. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js +19 -14
  107. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
  108. package/lib-commonjs/components/CompoundButton/useCompoundButton.d.ts +1 -1
  109. package/lib-commonjs/components/CompoundButton/useCompoundButton.js +12 -13
  110. package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
  111. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +2 -1
  112. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +58 -53
  113. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  114. package/lib-commonjs/components/MenuButton/MenuButton.js +8 -8
  115. package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
  116. package/lib-commonjs/components/MenuButton/MenuButton.types.d.ts +3 -4
  117. package/lib-commonjs/components/MenuButton/index.d.ts +1 -1
  118. package/lib-commonjs/components/MenuButton/index.js +10 -4
  119. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  120. package/lib-commonjs/components/MenuButton/renderMenuButton.d.ts +1 -1
  121. package/lib-commonjs/components/MenuButton/renderMenuButton.js +17 -14
  122. package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
  123. package/lib-commonjs/components/MenuButton/useMenuButton.d.ts +1 -1
  124. package/lib-commonjs/components/MenuButton/useMenuButton.js +15 -16
  125. package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
  126. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +2 -1
  127. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +12 -9
  128. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  129. package/lib-commonjs/components/SplitButton/SplitButton.js +8 -8
  130. package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
  131. package/lib-commonjs/components/SplitButton/SplitButton.types.d.ts +6 -4
  132. package/lib-commonjs/components/SplitButton/index.d.ts +1 -1
  133. package/lib-commonjs/components/SplitButton/index.js +10 -4
  134. package/lib-commonjs/components/SplitButton/index.js.map +1 -1
  135. package/lib-commonjs/components/SplitButton/renderSplitButton.d.ts +1 -1
  136. package/lib-commonjs/components/SplitButton/renderSplitButton.js +13 -12
  137. package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
  138. package/lib-commonjs/components/SplitButton/useSplitButton.d.ts +1 -1
  139. package/lib-commonjs/components/SplitButton/useSplitButton.js +46 -51
  140. package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
  141. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +2 -1
  142. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +44 -39
  143. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  144. package/lib-commonjs/components/ToggleButton/ToggleButton.js +8 -8
  145. package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
  146. package/lib-commonjs/components/ToggleButton/ToggleButton.types.d.ts +2 -1
  147. package/lib-commonjs/components/ToggleButton/index.d.ts +1 -1
  148. package/lib-commonjs/components/ToggleButton/index.js +10 -4
  149. package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
  150. package/lib-commonjs/components/ToggleButton/renderToggleButton.d.ts +1 -1
  151. package/lib-commonjs/components/ToggleButton/renderToggleButton.js +3 -3
  152. package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -1
  153. package/lib-commonjs/components/ToggleButton/useToggleButton.d.ts +1 -1
  154. package/lib-commonjs/components/ToggleButton/useToggleButton.js +36 -35
  155. package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
  156. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +2 -1
  157. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +51 -45
  158. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  159. package/lib-commonjs/index.js +1 -1
  160. package/package.json +12 -15
  161. package/lib/common/isConformant.d.ts +0 -4
  162. package/lib/common/isConformant.js +0 -13
  163. package/lib/common/isConformant.js.map +0 -1
  164. package/lib-commonjs/common/isConformant.d.ts +0 -4
  165. package/lib-commonjs/common/isConformant.js +0 -24
  166. package/lib-commonjs/common/isConformant.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAwB;AACjD,MAAA,EAAA,GAAuB,QAAQ,CAAmB,KAAnB,EAA0B,CAAC,MAAD,EAAS,YAAT,EAAuB,qBAAvB,CAA1B,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,mBAAf,CAA1B,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CAFF,CADF;AAMD,CATM","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,mBAAN,iBAA6B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,EAAA,GAAK,SAAS,CAAC;AAAf,GAA1B,CADhC,EAEG,KAAK,CAAC,UAAN,iBAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CAFvB,CADF;AAMD,CATM","sourceRoot":""}
@@ -5,4 +5,4 @@ import type { SplitButtonProps, SplitButtonState } from './SplitButton.types';
5
5
  * @param props - User provided props to the SplitButton component.
6
6
  * @param ref - User provided ref to be passed to the SplitButton component.
7
7
  */
8
- export declare const useSplitButton: (props: SplitButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;
8
+ export declare const useSplitButton_unstable: (props: SplitButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;
@@ -1,4 +1,3 @@
1
- import { __assign } from "tslib";
2
1
  import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
3
2
  import { Button } from '../Button/Button';
4
3
  import { MenuButton } from '../MenuButton/MenuButton';
@@ -8,64 +7,61 @@ import { MenuButton } from '../MenuButton/MenuButton';
8
7
  * @param ref - User provided ref to be passed to the SplitButton component.
9
8
  */
10
9
 
11
- export var useSplitButton = function (props, ref) {
12
- var appearance = props.appearance,
13
- _a = props.block,
14
- block = _a === void 0 ? false : _a,
15
- children = props.children,
16
- _b = props.disabled,
17
- disabled = _b === void 0 ? false : _b,
18
- _c = props.disabledFocusable,
19
- disabledFocusable = _c === void 0 ? false : _c,
20
- icon = props.icon,
21
- _d = props.iconPosition,
22
- iconPosition = _d === void 0 ? 'before' : _d,
23
- menuButton = props.menuButton,
24
- primaryActionButton = props.primaryActionButton,
25
- _e = props.shape,
26
- shape = _e === void 0 ? 'rounded' : _e,
27
- _f = props.size,
28
- size = _f === void 0 ? 'medium' : _f;
29
- var menuButtonShorthand = resolveShorthand(menuButton, {
10
+ export const useSplitButton_unstable = (props, ref) => {
11
+ const {
12
+ appearance,
13
+ block = false,
14
+ children,
15
+ disabled = false,
16
+ disabledFocusable = false,
17
+ icon,
18
+ iconPosition = 'before',
19
+ menuButton,
20
+ primaryActionButton,
21
+ shape = 'rounded',
22
+ size = 'medium'
23
+ } = props;
24
+ const menuButtonShorthand = resolveShorthand(menuButton, {
30
25
  defaultProps: {
31
- appearance: appearance,
32
- disabled: disabled,
33
- disabledFocusable: disabledFocusable,
34
- shape: shape,
35
- size: size
26
+ appearance,
27
+ disabled,
28
+ disabledFocusable,
29
+ shape,
30
+ size
36
31
  }
37
32
  });
38
- var primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
33
+ const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
39
34
  defaultProps: {
40
- appearance: appearance,
41
- block: block,
42
- children: children,
43
- disabled: disabled,
44
- disabledFocusable: disabledFocusable,
45
- icon: icon,
46
- iconPosition: iconPosition,
47
- shape: shape,
48
- size: size
35
+ appearance,
36
+ block,
37
+ children,
38
+ disabled,
39
+ disabledFocusable,
40
+ icon,
41
+ iconPosition,
42
+ shape,
43
+ size
49
44
  }
50
45
  });
51
46
  return {
52
47
  // Props passed at the top-level
53
- appearance: appearance,
54
- block: block,
55
- disabled: disabled,
56
- disabledFocusable: disabledFocusable,
57
- iconPosition: iconPosition,
58
- shape: shape,
59
- size: size,
48
+ appearance,
49
+ block,
50
+ disabled,
51
+ disabledFocusable,
52
+ iconPosition,
53
+ shape,
54
+ size,
60
55
  // Slots definition
61
56
  components: {
62
57
  root: 'div',
63
58
  menuButton: MenuButton,
64
59
  primaryActionButton: Button
65
60
  },
66
- root: getNativeElementProps('div', __assign({
67
- ref: ref
68
- }, props)),
61
+ root: getNativeElementProps('div', {
62
+ ref,
63
+ ...props
64
+ }),
69
65
  menuButton: menuButtonShorthand,
70
66
  primaryActionButton: primaryActionButtonShorthand
71
67
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,IAAM,cAAc,GAAG,UAC5B,KAD4B,EAE5B,GAF4B,EAEyB;AAGnD,MAAA,UAAU,GAWR,KAAK,CAXG,UAAV;AAAA,MACA,EAAA,GAUE,KAAK,CAVM,KADb;AAAA,MACA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EADb;AAAA,MAEA,QAAQ,GASN,KAAK,CATC,QAFR;AAAA,MAGA,EAAA,GAQE,KAAK,CARS,QAHhB;AAAA,MAGA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAHhB;AAAA,MAIA,EAAA,GAOE,KAAK,CAPkB,iBAJzB;AAAA,MAIA,iBAAiB,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAJzB;AAAA,MAKA,IAAI,GAMF,KAAK,CANH,IALJ;AAAA,MAMA,EAAA,GAKE,KAAK,CALgB,YANvB;AAAA,MAMA,YAAY,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EANvB;AAAA,MAOA,UAAU,GAIR,KAAK,CAJG,UAPV;AAAA,MAQA,mBAAmB,GAGjB,KAAK,CAHY,mBARnB;AAAA,MASA,EAAA,GAEE,KAAK,CAFU,KATjB;AAAA,MASA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,SAAH,GAAY,EATjB;AAAA,MAUA,EAAA,GACE,KAAK,CADQ,IAVf;AAAA,MAUA,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAVf;AAYF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UAAU,EAAA,UADE;AAEZ,MAAA,QAAQ,EAAA,QAFI;AAGZ,MAAA,iBAAiB,EAAA,iBAHL;AAIZ,MAAA,KAAK,EAAA,KAJO;AAKZ,MAAA,IAAI,EAAA;AALQ;AADyC,GAAb,CAA5C;AASA,MAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UAAU,EAAA,UADE;AAEZ,MAAA,KAAK,EAAA,KAFO;AAGZ,MAAA,QAAQ,EAAA,QAHI;AAIZ,MAAA,QAAQ,EAAA,QAJI;AAKZ,MAAA,iBAAiB,EAAA,iBALL;AAMZ,MAAA,IAAI,EAAA,IANQ;AAOZ,MAAA,YAAY,EAAA,YAPA;AAQZ,MAAA,KAAK,EAAA,KARO;AASZ,MAAA,IAAI,EAAA;AATQ;AAD2D,GAAtB,CAArD;AAcA,SAAO;AACL;AACA,IAAA,UAAU,EAAA,UAFL;AAGL,IAAA,KAAK,EAAA,KAHA;AAIL,IAAA,QAAQ,EAAA,QAJH;AAKL,IAAA,iBAAiB,EAAA,iBALZ;AAML,IAAA,YAAY,EAAA,YANP;AAOL,IAAA,KAAK,EAAA,KAPA;AAQL,IAAA,IAAI,EAAA,IARC;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,UAFF;AAGV,MAAA,mBAAmB,EAAE;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAM,QAAA,CAAA;AAAI,MAAA,GAAG,EAAA;AAAP,KAAA,EAAY,KAAZ,CAAN,CAjBtB;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CA7DM","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,KAAK,GAAG,KAFJ;AAGJ,IAAA,QAHI;AAIJ,IAAA,QAAQ,GAAG,KAJP;AAKJ,IAAA,iBAAiB,GAAG,KALhB;AAMJ,IAAA,IANI;AAOJ,IAAA,YAAY,GAAG,QAPX;AAQJ,IAAA,UARI;AASJ,IAAA,mBATI;AAUJ,IAAA,KAAK,GAAG,SAVJ;AAWJ,IAAA,IAAI,GAAG;AAXH,MAYF,KAZJ;AAaA,QAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,KAJY;AAKZ,MAAA;AALY;AADyC,GAAb,CAA5C;AASA,QAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,KAFY;AAGZ,MAAA,QAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,iBALY;AAMZ,MAAA,IANY;AAOZ,MAAA,YAPY;AAQZ,MAAA,KARY;AASZ,MAAA;AATY;AAD2D,GAAtB,CAArD;AAcA,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,UAFF;AAGV,MAAA,mBAAmB,EAAE;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAR,CAjBtB;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CA7DM","sourceRoot":""}
@@ -1,2 +1,3 @@
1
1
  import type { SplitButtonState } from './SplitButton.types';
2
- export declare const useSplitButtonStyles: (state: SplitButtonState) => SplitButtonState;
2
+ export declare const splitButtonClassName = "fui-SplitButton";
3
+ export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;
@@ -1,11 +1,13 @@
1
- import { __styles, mergeClasses } from '@fluentui/react-make-styles';
1
+ import { __styles, mergeClasses } from '@griffel/react';
2
2
  import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
3
- var SplitButtonClassNames = {
4
- primaryActionButton: 'SplitButton-primaryActionButton',
5
- menuButton: 'SplitButton-menuButton'
3
+ import { tokens } from '@fluentui/react-theme';
4
+ export const splitButtonClassName = 'fui-SplitButton';
5
+ const SplitButtonClassNames = {
6
+ primaryActionButton: `${splitButtonClassName}-primaryActionButton`,
7
+ menuButton: `${splitButtonClassName}-menuButton`
6
8
  };
7
9
 
8
- var useFocusStyles = /*#__PURE__*/__styles({
10
+ const useFocusStyles = /*#__PURE__*/__styles({
9
11
  "primaryActionButton": {
10
12
  "B486eqv": "f2hkw1w",
11
13
  "Bmrpcm6": ["fub8a6s", "f1g41uvt"],
@@ -22,59 +24,61 @@ var useFocusStyles = /*#__PURE__*/__styles({
22
24
  "d": ["[data-keyboard-nav] .fub8a6s:focus{border-top-right-radius:0;}", "[data-keyboard-nav] .f1g41uvt:focus{border-top-left-radius:0;}", "[data-keyboard-nav] .f58hr3h:focus{border-bottom-right-radius:0;}", "[data-keyboard-nav] .f1u1mnrj:focus{border-bottom-left-radius:0;}", "[data-keyboard-nav] .fy9hclh:focus{border-left-width:0;}", "[data-keyboard-nav] .f549e1y:focus{border-right-width:0;}"]
23
25
  });
24
26
 
25
- var useRootStyles = /*#__PURE__*/__styles({
27
+ const useRootStyles = /*#__PURE__*/__styles({
26
28
  "base": {
27
29
  "mc9l5x": "ftuwxu6",
28
30
  "Brf1p80": "fsxf2b5",
29
31
  "qhf8xq": "f10pi13n",
30
32
  "ha4doy": "fmrv4ls",
31
- "ipgm0c": ["f178uykt", "f90yzzo"],
32
- "B6cuk21": ["f1bxd3c5", "f1ekv84t"],
33
- "bajz6s": ["fnux5s6", "f5nfhee"],
34
- "Bzqncq": ["f19wc9x7", "f5bevrs"],
35
- "Flt4rd": ["f1wefiyg", "f1leuqsa"]
33
+ "mfjwoh": ["fwj9yvy", "f1lzjiju"],
34
+ "ibxugx": ["f1a35zaw", "f1l6wyf7"],
35
+ "Bqvcgfq": ["f104opbk", "f147sopj"],
36
+ "Baxitl6": ["fxs6g7p", "f1moly3t"],
37
+ "zkjfwm": ["f1m1y7kk", "ff82swa"]
36
38
  },
37
39
  "block": {
38
40
  "a9b677": "fly5x3f"
39
41
  },
40
42
  "outline": {},
41
43
  "primary": {
42
- "Bxrr62k": ["f8z1slf", "f1qj10op"],
43
- "wqijrc": ["fmrqvvu", "fu0z9tm"],
44
- "Bsk9mq6": ["f1naws84", "f1ry7auu"]
44
+ "Bt6mj9": ["fptrtw7", "f51449u"],
45
+ "xhdd7j": ["f1n4yg8a", "fbebbjo"],
46
+ "Jxu9b0": ["fnmoi2n", "f1l3povx"]
45
47
  },
46
48
  "subtle": {
47
- "Bxrr62k": ["f1xobncs", "f1xirlzn"],
48
- "wqijrc": ["f1hmsn3f", "fi0rm9z"],
49
- "Bsk9mq6": ["fam4u78", "f1hqq1j6"]
49
+ "Bt6mj9": ["fh2ci0", "f1us00qf"],
50
+ "xhdd7j": ["fj8butq", "fkv8iz"],
51
+ "Jxu9b0": ["fjmcta", "fm99moz"]
50
52
  },
51
53
  "transparent": {
52
- "Bxrr62k": ["f1xobncs", "f1xirlzn"],
53
- "wqijrc": ["f1hmsn3f", "fi0rm9z"],
54
- "Bsk9mq6": ["fam4u78", "f1hqq1j6"]
54
+ "Bt6mj9": ["fh2ci0", "f1us00qf"],
55
+ "xhdd7j": ["fj8butq", "fkv8iz"],
56
+ "Jxu9b0": ["fjmcta", "fm99moz"]
55
57
  },
56
58
  "circular": {},
57
59
  "rounded": {},
58
60
  "square": {},
59
61
  "disabled": {
60
- "Bxrr62k": ["f11wzqjl", "f1a5dzic"],
61
- "wqijrc": ["fhk4lgh", "f1r7ztp2"],
62
- "Bsk9mq6": ["f1ot7jx6", "f1qvd61g"]
62
+ "Bt6mj9": ["f1gu8nb8", "f7r8m4m"],
63
+ "xhdd7j": ["f3cl9o2", "f12vilfs"],
64
+ "Jxu9b0": ["f1lpnjjp", "f8nirj0"]
63
65
  }
64
66
  }, {
65
- "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f178uykt .SplitButton-primaryActionButton{border-top-right-radius:0;}", ".f90yzzo .SplitButton-primaryActionButton{border-top-left-radius:0;}", ".f1bxd3c5 .SplitButton-primaryActionButton{border-bottom-right-radius:0;}", ".f1ekv84t .SplitButton-primaryActionButton{border-bottom-left-radius:0;}", ".fnux5s6 .SplitButton-menuButton{border-left-width:0;}", ".f5nfhee .SplitButton-menuButton{border-right-width:0;}", ".f19wc9x7 .SplitButton-menuButton{border-top-left-radius:0;}", ".f5bevrs .SplitButton-menuButton{border-top-right-radius:0;}", ".f1wefiyg .SplitButton-menuButton{border-bottom-left-radius:0;}", ".f1leuqsa .SplitButton-menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".f8z1slf .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1qj10op .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1xobncs .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1xirlzn .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f11wzqjl .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1a5dzic .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
66
- "h": [".fmrqvvu:hover .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fu0z9tm:hover .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1hmsn3f:hover .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fi0rm9z:hover .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".fhk4lgh:hover .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1r7ztp2:hover .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
67
- "a": [".f1naws84:active .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1ry7auu:active .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fam4u78:active .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1hqq1j6:active .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1ot7jx6:active .SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1qvd61g:active .SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"]
67
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".fwj9yvy .fui-SplitButton-primaryActionButton{border-top-right-radius:0;}", ".f1lzjiju .fui-SplitButton-primaryActionButton{border-top-left-radius:0;}", ".f1a35zaw .fui-SplitButton-primaryActionButton{border-bottom-right-radius:0;}", ".f1l6wyf7 .fui-SplitButton-primaryActionButton{border-bottom-left-radius:0;}", ".f104opbk .fui-SplitButton-menuButton{border-left-width:0;}", ".f147sopj .fui-SplitButton-menuButton{border-right-width:0;}", ".fxs6g7p .fui-SplitButton-menuButton{border-top-left-radius:0;}", ".f1moly3t .fui-SplitButton-menuButton{border-top-right-radius:0;}", ".f1m1y7kk .fui-SplitButton-menuButton{border-bottom-left-radius:0;}", ".ff82swa .fui-SplitButton-menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".fptrtw7 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f51449u .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fh2ci0 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1us00qf .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1gu8nb8 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f7r8m4m .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
68
+ "h": [".f1n4yg8a:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fbebbjo:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fj8butq:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fkv8iz:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f3cl9o2:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f12vilfs:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
69
+ "a": [".fnmoi2n:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1l3povx:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fjmcta:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fm99moz:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1lpnjjp:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f8nirj0:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"]
68
70
  });
69
71
 
70
- export var useSplitButtonStyles = function (state) {
71
- var rootStyles = useRootStyles();
72
- var focusStyles = useFocusStyles();
73
- var appearance = state.appearance,
74
- block = state.block,
75
- disabled = state.disabled,
76
- disabledFocusable = state.disabledFocusable;
77
- state.root.className = mergeClasses(rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, state.root.className);
72
+ export const useSplitButtonStyles_unstable = state => {
73
+ const rootStyles = useRootStyles();
74
+ const focusStyles = useFocusStyles();
75
+ const {
76
+ appearance,
77
+ block,
78
+ disabled,
79
+ disabledFocusable
80
+ } = state;
81
+ state.root.className = mergeClasses(splitButtonClassName, rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, state.root.className);
78
82
 
79
83
  if (state.menuButton) {
80
84
  state.menuButton.className = mergeClasses(SplitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AAGA,IAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,iCADO;AAE5B,EAAA,UAAU,EAAE;AAFgB,CAA9B;;AAKA,IAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,IAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgHA,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAAwB;AAC1D,MAAM,UAAU,GAAG,aAAa,EAAhC;AACA,MAAM,WAAW,GAAG,cAAc,EAAlC;AAEQ,MAAA,UAAU,GAAyC,KAAK,CAA9C,UAAV;AAAA,MAAY,KAAK,GAAkC,KAAK,CAAvC,KAAjB;AAAA,MAAmB,QAAQ,GAAwB,KAAK,CAA7B,QAA3B;AAAA,MAA6B,iBAAiB,GAAK,KAAK,CAAV,iBAA9C;AAER,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,UAAU,CAAC,IADsB,EAEjC,KAAK,IAAI,UAAU,CAAC,KAFa,EAGjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAHS,EAIjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QAJb,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;AAQA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CA/BM","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP,MAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,GAAG,oBAAoB,sBADhB;AAE5B,EAAA,UAAU,EAAE,GAAG,oBAAoB;AAFP,CAA9B;;AAKA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgHA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,KAAd;AAAqB,IAAA,QAArB;AAA+B,IAAA;AAA/B,MAAqD,KAA3D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBADiC,EAEjC,UAAU,CAAC,IAFsB,EAGjC,KAAK,IAAI,UAAU,CAAC,KAHa,EAIjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAJS,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CAhCM","sourceRoot":""}
@@ -1,15 +1,15 @@
1
1
  import * as React from 'react';
2
- import { renderToggleButton } from './renderToggleButton';
3
- import { useToggleButton } from './useToggleButton';
4
- import { useToggleButtonStyles } from './useToggleButtonStyles';
2
+ import { renderToggleButton_unstable } from './renderToggleButton';
3
+ import { useToggleButton_unstable } from './useToggleButton';
4
+ import { useToggleButtonStyles_unstable } from './useToggleButtonStyles';
5
5
  /**
6
6
  * ToggleButtons are buttons that toggle between two defined states when triggered.
7
7
  */
8
8
 
9
- export var ToggleButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
10
- var state = useToggleButton(props, ref);
11
- useToggleButtonStyles(state);
12
- return renderToggleButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
9
+ export const ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
10
+ const state = useToggleButton_unstable(props, ref);
11
+ useToggleButtonStyles_unstable(state);
12
+ return renderToggleButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
13
13
  });
14
14
  ToggleButton.displayName = 'ToggleButton';
15
15
  //# sourceMappingURL=ToggleButton.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AACA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,qBAAT,QAAsC,yBAAtC;AAIA;;AAEG;;AACH,OAAO,IAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC9F,MAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;AAEA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AAEA,SAAO,kBAAkB,CAAC,KAAD,CAAzB,CAL8F,CAM9F;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AAEA,EAAA,8BAA8B,CAAC,KAAD,CAA9B;AAEA,SAAO,2BAA2B,CAAC,KAAD,CAAlC,CALkG,CAMlG;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourceRoot":""}
@@ -1,5 +1,5 @@
1
1
  import type { ButtonProps, ButtonState } from '../Button/Button.types';
2
- export declare type ToggleButtonCommons = {
2
+ declare type ToggleButtonCommons = {
3
3
  /**
4
4
  * Defines the controlled checked state of the `ToggleButton`.
5
5
  * If passed, `ToggleButton` ignores the `defaultChecked` property.
@@ -17,3 +17,4 @@ export declare type ToggleButtonProps = ButtonProps & Partial<ToggleButtonCommon
17
17
  defaultChecked?: boolean;
18
18
  };
19
19
  export declare type ToggleButtonState = ButtonState & ToggleButtonCommons;
20
+ export {};
@@ -2,4 +2,4 @@ export * from './ToggleButton';
2
2
  export * from './ToggleButton.types';
3
3
  export * from './renderToggleButton';
4
4
  export * from './useToggleButton';
5
- export { useToggleButtonStyles } from './useToggleButtonStyles';
5
+ export { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
@@ -2,5 +2,5 @@ export * from './ToggleButton';
2
2
  export * from './ToggleButton.types';
3
3
  export * from './renderToggleButton';
4
4
  export * from './useToggleButton';
5
- export { useToggleButtonStyles } from './useToggleButtonStyles';
5
+ export { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
6
6
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../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,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../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,qBAAqB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC"}
@@ -1 +1 @@
1
- export { renderButton as renderToggleButton } from '../Button/renderButton';
1
+ export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
@@ -1,2 +1,2 @@
1
- export { renderButton as renderToggleButton } from '../Button/renderButton';
1
+ export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
2
2
  //# sourceMappingURL=renderToggleButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"renderToggleButton.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,MAAM,wBAAwB,CAAC"}
1
+ {"version":3,"file":"renderToggleButton.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAC"}
@@ -6,4 +6,4 @@ import type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types'
6
6
  * @param props - User provided props to the ToggleButton component.
7
7
  * @param ref - User provided ref to be passed to the ToggleButton component.
8
8
  */
9
- export declare const useToggleButton: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
9
+ export declare const useToggleButton_unstable: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
@@ -1,7 +1,6 @@
1
- import { __assign, __rest } from "tslib";
2
1
  import { useControllableState } from '@fluentui/react-utilities';
3
2
  import * as React from 'react';
4
- import { useButton } from '../Button/useButton';
3
+ import { useButton_unstable } from '../Button/useButton';
5
4
  /**
6
5
  * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
7
6
  * processed state.
@@ -9,42 +8,45 @@ import { useButton } from '../Button/useButton';
9
8
  * @param ref - User provided ref to be passed to the ToggleButton component.
10
9
  */
11
10
 
12
- export var useToggleButton = function (_a, ref) {
13
- var _b;
14
-
15
- var checked = _a.checked,
16
- defaultChecked = _a.defaultChecked,
17
- props = __rest(_a, ["checked", "defaultChecked"]);
18
-
19
- var buttonState = useButton(props, ref);
20
- var _c = buttonState.root,
21
- role = _c.role,
22
- onClick = _c.onClick;
23
-
24
- var _d = useControllableState({
11
+ export const useToggleButton_unstable = ({
12
+ checked,
13
+ defaultChecked,
14
+ ...props
15
+ }, ref) => {
16
+ const {
17
+ disabled,
18
+ disabledFocusable
19
+ } = props;
20
+ const buttonState = useButton_unstable(props, ref);
21
+ const {
22
+ role,
23
+ onClick
24
+ } = buttonState.root;
25
+ const [checkedValue, setCheckedValue] = useControllableState({
25
26
  state: checked,
26
27
  defaultState: defaultChecked,
27
28
  initialState: false
28
- }),
29
- checkedValue = _d[0],
30
- setCheckedValue = _d[1];
31
-
32
- var isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
33
- return __assign(__assign({}, buttonState), {
29
+ });
30
+ const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
31
+ return { // Button state
32
+ ...buttonState,
34
33
  // State calculated from a set of props
35
34
  checked: checkedValue,
36
35
  // Slots definition
37
- root: __assign(__assign({}, buttonState.root), (_b = {}, _b[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = !!checkedValue, _b.onClick = React.useCallback(function (ev) {
38
- if (onClick) {
39
- onClick(ev);
36
+ root: { ...buttonState.root,
37
+ [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: !disabled && !disabledFocusable && checkedValue,
38
+ onClick: React.useCallback(ev => {
39
+ if (onClick) {
40
+ onClick(ev);
40
41
 
41
- if (ev.defaultPrevented) {
42
- return;
42
+ if (ev.defaultPrevented) {
43
+ return;
44
+ }
43
45
  }
44
- }
45
46
 
46
- setCheckedValue(!checkedValue);
47
- }, [checkedValue, setCheckedValue, onClick]), _b))
48
- });
47
+ setCheckedValue(!checkedValue);
48
+ }, [checkedValue, setCheckedValue, onClick])
49
+ }
50
+ };
49
51
  };
50
52
  //# sourceMappingURL=useToggleButton.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":";AAAA,SAAS,oBAAT,QAAqC,2BAArC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,qBAA1B;AAGA;;;;;AAKG;;AACH,OAAO,IAAM,eAAe,GAAG,UAC7B,EAD6B,EAE7B,GAF6B,EAEwB;;;AADnD,MAAA,OAAO,GAAA,EAAA,CAAA,OAAP;AAAA,MAAS,cAAc,GAAA,EAAA,CAAA,cAAvB;AAAA,MAA4B,KAAK,GAAA,MAAA,CAAA,EAAA,EAAnC,CAAA,SAAA,EAAA,gBAAA,CAAmC,CAAjC;;AAGF,MAAM,WAAW,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAA7B;AACM,MAAA,EAAA,GAAoB,WAAW,CAAC,IAAhC;AAAA,MAAE,IAAI,GAAA,EAAA,CAAA,IAAN;AAAA,MAAQ,OAAO,GAAA,EAAA,CAAA,OAAf;;AAEA,MAAA,EAAA,GAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,OADoD;AAE3D,IAAA,YAAY,EAAE,cAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAAtD;AAAA,MAAC,YAAY,GAAA,EAAA,CAAA,CAAA,CAAb;AAAA,MAAe,eAAe,GAAA,EAAA,CAAA,CAAA,CAA9B;;AAMN,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,SAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAEK,WAFL,CAAA,EAEgB;AAEd;AACA,IAAA,OAAO,EAAE,YAHK;AAKd;AACA,IAAA,IAAI,EAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EACC,WAAW,CAAC,IADb,CAAA,GACiB,EAAA,GAAA,EAAA,EAAA,EAAA,CAClB,kBAAkB,GAAG,cAAH,GAAoB,cADpB,CAAA,GACqC,CAAC,CAAC,YADvC,EAEnB,EAAA,CAAA,OAAA,GAAS,KAAK,CAAC,WAAN,CACP,UAAA,EAAA,EAAE;AACA,UAAI,OAAJ,EAAa;AACX,QAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,YAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,MAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,KAXM,EAYP,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZO,CAFU,EAelB,EAhBC;AANU,GAFhB,CAAA;AA2BD,CA1CM","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,qBAAnC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CACtC;AAAE,EAAA,OAAF;AAAW,EAAA,cAAX;AAA2B,KAAG;AAA9B,CADsC,EAEtC,GAFsC,KAGjB;AACrB,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAAkC,KAAxC;AACA,QAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAoB,WAAW,CAAC,IAAtC;AAEA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,OADoD;AAE3D,IAAA,YAAY,EAAE,cAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAA5D;AAMA,QAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,SAAO,EACL;AACA,OAAG,WAFE;AAIL;AACA,IAAA,OAAO,EAAE,YALJ;AAOL;AACA,IAAA,IAAI,EAAE,EACJ,GAAG,WAAW,CAAC,IADX;AAEJ,OAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,GAAwD,CAAC,QAAD,IAAa,CAAC,iBAAd,IAAmC,YAFvF;AAGJ,MAAA,OAAO,EAAE,KAAK,CAAC,WAAN,CACP,EAAE,IAAG;AACH,YAAI,OAAJ,EAAa;AACX,UAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,cAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,QAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,OAXM,EAYP,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZO;AAHL;AARD,GAAP;AA2BD,CA3CM","sourceRoot":""}
@@ -1,2 +1,3 @@
1
1
  import type { ToggleButtonState } from './ToggleButton.types';
2
- export declare const useToggleButtonStyles: (state: ToggleButtonState) => ToggleButtonState;
2
+ export declare const toggleButtonClassName = "fui-ToggleButton";
3
+ export declare const useToggleButtonStyles_unstable: (state: ToggleButtonState) => ToggleButtonState;