@fluentui/react-button 9.0.0-beta.1 → 9.0.0-beta.5
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +275 -1
- package/CHANGELOG.md +67 -2
- package/dist/react-button.d.ts +15 -2
- package/lib/common/isConformant.js +1 -1
- package/lib/common/isConformant.js.map +1 -1
- package/lib/components/Button/Button.js +2 -2
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Button/Button.types.d.ts +1 -1
- package/lib/components/Button/index.d.ts +1 -1
- package/lib/components/Button/index.js +1 -1
- package/lib/components/Button/index.js.map +1 -1
- package/lib/components/Button/renderButton.js +10 -9
- package/lib/components/Button/renderButton.js.map +1 -1
- package/lib/components/Button/useButton.js +20 -24
- package/lib/components/Button/useButton.js.map +1 -1
- package/lib/components/Button/useButtonStyles.d.ts +1 -0
- package/lib/components/Button/useButtonStyles.js +27 -24
- package/lib/components/Button/useButtonStyles.js.map +1 -1
- package/lib/components/CompoundButton/CompoundButton.js +2 -2
- package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
- 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.js +10 -9
- package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButton.js +8 -8
- package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +1 -0
- package/lib/components/CompoundButton/useCompoundButtonStyles.js +40 -37
- package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.js +2 -2
- package/lib/components/MenuButton/MenuButton.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.types.d.ts +5 -1
- 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.js +10 -9
- package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButton.js +8 -8
- package/lib/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib/components/MenuButton/useMenuButtonStyles.d.ts +1 -0
- package/lib/components/MenuButton/useMenuButtonStyles.js +5 -3
- package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.js +2 -2
- package/lib/components/SplitButton/SplitButton.js.map +1 -1
- 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.js +6 -7
- package/lib/components/SplitButton/renderSplitButton.js.map +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 +1 -0
- package/lib/components/SplitButton/useSplitButtonStyles.js +36 -33
- package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.js +2 -2
- package/lib/components/ToggleButton/ToggleButton.js.map +1 -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/useToggleButton.js +27 -29
- package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +1 -0
- package/lib/components/ToggleButton/useToggleButtonStyles.js +13 -10
- 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/common/isConformant.js +3 -3
- package/lib-commonjs/common/isConformant.js.map +1 -1
- package/lib-commonjs/components/Button/Button.js +6 -6
- package/lib-commonjs/components/Button/Button.js.map +1 -1
- package/lib-commonjs/components/Button/Button.types.d.ts +1 -1
- package/lib-commonjs/components/Button/index.d.ts +1 -1
- package/lib-commonjs/components/Button/index.js +8 -2
- package/lib-commonjs/components/Button/index.js.map +1 -1
- package/lib-commonjs/components/Button/renderButton.js +12 -12
- package/lib-commonjs/components/Button/renderButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButton.js +22 -26
- package/lib-commonjs/components/Button/useButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButtonStyles.d.ts +1 -0
- package/lib-commonjs/components/Button/useButtonStyles.js +29 -26
- package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/CompoundButton.js +6 -6
- 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 +8 -2
- package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.js +12 -12
- package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js +10 -11
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +1 -0
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +43 -40
- package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.js +6 -6
- package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/MenuButton.types.d.ts +5 -1
- package/lib-commonjs/components/MenuButton/index.d.ts +1 -1
- package/lib-commonjs/components/MenuButton/index.js +8 -2
- package/lib-commonjs/components/MenuButton/index.js.map +1 -1
- package/lib-commonjs/components/MenuButton/renderMenuButton.js +12 -12
- package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButton.js +12 -13
- package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +1 -0
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +9 -6
- package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.js +6 -6
- package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/index.d.ts +1 -1
- package/lib-commonjs/components/SplitButton/index.js +8 -2
- package/lib-commonjs/components/SplitButton/index.js.map +1 -1
- package/lib-commonjs/components/SplitButton/renderSplitButton.js +8 -10
- package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButton.js +44 -49
- package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +1 -0
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +39 -36
- package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.js +6 -6
- package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/index.d.ts +1 -1
- package/lib-commonjs/components/ToggleButton/index.js +8 -2
- package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButton.js +31 -34
- package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +1 -0
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +17 -13
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -1
- package/package.json +9 -11
@@ -7,8 +7,8 @@ import { useSplitButtonStyles } from './useSplitButtonStyles';
|
|
7
7
|
* action, while interacting with the second one opens a menu with secondary actions.
|
8
8
|
*/
|
9
9
|
|
10
|
-
export
|
11
|
-
|
10
|
+
export const SplitButton = /*#__PURE__*/React.forwardRef((props, ref) => {
|
11
|
+
const state = useSplitButton(props, ref);
|
12
12
|
useSplitButtonStyles(state);
|
13
13
|
return renderSplitButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
|
14
14
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,oBAAT,QAAqC,wBAArC;AAIA;;;AAGG;;AACH,OAAO,
|
1
|
+
{"version":3,"sources":["../../../src/components/SplitButton/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,oBAAT,QAAqC,wBAArC;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,cAAc,CAAC,KAAD,EAAQ,GAAR,CAA5B;AAEA,EAAA,oBAAoB,CAAC,KAAD,CAApB;AAEA,SAAO,iBAAiB,CAAC,KAAD,CAAxB,CALgG,CAMhG;AACD,CAPiE,CAA3D;AASP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
|
@@ -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 { useSplitButtonStyles } from './useSplitButtonStyles';
|
5
|
+
export { splitButtonClassName, useSplitButtonStyles } 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 { useSplitButtonStyles } from './useSplitButtonStyles';
|
5
|
+
export { splitButtonClassName, useSplitButtonStyles } 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,MAAM,wBAAwB,CAAC"}
|
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,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}
|
@@ -1,15 +1,14 @@
|
|
1
|
-
import { __assign } from "tslib";
|
2
1
|
import * as React from 'react';
|
3
2
|
import { getSlots } from '@fluentui/react-utilities';
|
4
3
|
/**
|
5
4
|
* Renders a SplitButton component by passing the state defined props to the appropriate slots.
|
6
5
|
*/
|
7
6
|
|
8
|
-
export
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
7
|
+
export const renderSplitButton = state => {
|
8
|
+
const {
|
9
|
+
slots,
|
10
|
+
slotProps
|
11
|
+
} = getSlots(state, ['root', 'menuButton', 'primaryActionButton']);
|
12
|
+
return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.primaryActionButton, Object.assign({}, slotProps.primaryActionButton)), /*#__PURE__*/React.createElement(slots.menuButton, Object.assign({}, slotProps.menuButton)));
|
14
13
|
};
|
15
14
|
//# sourceMappingURL=renderSplitButton.js.map
|
@@ -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,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,EAA0B,CAAC,MAAD,EAAS,YAAT,EAAuB,qBAAvB,CAA1B,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,mBAAP,EAA0B,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,mBAAf,CAA1B,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,UAAf,CAAjB,CAFF,CADF;AAMD,CATM","sourceRoot":""}
|
@@ -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 = (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,cAAc,GAAG,CAC5B,KAD4B,EAE5B,GAF4B,KAGR;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,11 +1,12 @@
|
|
1
1
|
import { __styles, mergeClasses } from '@fluentui/react-make-styles';
|
2
2
|
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
3
|
-
|
4
|
-
|
5
|
-
|
3
|
+
export const splitButtonClassName = 'fui-SplitButton';
|
4
|
+
const SplitButtonClassNames = {
|
5
|
+
primaryActionButton: `${splitButtonClassName}-primaryActionButton`,
|
6
|
+
menuButton: `${splitButtonClassName}-menuButton`
|
6
7
|
};
|
7
8
|
|
8
|
-
|
9
|
+
const useFocusStyles = /*#__PURE__*/__styles({
|
9
10
|
"primaryActionButton": {
|
10
11
|
"B486eqv": "f2hkw1w",
|
11
12
|
"Bmrpcm6": ["fub8a6s", "f1g41uvt"],
|
@@ -22,59 +23,61 @@ var useFocusStyles = /*#__PURE__*/__styles({
|
|
22
23
|
"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
24
|
});
|
24
25
|
|
25
|
-
|
26
|
+
const useRootStyles = /*#__PURE__*/__styles({
|
26
27
|
"base": {
|
27
28
|
"mc9l5x": "ftuwxu6",
|
28
29
|
"Brf1p80": "fsxf2b5",
|
29
30
|
"qhf8xq": "f10pi13n",
|
30
31
|
"ha4doy": "fmrv4ls",
|
31
|
-
"
|
32
|
-
"
|
33
|
-
"
|
34
|
-
"
|
35
|
-
"
|
32
|
+
"mfjwoh": ["fwj9yvy", "f1lzjiju"],
|
33
|
+
"ibxugx": ["f1a35zaw", "f1l6wyf7"],
|
34
|
+
"Bqvcgfq": ["f104opbk", "f147sopj"],
|
35
|
+
"Baxitl6": ["fxs6g7p", "f1moly3t"],
|
36
|
+
"zkjfwm": ["f1m1y7kk", "ff82swa"]
|
36
37
|
},
|
37
38
|
"block": {
|
38
39
|
"a9b677": "fly5x3f"
|
39
40
|
},
|
40
41
|
"outline": {},
|
41
42
|
"primary": {
|
42
|
-
"
|
43
|
-
"
|
44
|
-
"
|
43
|
+
"Bt6mj9": ["fptrtw7", "f51449u"],
|
44
|
+
"xhdd7j": ["f1n4yg8a", "fbebbjo"],
|
45
|
+
"Jxu9b0": ["fnmoi2n", "f1l3povx"]
|
45
46
|
},
|
46
47
|
"subtle": {
|
47
|
-
"
|
48
|
-
"
|
49
|
-
"
|
48
|
+
"Bt6mj9": ["fh2ci0", "f1us00qf"],
|
49
|
+
"xhdd7j": ["fj8butq", "fkv8iz"],
|
50
|
+
"Jxu9b0": ["fjmcta", "fm99moz"]
|
50
51
|
},
|
51
52
|
"transparent": {
|
52
|
-
"
|
53
|
-
"
|
54
|
-
"
|
53
|
+
"Bt6mj9": ["fh2ci0", "f1us00qf"],
|
54
|
+
"xhdd7j": ["fj8butq", "fkv8iz"],
|
55
|
+
"Jxu9b0": ["fjmcta", "fm99moz"]
|
55
56
|
},
|
56
57
|
"circular": {},
|
57
58
|
"rounded": {},
|
58
59
|
"square": {},
|
59
60
|
"disabled": {
|
60
|
-
"
|
61
|
-
"
|
62
|
-
"
|
61
|
+
"Bt6mj9": ["f1gu8nb8", "f7r8m4m"],
|
62
|
+
"xhdd7j": ["f3cl9o2", "f12vilfs"],
|
63
|
+
"Jxu9b0": ["f1lpnjjp", "f8nirj0"]
|
63
64
|
}
|
64
65
|
}, {
|
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": [".
|
66
|
+
"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);}"],
|
67
|
+
"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);}"],
|
68
|
+
"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
69
|
});
|
69
70
|
|
70
|
-
export
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
71
|
+
export const useSplitButtonStyles = state => {
|
72
|
+
const rootStyles = useRootStyles();
|
73
|
+
const focusStyles = useFocusStyles();
|
74
|
+
const {
|
75
|
+
appearance,
|
76
|
+
block,
|
77
|
+
disabled,
|
78
|
+
disabledFocusable
|
79
|
+
} = state;
|
80
|
+
state.root.className = mergeClasses(splitButtonClassName, rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, state.root.className);
|
78
81
|
|
79
82
|
if (state.menuButton) {
|
80
83
|
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,6BAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AAGA,
|
1
|
+
{"version":3,"sources":["../../../src/components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;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,oBAAoB,GAAI,KAAD,IAA8C;AAChF,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":""}
|
@@ -6,8 +6,8 @@ import { useToggleButtonStyles } from './useToggleButtonStyles';
|
|
6
6
|
* ToggleButtons are buttons that toggle between two defined states when triggered.
|
7
7
|
*/
|
8
8
|
|
9
|
-
export
|
10
|
-
|
9
|
+
export const ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
|
+
const state = useToggleButton(props, ref);
|
11
11
|
useToggleButtonStyles(state);
|
12
12
|
return renderToggleButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
|
13
13
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AACA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,qBAAT,QAAsC,yBAAtC;AAIA;;AAEG;;AACH,OAAO,
|
1
|
+
{"version":3,"sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AACA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,qBAAT,QAAsC,yBAAtC;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;AAEA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AAEA,SAAO,kBAAkB,CAAC,KAAD,CAAzB,CALkG,CAMlG;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourceRoot":""}
|
@@ -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 { useToggleButtonStyles } from './useToggleButtonStyles';
|
5
|
+
export { toggleButtonClassName, useToggleButtonStyles } 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 { useToggleButtonStyles } from './useToggleButtonStyles';
|
5
|
+
export { toggleButtonClassName, useToggleButtonStyles } 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,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { __assign, __rest } from "tslib";
|
2
1
|
import { useControllableState } from '@fluentui/react-utilities';
|
3
2
|
import * as React from 'react';
|
4
3
|
import { useButton } from '../Button/useButton';
|
@@ -9,42 +8,41 @@ 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
|
-
var _d = useControllableState({
|
11
|
+
export const useToggleButton = ({
|
12
|
+
checked,
|
13
|
+
defaultChecked,
|
14
|
+
...props
|
15
|
+
}, ref) => {
|
16
|
+
const buttonState = useButton(props, ref);
|
17
|
+
const {
|
18
|
+
role,
|
19
|
+
onClick
|
20
|
+
} = buttonState.root;
|
21
|
+
const [checkedValue, setCheckedValue] = useControllableState({
|
25
22
|
state: checked,
|
26
23
|
defaultState: defaultChecked,
|
27
24
|
initialState: false
|
28
|
-
})
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
var isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
|
33
|
-
return __assign(__assign({}, buttonState), {
|
25
|
+
});
|
26
|
+
const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
|
27
|
+
return { // Button state
|
28
|
+
...buttonState,
|
34
29
|
// State calculated from a set of props
|
35
30
|
checked: checkedValue,
|
36
31
|
// Slots definition
|
37
|
-
root:
|
38
|
-
|
39
|
-
|
32
|
+
root: { ...buttonState.root,
|
33
|
+
[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: !!checkedValue,
|
34
|
+
onClick: React.useCallback(ev => {
|
35
|
+
if (onClick) {
|
36
|
+
onClick(ev);
|
40
37
|
|
41
|
-
|
42
|
-
|
38
|
+
if (ev.defaultPrevented) {
|
39
|
+
return;
|
40
|
+
}
|
43
41
|
}
|
44
|
-
}
|
45
42
|
|
46
|
-
|
47
|
-
|
48
|
-
|
43
|
+
setCheckedValue(!checkedValue);
|
44
|
+
}, [checkedValue, setCheckedValue, onClick])
|
45
|
+
}
|
46
|
+
};
|
49
47
|
};
|
50
48
|
//# 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,SAAT,QAA0B,qBAA1B;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,eAAe,GAAG,CAC7B;AAAE,EAAA,OAAF;AAAW,EAAA,cAAX;AAA2B,KAAG;AAA9B,CAD6B,EAE7B,GAF6B,KAGR;AACrB,QAAM,WAAW,GAAG,SAAS,CAAC,KAAD,EAAQ,GAAR,CAA7B;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,CAAC,YAFtD;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,CA1CM","sourceRoot":""}
|
@@ -1,7 +1,8 @@
|
|
1
1
|
import { mergeClasses, __styles } from '@fluentui/react-make-styles';
|
2
2
|
import { useButtonStyles } from '../Button/useButtonStyles';
|
3
|
+
export const toggleButtonClassName = 'fui-ToggleButton';
|
3
4
|
|
4
|
-
|
5
|
+
const useCheckedStyles = /*#__PURE__*/__styles({
|
5
6
|
"base": {
|
6
7
|
"ayd6f0": "fg85c1j",
|
7
8
|
"g2u3we": "fj3muxo",
|
@@ -97,7 +98,7 @@ var useCheckedStyles = /*#__PURE__*/__styles({
|
|
97
98
|
"a": [".fzgy25m:active{background:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".flt377r:active{background:var(--colorTransparentBackgroundPressed);}", ".f4ihffn:active{background:var(--colorBrandBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1be4e1d:active{background:var(--colorSubtleBackgroundPressed);}", ".f19au66r:active{color:var(--colorNeutralForeground2BrandPressed);}"]
|
98
99
|
});
|
99
100
|
|
100
|
-
|
101
|
+
const useDisabledStyles = /*#__PURE__*/__styles({
|
101
102
|
"base": {
|
102
103
|
"ayd6f0": "fqst6tg",
|
103
104
|
"g2u3we": "f1jj8ep1",
|
@@ -173,14 +174,16 @@ var useDisabledStyles = /*#__PURE__*/__styles({
|
|
173
174
|
"a": [".fkqx3al:active{background:var(--colorNeutralBackgroundDisabled);}", ".fdi4vxw:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f4ryxzl:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fkdgpbx:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fcmhn06:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f17oliv9:active{background:none;}"]
|
174
175
|
});
|
175
176
|
|
176
|
-
export
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
177
|
+
export const useToggleButtonStyles = state => {
|
178
|
+
const checkedStyles = useCheckedStyles();
|
179
|
+
const disabledStyles = useDisabledStyles();
|
180
|
+
const {
|
181
|
+
appearance,
|
182
|
+
checked,
|
183
|
+
disabled,
|
184
|
+
disabledFocusable
|
185
|
+
} = state;
|
186
|
+
state.root.className = mergeClasses(toggleButtonClassName, // Checked styles
|
184
187
|
checked && checkedStyles.base, appearance && checked && checkedStyles[appearance], // Disabled styles
|
185
188
|
(disabled || disabledFocusable) && disabledStyles.base, appearance && (disabled || disabledFocusable) && disabledStyles[appearance], // User provided class name
|
186
189
|
state.root.className);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AACA,SAAS,eAAT,QAAgC,2BAAhC
|
1
|
+
{"version":3,"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AACA,SAAS,eAAT,QAAgC,2BAAhC;AAGA,OAAO,MAAM,qBAAqB,GAAG,kBAA9B;;AAEP,MAAM,gBAAgB,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;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;AAAA;AAAA;AAAA,EAAzB;;AAuFA,MAAM,iBAAiB,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;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,EAA1B;;AAiEA,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAgD;AACnF,QAAM,aAAa,GAAG,gBAAgB,EAAtC;AACA,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,OAAd;AAAuB,IAAA,QAAvB;AAAiC,IAAA;AAAjC,MAAuD,KAA7D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBADiC,EAGjC;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAJQ,EAKjC,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CALL,EAOjC;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IARjB,EASjC,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAT9B,EAWjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAZsB,CAAnC;AAeA,EAAA,eAAe,CAAC,KAAD,CAAf;AAEA,SAAO,KAAP;AACD,CAxBM","sourceRoot":""}
|
package/lib-commonjs/Button.js
CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
|
7
|
-
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
8
|
|
9
9
|
tslib_1.__exportStar(require("./components/Button/index"), exports);
|
10
10
|
//# sourceMappingURL=Button.js.map
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
|
7
|
-
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
8
|
|
9
9
|
tslib_1.__exportStar(require("./components/CompoundButton/index"), exports);
|
10
10
|
//# sourceMappingURL=CompoundButton.js.map
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
|
7
|
-
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
8
|
|
9
9
|
tslib_1.__exportStar(require("./components/MenuButton/index"), exports);
|
10
10
|
//# sourceMappingURL=MenuButton.js.map
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
|
7
|
-
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
8
|
|
9
9
|
tslib_1.__exportStar(require("./components/SplitButton/index"), exports);
|
10
10
|
//# sourceMappingURL=SplitButton.js.map
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
|
7
|
-
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
8
|
|
9
9
|
tslib_1.__exportStar(require("./components/ToggleButton/index"), exports);
|
10
10
|
//# sourceMappingURL=ToggleButton.js.map
|
@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.isConformant = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const react_conformance_1 = /*#__PURE__*/require("@fluentui/react-conformance");
|
9
9
|
|
10
|
-
|
10
|
+
const react_conformance_make_styles_1 = /*#__PURE__*/require("@fluentui/react-conformance-make-styles");
|
11
11
|
|
12
12
|
function isConformant(testInfo) {
|
13
|
-
|
13
|
+
const defaultOptions = {
|
14
14
|
asPropHandlesRef: true,
|
15
15
|
componentPath: module.parent.filename.replace('.test', ''),
|
16
16
|
disabledTests: ['has-docblock', 'kebab-aria-attributes'],
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,
|
1
|
+
{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,MAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;AAEzF,QAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,aAAa,EAAE,CAAC,cAAD,EAAiB,uBAAjB,CAH4C;AAI3D,IAAA,UAAU,EAAE,+BAAA,CAAA,OAJ+C;AAK3D,IAAA,eAAe,EAAE;AAL0C,GAA7D;AAQA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAZD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}
|