@fluentui/react-button 9.7.1 → 9.8.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 +21 -2
  2. package/dist/index.d.ts +3 -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 +11 -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 +11 -0
  96. package/lib-commonjs/index.js.map +1 -1
  97. package/package.json +7 -14
  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
@@ -1,66 +1,29 @@
1
+ 'use client';
1
2
  import * as React from 'react';
2
- import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
3
- import { Button } from '../Button/Button';
4
- import { MenuButton } from '../MenuButton/MenuButton';
3
+ import { useSplitButtonBase_unstable } from './useSplitButtonBase';
5
4
  /**
6
5
  * Given user props, defines default props for the SplitButton and returns processed state.
7
6
  * @param props - User provided props to the SplitButton component.
8
7
  * @param ref - User provided ref to be passed to the SplitButton component.
9
8
  */ export const useSplitButton_unstable = (props, ref)=>{
10
- const { appearance = 'secondary', children, disabled = false, disabledFocusable = false, icon, iconPosition = 'before', menuButton, menuIcon, primaryActionButton, shape = 'rounded', size = 'medium' } = props;
11
- const baseId = useId('splitButton-');
12
- const menuButtonShorthand = slot.optional(menuButton, {
13
- defaultProps: {
14
- appearance,
15
- disabled,
16
- disabledFocusable,
17
- menuIcon,
18
- shape,
19
- size
20
- },
21
- renderByDefault: true,
22
- elementType: MenuButton
23
- });
24
- const primaryActionButtonShorthand = slot.optional(primaryActionButton, {
25
- defaultProps: {
26
- appearance,
27
- children,
28
- disabled,
29
- disabledFocusable,
30
- icon,
31
- iconPosition,
32
- id: baseId + '__primaryActionButton',
33
- shape,
34
- size
35
- },
36
- renderByDefault: true,
37
- elementType: Button
38
- });
39
- // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the
40
- // user.
41
- if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
42
- menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
43
- }
9
+ const { appearance = 'secondary', shape = 'rounded', size = 'medium' } = props;
10
+ const state = useSplitButtonBase_unstable(props, ref);
44
11
  return {
45
- // Props passed at the top-level
46
12
  appearance,
47
- disabled,
48
- disabledFocusable,
49
- iconPosition,
50
13
  shape,
51
14
  size,
52
- components: {
53
- root: 'div',
54
- menuButton: MenuButton,
55
- primaryActionButton: Button
15
+ ...state,
16
+ menuButton: {
17
+ appearance,
18
+ shape,
19
+ size,
20
+ ...state.menuButton
56
21
  },
57
- root: slot.always(getIntrinsicElementProps('div', {
58
- ref,
59
- ...props
60
- }), {
61
- elementType: 'div'
62
- }),
63
- menuButton: menuButtonShorthand,
64
- primaryActionButton: primaryActionButtonShorthand
22
+ primaryActionButton: {
23
+ appearance,
24
+ shape,
25
+ size,
26
+ ...state.primaryActionButton
27
+ }
65
28
  };
66
29
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n const {\n appearance = 'secondary',\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n shape = 'rounded',\n size = 'medium',\n } = props;\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = slot.optional(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n renderByDefault: true,\n elementType: MenuButton,\n });\n const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n defaultProps: {\n appearance,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n renderByDefault: true,\n elementType: Button,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n // user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size, // Slots definition\n components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n root: slot.always(getIntrinsicElementProps('div', { ref, ...props }), { elementType: 'div' }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","Button","MenuButton","useSplitButton_unstable","props","ref","appearance","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","shape","size","baseId","menuButtonShorthand","optional","defaultProps","renderByDefault","elementType","primaryActionButtonShorthand","id","components","root","always"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAClF,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,UAAU,QAAQ,2BAA2B;AAGtD;;;;CAIC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EACJC,aAAa,WAAW,EACxBC,QAAQ,EACRC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EAChB,GAAGZ;IACJ,MAAMa,SAASlB,MAAM;IAErB,MAAMmB,sBAAsBlB,KAAKmB,QAAQ,CAACP,YAAY;QACpDQ,cAAc;YACZd;YACAE;YACAC;YACAI;YACAE;YACAC;QACF;QACAK,iBAAiB;QACjBC,aAAapB;IACf;IACA,MAAMqB,+BAA+BvB,KAAKmB,QAAQ,CAACL,qBAAqB;QACtEM,cAAc;YACZd;YACAC;YACAC;YACAC;YACAC;YACAC;YACAa,IAAIP,SAAS;YACbF;YACAC;QACF;QACAK,iBAAiB;QACjBC,aAAarB;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACEiB,uBACAK,gCACA,CAACL,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGK,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChClB;QACAE;QACAC;QACAE;QACAI;QACAC;QACAS,YAAY;YAAEC,MAAM;YAAOd,YAAYV;YAAYY,qBAAqBb;QAAO;QAC/EyB,MAAM1B,KAAK2B,MAAM,CAAC7B,yBAAyB,OAAO;YAAEO;YAAK,GAAGD,KAAK;QAAC,IAAI;YAAEkB,aAAa;QAAM;QAC3FV,YAAYM;QACZJ,qBAAqBS;IACvB;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/SplitButton/useSplitButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SplitButtonProps, SplitButtonState } from './SplitButton.types';\nimport { useSplitButtonBase_unstable } from './useSplitButtonBase';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButton_unstable = (\n props: SplitButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonState => {\n const { appearance = 'secondary', shape = 'rounded', size = 'medium' } = props;\n\n const state = useSplitButtonBase_unstable(props, ref);\n\n return {\n appearance,\n shape,\n size,\n ...state,\n menuButton: {\n appearance,\n shape,\n size,\n ...state.menuButton,\n },\n primaryActionButton: {\n appearance,\n shape,\n size,\n ...state.primaryActionButton,\n },\n };\n};\n"],"names":["React","useSplitButtonBase_unstable","useSplitButton_unstable","props","ref","appearance","shape","size","state","menuButton","primaryActionButton"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,uBAAuB;AAEnE;;;;CAIC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGJ;IAEzE,MAAMK,QAAQP,4BAA4BE,OAAOC;IAEjD,OAAO;QACLC;QACAC;QACAC;QACA,GAAGC,KAAK;QACRC,YAAY;YACVJ;YACAC;YACAC;YACA,GAAGC,MAAMC,UAAU;QACrB;QACAC,qBAAqB;YACnBL;YACAC;YACAC;YACA,GAAGC,MAAME,mBAAmB;QAC9B;IACF;AACF,EAAE"}
@@ -0,0 +1,57 @@
1
+ import * as React from 'react';
2
+ import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
3
+ import { Button } from '../Button/Button';
4
+ import { MenuButton } from '../MenuButton/MenuButton';
5
+ /**
6
+ * Given user props, defines default props for the SplitButton and returns processed state.
7
+ * @param props - User provided props to the SplitButton component.
8
+ * @param ref - User provided ref to be passed to the SplitButton component.
9
+ */ export const useSplitButtonBase_unstable = (props, ref)=>{
10
+ const { children, disabled = false, disabledFocusable = false, icon, iconPosition = 'before', menuButton, menuIcon, primaryActionButton } = props;
11
+ const baseId = useId('splitButton-');
12
+ const menuButtonShorthand = slot.optional(menuButton, {
13
+ defaultProps: {
14
+ disabled,
15
+ disabledFocusable,
16
+ menuIcon
17
+ },
18
+ renderByDefault: true,
19
+ elementType: MenuButton
20
+ });
21
+ const primaryActionButtonShorthand = slot.optional(primaryActionButton, {
22
+ defaultProps: {
23
+ children,
24
+ disabled,
25
+ disabledFocusable,
26
+ icon,
27
+ iconPosition,
28
+ id: baseId + '__primaryActionButton'
29
+ },
30
+ renderByDefault: true,
31
+ elementType: Button
32
+ });
33
+ // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the
34
+ // user.
35
+ if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
36
+ menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
37
+ }
38
+ return {
39
+ // Props passed at the top-level
40
+ disabled,
41
+ disabledFocusable,
42
+ iconPosition,
43
+ components: {
44
+ root: 'div',
45
+ menuButton: MenuButton,
46
+ primaryActionButton: Button
47
+ },
48
+ root: slot.always(getIntrinsicElementProps('div', {
49
+ ref,
50
+ ...props
51
+ }), {
52
+ elementType: 'div'
53
+ }),
54
+ menuButton: menuButtonShorthand,
55
+ primaryActionButton: primaryActionButtonShorthand
56
+ };
57
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/SplitButton/useSplitButtonBase.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport { Button } from '../Button/Button';\nimport { MenuButton } from '../MenuButton/MenuButton';\nimport type { SplitButtonBaseProps, SplitButtonBaseState } from './SplitButton.types';\n\n/**\n * Given user props, defines default props for the SplitButton and returns processed state.\n * @param props - User provided props to the SplitButton component.\n * @param ref - User provided ref to be passed to the SplitButton component.\n */\nexport const useSplitButtonBase_unstable = (\n props: SplitButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SplitButtonBaseState => {\n const {\n children,\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n menuButton,\n menuIcon,\n primaryActionButton,\n } = props;\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = slot.optional(menuButton, {\n defaultProps: {\n disabled,\n disabledFocusable,\n menuIcon,\n },\n renderByDefault: true,\n elementType: MenuButton,\n });\n const primaryActionButtonShorthand = slot.optional(primaryActionButton, {\n defaultProps: {\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n },\n renderByDefault: true,\n elementType: Button,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if no label was provided by the\n // user.\n if (\n menuButtonShorthand &&\n primaryActionButtonShorthand &&\n !menuButtonShorthand['aria-label'] &&\n !menuButtonShorthand['aria-labelledby']\n ) {\n menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;\n }\n\n return {\n // Props passed at the top-level\n disabled,\n disabledFocusable,\n iconPosition,\n components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },\n root: slot.always(getIntrinsicElementProps('div', { ref, ...props }), { elementType: 'div' }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","Button","MenuButton","useSplitButtonBase_unstable","props","ref","children","disabled","disabledFocusable","icon","iconPosition","menuButton","menuIcon","primaryActionButton","baseId","menuButtonShorthand","optional","defaultProps","renderByDefault","elementType","primaryActionButtonShorthand","id","components","root","always"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAClF,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,UAAU,QAAQ,2BAA2B;AAGtD;;;;CAIC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EACJC,QAAQ,EACRC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACpB,GAAGT;IACJ,MAAMU,SAASf,MAAM;IAErB,MAAMgB,sBAAsBf,KAAKgB,QAAQ,CAACL,YAAY;QACpDM,cAAc;YACZV;YACAC;YACAI;QACF;QACAM,iBAAiB;QACjBC,aAAajB;IACf;IACA,MAAMkB,+BAA+BpB,KAAKgB,QAAQ,CAACH,qBAAqB;QACtEI,cAAc;YACZX;YACAC;YACAC;YACAC;YACAC;YACAW,IAAIP,SAAS;QACf;QACAI,iBAAiB;QACjBC,aAAalB;IACf;IAEA,oHAAoH;IACpH,QAAQ;IACR,IACEc,uBACAK,gCACA,CAACL,mBAAmB,CAAC,aAAa,IAClC,CAACA,mBAAmB,CAAC,kBAAkB,EACvC;QACAA,mBAAmB,CAAC,kBAAkB,GAAGK,6BAA6BC,EAAE;IAC1E;IAEA,OAAO;QACL,gCAAgC;QAChCd;QACAC;QACAE;QACAY,YAAY;YAAEC,MAAM;YAAOZ,YAAYT;YAAYW,qBAAqBZ;QAAO;QAC/EsB,MAAMvB,KAAKwB,MAAM,CAAC1B,yBAAyB,OAAO;YAAEO;YAAK,GAAGD,KAAK;QAAC,IAAI;YAAEe,aAAa;QAAM;QAC3FR,YAAYI;QACZF,qBAAqBO;IACvB;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n /**\n * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n *\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * Defines the controlled checked state of the `ToggleButton`.\n * If passed, `ToggleButton` ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onClick` events and re-rendering.\n *\n * @default false\n */\n checked?: boolean;\n};\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;\n"],"names":[],"mappings":"AAqBA,WAA2F"}
1
+ {"version":3,"sources":["../src/components/ToggleButton/ToggleButton.types.ts"],"sourcesContent":["import type { DistributiveOmit } from '@fluentui/react-utilities';\nimport type { ButtonDesignPropNames, ButtonProps, ButtonState } from '../Button/Button.types';\n\nexport type ToggleButtonProps = ButtonProps & {\n /**\n * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n *\n * @default false\n */\n defaultChecked?: boolean;\n\n /**\n * Defines the controlled checked state of the `ToggleButton`.\n * If passed, `ToggleButton` ignores the `defaultChecked` property.\n * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n * correct value based on handling `onClick` events and re-rendering.\n *\n * @default false\n */\n checked?: boolean;\n};\n\nexport type ToggleButtonBaseProps = DistributiveOmit<ToggleButtonProps, ButtonDesignPropNames>;\n\nexport type ToggleButtonState = ButtonState & Required<Pick<ToggleButtonProps, 'checked'>>;\n\nexport type ToggleButtonBaseState = DistributiveOmit<ToggleButtonState, ButtonDesignPropNames>;\n"],"names":[],"mappings":"AA0BA,WAA+F"}
@@ -1,4 +1,5 @@
1
1
  export { ToggleButton } from './ToggleButton';
2
2
  export { renderToggleButton_unstable } from './renderToggleButton';
3
3
  export { useToggleButton_unstable } from './useToggleButton';
4
+ export { useToggleButtonBase_unstable } from './useToggleButtonBase';
4
5
  export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\nexport { renderToggleButton_unstable } from './renderToggleButton';\nexport { useToggleButton_unstable } from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["ToggleButton","renderToggleButton_unstable","useToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
1
+ {"version":3,"sources":["../src/components/ToggleButton/index.ts"],"sourcesContent":["export { ToggleButton } from './ToggleButton';\nexport type {\n ToggleButtonBaseProps,\n ToggleButtonProps,\n ToggleButtonBaseState,\n ToggleButtonState,\n} from './ToggleButton.types';\nexport { renderToggleButton_unstable } from './renderToggleButton';\nexport { useToggleButton_unstable } from './useToggleButton';\nexport { useToggleButtonBase_unstable } from './useToggleButtonBase';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles.styles';\n"],"names":["ToggleButton","renderToggleButton_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAO9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
@@ -1,13 +1,21 @@
1
1
  'use client';
2
2
  import * as React from 'react';
3
- import { useToggleState } from '../../utils/useToggleState';
4
- import { useButton_unstable } from '../Button/useButton';
3
+ import { useToggleButtonBase_unstable } from './useToggleButtonBase';
4
+ import { useButtonContext } from '../../contexts';
5
5
  /**
6
- * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
6
+ * Given user props, defines default props for the ToggleButton, calls `useToggleButtonBase_unstable` and adds design-related props, and returns
7
7
  * processed state.
8
8
  * @param props - User provided props to the ToggleButton component.
9
9
  * @param ref - User provided ref to be passed to the ToggleButton component.
10
10
  */ export const useToggleButton_unstable = (props, ref)=>{
11
- const buttonState = useButton_unstable(props, ref);
12
- return useToggleState(props, buttonState);
11
+ 'use no memo';
12
+ const { size: contextSize } = useButtonContext();
13
+ const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
14
+ const buttonState = useToggleButtonBase_unstable(props, ref);
15
+ return {
16
+ appearance,
17
+ shape,
18
+ size,
19
+ ...buttonState
20
+ };
13
21
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n props: ToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n const buttonState = useButton_unstable(props, ref);\n\n return useToggleState(props, buttonState);\n};\n"],"names":["React","useToggleState","useButton_unstable","useToggleButton_unstable","props","ref","buttonState"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,kBAAkB,QAAQ,sBAAsB;AAGzD;;;;;CAKC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAMC,cAAcJ,mBAAmBE,OAAOC;IAE9C,OAAOJ,eAAeG,OAAOE;AAC/B,EAAE"}
1
+ {"version":3,"sources":["../src/components/ToggleButton/useToggleButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\nimport { useToggleButtonBase_unstable } from './useToggleButtonBase';\nimport { useButtonContext } from '../../contexts';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls `useToggleButtonBase_unstable` and adds design-related props, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n props: ToggleButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n 'use no memo';\n\n const { size: contextSize } = useButtonContext();\n const { appearance = 'secondary', shape = 'rounded', size = contextSize ?? 'medium' } = props;\n\n const buttonState = useToggleButtonBase_unstable(props, ref);\n\n return {\n appearance,\n shape,\n size,\n ...buttonState,\n };\n};\n"],"names":["React","useToggleButtonBase_unstable","useButtonContext","useToggleButton_unstable","props","ref","size","contextSize","appearance","shape","buttonState"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,gBAAgB,QAAQ,iBAAiB;AAElD;;;;;CAKC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGL;IAC9B,MAAM,EAAEM,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGH;IAExF,MAAMM,cAAcT,6BAA6BG,OAAOC;IAExD,OAAO;QACLG;QACAC;QACAH;QACA,GAAGI,WAAW;IAChB;AACF,EAAE"}
@@ -0,0 +1,13 @@
1
+ 'use client';
2
+ import * as React from 'react';
3
+ import { useToggleState } from '../../utils/useToggleState';
4
+ import { useButtonBase_unstable } from '../Button/index';
5
+ /**
6
+ * Given user props, defines base props (including behavioral and structural ones) for the ToggleButton returns
7
+ * processed state.
8
+ * @param props - User provided props to the ToggleButton component.
9
+ * @param ref - User provided ref to be passed to the ToggleButton component.
10
+ */ export const useToggleButtonBase_unstable = (props, ref)=>{
11
+ const buttonState = useButtonBase_unstable(props, ref);
12
+ return useToggleState(props, buttonState);
13
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/ToggleButton/useToggleButtonBase.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButtonBase_unstable } from '../Button/index';\nimport type { ToggleButtonBaseProps, ToggleButtonBaseState } from './ToggleButton.types';\n\n/**\n * Given user props, defines base props (including behavioral and structural ones) for the ToggleButton returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButtonBase_unstable = (\n props: ToggleButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonBaseState => {\n const buttonState = useButtonBase_unstable(props, ref);\n\n return useToggleState(props, buttonState);\n};\n"],"names":["React","useToggleState","useButtonBase_unstable","useToggleButtonBase_unstable","props","ref","buttonState"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,sBAAsB,QAAQ,kBAAkB;AAGzD;;;;;CAKC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEA,MAAMC,cAAcJ,uBAAuBE,OAAOC;IAElD,OAAOJ,eAAeG,OAAOE;AAC/B,EAAE"}
package/lib/index.js CHANGED
@@ -5,3 +5,14 @@ export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSpli
5
5
  export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './ToggleButton';
6
6
  export { useToggleState } from './utils/index';
7
7
  export { ButtonContextProvider, useButtonContext } from './contexts/index';
8
+ // Experimental APIs - will be uncommented in the experimental release branch
9
+ // export { useButtonBase_unstable } from './Button';
10
+ // export type { ButtonBaseProps, ButtonBaseState } from './Button';
11
+ // export { useCompoundButtonBase_unstable } from './CompoundButton';
12
+ // export type { CompoundButtonBaseProps, CompoundButtonBaseState } from './CompoundButton';
13
+ // export { useMenuButtonBase_unstable } from './MenuButton';
14
+ // export type { MenuButtonBaseProps, MenuButtonBaseState } from './MenuButton';
15
+ // export { useSplitButtonBase_unstable } from './SplitButton';
16
+ // export type { SplitButtonBaseProps, SplitButtonBaseState } from './SplitButton';
17
+ // export { useToggleButtonBase_unstable } from './ToggleButton';
18
+ // export type { ToggleButtonBaseProps, ToggleButtonBaseState } from './ToggleButton';
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW;AAElB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAEtB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SAASC,cAAc,QAAQ,gBAAgB;AAE/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,mBAAmB"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n CompoundButton,\n compoundButtonClassNames,\n renderCompoundButton_unstable,\n useCompoundButtonStyles_unstable,\n useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n MenuButton,\n menuButtonClassNames,\n renderMenuButton_unstable,\n useMenuButtonStyles_unstable,\n useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n SplitButton,\n renderSplitButton_unstable,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n ToggleButton,\n renderToggleButton_unstable,\n toggleButtonClassNames,\n useToggleButtonStyles_unstable,\n useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n\n// Experimental APIs - will be uncommented in the experimental release branch\n// export { useButtonBase_unstable } from './Button';\n// export type { ButtonBaseProps, ButtonBaseState } from './Button';\n// export { useCompoundButtonBase_unstable } from './CompoundButton';\n// export type { CompoundButtonBaseProps, CompoundButtonBaseState } from './CompoundButton';\n// export { useMenuButtonBase_unstable } from './MenuButton';\n// export type { MenuButtonBaseProps, MenuButtonBaseState } from './MenuButton';\n// export { useSplitButtonBase_unstable } from './SplitButton';\n// export type { SplitButtonBaseProps, SplitButtonBaseState } from './SplitButton';\n// export { useToggleButtonBase_unstable } from './ToggleButton';\n// export type { ToggleButtonBaseProps, ToggleButtonBaseState } from './ToggleButton';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW;AAElB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAEtB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAGxB,SAASC,cAAc,QAAQ,gBAAgB;AAE/C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,mBAAmB;CAG3E,6EAA6E;CAC7E,qDAAqD;CACrD,oEAAoE;CACpE,qEAAqE;CACrE,4FAA4F;CAC5F,6DAA6D;CAC7D,gFAAgF;CAChF,+DAA+D;CAC/D,mFAAmF;CACnF,iEAAiE;CACjE,sFAAsF"}
@@ -18,6 +18,9 @@ _export(exports, {
18
18
  renderButton_unstable: function() {
19
19
  return _index.renderButton_unstable;
20
20
  },
21
+ useButtonBase_unstable: function() {
22
+ return _index.useButtonBase_unstable;
23
+ },
21
24
  useButtonStyles_unstable: function() {
22
25
  return _index.useButtonStyles_unstable;
23
26
  },
@@ -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":";;;;;;;;;;;;eAEEA,aAAM;;;eACNC,uBAAgB;;;eAChBC,4BAAqB;;;eACrBC,+BAAwB;;;eACxBC,yBAAkB;;;uBACb,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":";;;;;;;;;;;;eAQEA,aAAM;;;eACNC,uBAAgB;;;eAChBC,4BAAqB;;;eAGrBG,6BAAsB;;;eAFtBF,+BAAwB;;;eACxBC,yBAAkB;;;uBAEb,4BAA4B"}
@@ -18,6 +18,9 @@ _export(exports, {
18
18
  renderCompoundButton_unstable: function() {
19
19
  return _index.renderCompoundButton_unstable;
20
20
  },
21
+ useCompoundButtonBase_unstable: function() {
22
+ return _index.useCompoundButtonBase_unstable;
23
+ },
21
24
  useCompoundButtonStyles_unstable: function() {
22
25
  return _index.useCompoundButtonStyles_unstable;
23
26
  },
@@ -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":";;;;;;;;;;;;eAEEA,qBAAc;;;eACdC,+BAAwB;;;eACxBC,oCAA6B;;;eAC7BC,uCAAgC;;;eAChCC,iCAA0B;;;uBACrB,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":";;;;;;;;;;;;eAQEA,qBAAc;;;eACdC,+BAAwB;;;eACxBC,oCAA6B;;;eAG7BG,qCAA8B;;;eAF9BF,uCAAgC;;;eAChCC,iCAA0B;;;uBAErB,oCAAoC"}
@@ -18,6 +18,9 @@ _export(exports, {
18
18
  renderMenuButton_unstable: function() {
19
19
  return _index.renderMenuButton_unstable;
20
20
  },
21
+ useMenuButtonBase_unstable: function() {
22
+ return _index.useMenuButtonBase_unstable;
23
+ },
21
24
  useMenuButtonStyles_unstable: function() {
22
25
  return _index.useMenuButtonStyles_unstable;
23
26
  },
@@ -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":";;;;;;;;;;;;eAEEA,iBAAU;;;eACVC,2BAAoB;;;eACpBC,gCAAyB;;;eACzBC,mCAA4B;;;eAC5BC,6BAAsB;;;uBACjB,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":";;;;;;;;;;;;eAQEA,iBAAU;;;eACVC,2BAAoB;;;eACpBC,gCAAyB;;;eAGzBG,iCAA0B;;;eAF1BF,mCAA4B;;;eAC5BC,6BAAsB;;;uBAEjB,gCAAgC"}
@@ -18,6 +18,9 @@ _export(exports, {
18
18
  splitButtonClassNames: function() {
19
19
  return _index.splitButtonClassNames;
20
20
  },
21
+ useSplitButtonBase_unstable: function() {
22
+ return _index.useSplitButtonBase_unstable;
23
+ },
21
24
  useSplitButtonStyles_unstable: function() {
22
25
  return _index.useSplitButtonStyles_unstable;
23
26
  },
@@ -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":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,iCAA0B;;;eAC1BC,4BAAqB;;;eACrBC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,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":";;;;;;;;;;;;eAQEA,kBAAW;;;eACXC,iCAA0B;;;eAC1BC,4BAAqB;;;eAGrBG,kCAA2B;;;eAF3BF,oCAA6B;;;eAC7BC,8BAAuB;;;uBAElB,iCAAiC"}
@@ -18,6 +18,9 @@ _export(exports, {
18
18
  toggleButtonClassNames: function() {
19
19
  return _index.toggleButtonClassNames;
20
20
  },
21
+ useToggleButtonBase_unstable: function() {
22
+ return _index.useToggleButtonBase_unstable;
23
+ },
21
24
  useToggleButtonStyles_unstable: function() {
22
25
  return _index.useToggleButtonStyles_unstable;
23
26
  },
@@ -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":";;;;;;;;;;;;eAEEA,mBAAY;;;eACZC,kCAA2B;;;eAC3BC,6BAAsB;;;eACtBC,qCAA8B;;;eAC9BC,+BAAwB;;;uBACnB,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":";;;;;;;;;;;;eAOEA,mBAAY;;;eACZC,kCAA2B;;;eAC3BC,6BAAsB;;;eAGtBG,mCAA4B;;;eAF5BF,qCAA8B;;;eAC9BC,+BAAwB;;;uBAEnB,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":""}
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":""}
@@ -18,6 +18,9 @@ _export(exports, {
18
18
  renderButton_unstable: function() {
19
19
  return _renderButton.renderButton_unstable;
20
20
  },
21
+ useButtonBase_unstable: function() {
22
+ return _useButtonBase.useButtonBase_unstable;
23
+ },
21
24
  useButtonStyles_unstable: function() {
22
25
  return _useButtonStylesstyles.useButtonStyles_unstable;
23
26
  },
@@ -28,4 +31,5 @@ _export(exports, {
28
31
  const _Button = require("./Button");
29
32
  const _renderButton = require("./renderButton");
30
33
  const _useButton = require("./useButton");
34
+ const _useButtonBase = require("./useButtonBase");
31
35
  const _useButtonStylesstyles = require("./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":";;;;;;;;;;;;eAASA,cAAM;;;eAKNG,uCAAgB;;;eAFhBF,mCAAqB;;;eAEHG,+CAAwB;;;eAD1CF,6BAAkB;;;wBAJJ,WAAW;8BAGI,iBAAiB;2BACpB,cAAc;uCACU,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":";;;;;;;;;;;;eAASA,cAAM;;;eAMNI,uCAAgB;;;eAHhBH,mCAAqB;;;eAErBE,qCAAsB;;;eACJE,+CAAwB;;;eAF1CH,6BAAkB;;;wBAJJ,WAAW;8BAGI,iBAAiB;2BACpB,cAAc;+BACV,kBAAkB;uCACE,2BAA2B"}
@@ -11,35 +11,17 @@ Object.defineProperty(exports, "useButton_unstable", {
11
11
  });
12
12
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
13
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
- const _reactaria = require("@fluentui/react-aria");
15
- const _reactutilities = require("@fluentui/react-utilities");
16
14
  const _ButtonContext = require("../../contexts/ButtonContext");
15
+ const _useButtonBase = require("./useButtonBase");
17
16
  const useButton_unstable = (props, ref)=>{
18
17
  const { size: contextSize } = (0, _ButtonContext.useButtonContext)();
19
- const { appearance = 'secondary', as = 'button', disabled = false, disabledFocusable = false, icon, iconPosition = 'before', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
20
- const iconShorthand = _reactutilities.slot.optional(icon, {
21
- elementType: 'span'
22
- });
18
+ const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
19
+ const state = (0, _useButtonBase.useButtonBase_unstable)(props, ref);
23
20
  return {
24
21
  // Props passed at the top-level
25
22
  appearance,
26
- disabled,
27
- disabledFocusable,
28
- iconPosition,
29
23
  shape,
30
24
  size,
31
- iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
32
- components: {
33
- root: 'button',
34
- icon: 'span'
35
- },
36
- root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.useARIAButtonProps)(props.as, props)), {
37
- elementType: 'button',
38
- defaultProps: {
39
- ref: ref,
40
- type: as === 'button' ? 'button' : undefined
41
- }
42
- }),
43
- icon: iconShorthand
25
+ ...state
44
26
  };
45
27
  };
@@ -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;;;;;+BAaaK;;;;;;;iEAXU,QAAQ;2BACyB,uBAAuB;gCAChC,4BAA4B;+BAC1C,+BAA+B;AAQzD,2BAA2B,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,OAAGL,+BAAAA;IAC9B,MAAM,EACJM,aAAa,WAAW,EACxBC,KAAK,QAAQ,EACbC,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzBC,IAAI,EACJC,eAAe,QAAQ,EACvBC,QAAQ,SAAS,EACjBR,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAC/B,GAAGH;IACJ,MAAMW,gBAAgBd,oBAAAA,CAAKe,QAAQ,CAACJ,MAAM;QAAEK,aAAa;IAAO;IAChE,OAAO;QACL,gCAAgC;QAChCT;QACAE;QACAC;QACAE;QACAC;QACAR;QACAY,UAAUC,QAAQJ,CAAAA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeK,QAAAA,AAAQ,KAAI,CAAChB,MAAMgB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUV,MAAM;QAAO;QAC3CU,MAAMrB,oBAAAA,CAAKsB,MAAM,KAA2BvB,wCAAAA,EAAyBS,QAAIV,6BAAAA,EAAmBK,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;;;;;;;;;;;;iEAEuB,QAAQ;+BACE,+BAA+B;+BAEzB,kBAAkB;AAOlD,MAAMG,qBAAqB,CAChCC,OACAC;IAEA,MAAM,EAAEC,MAAMC,WAAW,EAAE,OAAGN,+BAAAA;IAC9B,MAAM,EAAEO,aAAa,WAAW,EAAEC,QAAQ,SAAS,EAAEH,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAE,GAAGH;IACxF,MAAMM,YAAQR,qCAAAA,EAAuBE,OAAOC;IAE5C,OAAO;QACL,gCAAgC;QAChCG;QACAC;QACAH;QACA,GAAGI,KAAK;IACV;AACF,EAAE"}
@@ -0,0 +1,41 @@
1
+ 'use client';
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "useButtonBase_unstable", {
7
+ enumerable: true,
8
+ get: function() {
9
+ return useButtonBase_unstable;
10
+ }
11
+ });
12
+ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
+ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
+ const _reactaria = require("@fluentui/react-aria");
15
+ const _reactutilities = require("@fluentui/react-utilities");
16
+ const useButtonBase_unstable = (props, ref)=>{
17
+ const { as = 'button', disabled = false, disabledFocusable = false, icon, iconPosition = 'before' } = props;
18
+ const iconShorthand = _reactutilities.slot.optional(icon, {
19
+ elementType: 'span'
20
+ });
21
+ return {
22
+ // Props passed at the top-level
23
+ disabled,
24
+ disabledFocusable,
25
+ iconPosition,
26
+ iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
27
+ // Slots definition
28
+ components: {
29
+ root: 'button',
30
+ icon: 'span'
31
+ },
32
+ root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.useARIAButtonProps)(props.as, props)), {
33
+ elementType: 'button',
34
+ defaultProps: {
35
+ ref: ref,
36
+ type: as === 'button' ? 'button' : undefined
37
+ }
38
+ }),
39
+ icon: iconShorthand
40
+ };
41
+ };
@@ -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;;;;;+BAYaI;;;;;;;iEAVU,QAAQ;2BACyB,uBAAuB;gCAChC,4BAA4B;AAQpE,+BAA+B,CACpCC,OACAC;IAEA,MAAM,EAAEC,KAAK,QAAQ,EAAEC,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAEC,IAAI,EAAEC,eAAe,QAAQ,EAAE,GAAGN;IACtG,MAAMO,gBAAgBT,oBAAAA,CAAKU,QAAQ,CAACH,MAAM;QAAEI,aAAa;IAAO;IAChE,OAAO;QACL,gCAAgC;QAChCN;QACAC;QACAE;QACAI,UAAUC,QAAQJ,CAAAA,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeK,QAAAA,AAAQ,KAAI,CAACZ,MAAMY,QAAQ;QAC5D,mBAAmB;QACnBC,YAAY;YAAEC,MAAM;YAAUT,MAAM;QAAO;QAC3CS,MAAMhB,oBAAAA,CAAKiB,MAAM,CAA2BlB,4CAAAA,EAAyBK,QAAIN,6BAAAA,EAAmBI,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":""}
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":""}
@@ -18,6 +18,9 @@ _export(exports, {
18
18
  renderCompoundButton_unstable: function() {
19
19
  return _renderCompoundButton.renderCompoundButton_unstable;
20
20
  },
21
+ useCompoundButtonBase_unstable: function() {
22
+ return _useCompoundButtonBase.useCompoundButtonBase_unstable;
23
+ },
21
24
  useCompoundButtonStyles_unstable: function() {
22
25
  return _useCompoundButtonStylesstyles.useCompoundButtonStyles_unstable;
23
26
  },
@@ -28,4 +31,5 @@ _export(exports, {
28
31
  const _CompoundButton = require("./CompoundButton");
29
32
  const _renderCompoundButton = require("./renderCompoundButton");
30
33
  const _useCompoundButton = require("./useCompoundButton");
34
+ const _useCompoundButtonBase = require("./useCompoundButtonBase");
31
35
  const _useCompoundButtonStylesstyles = require("./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":";;;;;;;;;;;;eAASA,8BAAc;;;eAIdG,uDAAwB;;;eAFxBF,mDAA6B;;;eAEHG,+DAAgC;;;eAD1DF,6CAA0B;;;gCAHJ,mBAAmB;sCAEJ,yBAAyB;mCAC5B,sBAAsB;+CACU,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":";;;;;;;;;;;;eAASA,8BAAc;;;eAWdI,uDAAwB;;;eAHxBH,mDAA6B;;;eAE7BE,qDAA8B;;;eACJE,+DAAgC;;;eAF1DH,6CAA0B;;;gCATJ,mBAAmB;sCAQJ,yBAAyB;mCAC5B,sBAAsB;uCAClB,0BAA0B;+CACE,mCAAmC"}