@fluentui/react-button 0.0.0-nightly0e0cf06c3420211029.1 → 0.0.0-nightly3082edf34720220208.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (164) hide show
  1. package/CHANGELOG.json +290 -24
  2. package/CHANGELOG.md +64 -14
  3. package/dist/react-button.d.ts +39 -31
  4. package/lib/components/Button/Button.js +7 -7
  5. package/lib/components/Button/Button.js.map +1 -1
  6. package/lib/components/Button/Button.types.d.ts +5 -5
  7. package/lib/components/Button/index.d.ts +1 -1
  8. package/lib/components/Button/index.js +1 -1
  9. package/lib/components/Button/index.js.map +1 -1
  10. package/lib/components/Button/renderButton.d.ts +1 -1
  11. package/lib/components/Button/renderButton.js +13 -9
  12. package/lib/components/Button/renderButton.js.map +1 -1
  13. package/lib/components/Button/useButton.d.ts +1 -1
  14. package/lib/components/Button/useButton.js +22 -25
  15. package/lib/components/Button/useButton.js.map +1 -1
  16. package/lib/components/Button/useButtonStyles.d.ts +2 -9
  17. package/lib/components/Button/useButtonStyles.js +118 -90
  18. package/lib/components/Button/useButtonStyles.js.map +1 -1
  19. package/lib/components/CompoundButton/CompoundButton.js +7 -7
  20. package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
  21. package/lib/components/CompoundButton/CompoundButton.types.d.ts +4 -4
  22. package/lib/components/CompoundButton/index.d.ts +1 -1
  23. package/lib/components/CompoundButton/index.js +1 -1
  24. package/lib/components/CompoundButton/index.js.map +1 -1
  25. package/lib/components/CompoundButton/renderCompoundButton.d.ts +1 -1
  26. package/lib/components/CompoundButton/renderCompoundButton.js +15 -9
  27. package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
  28. package/lib/components/CompoundButton/useCompoundButton.d.ts +1 -1
  29. package/lib/components/CompoundButton/useCompoundButton.js +9 -9
  30. package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
  31. package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +2 -1
  32. package/lib/components/CompoundButton/useCompoundButtonStyles.js +52 -48
  33. package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  34. package/lib/components/MenuButton/MenuButton.js +7 -7
  35. package/lib/components/MenuButton/MenuButton.js.map +1 -1
  36. package/lib/components/MenuButton/MenuButton.types.d.ts +3 -4
  37. package/lib/components/MenuButton/index.d.ts +1 -1
  38. package/lib/components/MenuButton/index.js +1 -1
  39. package/lib/components/MenuButton/index.js.map +1 -1
  40. package/lib/components/MenuButton/renderMenuButton.d.ts +1 -1
  41. package/lib/components/MenuButton/renderMenuButton.js +13 -9
  42. package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
  43. package/lib/components/MenuButton/useMenuButton.d.ts +1 -1
  44. package/lib/components/MenuButton/useMenuButton.js +11 -11
  45. package/lib/components/MenuButton/useMenuButton.js.map +1 -1
  46. package/lib/components/MenuButton/useMenuButtonStyles.d.ts +2 -1
  47. package/lib/components/MenuButton/useMenuButtonStyles.js +8 -6
  48. package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  49. package/lib/components/SplitButton/SplitButton.js +7 -7
  50. package/lib/components/SplitButton/SplitButton.js.map +1 -1
  51. package/lib/components/SplitButton/SplitButton.types.d.ts +6 -4
  52. package/lib/components/SplitButton/index.d.ts +1 -1
  53. package/lib/components/SplitButton/index.js +1 -1
  54. package/lib/components/SplitButton/index.js.map +1 -1
  55. package/lib/components/SplitButton/renderSplitButton.d.ts +1 -1
  56. package/lib/components/SplitButton/renderSplitButton.js +9 -7
  57. package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
  58. package/lib/components/SplitButton/useSplitButton.d.ts +1 -1
  59. package/lib/components/SplitButton/useSplitButton.js +41 -45
  60. package/lib/components/SplitButton/useSplitButton.js.map +1 -1
  61. package/lib/components/SplitButton/useSplitButtonStyles.d.ts +2 -1
  62. package/lib/components/SplitButton/useSplitButtonStyles.js +38 -34
  63. package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  64. package/lib/components/ToggleButton/ToggleButton.js +7 -7
  65. package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
  66. package/lib/components/ToggleButton/index.d.ts +1 -1
  67. package/lib/components/ToggleButton/index.js +1 -1
  68. package/lib/components/ToggleButton/index.js.map +1 -1
  69. package/lib/components/ToggleButton/renderToggleButton.d.ts +1 -1
  70. package/lib/components/ToggleButton/renderToggleButton.js +1 -1
  71. package/lib/components/ToggleButton/renderToggleButton.js.map +1 -1
  72. package/lib/components/ToggleButton/useToggleButton.d.ts +1 -1
  73. package/lib/components/ToggleButton/useToggleButton.js +32 -30
  74. package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
  75. package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +2 -1
  76. package/lib/components/ToggleButton/useToggleButtonStyles.js +47 -43
  77. package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  78. package/lib-commonjs/Button.js +1 -1
  79. package/lib-commonjs/CompoundButton.js +1 -1
  80. package/lib-commonjs/MenuButton.js +1 -1
  81. package/lib-commonjs/SplitButton.js +1 -1
  82. package/lib-commonjs/ToggleButton.js +1 -1
  83. package/lib-commonjs/components/Button/Button.js +8 -8
  84. package/lib-commonjs/components/Button/Button.js.map +1 -1
  85. package/lib-commonjs/components/Button/Button.types.d.ts +5 -5
  86. package/lib-commonjs/components/Button/index.d.ts +1 -1
  87. package/lib-commonjs/components/Button/index.js +10 -4
  88. package/lib-commonjs/components/Button/index.js.map +1 -1
  89. package/lib-commonjs/components/Button/renderButton.d.ts +1 -1
  90. package/lib-commonjs/components/Button/renderButton.js +17 -14
  91. package/lib-commonjs/components/Button/renderButton.js.map +1 -1
  92. package/lib-commonjs/components/Button/useButton.d.ts +1 -1
  93. package/lib-commonjs/components/Button/useButton.js +26 -29
  94. package/lib-commonjs/components/Button/useButton.js.map +1 -1
  95. package/lib-commonjs/components/Button/useButtonStyles.d.ts +2 -9
  96. package/lib-commonjs/components/Button/useButtonStyles.js +121 -92
  97. package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
  98. package/lib-commonjs/components/CompoundButton/CompoundButton.js +8 -8
  99. package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
  100. package/lib-commonjs/components/CompoundButton/CompoundButton.types.d.ts +4 -4
  101. package/lib-commonjs/components/CompoundButton/index.d.ts +1 -1
  102. package/lib-commonjs/components/CompoundButton/index.js +10 -4
  103. package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
  104. package/lib-commonjs/components/CompoundButton/renderCompoundButton.d.ts +1 -1
  105. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js +19 -14
  106. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
  107. package/lib-commonjs/components/CompoundButton/useCompoundButton.d.ts +1 -1
  108. package/lib-commonjs/components/CompoundButton/useCompoundButton.js +12 -13
  109. package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
  110. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +2 -1
  111. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +58 -53
  112. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  113. package/lib-commonjs/components/MenuButton/MenuButton.js +8 -8
  114. package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
  115. package/lib-commonjs/components/MenuButton/MenuButton.types.d.ts +3 -4
  116. package/lib-commonjs/components/MenuButton/index.d.ts +1 -1
  117. package/lib-commonjs/components/MenuButton/index.js +10 -4
  118. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  119. package/lib-commonjs/components/MenuButton/renderMenuButton.d.ts +1 -1
  120. package/lib-commonjs/components/MenuButton/renderMenuButton.js +17 -14
  121. package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
  122. package/lib-commonjs/components/MenuButton/useMenuButton.d.ts +1 -1
  123. package/lib-commonjs/components/MenuButton/useMenuButton.js +15 -16
  124. package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
  125. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +2 -1
  126. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +12 -9
  127. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  128. package/lib-commonjs/components/SplitButton/SplitButton.js +8 -8
  129. package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
  130. package/lib-commonjs/components/SplitButton/SplitButton.types.d.ts +6 -4
  131. package/lib-commonjs/components/SplitButton/index.d.ts +1 -1
  132. package/lib-commonjs/components/SplitButton/index.js +10 -4
  133. package/lib-commonjs/components/SplitButton/index.js.map +1 -1
  134. package/lib-commonjs/components/SplitButton/renderSplitButton.d.ts +1 -1
  135. package/lib-commonjs/components/SplitButton/renderSplitButton.js +13 -12
  136. package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
  137. package/lib-commonjs/components/SplitButton/useSplitButton.d.ts +1 -1
  138. package/lib-commonjs/components/SplitButton/useSplitButton.js +46 -51
  139. package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
  140. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +2 -1
  141. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +44 -39
  142. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  143. package/lib-commonjs/components/ToggleButton/ToggleButton.js +8 -8
  144. package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
  145. package/lib-commonjs/components/ToggleButton/index.d.ts +1 -1
  146. package/lib-commonjs/components/ToggleButton/index.js +10 -4
  147. package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
  148. package/lib-commonjs/components/ToggleButton/renderToggleButton.d.ts +1 -1
  149. package/lib-commonjs/components/ToggleButton/renderToggleButton.js +3 -3
  150. package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -1
  151. package/lib-commonjs/components/ToggleButton/useToggleButton.d.ts +1 -1
  152. package/lib-commonjs/components/ToggleButton/useToggleButton.js +36 -35
  153. package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
  154. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +2 -1
  155. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +51 -45
  156. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  157. package/lib-commonjs/index.js +1 -1
  158. package/package.json +12 -15
  159. package/lib/common/isConformant.d.ts +0 -4
  160. package/lib/common/isConformant.js +0 -13
  161. package/lib/common/isConformant.js.map +0 -1
  162. package/lib-commonjs/common/isConformant.d.ts +0 -4
  163. package/lib-commonjs/common/isConformant.js +0 -24
  164. package/lib-commonjs/common/isConformant.js.map +0 -1
