@fluentui/react-button 0.0.0-nightlycc44f3625c20211220.1 → 0.0.0-nightlyd80c90385320220216.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (154) hide show
  1. package/CHANGELOG.json +194 -23
  2. package/CHANGELOG.md +45 -13
  3. package/dist/react-button.d.ts +31 -36
  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 +4 -4
  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 +1 -1
  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 +9 -18
  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 +5 -5
  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 +12 -12
  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 -8
  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 +4 -4
  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 +4 -4
  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 +17 -5
  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 +13 -9
  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 +5 -4
  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 +6 -6
  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 +3 -3
  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 +18 -26
  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 +7 -7
  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 +23 -22
  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 -8
  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 +6 -6
  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 +6 -6
  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 +18 -6
  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 +14 -10
  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 +10 -8
  153. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  154. package/package.json +9 -11
@@ -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,14 +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']);
11
+ } = getSlots(state);
12
12
  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
13
- }, /*#__PURE__*/React.createElement(slots.primaryActionButton, { ...slotProps.primaryActionButton
14
- }), /*#__PURE__*/React.createElement(slots.menuButton, { ...slotProps.menuButton
13
+ }, slots.primaryActionButton && /*#__PURE__*/React.createElement(slots.primaryActionButton, { ...slotProps.primaryActionButton
14
+ }), slots.menuButton && /*#__PURE__*/React.createElement(slots.menuButton, { ...slotProps.menuButton
15
15
  }));
16
16
  };
17
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,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,EAAA,GAAK,SAAS,CAAC;AAAf,GAA1B,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,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,18 +17,22 @@ 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
+ },
35
+ required: true
32
36
  });
33
37
  const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
