@fluentui/react-button 0.0.0-nightlyf3ce1fbe1d20211110.1 → 0.0.0-nightlyfc5cfdc52420220215.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (160) hide show
  1. package/CHANGELOG.json +331 -26
  2. package/CHANGELOG.md +79 -14
  3. package/dist/react-button.d.ts +31 -33
  4. package/lib/components/Button/Button.js +6 -6
  5. package/lib/components/Button/Button.js.map +1 -1
  6. package/lib/components/Button/Button.types.d.ts +5 -5
  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 +6 -3
  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 +3 -2
  15. package/lib/components/Button/useButton.js.map +1 -1
  16. package/lib/components/Button/useButtonStyles.d.ts +1 -9
  17. package/lib/components/Button/useButtonStyles.js +97 -72
  18. package/lib/components/Button/useButtonStyles.js.map +1 -1
  19. package/lib/components/CompoundButton/CompoundButton.js +6 -6
  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 +8 -3
  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 +3 -3
  30. package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
  31. package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +1 -1
  32. package/lib/components/CompoundButton/useCompoundButtonStyles.js +14 -13
  33. package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  34. package/lib/components/MenuButton/MenuButton.js +6 -6
  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 +6 -3
  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 +5 -5
  45. package/lib/components/MenuButton/useMenuButton.js.map +1 -1
  46. package/lib/components/MenuButton/useMenuButtonStyles.d.ts +1 -1
  47. package/lib/components/MenuButton/useMenuButtonStyles.js +4 -4
  48. package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  49. package/lib/components/SplitButton/SplitButton.js +6 -6
  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 +6 -3
  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 +13 -3
  60. package/lib/components/SplitButton/useSplitButton.js.map +1 -1
  61. package/lib/components/SplitButton/useSplitButtonStyles.d.ts +1 -1
  62. package/lib/components/SplitButton/useSplitButtonStyles.js +3 -2
  63. package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  64. package/lib/components/ToggleButton/ToggleButton.js +6 -6
  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 +8 -4
  75. package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
  76. package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +1 -1
  77. package/lib/components/ToggleButton/useToggleButtonStyles.js +35 -34
  78. package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  79. package/lib-commonjs/components/Button/Button.js +3 -3
  80. package/lib-commonjs/components/Button/Button.js.map +1 -1
  81. package/lib-commonjs/components/Button/Button.types.d.ts +5 -5
  82. package/lib-commonjs/components/Button/index.d.ts +2 -2
  83. package/lib-commonjs/components/Button/index.js +3 -5
  84. package/lib-commonjs/components/Button/index.js.map +1 -1
  85. package/lib-commonjs/components/Button/renderButton.d.ts +1 -1
  86. package/lib-commonjs/components/Button/renderButton.js +8 -5
  87. package/lib-commonjs/components/Button/renderButton.js.map +1 -1
  88. package/lib-commonjs/components/Button/useButton.d.ts +1 -1
  89. package/lib-commonjs/components/Button/useButton.js +5 -4
  90. package/lib-commonjs/components/Button/useButton.js.map +1 -1
  91. package/lib-commonjs/components/Button/useButtonStyles.d.ts +1 -9
  92. package/lib-commonjs/components/Button/useButtonStyles.js +106 -80
  93. package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
  94. package/lib-commonjs/components/CompoundButton/CompoundButton.js +3 -3
  95. package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
  96. package/lib-commonjs/components/CompoundButton/CompoundButton.types.d.ts +4 -4
  97. package/lib-commonjs/components/CompoundButton/index.d.ts +1 -1
  98. package/lib-commonjs/components/CompoundButton/index.js +3 -3
  99. package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
  100. package/lib-commonjs/components/CompoundButton/renderCompoundButton.d.ts +1 -1
  101. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js +10 -5
  102. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
  103. package/lib-commonjs/components/CompoundButton/useCompoundButton.d.ts +1 -1
  104. package/lib-commonjs/components/CompoundButton/useCompoundButton.js +4 -4
  105. package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
  106. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +1 -1
  107. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +25 -23
  108. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  109. package/lib-commonjs/components/MenuButton/MenuButton.js +3 -3
  110. package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
  111. package/lib-commonjs/components/MenuButton/MenuButton.types.d.ts +3 -4
  112. package/lib-commonjs/components/MenuButton/index.d.ts +1 -1
  113. package/lib-commonjs/components/MenuButton/index.js +3 -3
  114. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  115. package/lib-commonjs/components/MenuButton/renderMenuButton.d.ts +1 -1
  116. package/lib-commonjs/components/MenuButton/renderMenuButton.js +8 -5
  117. package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
  118. package/lib-commonjs/components/MenuButton/useMenuButton.d.ts +1 -1
  119. package/lib-commonjs/components/MenuButton/useMenuButton.js +5 -5
  120. package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
  121. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +1 -1
  122. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +8 -8
  123. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  124. package/lib-commonjs/components/SplitButton/SplitButton.js +3 -3
  125. package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
  126. package/lib-commonjs/components/SplitButton/SplitButton.types.d.ts +6 -4
  127. package/lib-commonjs/components/SplitButton/index.d.ts +1 -1
  128. package/lib-commonjs/components/SplitButton/index.js +3 -3
  129. package/lib-commonjs/components/SplitButton/index.js.map +1 -1
  130. package/lib-commonjs/components/SplitButton/renderSplitButton.d.ts +1 -1
  131. package/lib-commonjs/components/SplitButton/renderSplitButton.js +8 -5
  132. package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
  133. package/lib-commonjs/components/SplitButton/useSplitButton.d.ts +1 -1
  134. package/lib-commonjs/components/SplitButton/useSplitButton.js +14 -4
  135. package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
  136. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +1 -1
  137. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +11 -9
  138. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  139. package/lib-commonjs/components/ToggleButton/ToggleButton.js +3 -3
  140. package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
  141. package/lib-commonjs/components/ToggleButton/ToggleButton.types.d.ts +2 -1
  142. package/lib-commonjs/components/ToggleButton/index.d.ts +1 -1
  143. package/lib-commonjs/components/ToggleButton/index.js +3 -3
  144. package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
  145. package/lib-commonjs/components/ToggleButton/renderToggleButton.d.ts +1 -1
  146. package/lib-commonjs/components/ToggleButton/renderToggleButton.js +3 -3
  147. package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -1
  148. package/lib-commonjs/components/ToggleButton/useToggleButton.d.ts +1 -1
  149. package/lib-commonjs/components/ToggleButton/useToggleButton.js +9 -5
  150. package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
  151. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +1 -1
  152. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +40 -38
  153. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  154. package/package.json +12 -15
  155. package/lib/common/isConformant.d.ts +0 -4
  156. package/lib/common/isConformant.js +0 -13
  157. package/lib/common/isConformant.js.map +0 -1
  158. package/lib-commonjs/common/isConformant.d.ts +0 -4
  159. package/lib-commonjs/common/isConformant.js +0 -24
  160. package/lib-commonjs/common/isConformant.js.map +0 -1
