@fluentui/react-button 9.0.0-nightly.46b9ea7036.0 → 9.0.0-rc.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +380 -31
- package/CHANGELOG.md +88 -20
- package/dist/react-button.d.ts +42 -34
- package/lib/components/Button/Button.js +7 -7
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Button/Button.types.d.ts +6 -6
- 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 +13 -9
- package/lib/components/Button/renderButton.js.map +1 -1
- package/lib/components/Button/useButton.d.ts +1 -1
- package/lib/components/Button/useButton.js +22 -25
- package/lib/components/Button/useButton.js.map +1 -1
- package/lib/components/Button/useButtonStyles.d.ts +2 -9
- package/lib/components/Button/useButtonStyles.js +118 -90
- package/lib/components/Button/useButtonStyles.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.js +7 -7
- 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 +15 -9
- package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButton.d.ts +1 -1
- package/lib/components/CompoundButton/useCompoundButton.js +9 -9
- package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +2 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.js +52 -48
- package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.js +7 -7
- 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 +13 -9
- package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButton.d.ts +1 -1
- package/lib/components/MenuButton/useMenuButton.js +11 -11
- package/lib/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButtonStyles.d.ts +2 -1
- package/lib/components/MenuButton/useMenuButtonStyles.js +8 -6
- package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.js +7 -7
- 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 +9 -7
- package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButton.d.ts +1 -1
- package/lib/components/SplitButton/useSplitButton.js +41 -45
- package/lib/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib/components/SplitButton/useSplitButtonStyles.d.ts +2 -1
- package/lib/components/SplitButton/useSplitButtonStyles.js +38 -34
- package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.js +7 -7
- 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 +32 -30
- package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +2 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.js +47 -43
- package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib-commonjs/Button.js +1 -1
- package/lib-commonjs/CompoundButton.js +1 -1
- package/lib-commonjs/MenuButton.js +1 -1
- package/lib-commonjs/SplitButton.js +1 -1
- package/lib-commonjs/ToggleButton.js +1 -1
- package/lib-commonjs/components/Button/Button.js +8 -8
- package/lib-commonjs/components/Button/Button.js.map +1 -1
- package/lib-commonjs/components/Button/Button.types.d.ts +6 -6
- package/lib-commonjs/components/Button/index.d.ts +2 -2
- package/lib-commonjs/components/Button/index.js +10 -6
- 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 +17 -14
- 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 +26 -29
- package/lib-commonjs/components/Button/useButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.d.ts +2 -9
- package/lib-commonjs/components/Button/useButtonStyles.js +121 -92
- package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.js +8 -8
- 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 +10 -4
- 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 +19 -14
- 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 +12 -13
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +2 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +58 -53
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.js +8 -8
- 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 +10 -4
- 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 +17 -14
- 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 +15 -16
- package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +2 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +12 -9
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.js +8 -8
- 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 +10 -4
- 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 +13 -12
- 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 +46 -51
- package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +2 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +44 -39
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.js +8 -8
- 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 +10 -4
- 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 +36 -35
- package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +2 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +51 -45
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib-commonjs/index.js +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 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SplitButton/renderSplitButton.tsx"],"names":[],"mappings":"
|
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,3 @@
|
|
1
|
-
import { __assign } from "tslib";
|
2
1
|
import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
|
3
2
|
import { Button } from '../Button/Button';
|
4
3
|
import { MenuButton } from '../MenuButton/MenuButton';
|
@@ -8,64 +7,61 @@ import { MenuButton } from '../MenuButton/MenuButton';
|
|
8
7
|
* @param ref - User provided ref to be passed to the SplitButton component.
|
9
8
|
*/
|
10
9
|
|
11
|
-
export
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
shape = _e === void 0 ? 'rounded' : _e,
|
27
|
-
_f = props.size,
|
28
|
-
size = _f === void 0 ? 'medium' : _f;
|
29
|
-
var menuButtonShorthand = resolveShorthand(menuButton, {
|
10
|
+
export const useSplitButton_unstable = (props, ref) => {
|
11
|
+
const {
|
12
|
+
appearance,
|
13
|
+
block = false,
|
14
|
+
children,
|
15
|
+
disabled = false,
|
16
|
+
disabledFocusable = false,
|
17
|
+
icon,
|
18
|
+
iconPosition = 'before',
|
19
|
+
menuButton,
|
20
|
+
primaryActionButton,
|
21
|
+
shape = 'rounded',
|
22
|
+
size = 'medium'
|
23
|
+
} = props;
|
24
|
+
const menuButtonShorthand = resolveShorthand(menuButton, {
|
30
25
|
defaultProps: {
|
31
|
-
appearance
|
32
|
-
disabled
|
33
|
-
disabledFocusable
|
34
|
-
shape
|
35
|
-
size
|
26
|
+
appearance,
|
27
|
+
disabled,
|
28
|
+
disabledFocusable,
|
29
|
+
shape,
|
30
|
+
size
|
36
31
|
}
|
37
32
|
});
|
38
|
-
|
33
|
+
const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, {
|
39
34
|
defaultProps: {
|
40
|
-
appearance
|
41
|
-
block
|
42
|
-
children
|
43
|
-
disabled
|
44
|
-
disabledFocusable
|
45
|
-
icon
|
46
|
-
iconPosition
|
47
|
-
shape
|
48
|
-
size
|
35
|
+
appearance,
|
36
|
+
block,
|
37
|
+
children,
|
38
|
+
disabled,
|
39
|
+
disabledFocusable,
|
40
|
+
icon,
|
41
|
+
iconPosition,
|
42
|
+
shape,
|
43
|
+
size
|
49
44
|
}
|
50
45
|
});
|
51
46
|
return {
|
52
47
|
// Props passed at the top-level
|
53
|
-
appearance
|
54
|
-
block
|
55
|
-
disabled
|
56
|
-
disabledFocusable
|
57
|
-
iconPosition
|
58
|
-
shape
|
59
|
-
size
|
48
|
+
appearance,
|
49
|
+
block,
|
50
|
+
disabled,
|
51
|
+
disabledFocusable,
|
52
|
+
iconPosition,
|
53
|
+
shape,
|
54
|
+
size,
|
60
55
|
// Slots definition
|
61
56
|
components: {
|
62
57
|
root: 'div',
|
63
58
|
menuButton: MenuButton,
|
64
59
|
primaryActionButton: Button
|
65
60
|
},
|
66
|
-
root: getNativeElementProps('div',
|
67
|
-
ref
|
68
|
-
|
61
|
+
root: getNativeElementProps('div', {
|
62
|
+
ref,
|
63
|
+
...props
|
64
|
+
}),
|
69
65
|
menuButton: menuButtonShorthand,
|
70
66
|
primaryActionButton: primaryActionButtonShorthand
|
71
67
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../src/components/SplitButton/useSplitButton.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;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,mBATI;AAUJ,IAAA,KAAK,GAAG,SAVJ;AAWJ,IAAA,IAAI,GAAG;AAXH,MAYF,KAZJ;AAaA,QAAM,mBAAmB,GAAG,gBAAgB,CAAC,UAAD,EAAa;AACvD,IAAA,YAAY,EAAE;AACZ,MAAA,UADY;AAEZ,MAAA,QAFY;AAGZ,MAAA,iBAHY;AAIZ,MAAA,KAJY;AAKZ,MAAA;AALY;AADyC,GAAb,CAA5C;AASA,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,KARY;AASZ,MAAA;AATY;AAD2D,GAAtB,CAArD;AAcA,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,CA7DM","sourceRoot":""}
|
@@ -1,2 +1,3 @@
|
|
1
1
|
import type { SplitButtonState } from './SplitButton.types';
|
2
|
-
export declare const
|
2
|
+
export declare const splitButtonClassName = "fui-SplitButton";
|
3
|
+
export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) => SplitButtonState;
|
@@ -1,11 +1,13 @@
|
|
1
|
-
import { __styles, mergeClasses } from '@
|
1
|
+
import { __styles, mergeClasses } from '@griffel/react';
|
2
2
|
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
3
|
-
|
4
|
-
|
5
|
-
|
3
|
+
import { tokens } from '@fluentui/react-theme';
|
4
|
+
export const splitButtonClassName = 'fui-SplitButton';
|
5
|
+
const SplitButtonClassNames = {
|
6
|
+
primaryActionButton: `${splitButtonClassName}-primaryActionButton`,
|
7
|
+
menuButton: `${splitButtonClassName}-menuButton`
|
6
8
|
};
|
7
9
|
|
8
|
-
|
10
|
+
const useFocusStyles = /*#__PURE__*/__styles({
|
9
11
|
"primaryActionButton": {
|
10
12
|
"B486eqv": "f2hkw1w",
|
11
13
|
"Bmrpcm6": ["fub8a6s", "f1g41uvt"],
|
@@ -22,59 +24,61 @@ var useFocusStyles = /*#__PURE__*/__styles({
|
|
22
24
|
"d": ["[data-keyboard-nav] .fub8a6s:focus{border-top-right-radius:0;}", "[data-keyboard-nav] .f1g41uvt:focus{border-top-left-radius:0;}", "[data-keyboard-nav] .f58hr3h:focus{border-bottom-right-radius:0;}", "[data-keyboard-nav] .f1u1mnrj:focus{border-bottom-left-radius:0;}", "[data-keyboard-nav] .fy9hclh:focus{border-left-width:0;}", "[data-keyboard-nav] .f549e1y:focus{border-right-width:0;}"]
|
23
25
|
});
|
24
26
|
|
25
|
-
|
27
|
+
const useRootStyles = /*#__PURE__*/__styles({
|
26
28
|
"base": {
|
27
29
|
"mc9l5x": "ftuwxu6",
|
28
30
|
"Brf1p80": "fsxf2b5",
|
29
31
|
"qhf8xq": "f10pi13n",
|
30
32
|
"ha4doy": "fmrv4ls",
|
31
|
-
"
|
32
|
-
"
|
33
|
-
"
|
34
|
-
"
|
35
|
-
"
|
33
|
+
"mfjwoh": ["fwj9yvy", "f1lzjiju"],
|
34
|
+
"ibxugx": ["f1a35zaw", "f1l6wyf7"],
|
35
|
+
"Bqvcgfq": ["f104opbk", "f147sopj"],
|
36
|
+
"Baxitl6": ["fxs6g7p", "f1moly3t"],
|
37
|
+
"zkjfwm": ["f1m1y7kk", "ff82swa"]
|
36
38
|
},
|
37
39
|
"block": {
|
38
40
|
"a9b677": "fly5x3f"
|
39
41
|
},
|
40
42
|
"outline": {},
|
41
43
|
"primary": {
|
42
|
-
"
|
43
|
-
"
|
44
|
-
"
|
44
|
+
"Bt6mj9": ["fptrtw7", "f51449u"],
|
45
|
+
"xhdd7j": ["f1n4yg8a", "fbebbjo"],
|
46
|
+
"Jxu9b0": ["fnmoi2n", "f1l3povx"]
|
45
47
|
},
|
46
48
|
"subtle": {
|
47
|
-
"
|
48
|
-
"
|
49
|
-
"
|
49
|
+
"Bt6mj9": ["fh2ci0", "f1us00qf"],
|
50
|
+
"xhdd7j": ["fj8butq", "fkv8iz"],
|
51
|
+
"Jxu9b0": ["fjmcta", "fm99moz"]
|
50
52
|
},
|
51
53
|
"transparent": {
|
52
|
-
"
|
53
|
-
"
|
54
|
-
"
|
54
|
+
"Bt6mj9": ["fh2ci0", "f1us00qf"],
|
55
|
+
"xhdd7j": ["fj8butq", "fkv8iz"],
|
56
|
+
"Jxu9b0": ["fjmcta", "fm99moz"]
|
55
57
|
},
|
56
58
|
"circular": {},
|
57
59
|
"rounded": {},
|
58
60
|
"square": {},
|
59
61
|
"disabled": {
|
60
|
-
"
|
61
|
-
"
|
62
|
-
"
|
62
|
+
"Bt6mj9": ["f1gu8nb8", "f7r8m4m"],
|
63
|
+
"xhdd7j": ["f3cl9o2", "f12vilfs"],
|
64
|
+
"Jxu9b0": ["f1lpnjjp", "f8nirj0"]
|
63
65
|
}
|
64
66
|
}, {
|
65
|
-
"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;}", ".
|
66
|
-
"h": [".
|
67
|
-
"a": [".
|
67
|
+
"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;}", ".fwj9yvy .fui-SplitButton-primaryActionButton{border-top-right-radius:0;}", ".f1lzjiju .fui-SplitButton-primaryActionButton{border-top-left-radius:0;}", ".f1a35zaw .fui-SplitButton-primaryActionButton{border-bottom-right-radius:0;}", ".f1l6wyf7 .fui-SplitButton-primaryActionButton{border-bottom-left-radius:0;}", ".f104opbk .fui-SplitButton-menuButton{border-left-width:0;}", ".f147sopj .fui-SplitButton-menuButton{border-right-width:0;}", ".fxs6g7p .fui-SplitButton-menuButton{border-top-left-radius:0;}", ".f1moly3t .fui-SplitButton-menuButton{border-top-right-radius:0;}", ".f1m1y7kk .fui-SplitButton-menuButton{border-bottom-left-radius:0;}", ".ff82swa .fui-SplitButton-menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".fptrtw7 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f51449u .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fh2ci0 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1us00qf .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1gu8nb8 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f7r8m4m .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
|
68
|
+
"h": [".f1n4yg8a:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fbebbjo:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fj8butq:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fkv8iz:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f3cl9o2:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f12vilfs:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
|
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);}"]
|
68
70
|
});
|
69
71
|
|
70
|
-
export
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
72
|
+
export const useSplitButtonStyles_unstable = state => {
|
73
|
+
const rootStyles = useRootStyles();
|
74
|
+
const focusStyles = useFocusStyles();
|
75
|
+
const {
|
76
|
+
appearance,
|
77
|
+
block,
|
78
|
+
disabled,
|
79
|
+
disabledFocusable
|
80
|
+
} = state;
|
81
|
+
state.root.className = mergeClasses(splitButtonClassName, rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, state.root.className);
|
78
82
|
|
79
83
|
if (state.menuButton) {
|
80
84
|
state.menuButton.className = mergeClasses(SplitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
|
@@ -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
|
-
export
|
10
|
-
|
11
|
-
|
12
|
-
return
|
9
|
+
export const ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
|
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 {
|
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 {
|
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,MAAM,yBAAyB,CAAC"}
|
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"}
|
@@ -6,4 +6,4 @@ import type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types'
|
|
6
6
|
* @param props - User provided props to the ToggleButton component.
|
7
7
|
* @param ref - User provided ref to be passed to the ToggleButton component.
|
8
8
|
*/
|
9
|
-
export declare const
|
9
|
+
export declare const useToggleButton_unstable: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
|
@@ -1,7 +1,6 @@
|
|
1
|
-
import { __assign, __rest } from "tslib";
|
2
1
|
import { useControllableState } from '@fluentui/react-utilities';
|
3
2
|
import * as React from 'react';
|
4
|
-
import {
|
3
|
+
import { useButton_unstable } from '../Button/useButton';
|
5
4
|
/**
|
6
5
|
* Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
|
7
6
|
* processed state.
|
@@ -9,42 +8,45 @@ import { useButton } from '../Button/useButton';
|
|
9
8
|
* @param ref - User provided ref to be passed to the ToggleButton component.
|
10
9
|
*/
|
11
10
|
|
12
|
-
export
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
11
|
+
export const useToggleButton_unstable = ({
|
12
|
+
checked,
|
13
|
+
defaultChecked,
|
14
|
+
...props
|
15
|
+
}, ref) => {
|
16
|
+
const {
|
17
|
+
disabled,
|
18
|
+
disabledFocusable
|
19
|
+
} = props;
|
20
|
+
const buttonState = useButton_unstable(props, ref);
|
21
|
+
const {
|
22
|
+
role,
|
23
|
+
onClick
|
24
|
+
} = buttonState.root;
|
25
|
+
const [checkedValue, setCheckedValue] = useControllableState({
|
25
26
|
state: checked,
|
26
27
|
defaultState: defaultChecked,
|
27
28
|
initialState: false
|
28
|
-
})
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
var isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
|
33
|
-
return __assign(__assign({}, buttonState), {
|
29
|
+
});
|
30
|
+
const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
|
31
|
+
return { // Button state
|
32
|
+
...buttonState,
|
34
33
|
// State calculated from a set of props
|
35
34
|
checked: checkedValue,
|
36
35
|
// Slots definition
|
37
|
-
root:
|
38
|
-
|
39
|
-
|
36
|
+
root: { ...buttonState.root,
|
37
|
+
[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: !disabled && !disabledFocusable && checkedValue,
|
38
|
+
onClick: React.useCallback(ev => {
|
39
|
+
if (onClick) {
|
40
|
+
onClick(ev);
|
40
41
|
|
41
|
-
|
42
|
-
|
42
|
+
if (ev.defaultPrevented) {
|
43
|
+
return;
|
44
|
+
}
|
43
45
|
}
|
44
|
-
}
|
45
46
|
|
46
|
-
|
47
|
-
|
48
|
-
|
47
|
+
setCheckedValue(!checkedValue);
|
48
|
+
}, [checkedValue, setCheckedValue, onClick])
|
49
|
+
}
|
50
|
+
};
|
49
51
|
};
|
50
52
|
//# sourceMappingURL=useToggleButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,qBAAnC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CACtC;AAAE,EAAA,OAAF;AAAW,EAAA,cAAX;AAA2B,KAAG;AAA9B,CADsC,EAEtC,GAFsC,KAGjB;AACrB,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAAkC,KAAxC;AACA,QAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAoB,WAAW,CAAC,IAAtC;AAEA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,OADoD;AAE3D,IAAA,YAAY,EAAE,cAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAA5D;AAMA,QAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,SAAO,EACL;AACA,OAAG,WAFE;AAIL;AACA,IAAA,OAAO,EAAE,YALJ;AAOL;AACA,IAAA,IAAI,EAAE,EACJ,GAAG,WAAW,CAAC,IADX;AAEJ,OAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,GAAwD,CAAC,QAAD,IAAa,CAAC,iBAAd,IAAmC,YAFvF;AAGJ,MAAA,OAAO,EAAE,KAAK,CAAC,WAAN,CACP,EAAE,IAAG;AACH,YAAI,OAAJ,EAAa;AACX,UAAA,OAAO,CAAC,EAAD,CAAP;;AAEA,cAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;AACF;;AAED,QAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD,OAXM,EAYP,CAAC,YAAD,EAAe,eAAf,EAAgC,OAAhC,CAZO;AAHL;AARD,GAAP;AA2BD,CA3CM","sourceRoot":""}
|
@@ -1,2 +1,3 @@
|
|
1
1
|
import type { ToggleButtonState } from './ToggleButton.types';
|
2
|
-
export declare const
|
2
|
+
export declare const toggleButtonClassName = "fui-ToggleButton";
|
3
|
+
export declare const useToggleButtonStyles_unstable: (state: ToggleButtonState) => ToggleButtonState;
|