@fluentui/react-button 0.0.0-nightly-20230804-0415.1 → 0.0.0-nightly-20230808-0415.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/CHANGELOG.json +66 -21
  2. package/CHANGELOG.md +27 -13
  3. package/lib/components/Button/renderButton.js +3 -3
  4. package/lib/components/Button/renderButton.js.map +1 -1
  5. package/lib/components/Button/useButton.js +8 -6
  6. package/lib/components/Button/useButton.js.map +1 -1
  7. package/lib/components/Button/useButtonStyles.styles.js +1 -1
  8. package/lib/components/Button/useButtonStyles.styles.js.map +1 -1
  9. package/lib/components/CompoundButton/renderCompoundButton.js +3 -3
  10. package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
  11. package/lib/components/CompoundButton/useCompoundButton.js +6 -4
  12. package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
  13. package/lib/components/MenuButton/renderMenuButton.js +3 -3
  14. package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
  15. package/lib/components/MenuButton/useMenuButton.js +4 -3
  16. package/lib/components/MenuButton/useMenuButton.js.map +1 -1
  17. package/lib/components/SplitButton/renderSplitButton.js +3 -3
  18. package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
  19. package/lib/components/SplitButton/useSplitButton.js +11 -9
  20. package/lib/components/SplitButton/useSplitButton.js.map +1 -1
  21. package/lib-commonjs/components/Button/renderButton.js +2 -2
  22. package/lib-commonjs/components/Button/renderButton.js.map +1 -1
  23. package/lib-commonjs/components/Button/useButton.js +7 -5
  24. package/lib-commonjs/components/Button/useButton.js.map +1 -1
  25. package/lib-commonjs/components/Button/useButtonStyles.styles.js +1 -1
  26. package/lib-commonjs/components/Button/useButtonStyles.styles.js.map +1 -1
  27. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js +2 -2
  28. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
  29. package/lib-commonjs/components/CompoundButton/useCompoundButton.js +5 -3
  30. package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
  31. package/lib-commonjs/components/MenuButton/renderMenuButton.js +2 -2
  32. package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
  33. package/lib-commonjs/components/MenuButton/useMenuButton.js +3 -2
  34. package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
  35. package/lib-commonjs/components/SplitButton/renderSplitButton.js +2 -2
  36. package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
  37. package/lib-commonjs/components/SplitButton/useSplitButton.js +10 -8
  38. package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
  39. package/package.json +10 -10
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-button",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 04 Aug 2023 04:21:48 GMT",
6
- "tag": "@fluentui/react-button_v0.0.0-nightly-20230804-0415.1",
7
- "version": "0.0.0-nightly-20230804-0415.1",
5
+ "date": "Tue, 08 Aug 2023 04:22:18 GMT",
6
+ "tag": "@fluentui/react-button_v0.0.0-nightly-20230808-0415.1",
7
+ "version": "0.0.0-nightly-20230808-0415.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,56 +16,101 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-button",
19
- "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230804-0415.1",
20
- "commit": "ad95d1723b836488f78769eb56b64caf31baab57"
19
+ "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230808-0415.1",
20
+ "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
21
21
  },
22
22
  {
23
23
  "author": "beachball",
24
24
  "package": "@fluentui/react-button",
25
- "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20230804-0415.1",
26
- "commit": "ad95d1723b836488f78769eb56b64caf31baab57"
25
+ "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20230808-0415.1",
26
+ "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
27
27
  },
28
28
  {
29
29
  "author": "beachball",
30
30
  "package": "@fluentui/react-button",
31
- "comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230804-0415.1",
32
- "commit": "ad95d1723b836488f78769eb56b64caf31baab57"
31
+ "comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230808-0415.1",
32
+ "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
33
33
  },
34
34
  {
35
35
  "author": "beachball",
36
36
  "package": "@fluentui/react-button",
37
- "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230804-0415.1",
38
- "commit": "ad95d1723b836488f78769eb56b64caf31baab57"
37
+ "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230808-0415.1",
38
+ "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
39
39
  },
40
40
  {
41
41
  "author": "beachball",
42
42
  "package": "@fluentui/react-button",
43
- "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230804-0415.1",
44
- "commit": "ad95d1723b836488f78769eb56b64caf31baab57"
43
+ "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230808-0415.1",
44
+ "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
45
45
  },
46
46
  {
47
47
  "author": "beachball",
48
48
  "package": "@fluentui/react-button",
49
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230804-0415.1",
50
- "commit": "ad95d1723b836488f78769eb56b64caf31baab57"
49
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230808-0415.1",
50
+ "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
51
51
  },
52
52
  {
53
53
  "author": "beachball",
54
54
  "package": "@fluentui/react-button",
55
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230804-0415.1",
56
- "commit": "ad95d1723b836488f78769eb56b64caf31baab57"
55
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230808-0415.1",
56
+ "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
57
57
  },
58
58
  {
59
59
  "author": "beachball",
60
60
  "package": "@fluentui/react-button",
61
- "comment": "Bump @fluentui/react-conformance to v0.0.0-nightly-20230804-0415.1",
62
- "commit": "ad95d1723b836488f78769eb56b64caf31baab57"
61
+ "comment": "Bump @fluentui/react-conformance to v0.0.0-nightly-20230808-0415.1",
62
+ "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
63
63
  },
64
64
  {
65
65
  "author": "beachball",
66
66
  "package": "@fluentui/react-button",
67
- "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230804-0415.1",
68
- "commit": "ad95d1723b836488f78769eb56b64caf31baab57"
67
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230808-0415.1",
68
+ "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
69
+ }
70
+ ]
71
+ }
72
+ },
73
+ {
74
+ "date": "Fri, 04 Aug 2023 08:52:58 GMT",
75
+ "tag": "@fluentui/react-button_v9.3.27",
76
+ "version": "9.3.27",
77
+ "comments": {
78
+ "patch": [
79
+ {
80
+ "author": "beachball",
81
+ "package": "@fluentui/react-button",
82
+ "comment": "Bump @fluentui/react-aria to v9.3.28",
83
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
84
+ },
85
+ {
86
+ "author": "beachball",
87
+ "package": "@fluentui/react-button",
88
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13",
89
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
90
+ },
91
+ {
92
+ "author": "beachball",
93
+ "package": "@fluentui/react-button",
94
+ "comment": "Bump @fluentui/react-shared-contexts to v9.7.1",
95
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
96
+ },
97
+ {
98
+ "author": "beachball",
99
+ "package": "@fluentui/react-button",
100
+ "comment": "Bump @fluentui/react-tabster to v9.12.0",
101
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
102
+ },
103
+ {
104
+ "author": "beachball",
105
+ "package": "@fluentui/react-button",
106
+ "comment": "Bump @fluentui/react-theme to v9.1.10",
107
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
108
+ },
109
+ {
110
+ "author": "beachball",
111
+ "package": "@fluentui/react-button",
112
+ "comment": "Bump @fluentui/react-utilities to v9.11.0",
113
+ "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
69
114
  }
70
115
  ]
71
116
  }
package/CHANGELOG.md CHANGED
@@ -1,26 +1,40 @@
1
1
  # Change Log - @fluentui/react-button
2
2
 
3
- This log was last generated on Fri, 04 Aug 2023 04:21:48 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 08 Aug 2023 04:22:18 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20230804-0415.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.0.0-nightly-20230804-0415.1)
7
+ ## [0.0.0-nightly-20230808-0415.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.0.0-nightly-20230808-0415.1)
8
8
 