@@ -1,5 +1,6 @@
1
- import { mergeClasses, __styles } from '@fluentui/react-make-styles';
2
- import { buttonSpacing, useButtonStyles } from '../Button/useButtonStyles';
1
+ import { shorthands, mergeClasses, __styles } from '@griffel/react';
2
+ import { tokens } from '@fluentui/react-theme';
3
+ import { useButtonStyles_unstable } from '../Button/useButtonStyles';
3
4
  export const compoundButtonClassName = 'fui-CompoundButton';
4
5
  const CompoundButtonClassNames = {
5
6
  secondaryContent: `${compoundButtonClassName}-secondaryContent`
@@ -7,7 +8,8 @@ const CompoundButtonClassNames = {
7
8
 
8
9
  const useRootStyles = /*#__PURE__*/__styles({
9
10
  "base": {
10
- "rmohyg": "fsbu5mz",
11
+ "i8kkvl": "f4akndk",
12
+ "Belr9w4": "fe5j3v",
11
13
  "Bqenvij": "f11ysow2",
12
14
  "Bma4kx5": "f900oq5",
13
15
  "l15nfm": "f8rpug0",
@@ -32,23 +34,23 @@ const useRootStyles = /*#__PURE__*/__styles({
32
34
  "small": {
33
35
  "z8tnut": "fp9bwmr",
34
36
  "z189sj": ["f19lj068", "f177v4lu"],
35
- "Byoj8tv": "f150uoa4",
37
+ "Byoj8tv": "f1fow5ox",
36
38
  "uwmqm3": ["f177v4lu", "f19lj068"],
37
39
  "Be2twd7": "fkhj508",
38
40
  "Bg96gwp": "f1i3iumi"
39
41
  },
40
42
  "medium": {
41
- "z8tnut": "f1kcqot9",
43
+ "z8tnut": "fbtff6s",
42
44
  "z189sj": ["f11qrl6u", "fjlbh76"],
43
- "Byoj8tv": "fpe6lb7",
45
+ "Byoj8tv": "fp67ikv",
44
46
  "uwmqm3": ["fjlbh76", "f11qrl6u"],
45
47
  "Be2twd7": "fkhj508",
46
48
  "Bg96gwp": "f1i3iumi"
47
49
  },
48
50
  "large": {
49
- "z8tnut": "fqag9an",
51
+ "z8tnut": "fm4bm3s",
50
52
  "z189sj": ["f1gbmcue", "f1rh9g5y"],
51
- "Byoj8tv": "fp67ikv",
53
+ "Byoj8tv": "fe2my4m",
52
54
  "uwmqm3": ["f1rh9g5y", "f1gbmcue"],
53
55
  "Be2twd7": "fod5ikn",
54
56
  "Bg96gwp": "faaz57k"
@@ -59,7 +61,7 @@ const useRootStyles = /*#__PURE__*/__styles({
59
61
  "n4n7rj": "f1xrf5v0"
60
62
  }
61
63
  }, {
62
- "d": [".fsbu5mz{gap:12px;}", ".f11ysow2{height:auto;}", ".f900oq5 .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2);}", ".f1ur7rb7 .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fqag9an{padding-top:16px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fp67ikv{padding-bottom:16px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fj9njph .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
64
+ "d": [".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f11ysow2{height:auto;}", ".f900oq5 .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2);}", ".f1ur7rb7 .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1fow5ox{padding-bottom:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbtff6s{padding-top:14px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fp67ikv{padding-bottom:16px;}", ".fm4bm3s{padding-top:18px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fe2my4m{padding-bottom:20px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fj9njph .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
63
65
  "h": [".f8rpug0:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".f1itoici:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1l9nom2:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".fr13fpv:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
64
66
  "a": [".fre7xro:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".f1uen3ov:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fvjq8kx:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".f1xrf5v0:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"]
65
67
  });
@@ -116,7 +118,6 @@ const useContentContainerStyles = /*#__PURE__*/__styles({
116
118
  const useSecondaryContentStyles = /*#__PURE__*/__styles({
117
119
  "base": {
118
120
  "Bg96gwp": "flkuc6h",
119
- "B6of3ja": "fvjh0tl",
120
121
  "Bhrd7zp": "figsok6"
121
122
  },
122
123
  "small": {
@@ -129,10 +130,10 @@ const useSecondaryContentStyles = /*#__PURE__*/__styles({
129
130
  "Be2twd7": "fkhj508"
130
131
  }
131
132
  }, {
132
- "d": [".flkuc6h{line-height:100%;}", ".fvjh0tl{margin-top:4px;}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}"]
133
+ "d": [".flkuc6h{line-height:100%;}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}"]
133
134
  });
134
135
 
135
- export const useCompoundButtonStyles = state => {
136
+ export const useCompoundButtonStyles_unstable = state => {
136
137
  const rootStyles = useRootStyles();
137
138
  const rootIconOnlyStyles = useRootIconOnlyStyles();
138
139
  const iconStyles = useIconStyles();
@@ -161,7 +162,7 @@ export const useCompoundButtonStyles = state => {
161
162
  state.secondaryContent.className = mergeClasses(CompoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
162
163
  }
163
164
 
164
- useButtonStyles(state);
165
+ useButtonStyles_unstable(state);
165
166
  return state;
166
167
  };
167
168
  //# sourceMappingURL=useCompoundButtonStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
@@ -1,15 +1,15 @@
1
1
  import * as React from 'react';
2
- import { renderMenuButton } from './renderMenuButton';
3
- import { useMenuButton } from './useMenuButton';
4
- import { useMenuButtonStyles } from './useMenuButtonStyles';
2
+ import { renderMenuButton_unstable } from './renderMenuButton';
3
+ import { useMenuButton_unstable } from './useMenuButton';
4
+ import { useMenuButtonStyles_unstable } from './useMenuButtonStyles';
5
5
  /**
6
6
  * MenuButtons are buttons that handle opening and closing a menu when they are triggered.
7
7
  */
8
8
 
9
9
  export const MenuButton = /*#__PURE__*/React.forwardRef((props, ref) => {
10
- const state = useMenuButton(props, ref);
11
- useMenuButtonStyles(state);
12
- return renderMenuButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
10
+ const state = useMenuButton_unstable(props, ref);
11
+ useMenuButtonStyles_unstable(state);
12
+ return renderMenuButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
13
13
  });
14
14
  MenuButton.displayName = 'MenuButton';
15
15
  //# sourceMappingURL=MenuButton.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,mBAAT,QAAoC,uBAApC;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,aAAa,CAAC,KAAD,EAAQ,GAAR,CAA3B;AAEA,EAAA,mBAAmB,CAAC,KAAD,CAAnB;AAEA,SAAO,gBAAgB,CAAC,KAAD,CAAvB,CAL8F,CAM9F;AACD,CAP+D,CAAzD;AASP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;AAEA,EAAA,4BAA4B,CAAC,KAAD,CAA5B;AAEA,SAAO,yBAAyB,CAAC,KAAD,CAAhC,CAL8F,CAM9F;AACD,CAP+D,CAAzD;AASP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}
@@ -1,11 +1,10 @@
1
- import type { MenuTriggerChildProps } from '@fluentui/react-menu';
2
- import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
1
+ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
3
2
  import type { ButtonCommons, ButtonSlots, ButtonState } from '../Button/Button.types';
4
3
  export declare type MenuButtonSlots = ButtonSlots & {
5
4
  /**
6
5
  * Menu icon that indicates that this button has a menu that can be expanded.
7
6
  */
8
- menuIcon?: IntrinsicShorthandProps<'span'>;
7
+ menuIcon?: Slot<'span'>;
9
8
  };
10
- export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>> & Partial<MenuTriggerChildProps>;
9
+ export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>>;
11
10
  export declare type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;
@@ -2,4 +2,4 @@ export * from './MenuButton.types';
2
2
  export * from './MenuButton';
3
3
  export * from './renderMenuButton';
4
4
  export * from './useMenuButton';
5
- export { menuButtonClassName, useMenuButtonStyles } from './useMenuButtonStyles';
5
+ export { menuButtonClassName, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
@@ -2,5 +2,5 @@ export * from './MenuButton.types';
2
2
  export * from './MenuButton';
3
3
  export * from './renderMenuButton';
4
4
  export * from './useMenuButton';
5
- export { menuButtonClassName, useMenuButtonStyles } from './useMenuButtonStyles';
5
+ export { menuButtonClassName, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
6
6
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC"}
@@ -2,4 +2,4 @@ import type { MenuButtonState } from './MenuButton.types';
2
2
  /**
3
3
  * Renders a MenuButton component by passing the state defined props to the appropriate slots.
4
4
  */
5
- export declare const renderMenuButton: (state: MenuButtonState) => JSX.Element;
5
+ export declare const renderMenuButton_unstable: (state: MenuButtonState) => JSX.Element;
@@ -4,15 +4,18 @@ import { getSlots } from '@fluentui/react-utilities';
4
4
  * Renders a MenuButton component by passing the state defined props to the appropriate slots.
5
5
  */
6
6
 
7
- export const renderMenuButton = state => {
7
+ export const renderMenuButton_unstable = state => {
8
8
  const {
9
9
  slots,
10
10
  slotProps
11
- } = getSlots(state, ['root', 'icon', 'menuIcon']);
11
+ } = getSlots(state);
12
12
  const {
13
13
  icon,
14
14
  iconOnly
15
15
  } = state;
16
- return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.icon, Object.assign({}, slotProps.icon)), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && /*#__PURE__*/React.createElement(slots.menuIcon, Object.assign({}, slotProps.menuIcon)));
16
+ return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
17
+ }, slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
18
+ }), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && slots.menuIcon && /*#__PURE__*/React.createElement(slots.menuIcon, { ...slotProps.menuIcon
19
+ }));
17
20
  };
18
21
  //# sourceMappingURL=renderMenuButton.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAI,KAAD,IAA2B;AACzD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,EAAyB,CAAC,MAAD,EAAS,MAAT,EAAiB,UAAjB,CAAzB,CAArC;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAqB,KAA3B;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADF,EAEG,CAAC,QAAD,IAAa,SAAS,CAAC,IAAV,CAAe,QAF/B,EAGG,CAAC,CAAC,QAAD,IAAa,EAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,QAAP,CAAd,kBAAkC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAHrC,CADF;AAOD,CAXM","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,CAArC;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAqB,KAA3B;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,CAAC,QAAD,IAAa,SAAS,CAAC,IAAV,CAAe,QAF/B,EAGG,CAAC,CAAC,QAAD,IAAa,EAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,QAAP,CAAd,KAAkC,KAAK,CAAC,QAAxC,iBAAoD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CAHvD,CADF;AAOD,CAXM","sourceRoot":""}
@@ -3,4 +3,4 @@ import type { MenuButtonProps, MenuButtonState } from './MenuButton.types';
3
3
  /**
4
4
  * Given user props, returns the final state for a MenuButton.
5
5
  */
6
- export declare const useMenuButton: ({ menuIcon, ...props }: MenuButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;
6
+ export declare const useMenuButton_unstable: ({ menuIcon, ...props }: MenuButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;
@@ -1,16 +1,16 @@
1
1
  import * as React from 'react';
2
- import { ChevronDown20Regular, ChevronDown24Regular } from '@fluentui/react-icons';
2
+ import { ChevronDownRegular } from '@fluentui/react-icons';
3
3
  import { resolveShorthand } from '@fluentui/react-utilities';
4
- import { useButton } from '../Button/index';
4
+ import { useButton_unstable } from '../Button/index';
5
5
  /**
6
6
  * Given user props, returns the final state for a MenuButton.
7
7
  */
8
8
 
9
- export const useMenuButton = ({
9
+ export const useMenuButton_unstable = ({
10
10
  menuIcon,
11
11
  ...props
12
12
  }, ref) => {
13
- const buttonState = useButton(props, ref);
13
+ const buttonState = useButton_unstable(props, ref);
14
14
  return { // Button state
15
15
  ...buttonState,
16
16
  // State calculated from a set of props
@@ -23,7 +23,7 @@ export const useMenuButton = ({
23
23
  },
24
24
  menuIcon: resolveShorthand(menuIcon, {
25
25
  defaultProps: {
26
- children: buttonState.size === 'large' ? /*#__PURE__*/React.createElement(ChevronDown24Regular, null) : /*#__PURE__*/React.createElement(ChevronDown20Regular, null)
26
+ children: /*#__PURE__*/React.createElement(ChevronDownRegular, null)
27
27
  },
28
28
  required: true
29
29
  })
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/MenuButton/useMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,EAA+B,oBAA/B,QAA2D,uBAA3D;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,SAAT,QAA0B,iBAA1B;AAGA;;AAEG;;AACH,OAAO,MAAM,aAAa,GAAG,CAC3B;AAAE,EAAA,QAAF;AAAY,KAAG;AAAf,CAD2B,EAE3B,GAF2B,KAGR;AACnB,QAAM,WAAW,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAA7B;AACA,SAAO,EACL;AACA,OAAG,WAFE;AAIL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,QAAR,CALZ;AAOL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,QAAQ,EAAE;AAHA,KARP;AAcL,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAD,EAAW;AACnC,MAAA,YAAY,EAAE;AACZ,QAAA,QAAQ,EAAE,WAAW,CAAC,IAAZ,KAAqB,OAArB,gBAA+B,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB,IAArB,CAA/B,gBAA0D,KAAA,CAAA,aAAA,CAAC,oBAAD,EAAqB,IAArB;AADxD,OADqB;AAInC,MAAA,QAAQ,EAAE;AAJyB,KAAX;AAdrB,GAAP;AAqBD,CA1BM","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/MenuButton/useMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,uBAAnC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,kBAAT,QAAmC,iBAAnC;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CACpC;AAAE,EAAA,QAAF;AAAY,KAAG;AAAf,CADoC,EAEpC,GAFoC,KAGjB;AACnB,QAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AACA,SAAO,EACL;AACA,OAAG,WAFE;AAIL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,QAAR,CALZ;AAOL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,QAAQ,EAAE;AAHA,KARP;AAcL,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAD,EAAW;AACnC,MAAA,YAAY,EAAE;AACZ,QAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB,IAAnB;AADE,OADqB;AAInC,MAAA,QAAQ,EAAE;AAJyB,KAAX;AAdrB,GAAP;AAqBD,CA1BM","sourceRoot":""}
@@ -1,3 +1,3 @@
1
1
  import type { MenuButtonState } from './MenuButton.types';
2
2
  export declare const menuButtonClassName = "fui-MenuButton";
3
- export declare const useMenuButtonStyles: (state: MenuButtonState) => MenuButtonState;
3
+ export declare const useMenuButtonStyles_unstable: (state: MenuButtonState) => MenuButtonState;
@@ -1,5 +1,5 @@
1
- import { mergeClasses, __styles } from '@fluentui/react-make-styles';
2
- import { useButtonStyles } from '../Button/useButtonStyles';
1
+ import { mergeClasses, __styles } from '@griffel/react';
2
+ import { useButtonStyles_unstable } from '../Button/useButtonStyles';
3
3
  export const menuButtonClassName = 'fui-MenuButton';
4
4
 
5
5
  const useMenuIconStyles = /*#__PURE__*/__styles({
@@ -22,7 +22,7 @@ const useMenuIconStyles = /*#__PURE__*/__styles({
22
22
  "d": [".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"]
23
23
  });
24
24
 
25
- export const useMenuButtonStyles = state => {
25
+ export const useMenuButtonStyles_unstable = state => {
26
26
  const menuIconStyles = useMenuIconStyles();
27
27
  state.root.className = mergeClasses(menuButtonClassName, state.root.className);
28
28
 
@@ -30,7 +30,7 @@ export const useMenuButtonStyles = state => {
30
30
  state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);
31
31
  }
32
32
 
33
- useButtonStyles(state);
33
+ useButtonStyles_unstable(state);
34
34
  return state;
35
35
  };
36
36
  //# sourceMappingURL=useMenuButtonStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AAEA,SAAS,eAAT,QAAgC,2BAAhC;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;;AAEP,MAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAmBA,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAA4C;AAC7E,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAD,EAAsB,KAAK,CAAC,IAAN,CAAW,SAAjC,CAAnC;;AAEA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,cAAc,CAAC,KAAK,CAAC,IAAP,CAAf,EAA6B,KAAK,CAAC,QAAN,CAAe,SAA5C,CAAvC;AACD;;AAED,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CAZM","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,gBAAzC;AAEA,SAAS,wBAAT,QAAyC,2BAAzC;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;;AAEP,MAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAmBA,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAD,EAAsB,KAAK,CAAC,IAAN,CAAW,SAAjC,CAAnC;;AAEA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,cAAc,CAAC,KAAK,CAAC,IAAP,CAAf,EAA6B,KAAK,CAAC,QAAN,CAAe,SAA5C,CAAvC;AACD;;AAED,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,KAAP;AACD,CAZM","sourceRoot":""}
@@ -1,16 +1,16 @@
1
1
  import * as React from 'react';
2
- import { renderSplitButton } from './renderSplitButton';
3
- import { useSplitButton } from './useSplitButton';
4
- import { useSplitButtonStyles } from './useSplitButtonStyles';
2
+ import { renderSplitButton_unstable } from './renderSplitButton';
3
+ import { useSplitButton_unstable } from './useSplitButton';
4
+ import { useSplitButtonStyles_unstable } from './useSplitButtonStyles';
5
5
  /**
6
6
  * SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
7
7
  * action, while interacting with the second one opens a menu with secondary actions.
8
8
  */
9
9
 
10
10
  export const SplitButton = /*#__PURE__*/React.forwardRef((props, ref) => {
11
- const state = useSplitButton(props, ref);
12
- useSplitButtonStyles(state);
13
- return renderSplitButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
11
+ const state = useSplitButton_unstable(props, ref);
12
+ useSplitButtonStyles_unstable(state);
13
+ return renderSplitButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
14
14
  });
15
15
  SplitButton.displayName = 'SplitButton';
16
16
  //# sourceMappingURL=SplitButton.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,oBAAT,QAAqC,wBAArC;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,cAAc,CAAC,KAAD,EAAQ,GAAR,CAA5B;AAEA,EAAA,oBAAoB,CAAC,KAAD,CAApB;AAEA,SAAO,iBAAiB,CAAC,KAAD,CAAxB,CALgG,CAMhG;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;AAEA,EAAA,6BAA6B,CAAC,KAAD,CAA7B;AAEA,SAAO,0BAA0B,CAAC,KAAD,CAAjC,CALgG,CAMhG;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
@@ -1,19 +1,21 @@
1
- import type { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
1
+ import { Button } from '../Button/Button';
2
+ import { MenuButton } from '../MenuButton/MenuButton';
3
+ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
4
  import type { ButtonProps, ButtonState } from '../Button/Button.types';
3
5
  import type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';
4
6
  export declare type SplitButtonSlots = {
5
7
  /**
6
8
  * Root of the component that wraps the primary action button and menu button.
7
9
  */
8
- root: IntrinsicShorthandProps<'div'>;
10
+ root: Slot<'div'>;
9
11
  /**
10
12
  * Button that opens menu with secondary actions in SplitButton.
11
13
  */
12
- menuButton?: ObjectShorthandProps<MenuButtonProps>;
14
+ menuButton?: Slot<typeof MenuButton>;
13
15
  /**
14
16
  * Button to perform primary action in SplitButton.
15
17
  */
16
- primaryActionButton?: ObjectShorthandProps<ButtonProps>;
18
+ primaryActionButton?: Slot<typeof Button>;
17
19
  };
18
20
  export declare type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root'> & Omit<MenuButtonProps, 'root'>;
19
21
  export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<ButtonState, 'components' | 'iconOnly' | 'root'> & Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;
@@ -2,4 +2,4 @@ export * from './SplitButton';
2
2
  export * from './SplitButton.types';
3
3
  export * from './renderSplitButton';
4
4
  export * from './useSplitButton';
5
- export { splitButtonClassName, useSplitButtonStyles } from './useSplitButtonStyles';
5
+ export { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
@@ -2,5 +2,5 @@ export * from './SplitButton';
2
2
  export * from './SplitButton.types';
3
3
  export * from './renderSplitButton';
4
4
  export * from './useSplitButton';
5
- export { splitButtonClassName, useSplitButtonStyles } from './useSplitButtonStyles';
5
+ export { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
6
6
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC"}
@@ -2,4 +2,4 @@ import type { SplitButtonState } from './SplitButton.types';
2
2
  /**
3
3
  * Renders a SplitButton component by passing the state defined props to the appropriate slots.
4
4
  */
5
- export declare const renderSplitButton: (state: SplitButtonState) => JSX.Element;
5
+ export declare const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Element;
@@ -4,11 +4,14 @@ import { getSlots } from '@fluentui/react-utilities';
4
4
  * Renders a SplitButton component by passing the state defined props to the appropriate slots.
5
5
  */
6
6
 
7
- export const renderSplitButton = state => {
7
+ export const renderSplitButton_unstable = state => {
8
8
  const {
9
9
  slots,
10
10
  slotProps
11
- } = getSlots(state, ['root', 'menuButton', 'primaryActionButton']);
12
- return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.primaryActionButton, Object.assign({}, slotProps.primaryActionButton)), /*#__PURE__*/React.createElement(slots.menuButton, Object.assign({}, slotProps.menuButton)));
11
+ } = getSlots(state);
12
+ return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
13
+ }, slots.primaryActionButton && /*#__PURE__*/React.createElement(slots.primaryActionButton, { ...slotProps.primaryActionButton
14
+ }), slots.menuButton && /*#__PURE__*/React.createElement(slots.menuButton, { ...slotProps.menuButton
15
+ }));
13
16
  };
14
17
  //# sourceMappingURL=renderSplitButton.js.map
@@ -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,MAAM,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,EAA0B,CAAC,MAAD,EAAS,YAAT,EAAuB,qBAAvB,CAA1B,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,mBAAf,CAA1B,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,MAAA,CAAA,MAAA,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,4 @@
1
- import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
1
+ import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
2
2
  import { Button } from '../Button/Button';
3
3
  import { MenuButton } from '../MenuButton/MenuButton';
4
4
  /**
@@ -7,7 +7,7 @@ import { MenuButton } from '../MenuButton/MenuButton';
7
7
  * @param ref - User provided ref to be passed to the SplitButton component.
8
8
  */
9
9
 
10
- export const useSplitButton = (props, ref) => {
10
+ export const useSplitButton_unstable = (props, ref) => {
11
11
  const {
12
12
  appearance,
13
13
  block = false,
@@ -17,15 +17,18 @@ export const useSplitButton = (props, ref) => {
17
17
  icon,
18
18
  iconPosition = 'before',
19
19
  menuButton,
20
+ menuIcon,
20
21
  primaryActionButton,
21
22
  shape = 'rounded',
22
23
  size = 'medium'
23
24
  } = props;
25
+ const baseId = useId('splitButton-');
24
26
  const menuButtonShorthand = resolveShorthand(menuButton, {
25
27
  defaultProps: {
26
28
  appearance,
27
29
  disabled,
28
30
  disabledFocusable,
31
+ menuIcon,
29
32
  shape,
30
33
  size
31
34
  }
@@ -39,10 +42,17 @@ export const useSplitButton = (props, ref) => {
39
42
  disabledFocusable,
40
43
  icon,
41
44
  iconPosition,
45
+ id: baseId + '__primaryActionButton',
42
46
  shape,
43
47
  size
44
48
  }
45
- });
49
+ }); // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
50
+ // by the user.
51
+
52
+ if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
53
+ menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
54
+ }
55
+
46
56
  return {
47
57
  // Props passed at the top-level
48
58
  appearance,
@@ -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,MAAM,cAAc,GAAG,CAC5B,KAD4B,EAE5B,GAF4B,KAGR;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
+ {"version":3,"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;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,QATI;AAUJ,IAAA,mBAVI;AAWJ,IAAA,KAAK,GAAG,SAXJ;AAYJ,IAAA,IAAI,GAAG;AAZH,MAaF,KAbJ;AAeA,QAAM,MAAM,GAAG,KAAK,CAAC,cAAD,CAApB;AAEA,QAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,KALY;AAMZ,MAAA;AANY;AADyC,GAAb,CAA5C;AAWA,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,EAAE,EAAE,MAAM,GAAG,uBARD;AASZ,MAAA,KATY;AAUZ,MAAA;AAVY;AAD2D,GAAtB,CAArD,CA7BoB,CA4CpB;AACA;;AACA,MACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;AACA,IAAA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;AACD;;AAED,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,CA/EM","sourceRoot":""}
@@ -1,3 +1,3 @@
1
1
  import type { SplitButtonState } from './SplitButton.types';
2
2
  export declare const splitButtonClassName = "fui-SplitButton";
3
- export declare const useSplitButtonStyles: (state: SplitButtonState) => SplitButtonState;
3
+ export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;
@@ -1,5 +1,6 @@
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
+ import { tokens } from '@fluentui/react-theme';
3
4
  export const splitButtonClassName = 'fui-SplitButton';
4
5
  const SplitButtonClassNames = {
5
6
  primaryActionButton: `${splitButtonClassName}-primaryActionButton`,
@@ -68,7 +69,7 @@ const useRootStyles = /*#__PURE__*/__styles({
68
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);}"]
69
70
  });
70
71
 
71
- export const useSplitButtonStyles = state => {
72
+ export const useSplitButtonStyles_unstable = state => {
72
73
  const rootStyles = useRootStyles();
73
74
  const focusStyles = useFocusStyles();
74
75
  const {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;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,oBAAoB,GAAI,KAAD,IAA8C;AAChF,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
+ {"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
9
  export const ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
10
- const 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
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,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;AAEA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AAEA,SAAO,kBAAkB,CAAC,KAAD,CAAzB,CALkG,CAMlG;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 { toggleButtonClassName, 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 { toggleButtonClassName, 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,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"}