@@ -1,17 +1,17 @@
1
- import { ARIAButtonShorthandProps } from '@fluentui/react-aria';
1
+ import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
2
2
  import type { ComponentProps } from '@fluentui/react-utilities';
3
3
  import type { ComponentState } from '@fluentui/react-utilities';
4
4
  import { ForwardRefComponent } from '@fluentui/react-utilities';
5
- import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
6
- import type { MenuTriggerChildProps } from '@fluentui/react-menu';
7
- import type { ObjectShorthandProps } from '@fluentui/react-utilities';
8
5
  import * as React_2 from 'react';
6
+ import type { Slot } from '@fluentui/react-utilities';
9
7
 
10
8
  /**
11
9
  * Buttons give people a way to trigger an action.
12
10
  */
13
11
  export declare const Button: ForwardRefComponent<ButtonProps>;
14
12
 
13
+ export declare const buttonClassName = "fui-Button";
14
+
15
15
  export declare type ButtonCommons = {
16
16
  /**
17
17
  * A button can have its content and borders styled for greater emphasis or to be subtle.
@@ -42,7 +42,7 @@ export declare type ButtonCommons = {
42
42
  * A button can format its icon to appear before or after its content.
43
43
  * @default 'before'
44
44
  */
45
- iconPosition: 'before' | 'after';
45
+ iconPosition?: 'before' | 'after';
46
46
  /**
47
47
  * A button can be rounded, circular, or square.
48
48
  * @default 'rounded'
@@ -61,11 +61,11 @@ export declare type ButtonSlots = {
61
61
  /**
62
62
  * Root of the component that renders as either a `<button>` tag or an `<a>` tag.
63
63
  */
64
- root: ARIAButtonShorthandProps;
64
+ root: Slot<ARIAButtonSlotProps>;
65
65
  /**
66
66
  * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.
67
67
  */
68
- icon?: IntrinsicShorthandProps<'span'>;
68
+ icon?: Slot<'span'>;
69
69
  };