9
- Fri, 04 Aug 2023 04:21:48 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.26..@fluentui/react-button_v0.0.0-nightly-20230804-0415.1)
9
+ Tue, 08 Aug 2023 04:22:18 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.27..@fluentui/react-button_v0.0.0-nightly-20230808-0415.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230804-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/ad95d1723b836488f78769eb56b64caf31baab57) by beachball)
16
- - Bump @fluentui/react-aria to v0.0.0-nightly-20230804-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/ad95d1723b836488f78769eb56b64caf31baab57) by beachball)
17
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230804-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/ad95d1723b836488f78769eb56b64caf31baab57) by beachball)
18
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230804-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/ad95d1723b836488f78769eb56b64caf31baab57) by beachball)
19
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20230804-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/ad95d1723b836488f78769eb56b64caf31baab57) by beachball)
20
- - Bump @fluentui/react-theme to v0.0.0-nightly-20230804-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/ad95d1723b836488f78769eb56b64caf31baab57) by beachball)
21
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20230804-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/ad95d1723b836488f78769eb56b64caf31baab57) by beachball)
22
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20230804-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/ad95d1723b836488f78769eb56b64caf31baab57) by beachball)
23
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230804-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/ad95d1723b836488f78769eb56b64caf31baab57) by beachball)
15
+ - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
16
+ - Bump @fluentui/react-aria to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
17
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
18
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
19
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
20
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
21
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
22
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
23
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
24
+
25
+ ## [9.3.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.27)
26
+
27
+ Fri, 04 Aug 2023 08:52:58 GMT
28
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.26..@fluentui/react-button_v9.3.27)
29
+
30
+ ### Patches
31
+
32
+ - Bump @fluentui/react-aria to v9.3.28 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
33
+ - Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
34
+ - Bump @fluentui/react-shared-contexts to v9.7.1 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
35
+ - Bump @fluentui/react-tabster to v9.12.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
36
+ - Bump @fluentui/react-theme to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
37
+ - Bump @fluentui/react-utilities to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
24
38
 
25
39
  ## [9.3.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.26)
26
40
 
@@ -1,9 +1,9 @@
1
1
  /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
