@fluentui/react-button 9.7.1 → 9.72.9-experimental.component-base-hooks.20260122-49fc330360.0

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 (137) hide show
  1. package/CHANGELOG.md +18 -2
  2. package/dist/index.d.ts +65 -3
  3. package/lib/Button.js +1 -1
  4. package/lib/Button.js.map +1 -1
  5. package/lib/CompoundButton.js +1 -1
  6. package/lib/CompoundButton.js.map +1 -1
  7. package/lib/MenuButton.js +1 -1
  8. package/lib/MenuButton.js.map +1 -1
  9. package/lib/SplitButton.js +1 -1
  10. package/lib/SplitButton.js.map +1 -1
  11. package/lib/ToggleButton.js +1 -1
  12. package/lib/ToggleButton.js.map +1 -1
  13. package/lib/components/Button/Button.types.js.map +1 -1
  14. package/lib/components/Button/index.js +1 -0
  15. package/lib/components/Button/index.js.map +1 -1
  16. package/lib/components/Button/useButton.js +4 -22
  17. package/lib/components/Button/useButton.js.map +1 -1
  18. package/lib/components/Button/useButtonBase.js +34 -0
  19. package/lib/components/Button/useButtonBase.js.map +1 -0
  20. package/lib/components/CompoundButton/CompoundButton.types.js.map +1 -1
  21. package/lib/components/CompoundButton/index.js +1 -0
  22. package/lib/components/CompoundButton/index.js.map +1 -1
  23. package/lib/components/CompoundButton/useCompoundButton.js +11 -23
  24. package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
  25. package/lib/components/CompoundButton/useCompoundButtonBase.js +31 -0
  26. package/lib/components/CompoundButton/useCompoundButtonBase.js.map +1 -0
  27. package/lib/components/MenuButton/MenuButton.types.js.map +1 -1
  28. package/lib/components/MenuButton/index.js +1 -0
  29. package/lib/components/MenuButton/index.js.map +1 -1
  30. package/lib/components/MenuButton/useMenuButton.js +14 -23
  31. package/lib/components/MenuButton/useMenuButton.js.map +1 -1
  32. package/lib/components/MenuButton/useMenuButtonBase.js +27 -0
  33. package/lib/components/MenuButton/useMenuButtonBase.js.map +1 -0
  34. package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
  35. package/lib/components/SplitButton/index.js +1 -0
  36. package/lib/components/SplitButton/index.js.map +1 -1
  37. package/lib/components/SplitButton/useSplitButton.js +16 -53
  38. package/lib/components/SplitButton/useSplitButton.js.map +1 -1
  39. package/lib/components/SplitButton/useSplitButtonBase.js +57 -0
  40. package/lib/components/SplitButton/useSplitButtonBase.js.map +1 -0
  41. package/lib/components/ToggleButton/ToggleButton.types.js.map +1 -1
  42. package/lib/components/ToggleButton/index.js +1 -0
  43. package/lib/components/ToggleButton/index.js.map +1 -1
  44. package/lib/components/ToggleButton/useToggleButton.js +13 -5
  45. package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
  46. package/lib/components/ToggleButton/useToggleButtonBase.js +13 -0
  47. package/lib/components/ToggleButton/useToggleButtonBase.js.map +1 -0
  48. package/lib/index.js +6 -0
  49. package/lib/index.js.map +1 -1
  50. package/lib-commonjs/Button.js +3 -0
  51. package/lib-commonjs/Button.js.map +1 -1
  52. package/lib-commonjs/CompoundButton.js +3 -0
  53. package/lib-commonjs/CompoundButton.js.map +1 -1
  54. package/lib-commonjs/MenuButton.js +3 -0
  55. package/lib-commonjs/MenuButton.js.map +1 -1
  56. package/lib-commonjs/SplitButton.js +3 -0
  57. package/lib-commonjs/SplitButton.js.map +1 -1
  58. package/lib-commonjs/ToggleButton.js +3 -0
  59. package/lib-commonjs/ToggleButton.js.map +1 -1
  60. package/lib-commonjs/components/Button/Button.types.js.map +1 -1
  61. package/lib-commonjs/components/Button/index.js +4 -0
  62. package/lib-commonjs/components/Button/index.js.map +1 -1
  63. package/lib-commonjs/components/Button/useButton.js +4 -22
  64. package/lib-commonjs/components/Button/useButton.js.map +1 -1
  65. package/lib-commonjs/components/Button/useButtonBase.js +41 -0
  66. package/lib-commonjs/components/Button/useButtonBase.js.map +1 -0
  67. package/lib-commonjs/components/CompoundButton/CompoundButton.types.js.map +1 -1
  68. package/lib-commonjs/components/CompoundButton/index.js +4 -0
  69. package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
  70. package/lib-commonjs/components/CompoundButton/useCompoundButton.js +11 -23
  71. package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
  72. package/lib-commonjs/components/CompoundButton/useCompoundButtonBase.js +38 -0
  73. package/lib-commonjs/components/CompoundButton/useCompoundButtonBase.js.map +1 -0
  74. package/lib-commonjs/components/MenuButton/MenuButton.types.js.map +1 -1
  75. package/lib-commonjs/components/MenuButton/index.js +4 -0
  76. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  77. package/lib-commonjs/components/MenuButton/useMenuButton.js +14 -23
  78. package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
  79. package/lib-commonjs/components/MenuButton/useMenuButtonBase.js +36 -0
  80. package/lib-commonjs/components/MenuButton/useMenuButtonBase.js.map +1 -0
  81. package/lib-commonjs/components/SplitButton/SplitButton.types.js.map +1 -1
  82. package/lib-commonjs/components/SplitButton/index.js +4 -0
  83. package/lib-commonjs/components/SplitButton/index.js.map +1 -1
  84. package/lib-commonjs/components/SplitButton/useSplitButton.js +16 -53
  85. package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
  86. package/lib-commonjs/components/SplitButton/useSplitButtonBase.js +64 -0
  87. package/lib-commonjs/components/SplitButton/useSplitButtonBase.js.map +1 -0
  88. package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map +1 -1
  89. package/lib-commonjs/components/ToggleButton/index.js +4 -0
  90. package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
  91. package/lib-commonjs/components/ToggleButton/useToggleButton.js +12 -4
  92. package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
  93. package/lib-commonjs/components/ToggleButton/useToggleButtonBase.js +19 -0
  94. package/lib-commonjs/components/ToggleButton/useToggleButtonBase.js.map +1 -0
  95. package/lib-commonjs/index.js +15 -0
  96. package/lib-commonjs/index.js.map +1 -1
  97. package/package.json +9 -21
  98. package/lib/components/Button/useButtonStyles.styles.headless.js +0 -36
  99. package/lib/components/Button/useButtonStyles.styles.headless.js.map +0 -1
  100. package/lib/components/Button/useButtonStyles.styles.raw.headless.js +0 -36
  101. package/lib/components/Button/useButtonStyles.styles.raw.headless.js.map +0 -1
  102. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.headless.js +0 -49
  103. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.headless.js.map +0 -1
  104. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.headless.js +0 -49
  105. package/lib/components/CompoundButton/useCompoundButtonStyles.styles.raw.headless.js.map +0 -1
  106. package/lib/components/MenuButton/useMenuButtonStyles.styles.headless.js +0 -44
  107. package/lib/components/MenuButton/useMenuButtonStyles.styles.headless.js.map +0 -1
  108. package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.headless.js +0 -44
  109. package/lib/components/MenuButton/useMenuButtonStyles.styles.raw.headless.js.map +0 -1
  110. package/lib/components/SplitButton/useSplitButtonStyles.styles.headless.js +0 -39
  111. package/lib/components/SplitButton/useSplitButtonStyles.styles.headless.js.map +0 -1
  112. package/lib/components/SplitButton/useSplitButtonStyles.styles.raw.headless.js +0 -39
  113. package/lib/components/SplitButton/useSplitButtonStyles.styles.raw.headless.js.map +0 -1
  114. package/lib/components/ToggleButton/useToggleButtonStyles.styles.headless.js +0 -36
  115. package/lib/components/ToggleButton/useToggleButtonStyles.styles.headless.js.map +0 -1
  116. package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.headless.js +0 -36
  117. package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.headless.js.map +0 -1
  118. package/lib-commonjs/components/Button/useButtonStyles.styles.headless.js +0 -52
  119. package/lib-commonjs/components/Button/useButtonStyles.styles.headless.js.map +0 -1
  120. package/lib-commonjs/components/Button/useButtonStyles.styles.raw.headless.js +0 -52
  121. package/lib-commonjs/components/Button/useButtonStyles.styles.raw.headless.js.map +0 -1
  122. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.headless.js +0 -64
  123. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.headless.js.map +0 -1
  124. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.headless.js +0 -64
  125. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.headless.js.map +0 -1
  126. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.headless.js +0 -60
  127. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.headless.js.map +0 -1
  128. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.headless.js +0 -60
  129. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.headless.js.map +0 -1
  130. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.headless.js +0 -55
  131. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.headless.js.map +0 -1
  132. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.headless.js +0 -55
  133. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.headless.js.map +0 -1
  134. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.headless.js +0 -52
  135. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.headless.js.map +0 -1
  136. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.headless.js +0 -52
  137. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.headless.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,12 +1,28 @@