70
70
 
71
71
  export declare type ButtonState = ComponentState<ButtonSlots> & ButtonCommons & {
@@ -81,17 +81,19 @@ export declare type ButtonState = ComponentState<ButtonSlots> & ButtonCommons &
81
81
  */
82
82
  export declare const CompoundButton: ForwardRefComponent<CompoundButtonProps>;
83
83
 
84
- export declare type CompoundButtonProps = ComponentProps<CompoundButtonSlots> & Partial<ButtonCommons>;
84
+ export declare const compoundButtonClassName = "fui-CompoundButton";
85
+
86
+ export declare type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Partial<ButtonCommons>;
85
87
 
86
88
  export declare type CompoundButtonSlots = ButtonSlots & {
87
89
  /**
88
90
  * Second line of text that describes the action this button takes.
89
91
  */
90
- secondaryContent?: IntrinsicShorthandProps<'span'>;
92
+ secondaryContent?: Slot<'span'>;
91
93
  /**
92
94
  * Container that wraps the children and the secondaryContent slot.
93
95
  */
94
- contentContainer: IntrinsicShorthandProps<'span'>;
96
+ contentContainer: NonNullable<Slot<'span'>>;
95
97
  };
96
98
 
97
99
  export declare type CompoundButtonState = ComponentState<CompoundButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components'>;
@@ -101,13 +103,15 @@ export declare type CompoundButtonState = ComponentState<CompoundButtonSlots> &
101
103
  */
102
104
  export declare const MenuButton: ForwardRefComponent<MenuButtonProps>;
103
105
 
104
- export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>> & Partial<MenuTriggerChildProps>;
106
+ export declare const menuButtonClassName = "fui-MenuButton";
107
+
108
+ export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>>;
105
109
 
106
110
  export declare type MenuButtonSlots = ButtonSlots & {
107
111
  /**
108
112
  * Menu icon that indicates that this button has a menu that can be expanded.
109
113
  */
110
- menuIcon?: IntrinsicShorthandProps<'span'>;
114
+ menuIcon?: Slot<'span'>;
111
115
  };
112
116
 
113
117
  export declare type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;
@@ -115,24 +119,24 @@ export declare type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<But
115
119
  /**
116
120
  * Renders a Button component by passing the state defined props to the appropriate slots.
117
121
  */
118
- declare const renderButton: (state: ButtonState) => JSX.Element;
119
- export { renderButton }
120
- export { renderButton as renderToggleButton }
122
+ declare const renderButton_unstable: (state: ButtonState) => JSX.Element;
123
+ export { renderButton_unstable }
124
+ export { renderButton_unstable as renderToggleButton_unstable }
121
125
 
122
126
  /**
123
127
  * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
124
128
  */
125
- export declare const renderCompoundButton: (state: CompoundButtonState) => JSX.Element;
129
+ export declare const renderCompoundButton_unstable: (state: CompoundButtonState) => JSX.Element;
126
130
 
127
131
  /**
128
132
  * Renders a MenuButton component by passing the state defined props to the appropriate slots.
129
133
  */
130
- export declare const renderMenuButton: (state: MenuButtonState) => JSX.Element;
134
+ export declare const renderMenuButton_unstable: (state: MenuButtonState) => JSX.Element;
131
135
 
132
136
  /**
133
137
  * Renders a SplitButton component by passing the state defined props to the appropriate slots.
134
138
  */
135
- export declare const renderSplitButton: (state: SplitButtonState) => JSX.Element;
139
+ export declare const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Element;
136
140
 
137
141
  /**
138
142
  * SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
@@ -140,21 +144,23 @@ export declare const renderSplitButton: (state: SplitButtonState) => JSX.Element
140
144
  */
141
145
  export declare const SplitButton: ForwardRefComponent<SplitButtonProps>;
142
146
 
147
+ export declare const splitButtonClassName = "fui-SplitButton";
148
+
143
149
  export declare type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root'> & Omit<MenuButtonProps, 'root'>;
144
150
 
145
151
  export declare type SplitButtonSlots = {
146
152
  /**
147
153
  * Root of the component that wraps the primary action button and menu button.
148
154
  */
149
- root: IntrinsicShorthandProps<'div'>;
155
+ root: Slot<'div'>;
150
156
  /**
151
157
  * Button that opens menu with secondary actions in SplitButton.
152
158
  */
153
- menuButton?: ObjectShorthandProps<MenuButtonProps>;
159
+ menuButton?: Slot<typeof MenuButton>;
154
160
  /**
155
161
  * Button to perform primary action in SplitButton.
156
162
  */
157
- primaryActionButton?: ObjectShorthandProps<ButtonProps>;
163
+ primaryActionButton?: Slot<typeof Button>;
158
164
  };
159
165
 
160
166
  export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<ButtonState, 'components' | 'iconOnly' | 'root'> & Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;
@@ -164,6 +170,8 @@ export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<B
164
170
  */
165
171
  export declare const ToggleButton: ForwardRefComponent<ToggleButtonProps>;
166
172
 
173
+ export declare const toggleButtonClassName = "fui-ToggleButton";
174
+
167
175
  export declare type ToggleButtonCommons = {
168
176
  /**
169
177
  * Defines the controlled checked state of the `ToggleButton`.
@@ -190,34 +198,34 @@ export declare type ToggleButtonState = ButtonState & ToggleButtonCommons;
190
198
  * @param props - User provided props to the Button component.
191
199
  * @param ref - User provided ref to be passed to the Button component.
192
200
  */
193
- export declare const useButton: (props: ButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;
201
+ export declare const useButton_unstable: (props: ButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;
194
202
 
195
- export declare const useButtonStyles: (state: ButtonState) => ButtonState;
203
+ export declare const useButtonStyles_unstable: (state: ButtonState) => ButtonState;
196
204
 
197
205
  /**
198
206
  * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
199
207
  * @param props - User provided props to the CompoundButton component.
200
208
  * @param ref - User provided ref to be passed to the CompoundButton component.
201
209
  */
202
- export declare const useCompoundButton: ({ contentContainer, secondaryContent, ...props }: CompoundButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonState;
210
+ export declare const useCompoundButton_unstable: ({ contentContainer, secondaryContent, ...props }: CompoundButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonState;
203
211
 
204
- export declare const useCompoundButtonStyles: (state: CompoundButtonState) => CompoundButtonState;
212
+ export declare const useCompoundButtonStyles_unstable: (state: CompoundButtonState) => CompoundButtonState;
205
213
 
206
214
  /**
207
215
  * Given user props, returns the final state for a MenuButton.
208
216
  */
209
- export declare const useMenuButton: ({ menuIcon, ...props }: MenuButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;
217
+ export declare const useMenuButton_unstable: ({ menuIcon, ...props }: MenuButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;
210
218
 
211
- export declare const useMenuButtonStyles: (state: MenuButtonState) => MenuButtonState;
219
+ export declare const useMenuButtonStyles_unstable: (state: MenuButtonState) => MenuButtonState;
212
220
 
213
221
  /**
214
222
  * Given user props, defines default props for the SplitButton and returns processed state.
215
223
  * @param props - User provided props to the SplitButton component.
216
224
  * @param ref - User provided ref to be passed to the SplitButton component.
217
225
  */
218
- export declare const useSplitButton: (props: SplitButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;
226
+ export declare const useSplitButton_unstable: (props: SplitButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;
219
227
 
220
- export declare const useSplitButtonStyles: (state: SplitButtonState) => SplitButtonState;
228
+ export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;
221
229
 
222
230
  /**
223
231
  * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
@@ -225,8 +233,8 @@ export declare const useSplitButtonStyles: (state: SplitButtonState) => SplitBut
225
233
  * @param props - User provided props to the ToggleButton component.
226
234
  * @param ref - User provided ref to be passed to the ToggleButton component.
227
235
  */
228
- export declare const useToggleButton: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
236
+ export declare const useToggleButton_unstable: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
229
237
 
230
- export declare const useToggleButtonStyles: (state: ToggleButtonState) => ToggleButtonState;
238
+ export declare const useToggleButtonStyles_unstable: (state: ToggleButtonState) => ToggleButtonState;
231
239
 
232
240
  export { }
@@ -1,15 +1,15 @@
1
1
  import * as React from 'react';
2
- import { renderButton } from './renderButton';
3
- import { useButton } from './useButton';
4
- import { useButtonStyles } from './useButtonStyles';
2
+ import { renderButton_unstable } from './renderButton';
3
+ import { useButton_unstable } from './useButton';
4
+ import { useButtonStyles_unstable } from './useButtonStyles';
5
5
  /**
6
6
  * Buttons give people a way to trigger an action.
7
7
  */
8
8
 
9
- export var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
10
- var state = useButton(props, ref);
11
- useButtonStyles(state);
12
- return renderButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
9
+ export const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
10
+ const state = useButton_unstable(props, ref);
11
+ useButtonStyles_unstable(state);
12
+ return renderButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
13
13
  });
14
14
  Button.displayName = 'Button';
15
15
  //# sourceMappingURL=Button.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,gBAA7B;AACA,SAAS,SAAT,QAA0B,aAA1B;AACA,SAAS,eAAT,QAAgC,mBAAhC;AAIA;;AAEG;;AACH,OAAO,IAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAClF,MAAM,KAAK,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAAvB;AAEA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,YAAY,CAAC,KAAD,CAAnB,CALkF,CAMlF;AACD,CAPuD,CAAjD;AASP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;AAEA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,qBAAqB,CAAC,KAAD,CAA5B,CALsF,CAMtF;AACD,CAPuD,CAAjD;AASP,MAAM,CAAC,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'
@@ -2,4 +2,4 @@ export * from './Button';
2
2
  export * from './Button.types';
3
3
  export * from './renderButton';
4
4
  export * from './useButton';
5
- export { useButtonStyles } from './useButtonStyles';
5
+ export { buttonClassName, useButtonStyles_unstable } from './useButtonStyles';
@@ -2,5 +2,5 @@ export * from './Button';
2
2
  export * from './Button.types';
3
3
  export * from './renderButton';
4
4
  export * from './useButton';
5
- export { useButtonStyles } from './useButtonStyles';
5
+ export { buttonClassName, useButtonStyles_unstable } from './useButtonStyles';
6
6
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC"}
@@ -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;
@@ -1,17 +1,21 @@
1
- import { __assign } from "tslib";
2
1
  import * as React from 'react';
3
2
  import { getSlots } from '@fluentui/react-utilities';
4
3
  /**
5
4
  * Renders a Button component by passing the state defined props to the appropriate slots.
6
5
  */
7
6
 
8
- export var renderButton = function (state) {
9
- var _a = getSlots(state, ['root', 'icon']),
10
- slots = _a.slots,
11
- slotProps = _a.slotProps;
12
-
13
- var iconOnly = state.iconOnly,
14
- iconPosition = state.iconPosition;
15
- return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), iconPosition !== 'after' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), !iconOnly && state.root.children, iconPosition === 'after' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)));
7
+ export const renderButton_unstable = state => {
8
+ const {
9
+ slots,
10
+ slotProps
11
+ } = getSlots(state);
12
+ const {
13
+ iconOnly,
14
+ iconPosition
15
+ } = state;
16
+ return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
17
+ }, iconPosition !== 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
18
+ }), !iconOnly && state.root.children, iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
19
+ }));
16
20
  };