2
- import { getSlotsNext } from '@fluentui/react-utilities';
2
+ import { assertSlots } from '@fluentui/react-utilities';
3
3
  /**
4
4
  * Renders a Button component by passing the state defined props to the appropriate slots.
5
5
  */ export const renderButton_unstable = (state)=>{
6
- const { slots , slotProps } = getSlotsNext(state);
6
+ assertSlots(state);
7
7
  const { iconOnly , iconPosition } = state;
8
- return /*#__PURE__*/ createElement(slots.root, slotProps.root, iconPosition !== 'after' && slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), !iconOnly && state.root.children, iconPosition === 'after' && slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon));
8
+ return /*#__PURE__*/ createElement(state.root, null, iconPosition !== 'after' && state.icon && /*#__PURE__*/ createElement(state.icon, null), !iconOnly && state.root.children, iconPosition === 'after' && state.icon && /*#__PURE__*/ createElement(state.icon, null));
9
9
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["renderButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState) => {\n const { slots, slotProps } = getSlotsNext<ButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <slots.root {...slotProps.root}>\n {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n {!iconOnly && state.root.children}\n {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"],"names":["createElement","getSlotsNext","renderButton_unstable","state","slots","slotProps","iconOnly","iconPosition","root","icon","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,QAAuB;IAC3D,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA0BE;IACvD,MAAM,EAAEG,SAAQ,EAAEC,aAAY,EAAE,GAAGJ;IAEnC,qBACE,AAfJ,cAeKC,MAAMI,IAAI,EAAKH,UAAUG,IAAI,EAC3BD,iBAAiB,WAAWH,MAAMK,IAAI,kBAAI,AAhBjD,cAgBkDL,MAAMK,IAAI,EAAKJ,UAAUI,IAAI,GACxE,CAACH,YAAYH,MAAMK,IAAI,CAACE,QAAQ,EAChCH,iBAAiB,WAAWH,MAAMK,IAAI,kBAAI,AAlBjD,cAkBkDL,MAAMK,IAAI,EAAKJ,UAAUI,IAAI;AAG/E,EAAE"}
1
+ {"version":3,"sources":["renderButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState) => {\n assertSlots<ButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <state.root>\n {iconPosition !== 'after' && state.icon && <state.icon />}\n {!iconOnly && state.root.children}\n {iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["createElement","assertSlots","renderButton_unstable","state","iconOnly","iconPosition","root","icon","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,QAAuB;IAC3DF,YAAyBE;IACzB,MAAM,EAAEC,SAAQ,EAAEC,aAAY,EAAE,GAAGF;IAEnC,qBACE,AAfJ,cAeKA,MAAMG,IAAI,QACRD,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,AAhBjD,cAgBkDJ,MAAMI,IAAI,SACrD,CAACH,YAAYD,MAAMG,IAAI,CAACE,QAAQ,EAChCH,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,AAlBjD,cAkBkDJ,MAAMI,IAAI;AAG5D,EAAE"}
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { useARIAButtonShorthand } from '@fluentui/react-aria';
3
- import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
3
+ import { getNativeElementProps, slot } from '@fluentui/react-utilities';
4
4
  import { useButtonContext } from '../../contexts/ButtonContext';
5
5
  /**
6
6
  * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
@@ -9,7 +9,9 @@ import { useButtonContext } from '../../contexts/ButtonContext';
9
9
  */ export const useButton_unstable = (props, ref)=>{
10
10
  const { size: contextSize } = useButtonContext();
11
11
  const { appearance ='secondary' , as ='button' , disabled =false , disabledFocusable =false , icon , iconPosition ='before' , shape ='rounded' , size =contextSize !== null && contextSize !== void 0 ? contextSize : 'medium' } = props;
12
- const iconShorthand = resolveShorthand(icon);
12
+ const iconShorthand = slot.optional(icon, {
13
+ elementType: 'span'
14
+ });
13
15
  return {
14
16
  // Props passed at the top-level
15
17
  appearance,
@@ -18,20 +20,20 @@ import { useButtonContext } from '../../contexts/ButtonContext';
18
20
  iconPosition,
19
21
  shape,
20
22
  size,
21
- // State calculated from a set of props
22
23
  iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
23
- // Slots definition
24
24
  components: {
25
25
  root: 'button',
26
26
  icon: 'span'
27
27
  },
28
- root: getNativeElementProps(as, useARIAButtonShorthand(props, {
28
+ root: slot.always(getNativeElementProps(as, useARIAButtonShorthand(props, {
29
29
  required: true,
30
30
  defaultProps: {
31
31
  ref: ref,
32
32
  type: 'button'
33
33
  }
34
- })),
34
+ })), {
35
+ elementType: 'button'
36
+ }),
35
37
  icon: iconShorthand
36
38
  };
37
39
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["useButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } 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 = resolveShorthand(icon);\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // State calculated from a set of props\n iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n },\n\n root: getNativeElementProps(\n as,\n useARIAButtonShorthand<ARIAButtonSlotProps<'a'>>(props, {\n required: true,\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n type: 'button',\n },\n }),\n ),\n icon: iconShorthand,\n };\n};\n"],"names":["React","useARIAButtonShorthand","getNativeElementProps","resolveShorthand","useButtonContext","useButton_unstable","props","ref","size","contextSize","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","iconOnly","Boolean","children","components","root","required","defaultProps","type"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA8BC,sBAAsB,QAAQ,uBAAuB;AACnF,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACpF,SAASC,gBAAgB,QAAQ,+BAA+B;AAGhE;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,OACAC,MACgB;IAChB,MAAM,EAAEC,MAAMC,YAAW,EAAE,GAAGL;IAC9B,MAAM,EACJM,YAAa,YAAW,EACxBC,IAAK,SAAQ,EACbC,UAAW,KAAK,CAAA,EAChBC,mBAAoB,KAAK,CAAA,EACzBC,KAAI,EACJC,cAAe,SAAQ,EACvBC,OAAQ,UAAS,EACjBR,MAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,CAAA,EAC/B,GAAGH;IACJ,MAAMW,gBAAgBd,iBAAiBW;IAEvC,OAAO;QACL,gCAAgC;QAChCJ;QACAE;QACAC;QACAE;QACAC;QACAR;QAEA,uCAAuC;QACvCU,UAAUC,QAAQF,CAAAA,0BAAAA,2BAAAA,KAAAA,IAAAA,cAAeG,QAAQ,AAAD,KAAK,CAACd,MAAMc,QAAQ;QAE5D,mBAAmB;QACnBC,YAAY;YACVC,MAAM;YACNR,MAAM;QACR;QAEAQ,MAAMpB,sBACJS,IACAV,uBAAiDK,OAAO;YACtDiB,UAAU,IAAI;YACdC,cAAc;gBACZjB,KAAKA;gBACLkB,MAAM;YACR;QACF;QAEFX,MAAMG;IACR;AACF,EAAE"}
1
+ {"version":3,"sources":["useButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { getNativeElementProps, 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(\n getNativeElementProps(\n as,\n useARIAButtonShorthand<ARIAButtonSlotProps<'a'>>(props, {\n required: true,\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n type: 'button',\n },\n }),\n ),\n { elementType: 'button' },\n ),\n icon: iconShorthand,\n };\n};\n"],"names":["React","useARIAButtonShorthand","getNativeElementProps","slot","useButtonContext","useButton_unstable","props","ref","size","contextSize","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","optional","elementType","iconOnly","Boolean","children","components","root","always","required","defaultProps","type"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA8BC,sBAAsB,QAAQ,uBAAuB;AACnF,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AACxE,SAASC,gBAAgB,QAAQ,+BAA+B;AAGhE;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB,CAChCC,OACAC,MACgB;IAChB,MAAM,EAAEC,MAAMC,YAAW,EAAE,GAAGL;IAC9B,MAAM,EACJM,YAAa,YAAW,EACxBC,IAAK,SAAQ,EACbC,UAAW,KAAK,CAAA,EAChBC,mBAAoB,KAAK,CAAA,EACzBC,KAAI,EACJC,cAAe,SAAQ,EACvBC,OAAQ,UAAS,EACjBR,MAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,CAAA,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,2BAAAA,KAAAA,IAAAA,cAAeK,QAAQ,AAAD,KAAK,CAAChB,MAAMgB,QAAQ;QAC5DC,YAAY;YAAEC,MAAM;YAAUV,MAAM;QAAO;QAC3CU,MAAMrB,KAAKsB,MAAM,CACfvB,sBACES,IACAV,uBAAiDK,OAAO;YACtDoB,UAAU,IAAI;YACdC,cAAc;gBACZpB,KAAKA;gBACLqB,MAAM;YACR;QACF,KAEF;YAAET,aAAa;QAAS;QAE1BL,MAAMG;IACR;AACF,EAAE"}
@@ -514,7 +514,7 @@ export const useButtonStyles_unstable = state => {
514
514
  // User provided class name
515
515
  state.root.className);
516
516
  if (state.icon) {
517
- state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], iconStyles[size], state.icon.className);
517
+ state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);
518
518
  }
519
519
  return state;
520
520
  };
@@ -1 +1 @@
1
- {"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","__styles","__resetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","useIconBaseClassName","useRootStyles","outline","De3pzq","Jwef8y","iro3zm","primary","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","secondary","subtle","Bbdnnc7","x3br3k","Bx3q9su","xd2cci","transparent","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rounded","square","small","Bf4jedk","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bhrd7zp","Bg96gwp","smallWithIcon","medium","large","largeWithIcon","d","h","m","useRootDisabledStyles","base","Bceei9c","eoavqd","Bk3fhr4","Bmfj8id","c3iz72","em6i61","vm6p8p","highContrast","G867l3","gdbnj","mxns5l","o3nasb","useRootFocusStyles","kdpuga","Bw81rd7","B6xbmo0","dm238s","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","j6ew2k","useRootIconOnlyStyles","B2u0y6b","useIconStyles","Bqenvij","a9b677","Bqrlyyl","before","t21cq0","after","Frg6f3","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children","undefined"],"sources":["useButtonStyles.styles.js"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nexport const buttonClassNames = {\n root: 'fui-Button',\n icon: 'fui-Button__icon'\n};\nconst iconSpacingVar = '--fui-Button__icon--spacing';\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingSmallWithIcon = '1px';\nconst buttonSpacingMedium = '5px';\nconst buttonSpacingLarge = '8px';\nconst buttonSpacingLargeWithIcon = '7px';\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n margin: 0,\n overflow: 'hidden',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n fontFamily: tokens.fontFamilyBase,\n outlineStyle: 'none',\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground1Hover,\n cursor: 'pointer',\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n outlineStyle: 'none',\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n minWidth: '96px',\n borderRadius: tokens.borderRadiusMedium,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n // Transition styles\n transitionDuration: tokens.durationFaster,\n transitionProperty: 'background, border, color',\n transitionTimingFunction: tokens.curveEasyEase,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':focus': {\n borderColor: 'ButtonText'\n },\n ':hover': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none'\n },\n ':hover:active': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none'\n }\n },\n // Focus styles\n ...createCustomFocusIndicatorStyle({\n borderColor: tokens.colorTransparentStroke,\n borderRadius: tokens.borderRadiusMedium,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1\n })\n});\nconst useIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n fontSize: '20px',\n height: '20px',\n width: '20px',\n [iconSpacingVar]: tokens.spacingHorizontalSNudge\n});\nconst useRootStyles = makeStyles({\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed\n }\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('HighlightText'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n }\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandHover\n }\n },\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed\n }\n },\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Canvas',\n [`& .${buttonClassNames.icon}`]: {\n color: 'Canvas'\n }\n },\n ':hover:active': {\n color: 'Canvas',\n [`& .${buttonClassNames.icon}`]: {\n color: 'Canvas'\n }\n }\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: 'Highlight'\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: 'Highlight'\n }\n }\n },\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular)\n },\n rounded: {\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone)\n },\n // Size variations\n small: {\n minWidth: '64px',\n ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n ...shorthands.borderRadius(buttonSpacingSmall),\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200\n },\n smallWithIcon: {\n paddingBottom: buttonSpacingSmallWithIcon,\n paddingTop: buttonSpacingSmallWithIcon\n },\n medium: {\n },\n large: {\n minWidth: '96px',\n ...shorthands.padding(buttonSpacingLarge, tokens.spacingHorizontalL),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400\n },\n largeWithIcon: {\n paddingBottom: buttonSpacingLargeWithIcon,\n paddingTop: buttonSpacingLargeWithIcon\n }\n});\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n [`& .${iconFilledClassName}`]: {\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline'\n }\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n [`& .${iconFilledClassName}`]: {\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline'\n }\n }\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n ':focus': {\n ...shorthands.borderColor('GrayText')\n },\n ':hover': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText'\n },\n ':hover:active': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText'\n }\n }\n },\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground\n }\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n ':hover': {\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n ...shorthands.borderColor('transparent')\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent')\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent')\n }\n }\n});\nconst useRootFocusStyles = makeStyles({\n // Shape variations\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular)\n }),\n rounded: {\n },\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone)\n }),\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`\n }),\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall)\n }),\n medium: {\n },\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge)\n })\n});\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding(buttonSpacingSmallWithIcon),\n minWidth: '24px',\n maxWidth: '24px'\n },\n medium: {\n ...shorthands.padding(buttonSpacingMedium),\n minWidth: '32px',\n maxWidth: '32px'\n },\n large: {\n ...shorthands.padding(buttonSpacingLargeWithIcon),\n minWidth: '40px',\n maxWidth: '40px'\n }\n});\nconst useIconStyles = makeStyles({\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n [iconSpacingVar]: tokens.spacingHorizontalXS\n },\n medium: {\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n [iconSpacingVar]: tokens.spacingHorizontalSNudge\n },\n // Icon position variations\n before: {\n marginRight: `var(${iconSpacingVar})`\n },\n after: {\n marginLeft: `var(${iconSpacingVar})`\n }\n});\nexport const useButtonStyles_unstable = (state)=>{\n const rootBaseClassName = useRootBaseClassName();\n const iconBaseClassName = useIconBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n const { appearance , disabled , disabledFocusable , icon , iconOnly , iconPosition , shape , size } = state;\n state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape], // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles\n appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles\n iconOnly && rootIconOnlyStyles[size], // User provided class name\n state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], iconStyles[size], state.icon.className);\n }\n return state;\n};\n"],"mappings":"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"}
1
+ {"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","__styles","__resetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","useIconBaseClassName","useRootStyles","outline","De3pzq","Jwef8y","iro3zm","primary","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","secondary","subtle","Bbdnnc7","x3br3k","Bx3q9su","xd2cci","transparent","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rounded","square","small","Bf4jedk","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bhrd7zp","Bg96gwp","smallWithIcon","medium","large","largeWithIcon","d","h","m","useRootDisabledStyles","base","Bceei9c","eoavqd","Bk3fhr4","Bmfj8id","c3iz72","em6i61","vm6p8p","highContrast","G867l3","gdbnj","mxns5l","o3nasb","useRootFocusStyles","kdpuga","Bw81rd7","B6xbmo0","dm238s","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","j6ew2k","useRootIconOnlyStyles","B2u0y6b","useIconStyles","Bqenvij","a9b677","Bqrlyyl","before","t21cq0","after","Frg6f3","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children"],"sources":["useButtonStyles.styles.js"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nexport const buttonClassNames = {\n root: 'fui-Button',\n icon: 'fui-Button__icon'\n};\nconst iconSpacingVar = '--fui-Button__icon--spacing';\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingSmallWithIcon = '1px';\nconst buttonSpacingMedium = '5px';\nconst buttonSpacingLarge = '8px';\nconst buttonSpacingLargeWithIcon = '7px';\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n margin: 0,\n overflow: 'hidden',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n fontFamily: tokens.fontFamilyBase,\n outlineStyle: 'none',\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground1Hover,\n cursor: 'pointer',\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n outlineStyle: 'none',\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n minWidth: '96px',\n borderRadius: tokens.borderRadiusMedium,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n // Transition styles\n transitionDuration: tokens.durationFaster,\n transitionProperty: 'background, border, color',\n transitionTimingFunction: tokens.curveEasyEase,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms'\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':focus': {\n borderColor: 'ButtonText'\n },\n ':hover': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none'\n },\n ':hover:active': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none'\n }\n },\n // Focus styles\n ...createCustomFocusIndicatorStyle({\n borderColor: tokens.colorTransparentStroke,\n borderRadius: tokens.borderRadiusMedium,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1\n })\n});\nconst useIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n fontSize: '20px',\n height: '20px',\n width: '20px',\n [iconSpacingVar]: tokens.spacingHorizontalSNudge\n});\nconst useRootStyles = makeStyles({\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed\n }\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('HighlightText'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n }\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandHover\n }\n },\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed\n }\n },\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Canvas',\n [`& .${buttonClassNames.icon}`]: {\n color: 'Canvas'\n }\n },\n ':hover:active': {\n color: 'Canvas',\n [`& .${buttonClassNames.icon}`]: {\n color: 'Canvas'\n }\n }\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: 'Highlight'\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: 'Highlight'\n }\n }\n },\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular)\n },\n rounded: {\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone)\n },\n // Size variations\n small: {\n minWidth: '64px',\n ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n ...shorthands.borderRadius(buttonSpacingSmall),\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200\n },\n smallWithIcon: {\n paddingBottom: buttonSpacingSmallWithIcon,\n paddingTop: buttonSpacingSmallWithIcon\n },\n medium: {\n },\n large: {\n minWidth: '96px',\n ...shorthands.padding(buttonSpacingLarge, tokens.spacingHorizontalL),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400\n },\n largeWithIcon: {\n paddingBottom: buttonSpacingLargeWithIcon,\n paddingTop: buttonSpacingLargeWithIcon\n }\n});\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n [`& .${iconFilledClassName}`]: {\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline'\n }\n },\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n [`& .${iconFilledClassName}`]: {\n display: 'none'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline'\n }\n }\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n ':focus': {\n ...shorthands.borderColor('GrayText')\n },\n ':hover': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText'\n },\n ':hover:active': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText'\n }\n }\n },\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground\n }\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n ':hover': {\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n ...shorthands.borderColor('transparent')\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent')\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent')\n }\n }\n});\nconst useRootFocusStyles = makeStyles({\n // Shape variations\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular)\n }),\n rounded: {\n },\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone)\n }),\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`\n }),\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall)\n }),\n medium: {\n },\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge)\n })\n});\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding(buttonSpacingSmallWithIcon),\n minWidth: '24px',\n maxWidth: '24px'\n },\n medium: {\n ...shorthands.padding(buttonSpacingMedium),\n minWidth: '32px',\n maxWidth: '32px'\n },\n large: {\n ...shorthands.padding(buttonSpacingLargeWithIcon),\n minWidth: '40px',\n maxWidth: '40px'\n }\n});\nconst useIconStyles = makeStyles({\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n [iconSpacingVar]: tokens.spacingHorizontalXS\n },\n medium: {\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n [iconSpacingVar]: tokens.spacingHorizontalSNudge\n },\n // Icon position variations\n before: {\n marginRight: `var(${iconSpacingVar})`\n },\n after: {\n marginLeft: `var(${iconSpacingVar})`\n }\n});\nexport const useButtonStyles_unstable = (state)=>{\n const rootBaseClassName = useRootBaseClassName();\n const iconBaseClassName = useIconBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n const { appearance , disabled , disabledFocusable , icon , iconOnly , iconPosition , shape , size } = state;\n state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape], // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles\n appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles\n iconOnly && rootIconOnlyStyles[size], // User provided class name\n state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, !!state.root.children && iconStyles[iconPosition], iconStyles[size], state.icon.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,UAAU,EAAAC,QAAA,EAAAC,aAAA,EAA+BC,YAAY,QAAQ,gBAAgB;AACtF,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,cAAc,GAAG,6BAA6B;AACpD,MAAMC,kBAAkB,GAAG,KAAK;AAChC,MAAMC,0BAA0B,GAAG,KAAK;AACxC,MAAMC,mBAAmB,GAAG,KAAK;AACjC,MAAMC,kBAAkB,GAAG,KAAK;AAChC,MAAMC,0BAA0B,GAAG,KAAK;AACxC,MAAMC,oBAAoB,gBAAGX,aAAA,uyIAgF5B,CAAC;AACF,MAAMY,oBAAoB,gBAAGZ,aAAA,uaAQ5B,CAAC;AACF,MAAMa,aAAa,gBAAGd,QAAA;EAAAe,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAH,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAP,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAX,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAvC,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAP,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAA2B,OAAA;IAAAtC,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAuB,MAAA;IAAAV,MAAA;IAAAW,OAAA;IAAAL,MAAA;IAAAM,MAAA;EAAA;EAAAC,WAAA;IAAA5C,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAP,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAX,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAQ,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAQ,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;EAAAC,MAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAG,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,aAAA;IAAAL,OAAA;IAAAF,MAAA;EAAA;EAAAQ,MAAA;EAAAC,KAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAI,aAAA;IAAAR,OAAA;IAAAF,MAAA;EAAA;AAAA;EAAAW,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA8IrB,CAAC;AACF,MAAMC,qBAAqB,gBAAGpF,QAAA;EAAAqF,IAAA;IAAArE,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAA8D,OAAA;IAAArE,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAA0D,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAvE,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAwD,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAA1D,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAsD,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAvD,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAtC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAqB,SAAA;EAAAC,MAAA;IAAAvC,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAN,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAV,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA2B,WAAA;IAAA5C,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAN,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAV,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAgD,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAkG7B,CAAC;AACF,MAAMe,kBAAkB,gBAAGlG,QAAA;EAAA6D,QAAA;IAAAsC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAApC,OAAA;EAAAC,MAAA;IAAAgC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAnF,OAAA;IAAAoF,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAvC,KAAA;IAAA+B,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAxB,MAAA;EAAAC,KAAA;IAAAoB,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAArB,CAAA;AAAA,CAwB1B,CAAC;AACF,MAAM2B,qBAAqB,gBAAG5G,QAAA;EAAAoE,KAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAJ,OAAA;IAAAwC,OAAA;EAAA;EAAA/B,MAAA;IAAAR,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAJ,OAAA;IAAAwC,OAAA;EAAA;EAAA9B,KAAA;IAAAT,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAJ,OAAA;IAAAwC,OAAA;EAAA;AAAA;EAAA5B,CAAA;AAAA,CAiB7B,CAAC;AACF,MAAM6B,aAAa,gBAAG9G,QAAA;EAAAoE,KAAA;IAAAM,OAAA;IAAAqC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAnC,MAAA;EAAAC,KAAA;IAAAL,OAAA;IAAAqC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;AAAA;EAAApC,CAAA;AAAA,CAuBrB,CAAC;AACF,OAAO,MAAMqC,wBAAwB,GAAIC,KAAK,IAAG;EAC7C,MAAMC,iBAAiB,GAAG5G,oBAAoB,CAAC,CAAC;EAChD,MAAM6G,iBAAiB,GAAG5G,oBAAoB,CAAC,CAAC;EAChD,MAAM6G,UAAU,GAAG5G,aAAa,CAAC,CAAC;EAClC,MAAM6G,kBAAkB,GAAGvC,qBAAqB,CAAC,CAAC;EAClD,MAAMwC,eAAe,GAAG1B,kBAAkB,CAAC,CAAC;EAC5C,MAAM2B,kBAAkB,GAAGjB,qBAAqB,CAAC,CAAC;EAClD,MAAMkB,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAM;IAAEiB,UAAU;IAAGC,QAAQ;IAAGC,iBAAiB;IAAG5H,IAAI;IAAG6H,QAAQ;IAAGC,YAAY;IAAGC,KAAK;IAAGC;EAAM,CAAC,GAAGd,KAAK;EAC5GA,KAAK,CAACnH,IAAI,CAACkI,SAAS,GAAGpI,YAAY,CAACC,gBAAgB,CAACC,IAAI,EAAEoH,iBAAiB,EAAEO,UAAU,IAAIL,UAAU,CAACK,UAAU,CAAC,EAAEL,UAAU,CAACW,IAAI,CAAC,EAAEhI,IAAI,IAAIgI,IAAI,KAAK,OAAO,IAAIX,UAAU,CAAC7C,aAAa,EAAExE,IAAI,IAAIgI,IAAI,KAAK,OAAO,IAAIX,UAAU,CAAC1C,aAAa,EAAE0C,UAAU,CAACU,KAAK,CAAC;EAAE;EACrQ,CAACJ,QAAQ,IAAIC,iBAAiB,KAAKN,kBAAkB,CAACtC,IAAI,EAAE,CAAC2C,QAAQ,IAAIC,iBAAiB,KAAKN,kBAAkB,CAAC9B,YAAY,EAAEkC,UAAU,KAAKC,QAAQ,IAAIC,iBAAiB,CAAC,IAAIN,kBAAkB,CAACI,UAAU,CAAC;EAAE;EACjNA,UAAU,KAAK,SAAS,IAAIH,eAAe,CAACzG,OAAO,EAAEyG,eAAe,CAACS,IAAI,CAAC,EAAET,eAAe,CAACQ,KAAK,CAAC;EAAE;EACpGF,QAAQ,IAAIL,kBAAkB,CAACQ,IAAI,CAAC;EAAE;EACtCd,KAAK,CAACnH,IAAI,CAACkI,SAAS,CAAC;EACrB,IAAIf,KAAK,CAAClH,IAAI,EAAE;IACZkH,KAAK,CAAClH,IAAI,CAACiI,SAAS,GAAGpI,YAAY,CAACC,gBAAgB,CAACE,IAAI,EAAEoH,iBAAiB,EAAE,CAAC,CAACF,KAAK,CAACnH,IAAI,CAACmI,QAAQ,IAAIT,UAAU,CAACK,YAAY,CAAC,EAAEL,UAAU,CAACO,IAAI,CAAC,EAAEd,KAAK,CAAClH,IAAI,CAACiI,SAAS,CAAC;EAC5K;EACA,OAAOf,KAAK;AAChB,CAAC"}
@@ -1,9 +1,9 @@
1
1
  /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
2
- import { getSlotsNext } from '@fluentui/react-utilities';
2
+ import { assertSlots } from '@fluentui/react-utilities';
3
3
  /**
4
4
  * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
5
5
  */ export const renderCompoundButton_unstable = (state)=>{
6
- const { slots , slotProps } = getSlotsNext(state);
6
+ assertSlots(state);
7
7
  const { iconOnly , iconPosition } = state;
8
- return /*#__PURE__*/ createElement(slots.root, slotProps.root, iconPosition !== 'after' && slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), !iconOnly && /*#__PURE__*/ createElement(slots.contentContainer, slotProps.contentContainer, slotProps.root.children, slots.secondaryContent && /*#__PURE__*/ createElement(slots.secondaryContent, slotProps.secondaryContent)), iconPosition === 'after' && slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon));
8
+ return /*#__PURE__*/ createElement(state.root, null, iconPosition !== 'after' && state.icon && /*#__PURE__*/ createElement(state.icon, null), !iconOnly && /*#__PURE__*/ createElement(state.contentContainer, null, state.root.children, state.secondaryContent && /*#__PURE__*/ createElement(state.secondaryContent, null)), iconPosition === 'after' && state.icon && /*#__PURE__*/ createElement(state.icon, null));
9
9
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["renderCompoundButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n const { slots, slotProps } = getSlotsNext<CompoundButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <slots.root {...slotProps.root}>\n {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n {!iconOnly && (\n <slots.contentContainer {...slotProps.contentContainer}>\n {slotProps.root.children}\n {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n </slots.contentContainer>\n )}\n {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"],"names":["createElement","getSlotsNext","renderCompoundButton_unstable","state","slots","slotProps","iconOnly","iconPosition","root","icon","contentContainer","children","secondaryContent"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAkCE;IAC/D,MAAM,EAAEG,SAAQ,EAAEC,aAAY,EAAE,GAAGJ;IAEnC,qBACE,AAfJ,cAeKC,MAAMI,IAAI,EAAKH,UAAUG,IAAI,EAC3BD,iBAAiB,WAAWH,MAAMK,IAAI,kBAAI,AAhBjD,cAgBkDL,MAAMK,IAAI,EAAKJ,UAAUI,IAAI,GACxE,CAACH,0BACA,AAlBR,cAkBSF,MAAMM,gBAAgB,EAAKL,UAAUK,gBAAgB,EACnDL,UAAUG,IAAI,CAACG,QAAQ,EACvBP,MAAMQ,gBAAgB,kBAAI,AApBrC,cAoBsCR,MAAMQ,gBAAgB,EAAKP,UAAUO,gBAAgB,IAGpFL,iBAAiB,WAAWH,MAAMK,IAAI,kBAAI,AAvBjD,cAuBkDL,MAAMK,IAAI,EAAKJ,UAAUI,IAAI;AAG/E,EAAE"}
1
+ {"version":3,"sources":["renderCompoundButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n assertSlots<CompoundButtonSlots>(state);\n const { iconOnly, iconPosition } = state;\n\n return (\n <state.root>\n {iconPosition !== 'after' && state.icon && <state.icon />}\n {!iconOnly && (\n <state.contentContainer>\n {state.root.children}\n {state.secondaryContent && <state.secondaryContent />}\n </state.contentContainer>\n )}\n\n {iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["createElement","assertSlots","renderCompoundButton_unstable","state","iconOnly","iconPosition","root","icon","contentContainer","children","secondaryContent"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC,QAA+B;IAC3EF,YAAiCE;IACjC,MAAM,EAAEC,SAAQ,EAAEC,aAAY,EAAE,GAAGF;IAEnC,qBACE,AAfJ,cAeKA,MAAMG,IAAI,QACRD,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,AAhBjD,cAgBkDJ,MAAMI,IAAI,SACrD,CAACH,0BACA,AAlBR,cAkBSD,MAAMK,gBAAgB,QACpBL,MAAMG,IAAI,CAACG,QAAQ,EACnBN,MAAMO,gBAAgB,kBAAI,AApBrC,cAoBsCP,MAAMO,gBAAgB,UAIrDL,iBAAiB,WAAWF,MAAMI,IAAI,kBAAI,AAxBjD,cAwBkDJ,MAAMI,IAAI;AAG5D,EAAE"}
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { resolveShorthand } from '@fluentui/react-utilities';
2
+ import { slot } from '@fluentui/react-utilities';
3
3
  import { useButton_unstable } from '../Button/index';
4
4
  /**
5
5
  * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
@@ -17,10 +17,12 @@ import { useButton_unstable } from '../Button/index';
17
17
  contentContainer: 'span',
18
18
  secondaryContent: 'span'
19
19
  },
20
- contentContainer: resolveShorthand(contentContainer, {
21
- required: true
20
+ contentContainer: slot.always(contentContainer, {
21
+ elementType: 'span'
22
22
  }),
23
- secondaryContent: resolveShorthand(secondaryContent)
23
+ secondaryContent: slot.optional(secondaryContent, {
24
+ elementType: 'span'
25
+ })
24
26
  };
25
27
  // Recalculate iconOnly to take into account secondaryContent.
26
28
  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));
@@ -1 +1 @@
1
- {"version":3,"sources":["useCompoundButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } 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: resolveShorthand(contentContainer, { required: true }),\n secondaryContent: resolveShorthand(secondaryContent),\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","resolveShorthand","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","required","iconOnly","Boolean","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxC,EAAEC,iBAAgB,EAAEC,iBAAgB,EAAE,GAAGC,OAA4B,EACrEC,MACwB;QAiBCC,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,iBAAiBG,kBAAkB;YAAEQ,UAAU,IAAI;QAAC;QACtEP,kBAAkBJ,iBAAiBI;IACrC;IAEA,8DAA8D;IAC9DG,MAAMK,QAAQ,GAAGC,QAAQN,CAAAA,CAAAA,cAAAA,MAAMG,IAAI,cAAVH,yBAAAA,KAAAA,IAAAA,YAAYO,QAAQ,AAAD,KAAK,CAACT,MAAMS,QAAQ,IAAI,CAACP,CAAAA,CAAAA,0BAAAA,MAAMH,gBAAgB,cAAtBG,qCAAAA,KAAAA,IAAAA,wBAAwBO,QAAQ,AAAD;IAEpG,OAAOP;AACT,EAAE"}
1
+ {"version":3,"sources":["useCompoundButton.ts"],"sourcesContent":["import * 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,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;;;CAIC,GACD,OAAO,MAAMC,6BAA6B,CACxC,EAAEC,iBAAgB,EAAEC,iBAAgB,EAAE,GAAGC,OAA4B,EACrEC,MACwB;QAiBCC,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,CAAAA,CAAAA,cAAAA,MAAMG,IAAI,cAAVH,yBAAAA,KAAAA,IAAAA,YAAYS,QAAQ,AAAD,KAAK,CAACX,MAAMW,QAAQ,IAAI,CAACT,CAAAA,CAAAA,0BAAAA,MAAMH,gBAAgB,cAAtBG,qCAAAA,KAAAA,IAAAA,wBAAwBS,QAAQ,AAAD;IAEpG,OAAOT;AACT,EAAE"}
@@ -1,9 +1,9 @@
1
1
  /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
2
- import { getSlotsNext } from '@fluentui/react-utilities';
2
+ import { assertSlots } from '@fluentui/react-utilities';
3
3
  /**
4
4
  * Renders a MenuButton component by passing the state defined props to the appropriate slots.
5
5
  */ export const renderMenuButton_unstable = (state)=>{
6
- const { slots , slotProps } = getSlotsNext(state);
6
+ assertSlots(state);
7
7
  const { icon , iconOnly } = state;
8
- return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && slots.menuIcon && /*#__PURE__*/ createElement(slots.menuIcon, slotProps.menuIcon));
8
+ return /*#__PURE__*/ createElement(state.root, null, state.icon && /*#__PURE__*/ createElement(state.icon, null), !iconOnly && state.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && state.menuIcon && /*#__PURE__*/ createElement(state.menuIcon, null));
9
9
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["renderMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n const { slots, slotProps } = getSlotsNext<MenuButtonSlots>(state);\n const { icon, iconOnly } = state;\n\n return (\n <slots.root {...slotProps.root}>\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {!iconOnly && slotProps.root.children}\n {(!iconOnly || !icon?.children) && slots.menuIcon && <slots.menuIcon {...slotProps.menuIcon} />}\n </slots.root>\n );\n};\n"],"names":["createElement","getSlotsNext","renderMenuButton_unstable","state","slots","slotProps","icon","iconOnly","root","children","menuIcon"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA8BE;IAC3D,MAAM,EAAEG,KAAI,EAAEC,SAAQ,EAAE,GAAGJ;IAE3B,qBACE,AAfJ,cAeKC,MAAMI,IAAI,EAAKH,UAAUG,IAAI,EAC3BJ,MAAME,IAAI,kBAAI,AAhBrB,cAgBsBF,MAAME,IAAI,EAAKD,UAAUC,IAAI,GAC5C,CAACC,YAAYF,UAAUG,IAAI,CAACC,QAAQ,EACpC,AAAC,CAAA,CAACF,YAAY,CAACD,CAAAA,iBAAAA,kBAAAA,KAAAA,IAAAA,KAAMG,QAAQ,AAAD,CAAA,KAAML,MAAMM,QAAQ,kBAAI,AAlB3D,cAkB4DN,MAAMM,QAAQ,EAAKL,UAAUK,QAAQ;AAGjG,EAAE"}
1
+ {"version":3,"sources":["renderMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\n/**\n * Renders a MenuButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderMenuButton_unstable = (state: MenuButtonState) => {\n assertSlots<MenuButtonSlots>(state);\n const { icon, iconOnly } = state;\n\n return (\n <state.root>\n {state.icon && <state.icon />}\n {!iconOnly && state.root.children}\n {(!iconOnly || !icon?.children) && state.menuIcon && <state.menuIcon />}\n </state.root>\n );\n};\n"],"names":["createElement","assertSlots","renderMenuButton_unstable","state","icon","iconOnly","root","children","menuIcon"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnEF,YAA6BE;IAC7B,MAAM,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGF;IAE3B,qBACE,AAfJ,cAeKA,MAAMG,IAAI,QACRH,MAAMC,IAAI,kBAAI,AAhBrB,cAgBsBD,MAAMC,IAAI,SACzB,CAACC,YAAYF,MAAMG,IAAI,CAACC,QAAQ,EAChC,AAAC,CAAA,CAACF,YAAY,CAACD,CAAAA,iBAAAA,kBAAAA,KAAAA,IAAAA,KAAMG,QAAQ,AAAD,CAAA,KAAMJ,MAAMK,QAAQ,kBAAI,AAlB3D,cAkB4DL,MAAMK,QAAQ;AAG1E,EAAE"}
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { ChevronDownRegular } from '@fluentui/react-icons';
3
- import { resolveShorthand } from '@fluentui/react-utilities';
3
+ import { slot } from '@fluentui/react-utilities';
4
4
  import { useButton_unstable } from '../Button/index';
5
5
  /**
6
6
  * Given user props, returns the final state for a MenuButton.
@@ -19,11 +19,12 @@ import { useButton_unstable } from '../Button/index';
19
19
  icon: 'span',
20
20
  menuIcon: 'span'
21
21
  },
22
- menuIcon: resolveShorthand(menuIcon, {
22
+ menuIcon: slot.optional(menuIcon, {
23
23
  defaultProps: {
24
24
  children: /*#__PURE__*/ React.createElement(ChevronDownRegular, null)
25
25
  },
26
- required: true
26
+ renderByDefault: true,
27
+ elementType: 'span'
27
28
  })
28
29
  };
29
30
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["useMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { resolveShorthand } 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 const buttonState = useButton_unstable(props, ref);\n buttonState.root['aria-expanded'] = props['aria-expanded'] ?? 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: resolveShorthand(menuIcon, {\n defaultProps: {\n children: <ChevronDownRegular />,\n },\n required: true,\n }),\n };\n};\n"],"names":["React","ChevronDownRegular","resolveShorthand","useButton_unstable","useMenuButton_unstable","menuIcon","props","ref","buttonState","root","iconOnly","Boolean","children","components","icon","defaultProps","required"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CACpC,EAAEC,SAAQ,EAAE,GAAGC,OAAwB,EACvCC,MACoB;IACpB,MAAMC,cAAcL,mBAAmBG,OAAOC;QACVD;IAApCE,YAAYC,IAAI,CAAC,gBAAgB,GAAGH,CAAAA,sBAAAA,KAAK,CAAC,gBAAgB,cAAtBA,iCAAAA,sBAA0B,KAAK;IAEnE,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,iBAAiBG,UAAU;YACnCU,cAAc;gBACZH,wBAAU,oBAACX;YACb;YACAe,UAAU,IAAI;QAChB;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["useMenuButton.tsx"],"sourcesContent":["import * 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 const buttonState = useButton_unstable(props, ref);\n buttonState.root['aria-expanded'] = props['aria-expanded'] ?? 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,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,SAAQ,EAAE,GAAGC,OAAwB,EACvCC,MACoB;IACpB,MAAMC,cAAcL,mBAAmBG,OAAOC;QACVD;IAApCE,YAAYC,IAAI,CAAC,gBAAgB,GAAGH,CAAAA,sBAAAA,KAAK,CAAC,gBAAgB,cAAtBA,iCAAAA,sBAA0B,KAAK;IAEnE,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,IAAI;YACrBC,aAAa;QACf;IACF;AACF,EAAE"}
@@ -1,8 +1,8 @@
1
1
  /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
2
- import { getSlotsNext } from '@fluentui/react-utilities';
2
+ import { assertSlots } from '@fluentui/react-utilities';
3
3
  /**
4
4
  * Renders a SplitButton component by passing the state defined props to the appropriate slots.
5
5
  */ export const renderSplitButton_unstable = (state)=>{
6
- const { slots , slotProps } = getSlotsNext(state);
7
- return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.primaryActionButton && /*#__PURE__*/ createElement(slots.primaryActionButton, slotProps.primaryActionButton), slots.menuButton && /*#__PURE__*/ createElement(slots.menuButton, slotProps.menuButton));
6
+ assertSlots(state);
7
+ return /*#__PURE__*/ createElement(state.root, null, state.primaryActionButton && /*#__PURE__*/ createElement(state.primaryActionButton, null), state.menuButton && /*#__PURE__*/ createElement(state.menuButton, null));
8
8
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["renderSplitButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState) => {\n const { slots, slotProps } = getSlotsNext<SplitButtonSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.primaryActionButton && <slots.primaryActionButton {...slotProps.primaryActionButton} />}\n {slots.menuButton && <slots.menuButton {...slotProps.menuButton} />}\n </slots.root>\n );\n};\n"],"names":["createElement","getSlotsNext","renderSplitButton_unstable","state","slots","slotProps","root","primaryActionButton","menuButton"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA+BE;IAE5D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,mBAAmB,kBAAI,AAfpC,cAeqCH,MAAMG,mBAAmB,EAAKF,UAAUE,mBAAmB,GACzFH,MAAMI,UAAU,kBAAI,AAhB3B,cAgB4BJ,MAAMI,UAAU,EAAKH,UAAUG,UAAU;AAGrE,EAAE"}
1
+ {"version":3,"sources":["renderSplitButton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\n/**\n * Renders a SplitButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderSplitButton_unstable = (state: SplitButtonState) => {\n assertSlots<SplitButtonSlots>(state);\n\n return (\n <state.root>\n {state.primaryActionButton && <state.primaryActionButton />}\n {state.menuButton && <state.menuButton />}\n </state.root>\n );\n};\n"],"names":["createElement","assertSlots","renderSplitButton_unstable","state","root","primaryActionButton","menuButton"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrEF,YAA8BE;IAE9B,qBACE,AAdJ,cAcKA,MAAMC,IAAI,QACRD,MAAME,mBAAmB,kBAAI,AAfpC,cAeqCF,MAAME,mBAAmB,SACvDF,MAAMG,UAAU,kBAAI,AAhB3B,cAgB4BH,MAAMG,UAAU;AAG5C,EAAE"}