@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
@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.Button = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
9
|
|
10
|
-
|
10
|
+
const renderButton_1 = /*#__PURE__*/require("./renderButton");
|
11
11
|
|
12
|
-
|
12
|
+
const useButton_1 = /*#__PURE__*/require("./useButton");
|
13
13
|
|
14
|
-
|
14
|
+
const useButtonStyles_1 = /*#__PURE__*/require("./useButtonStyles");
|
15
15
|
/**
|
16
16
|
* Buttons give people a way to trigger an action.
|
17
17
|
*/
|
18
18
|
|
19
19
|
|
20
|
-
exports.Button = /*#__PURE__*/React.forwardRef(
|
21
|
-
|
20
|
+
exports.Button = /*#__PURE__*/React.forwardRef((props, ref) => {
|
21
|
+
const state = useButton_1.useButton(props, ref);
|
22
22
|
useButtonStyles_1.useButtonStyles(state);
|
23
23
|
return renderButton_1.renderButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
|
24
24
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;;;;;AAAA,
|
1
|
+
{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,SAAA,CAAU,KAAV,EAAiB,GAAjB,CAAd;AAEA,EAAA,iBAAA,CAAA,eAAA,CAAgB,KAAhB;AAEA,SAAO,cAAA,CAAA,YAAA,CAAa,KAAb,CAAP,CALsF,CAMtF;AACD,CAPuD,CAA3C;AASb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourceRoot":""}
|
@@ -2,7 +2,7 @@ import { ARIAButtonShorthandProps } from '@fluentui/react-aria';
|
|
2
2
|
import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
3
3
|
export declare type ButtonSlots = {
|
4
4
|
/**
|
5
|
-
* Root of the component that renders as either a
|
5
|
+
* Root of the component that renders as either a `<button>` tag or an `<a>` tag.
|
6
6
|
*/
|
7
7
|
root: ARIAButtonShorthandProps;
|
8
8
|
/**
|
@@ -3,9 +3,9 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.useButtonStyles = void 0;
|
6
|
+
exports.useButtonStyles = exports.buttonClassName = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
9
9
|
|
10
10
|
tslib_1.__exportStar(require("./Button"), exports);
|
11
11
|
|
@@ -17,6 +17,12 @@ tslib_1.__exportStar(require("./useButton"), exports);
|
|
17
17
|
|
18
18
|
var useButtonStyles_1 = /*#__PURE__*/require("./useButtonStyles");
|
19
19
|
|
20
|
+
Object.defineProperty(exports, "buttonClassName", {
|
21
|
+
enumerable: true,
|
22
|
+
get: function () {
|
23
|
+
return useButtonStyles_1.buttonClassName;
|
24
|
+
}
|
25
|
+
});
|
20
26
|
Object.defineProperty(exports, "useButtonStyles", {
|
21
27
|
enumerable: true,
|
22
28
|
get: function () {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA","sourceRoot":""}
|
1
|
+
{"version":3,"sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,eAAA;AAAe;AAAf,CAAA","sourceRoot":""}
|
@@ -5,24 +5,24 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.renderButton = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
9
|
|
10
|
-
|
11
|
-
|
12
|
-
var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
13
11
|
/**
|
14
12
|
* Renders a Button component by passing the state defined props to the appropriate slots.
|
15
13
|
*/
|
16
14
|
|
17
15
|
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
16
|
+
const renderButton = state => {
|
17
|
+
const {
|
18
|
+
slots,
|
19
|
+
slotProps
|
20
|
+
} = react_utilities_1.getSlots(state, ['root', 'icon']);
|
21
|
+
const {
|
22
|
+
iconOnly,
|
23
|
+
iconPosition
|
24
|
+
} = state;
|
25
|
+
return React.createElement(slots.root, Object.assign({}, slotProps.root), iconPosition !== 'after' && React.createElement(slots.icon, Object.assign({}, slotProps.icon)), !iconOnly && state.root.children, iconPosition === 'after' && React.createElement(slots.icon, Object.assign({}, slotProps.icon)));
|
26
26
|
};
|
27
27
|
|
28
28
|
exports.renderButton = renderButton;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button/renderButton.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../src/components/Button/renderButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,YAAY,GAAI,KAAD,IAAuB;AACjD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,EAA6B,CAAC,MAAD,EAAS,MAAT,CAA7B,CAA7B;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAD/B,EAEG,CAAC,QAAD,IAAa,KAAK,CAAC,IAAN,CAAW,QAF3B,EAGG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAH/B,CADF;AAOD,CAXM;;AAAM,OAAA,CAAA,YAAA,GAAY,YAAZ","sourceRoot":""}
|
@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.useButton = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const react_aria_1 = /*#__PURE__*/require("@fluentui/react-aria");
|
9
9
|
|
10
|
-
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
11
11
|
/**
|
12
12
|
* Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
|
13
13
|
* @param props - User provided props to the Button component.
|
@@ -15,32 +15,28 @@ var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
15
15
|
*/
|
16
16
|
|
17
17
|
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
shape = _e === void 0 ? 'rounded' : _e,
|
32
|
-
_f = props.size,
|
33
|
-
size = _f === void 0 ? 'medium' : _f;
|
34
|
-
var iconShorthand = react_utilities_1.resolveShorthand(icon);
|
18
|
+
const useButton = (props, ref) => {
|
19
|
+
const {
|
20
|
+
appearance,
|
21
|
+
as,
|
22
|
+
block = false,
|
23
|
+
disabled = false,
|
24
|
+
disabledFocusable = false,
|
25
|
+
icon,
|
26
|
+
iconPosition = 'before',
|
27
|
+
shape = 'rounded',
|
28
|
+
size = 'medium'
|
29
|
+
} = props;
|
30
|
+
const iconShorthand = react_utilities_1.resolveShorthand(icon);
|
35
31
|
return {
|
36
32
|
// Props passed at the top-level
|
37
|
-
appearance
|
38
|
-
block
|
39
|
-
disabled
|
40
|
-
disabledFocusable
|
41
|
-
iconPosition
|
42
|
-
shape
|
43
|
-
size
|
33
|
+
appearance,
|
34
|
+
block,
|
35
|
+
disabled,
|
36
|
+
disabledFocusable,
|
37
|
+
iconPosition,
|
38
|
+
shape,
|
39
|
+
size,
|
44
40
|
// State calculated from a set of props
|
45
41
|
iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
|
46
42
|
// Slots definition
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button/useButton.ts"],"names":[],"mappings":";;;;;;;AACA,
|
1
|
+
{"version":3,"sources":["../../../src/components/Button/useButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,SAAS,GAAG,CAAC,KAAD,EAAqB,GAArB,KAA2F;AAClH,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,EAFI;AAGJ,IAAA,KAAK,GAAG,KAHJ;AAIJ,IAAA,QAAQ,GAAG,KAJP;AAKJ,IAAA,iBAAiB,GAAG,KALhB;AAMJ,IAAA,IANI;AAOJ,IAAA,YAAY,GAAG,QAPX;AAQJ,IAAA,KAAK,GAAG,SARJ;AASJ,IAAA,IAAI,GAAG;AATH,MAUF,KAVJ;AAWA,QAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,CAAtB;AAEA,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,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,QAAf,KAA2B,CAAC,KAAK,CAAC,QAAnC,CAXZ;AAaL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE;AAFI,KAdP;AAmBL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CACJ,EAAE,IAAI,QADF,EAEJ,YAAA,CAAA,aAAA,CAAc,KAAd,EAAqB;AACnB,MAAA,QAAQ,EAAE,IADS;AAEnB,MAAA,YAAY,EAAE;AACZ;AACA,QAAA,GAAG,EAAE,GAFO;AAGZ,QAAA,IAAI,EAAE;AAHM;AAFK,KAArB,CAFI,CAnBD;AA8BL,IAAA,IAAI,EAAE;AA9BD,GAAP;AAgCD,CA9CM;;AAAM,OAAA,CAAA,SAAA,GAAS,SAAT","sourceRoot":""}
|
@@ -3,13 +3,14 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.useButtonStyles = exports.buttonSpacing = void 0;
|
6
|
+
exports.useButtonStyles = exports.buttonSpacing = exports.buttonClassName = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
|
9
9
|
|
10
|
-
|
11
|
-
// We're tracking these here to determine how we can hoist them.
|
10
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
12
11
|
|
12
|
+
exports.buttonClassName = 'fui-Button'; // TODO: These are named in design specs but not hoisted to global/alias yet.
|
13
|
+
// We're tracking these here to determine how we can hoist them.
|
13
14
|
|
14
15
|
exports.buttonSpacing = {
|
15
16
|
smallest: '2px',
|
@@ -20,7 +21,7 @@ exports.buttonSpacing = {
|
|
20
21
|
larger: '16px'
|
21
22
|
};
|
22
23
|
|
23
|
-
|
24
|
+
const useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
24
25
|
"base": {
|
25
26
|
"Bt984gj": "f122n59",
|
26
27
|
"mc9l5x": "ftuwxu6",
|
@@ -186,7 +187,7 @@ var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
186
187
|
"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);}", ".fb0xa7e:active{outline-style:none;}", ".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);}"]
|
187
188
|
});
|
188
189
|
|
189
|
-
|
190
|
+
const useRootDisabledStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
190
191
|
"base": {
|
191
192
|
"ayd6f0": "fqst6tg",
|
192
193
|
"g2u3we": "f1jj8ep1",
|
@@ -269,7 +270,7 @@ var useRootDisabledStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
269
270
|
"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);}", ".fq67hom:active{cursor:not-allowed;}", ".flt377r:active{background:var(--colorTransparentBackgroundPressed);}", ".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;}"]
|
270
271
|
});
|
271
272
|
|
272
|
-
|
273
|
+
const useRootFocusStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
273
274
|
"base": {
|
274
275
|
"B486eqv": "f2hkw1w",
|
275
276
|
"Bnmjwt4": "flfsvnh",
|
@@ -279,7 +280,7 @@ var useRootFocusStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
279
280
|
"B32s92o": "f4mghqd",
|
280
281
|
"B5hngm5": "fhcq1yo",
|
281
282
|
"Bh48x57": "f19j8a82",
|
282
|
-
"D4py6b":
|
283
|
+
"D4py6b": "f9ycirn",
|
283
284
|
"Bgwpjed": "fpt6wn7"
|
284
285
|
},
|
285
286
|
"circular": {
|
@@ -293,7 +294,7 @@ var useRootFocusStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
293
294
|
"Jopkrh": ["fhoxsto", "f19qf7vm"],
|
294
295
|
"hhrs2v": "f1tl0rof",
|
295
296
|
"B7jbng7": ["f19qf7vm", "fhoxsto"],
|
296
|
-
"D4py6b":
|
297
|
+
"D4py6b": "f15m8qn2"
|
297
298
|
},
|
298
299
|
"square": {
|
299
300
|
"B486eqv": "f2hkw1w",
|
@@ -313,10 +314,10 @@ var useRootFocusStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
313
314
|
}
|
314
315
|
}, {
|
315
316
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"],
|
316
|
-
"d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f4mghqd:focus{outline-width:2px;}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .f9ycirn:focus{box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .
|
317
|
+
"d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f4mghqd:focus{outline-width:2px;}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .f9ycirn:focus{box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}", "[data-keyboard-nav] .f6dohij:focus{border-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .fbugrqt:focus{border-top-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .fhoxsto:focus{border-right-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f19qf7vm:focus{border-left-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f1tl0rof:focus{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f15m8qn2:focus{box-shadow:var(--shadow2),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1x6jsgk:focus{border-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .f1cqgkc0:focus{border-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .fhf9ij9:focus{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .fnsjjqm:focus{border-radius:var(--borderRadiusLarge);}"]
|
317
318
|
});
|
318
319
|
|
319
|
-
|
320
|
+
const useRootIconOnlyStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
320
321
|
"small": {
|
321
322
|
"z8tnut": "f10ra9hq",
|
322
323
|
"z189sj": ["f8wuabp", "fycuoez"],
|
@@ -345,7 +346,7 @@ var useRootIconOnlyStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
345
346
|
"d": [".f10ra9hq{padding-top:4px;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1y2xyjm{padding-bottom:4px;}", ".f107v6xj{min-width:28px;}", ".f17iyk3w{max-width:28px;}", ".fwbmr0d{min-width:32px;}", ".f44c6la{max-width:32px;}", ".f1xp5gbu{padding-top:6px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d7kygh{padding-bottom:6px;}", ".f12clzc2{min-width:40px;}", ".fjy1crr{max-width:40px;}"]
|
346
347
|
});
|
347
348
|
|
348
|
-
|
349
|
+
const useIconStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
349
350
|
"base": {
|
350
351
|
"Bt984gj": "f122n59",
|
351
352
|
"mc9l5x": "ftuwxu6",
|
@@ -370,20 +371,22 @@ var useIconStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
370
371
|
"d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"]
|
371
372
|
});
|
372
373
|
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
374
|
+
const useButtonStyles = state => {
|
375
|
+
const rootStyles = useRootStyles();
|
376
|
+
const rootDisabledStyles = useRootDisabledStyles();
|
377
|
+
const rootFocusStyles = useRootFocusStyles();
|
378
|
+
const rootIconOnlyStyles = useRootIconOnlyStyles();
|
379
|
+
const iconStyles = useIconStyles();
|
380
|
+
const {
|
381
|
+
appearance,
|
382
|
+
block,
|
383
|
+
disabled,
|
384
|
+
disabledFocusable,
|
385
|
+
iconOnly,
|
386
|
+
shape,
|
387
|
+
size
|
388
|
+
} = state;
|
389
|
+
state.root.className = react_make_styles_1.mergeClasses(exports.buttonClassName, // Root styles
|
387
390
|
rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], // Disabled styles
|
388
391
|
(disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
|
389
392
|
rootFocusStyles.base, appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button/useButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,
|
1
|
+
{"version":3,"sources":["../../../src/components/Button/useButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAGa,OAAA,CAAA,eAAA,GAAkB,YAAlB,C,CAEb;AACA;;AACa,OAAA,CAAA,aAAA,GAAgB;AAC3B,EAAA,QAAQ,EAAE,KADiB;AAE3B,EAAA,OAAO,EAAE,KAFkB;AAG3B,EAAA,KAAK,EAAE,KAHoB;AAI3B,EAAA,MAAM,EAAE,KAJmB;AAK3B,EAAA,KAAK,EAAE,MALoB;AAM3B,EAAA,MAAM,EAAE;AANmB,CAAhB;;AASb,MAAM,aAAa,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAuKA,MAAM,qBAAqB,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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,EAA9B;;AA+EA,MAAM,kBAAkB,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA3B;;AA8CA,MAAM,qBAAqB,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA9B;;AAsBA,MAAM,aAAa,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AA0BO,MAAM,eAAe,GAAI,KAAD,IAAoC;AACjE,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,kBAAkB,GAAG,qBAAqB,EAAhD;AACA,QAAM,eAAe,GAAG,kBAAkB,EAA1C;AACA,QAAM,kBAAkB,GAAG,qBAAqB,EAAhD;AACA,QAAM,UAAU,GAAG,aAAa,EAAhC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,KAAd;AAAqB,IAAA,QAArB;AAA+B,IAAA,iBAA/B;AAAkD,IAAA,QAAlD;AAA4D,IAAA,KAA5D;AAAmE,IAAA;AAAnE,MAA4E,KAAlF;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eADqB,EAGrB;AACA,EAAA,UAAU,CAAC,IAJU,EAKrB,KAAK,IAAI,UAAU,CAAC,KALC,EAMrB,UAAU,IAAI,UAAU,CAAC,UAAD,CANH,EAOrB,UAAU,CAAC,IAAD,CAPW,EAQrB,UAAU,CAAC,KAAD,CARW,EAUrB;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,kBAAkB,CAAC,IAXjC,EAYrB,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,kBAAkB,CAAC,UAAD,CAZ9C,EAcrB;AACA,EAAA,eAAe,CAAC,IAfK,EAgBrB,UAAU,KAAK,SAAf,IAA4B,eAAe,CAAC,OAhBvB,EAiBrB,eAAe,CAAC,IAAD,CAjBM,EAkBrB,eAAe,CAAC,KAAD,CAlBM,EAoBrB;AACA,EAAA,QAAQ,IAAI,kBAAkB,CAAC,IAAD,CArBT,EAuBrB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAxBU,CAAvB;;AA2BA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,UAAU,CAAC,IAAxB,EAA8B,UAAU,CAAC,IAAD,CAAxC,EAAgD,KAAK,CAAC,IAAN,CAAW,SAA3D,CAAvB;AACD;;AAED,SAAO,KAAP;AACD,CAzCM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourceRoot":""}
|
@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.CompoundButton = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
9
|
|
10
|
-
|
10
|
+
const renderCompoundButton_1 = /*#__PURE__*/require("./renderCompoundButton");
|
11
11
|
|
12
|
-
|
12
|
+
const useCompoundButton_1 = /*#__PURE__*/require("./useCompoundButton");
|
13
13
|
|
14
|
-
|
14
|
+
const useCompoundButtonStyles_1 = /*#__PURE__*/require("./useCompoundButtonStyles");
|
15
15
|
/**
|
16
16
|
* CompoundButtons are buttons that can have secondary content that adds extra information to the user.
|
17
17
|
*/
|
18
18
|
|
19
19
|
|
20
|
-
exports.CompoundButton = /*#__PURE__*/React.forwardRef(
|
21
|
-
|
20
|
+
exports.CompoundButton = /*#__PURE__*/React.forwardRef((props, ref) => {
|
21
|
+
const state = useCompoundButton_1.useCompoundButton(props, ref);
|
22
22
|
useCompoundButtonStyles_1.useCompoundButtonStyles(state);
|
23
23
|
return renderCompoundButton_1.renderCompoundButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
|
24
24
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,mBAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AAEA,EAAA,yBAAA,CAAA,uBAAA,CAAwB,KAAxB;AAEA,SAAO,sBAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP,CALsG,CAMtG;AACD,CAPuE,CAA3D;AASb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourceRoot":""}
|
@@ -2,4 +2,4 @@ export * from './CompoundButton';
|
|
2
2
|
export * from './CompoundButton.types';
|
3
3
|
export * from './renderCompoundButton';
|
4
4
|
export * from './useCompoundButton';
|
5
|
-
export { useCompoundButtonStyles } from './useCompoundButtonStyles';
|
5
|
+
export { compoundButtonClassName, useCompoundButtonStyles } from './useCompoundButtonStyles';
|
@@ -3,9 +3,9 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.useCompoundButtonStyles = void 0;
|
6
|
+
exports.useCompoundButtonStyles = exports.compoundButtonClassName = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
9
9
|
|
10
10
|
tslib_1.__exportStar(require("./CompoundButton"), exports);
|
11
11
|
|
@@ -17,6 +17,12 @@ tslib_1.__exportStar(require("./useCompoundButton"), exports);
|
|
17
17
|
|
18
18
|
var useCompoundButtonStyles_1 = /*#__PURE__*/require("./useCompoundButtonStyles");
|
19
19
|
|
20
|
+
Object.defineProperty(exports, "compoundButtonClassName", {
|
21
|
+
enumerable: true,
|
22
|
+
get: function () {
|
23
|
+
return useCompoundButtonStyles_1.compoundButtonClassName;
|
24
|
+
}
|
25
|
+
});
|
20
26
|
Object.defineProperty(exports, "useCompoundButtonStyles", {
|
21
27
|
enumerable: true,
|
22
28
|
get: function () {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/CompoundButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,yBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA","sourceRoot":""}
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,yBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,yBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA","sourceRoot":""}
|
@@ -5,24 +5,24 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.renderCompoundButton = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
9
|
|
10
|
-
|
11
|
-
|
12
|
-
var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
13
11
|
/**
|
14
12
|
* Renders a CompoundButton component by passing the state defined props to the appropriate slots.
|
15
13
|
*/
|
16
14
|
|
17
15
|
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
16
|
+
const renderCompoundButton = state => {
|
17
|
+
const {
|
18
|
+
slots,
|
19
|
+
slotProps
|
20
|
+
} = react_utilities_1.getSlots(state, ['root', 'contentContainer', 'icon', 'secondaryContent']);
|
21
|
+
const {
|
22
|
+
iconOnly,
|
23
|
+
iconPosition
|
24
|
+
} = state;
|
25
|
+
return React.createElement(slots.root, Object.assign({}, slotProps.root), iconPosition !== 'after' && React.createElement(slots.icon, Object.assign({}, slotProps.icon)), !iconOnly && React.createElement(slots.contentContainer, Object.assign({}, slotProps.contentContainer), slotProps.root.children, React.createElement(slots.secondaryContent, Object.assign({}, slotProps.secondaryContent))), iconPosition === 'after' && React.createElement(slots.icon, Object.assign({}, slotProps.icon)));
|
26
26
|
};
|
27
27
|
|
28
28
|
exports.renderCompoundButton = renderCompoundButton;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAA+B;AACjE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,EAAqC,CAChE,MADgE,EAEhE,kBAFgE,EAGhE,MAHgE,EAIhE,kBAJgE,CAArC,CAA7B;AAMA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAD/B,EAEG,CAAC,QAAD,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAFF,CAHJ,EAQG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAR/B,CADF;AAYD,CArBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}
|
@@ -5,11 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.useCompoundButton = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
9
9
|
|
10
|
-
|
11
|
-
|
12
|
-
var index_1 = /*#__PURE__*/require("../Button/index");
|
10
|
+
const index_1 = /*#__PURE__*/require("../Button/index");
|
13
11
|
/**
|
14
12
|
* Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
|
15
13
|
* @param props - User provided props to the CompoundButton component.
|
@@ -17,12 +15,13 @@ var index_1 = /*#__PURE__*/require("../Button/index");
|
|
17
15
|
*/
|
18
16
|
|
19
17
|
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
return
|
18
|
+
const useCompoundButton = ({
|
19
|
+
contentContainer,
|
20
|
+
secondaryContent,
|
21
|
+
...props
|
22
|
+
}, ref) => {
|
23
|
+
return { // Button state
|
24
|
+
...index_1.useButton(props, ref),
|
26
25
|
// Slots definition
|
27
26
|
components: {
|
28
27
|
root: 'button',
|
@@ -34,7 +33,7 @@ var useCompoundButton = function (_a, ref) {
|
|
34
33
|
required: true
|
35
34
|
}),
|
36
35
|
secondaryContent: react_utilities_1.resolveShorthand(secondaryContent)
|
37
|
-
}
|
36
|
+
};
|
38
37
|
};
|
39
38
|
|
40
39
|
exports.useCompoundButton = useCompoundButton;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAEA;;;;AAIG;;;AACI,MAAM,iBAAiB,GAAG,CAC/B;AAAE,EAAA,gBAAF;AAAoB,EAAA,gBAApB;AAAsC,KAAG;AAAzC,CAD+B,EAE/B,GAF+B,KAGR;AACvB,SAAO,EACL;AACA,OAAG,OAAA,CAAA,SAAA,CAAU,KAAV,EAAiB,GAAjB,CAFE;AAIL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,gBAAgB,EAAE,MAHR;AAIV,MAAA,gBAAgB,EAAE;AAJR,KALP;AAWL,IAAA,gBAAgB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,gBAAjB,EAAmC;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAnC,CAXb;AAYL,IAAA,gBAAgB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,gBAAjB;AAZb,GAAP;AAcD,CAlBM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}
|