1
1
  # Change Log - @fluentui/react-button
2
2
 
3
- This log was last generated on Wed, 17 Dec 2025 18:06:04 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 22 Jan 2026 16:12:56 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.72.9-experimental.component-base-hooks.20260122-49fc330360.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0)
8
+
9
+ Thu, 22 Jan 2026 16:12:56 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.7.1..@fluentui/react-button_v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0)
11
+
12
+ ### Changes
13
+
14
+ - Release 9.72.9-experimental.component-base-hooks.20260122-49fc330360 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
+ - Bump @fluentui/keyboard-keys to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
16
+ - Bump @fluentui/react-aria to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
17
+ - Bump @fluentui/react-jsx-runtime to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
18
+ - Bump @fluentui/react-shared-contexts to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
19
+ - Bump @fluentui/react-tabster to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
20
+ - Bump @fluentui/react-theme to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
21
+ - Bump @fluentui/react-utilities to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
22
+
7
23
  ## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.7.1)
8
24
 
9
- Wed, 17 Dec 2025 18:06:04 GMT
25
+ Wed, 17 Dec 2025 18:10:11 GMT
10
26
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.7.0..@fluentui/react-button_v9.7.1)
11
27
 
12
28
  ### Patches
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
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
+ import type { DistributiveOmit } from '@fluentui/react-utilities';
4
5
  import { ForwardRefComponent } from '@fluentui/react-utilities';
5
6
  import type { JSXElement } from '@fluentui/react-utilities';
6
7
  import * as React_2 from 'react';
@@ -12,6 +13,10 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
12
13
  */
13
14
  export declare const Button: ForwardRefComponent<ButtonProps>;
14
15
 
16
+ export declare type ButtonBaseProps = DistributiveOmit<ButtonProps, ButtonDesignPropNames>;
17
+
18
+ export declare type ButtonBaseState = DistributiveOmit<ButtonState, ButtonDesignPropNames>;
19
+
15
20
  export declare const buttonClassNames: SlotClassNames<ButtonSlots>;
16
21
 