17
21
  //# sourceMappingURL=renderButton.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Button/renderButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,IAAM,YAAY,GAAG,UAAC,KAAD,EAAmB;AACvC,MAAA,EAAA,GAAuB,QAAQ,CAAc,KAAd,EAAqB,CAAC,MAAD,EAAS,MAAT,CAArB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACE,MAAA,QAAQ,GAAmB,KAAK,CAAxB,QAAR;AAAA,MAAU,YAAY,GAAK,KAAK,CAAV,YAAtB;AAER,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAD/B,EAEG,CAAC,QAAD,IAAa,KAAK,CAAC,IAAN,CAAW,QAF3B,EAGG,YAAY,KAAK,OAAjB,iBAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAH/B,CADF;AAOD,CAXM","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/Button/renderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAc,KAAd,CAArC;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,iBAA0C,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,iBAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAH7C,CADF;AAOD,CAXM","sourceRoot":""}
@@ -5,4 +5,4 @@ import type { ButtonProps, ButtonState } from './Button.types';
5
5
  * @param props - User provided props to the Button component.
6
6
  * @param ref - User provided ref to be passed to the Button component.
7
7
  */
8
- export declare const useButton: (props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;
8
+ export declare const useButton_unstable: (props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;
@@ -6,32 +6,28 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
6
6
  * @param ref - User provided ref to be passed to the Button component.
7
7
  */
8
8
 
9
- export var useButton = function (props, ref) {
10
- var appearance = props.appearance,
11
- as = props.as,
12
- _a = props.block,
13
- block = _a === void 0 ? false : _a,
14
- _b = props.disabled,
15
- disabled = _b === void 0 ? false : _b,
16
- _c = props.disabledFocusable,
17
- disabledFocusable = _c === void 0 ? false : _c,
18
- icon = props.icon,
19
- _d = props.iconPosition,
20
- iconPosition = _d === void 0 ? 'before' : _d,
21
- _e = props.shape,
22
- shape = _e === void 0 ? 'rounded' : _e,
23
- _f = props.size,
24
- size = _f === void 0 ? 'medium' : _f;
25
- var iconShorthand = resolveShorthand(icon);
9
+ export const useButton_unstable = (props, ref) => {
10
+ const {
11
+ appearance,
12
+ as,
13
+ block = false,
14
+ disabled = false,
15
+ disabledFocusable = false,
16
+ icon,
17
+ iconPosition = 'before',
18
+ shape = 'rounded',
19
+ size = 'medium'
20
+ } = props;
21
+ const iconShorthand = resolveShorthand(icon);
26
22
  return {
27
23
  // Props passed at the top-level
28
- appearance: appearance,
29
- block: block,
30
- disabled: disabled,
31
- disabledFocusable: disabledFocusable,
32
- iconPosition: iconPosition,
33
- shape: shape,
34
- size: size,
24
+ appearance,
25
+ block,
26
+ disabled,
27
+ disabledFocusable,
28
+ iconPosition,
29
+ shape,
30
+ size,
35
31
  // State calculated from a set of props
36
32
  iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
37
33
  // Slots definition
@@ -44,7 +40,8 @@ export var useButton = function (props, ref) {
44
40
  defaultProps: {
45
41
  // useARIAButton isn't working with React.Ref<HTMLButtonElement | HTMLAnchorElement>
46
42
  ref: ref,
47
- type: 'button'
43
+ type: 'button' // This is added because the default for type is 'submit'
44
+
48
45
  }
49
46
  })),
50
47
  icon: iconShorthand
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,QAA8B,sBAA9B;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;AAIG;;AACH,OAAO,IAAM,SAAS,GAAG,UAAC,KAAD,EAAqB,GAArB,EAA0E;AAE/F,MAAA,UAAU,GASR,KAAK,CATG,UAAV;AAAA,MACA,EAAE,GAQA,KAAK,CARL,EADF;AAAA,MAEA,EAAA,GAOE,KAAK,CAPM,KAFb;AAAA,MAEA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAFb;AAAA,MAGA,EAAA,GAME,KAAK,CANS,QAHhB;AAAA,MAGA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAHhB;AAAA,MAIA,EAAA,GAKE,KAAK,CALkB,iBAJzB;AAAA,MAIA,iBAAiB,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAJzB;AAAA,MAKA,IAAI,GAIF,KAAK,CAJH,IALJ;AAAA,MAMA,EAAA,GAGE,KAAK,CAHgB,YANvB;AAAA,MAMA,YAAY,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EANvB;AAAA,MAOA,EAAA,GAEE,KAAK,CAFU,KAPjB;AAAA,MAOA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,SAAH,GAAY,EAPjB;AAAA,MAQA,EAAA,GACE,KAAK,CADQ,IARf;AAAA,MAQA,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EARf;AAUF,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAD,CAAtC;AAEA,SAAO;AACL;AACA,IAAA,UAAU,EAAA,UAFL;AAGL,IAAA,KAAK,EAAA,KAHA;AAIL,IAAA,QAAQ,EAAA,QAJH;AAKL,IAAA,iBAAiB,EAAA,iBALZ;AAML,IAAA,YAAY,EAAA,YANP;AAOL,IAAA,KAAK,EAAA,KAPA;AAQL,IAAA,IAAI,EAAA,IARC;AAUL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAXZ;AAaL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAdP;AAmBL,IAAA,IAAI,EAAE,qBAAqB,CACzB,EAAE,IAAI,QADmB,EAEzB,aAAa,CAAC,KAAD,EAAQ;AACnB,MAAA,QAAQ,EAAE,IADS;AAEnB,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE;AAHM;AAFK,KAAR,CAFY,CAnBtB;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CA9CM","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/Button/useButton.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,QAA8B,sBAA9B;AAEA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;AAIG;;AACH,OAAO,MAAM,kBAAkB,GAAG,CAChC,KADgC,EAEhC,GAFgC,KAGjB;AACf,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,EAFI;AAGJ,IAAA,KAAK,GAAG,KAHJ;AAIJ,IAAA,QAAQ,GAAG,KAJP;AAKJ,IAAA,iBAAiB,GAAG,KALhB;AAMJ,IAAA,IANI;AAOJ,IAAA,YAAY,GAAG,QAPX;AAQJ,IAAA,KAAK,GAAG,SARJ;AASJ,IAAA,IAAI,GAAG;AATH,MAUF,KAVJ;AAWA,QAAM,aAAa,GAAG,gBAAgB,CAAC,IAAD,CAAtC;AAEA,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,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAXZ;AAaL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAdP;AAmBL,IAAA,IAAI,EAAE,qBAAqB,CACzB,EAAE,IAAI,QADmB,EAEzB,aAAa,CAAsB,KAAtB,EAA6B;AACxC,MAAA,QAAQ,EAAE,IAD8B;AAExC,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE,QAHM,CAGI;;AAHJ;AAF0B,KAA7B,CAFY,CAnBtB;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CAjDM","sourceRoot":""}
@@ -1,10 +1,3 @@
1
1
  import type { ButtonState } from './Button.types';
2
- export declare const buttonSpacing: {
3
- smallest: string;
4
- smaller: string;
5
- small: string;
6
- medium: string;
7
- large: string;
8
- larger: string;
9
- };
10
- export declare const useButtonStyles: (state: ButtonState) => ButtonState;
2
+ export declare const buttonClassName = "fui-Button";
3
+ export declare const useButtonStyles_unstable: (state: ButtonState) => ButtonState;