@fluentui/react-button 9.0.0-rc.4 → 9.0.0-rc.7
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +200 -1
- package/CHANGELOG.md +50 -2
- package/dist/react-button.d.ts +38 -8
- package/lib/components/Button/Button.types.d.ts +3 -1
- package/lib/components/Button/Button.types.js.map +1 -1
- package/lib/components/Button/index.d.ts +1 -1
- package/lib/components/Button/index.js +3 -1
- package/lib/components/Button/index.js.map +1 -1
- package/lib/components/Button/useButton.js +1 -0
- package/lib/components/Button/useButton.js.map +1 -1
- package/lib/components/Button/useButtonStyles.d.ts +7 -2
- package/lib/components/Button/useButtonStyles.js +110 -59
- package/lib/components/Button/useButtonStyles.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.d.ts +1 -1
- package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/index.d.ts +1 -1
- package/lib/components/CompoundButton/index.js +3 -1
- package/lib/components/CompoundButton/index.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButton.js +7 -2
- package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +7 -2
- package/lib/components/CompoundButton/useCompoundButtonStyles.js +43 -28
- package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib/components/MenuButton/index.d.ts +1 -1
- package/lib/components/MenuButton/index.js +3 -1
- package/lib/components/MenuButton/index.js.map +1 -1
- package/lib/components/MenuButton/useMenuButtonStyles.d.ts +7 -2
- package/lib/components/MenuButton/useMenuButtonStyles.js +16 -3
- package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.types.d.ts +1 -1
- package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
- package/lib/components/SplitButton/index.d.ts +1 -1
- package/lib/components/SplitButton/index.js +3 -1
- package/lib/components/SplitButton/index.js.map +1 -1
- package/lib/components/SplitButton/useSplitButton.js +1 -0
- package/lib/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButtonStyles.d.ts +7 -2
- package/lib/components/SplitButton/useSplitButtonStyles.js +38 -27
- package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib/components/ToggleButton/index.d.ts +1 -1
- package/lib/components/ToggleButton/index.js +3 -1
- package/lib/components/ToggleButton/index.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButton.d.ts +1 -1
- package/lib/components/ToggleButton/useToggleButton.js +3 -41
- package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +9 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.js +83 -60
- package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib/index.d.ts +11 -5
- package/lib/index.js +11 -5
- package/lib/index.js.map +1 -1
- package/lib/utils/index.d.ts +1 -0
- package/lib/utils/index.js +2 -0
- package/lib/utils/index.js.map +1 -0
- package/lib/utils/useToggleState.d.ts +3 -0
- package/lib/utils/useToggleState.js +37 -0
- package/lib/utils/useToggleState.js.map +1 -0
- package/lib-commonjs/components/Button/Button.types.d.ts +3 -1
- package/lib-commonjs/components/Button/index.d.ts +1 -1
- package/lib-commonjs/components/Button/index.js +9 -1
- package/lib-commonjs/components/Button/index.js.map +1 -1
- package/lib-commonjs/components/Button/useButton.js +1 -0
- package/lib-commonjs/components/Button/useButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.d.ts +7 -2
- package/lib-commonjs/components/Button/useButtonStyles.js +112 -60
- package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.d.ts +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/index.d.ts +1 -1
- package/lib-commonjs/components/CompoundButton/index.js +9 -1
- package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js +7 -2
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +7 -2
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +44 -29
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib-commonjs/components/MenuButton/index.d.ts +1 -1
- package/lib-commonjs/components/MenuButton/index.js +9 -1
- package/lib-commonjs/components/MenuButton/index.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +7 -2
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +17 -4
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.types.d.ts +1 -1
- package/lib-commonjs/components/SplitButton/index.d.ts +1 -1
- package/lib-commonjs/components/SplitButton/index.js +9 -1
- package/lib-commonjs/components/SplitButton/index.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButton.js +1 -0
- package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +7 -2
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +39 -28
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/index.d.ts +1 -1
- package/lib-commonjs/components/ToggleButton/index.js +9 -1
- package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButton.d.ts +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButton.js +3 -42
- package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +9 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +87 -62
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib-commonjs/index.d.ts +11 -5
- package/lib-commonjs/index.js +204 -6
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/index.d.ts +1 -0
- package/lib-commonjs/utils/index.js +10 -0
- package/lib-commonjs/utils/index.js.map +1 -0
- package/lib-commonjs/utils/useToggleState.d.ts +3 -0
- package/lib-commonjs/utils/useToggleState.js +48 -0
- package/lib-commonjs/utils/useToggleState.js.map +1 -0
- package/package.json +17 -20
- package/dist/demo/index.html +0 -71
- package/dist/demo/react-dom.development.js +0 -21413
- package/dist/demo/react.development.js +0 -3155
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useCompoundButtonStyles_unstable = exports.compoundButtonClassName = void 0;
|
|
6
|
+
exports.useCompoundButtonStyles_unstable = exports.compoundButtonClassName = exports.compoundButtonClassNames = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
@@ -11,35 +11,46 @@ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
|
11
11
|
|
|
12
12
|
const useButtonStyles_1 = /*#__PURE__*/require("../Button/useButtonStyles");
|
|
13
13
|
|
|
14
|
-
exports.
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
exports.compoundButtonClassNames = {
|
|
15
|
+
root: 'fui-CompoundButton',
|
|
16
|
+
icon: 'fui-CompoundButton__icon',
|
|
17
|
+
contentContainer: 'fui-CompoundButton__contentContainer',
|
|
18
|
+
secondaryContent: 'fui-CompoundButton__secondaryContent'
|
|
17
19
|
};
|
|
20
|
+
/**
|
|
21
|
+
* @deprecated Use `compoundButtonClassName.root` instead.
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
exports.compoundButtonClassName = exports.compoundButtonClassNames.root;
|
|
18
25
|
|
|
19
26
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
20
27
|
"base": {
|
|
21
28
|
"i8kkvl": "f4akndk",
|
|
22
29
|
"Belr9w4": "fe5j3v",
|
|
23
30
|
"Bqenvij": "f11ysow2",
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
31
|
+
"J657lq": "f1um431h",
|
|
32
|
+
"Jlnjib": "fte7hqw",
|
|
33
|
+
"Bc29nj9": "f1yh8ef3"
|
|
34
|
+
},
|
|
35
|
+
"highContrast": {
|
|
36
|
+
"pu7qz5": "fi3u9nm",
|
|
37
|
+
"B10010i": "f1tdgb9w"
|
|
27
38
|
},
|
|
28
39
|
"outline": {},
|
|
29
40
|
"primary": {
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
41
|
+
"J657lq": "foe7gw6",
|
|
42
|
+
"Jlnjib": "fvxlz81",
|
|
43
|
+
"Bc29nj9": "f1c2mdy"
|
|
33
44
|
},
|
|
34
45
|
"subtle": {
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
46
|
+
"J657lq": "f1um431h",
|
|
47
|
+
"Jlnjib": "f1wn9xqz",
|
|
48
|
+
"Bc29nj9": "f1a8q4d0"
|
|
38
49
|
},
|
|
39
50
|
"transparent": {
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
51
|
+
"J657lq": "f1um431h",
|
|
52
|
+
"Jlnjib": "f1wn9xqz",
|
|
53
|
+
"Bc29nj9": "f1a8q4d0"
|
|
43
54
|
},
|
|
44
55
|
"small": {
|
|
45
56
|
"z8tnut": "fp9bwmr",
|
|
@@ -66,14 +77,19 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
66
77
|
"Bg96gwp": "faaz57k"
|
|
67
78
|
},
|
|
68
79
|
"disabled": {
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
80
|
+
"J657lq": "f1rlv8bf",
|
|
81
|
+
"Jlnjib": "fd1dbtm",
|
|
82
|
+
"Bc29nj9": "f1vqmdmi"
|
|
83
|
+
},
|
|
84
|
+
"disabledHighContrast": {
|
|
85
|
+
"B8ia98v": "f1csacz4",
|
|
86
|
+
"pu7qz5": "f1s5tkfe",
|
|
87
|
+
"B10010i": "fs0rda3"
|
|
72
88
|
}
|
|
73
89
|
}, {
|
|
74
|
-
"d": [".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f11ysow2{height:auto;}", ".
|
|
75
|
-
"h": [".
|
|
76
|
-
"
|
|
90
|
+
"d": [".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f11ysow2{height:auto;}", ".f1um431h .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2);}", ".foe7gw6 .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1fow5ox{padding-bottom:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbtff6s{padding-top:14px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fp67ikv{padding-bottom:16px;}", ".fm4bm3s{padding-top:18px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fe2my4m{padding-bottom:20px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rlv8bf .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
|
|
91
|
+
"h": [".fte7hqw:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".f1yh8ef3:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".fvxlz81:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1c2mdy:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1wn9xqz:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".f1a8q4d0:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".fd1dbtm:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}", ".f1vqmdmi:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
|
|
92
|
+
"t": ["@media (forced-colors: active){.fi3u9nm:hover .fui-CompoundButton__secondaryContent{color:Highlight;}}", "@media (forced-colors: active){.f1tdgb9w:hover:active .fui-CompoundButton__secondaryContent{color:Highlight;}}", "@media (forced-colors: active){.f1csacz4 .fui-CompoundButton__secondaryContent{color:GrayText;}}", "@media (forced-colors: active){.f1s5tkfe:hover .fui-CompoundButton__secondaryContent{color:GrayText;}}", "@media (forced-colors: active){.fs0rda3:hover:active .fui-CompoundButton__secondaryContent{color:GrayText;}}"]
|
|
77
93
|
});
|
|
78
94
|
|
|
79
95
|
const useRootIconOnlyStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -156,20 +172,19 @@ const useCompoundButtonStyles_unstable = state => {
|
|
|
156
172
|
iconOnly,
|
|
157
173
|
size
|
|
158
174
|
} = state;
|
|
159
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
160
|
-
rootStyles.base, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles
|
|
161
|
-
(disabled || disabledFocusable) && rootStyles.disabled, // Icon-only styles
|
|
175
|
+
state.root.className = react_1.mergeClasses(exports.compoundButtonClassNames.root, // Root styles
|
|
176
|
+
rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles
|
|
177
|
+
(disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles
|
|
162
178
|
iconOnly && rootIconOnlyStyles[size], // User provided class name
|
|
163
179
|
state.root.className);
|
|
180
|
+
state.contentContainer.className = react_1.mergeClasses(exports.compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
|
|
164
181
|
|
|
165
182
|
if (state.icon) {
|
|
166
|
-
state.icon.className = react_1.mergeClasses(iconStyles.base, state.icon.className);
|
|
183
|
+
state.icon.className = react_1.mergeClasses(exports.compoundButtonClassNames.icon, iconStyles.base, state.icon.className);
|
|
167
184
|
}
|
|
168
185
|
|
|
169
|
-
state.contentContainer.className = react_1.mergeClasses(contentContainerStyles.base, state.contentContainer.className);
|
|
170
|
-
|
|
171
186
|
if (state.secondaryContent) {
|
|
172
|
-
state.secondaryContent.className = react_1.mergeClasses(
|
|
187
|
+
state.secondaryContent.className = react_1.mergeClasses(exports.compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
|
|
173
188
|
}
|
|
174
189
|
|
|
175
190
|
useButtonStyles_1.useButtonStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n root: 'fui-CompoundButton',\n icon: 'fui-CompoundButton__icon',\n contentContainer: 'fui-CompoundButton__contentContainer',\n secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\n/**\n * @deprecated Use `compoundButtonClassName.root` instead.\n */\nexport const compoundButtonClassName = compoundButtonClassNames.root;\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.gap('12px'),\n\n height: 'auto',\n\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight',\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight',\n },\n },\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n },\n subtle: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n },\n transparent: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n },\n\n // Size variations\n small: {\n ...shorthands.padding('8px', '8px', '10px', '8px'),\n\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n medium: {\n ...shorthands.padding('14px', '12px', '16px', '12px'),\n\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.padding('18px', '16px', '20px', '16px'),\n\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n\n // Disabled styles\n disabled: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding('4px'),\n\n maxWidth: '48px',\n minWidth: '48px',\n },\n medium: {\n ...shorthands.padding('6px'),\n\n maxWidth: '52px',\n minWidth: '52px',\n },\n large: {\n ...shorthands.padding('8px'),\n\n maxWidth: '56px',\n minWidth: '56px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n fontSize: '40px',\n height: '40px',\n width: '40px',\n },\n});\n\nconst useContentContainerStyles = makeStyles({\n // Base styles\n base: {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'left',\n },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n // Base styles\n base: {\n lineHeight: '100%',\n fontWeight: tokens.fontWeightRegular,\n },\n\n // Size variations\n small: {\n fontSize: tokens.fontSizeBase200,\n },\n medium: {\n fontSize: tokens.fontSizeBase200,\n },\n large: {\n fontSize: tokens.fontSizeBase300,\n },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n const rootStyles = useRootStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n const contentContainerStyles = useContentContainerStyles();\n const secondaryContentStyles = useSecondaryContentStyles();\n\n const { appearance, disabled, disabledFocusable, iconOnly, size } = state;\n\n state.root.className = mergeClasses(\n compoundButtonClassNames.root,\n\n // Root styles\n rootStyles.base,\n rootStyles.highContrast,\n appearance && rootStyles[appearance],\n rootStyles[size],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootStyles.disabled,\n (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n state.contentContainer.className = mergeClasses(\n compoundButtonClassNames.contentContainer,\n contentContainerStyles.base,\n state.contentContainer.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.icon.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n compoundButtonClassNames.secondaryContent,\n secondaryContentStyles.base,\n secondaryContentStyles[size],\n state.secondaryContent.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -2,4 +2,4 @@ export * from './MenuButton.types';
|
|
|
2
2
|
export * from './MenuButton';
|
|
3
3
|
export * from './renderMenuButton';
|
|
4
4
|
export * from './useMenuButton';
|
|
5
|
-
export { menuButtonClassName, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
|
|
5
|
+
export { menuButtonClassName, menuButtonClassNames, useMenuButtonStyles_unstable, } from './useMenuButtonStyles';
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useMenuButtonStyles_unstable = exports.menuButtonClassName = void 0;
|
|
6
|
+
exports.useMenuButtonStyles_unstable = exports.menuButtonClassNames = exports.menuButtonClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
9
9
|
|
|
@@ -16,6 +16,8 @@ tslib_1.__exportStar(require("./renderMenuButton"), exports);
|
|
|
16
16
|
tslib_1.__exportStar(require("./useMenuButton"), exports);
|
|
17
17
|
|
|
18
18
|
var useMenuButtonStyles_1 = /*#__PURE__*/require("./useMenuButtonStyles");
|
|
19
|
+
/* eslint-disable-next-line deprecation/deprecation */
|
|
20
|
+
|
|
19
21
|
|
|
20
22
|
Object.defineProperty(exports, "menuButtonClassName", {
|
|
21
23
|
enumerable: true,
|
|
@@ -23,6 +25,12 @@ Object.defineProperty(exports, "menuButtonClassName", {
|
|
|
23
25
|
return useMenuButtonStyles_1.menuButtonClassName;
|
|
24
26
|
}
|
|
25
27
|
});
|
|
28
|
+
Object.defineProperty(exports, "menuButtonClassNames", {
|
|
29
|
+
enumerable: true,
|
|
30
|
+
get: function () {
|
|
31
|
+
return useMenuButtonStyles_1.menuButtonClassNames;
|
|
32
|
+
}
|
|
33
|
+
});
|
|
26
34
|
Object.defineProperty(exports, "useMenuButtonStyles_unstable", {
|
|
27
35
|
enumerable: true,
|
|
28
36
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/MenuButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA
|
|
1
|
+
{"version":3,"sources":["components/MenuButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AACE;;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,qBAAA,CAAA,mBAAA;AAAmB;AAAnB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,qBAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,qBAAA,CAAA,4BAAA;AAA4B;AAA5B,CAAA","sourcesContent":["export * from './MenuButton.types';\nexport * from './MenuButton';\nexport * from './renderMenuButton';\nexport * from './useMenuButton';\nexport {\n /* eslint-disable-next-line deprecation/deprecation */\n menuButtonClassName,\n menuButtonClassNames,\n useMenuButtonStyles_unstable,\n} from './useMenuButtonStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
+
import type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';
|
|
3
|
+
export declare const menuButtonClassNames: SlotClassNames<MenuButtonSlots>;
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `menuButtonClassName.root` instead.
|
|
6
|
+
*/
|
|
7
|
+
export declare const menuButtonClassName: string;
|
|
3
8
|
export declare const useMenuButtonStyles_unstable: (state: MenuButtonState) => MenuButtonState;
|
|
@@ -3,13 +3,22 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useMenuButtonStyles_unstable = exports.menuButtonClassName = void 0;
|
|
6
|
+
exports.useMenuButtonStyles_unstable = exports.menuButtonClassName = exports.menuButtonClassNames = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
const useButtonStyles_1 = /*#__PURE__*/require("../Button/useButtonStyles");
|
|
11
11
|
|
|
12
|
-
exports.
|
|
12
|
+
exports.menuButtonClassNames = {
|
|
13
|
+
root: 'fui-MenuButton',
|
|
14
|
+
icon: 'fui-MenuButton__icon',
|
|
15
|
+
menuIcon: 'fui-MenuButton__menuIcon'
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* @deprecated Use `menuButtonClassName.root` instead.
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
exports.menuButtonClassName = exports.menuButtonClassNames.root;
|
|
13
22
|
|
|
14
23
|
const useMenuIconStyles = /*#__PURE__*/react_1.__styles({
|
|
15
24
|
"small": {
|
|
@@ -33,10 +42,14 @@ const useMenuIconStyles = /*#__PURE__*/react_1.__styles({
|
|
|
33
42
|
|
|
34
43
|
const useMenuButtonStyles_unstable = state => {
|
|
35
44
|
const menuIconStyles = useMenuIconStyles();
|
|
36
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
45
|
+
state.root.className = react_1.mergeClasses(exports.menuButtonClassNames.root, state.root.className);
|
|
46
|
+
|
|
47
|
+
if (state.icon) {
|
|
48
|
+
state.icon.className = react_1.mergeClasses(exports.menuButtonClassNames.icon, state.icon.className);
|
|
49
|
+
}
|
|
37
50
|
|
|
38
51
|
if (state.menuIcon) {
|
|
39
|
-
state.menuIcon.className = react_1.mergeClasses(menuIconStyles[state.size], state.menuIcon.className);
|
|
52
|
+
state.menuIcon.className = react_1.mergeClasses(exports.menuButtonClassNames.menuIcon, menuIconStyles[state.size], state.menuIcon.className);
|
|
40
53
|
}
|
|
41
54
|
|
|
42
55
|
useButtonStyles_1.useButtonStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAIa,OAAA,CAAA,oBAAA,GAAwD;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,IAAI,EAAE,sBAF6D;AAGnE,EAAA,QAAQ,EAAE;AAHyD,CAAxD;AAMb;;AAEG;;AACU,OAAA,CAAA,mBAAA,GAAsB,OAAA,CAAA,oBAAA,CAAqB,IAA3C;;AAEb,MAAM,iBAAiB,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAmBO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,IAAlC,EAAwC,KAAK,CAAC,IAAN,CAAW,SAAnD,CAAvB;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,IAAlC,EAAwC,KAAK,CAAC,IAAN,CAAW,SAAnD,CAAvB;AACD;;AAED,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CACzB,OAAA,CAAA,oBAAA,CAAqB,QADI,EAEzB,cAAc,CAAC,KAAK,CAAC,IAAP,CAFW,EAGzB,KAAK,CAAC,QAAN,CAAe,SAHU,CAA3B;AAKD;;AAED,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,KAAP;AACD,CApBM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { ButtonState } from '../Button/Button.types';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n root: 'fui-MenuButton',\n icon: 'fui-MenuButton__icon',\n menuIcon: 'fui-MenuButton__menuIcon',\n};\n\n/**\n * @deprecated Use `menuButtonClassName.root` instead.\n */\nexport const menuButtonClassName = menuButtonClassNames.root;\n\nconst useMenuIconStyles = makeStyles({\n // Size appearance\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n const menuIconStyles = useMenuIconStyles();\n\n state.root.className = mergeClasses(menuButtonClassNames.root, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuButtonClassNames.icon, state.icon.className);\n }\n\n if (state.menuIcon) {\n state.menuIcon.className = mergeClasses(\n menuButtonClassNames.menuIcon,\n menuIconStyles[state.size],\n state.menuIcon.className,\n );\n }\n\n useButtonStyles_unstable(state as ButtonState);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -7,7 +7,7 @@ export declare type SplitButtonSlots = {
|
|
|
7
7
|
/**
|
|
8
8
|
* Root of the component that wraps the primary action button and menu button.
|
|
9
9
|
*/
|
|
10
|
-
root: Slot<'div'
|
|
10
|
+
root: NonNullable<Slot<'div'>>;
|
|
11
11
|
/**
|
|
12
12
|
* Button that opens menu with secondary actions in SplitButton.
|
|
13
13
|
*/
|
|
@@ -2,4 +2,4 @@ export * from './SplitButton';
|
|
|
2
2
|
export * from './SplitButton.types';
|
|
3
3
|
export * from './renderSplitButton';
|
|
4
4
|
export * from './useSplitButton';
|
|
5
|
-
export { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
|
|
5
|
+
export { splitButtonClassName, splitButtonClassNames, useSplitButtonStyles_unstable, } from './useSplitButtonStyles';
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useSplitButtonStyles_unstable = exports.splitButtonClassName = void 0;
|
|
6
|
+
exports.useSplitButtonStyles_unstable = exports.splitButtonClassNames = exports.splitButtonClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
9
9
|
|
|
@@ -16,6 +16,8 @@ tslib_1.__exportStar(require("./renderSplitButton"), exports);
|
|
|
16
16
|
tslib_1.__exportStar(require("./useSplitButton"), exports);
|
|
17
17
|
|
|
18
18
|
var useSplitButtonStyles_1 = /*#__PURE__*/require("./useSplitButtonStyles");
|
|
19
|
+
/* eslint-disable-next-line deprecation/deprecation */
|
|
20
|
+
|
|
19
21
|
|
|
20
22
|
Object.defineProperty(exports, "splitButtonClassName", {
|
|
21
23
|
enumerable: true,
|
|
@@ -23,6 +25,12 @@ Object.defineProperty(exports, "splitButtonClassName", {
|
|
|
23
25
|
return useSplitButtonStyles_1.splitButtonClassName;
|
|
24
26
|
}
|
|
25
27
|
});
|
|
28
|
+
Object.defineProperty(exports, "splitButtonClassNames", {
|
|
29
|
+
enumerable: true,
|
|
30
|
+
get: function () {
|
|
31
|
+
return useSplitButtonStyles_1.splitButtonClassNames;
|
|
32
|
+
}
|
|
33
|
+
});
|
|
26
34
|
Object.defineProperty(exports, "useSplitButtonStyles_unstable", {
|
|
27
35
|
enumerable: true,
|
|
28
36
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/SplitButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA
|
|
1
|
+
{"version":3,"sources":["components/SplitButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AACE;;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,sBAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,sBAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,sBAAA,CAAA,6BAAA;AAA6B;AAA7B,CAAA","sourcesContent":["export * from './SplitButton';\nexport * from './SplitButton.types';\nexport * from './renderSplitButton';\nexport * from './useSplitButton';\nexport {\n /* eslint-disable-next-line deprecation/deprecation */\n splitButtonClassName,\n splitButtonClassNames,\n useSplitButtonStyles_unstable,\n} from './useSplitButtonStyles';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,QAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,KAAK,GAAG,
|
|
1
|
+
{"version":3,"sources":["components/SplitButton/useSplitButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,QAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ;AACA,IAAA,KAAK,GAAG,KAHJ;AAIJ,IAAA,QAJI;AAKJ,IAAA,QAAQ,GAAG,KALP;AAMJ,IAAA,iBAAiB,GAAG,KANhB;AAOJ,IAAA,IAPI;AAQJ,IAAA,YAAY,GAAG,QARX;AASJ,IAAA,UATI;AAUJ,IAAA,QAVI;AAWJ,IAAA,mBAXI;AAYJ,IAAA,KAAK,GAAG,SAZJ;AAaJ,IAAA,IAAI,GAAG;AAbH,MAcF,KAdJ;AAgBA,QAAM,MAAM,GAAG,iBAAA,CAAA,KAAA,CAAM,cAAN,CAAf;AAEA,QAAM,mBAAmB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAjB,EAA6B;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,KALY;AAMZ,MAAA;AANY,KADyC;AASvD,IAAA,QAAQ,EAAE;AAT6C,GAA7B,CAA5B;AAYA,QAAM,4BAA4B,GAAG,iBAAA,CAAA,gBAAA,CAAiB,mBAAjB,EAAsC;AACzE,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,KAFY;AAGZ,MAAA,QAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,iBALY;AAMZ,MAAA,IANY;AAOZ,MAAA,YAPY;AAQZ,MAAA,EAAE,EAAE,MAAM,GAAG,uBARD;AASZ,MAAA,KATY;AAUZ,MAAA;AAVY,KAD2D;AAazE,IAAA,QAAQ,EAAE;AAb+D,GAAtC,CAArC,CA/BoB,CA+CpB;AACA;;AACA,MACE,mBAAmB,IACnB,4BADA,IAEA,CAAC,mBAAmB,CAAC,YAAD,CAFpB,IAGA,CAAC,mBAAmB,CAAC,iBAAD,CAJtB,EAKE;AACA,IAAA,mBAAmB,CAAC,iBAAD,CAAnB,GAAyC,4BAA4B,CAAC,EAAtE;AACD;;AAED,SAAO;AACL;AACA,IAAA,UAFK;AAGL,IAAA,KAHK;AAIL,IAAA,QAJK;AAKL,IAAA,iBALK;AAML,IAAA,YANK;AAOL,IAAA,KAPK;AAQL,IAAA,IARK;AAUL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,UAAU,EAAE,YAAA,CAAA,UAFF;AAGV,MAAA,mBAAmB,EAAE,QAAA,CAAA;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAA7B,CAjBD;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CAlFM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } 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,\n // eslint-disable-next-line deprecation/deprecation\n block = false,\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\n const baseId = useId('splitButton-');\n\n const menuButtonShorthand = resolveShorthand(menuButton, {\n defaultProps: {\n appearance,\n disabled,\n disabledFocusable,\n menuIcon,\n shape,\n size,\n },\n required: true,\n });\n\n const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {\n defaultProps: {\n appearance,\n block,\n children,\n disabled,\n disabledFocusable,\n icon,\n iconPosition,\n id: baseId + '__primaryActionButton',\n shape,\n size,\n },\n required: true,\n });\n\n // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided\n // by the 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 block,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // Slots definition\n components: {\n root: 'div',\n menuButton: MenuButton,\n primaryActionButton: Button,\n },\n\n root: getNativeElementProps('div', { ref, ...props }),\n menuButton: menuButtonShorthand,\n primaryActionButton: primaryActionButtonShorthand,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
+
import type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';
|
|
3
|
+
export declare const splitButtonClassNames: SlotClassNames<SplitButtonSlots>;
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `splitButtonClassName.root` instead.
|
|
6
|
+
*/
|
|
7
|
+
export declare const splitButtonClassName: string;
|
|
3
8
|
export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useSplitButtonStyles_unstable = exports.splitButtonClassName = void 0;
|
|
6
|
+
exports.useSplitButtonStyles_unstable = exports.splitButtonClassName = exports.splitButtonClassNames = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
@@ -11,11 +11,16 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
|
11
11
|
|
|
12
12
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
13
13
|
|
|
14
|
-
exports.
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
exports.splitButtonClassNames = {
|
|
15
|
+
root: 'fui-SplitButton',
|
|
16
|
+
menuButton: 'fui-SplitButton__menuButton',
|
|
17
|
+
primaryActionButton: 'fui-SplitButton__primaryActionButton'
|
|
18
18
|
};
|
|
19
|
+
/**
|
|
20
|
+
* @deprecated Use `splitButtonClassName.root` instead.
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
exports.splitButtonClassName = exports.splitButtonClassNames.root;
|
|
19
24
|
|
|
20
25
|
const useFocusStyles = /*#__PURE__*/react_1.__styles({
|
|
21
26
|
"primaryActionButton": {
|
|
@@ -40,43 +45,48 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
40
45
|
"Brf1p80": "fsxf2b5",
|
|
41
46
|
"qhf8xq": "f10pi13n",
|
|
42
47
|
"ha4doy": "fmrv4ls",
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
+
"kn2xc0": ["f14uur2j", "fc1btbj"],
|
|
49
|
+
"Bs76p8a": ["fye5tvs", "fc597qq"],
|
|
50
|
+
"cuxpm9": ["f1e8brtx", "fr36rk3"],
|
|
51
|
+
"Biffepf": ["fxp12j1", "f1m6nt2y"],
|
|
52
|
+
"Defnvf": ["fr7y8no", "f1dn0c6m"]
|
|
48
53
|
},
|
|
49
54
|
"block": {
|
|
50
55
|
"a9b677": "fly5x3f"
|
|
51
56
|
},
|
|
52
57
|
"outline": {},
|
|
53
58
|
"primary": {
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
59
|
+
"B1l9wao": ["f12j1tfo", "f1ufkr8r"],
|
|
60
|
+
"lcnrd8": ["f17lyyco", "f151o42i"],
|
|
61
|
+
"Brbpp8k": ["f1nb07eg", "fg8a8qi"]
|
|
57
62
|
},
|
|
58
63
|
"subtle": {
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
64
|
+
"B1l9wao": ["f1ysqkm5", "f10nbrj"],
|
|
65
|
+
"lcnrd8": ["fn44ryq", "fwhhltr"],
|
|
66
|
+
"Brbpp8k": ["fg8lp5p", "f1p6hj0a"]
|
|
62
67
|
},
|
|
63
68
|
"transparent": {
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
69
|
+
"B1l9wao": ["f1ysqkm5", "f10nbrj"],
|
|
70
|
+
"lcnrd8": ["fn44ryq", "fwhhltr"],
|
|
71
|
+
"Brbpp8k": ["fg8lp5p", "f1p6hj0a"]
|
|
67
72
|
},
|
|
68
73
|
"circular": {},
|
|
69
74
|
"rounded": {},
|
|
70
75
|
"square": {},
|
|
71
76
|
"disabled": {
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
77
|
+
"B1l9wao": ["f10xrnr8", "f15nylwb"],
|
|
78
|
+
"lcnrd8": ["f11fwhjz", "f18vtcsx"],
|
|
79
|
+
"Brbpp8k": ["f31btwb", "fzgm9gq"]
|
|
80
|
+
},
|
|
81
|
+
"disabledHighContrast": {
|
|
82
|
+
"Bcsxniv": ["fj2q5vi", "f13tct40"],
|
|
83
|
+
"tl7e51": ["fb2mzc7", "f179dhpp"],
|
|
84
|
+
"mba178": ["f1ma39qa", "f1nzpdru"]
|
|
75
85
|
}
|
|
76
86
|
}, {
|
|
77
|
-
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".
|
|
78
|
-
"h": [".
|
|
79
|
-
"
|
|
87
|
+
"d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f14uur2j .fui-SplitButton__primaryActionButton{border-top-right-radius:0;}", ".fc1btbj .fui-SplitButton__primaryActionButton{border-top-left-radius:0;}", ".fye5tvs .fui-SplitButton__primaryActionButton{border-bottom-right-radius:0;}", ".fc597qq .fui-SplitButton__primaryActionButton{border-bottom-left-radius:0;}", ".f1e8brtx .fui-SplitButton__menuButton{border-left-width:0;}", ".fr36rk3 .fui-SplitButton__menuButton{border-right-width:0;}", ".fxp12j1 .fui-SplitButton__menuButton{border-top-left-radius:0;}", ".f1m6nt2y .fui-SplitButton__menuButton{border-top-right-radius:0;}", ".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}", ".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".f12j1tfo .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1ufkr8r .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1ysqkm5 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f10nbrj .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f10xrnr8 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f15nylwb .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
|
|
88
|
+
"h": [".f17lyyco:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f151o42i:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".f1nb07eg:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fg8a8qi:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fn44ryq:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fwhhltr:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".fg8lp5p:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1p6hj0a:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f11fwhjz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18vtcsx:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f31btwb:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fzgm9gq:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
|
|
89
|
+
"t": ["@media (forced-colors: active){.fj2q5vi .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f13tct40 .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", "@media (forced-colors: active){.fb2mzc7:hover .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f179dhpp:hover .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1ma39qa:hover:active .fui-SplitButton__primaryActionButton{border-right-color:GrayText;}.f1nzpdru:hover:active .fui-SplitButton__primaryActionButton{border-left-color:GrayText;}}"]
|
|
80
90
|
});
|
|
81
91
|
|
|
82
92
|
const useSplitButtonStyles_unstable = state => {
|
|
@@ -84,18 +94,19 @@ const useSplitButtonStyles_unstable = state => {
|
|
|
84
94
|
const focusStyles = useFocusStyles();
|
|
85
95
|
const {
|
|
86
96
|
appearance,
|
|
97
|
+
// eslint-disable-next-line deprecation/deprecation
|
|
87
98
|
block,
|
|
88
99
|
disabled,
|
|
89
100
|
disabledFocusable
|
|
90
101
|
} = state;
|
|
91
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
102
|
+
state.root.className = react_1.mergeClasses(exports.splitButtonClassNames.root, rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
|
|
92
103
|
|
|
93
104
|
if (state.menuButton) {
|
|
94
|
-
state.menuButton.className = react_1.mergeClasses(
|
|
105
|
+
state.menuButton.className = react_1.mergeClasses(exports.splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
|
|
95
106
|
}
|
|
96
107
|
|
|
97
108
|
if (state.primaryActionButton) {
|
|
98
|
-
state.primaryActionButton.className = react_1.mergeClasses(
|
|
109
|
+
state.primaryActionButton.className = react_1.mergeClasses(exports.splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
|
|
99
110
|
}
|
|
100
111
|
|
|
101
112
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,GAA0D;AACrE,EAAA,IAAI,EAAE,iBAD+D;AAErE,EAAA,UAAU,EAAE,6BAFyD;AAGrE,EAAA,mBAAmB,EAAE;AAHgD,CAA1D;AAMb;;AAEG;;AACU,OAAA,CAAA,oBAAA,GAAuB,OAAA,CAAA,qBAAA,CAAsB,IAA7C;;AAEb,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AA+HO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AACJ,IAAA,UADI;AAEJ;AACA,IAAA,KAHI;AAIJ,IAAA,QAJI;AAKJ,IAAA;AALI,MAMF,KANJ;AAQA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,qBAAA,CAAsB,IADD,EAErB,UAAU,CAAC,IAFU,EAGrB,KAAK,IAAI,UAAU,CAAC,KAHC,EAIrB,UAAU,IAAI,UAAU,CAAC,UAAD,CAJH,EAKrB,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALzB,EAMrB,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,oBANzB,EAOrB,KAAK,CAAC,IAAN,CAAW,SAPU,CAAvB;;AAUA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,OAAA,CAAA,YAAA,CAC3B,OAAA,CAAA,qBAAA,CAAsB,UADK,EAE3B,WAAW,CAAC,UAFe,EAG3B,KAAK,CAAC,UAAN,CAAiB,SAHU,CAA7B;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,OAAA,CAAA,YAAA,CACpC,OAAA,CAAA,qBAAA,CAAsB,mBADc,EAEpC,WAAW,CAAC,mBAFwB,EAGpC,KAAK,CAAC,mBAAN,CAA0B,SAHU,CAAtC;AAKD;;AAED,SAAO,KAAP;AACD,CAvCM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n/**\n * @deprecated Use `splitButtonClassName.root` instead.\n */\nexport const splitButtonClassName = splitButtonClassNames.root;\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n },\n },\n\n // Block styles\n block: {\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralForegroundInverted,\n },\n },\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStroke1Hover,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const {\n appearance,\n // eslint-disable-next-line deprecation/deprecation\n block,\n disabled,\n disabledFocusable,\n } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n (disabled || disabledFocusable) && rootStyles.disabled,\n (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -2,4 +2,4 @@ export * from './ToggleButton';
|
|
|
2
2
|
export * from './ToggleButton.types';
|
|
3
3
|
export * from './renderToggleButton';
|
|
4
4
|
export * from './useToggleButton';
|
|
5
|
-
export { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
|
|
5
|
+
export { toggleButtonClassName, toggleButtonClassNames, useToggleButtonStyles_unstable, } from './useToggleButtonStyles';
|