17
22
  /**
@@ -28,6 +33,13 @@ export declare interface ButtonContextValue {
28
33
  size?: ButtonSize;
29
34
  }
30
35
 
36
+ /**
37
+ * Internal use only: lists prop names related to Button design for use within Button components.
38
+ *
39
+ * @internal
40
+ */
41
+ declare type ButtonDesignPropNames = 'appearance' | 'size' | 'shape';
42
+
31
43
  export declare type ButtonProps = ComponentProps<ButtonSlots> & {
32
44
  /**
33
45
  * A button can have its content and borders styled for greater emphasis or to be subtle.
@@ -104,6 +116,10 @@ export declare type ButtonState = ComponentState<ButtonSlots> & Required<Pick<Bu
104
116
  */
105
117
  export declare const CompoundButton: ForwardRefComponent<CompoundButtonProps>;
106
118
 
119
+ export declare type CompoundButtonBaseProps = DistributiveOmit<CompoundButtonProps, ButtonDesignPropNames>;
120
+
121
+ export declare type CompoundButtonBaseState = DistributiveOmit<CompoundButtonState, ButtonDesignPropNames>;
122
+
107
123
  export declare const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots>;
108
124
 
109
125
  export declare type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;
@@ -127,6 +143,10 @@ export declare type CompoundButtonState = ComponentState<CompoundButtonSlots> &
127
143
  */
128
144
  export declare const MenuButton: ForwardRefComponent<MenuButtonProps>;
129
145
 
146
+ export declare type MenuButtonBaseProps = DistributiveOmit<MenuButtonProps, ButtonDesignPropNames>;
147
+
148
+ export declare type MenuButtonBaseState = DistributiveOmit<MenuButtonState, ButtonDesignPropNames>;
149
+
130
150
  export declare const menuButtonClassNames: SlotClassNames<MenuButtonSlots>;
131
151
 
132
152
  export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;
@@ -168,6 +188,10 @@ export declare const renderSplitButton_unstable: (state: SplitButtonState) => JS
168
188
  */
169
189
  export declare const SplitButton: ForwardRefComponent<SplitButtonProps>;
170
190
 
191
+ export declare type SplitButtonBaseProps = DistributiveOmit<SplitButtonProps, ButtonDesignPropNames>;
192
+
193
+ export declare type SplitButtonBaseState = DistributiveOmit<SplitButtonState, ButtonDesignPropNames>;
194
+
171
195
  export declare const splitButtonClassNames: SlotClassNames<SplitButtonSlots>;
172
196
 
173
197
  export declare type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root' | 'as'> & Omit<MenuButtonProps, 'root' | 'as'>;
@@ -194,6 +218,10 @@ export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<B
194
218
  */
195
219
  export declare const ToggleButton: ForwardRefComponent<ToggleButtonProps>;
196
220
 
221
+ export declare type ToggleButtonBaseProps = DistributiveOmit<ToggleButtonProps, ButtonDesignPropNames>;
222
+
223
+ export declare type ToggleButtonBaseState = DistributiveOmit<ToggleButtonState, ButtonDesignPropNames>;
224
+
197
225
  export declare const toggleButtonClassNames: SlotClassNames<ButtonSlots>;
198
226
 
199
227
  export declare type ToggleButtonProps = ButtonProps & {
@@ -223,6 +251,13 @@ export declare type ToggleButtonState = ButtonState & Required<Pick<ToggleButton
223
251
  */
224
252
  export declare const useButton_unstable: (props: ButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonState;
225
253
 
254
+ /**
255
+ * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
256
+ * @param props - User provided props to the Button component.
257
+ * @param ref - User provided ref to be passed to the Button component.
258
+ */
259
+ export declare const useButtonBase_unstable: (props: ButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ButtonBaseState;
260
+
226
261
  /**
227
262
  * @internal
228
263
  * Internal context hook used to update default values between internal components
@@ -236,14 +271,26 @@ export declare const useButtonStyles_unstable: (state: ButtonState) => ButtonSta
236
271
  * @param props - User provided props to the CompoundButton component.
237
272
  * @param ref - User provided ref to be passed to the CompoundButton component.
238
273
  */
239
- export declare const useCompoundButton_unstable: ({ contentContainer, secondaryContent, ...props }: CompoundButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonState;
274
+ export declare const useCompoundButton_unstable: (props: CompoundButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonState;
275
+
276
+ /**
277
+ * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
278
+ * @param props - User provided props to the CompoundButton component.
279
+ * @param ref - User provided ref to be passed to the CompoundButton component.
280
+ */
281
+ export declare const useCompoundButtonBase_unstable: ({ contentContainer, secondaryContent, ...props }: CompoundButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonBaseState;
240
282
 
241
283
  export declare const useCompoundButtonStyles_unstable: (state: CompoundButtonState) => CompoundButtonState;
242
284
 
243
285
  /**
244
286
  * Given user props, returns the final state for a MenuButton.
245
287
  */
246
- export declare const useMenuButton_unstable: ({ menuIcon, ...props }: MenuButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;
288
+ export declare const useMenuButton_unstable: (props: MenuButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;
289
+
290
+ /**
291
+ * Given user props, returns the final state for a MenuButton.
292
+ */
293
+ export declare const useMenuButtonBase_unstable: ({ menuIcon, ...props }: MenuButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonBaseState;
247
294
 
248
295
  export declare const useMenuButtonStyles_unstable: (state: MenuButtonState) => MenuButtonState;
249
296
 
@@ -254,16 +301,31 @@ export declare const useMenuButtonStyles_unstable: (state: MenuButtonState) => M
254
301
  */
255
302
  export declare const useSplitButton_unstable: (props: SplitButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;
256
303
 
304
+ /**
305
+ * Given user props, defines default props for the SplitButton and returns processed state.
306
+ * @param props - User provided props to the SplitButton component.
307
+ * @param ref - User provided ref to be passed to the SplitButton component.
308
+ */
309
+ export declare const useSplitButtonBase_unstable: (props: SplitButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonBaseState;
310
+
257
311
  export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;
258
312
 
259
313
  /**
260
- * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
314
+ * Given user props, defines default props for the ToggleButton, calls `useToggleButtonBase_unstable` and adds design-related props, and returns
261
315
  * processed state.
262
316
  * @param props - User provided props to the ToggleButton component.
263
317
  * @param ref - User provided ref to be passed to the ToggleButton component.
264
318
  */
265
319
  export declare const useToggleButton_unstable: (props: ToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
266
320
 
321
+ /**
322
+ * Given user props, defines base props (including behavioral and structural ones) for the ToggleButton returns
323
+ * processed state.
324
+ * @param props - User provided props to the ToggleButton component.
325
+ * @param ref - User provided ref to be passed to the ToggleButton component.
326
+ */
327
+ export declare const useToggleButtonBase_unstable: (props: ToggleButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonBaseState;
328
+
267
329
  export declare const useToggleButtonStyles_unstable: (state: ToggleButtonState) => ToggleButtonState;
268
330
 
269
331
  export declare function useToggleState<TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>, TButtonState extends Pick<ButtonState, 'root'>, TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState;
package/lib/Button.js CHANGED
@@ -1 +1 @@
1
- export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from './components/Button/index';
1
+ export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable, useButtonBase_unstable } from './components/Button/index';
package/lib/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Button.tsx"],"sourcesContent":["export type { ButtonProps, ButtonSlots, ButtonState } from './components/Button/index';\nexport {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './components/Button/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable"],"mappings":"AACA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,4BAA4B"}
1
+ {"version":3,"sources":["../src/Button.tsx"],"sourcesContent":["export type {\n ButtonBaseProps,\n ButtonProps,\n ButtonSlots,\n ButtonBaseState,\n ButtonState,\n} from './components/Button/index';\nexport {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n useButtonBase_unstable,\n} from './components/Button/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","useButtonBase_unstable"],"mappings":"AAOA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,4BAA4B"}
@@ -1 +1 @@
1
- export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from './components/CompoundButton/index';
1
+ export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable, useCompoundButtonBase_unstable } from './components/CompoundButton/index';
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/CompoundButton.ts"],"sourcesContent":["export type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './components/CompoundButton/index';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './components/CompoundButton/index';\n"],"names":["CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable"],"mappings":"AACA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,oCAAoC"}
1
+ {"version":3,"sources":["../src/CompoundButton.ts"],"sourcesContent":["export type {\n CompoundButtonBaseProps,\n CompoundButtonProps,\n CompoundButtonSlots,\n CompoundButtonBaseState,\n CompoundButtonState,\n} from './components/CompoundButton/index';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n useCompoundButtonBase_unstable,\n} from './components/CompoundButton/index';\n"],"names":["CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","useCompoundButtonBase_unstable"],"mappings":"AAOA,SACEA,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,EAC1BC,8BAA8B,QACzB,oCAAoC"}
package/lib/MenuButton.js CHANGED
@@ -1 +1 @@
1
- export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './components/MenuButton/index';
1
+ export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable, useMenuButtonBase_unstable } from './components/MenuButton/index';
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/MenuButton.ts"],"sourcesContent":["export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './components/MenuButton/index';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './components/MenuButton/index';\n"],"names":["MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable"],"mappings":"AACA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}
1
+ {"version":3,"sources":["../src/MenuButton.ts"],"sourcesContent":["export type {\n MenuButtonBaseProps,\n MenuButtonProps,\n MenuButtonSlots,\n MenuButtonBaseState,\n MenuButtonState,\n} from './components/MenuButton/index';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n useMenuButtonBase_unstable,\n} from './components/MenuButton/index';\n"],"names":["MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","useMenuButtonBase_unstable"],"mappings":"AAOA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,EACtBC,0BAA0B,QACrB,gCAAgC"}
@@ -1 +1 @@
1
- export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './components/SplitButton/index';
1
+ export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable, useSplitButtonBase_unstable } from './components/SplitButton/index';
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/SplitButton.ts"],"sourcesContent":["export type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './components/SplitButton/index';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './components/SplitButton/index';\n"],"names":["SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
1
+ {"version":3,"sources":["../src/SplitButton.ts"],"sourcesContent":["export type {\n SplitButtonBaseProps,\n SplitButtonProps,\n SplitButtonSlots,\n SplitButtonBaseState,\n SplitButtonState,\n} from './components/SplitButton/index';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n useSplitButtonBase_unstable,\n} from './components/SplitButton/index';\n"],"names":["SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","useSplitButtonBase_unstable"],"mappings":"AAOA,SACEA,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,QACtB,iCAAiC"}
@@ -1 +1 @@
1
- export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './components/ToggleButton/index';
1
+ export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable, useToggleButtonBase_unstable } from './components/ToggleButton/index';
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/ToggleButton.ts"],"sourcesContent":["export type { ToggleButtonProps, ToggleButtonState } from './components/ToggleButton/index';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from './components/ToggleButton/index';\n"],"names":["ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable"],"mappings":"AACA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,kCAAkC"}
1
+ {"version":3,"sources":["../src/ToggleButton.ts"],"sourcesContent":["export type {\n ToggleButtonBaseProps,\n ToggleButtonProps,\n ToggleButtonBaseState,\n ToggleButtonState,\n} from './components/ToggleButton/index';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n useToggleButtonBase_unstable,\n} from './components/ToggleButton/index';\n"],"names":["ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleButtonBase_unstable"],"mappings":"AAMA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,kCAAkC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Button/Button.types.ts"],"sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n /**\n * Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n */\n root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n\n /**\n * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n */\n icon?: Slot<'span'>;\n};\n\n/**\n * A button supports different sizes.\n */\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & {\n /**\n * A button can have its content and borders styled for greater emphasis or to be subtle.\n * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n * - 'primary': Emphasizes the button as a primary action.\n * - 'outline': Removes background styling.\n * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n * - 'transparent': Removes background and border styling.\n *\n * @default 'secondary'\n */\n appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';\n\n /**\n * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n *\n * @default false\n */\n disabledFocusable?: boolean;\n\n /**\n * A button can show that it cannot be interacted with.\n *\n * @default false\n */\n disabled?: boolean;\n\n /**\n * A button can format its icon to appear before or after its content.\n *\n * @default 'before'\n */\n iconPosition?: 'before' | 'after';\n\n /**\n * A button can be rounded, circular, or square.\n *\n * @default 'rounded'\n */\n shape?: 'rounded' | 'circular' | 'square';\n\n /**\n * A button supports different sizes.\n *\n * @default 'medium'\n */\n size?: ButtonSize;\n};\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {\n /**\n * A button can contain only an icon.\n *\n * @default false\n */\n iconOnly: boolean;\n };\n"],"names":[],"mappings":"AAuEA,WAQI"}
1
+ {"version":3,"sources":["../src/components/Button/Button.types.ts"],"sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n /**\n * Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n */\n root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n\n /**\n * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n */\n icon?: Slot<'span'>;\n};\n\n/**\n * A button supports different sizes.\n */\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & {\n /**\n * A button can have its content and borders styled for greater emphasis or to be subtle.\n * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n * - 'primary': Emphasizes the button as a primary action.\n * - 'outline': Removes background styling.\n * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n * - 'transparent': Removes background and border styling.\n *\n * @default 'secondary'\n */\n appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';\n\n /**\n * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n *\n * @default false\n */\n disabledFocusable?: boolean;\n\n /**\n * A button can show that it cannot be interacted with.\n *\n * @default false\n */\n disabled?: boolean;\n\n /**\n * A button can format its icon to appear before or after its content.\n *\n * @default 'before'\n */\n iconPosition?: 'before' | 'after';\n\n /**\n * A button can be rounded, circular, or square.\n *\n * @default 'rounded'\n */\n shape?: 'rounded' | 'circular' | 'square';\n\n /**\n * A button supports different sizes.\n *\n * @default 'medium'\n */\n size?: ButtonSize;\n};\n\n/**\n * Internal use only: lists prop names related to Button design for use within Button components.\n *\n * @internal\n */\nexport type ButtonDesignPropNames = 'appearance' | 'size' | 'shape';\n\nexport type ButtonBaseProps = DistributiveOmit<ButtonProps, ButtonDesignPropNames>;\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {\n /**\n * A button can contain only an icon.\n *\n * @default false\n */\n iconOnly: boolean;\n };\n\nexport type ButtonBaseState = DistributiveOmit<ButtonState, ButtonDesignPropNames>;\n"],"names":[],"mappings":"AA0FA,WAAmF"}
@@ -1,4 +1,5 @@
1
1
  export { Button } from './Button';
2
2
  export { renderButton_unstable } from './renderButton';
3
3
  export { useButton_unstable } from './useButton';
4
+ export { useButtonBase_unstable } from './useButtonBase';
4
5
  export { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Button/index.ts"],"sourcesContent":["export { Button } from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport { renderButton_unstable } from './renderButton';\nexport { useButton_unstable } from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';\n"],"names":["Button","renderButton_unstable","useButton_unstable","buttonClassNames","useButtonStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAGlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}
1
+ {"version":3,"sources":["../src/components/Button/index.ts"],"sourcesContent":["export { Button } from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonBaseProps, ButtonProps, ButtonSlots, ButtonBaseState, ButtonState } from './Button.types';\nexport { renderButton_unstable } from './renderButton';\nexport { useButton_unstable } from './useButton';\nexport { useButtonBase_unstable } from './useButtonBase';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles.styles';\n"],"names":["Button","renderButton_unstable","useButton_unstable","useButtonBase_unstable","buttonClassNames","useButtonStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAGlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}
@@ -1,38 +1,20 @@
1
1
  'use client';
2
2
  import * as React from 'react';
3
- import { useARIAButtonProps } from '@fluentui/react-aria';
4
- import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
5
3
  import { useButtonContext } from '../../contexts/ButtonContext';
4
+ import { useButtonBase_unstable } from './useButtonBase';
6
5
  /**
7
6
  * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
8
7
  * @param props - User provided props to the Button component.
9
8
  * @param ref - User provided ref to be passed to the Button component.
10
9
  */ export const useButton_unstable = (props, ref)=>{
11
10
  const { size: contextSize } = useButtonContext();
12
- const { appearance = 'secondary', as = 'button', disabled = false, disabledFocusable = false, icon, iconPosition = 'before', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
13
- const iconShorthand = slot.optional(icon, {
14
- elementType: 'span'
15
- });
11
+ const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
12
+ const state = useButtonBase_unstable(props, ref);
16
13
  return {
17
14
  // Props passed at the top-level
18
15
  appearance,
19
- disabled,
20
- disabledFocusable,
21
- iconPosition,
22
16
  shape,
23
17
  size,
24
- iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
25
- components: {
26
- root: 'button',
27
- icon: 'span'
28
- },
29
- root: slot.always(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {
30
- elementType: 'button',
31
- defaultProps: {
32
- ref: ref,
33
- type: as === 'button' ? 'button' : undefined
34
- }
35
- }),
36
- icon: iconShorthand
18
+ ...state
37
19
  };
38
20
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n const { size: contextSize } = useButtonContext();\n const {\n appearance = 'secondary',\n as = 'button',\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n shape = 'rounded',\n size = contextSize ?? 'medium',\n } = props;\n const iconShorthand = slot.optional(icon, { elementType: 'span' });\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size, // State calculated from a set of props\n iconOnly: Boolean(iconShorthand?.children && !props.children), // Slots definition\n components: { root: 'button', icon: 'span' },\n root: slot.always<ARIAButtonSlotProps<'a'>>(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {\n elementType: 'button',\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n type: as === 'button' ? 'button' : undefined,\n },\n }),\n icon: iconShorthand,\n };\n};\n"],"names":["React","useARIAButtonProps","getIntrinsicElementProps","slot","useButtonContext","useButton_unstable","props","ref","size","contextSize","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","optional","elementType","iconOnly","Boolean","children","components","root","always","defaultProps","type","undefined"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAC/E,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,gBAAgB,QAAQ,+BAA+B;AAGhE;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGL;IAC9B,MAAM,EACJM,aAAa,WAAW,EACxBC,KAAK,QAAQ,EACbC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,QAAQ,SAAS,EACjBR,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAC/B,GAAGH;IACJ,MAAMW,gBAAgBd,KAAKe,QAAQ,CAACJ,MAAM;QAAEK,aAAa;IAAO;IAChE,OAAO;QACL,gCAAgC;QAChCT;QACAE;QACAC;QACAE;QACAC;QACAR;QACAY,UAAUC,QAAQJ,CAAAA,0BAAAA,oCAAAA,cAAeK,QAAQ,KAAI,CAAChB,MAAMgB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUV,MAAM;QAAO;QAC3CU,MAAMrB,KAAKsB,MAAM,CAA2BvB,yBAAyBS,IAAIV,mBAAmBK,MAAMK,EAAE,EAAEL,SAAS;YAC7Ga,aAAa;YACbO,cAAc;gBACZnB,KAAKA;gBACLoB,MAAMhB,OAAO,WAAW,WAAWiB;YACrC;QACF;QACAd,MAAMG;IACR;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/Button/useButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport type { ButtonProps, ButtonState } from './Button.types';\nimport { useButtonBase_unstable } from './useButtonBase';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n const { size: contextSize } = useButtonContext();\n const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium' } = props;\n const state = useButtonBase_unstable(props, ref);\n\n return {\n // Props passed at the top-level\n appearance,\n shape,\n size,\n ...state,\n };\n};\n"],"names":["React","useButtonContext","useButtonBase_unstable","useButton_unstable","props","ref","size","contextSize","appearance","shape","state"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAEhE,SAASC,sBAAsB,QAAQ,kBAAkB;AAEzD;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGN;IAC9B,MAAM,EAAEO,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGH;IACxF,MAAMM,QAAQR,uBAAuBE,OAAOC;IAE5C,OAAO;QACL,gCAAgC;QAChCG;QACAC;QACAH;QACA,GAAGI,KAAK;IACV;AACF,EAAE"}
@@ -0,0 +1,34 @@
1
+ 'use client';
2
+ import * as React from 'react';
3
+ import { useARIAButtonProps } from '@fluentui/react-aria';
4
+ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
5
+ /**
6
+ * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
7
+ * @param props - User provided props to the Button component.
8
+ * @param ref - User provided ref to be passed to the Button component.
9
+ */ export const useButtonBase_unstable = (props, ref)=>{
10
+ const { as = 'button', disabled = false, disabledFocusable = false, icon, iconPosition = 'before' } = props;
11
+ const iconShorthand = slot.optional(icon, {
12
+ elementType: 'span'
13
+ });
14
+ return {
15
+ // Props passed at the top-level
16
+ disabled,
17
+ disabledFocusable,
18
+ iconPosition,
19
+ iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
20
+ // Slots definition
21
+ components: {
22
+ root: 'button',
23
+ icon: 'span'
24
+ },
25
+ root: slot.always(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {
26
+ elementType: 'button',
27
+ defaultProps: {
28
+ ref: ref,
29
+ type: as === 'button' ? 'button' : undefined
30
+ }
31
+ }),
32
+ icon: iconShorthand
33
+ };
34
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Button/useButtonBase.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ButtonBaseProps, ButtonBaseState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButtonBase_unstable = (\n props: ButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonBaseState => {\n const { as = 'button', disabled = false, disabledFocusable = false, icon, iconPosition = 'before' } = props;\n const iconShorthand = slot.optional(icon, { elementType: 'span' });\n return {\n // Props passed at the top-level\n disabled,\n disabledFocusable,\n iconPosition,\n iconOnly: Boolean(iconShorthand?.children && !props.children),\n // Slots definition\n components: { root: 'button', icon: 'span' },\n root: slot.always<ARIAButtonSlotProps<'a'>>(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {\n elementType: 'button',\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n type: as === 'button' ? 'button' : undefined,\n },\n }),\n icon: iconShorthand,\n };\n};\n"],"names":["React","useARIAButtonProps","getIntrinsicElementProps","slot","useButtonBase_unstable","props","ref","as","disabled","disabledFocusable","icon","iconPosition","iconShorthand","optional","elementType","iconOnly","Boolean","children","components","root","always","defaultProps","type","undefined"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAC/E,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;CAIC,GACD,OAAO,MAAMC,yBAAyB,CACpCC,OACAC;IAEA,MAAM,EAAEC,KAAK,QAAQ,EAAEC,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAEC,IAAI,EAAEC,eAAe,QAAQ,EAAE,GAAGN;IACtG,MAAMO,gBAAgBT,KAAKU,QAAQ,CAACH,MAAM;QAAEI,aAAa;IAAO;IAChE,OAAO;QACL,gCAAgC;QAChCN;QACAC;QACAE;QACAI,UAAUC,QAAQJ,CAAAA,0BAAAA,oCAAAA,cAAeK,QAAQ,KAAI,CAACZ,MAAMY,QAAQ;QAC5D,mBAAmB;QACnBC,YAAY;YAAEC,MAAM;YAAUT,MAAM;QAAO;QAC3CS,MAAMhB,KAAKiB,MAAM,CAA2BlB,yBAAyBK,IAAIN,mBAAmBI,MAAME,EAAE,EAAEF,SAAS;YAC7GS,aAAa;YACbO,cAAc;gBACZf,KAAKA;gBACLgB,MAAMf,OAAO,WAAW,WAAWgB;YACrC;QACF;QACAb,MAAME;IACR;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CompoundButton/CompoundButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type CompoundButtonSlots = ButtonSlots & {\n /**\n * Second line of text that describes the action this button takes.\n */\n secondaryContent?: Slot<'span'>;\n\n /**\n * Container that wraps the children and the secondaryContent slot.\n */\n contentContainer: NonNullable<Slot<'span'>>;\n};\n\nexport type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> &\n Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;\n\nexport type CompoundButtonState = ComponentState<CompoundButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots | 'components'>;\n"],"names":[],"mappings":"AAkBA,WACsD"}
1
+ {"version":3,"sources":["../src/components/CompoundButton/CompoundButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { ButtonDesignPropNames, ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type CompoundButtonSlots = ButtonSlots & {\n /**\n * Second line of text that describes the action this button takes.\n */\n secondaryContent?: Slot<'span'>;\n\n /**\n * Container that wraps the children and the secondaryContent slot.\n */\n contentContainer: NonNullable<Slot<'span'>>;\n};\n\nexport type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> &\n Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;\n\nexport type CompoundButtonBaseProps = DistributiveOmit<CompoundButtonProps, ButtonDesignPropNames>;\n\nexport type CompoundButtonState = ComponentState<CompoundButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots | 'components'>;\n\nexport type CompoundButtonBaseState = DistributiveOmit<CompoundButtonState, ButtonDesignPropNames>;\n"],"names":[],"mappings":"AAuBA,WAAmG"}
@@ -1,4 +1,5 @@
1
1
  export { CompoundButton } from './CompoundButton';
2
2
  export { renderCompoundButton_unstable } from './renderCompoundButton';
3
3
  export { useCompoundButton_unstable } from './useCompoundButton';
4
+ export { useCompoundButtonBase_unstable } from './useCompoundButtonBase';
4
5
  export { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CompoundButton/index.ts"],"sourcesContent":["export { CompoundButton } from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\nexport { renderCompoundButton_unstable } from './renderCompoundButton';\nexport { useCompoundButton_unstable } from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\n"],"names":["CompoundButton","renderCompoundButton_unstable","useCompoundButton_unstable","compoundButtonClassNames","useCompoundButtonStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}
1
+ {"version":3,"sources":["../src/components/CompoundButton/index.ts"],"sourcesContent":["export { CompoundButton } from './CompoundButton';\nexport type {\n CompoundButtonBaseProps,\n CompoundButtonProps,\n CompoundButtonSlots,\n CompoundButtonBaseState,\n CompoundButtonState,\n} from './CompoundButton.types';\nexport { renderCompoundButton_unstable } from './renderCompoundButton';\nexport { useCompoundButton_unstable } from './useCompoundButton';\nexport { useCompoundButtonBase_unstable } from './useCompoundButtonBase';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles.styles';\n"],"names":["CompoundButton","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonBase_unstable","compoundButtonClassNames","useCompoundButtonStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}
@@ -1,31 +1,19 @@
1
1
  'use client';
2
2
  import * as React from 'react';
3
- import { slot } from '@fluentui/react-utilities';
4
- import { useButton_unstable } from '../Button/index';
3
+ import { useCompoundButtonBase_unstable } from './useCompoundButtonBase';
4
+ import { useButtonContext } from '../../contexts';
5
5
  /**
6
6
  * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
7
7
  * @param props - User provided props to the CompoundButton component.
8
8
  * @param ref - User provided ref to be passed to the CompoundButton component.
9
- */ export const useCompoundButton_unstable = ({ contentContainer, secondaryContent, ...props }, ref)=>{
10
- var _state_icon, _state_secondaryContent;
11
- const state = {
12
- // Button state
13
- ...useButton_unstable(props, ref),
14
- // Slots definition
15
- components: {
16
- root: 'button',
17
- icon: 'span',
18
- contentContainer: 'span',
19
- secondaryContent: 'span'
20
- },
21
- contentContainer: slot.always(contentContainer, {
22
- elementType: 'span'
23
- }),
24
- secondaryContent: slot.optional(secondaryContent, {
25
- elementType: 'span'
26
- })
9
+ */ export const useCompoundButton_unstable = (props, ref)=>{
10
+ const { size: contextSize } = useButtonContext();
11
+ const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
12
+ const state = useCompoundButtonBase_unstable(props, ref);
13
+ return {
14
+ appearance,
15
+ size,
16
+ shape,
17
+ ...state
27
18
  };
28
- // Recalculate iconOnly to take into account secondaryContent.
29
- state.iconOnly = Boolean(((_state_icon = state.icon) === null || _state_icon === void 0 ? void 0 : _state_icon.children) && !props.children && !((_state_secondaryContent = state.secondaryContent) === null || _state_secondaryContent === void 0 ? void 0 : _state_secondaryContent.children));
30
- return state;
31
19
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n const state: CompoundButtonState = {\n // Button state\n ...useButton_unstable(props, ref),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n contentContainer: 'span',\n secondaryContent: 'span',\n },\n contentContainer: slot.always(contentContainer, { elementType: 'span' }),\n secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\n };\n\n // Recalculate iconOnly to take into account secondaryContent.\n state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n return state;\n};\n"],"names":["React","slot","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","always","elementType","optional","iconOnly","Boolean","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxC,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,OAA4B,EACrEC;QAkByBC,aAA4CA;IAhBrE,MAAMA,QAA6B;QACjC,eAAe;QACf,GAAGN,mBAAmBI,OAAOC,IAAI;QAEjC,mBAAmB;QACnBE,YAAY;YACVC,MAAM;YACNC,MAAM;YACNP,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBH,KAAKW,MAAM,CAACR,kBAAkB;YAAES,aAAa;QAAO;QACtER,kBAAkBJ,KAAKa,QAAQ,CAACT,kBAAkB;YAAEQ,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DL,MAAMO,QAAQ,GAAGC,QAAQR,EAAAA,cAAAA,MAAMG,IAAI,cAAVH,kCAAAA,YAAYS,QAAQ,KAAI,CAACX,MAAMW,QAAQ,IAAI,GAACT,0BAAAA,MAAMH,gBAAgB,cAAtBG,8CAAAA,wBAAwBS,QAAQ;IAErG,OAAOT;AACT,EAAE"}
1
+ {"version":3,"sources":["../src/components/CompoundButton/useCompoundButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\nimport { useCompoundButtonBase_unstable } from './useCompoundButtonBase';\nimport { useButtonContext } from '../../contexts';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n props: CompoundButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n const { size: contextSize } = useButtonContext();\n const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium' } = props;\n const state = useCompoundButtonBase_unstable(props, ref);\n\n return {\n appearance,\n size,\n shape,\n ...state,\n };\n};\n"],"names":["React","useCompoundButtonBase_unstable","useButtonContext","useCompoundButton_unstable","props","ref","size","contextSize","appearance","shape","state"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,gBAAgB,QAAQ,iBAAiB;AAElD;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGL;IAC9B,MAAM,EAAEM,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGH;IACxF,MAAMM,QAAQT,+BAA+BG,OAAOC;IAEpD,OAAO;QACLG;QACAF;QACAG;QACA,GAAGC,KAAK;IACV;AACF,EAAE"}
@@ -0,0 +1,31 @@
1
+ 'use client';
2
+ import * as React from 'react';
3
+ import { slot } from '@fluentui/react-utilities';
4
+ import { useButtonBase_unstable } from '../Button/index';
5
+ /**
6
+ * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
7
+ * @param props - User provided props to the CompoundButton component.
8
+ * @param ref - User provided ref to be passed to the CompoundButton component.
9
+ */ export const useCompoundButtonBase_unstable = ({ contentContainer, secondaryContent, ...props }, ref)=>{
10
+ var _state_icon, _state_secondaryContent;
11
+ const state = {
12
+ // Button state
13
+ ...useButtonBase_unstable(props, ref),
14
+ // Slots definition
15
+ components: {
16
+ root: 'button',
17
+ icon: 'span',
18
+ contentContainer: 'span',
19
+ secondaryContent: 'span'
20
+ },
21
+ contentContainer: slot.always(contentContainer, {
22
+ elementType: 'span'
23
+ }),
24
+ secondaryContent: slot.optional(secondaryContent, {
25
+ elementType: 'span'
26
+ })
27
+ };
28
+ // Recalculate iconOnly to take into account secondaryContent.
29
+ state.iconOnly = Boolean(((_state_icon = state.icon) === null || _state_icon === void 0 ? void 0 : _state_icon.children) && !props.children && !((_state_secondaryContent = state.secondaryContent) === null || _state_secondaryContent === void 0 ? void 0 : _state_secondaryContent.children));
30
+ return state;
31
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/CompoundButton/useCompoundButtonBase.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButtonBase_unstable } from '../Button/index';\nimport type { CompoundButtonBaseProps, CompoundButtonBaseState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButtonBase_unstable = (\n { contentContainer, secondaryContent, ...props }: CompoundButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonBaseState => {\n const state: CompoundButtonBaseState = {\n // Button state\n ...useButtonBase_unstable(props, ref),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n contentContainer: 'span',\n secondaryContent: 'span',\n },\n contentContainer: slot.always(contentContainer, { elementType: 'span' }),\n secondaryContent: slot.optional(secondaryContent, { elementType: 'span' }),\n };\n\n // Recalculate iconOnly to take into account secondaryContent.\n state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n return state;\n};\n"],"names":["React","slot","useButtonBase_unstable","useCompoundButtonBase_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","always","elementType","optional","iconOnly","Boolean","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,sBAAsB,QAAQ,kBAAkB;AAGzD;;;;CAIC,GACD,OAAO,MAAMC,iCAAiC,CAC5C,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAE,GAAGC,OAAgC,EACzEC;QAkByBC,aAA4CA;IAhBrE,MAAMA,QAAiC;QACrC,eAAe;QACf,GAAGN,uBAAuBI,OAAOC,IAAI;QAErC,mBAAmB;QACnBE,YAAY;YACVC,MAAM;YACNC,MAAM;YACNP,kBAAkB;YAClBC,kBAAkB;QACpB;QACAD,kBAAkBH,KAAKW,MAAM,CAACR,kBAAkB;YAAES,aAAa;QAAO;QACtER,kBAAkBJ,KAAKa,QAAQ,CAACT,kBAAkB;YAAEQ,aAAa;QAAO;IAC1E;IAEA,8DAA8D;IAC9DL,MAAMO,QAAQ,GAAGC,QAAQR,EAAAA,cAAAA,MAAMG,IAAI,cAAVH,kCAAAA,YAAYS,QAAQ,KAAI,CAACX,MAAMW,QAAQ,IAAI,GAACT,0BAAAA,MAAMH,gBAAgB,cAAtBG,8CAAAA,wBAAwBS,QAAQ;IAErG,OAAOT;AACT,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/MenuButton/MenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n /**\n * Menu icon that indicates that this button has a menu that can be expanded.\n */\n menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;\n\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;\n"],"names":[],"mappings":"AAaA,WACuE"}
1
+ {"version":3,"sources":["../src/components/MenuButton/MenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { ButtonDesignPropNames, ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type MenuButtonSlots = ButtonSlots & {\n /**\n * Menu icon that indicates that this button has a menu that can be expanded.\n */\n menuIcon?: Slot<'span'>;\n};\n\nexport type MenuButtonProps = ComponentProps<MenuButtonSlots> &\n Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;\n\nexport type MenuButtonBaseProps = DistributiveOmit<MenuButtonProps, ButtonDesignPropNames>;\nexport type MenuButtonState = ComponentState<MenuButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;\n\nexport type MenuButtonBaseState = DistributiveOmit<MenuButtonState, ButtonDesignPropNames>;\n"],"names":[],"mappings":"AAiBA,WAA2F"}
@@ -1,4 +1,5 @@
1
1
  export { MenuButton } from './MenuButton';
2
2
  export { renderMenuButton_unstable } from './renderMenuButton';
3
3
  export { useMenuButton_unstable } from './useMenuButton';
4
+ export { useMenuButtonBase_unstable } from './useMenuButtonBase';
4
5
  export { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/MenuButton/index.ts"],"sourcesContent":["export type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton.types';\nexport { MenuButton } from './MenuButton';\nexport { renderMenuButton_unstable } from './renderMenuButton';\nexport { useMenuButton_unstable } from './useMenuButton';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"names":["MenuButton","renderMenuButton_unstable","useMenuButton_unstable","menuButtonClassNames","useMenuButtonStyles_unstable"],"mappings":"AACA,SAASA,UAAU,QAAQ,eAAe;AAC1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}
1
+ {"version":3,"sources":["../src/components/MenuButton/index.ts"],"sourcesContent":["export type {\n MenuButtonBaseProps,\n MenuButtonProps,\n MenuButtonSlots,\n MenuButtonBaseState,\n MenuButtonState,\n} from './MenuButton.types';\nexport { MenuButton } from './MenuButton';\nexport { renderMenuButton_unstable } from './renderMenuButton';\nexport { useMenuButton_unstable } from './useMenuButton';\nexport { useMenuButtonBase_unstable } from './useMenuButtonBase';\nexport { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles.styles';\n"],"names":["MenuButton","renderMenuButton_unstable","useMenuButton_unstable","useMenuButtonBase_unstable","menuButtonClassNames","useMenuButtonStyles_unstable"],"mappings":"AAOA,SAASA,UAAU,QAAQ,eAAe;AAC1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}
@@ -1,32 +1,23 @@
1
1
  'use client';
2
2
  import * as React from 'react';
3
3
  import { ChevronDownRegular } from '@fluentui/react-icons';
4
- import { slot } from '@fluentui/react-utilities';
5
- import { useButton_unstable } from '../Button/index';
4
+ import { useButtonContext } from '../../contexts';
5
+ import { useMenuButtonBase_unstable } from './useMenuButtonBase';
6
6
  /**
7
7
  * Given user props, returns the final state for a MenuButton.
8
- */ export const useMenuButton_unstable = ({ menuIcon, ...props }, ref)=>{
8
+ */ export const useMenuButton_unstable = (props, ref)=>{
9
9
  'use no memo';
10
- const buttonState = useButton_unstable(props, ref);
11
- // force aria-expanded to be a boolean, not a string
12
- buttonState.root['aria-expanded'] = props['aria-expanded'] ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true : false;
10
+ const { size: contextSize } = useButtonContext();
11
+ const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
12
+ const state = useMenuButtonBase_unstable(props, ref);
13
13
  return {
14
- // Button state
15
- ...buttonState,
16
- // State calculated from a set of props
17
- iconOnly: Boolean(!props.children),
18
- // Slots definition
19
- components: {
20
- root: 'button',
21
- icon: 'span',
22
- menuIcon: 'span'
23
- },
24
- menuIcon: slot.optional(menuIcon, {
25
- defaultProps: {
26
- children: /*#__PURE__*/ React.createElement(ChevronDownRegular, null)
27
- },
28
- renderByDefault: true,
29
- elementType: 'span'
30
- })
14
+ appearance,
15
+ size,
16
+ shape,
17
+ ...state,
18
+ menuIcon: {
19
+ children: /*#__PURE__*/ React.createElement(ChevronDownRegular, null),
20
+ ...state.menuIcon
21
+ }
31
22
  };
32
23
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n { menuIcon, ...props }: MenuButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n 'use no memo';\n\n const buttonState = useButton_unstable(props, ref);\n // force aria-expanded to be a boolean, not a string\n buttonState.root['aria-expanded'] = props['aria-expanded']\n ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n : false;\n\n return {\n // Button state\n ...buttonState,\n\n // State calculated from a set of props\n iconOnly: Boolean(!props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n menuIcon: 'span',\n },\n\n menuIcon: slot.optional(menuIcon, {\n defaultProps: {\n children: <ChevronDownRegular />,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n };\n};\n"],"names":["React","ChevronDownRegular","slot","useButton_unstable","useMenuButton_unstable","menuIcon","props","ref","buttonState","root","iconOnly","Boolean","children","components","icon","optional","defaultProps","renderByDefault","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CACpC,EAAEC,QAAQ,EAAE,GAAGC,OAAwB,EACvCC;IAEA;IAEA,MAAMC,cAAcL,mBAAmBG,OAAOC;IAC9C,oDAAoD;IACpDC,YAAYC,IAAI,CAAC,gBAAgB,GAAGH,KAAK,CAAC,gBAAgB,GACtDA,KAAK,CAAC,gBAAgB,KAAK,UAAUA,KAAK,CAAC,gBAAgB,KAAK,OAChE;IAEJ,OAAO;QACL,eAAe;QACf,GAAGE,WAAW;QAEd,uCAAuC;QACvCE,UAAUC,QAAQ,CAACL,MAAMM,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACVJ,MAAM;YACNK,MAAM;YACNT,UAAU;QACZ;QAEAA,UAAUH,KAAKa,QAAQ,CAACV,UAAU;YAChCW,cAAc;gBACZJ,wBAAU,oBAACX;YACb;YACAgB,iBAAiB;YACjBC,aAAa;QACf;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { MenuButtonProps, MenuButtonState } from './MenuButton.types';\nimport { useButtonContext } from '../../contexts';\nimport { useMenuButtonBase_unstable } from './useMenuButtonBase';\n\n/**\n * Given user props, returns the final state for a MenuButton.\n */\nexport const useMenuButton_unstable = (\n props: MenuButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n 'use no memo';\n\n const { size: contextSize } = useButtonContext();\n const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium' } = props;\n const state = useMenuButtonBase_unstable(props, ref);\n\n return {\n appearance,\n size,\n shape,\n ...state,\n menuIcon: {\n children: <ChevronDownRegular />,\n ...state.menuIcon,\n },\n };\n};\n"],"names":["React","ChevronDownRegular","useButtonContext","useMenuButtonBase_unstable","useMenuButton_unstable","props","ref","size","contextSize","appearance","shape","state","menuIcon","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,wBAAwB;AAE3D,SAASC,gBAAgB,QAAQ,iBAAiB;AAClD,SAASC,0BAA0B,QAAQ,sBAAsB;AAEjE;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CACpCC,OACAC;IAEA;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGN;IAC9B,MAAM,EAAEO,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGH;IACxF,MAAMM,QAAQR,2BAA2BE,OAAOC;IAEhD,OAAO;QACLG;QACAF;QACAG;QACA,GAAGC,KAAK;QACRC,UAAU;YACRC,wBAAU,oBAACZ;YACX,GAAGU,MAAMC,QAAQ;QACnB;IACF;AACF,EAAE"}