@fluentui/react-button 0.0.0-nightlyf3ce1fbe1d20211110.1 → 0.0.0-nightlyfc5cfdc52420220215.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +331 -26
- package/CHANGELOG.md +79 -14
- package/dist/react-button.d.ts +31 -33
- package/lib/components/Button/Button.js +6 -6
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Button/Button.types.d.ts +5 -5
- package/lib/components/Button/index.d.ts +2 -2
- package/lib/components/Button/index.js +1 -2
- package/lib/components/Button/index.js.map +1 -1
- package/lib/components/Button/renderButton.d.ts +1 -1
- package/lib/components/Button/renderButton.js +6 -3
- package/lib/components/Button/renderButton.js.map +1 -1
- package/lib/components/Button/useButton.d.ts +1 -1
- package/lib/components/Button/useButton.js +3 -2
- package/lib/components/Button/useButton.js.map +1 -1
- package/lib/components/Button/useButtonStyles.d.ts +1 -9
- package/lib/components/Button/useButtonStyles.js +97 -72
- package/lib/components/Button/useButtonStyles.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.js +6 -6
- package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.types.d.ts +4 -4
- package/lib/components/CompoundButton/index.d.ts +1 -1
- package/lib/components/CompoundButton/index.js +1 -1
- package/lib/components/CompoundButton/index.js.map +1 -1
- package/lib/components/CompoundButton/renderCompoundButton.d.ts +1 -1
- package/lib/components/CompoundButton/renderCompoundButton.js +8 -3
- package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButton.d.ts +1 -1
- package/lib/components/CompoundButton/useCompoundButton.js +3 -3
- package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +1 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.js +14 -13
- package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.js +6 -6
- package/lib/components/MenuButton/MenuButton.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.types.d.ts +3 -4
- package/lib/components/MenuButton/index.d.ts +1 -1
- package/lib/components/MenuButton/index.js +1 -1
- package/lib/components/MenuButton/index.js.map +1 -1
- package/lib/components/MenuButton/renderMenuButton.d.ts +1 -1
- package/lib/components/MenuButton/renderMenuButton.js +6 -3
- package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButton.d.ts +1 -1
- package/lib/components/MenuButton/useMenuButton.js +5 -5
- package/lib/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButtonStyles.d.ts +1 -1
- package/lib/components/MenuButton/useMenuButtonStyles.js +4 -4
- package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.js +6 -6
- package/lib/components/SplitButton/SplitButton.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.types.d.ts +6 -4
- package/lib/components/SplitButton/index.d.ts +1 -1
- package/lib/components/SplitButton/index.js +1 -1
- package/lib/components/SplitButton/index.js.map +1 -1
- package/lib/components/SplitButton/renderSplitButton.d.ts +1 -1
- package/lib/components/SplitButton/renderSplitButton.js +6 -3
- package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButton.d.ts +1 -1
- package/lib/components/SplitButton/useSplitButton.js +13 -3
- package/lib/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButtonStyles.d.ts +1 -1
- package/lib/components/SplitButton/useSplitButtonStyles.js +3 -2
- package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.js +6 -6
- package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.types.d.ts +2 -1
- package/lib/components/ToggleButton/index.d.ts +1 -1
- package/lib/components/ToggleButton/index.js +1 -1
- package/lib/components/ToggleButton/index.js.map +1 -1
- package/lib/components/ToggleButton/renderToggleButton.d.ts +1 -1
- package/lib/components/ToggleButton/renderToggleButton.js +1 -1
- package/lib/components/ToggleButton/renderToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButton.d.ts +1 -1
- package/lib/components/ToggleButton/useToggleButton.js +8 -4
- package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.js +35 -34
- package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib-commonjs/components/Button/Button.js +3 -3
- package/lib-commonjs/components/Button/Button.js.map +1 -1
- package/lib-commonjs/components/Button/Button.types.d.ts +5 -5
- package/lib-commonjs/components/Button/index.d.ts +2 -2
- package/lib-commonjs/components/Button/index.js +3 -5
- package/lib-commonjs/components/Button/index.js.map +1 -1
- package/lib-commonjs/components/Button/renderButton.d.ts +1 -1
- package/lib-commonjs/components/Button/renderButton.js +8 -5
- package/lib-commonjs/components/Button/renderButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButton.d.ts +1 -1
- package/lib-commonjs/components/Button/useButton.js +5 -4
- package/lib-commonjs/components/Button/useButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.d.ts +1 -9
- package/lib-commonjs/components/Button/useButtonStyles.js +106 -80
- package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.js +3 -3
- package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.types.d.ts +4 -4
- package/lib-commonjs/components/CompoundButton/index.d.ts +1 -1
- package/lib-commonjs/components/CompoundButton/index.js +3 -3
- package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.d.ts +1 -1
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.js +10 -5
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButton.d.ts +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js +4 -4
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +25 -23
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.js +3 -3
- package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.types.d.ts +3 -4
- package/lib-commonjs/components/MenuButton/index.d.ts +1 -1
- package/lib-commonjs/components/MenuButton/index.js +3 -3
- package/lib-commonjs/components/MenuButton/index.js.map +1 -1
- package/lib-commonjs/components/MenuButton/renderMenuButton.d.ts +1 -1
- package/lib-commonjs/components/MenuButton/renderMenuButton.js +8 -5
- package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButton.d.ts +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButton.js +5 -5
- package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +8 -8
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.js +3 -3
- package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.types.d.ts +6 -4
- package/lib-commonjs/components/SplitButton/index.d.ts +1 -1
- package/lib-commonjs/components/SplitButton/index.js +3 -3
- package/lib-commonjs/components/SplitButton/index.js.map +1 -1
- package/lib-commonjs/components/SplitButton/renderSplitButton.d.ts +1 -1
- package/lib-commonjs/components/SplitButton/renderSplitButton.js +8 -5
- package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButton.d.ts +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButton.js +14 -4
- package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +11 -9
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.js +3 -3
- package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.types.d.ts +2 -1
- package/lib-commonjs/components/ToggleButton/index.d.ts +1 -1
- package/lib-commonjs/components/ToggleButton/index.js +3 -3
- package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/renderToggleButton.d.ts +1 -1
- package/lib-commonjs/components/ToggleButton/renderToggleButton.js +3 -3
- package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButton.d.ts +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButton.js +9 -5
- package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +40 -38
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/package.json +12 -15
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -13
- package/lib/common/isConformant.js.map +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -24
- package/lib-commonjs/common/isConformant.js.map +0 -1
@@ -1,5 +1,6 @@
|
|
1
|
-
import { mergeClasses, __styles } from '@
|
2
|
-
import {
|
1
|
+
import { shorthands, mergeClasses, __styles } from '@griffel/react';
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
3
|
+
import { useButtonStyles_unstable } from '../Button/useButtonStyles';
|
3
4
|
export const compoundButtonClassName = 'fui-CompoundButton';
|
4
5
|
const CompoundButtonClassNames = {
|
5
6
|
secondaryContent: `${compoundButtonClassName}-secondaryContent`
|
@@ -7,7 +8,8 @@ const CompoundButtonClassNames = {
|
|
7
8
|
|
8
9
|
const useRootStyles = /*#__PURE__*/__styles({
|
9
10
|
"base": {
|
10
|
-
"
|
11
|
+
"i8kkvl": "f4akndk",
|
12
|
+
"Belr9w4": "fe5j3v",
|
11
13
|
"Bqenvij": "f11ysow2",
|
12
14
|
"Bma4kx5": "f900oq5",
|
13
15
|
"l15nfm": "f8rpug0",
|
@@ -32,23 +34,23 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
32
34
|
"small": {
|
33
35
|
"z8tnut": "fp9bwmr",
|
34
36
|
"z189sj": ["f19lj068", "f177v4lu"],
|
35
|
-
"Byoj8tv": "
|
37
|
+
"Byoj8tv": "f1fow5ox",
|
36
38
|
"uwmqm3": ["f177v4lu", "f19lj068"],
|
37
39
|
"Be2twd7": "fkhj508",
|
38
40
|
"Bg96gwp": "f1i3iumi"
|
39
41
|
},
|
40
42
|
"medium": {
|
41
|
-
"z8tnut": "
|
43
|
+
"z8tnut": "fbtff6s",
|
42
44
|
"z189sj": ["f11qrl6u", "fjlbh76"],
|
43
|
-
"Byoj8tv": "
|
45
|
+
"Byoj8tv": "fp67ikv",
|
44
46
|
"uwmqm3": ["fjlbh76", "f11qrl6u"],
|
45
47
|
"Be2twd7": "fkhj508",
|
46
48
|
"Bg96gwp": "f1i3iumi"
|
47
49
|
},
|
48
50
|
"large": {
|
49
|
-
"z8tnut": "
|
51
|
+
"z8tnut": "fm4bm3s",
|
50
52
|
"z189sj": ["f1gbmcue", "f1rh9g5y"],
|
51
|
-
"Byoj8tv": "
|
53
|
+
"Byoj8tv": "fe2my4m",
|
52
54
|
"uwmqm3": ["f1rh9g5y", "f1gbmcue"],
|
53
55
|
"Be2twd7": "fod5ikn",
|
54
56
|
"Bg96gwp": "faaz57k"
|
@@ -59,7 +61,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
59
61
|
"n4n7rj": "f1xrf5v0"
|
60
62
|
}
|
61
63
|
}, {
|
62
|
-
"d": [".
|
64
|
+
"d": [".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f11ysow2{height:auto;}", ".f900oq5 .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2);}", ".f1ur7rb7 .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);}", ".fj9njph .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
|
63
65
|
"h": [".f8rpug0:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".f1itoici:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1l9nom2:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".fr13fpv:hover .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
|
64
66
|
"a": [".fre7xro:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".f1uen3ov:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fvjq8kx:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".f1xrf5v0:active .fui-CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"]
|
65
67
|
});
|
@@ -116,7 +118,6 @@ const useContentContainerStyles = /*#__PURE__*/__styles({
|
|
116
118
|
const useSecondaryContentStyles = /*#__PURE__*/__styles({
|
117
119
|
"base": {
|
118
120
|
"Bg96gwp": "flkuc6h",
|
119
|
-
"B6of3ja": "fvjh0tl",
|
120
121
|
"Bhrd7zp": "figsok6"
|
121
122
|
},
|
122
123
|
"small": {
|
@@ -129,10 +130,10 @@ const useSecondaryContentStyles = /*#__PURE__*/__styles({
|
|
129
130
|
"Be2twd7": "fkhj508"
|
130
131
|
}
|
131
132
|
}, {
|
132
|
-
"d": [".flkuc6h{line-height:100%;}", ".
|
133
|
+
"d": [".flkuc6h{line-height:100%;}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}"]
|
133
134
|
});
|
134
135
|
|
135
|
-
export const
|
136
|
+
export const useCompoundButtonStyles_unstable = state => {
|
136
137
|
const rootStyles = useRootStyles();
|
137
138
|
const rootIconOnlyStyles = useRootIconOnlyStyles();
|
138
139
|
const iconStyles = useIconStyles();
|
@@ -161,7 +162,7 @@ export const useCompoundButtonStyles = state => {
|
|
161
162
|
state.secondaryContent.className = mergeClasses(CompoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
|
162
163
|
}
|
163
164
|
|
164
|
-
|
165
|
+
useButtonStyles_unstable(state);
|
165
166
|
return state;
|
166
167
|
};
|
167
168
|
//# sourceMappingURL=useCompoundButtonStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
@@ -1,15 +1,15 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import {
|
2
|
+
import { renderMenuButton_unstable } from './renderMenuButton';
|
3
|
+
import { useMenuButton_unstable } from './useMenuButton';
|
4
|
+
import { useMenuButtonStyles_unstable } from './useMenuButtonStyles';
|
5
5
|
/**
|
6
6
|
* MenuButtons are buttons that handle opening and closing a menu when they are triggered.
|
7
7
|
*/
|
8
8
|
|
9
9
|
export const MenuButton = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
|
-
const state =
|
11
|
-
|
12
|
-
return
|
10
|
+
const state = useMenuButton_unstable(props, ref);
|
11
|
+
useMenuButtonStyles_unstable(state);
|
12
|
+
return renderMenuButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
|
13
13
|
});
|
14
14
|
MenuButton.displayName = 'MenuButton';
|
15
15
|
//# sourceMappingURL=MenuButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;AAEA,EAAA,4BAA4B,CAAC,KAAD,CAA5B;AAEA,SAAO,yBAAyB,CAAC,KAAD,CAAhC,CAL8F,CAM9F;AACD,CAP+D,CAAzD;AASP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}
|
@@ -1,11 +1,10 @@
|
|
1
|
-
import type {
|
2
|
-
import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
1
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
3
2
|
import type { ButtonCommons, ButtonSlots, ButtonState } from '../Button/Button.types';
|
4
3
|
export declare type MenuButtonSlots = ButtonSlots & {
|
5
4
|
/**
|
6
5
|
* Menu icon that indicates that this button has a menu that can be expanded.
|
7
6
|
*/
|
8
|
-
menuIcon?:
|
7
|
+
menuIcon?: Slot<'span'>;
|
9
8
|
};
|
10
|
-
export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'
|
9
|
+
export declare type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>>;
|
11
10
|
export declare type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;
|
@@ -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,
|
5
|
+
export { menuButtonClassName, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
|
@@ -2,5 +2,5 @@ export * from './MenuButton.types';
|
|
2
2
|
export * from './MenuButton';
|
3
3
|
export * from './renderMenuButton';
|
4
4
|
export * from './useMenuButton';
|
5
|
-
export { menuButtonClassName,
|
5
|
+
export { menuButtonClassName, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
|
6
6
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC"}
|
@@ -2,4 +2,4 @@ import type { MenuButtonState } from './MenuButton.types';
|
|
2
2
|
/**
|
3
3
|
* Renders a MenuButton component by passing the state defined props to the appropriate slots.
|
4
4
|
*/
|
5
|
-
export declare const
|
5
|
+
export declare const renderMenuButton_unstable: (state: MenuButtonState) => JSX.Element;
|
@@ -4,15 +4,18 @@ import { getSlots } from '@fluentui/react-utilities';
|
|
4
4
|
* Renders a MenuButton component by passing the state defined props to the appropriate slots.
|
5
5
|
*/
|
6
6
|
|
7
|
-
export const
|
7
|
+
export const renderMenuButton_unstable = state => {
|
8
8
|
const {
|
9
9
|
slots,
|
10
10
|
slotProps
|
11
|
-
} = getSlots(state
|
11
|
+
} = getSlots(state);
|
12
12
|
const {
|
13
13
|
icon,
|
14
14
|
iconOnly
|
15
15
|
} = state;
|
16
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
16
|
+
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
17
|
+
}, slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
|
18
|
+
}), !iconOnly && slotProps.root.children, (!iconOnly || !(icon === null || icon === void 0 ? void 0 : icon.children)) && slots.menuIcon && /*#__PURE__*/React.createElement(slots.menuIcon, { ...slotProps.menuIcon
|
19
|
+
}));
|
17
20
|
};
|
18
21
|
//# sourceMappingURL=renderMenuButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuButton/renderMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,CAArC;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAqB,KAA3B;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADjB,EAEG,CAAC,QAAD,IAAa,SAAS,CAAC,IAAV,CAAe,QAF/B,EAGG,CAAC,CAAC,QAAD,IAAa,EAAC,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,QAAP,CAAd,KAAkC,KAAK,CAAC,QAAxC,iBAAoD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CAHvD,CADF;AAOD,CAXM","sourceRoot":""}
|
@@ -3,4 +3,4 @@ import type { MenuButtonProps, MenuButtonState } from './MenuButton.types';
|
|
3
3
|
/**
|
4
4
|
* Given user props, returns the final state for a MenuButton.
|
5
5
|
*/
|
6
|
-
export declare const
|
6
|
+
export declare const useMenuButton_unstable: ({ menuIcon, ...props }: MenuButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => MenuButtonState;
|
@@ -1,16 +1,16 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import {
|
2
|
+
import { ChevronDownRegular } from '@fluentui/react-icons';
|
3
3
|
import { resolveShorthand } from '@fluentui/react-utilities';
|
4
|
-
import {
|
4
|
+
import { useButton_unstable } from '../Button/index';
|
5
5
|
/**
|
6
6
|
* Given user props, returns the final state for a MenuButton.
|
7
7
|
*/
|
8
8
|
|
9
|
-
export const
|
9
|
+
export const useMenuButton_unstable = ({
|
10
10
|
menuIcon,
|
11
11
|
...props
|
12
12
|
}, ref) => {
|
13
|
-
const buttonState =
|
13
|
+
const buttonState = useButton_unstable(props, ref);
|
14
14
|
return { // Button state
|
15
15
|
...buttonState,
|
16
16
|
// State calculated from a set of props
|
@@ -23,7 +23,7 @@ export const useMenuButton = ({
|
|
23
23
|
},
|
24
24
|
menuIcon: resolveShorthand(menuIcon, {
|
25
25
|
defaultProps: {
|
26
|
-
children:
|
26
|
+
children: /*#__PURE__*/React.createElement(ChevronDownRegular, null)
|
27
27
|
},
|
28
28
|
required: true
|
29
29
|
})
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/MenuButton/useMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuButton/useMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,uBAAnC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,kBAAT,QAAmC,iBAAnC;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CACpC;AAAE,EAAA,QAAF;AAAY,KAAG;AAAf,CADoC,EAEpC,GAFoC,KAGjB;AACnB,QAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AACA,SAAO,EACL;AACA,OAAG,WAFE;AAIL;AACA,IAAA,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,QAAR,CALZ;AAOL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,QAAQ,EAAE;AAHA,KARP;AAcL,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAD,EAAW;AACnC,MAAA,YAAY,EAAE;AACZ,QAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,kBAAD,EAAmB,IAAnB;AADE,OADqB;AAInC,MAAA,QAAQ,EAAE;AAJyB,KAAX;AAdrB,GAAP;AAqBD,CA1BM","sourceRoot":""}
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import type { MenuButtonState } from './MenuButton.types';
|
2
2
|
export declare const menuButtonClassName = "fui-MenuButton";
|
3
|
-
export declare const
|
3
|
+
export declare const useMenuButtonStyles_unstable: (state: MenuButtonState) => MenuButtonState;
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import { mergeClasses, __styles } from '@
|
2
|
-
import {
|
1
|
+
import { mergeClasses, __styles } from '@griffel/react';
|
2
|
+
import { useButtonStyles_unstable } from '../Button/useButtonStyles';
|
3
3
|
export const menuButtonClassName = 'fui-MenuButton';
|
4
4
|
|
5
5
|
const useMenuIconStyles = /*#__PURE__*/__styles({
|
@@ -22,7 +22,7 @@ const useMenuIconStyles = /*#__PURE__*/__styles({
|
|
22
22
|
"d": [".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"]
|
23
23
|
});
|
24
24
|
|
25
|
-
export const
|
25
|
+
export const useMenuButtonStyles_unstable = state => {
|
26
26
|
const menuIconStyles = useMenuIconStyles();
|
27
27
|
state.root.className = mergeClasses(menuButtonClassName, state.root.className);
|
28
28
|
|
@@ -30,7 +30,7 @@ export const useMenuButtonStyles = state => {
|
|
30
30
|
state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);
|
31
31
|
}
|
32
32
|
|
33
|
-
|
33
|
+
useButtonStyles_unstable(state);
|
34
34
|
return state;
|
35
35
|
};
|
36
36
|
//# sourceMappingURL=useMenuButtonStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuButton/useMenuButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,gBAAzC;AAEA,SAAS,wBAAT,QAAyC,2BAAzC;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;;AAEP,MAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAmBA,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAD,EAAsB,KAAK,CAAC,IAAN,CAAW,SAAjC,CAAnC;;AAEA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,cAAc,CAAC,KAAK,CAAC,IAAP,CAAf,EAA6B,KAAK,CAAC,QAAN,CAAe,SAA5C,CAAvC;AACD;;AAED,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,KAAP;AACD,CAZM","sourceRoot":""}
|
@@ -1,16 +1,16 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import {
|
2
|
+
import { renderSplitButton_unstable } from './renderSplitButton';
|
3
|
+
import { useSplitButton_unstable } from './useSplitButton';
|
4
|
+
import { useSplitButtonStyles_unstable } from './useSplitButtonStyles';
|
5
5
|
/**
|
6
6
|
* SplitButtons are a grouping of two interactive surfaces where the interacting with the first one triggers a primary
|
7
7
|
* action, while interacting with the second one opens a menu with secondary actions.
|
8
8
|
*/
|
9
9
|
|
10
10
|
export const SplitButton = /*#__PURE__*/React.forwardRef((props, ref) => {
|
11
|
-
const state =
|
12
|
-
|
13
|
-
return
|
11
|
+
const state = useSplitButton_unstable(props, ref);
|
12
|
+
useSplitButtonStyles_unstable(state);
|
13
|
+
return renderSplitButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
|
14
14
|
});
|
15
15
|
SplitButton.displayName = 'SplitButton';
|
16
16
|
//# sourceMappingURL=SplitButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,
|
1
|
+
{"version":3,"sources":["../../../src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;AAEA,EAAA,6BAA6B,CAAC,KAAD,CAA7B;AAEA,SAAO,0BAA0B,CAAC,KAAD,CAAjC,CALgG,CAMhG;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
|
@@ -1,19 +1,21 @@
|
|
1
|
-
import
|
1
|
+
import { Button } from '../Button/Button';
|
2
|
+
import { MenuButton } from '../MenuButton/MenuButton';
|
3
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
2
4
|
import type { ButtonProps, ButtonState } from '../Button/Button.types';
|
3
5
|
import type { MenuButtonProps, MenuButtonState } from '../MenuButton/MenuButton.types';
|
4
6
|
export declare type SplitButtonSlots = {
|
5
7
|
/**
|
6
8
|
* Root of the component that wraps the primary action button and menu button.
|
7
9
|
*/
|
8
|
-
root:
|
10
|
+
root: Slot<'div'>;
|
9
11
|
/**
|
10
12
|
* Button that opens menu with secondary actions in SplitButton.
|
11
13
|
*/
|
12
|
-
menuButton?:
|
14
|
+
menuButton?: Slot<typeof MenuButton>;
|
13
15
|
/**
|
14
16
|
* Button to perform primary action in SplitButton.
|
15
17
|
*/
|
16
|
-
primaryActionButton?:
|
18
|
+
primaryActionButton?: Slot<typeof Button>;
|
17
19
|
};
|
18
20
|
export declare type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root'> & Omit<MenuButtonProps, 'root'>;
|
19
21
|
export declare type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<ButtonState, 'components' | 'iconOnly' | 'root'> & Omit<MenuButtonState, 'components' | 'iconOnly' | 'root'>;
|
@@ -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,
|
5
|
+
export { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
|
@@ -2,5 +2,5 @@ export * from './SplitButton';
|
|
2
2
|
export * from './SplitButton.types';
|
3
3
|
export * from './renderSplitButton';
|
4
4
|
export * from './useSplitButton';
|
5
|
-
export { splitButtonClassName,
|
5
|
+
export { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
|
6
6
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SplitButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC"}
|
@@ -2,4 +2,4 @@ import type { SplitButtonState } from './SplitButton.types';
|
|
2
2
|
/**
|
3
3
|
* Renders a SplitButton component by passing the state defined props to the appropriate slots.
|
4
4
|
*/
|
5
|
-
export declare const
|
5
|
+
export declare const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Element;
|
@@ -4,11 +4,14 @@ import { getSlots } from '@fluentui/react-utilities';
|
|
4
4
|
* Renders a SplitButton component by passing the state defined props to the appropriate slots.
|
5
5
|
*/
|
6
6
|
|
7
|
-
export const
|
7
|
+
export const renderSplitButton_unstable = state => {
|
8
8
|
const {
|
9
9
|
slots,
|
10
10
|
slotProps
|
11
|
-
} = getSlots(state
|
12
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
11
|
+
} = getSlots(state);
|
12
|
+
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
13
|
+
}, slots.primaryActionButton && /*#__PURE__*/React.createElement(slots.primaryActionButton, { ...slotProps.primaryActionButton
|
14
|
+
}), slots.menuButton && /*#__PURE__*/React.createElement(slots.menuButton, { ...slotProps.menuButton
|
15
|
+
}));
|
13
16
|
};
|
14
17
|
//# sourceMappingURL=renderSplitButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,
|
1
|
+
{"version":3,"sources":["../../../src/components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,mBAAN,iBAA6B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,EAAA,GAAK,SAAS,CAAC;AAAf,GAA1B,CADhC,EAEG,KAAK,CAAC,UAAN,iBAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CAFvB,CADF;AAMD,CATM","sourceRoot":""}
|
@@ -5,4 +5,4 @@ import type { SplitButtonProps, SplitButtonState } from './SplitButton.types';
|
|
5
5
|
* @param props - User provided props to the SplitButton component.
|
6
6
|
* @param ref - User provided ref to be passed to the SplitButton component.
|
7
7
|
*/
|
8
|
-
export declare const
|
8
|
+
export declare const useSplitButton_unstable: (props: SplitButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => SplitButtonState;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
|
1
|
+
import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
|
2
2
|
import { Button } from '../Button/Button';
|
3
3
|
import { MenuButton } from '../MenuButton/MenuButton';
|
4
4
|
/**
|
@@ -7,7 +7,7 @@ import { MenuButton } from '../MenuButton/MenuButton';
|
|
7
7
|
* @param ref - User provided ref to be passed to the SplitButton component.
|
8
8
|
*/
|
9
9
|
|
10
|
-
export const
|
10
|
+
export const useSplitButton_unstable = (props, ref) => {
|
11
11
|
const {
|
12
12
|
appearance,
|
13
13
|
block = false,
|
@@ -17,15 +17,18 @@ export const useSplitButton = (props, ref) => {
|
|
17
17
|
icon,
|
18
18
|
iconPosition = 'before',
|
19
19
|
menuButton,
|
20
|
+
menuIcon,
|
20
21
|
primaryActionButton,
|
21
22
|
shape = 'rounded',
|
22
23
|
size = 'medium'
|
23
24
|
} = props;
|
25
|
+
const baseId = useId('splitButton-');
|
24
26
|
const menuButtonShorthand = resolveShorthand(menuButton, {
|
25
27
|
defaultProps: {
|
26
28
|
appearance,
|
27
29
|
disabled,
|
28
30
|
disabledFocusable,
|
31
|
+
menuIcon,
|
29
32
|
shape,
|
30
33
|
size
|
31
34
|
}
|
@@ -39,10 +42,17 @@ export const useSplitButton = (props, ref) => {
|
|
39
42
|
disabledFocusable,
|
40
43
|
icon,
|
41
44
|
iconPosition,
|
45
|
+
id: baseId + '__primaryActionButton',
|
42
46
|
shape,
|
43
47
|
size
|
44
48
|
}
|
45
|
-
});
|
49
|
+
}); // Resolve menu button's aria-labelledby to be labelled by the primary action button if not a label was not provided
|
50
|
+
// by the user.
|
51
|
+
|
52
|
+
if (menuButtonShorthand && primaryActionButtonShorthand && !menuButtonShorthand['aria-label'] && !menuButtonShorthand['aria-labelledby']) {
|
53
|
+
menuButtonShorthand['aria-labelledby'] = primaryActionButtonShorthand.id;
|
54
|
+
}
|
55
|
+
|
46
56
|
return {
|
47
57
|
// Props passed at the top-level
|
48
58
|
appearance,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,
|
1
|
+
{"version":3,"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AACA,SAAS,MAAT,QAAuB,kBAAvB;AACA,SAAS,UAAT,QAA2B,0BAA3B;AAGA;;;;AAIG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CACrC,KADqC,EAErC,GAFqC,KAGjB;AACpB,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,KAAK,GAAG,KAFJ;AAGJ,IAAA,QAHI;AAIJ,IAAA,QAAQ,GAAG,KAJP;AAKJ,IAAA,iBAAiB,GAAG,KALhB;AAMJ,IAAA,IANI;AAOJ,IAAA,YAAY,GAAG,QAPX;AAQJ,IAAA,UARI;AASJ,IAAA,QATI;AAUJ,IAAA,mBAVI;AAWJ,IAAA,KAAK,GAAG,SAXJ;AAYJ,IAAA,IAAI,GAAG;AAZH,MAaF,KAbJ;AAeA,QAAM,MAAM,GAAG,KAAK,CAAC,cAAD,CAApB;AAEA,QAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,QAJY;AAKZ,MAAA,KALY;AAMZ,MAAA;AANY;AADyC,GAAb,CAA5C;AAWA,QAAM,4BAA4B,GAAG,gBAAgB,CAAC,mBAAD,EAAsB;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;AAD2D,GAAtB,CAArD,CA7BoB,CA4CpB;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,UAFF;AAGV,MAAA,mBAAmB,EAAE;AAHX,KAXP;AAiBL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAR,CAjBtB;AAkBL,IAAA,UAAU,EAAE,mBAlBP;AAmBL,IAAA,mBAAmB,EAAE;AAnBhB,GAAP;AAqBD,CA/EM","sourceRoot":""}
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import type { SplitButtonState } from './SplitButton.types';
|
2
2
|
export declare const splitButtonClassName = "fui-SplitButton";
|
3
|
-
export declare const
|
3
|
+
export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;
|
@@ -1,5 +1,6 @@
|
|
1
|
-
import { __styles, mergeClasses } from '@
|
1
|
+
import { __styles, mergeClasses } from '@griffel/react';
|
2
2
|
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
3
|
+
import { tokens } from '@fluentui/react-theme';
|
3
4
|
export const splitButtonClassName = 'fui-SplitButton';
|
4
5
|
const SplitButtonClassNames = {
|
5
6
|
primaryActionButton: `${splitButtonClassName}-primaryActionButton`,
|
@@ -68,7 +69,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
68
69
|
"a": [".fnmoi2n:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1l3povx:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fjmcta:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fm99moz:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1lpnjjp:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f8nirj0:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"]
|
69
70
|
});
|
70
71
|
|
71
|
-
export const
|
72
|
+
export const useSplitButtonStyles_unstable = state => {
|
72
73
|
const rootStyles = useRootStyles();
|
73
74
|
const focusStyles = useFocusStyles();
|
74
75
|
const {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,
|
1
|
+
{"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP,MAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,GAAG,oBAAoB,sBADhB;AAE5B,EAAA,UAAU,EAAE,GAAG,oBAAoB;AAFP,CAA9B;;AAKA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;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;;AAgHA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,KAAd;AAAqB,IAAA,QAArB;AAA+B,IAAA;AAA/B,MAAqD,KAA3D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBADiC,EAEjC,UAAU,CAAC,IAFsB,EAGjC,KAAK,IAAI,UAAU,CAAC,KAHa,EAIjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAJS,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CAhCM","sourceRoot":""}
|
@@ -1,15 +1,15 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import {
|
2
|
+
import { renderToggleButton_unstable } from './renderToggleButton';
|
3
|
+
import { useToggleButton_unstable } from './useToggleButton';
|
4
|
+
import { useToggleButtonStyles_unstable } from './useToggleButtonStyles';
|
5
5
|
/**
|
6
6
|
* ToggleButtons are buttons that toggle between two defined states when triggered.
|
7
7
|
*/
|
8
8
|
|
9
9
|
export const ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
|
-
const state =
|
11
|
-
|
12
|
-
return
|
10
|
+
const state = useToggleButton_unstable(props, ref);
|
11
|
+
useToggleButtonStyles_unstable(state);
|
12
|
+
return renderToggleButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
|
13
13
|
});
|
14
14
|
ToggleButton.displayName = 'ToggleButton';
|
15
15
|
//# sourceMappingURL=ToggleButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,
|
1
|
+
{"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AAEA,EAAA,8BAA8B,CAAC,KAAD,CAA9B;AAEA,SAAO,2BAA2B,CAAC,KAAD,CAAlC,CALkG,CAMlG;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourceRoot":""}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { ButtonProps, ButtonState } from '../Button/Button.types';
|
2
|
-
|
2
|
+
declare type ToggleButtonCommons = {
|
3
3
|
/**
|
4
4
|
* Defines the controlled checked state of the `ToggleButton`.
|
5
5
|
* If passed, `ToggleButton` ignores the `defaultChecked` property.
|
@@ -17,3 +17,4 @@ export declare type ToggleButtonProps = ButtonProps & Partial<ToggleButtonCommon
|
|
17
17
|
defaultChecked?: boolean;
|
18
18
|
};
|
19
19
|
export declare type ToggleButtonState = ButtonState & ToggleButtonCommons;
|
20
|
+
export {};
|
@@ -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,
|
5
|
+
export { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
|
@@ -2,5 +2,5 @@ export * from './ToggleButton';
|
|
2
2
|
export * from './ToggleButton.types';
|
3
3
|
export * from './renderToggleButton';
|
4
4
|
export * from './useToggleButton';
|
5
|
-
export { toggleButtonClassName,
|
5
|
+
export { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
|
6
6
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
export {
|
1
|
+
export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export {
|
1
|
+
export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
|
2
2
|
//# sourceMappingURL=renderToggleButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"renderToggleButton.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"renderToggleButton.js","sourceRoot":"","sources":["../../../src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAC"}
|