34
38
  defaultProps: {
@@ -39,10 +43,18 @@ export const useSplitButton = (props, ref) => {
39
43
  disabledFocusable,
40
44
  icon,
41
45
  iconPosition,
46
+ id: baseId + '__primaryActionButton',
42
47
  shape,
43
48
  size
44
- }
45
- });
49
+ },
50
+ required: true
51
+ }); // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
52
+ // by the user.
53
+
54
+ if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
55
+ menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
56
+ }
57
+
46
58
  return {
47
59
  // Props passed at the top-level
48
60
  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,KADyC;AASvD,IAAA,QAAQ,EAAE;AAT6C,GAAb,CAA5C;AAYA,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,KAD2D;AAazE,IAAA,QAAQ,EAAE;AAb+D,GAAtB,CAArD,CA9BoB,CA8CpB;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,CAjFM","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"}
@@ -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,6 +1,6 @@
1
1
  import { useControllableState } from '@fluentui/react-utilities';
2
2
  import * as React from 'react';
3
- import { useButton } from '../Button/useButton';
3
+ import { useButton_unstable } from '../Button/useButton';
4
4
  /**
5
5
  * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
6
6
  * processed state.
@@ -8,12 +8,16 @@ import { useButton } from '../Button/useButton';
8
8
  * @param ref - User provided ref to be passed to the ToggleButton component.
9
9
  */
10
10
 
11
- export const useToggleButton = ({
11
+ export const useToggleButton_unstable = ({
12
12
  checked,
13
13
  defaultChecked,
14
14
  ...props
15
15
  }, ref) => {
16
- const buttonState = useButton(props, ref);
16
+ const {
17
+ disabled,
18
+ disabledFocusable
19
+ } = props;
20
+ const buttonState = useButton_unstable(props, ref);
17
21
  const {
18
22
  role,
19
23
  onClick
@@ -30,18 +34,18 @@ export const useToggleButton = ({
30
34
  checked: checkedValue,
31
35
  // Slots definition
32
36
  root: { ...buttonState.root,
33
- [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: !!checkedValue,
37
+ [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
34
38
  onClick: React.useCallback(ev => {
35
- if (onClick) {
36
- onClick(ev);
39
+ if (!disabled && !disabledFocusable) {
40
+ onClick === null || onClick === void 0 ? void 0 : onClick(ev);
37
41
 
38
42
  if (ev.defaultPrevented) {
39
43
  return;
40
44
  }
41
- }
42
45
 
43
- setCheckedValue(!checkedValue);
44
- }, [checkedValue, setCheckedValue, onClick])
46
+ setCheckedValue(!checkedValue);
47
+ }
48
+ }, [checkedValue, disabled, disabledFocusable, setCheckedValue, onClick])
45
49
  }
46
50
  };
47
51
  };
@@ -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,MAAM,eAAe,GAAG,CAC7B;AAAE,EAAA,OAAF;AAAW,EAAA,cAAX;AAA2B,KAAG;AAA9B,CAD6B,EAE7B,GAF6B,KAGR;AACrB,QAAM,WAAW,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAA7B;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,CAAC,YAFtD;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,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,YAFpD;AAGJ,MAAA,OAAO,EAAE,KAAK,CAAC,WAAN,CACP,EAAE,IAAG;AACH,YAAI,CAAC,QAAD,IAAa,CAAC,iBAAlB,EAAqC;AACnC,UAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAG,EAAH,CAAP;;AAEA,cAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;;AAED,UAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD;AACF,OAXM,EAYP,CAAC,YAAD,EAAe,QAAf,EAAyB,iBAAzB,EAA4C,eAA5C,EAA6D,OAA7D,CAZO;AAHL;AARD,GAAP;AA2BD,CA3CM","sourceRoot":""}
@@ -1,3 +1,3 @@
1
1
  import type { ToggleButtonState } from './ToggleButton.types';
2
2
  export declare const toggleButtonClassName = "fui-ToggleButton";
3
- export declare const useToggleButtonStyles: (state: ToggleButtonState) => ToggleButtonState;
3
+ export declare const useToggleButtonStyles_unstable: (state: ToggleButtonState) => ToggleButtonState;
@@ -1,5 +1,6 @@
1
- import { shorthands, mergeClasses, __styles } from '@fluentui/react-make-styles';
2
- import { 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 toggleButtonClassName = 'fui-ToggleButton';
4
5
 
5
6
  const useCheckedStyles = /*#__PURE__*/__styles({
@@ -174,7 +175,7 @@ const useDisabledStyles = /*#__PURE__*/__styles({
174
175
  "a": [".f1ryyzvn:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".fdi4vxw:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f4ryxzl:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fkdgpbx:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fcmhn06:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f1rot6hk:active{background-color:transparent;}"]
175
176
  });
176
177
 
177
- export const useToggleButtonStyles = state => {
178
+ export const useToggleButtonStyles_unstable = state => {
178
179
  const checkedStyles = useCheckedStyles();
179
180
  const disabledStyles = useDisabledStyles();
180
181
  const {
@@ -187,7 +188,7 @@ export const useToggleButtonStyles = state => {
187
188
  checked && checkedStyles.base, appearance && checked && checkedStyles[appearance], // Disabled styles
188
189
  (disabled || disabledFocusable) && disabledStyles.base, appearance && (disabled || disabledFocusable) && disabledStyles[appearance], // User provided class name
189
190
  state.root.className);
190
- useButtonStyles(state);
191
+ useButtonStyles_unstable(state);
191
192
  return state;
192
193
  };
193
194
  //# sourceMappingURL=useToggleButtonStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,6BAArD;AACA,SAAS,eAAT,QAAgC,2BAAhC;AAGA,OAAO,MAAM,qBAAqB,GAAG,kBAA9B;;AAEP,MAAM,gBAAgB,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;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAzB;;AAuFA,MAAM,iBAAiB,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;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,EAA1B;;AAiEA,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAgD;AACnF,QAAM,aAAa,GAAG,gBAAgB,EAAtC;AACA,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,OAAd;AAAuB,IAAA,QAAvB;AAAiC,IAAA;AAAjC,MAAuD,KAA7D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBADiC,EAGjC;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAJQ,EAKjC,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CALL,EAOjC;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IARjB,EASjC,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAT9B,EAWjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAZsB,CAAnC;AAeA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CAxBM","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,wBAAT,QAAyC,2BAAzC;AAGA,OAAO,MAAM,qBAAqB,GAAG,kBAA9B;;AAEP,MAAM,gBAAgB,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;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAzB;;AAuFA,MAAM,iBAAiB,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;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,EAA1B;;AAiEA,OAAO,MAAM,8BAA8B,GAAI,KAAD,IAAgD;AAC5F,QAAM,aAAa,GAAG,gBAAgB,EAAtC;AACA,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,OAAd;AAAuB,IAAA,QAAvB;AAAiC,IAAA;AAAjC,MAAuD,KAA7D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBADiC,EAGjC;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAJQ,EAKjC,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CALL,EAOjC;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IARjB,EASjC,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAT9B,EAWjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAZsB,CAAnC;AAeA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,KAAP;AACD,CAxBM","sourceRoot":""}
@@ -18,9 +18,9 @@ const useButtonStyles_1 = /*#__PURE__*/require("./useButtonStyles");
18
18
 
19
19
 
20
20
  exports.Button = /*#__PURE__*/React.forwardRef((props, ref) => {
21
- const state = useButton_1.useButton(props, ref);
22
- useButtonStyles_1.useButtonStyles(state);
23
- return renderButton_1.renderButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
21
+ const state = useButton_1.useButton_unstable(props, ref);
22
+ useButtonStyles_1.useButtonStyles_unstable(state);
23
+ return renderButton_1.renderButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
24
24
  });
25
25
  exports.Button.displayName = 'Button';
26
26
  //# sourceMappingURL=Button.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,SAAA,CAAU,KAAV,EAAiB,GAAjB,CAAd;AAEA,EAAA,iBAAA,CAAA,eAAA,CAAgB,KAAhB;AAEA,SAAO,cAAA,CAAA,YAAA,CAAa,KAAb,CAAP,CALsF,CAMtF;AACD,CAPuD,CAA3C;AASb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;AAEA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP,CALsF,CAMtF;AACD,CAPuD,CAA3C;AASb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourceRoot":""}
@@ -1,14 +1,14 @@
1
- import { ARIAButtonShorthandProps } from '@fluentui/react-aria';
2
- import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
1
+ import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
2
+ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
3
3
  export declare type ButtonSlots = {
4
4
  /**
5
5
  * Root of the component that renders as either a `<button>` tag or an `<a>` tag.
6
6
  */
7
- root: ARIAButtonShorthandProps;
7
+ root: Slot<ARIAButtonSlotProps>;
8
8
  /**
9
9
  * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.
10
10
  */
11
- icon?: IntrinsicShorthandProps<'span'>;
11
+ icon?: Slot<'span'>;
12
12
  };
13
13
  export declare type ButtonCommons = {
14
14
  /**
@@ -40,7 +40,7 @@ export declare type ButtonCommons = {
40
40
  * A button can format its icon to appear before or after its content.
41
41
  * @default 'before'
42
42
  */
43
- iconPosition: 'before' | 'after';
43
+ iconPosition?: 'before' | 'after';
44
44
  /**
45
45
  * A button can be rounded, circular, or square.
46
46
  * @default 'rounded'
@@ -1,5 +1,5 @@
1
1
  export * from './Button';
2
- export * from './Button.types';
2
+ export type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';
3
3
  export * from './renderButton';
4
4
  export * from './useButton';
5
- export { buttonClassName, useButtonStyles } from './useButtonStyles';
5
+ export { buttonClassName, useButtonStyles_unstable } from './useButtonStyles';
@@ -3,14 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useButtonStyles = exports.buttonClassName = void 0;
6
+ exports.useButtonStyles_unstable = exports.buttonClassName = void 0;
7
7
 
8
8
  const tslib_1 = /*#__PURE__*/require("tslib");
9
9
 
10
10
  tslib_1.__exportStar(require("./Button"), exports);
11
11
 
12
- tslib_1.__exportStar(require("./Button.types"), exports);
13
-
14
12
  tslib_1.__exportStar(require("./renderButton"), exports);
15
13
 
16
14
  tslib_1.__exportStar(require("./useButton"), exports);
@@ -23,10 +21,10 @@ Object.defineProperty(exports, "buttonClassName", {
23
21
  return useButtonStyles_1.buttonClassName;
24
22
  }
25
23
  });
26
- Object.defineProperty(exports, "useButtonStyles", {
24
+ Object.defineProperty(exports, "useButtonStyles_unstable", {
27
25
  enumerable: true,
28
26
  get: function () {
29
- return useButtonStyles_1.useButtonStyles;
27
+ return useButtonStyles_1.useButtonStyles_unstable;
30
28
  }
31
29
  });
32
30
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AAGA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA","sourceRoot":""}
@@ -2,4 +2,4 @@ import type { ButtonState } from './Button.types';
2
2
  /**
3
3
  * Renders a Button component by passing the state defined props to the appropriate slots.
4
4
  */
5
- export declare const renderButton: (state: ButtonState) => JSX.Element;
5
+ export declare const renderButton_unstable: (state: ButtonState) => JSX.Element;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.renderButton = void 0;
6
+ exports.renderButton_unstable = void 0;
7
7
 
8
8
  const React = /*#__PURE__*/require("react");
9
9
 
@@ -13,20 +13,20 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
13
13
  */
14
14
 
15
15
 
16
- const renderButton = state => {
16
+ const renderButton_unstable = state => {
17
17
  const {
18
18
  slots,
19
19
  slotProps
20
- } = react_utilities_1.getSlots(state, ['root', 'icon']);
20
+ } = react_utilities_1.getSlots(state);
21
21
  const {
22
22
  iconOnly,
23
23
  iconPosition
24
24
  } = state;
25
25
  return React.createElement(slots.root, { ...slotProps.root
26
- }, iconPosition !== 'after' && React.createElement(slots.icon, { ...slotProps.icon
27
- }), !iconOnly && state.root.children, iconPosition === 'after' && React.createElement(slots.icon, { ...slotProps.icon
26
+ }, iconPosition !== 'after' && slots.icon && React.createElement(slots.icon, { ...slotProps.icon
27
+ }), !iconOnly && state.root.children, iconPosition === 'after' && slots.icon && React.createElement(slots.icon, { ...slotProps.icon
28
28
  }));
29
29
  };
30
30
 
31
- exports.renderButton = renderButton;
31
+ exports.renderButton_unstable = renderButton_unstable;
32
32
  //# sourceMappingURL=renderButton.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Button/renderButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,YAAY,GAAI,KAAD,IAAuB;AACjD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,EAA6B,CAAC,MAAD,EAAS,MAAT,CAA7B,CAA7B;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAD/B,EAEG,CAAC,QAAD,IAAa,KAAK,CAAC,IAAN,CAAW,QAF3B,EAGG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAH/B,CADF;AAOD,CAXM;;AAAM,OAAA,CAAA,YAAA,GAAY,YAAZ","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/Button/renderButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAD7C,EAEG,CAAC,QAAD,IAAa,KAAK,CAAC,IAAN,CAAW,QAF3B,EAGG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAH7C,CADF;AAOD,CAXM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourceRoot":""}