@ringcentral/juno 2.21.2 → 2.22.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Buttons/Button/Button.d.ts +12 -3
- package/components/Buttons/Button/Button.js +19 -11
- package/components/Buttons/Button/styles/StyledButton.js +11 -5
- package/components/Buttons/ButtonGroup/ButtonGroup.js +3 -3
- package/components/Buttons/IconButton/IconButton.d.ts +13 -4
- package/components/Buttons/IconButton/IconButton.js +20 -14
- package/components/Buttons/IconButton/styles/StyledIconButton.js +19 -7
- package/components/Buttons/IconButton/utils/IconButtonUtils.d.ts +1 -1
- package/components/Buttons/IconButton/utils/IconButtonUtils.js +8 -7
- package/components/Buttons/SplitButton/SplitButton.js +5 -5
- package/components/Buttons/SplitButton/styles/StyledSplitButton.js +3 -3
- package/components/Buttons/SplitButton/utils/SplitButtonUtils.js +8 -1
- package/components/Dialer/DialPad/DialPad.d.ts +2 -2
- package/components/Downshift/styles/DownshiftStyle.d.ts +2 -2
- package/components/Forms/Picker/DatePicker/styles/StyledDatePickerHeader.d.ts +2 -2
- package/components/Forms/Picker/DatePicker/styles/StyledYear.d.ts +1 -1
- package/components/Forms/Picker/TimePicker/styles/StyledSelectionItem.d.ts +1 -1
- package/components/Forms/Picker/TimePicker/styles/StyledTimeIconButton.d.ts +1 -1
- package/components/Forms/Picker/styles/PickerBaseIconButton.d.ts +1 -1
- package/components/Forms/Switch/styles/SwitchStyle.js +1 -1
- package/components/Forms/TextField/styles/ClearIconButton.d.ts +2 -2
- package/components/List/ListItem/ListItem.d.ts +9 -3
- package/components/List/ListItem/ListItem.js +14 -10
- package/components/List/ListItem/styles/ListItemStyle.d.ts +2 -1
- package/components/List/ListItem/styles/ListItemStyle.js +16 -6
- package/components/Menu/MenuItem/MenuItem.d.ts +23 -5
- package/components/Menu/MenuItem/MenuItem.js +12 -8
- package/components/Menu/MenuItem/styles/MenuItemStyle.js +2 -2
- package/components/Menu/MenuOption/styles/StyledMenuOption.d.ts +1 -1
- package/components/Menu/SubMenu/SubMenu.d.ts +1 -1
- package/components/TablePagination/styles/TablePaginationStyle.d.ts +6 -4
- package/components/Text/Text.d.ts +1 -1
- package/es6/components/Buttons/Button/Button.js +19 -11
- package/es6/components/Buttons/Button/styles/StyledButton.js +12 -6
- package/es6/components/Buttons/ButtonGroup/ButtonGroup.js +4 -4
- package/es6/components/Buttons/IconButton/IconButton.js +20 -14
- package/es6/components/Buttons/IconButton/styles/StyledIconButton.js +20 -8
- package/es6/components/Buttons/IconButton/utils/IconButtonUtils.js +8 -7
- package/es6/components/Buttons/SplitButton/SplitButton.js +6 -6
- package/es6/components/Buttons/SplitButton/styles/StyledSplitButton.js +3 -3
- package/es6/components/Buttons/SplitButton/utils/SplitButtonUtils.js +8 -1
- package/es6/components/Forms/Switch/styles/SwitchStyle.js +2 -2
- package/es6/components/List/ListItem/ListItem.js +14 -10
- package/es6/components/List/ListItem/styles/ListItemStyle.js +17 -7
- package/es6/components/Menu/MenuItem/MenuItem.js +12 -8
- package/es6/components/Menu/MenuItem/styles/MenuItemStyle.js +2 -2
- package/es6/foundation/styles/focusRing.js +11 -0
- package/es6/foundation/styles/index.js +1 -0
- package/es6/foundation/typings/BaseFocusVariant.js +0 -0
- package/foundation/styles/focusRing.d.ts +2 -0
- package/foundation/styles/focusRing.js +13 -0
- package/foundation/styles/index.d.ts +1 -0
- package/foundation/styles/index.js +1 -0
- package/foundation/typings/BaseFocusVariant.d.ts +7 -0
- package/foundation/typings/BaseFocusVariant.js +2 -0
- package/foundation/typings/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -8,9 +8,8 @@ import { RcCircularProgress } from '../../Progress';
|
|
|
8
8
|
import { withTooltip } from '../../Tooltip';
|
|
9
9
|
import { buttonStyle } from './styles';
|
|
10
10
|
import { getButtonIconSize, RcButtonClasses } from './utils';
|
|
11
|
-
var _RcButton = forwardRef(function (
|
|
11
|
+
var _RcButton = forwardRef(function (props, ref) {
|
|
12
12
|
var _a, _b;
|
|
13
|
-
var props = useThemeProps({ props: inProps, name: 'RcButton' });
|
|
14
13
|
if (process.env.NODE_ENV !== 'production') {
|
|
15
14
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
16
15
|
useDeprecatedCheck(RcButton, props, [
|
|
@@ -21,7 +20,7 @@ var _RcButton = forwardRef(function (inProps, ref) {
|
|
|
21
20
|
},
|
|
22
21
|
]);
|
|
23
22
|
}
|
|
24
|
-
var childrenProp = props.children, classesProp = props.classes, startIconProp = props.startIcon, endIconProp = props.endIcon, loading = props.loading, loadingMode = props.loadingMode, disabled = props.disabled, IconProps = props.IconProps, size = props.size, color = props.color, CircularProgressProps = props.CircularProgressProps, variant = props.variant, disabledVariant = props.disabledVariant, radius = props.radius, keepElevation = props.keepElevation, rest = __rest(props, ["children", "classes", "startIcon", "endIcon", "loading", "loadingMode", "disabled", "IconProps", "size", "color", "CircularProgressProps", "variant", "disabledVariant", "radius", "keepElevation"]);
|
|
23
|
+
var childrenProp = props.children, classesProp = props.classes, startIconProp = props.startIcon, endIconProp = props.endIcon, loading = props.loading, loadingMode = props.loadingMode, disabled = props.disabled, IconProps = props.IconProps, size = props.size, color = props.color, CircularProgressProps = props.CircularProgressProps, variant = props.variant, disabledVariant = props.disabledVariant, radius = props.radius, keepElevation = props.keepElevation, focusVariant = props.focusVariant, disableFocusRippleProp = props.disableFocusRipple, rest = __rest(props, ["children", "classes", "startIcon", "endIcon", "loading", "loadingMode", "disabled", "IconProps", "size", "color", "CircularProgressProps", "variant", "disabledVariant", "radius", "keepElevation", "focusVariant", "disableFocusRipple"]);
|
|
25
24
|
var theme = useTheme();
|
|
26
25
|
var innerRef = useRef(null);
|
|
27
26
|
var buttonRef = useForkRef(innerRef, ref);
|
|
@@ -90,16 +89,25 @@ var _RcButton = forwardRef(function (inProps, ref) {
|
|
|
90
89
|
useLayoutEffect(function () {
|
|
91
90
|
removeClassName(innerRef, 'MuiButton-iconSizeMedium');
|
|
92
91
|
});
|
|
93
|
-
|
|
92
|
+
var disableFocusRipple = disableFocusRippleProp !== null && disableFocusRippleProp !== void 0 ? disableFocusRippleProp : focusVariant === 'focusRing';
|
|
93
|
+
return (React.createElement(MuiButton, __assign({ ref: buttonRef, disabled: disabled || loading, variant: isPlain ? undefined : variant, disableRipple: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.props) === null || _a === void 0 ? void 0 : _a.MuiButton) === null || _b === void 0 ? void 0 : _b.disableRipple) || isPlain, startIcon: startIcon, endIcon: endIcon, classes: classes, disableFocusRipple: disableFocusRipple }, rest), loading && isReplace ? loadingElm : childrenProp));
|
|
94
94
|
});
|
|
95
|
+
export var RcButtonDefaultSize = 'large';
|
|
96
|
+
export var RcButtonDefaultColor = 'primary';
|
|
97
|
+
export var RcButtonDefaultVariant = 'contained';
|
|
95
98
|
/** @release */
|
|
96
|
-
var RcButton = styled(withTooltip(_RcButton))(
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
99
|
+
var RcButton = styled(withTooltip(_RcButton)).attrs(function (inProps) {
|
|
100
|
+
var _a = useThemeProps({ props: inProps, name: 'RcButton' }),
|
|
101
|
+
// @ts-ignore
|
|
102
|
+
theme = _a.theme,
|
|
103
|
+
// Omit className, prevent duplicate className
|
|
104
|
+
className = _a.className, _b = _a.size, size = _b === void 0 ? RcButtonDefaultSize : _b, _c = _a.color, color = _c === void 0 ? RcButtonDefaultColor : _c, _d = _a.variant, variant = _d === void 0 ? RcButtonDefaultVariant : _d, _e = _a.loadingMode, loadingMode = _e === void 0 ? 'replace' : _e, _f = _a.focusVariant, focusVariant = _f === void 0 ? 'ripple' : _f, rest = __rest(_a, ["theme", "className", "size", "color", "variant", "loadingMode", "focusVariant"]);
|
|
105
|
+
return __assign({ size: size,
|
|
106
|
+
color: color,
|
|
107
|
+
variant: variant,
|
|
108
|
+
loadingMode: loadingMode,
|
|
109
|
+
focusVariant: focusVariant }, rest);
|
|
110
|
+
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), buttonStyle);
|
|
103
111
|
RcButton.displayName = 'RcButton';
|
|
104
112
|
export { RcButton };
|
|
105
113
|
var templateObject_1;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __makeTemplateObject } from "tslib";
|
|
2
|
-
import { css,
|
|
2
|
+
import { css, focusVisible, getParsePaletteColor, nonTouchHoverMedia, palette2, paletteContrastText, px, radius, setOpacity, spacing, typography, focusRing, } from '../../../../foundation';
|
|
3
3
|
import { RcButtonClasses, RcButtonColors, RcButtonHeights, RcButtonIconSpace, RcButtonMinWidths, RcButtonPadding, RcButtonTextColors, RcButtonTypographies, } from '../utils';
|
|
4
4
|
export var buttonColor = function (_a) {
|
|
5
5
|
var color = _a.color;
|
|
@@ -17,22 +17,28 @@ export var buttonTextColor = function (props) {
|
|
|
17
17
|
export var buttonHoverColor = function (props) {
|
|
18
18
|
return setOpacity(buttonColor(props), '08');
|
|
19
19
|
};
|
|
20
|
+
var textButtonFocusVisibleColor = function (props) {
|
|
21
|
+
return setOpacity(buttonColor(props), '08');
|
|
22
|
+
};
|
|
20
23
|
var containedButtonHoverColor = function (props) {
|
|
21
24
|
return setOpacity(buttonColor(props), '08', true);
|
|
22
25
|
};
|
|
23
26
|
export var buttonStyle = function (props) {
|
|
24
|
-
var variant = props.variant, size = props.size, radiusProp = props.radius, keepElevation = props.keepElevation, loading = props.loading, disabled = props.disabled, disabledVariant = props.disabledVariant;
|
|
27
|
+
var variant = props.variant, size = props.size, radiusProp = props.radius, keepElevation = props.keepElevation, loading = props.loading, disabled = props.disabled, disabledVariant = props.disabledVariant, focusVariant = props.focusVariant;
|
|
25
28
|
var isMask = loading || (disabled && disabledVariant === 'mask');
|
|
26
29
|
var textDisabledColor = !isMask ? palette2('disabled', 'f02') : undefined;
|
|
27
30
|
var plainTextColor = plainButtonTextColor(props);
|
|
28
31
|
var iconSpace = spacing(RcButtonIconSpace[size]);
|
|
29
32
|
var isPlain = variant === 'plain';
|
|
30
|
-
return css(
|
|
33
|
+
return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n text-transform: none;\n ", ";\n text-align: center;\n box-shadow: ", ";\n border-radius: ", ";\n\n ", ";\n\n ", ";\n\n .", " {\n margin-right: ", ";\n\n ", ";\n }\n\n .", " {\n margin-left: ", ";\n\n ", ";\n }\n\n &.", " {\n color: ", ";\n\n &.", " {\n color: ", ";\n }\n\n ", "\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n ", ";\n }\n\n &.", " {\n color: ", ";\n background-color: ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n ", "\n\n ", "\n }\n\n &.", " {\n color: ", ";\n border-color: ", ";\n padding: ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n &.", " {\n color: ", ";\n border-color: ", ";\n }\n\n ", "\n\n &:after {\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n border: 1px solid transparent;\n }\n }\n "], ["\n text-transform: none;\n ", ";\n text-align: center;\n box-shadow: ", ";\n border-radius: ", ";\n\n ",
|
|
31
34
|
";\n\n ",
|
|
32
35
|
";\n\n .", " {\n margin-right: ", ";\n\n ",
|
|
33
36
|
";\n }\n\n .", " {\n margin-left: ", ";\n\n ",
|
|
34
|
-
";\n }\n\n &.", " {\n color: ", ";\n\n &.", " {\n color: ", ";\n }\n\n ",
|
|
37
|
+
";\n }\n\n &.", " {\n color: ", ";\n\n &.", " {\n color: ", ";\n }\n\n ",
|
|
38
|
+
"\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n ",
|
|
35
39
|
";\n }\n\n &.", " {\n color: ", ";\n background-color: ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n ",
|
|
36
|
-
"\n
|
|
40
|
+
"\n\n ",
|
|
41
|
+
"\n }\n\n &.", " {\n color: ", ";\n border-color: ", ";\n padding: ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n &.", " {\n color: ", ";\n border-color: ", ";\n }\n\n ",
|
|
42
|
+
"\n\n &:after {\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n border: 1px solid transparent;\n }\n }\n "])), typography(RcButtonTypographies[size], true), !keepElevation && 'unset', radiusProp && radius(radiusProp), isMask && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n display: block;\n background: ", ";\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n "], ["\n &:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n display: block;\n background: ", ";\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n "])), setOpacity(palette2('neutral', 'b01'), '32'), radius(radiusProp !== null && radiusProp !== void 0 ? radiusProp : 'lg')), !isPlain && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n min-width: ", ";\n min-height: ", ";\n padding: ", ";\n "], ["\n min-width: ", ";\n min-height: ", ";\n padding: ", ";\n "])), px(RcButtonMinWidths[size]), px(RcButtonHeights[size]), spacing(0, RcButtonPadding[size])), RcButtonClasses.startIcon, iconSpace, isPlain && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-left: 0;\n "], ["\n margin-left: 0;\n "]))), RcButtonClasses.endIcon, iconSpace, isPlain && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-right: 0;\n "], ["\n margin-right: 0;\n "]))), RcButtonClasses.text, plainButtonTextColor, RcButtonClasses.disabled, textDisabledColor, focusVariant === 'focusRing' && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", " {\n ", "\n background-color: ", ";\n }\n "], ["\n ", " {\n ", "\n background-color: ", ";\n }\n "])), focusVisible, focusRing('normal'), textButtonFocusVisibleColor), nonTouchHoverMedia, buttonHoverColor, isPlain && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding: ", ";\n min-width: unset;\n line-height: 1;\n\n ", " {\n &:hover {\n color: ", ";\n background-color: transparent;\n }\n }\n\n ", " {\n ", "\n background-color: transparent;\n }\n\n &:active {\n &.", " {\n color: ", ";\n }\n }\n "], ["\n padding: ", ";\n min-width: unset;\n line-height: 1;\n\n ", " {\n &:hover {\n color: ", ";\n background-color: transparent;\n }\n }\n\n ", " {\n ", "\n background-color: transparent;\n }\n\n &:active {\n &.", " {\n color: ", ";\n }\n }\n "])), spacing(1), nonTouchHoverMedia, setOpacity(plainTextColor, '80'), focusVisible, focusRing('inset'), RcButtonClasses.text, setOpacity(plainTextColor, '64')), RcButtonClasses.contained, buttonTextColor, buttonColor, nonTouchHoverMedia, containedButtonHoverColor, focusVariant === 'focusRing' && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", " {\n ", "\n box-shadow: unset;\n }\n "], ["\n ", " {\n ", "\n box-shadow: unset;\n }\n "])), focusVisible, focusRing('normal')), !isMask && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n &.", " {\n background-color: ", ";\n color: ", ";\n }\n "], ["\n &.", " {\n background-color: ", ";\n color: ", ";\n }\n "])), RcButtonClasses.disabled, palette2('disabled', 'b01'), palette2('disabled', 'f01')), RcButtonClasses.outlined, plainButtonTextColor, plainButtonTextColor, spacing(0, RcButtonPadding[size] - 0.25), nonTouchHoverMedia, buttonHoverColor, RcButtonClasses.disabled, textDisabledColor, textDisabledColor, focusVariant === 'focusRing' && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), focusVisible, focusRing('normal')));
|
|
37
43
|
};
|
|
38
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
44
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { __assign, __makeTemplateObject } from "tslib";
|
|
1
|
+
import { __assign, __makeTemplateObject, __rest } from "tslib";
|
|
2
2
|
import React, { forwardRef } from 'react';
|
|
3
3
|
import MuiButtonGroup from '@material-ui/core/ButtonGroup';
|
|
4
4
|
import { styled, useThemeProps } from '../../../foundation';
|
|
5
|
+
import { RcButtonDefaultSize, RcButtonDefaultColor, RcButtonDefaultVariant, } from '../Button';
|
|
5
6
|
var _RcButtonGroup = forwardRef(function (inProps, ref) {
|
|
6
|
-
var
|
|
7
|
-
return React.createElement(MuiButtonGroup, __assign({ ref: ref },
|
|
7
|
+
var rest = __rest(useThemeProps({ props: inProps, name: 'RcButtonGroup' }), []);
|
|
8
|
+
return (React.createElement(MuiButtonGroup, __assign({ ref: ref, size: RcButtonDefaultSize, color: RcButtonDefaultColor, variant: RcButtonDefaultVariant }, rest)));
|
|
8
9
|
});
|
|
9
10
|
var RcButtonGroup = styled(_RcButtonGroup)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
|
|
10
|
-
RcButtonGroup.defaultProps = {};
|
|
11
11
|
export { RcButtonGroup };
|
|
12
12
|
var templateObject_1;
|
|
@@ -8,19 +8,19 @@ import { RcButtonBase } from '../ButtonBase';
|
|
|
8
8
|
import { rcIconButtonWarning, } from './deprecated/IconButtonProps';
|
|
9
9
|
import { iconButtonStyle } from './styles';
|
|
10
10
|
import { RcIconButtonClasses, RcIconButtonTouchRippleClasses } from './utils';
|
|
11
|
-
var _RcIconButton = memo(forwardRef(function (
|
|
11
|
+
var _RcIconButton = memo(forwardRef(function (props, ref) {
|
|
12
12
|
var _a;
|
|
13
|
-
var props = useThemeProps({ props: inProps, name: 'RcIconButton' });
|
|
14
13
|
if (process.env.NODE_ENV !== 'production') {
|
|
15
14
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
16
15
|
useDeprecatedCheck(RcIconButton, props, rcIconButtonWarning);
|
|
17
16
|
}
|
|
18
|
-
var _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, _c = props.IconProps, IconProps = _c === void 0 ? {} : _c, className = props.className, classesProp = props.classes, children = props.children, title = props.title, disabledFakeBorder = props.disabledFakeBorder, symbol = props.symbol, disabled = props.disabled, invisible = props.invisible, type = props.type, loading = props.loading, TouchRippleProps = props.TouchRippleProps, variant = props.variant, CircularProgressProps = props.CircularProgressProps, color = props.color, shouldPersistBg = props.shouldPersistBg, stretchIcon = props.stretchIcon, iconColor = props.iconColor, iconSize = props.iconSize, disableTouchRipple = props.disableTouchRipple, useColorWhenDisabled = props.useColorWhenDisabled, size = props.size, radius = props.radius, elevation = props.elevation, activeElevation = props.activeElevation, aRef = props.aRef, tooltipTitle = props.tooltipTitle, tooltipForceHide = props.tooltipForceHide, disableToolTip = props.disableToolTip, alwaysEnableTooltip = props.alwaysEnableTooltip, tooltipPlacement = props.tooltipPlacement, ariaLabel = props.ariaLabel, popperProps = props.popperProps, externalLink = props.externalLink, download = props.download, href = props.href, rest = __rest(props, ["buttonRef", "IconProps", "className", "classes", "children", "title", "disabledFakeBorder", "symbol", "disabled", "invisible", "type", "loading", "TouchRippleProps", "variant", "CircularProgressProps", "color", "shouldPersistBg", "stretchIcon", "iconColor", "iconSize", "disableTouchRipple", "useColorWhenDisabled", "size", "radius", "elevation", "activeElevation", "aRef", "tooltipTitle", "tooltipForceHide", "disableToolTip", "alwaysEnableTooltip", "tooltipPlacement", "ariaLabel", "popperProps", "externalLink", "download", "href"]);
|
|
17
|
+
var _b = props.buttonRef, buttonRef = _b === void 0 ? ref : _b, _c = props.IconProps, IconProps = _c === void 0 ? {} : _c, className = props.className, classesProp = props.classes, children = props.children, title = props.title, disabledFakeBorder = props.disabledFakeBorder, symbol = props.symbol, disabled = props.disabled, invisible = props.invisible, type = props.type, loading = props.loading, TouchRippleProps = props.TouchRippleProps, variant = props.variant, CircularProgressProps = props.CircularProgressProps, color = props.color, shouldPersistBg = props.shouldPersistBg, stretchIcon = props.stretchIcon, iconColor = props.iconColor, iconSize = props.iconSize, disableTouchRipple = props.disableTouchRipple, useColorWhenDisabled = props.useColorWhenDisabled, size = props.size, radius = props.radius, elevation = props.elevation, activeElevation = props.activeElevation, aRef = props.aRef, tooltipTitle = props.tooltipTitle, tooltipForceHide = props.tooltipForceHide, disableToolTip = props.disableToolTip, alwaysEnableTooltip = props.alwaysEnableTooltip, tooltipPlacement = props.tooltipPlacement, ariaLabel = props.ariaLabel, popperProps = props.popperProps, externalLink = props.externalLink, download = props.download, href = props.href, focusVariant = props.focusVariant, rest = __rest(props, ["buttonRef", "IconProps", "className", "classes", "children", "title", "disabledFakeBorder", "symbol", "disabled", "invisible", "type", "loading", "TouchRippleProps", "variant", "CircularProgressProps", "color", "shouldPersistBg", "stretchIcon", "iconColor", "iconSize", "disableTouchRipple", "useColorWhenDisabled", "size", "radius", "elevation", "activeElevation", "aRef", "tooltipTitle", "tooltipForceHide", "disableToolTip", "alwaysEnableTooltip", "tooltipPlacement", "ariaLabel", "popperProps", "externalLink", "download", "href", "focusVariant"]);
|
|
19
18
|
var theme = useTheme();
|
|
20
19
|
var isOutline = variant === 'outline';
|
|
21
20
|
var isContained = variant === 'contained';
|
|
22
21
|
var isInverse = variant === 'inverse';
|
|
23
22
|
var isPlain = variant === 'plain';
|
|
23
|
+
var isRound = variant === 'round';
|
|
24
24
|
var classes = useMemo(function () { return combineClasses(RcIconButtonClasses, classesProp); }, [classesProp]);
|
|
25
25
|
var IconClassName = clsx(className, classes.root, (_a = {},
|
|
26
26
|
_a[classes.disabled] = disabled,
|
|
@@ -28,6 +28,7 @@ var _RcIconButton = memo(forwardRef(function (inProps, ref) {
|
|
|
28
28
|
_a[classes.outline] = isOutline,
|
|
29
29
|
_a[classes.contained] = isContained,
|
|
30
30
|
_a[classes.inverse] = isInverse,
|
|
31
|
+
_a[classes.round] = isRound,
|
|
31
32
|
_a));
|
|
32
33
|
var iconButton = (function () {
|
|
33
34
|
var _a, _b;
|
|
@@ -52,17 +53,22 @@ var _RcIconButton = memo(forwardRef(function (inProps, ref) {
|
|
|
52
53
|
}
|
|
53
54
|
return iconButton;
|
|
54
55
|
}));
|
|
55
|
-
var RcIconButton = styled(withTooltip(_RcIconButton))(
|
|
56
|
+
var RcIconButton = styled(withTooltip(_RcIconButton)).attrs(function (inProps) {
|
|
57
|
+
var _a = useThemeProps({ props: inProps, name: 'RcIconButton' }),
|
|
58
|
+
// @ts-ignore
|
|
59
|
+
theme = _a.theme,
|
|
60
|
+
// Omit className, prevent duplicate className
|
|
61
|
+
className = _a.className, _b = _a.variant, variant = _b === void 0 ? 'round' : _b, _c = _a.color, color = _c === void 0 ? 'neutral.f04' : _c, _d = _a.size, size = _d === void 0 ? 'medium' : _d, _e = _a.type, type = _e === void 0 ? 'button' : _e, _f = _a.focusRipple, focusRipple = _f === void 0 ? true : _f, _g = _a.disableTouchRipple, disableTouchRipple = _g === void 0 ? true : _g, _h = _a.classes, classes = _h === void 0 ? {} : _h, _j = _a.useRcTooltip, useRcTooltip = _j === void 0 ? true : _j, _k = _a.focusVariant, focusVariant = _k === void 0 ? 'highlight' : _k, rest = __rest(_a, ["theme", "className", "variant", "color", "size", "type", "focusRipple", "disableTouchRipple", "classes", "useRcTooltip", "focusVariant"]);
|
|
62
|
+
return __assign({ variant: variant,
|
|
63
|
+
color: color,
|
|
64
|
+
size: size,
|
|
65
|
+
type: type,
|
|
66
|
+
focusRipple: focusRipple,
|
|
67
|
+
disableTouchRipple: disableTouchRipple,
|
|
68
|
+
classes: classes,
|
|
69
|
+
useRcTooltip: useRcTooltip,
|
|
70
|
+
focusVariant: focusVariant }, rest);
|
|
71
|
+
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), iconButtonStyle);
|
|
56
72
|
RcIconButton.displayName = 'RcIconButton';
|
|
57
|
-
RcIconButton.defaultProps = {
|
|
58
|
-
variant: 'round',
|
|
59
|
-
color: 'neutral.f04',
|
|
60
|
-
size: 'medium',
|
|
61
|
-
type: 'button',
|
|
62
|
-
focusRipple: true,
|
|
63
|
-
disableTouchRipple: true,
|
|
64
|
-
classes: {},
|
|
65
|
-
useRcTooltip: true,
|
|
66
|
-
};
|
|
67
73
|
export { RcIconButton };
|
|
68
74
|
var templateObject_1;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __makeTemplateObject } from "tslib";
|
|
2
|
-
import { backgroundTransition, css, focusVisible, focusVisibleColor, getParsePaletteColor, nonTouchHoverMedia, palette2, paletteContrastText, px, radius, setOpacity, shadows, fakeBorder, opacity, } from '../../../../foundation';
|
|
2
|
+
import { backgroundTransition, css, focusVisible, focusVisibleColor, getParsePaletteColor, nonTouchHoverMedia, palette2, paletteContrastText, px, radius, setOpacity, shadows, fakeBorder, opacity, focusRing, } from '../../../../foundation';
|
|
3
3
|
import { RcIconButtonClasses, RcIconButtonFocusVisibleInsetSize, RcIconButtonSizes, RcIconButtonTouchRippleClasses, } from '../utils';
|
|
4
4
|
export var getFocusVisibleInsetSize = function (_a) {
|
|
5
5
|
var size = _a.size;
|
|
@@ -14,17 +14,19 @@ var containedVariantTransitions = function (_a) {
|
|
|
14
14
|
};
|
|
15
15
|
export var plainIconButtonFocusStyle = function (_a) {
|
|
16
16
|
var _b = (_a === void 0 ? {} : _a).radius, radiusProp = _b === void 0 ? 'circle' : _b;
|
|
17
|
-
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:after {\n content: '';\n position: absolute;\n ", ";\n box-shadow: 0 0 0
|
|
17
|
+
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n &:after {\n content: '';\n position: absolute;\n ", ";\n box-shadow: 0 0 0 2px ", ";\n border-radius: ", ";\n pointer-events: none;\n z-index: 1;\n }\n"], ["\n &:after {\n content: '';\n position: absolute;\n ", ";\n box-shadow: 0 0 0 2px ", ";\n border-radius: ", ";\n pointer-events: none;\n z-index: 1;\n }\n"])), getFocusVisibleInsetSize, focusVisibleColor, radius(radiusProp));
|
|
18
18
|
};
|
|
19
19
|
export var iconButtonStyle = function (_a) {
|
|
20
|
-
var variant = _a.variant, size = _a.size, stretchIcon = _a.stretchIcon, color = _a.color, disabled = _a.disabled, useColorWhenDisabled = _a.useColorWhenDisabled, shouldPersistBg = _a.shouldPersistBg, radiusProp = _a.radius, disableRipple = _a.disableRipple, elevation = _a.elevation, disabledFakeBorder = _a.disabledFakeBorder, activeElevation = _a.activeElevation, _b = _a.IconProps, IconProps = _b === void 0 ? {} : _b;
|
|
20
|
+
var variant = _a.variant, size = _a.size, stretchIcon = _a.stretchIcon, color = _a.color, disabled = _a.disabled, useColorWhenDisabled = _a.useColorWhenDisabled, shouldPersistBg = _a.shouldPersistBg, radiusProp = _a.radius, disableRipple = _a.disableRipple, elevation = _a.elevation, disabledFakeBorder = _a.disabledFakeBorder, activeElevation = _a.activeElevation, _b = _a.IconProps, IconProps = _b === void 0 ? {} : _b, focusVariant = _a.focusVariant;
|
|
21
21
|
var iconColor = IconProps.color;
|
|
22
|
+
var useFocusRing = focusVariant === 'focusRing';
|
|
22
23
|
var iconSize = RcIconButtonSizes[size];
|
|
23
24
|
var isCircle = ['plain', 'round', 'inverse', 'contained'].includes(variant);
|
|
24
25
|
var isPlain = variant === 'plain';
|
|
25
26
|
var isInverse = variant === 'inverse';
|
|
26
27
|
var isOutline = variant === 'outline';
|
|
27
28
|
var isContained = variant === 'contained';
|
|
29
|
+
var isRound = variant === 'round';
|
|
28
30
|
var containerSize = px(isPlain ? iconSize : iconSize * 2);
|
|
29
31
|
var mainColor = getParsePaletteColor(color);
|
|
30
32
|
var containedColor = iconColor
|
|
@@ -41,11 +43,11 @@ export var iconButtonStyle = function (_a) {
|
|
|
41
43
|
radius: currRadius,
|
|
42
44
|
pseudo: true,
|
|
43
45
|
});
|
|
44
|
-
return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n width: ", ";\n height: ", ";\n color: ", ";\n border-radius: ", ";\n transition: ", ";\n cursor: ", ";\n background-color: ", ";\n box-shadow: ", ";\n\n ", ";\n\n font-size: ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n }\n\n ", " {\n background-color: ", ";\n\n &:active {\n color: ", ";\n }\n\n ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n color: ", ";\n\n background-color: ", ";\n }\n\n &.", " {\n opacity: 0;\n visibility: hidden;\n width: 0;\n height: 0;\n }\n\n &.", " {\n border: 1px solid ", ";\n }\n\n &.", " {\n color: ", ";\n background-color: ", ";\n\n &.", " {\n ", "\n }\n\n &:before {\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n border-radius: ", ";\n position: absolute;\n }\n\n ", ";\n\n ", " {\n &:hover {\n &:before {\n background-color: ", ";\n }\n\n color: ", ";\n }\n }\n\n ", " {\n &:before {\n background-color: ", ";\n }\n\n color: ", ";\n }\n\n &:active {\n ", "\n\n color: ", ";\n }\n }\n\n &.", " {\n ", ";\n }\n\n .", " {\n border-radius: 0;\n animation-name: none;\n opacity: 0;\n }\n\n ", "\n "], ["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n width: ", ";\n height: ", ";\n color: ", ";\n border-radius: ", ";\n transition: ", ";\n cursor: ", ";\n background-color: ", ";\n box-shadow: ", ";\n\n ",
|
|
46
|
+
return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n width: ", ";\n height: ", ";\n color: ", ";\n border-radius: ", ";\n transition: ", ";\n cursor: ", ";\n background-color: ", ";\n box-shadow: ", ";\n\n ", ";\n\n font-size: ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n }\n\n ", " {\n background-color: ", ";\n\n ", "\n\n &:active {\n color: ", ";\n }\n\n ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n color: ", ";\n\n background-color: ", ";\n }\n\n &.", " {\n opacity: 0;\n visibility: hidden;\n width: 0;\n height: 0;\n }\n\n &.", " {\n border: 1px solid ", ";\n }\n\n &.", " {\n color: ", ";\n background-color: ", ";\n\n &.", " {\n ", "\n }\n\n &:before {\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n border-radius: ", ";\n position: absolute;\n }\n\n ", ";\n\n ", " {\n &:hover {\n &:before {\n background-color: ", ";\n }\n\n color: ", ";\n }\n }\n\n ", " {\n &:before {\n background-color: ", ";\n }\n\n color: ", ";\n }\n\n &:active {\n ", "\n\n color: ", ";\n }\n }\n\n &.", " {\n ", ";\n }\n\n .", " {\n border-radius: 0;\n animation-name: none;\n opacity: 0;\n }\n\n ", "\n "], ["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n width: ", ";\n height: ", ";\n color: ", ";\n border-radius: ", ";\n transition: ", ";\n cursor: ", ";\n background-color: ", ";\n box-shadow: ", ";\n\n ",
|
|
45
47
|
";\n\n font-size: ",
|
|
46
48
|
";\n\n ", " {\n &:hover {\n background-color: ",
|
|
47
49
|
";\n\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n }\n\n ", " {\n background-color: ",
|
|
48
|
-
";\n\n &:active {\n color: ", ";\n }\n\n ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n color: ",
|
|
50
|
+
";\n\n ", "\n\n &:active {\n color: ", ";\n }\n\n ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n color: ",
|
|
49
51
|
";\n\n background-color: ", ";\n }\n\n &.", " {\n opacity: 0;\n visibility: hidden;\n width: 0;\n height: 0;\n }\n\n &.", " {\n border: 1px solid ", ";\n }\n\n &.", " {\n color: ", ";\n background-color: ", ";\n\n &.", " {\n ",
|
|
50
52
|
"\n }\n\n &:before {\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n border-radius: ", ";\n position: absolute;\n }\n\n ", ";\n\n ", " {\n &:hover {\n &:before {\n background-color: ", ";\n }\n\n color: ", ";\n }\n }\n\n ", " {\n &:before {\n background-color: ", ";\n }\n\n color: ", ";\n }\n\n &:active {\n ",
|
|
51
53
|
"\n\n color: ", ";\n }\n }\n\n &.", " {\n ", ";\n }\n\n .", " {\n border-radius: 0;\n animation-name: none;\n opacity: 0;\n }\n\n "
|
|
@@ -62,9 +64,19 @@ export var iconButtonStyle = function (_a) {
|
|
|
62
64
|
? iconSize * 1.2 // keep size same as before
|
|
63
65
|
: iconSize), nonTouchHoverMedia, isPlain
|
|
64
66
|
? 'transparent'
|
|
65
|
-
: setOpacity(mainColor, isInverse ? '24' : '08'), setOpacity(mainColor, '88'), mainColor, focusVisible,
|
|
66
|
-
|
|
67
|
-
|
|
67
|
+
: setOpacity(mainColor, isInverse ? '24' : '08'), setOpacity(mainColor, '88'), mainColor, focusVisible, function () {
|
|
68
|
+
if (useFocusRing) {
|
|
69
|
+
if (isRound)
|
|
70
|
+
return 'transparent';
|
|
71
|
+
if (isInverse)
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
if (isPlain)
|
|
75
|
+
return 'transparent';
|
|
76
|
+
if (isInverse)
|
|
77
|
+
return setOpacity(mainColor, '32');
|
|
78
|
+
return setOpacity(mainColor, '16');
|
|
79
|
+
}, useFocusRing && (isRound || isInverse) && focusRing('inset'), setOpacity(mainColor, '88'), isPlain && plainIconButtonFocusStyle({ radius: currRadius }), RcIconButtonClasses.persistBg, persistBgColor, RcIconButtonClasses.disabled, useColorWhenDisabled
|
|
68
80
|
? setOpacity(mainColor, '32')
|
|
69
81
|
: palette2('disabled', 'f02'), isInverse && setOpacity(mainColor, '12'), RcIconButtonClasses.invisible, RcIconButtonClasses.outline, palette2('neutral', 'l03'), RcIconButtonClasses.contained, containedColor, mainColor, RcIconButtonClasses.disabled, function () {
|
|
70
82
|
if (useColorWhenDisabled)
|
|
@@ -7,16 +7,17 @@ export var RcIconButtonClasses = RcClasses([
|
|
|
7
7
|
'outline',
|
|
8
8
|
'contained',
|
|
9
9
|
'inverse',
|
|
10
|
+
'round',
|
|
10
11
|
'persistBg',
|
|
11
12
|
], 'RcIconButton');
|
|
12
13
|
export var RcIconButtonTouchRippleClasses = RcClasses(['ripplePulsate', 'child'], 'RcIconButtonTouchRipple');
|
|
13
14
|
export var RcIconButtonSizes = omit(RcIconSizes, ['inherit']);
|
|
14
15
|
export var RcIconButtonFocusVisibleInsetSize = {
|
|
15
|
-
xxxlarge:
|
|
16
|
-
xxlarge:
|
|
17
|
-
xlarge:
|
|
18
|
-
large:
|
|
19
|
-
medium:
|
|
20
|
-
small:
|
|
21
|
-
xsmall:
|
|
16
|
+
xxxlarge: 6,
|
|
17
|
+
xxlarge: 5,
|
|
18
|
+
xlarge: 5,
|
|
19
|
+
large: 4,
|
|
20
|
+
medium: 3,
|
|
21
|
+
small: 2,
|
|
22
|
+
xsmall: 2,
|
|
22
23
|
};
|
|
@@ -3,7 +3,7 @@ import React, { forwardRef, useMemo, useRef, useState, } from 'react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { checkDefaultPrevented, combineClasses, combineProps, logInDev, omit, styled, useEventCallback, useEver, useForkRef, useTheme, useThemeProps, } from '../../../foundation';
|
|
5
5
|
import { RcMenu } from '../../Menu/Menu';
|
|
6
|
-
import { RcButton } from '../Button';
|
|
6
|
+
import { RcButtonDefaultVariant, RcButtonDefaultSize, RcButtonDefaultColor, RcButton, } from '../Button';
|
|
7
7
|
import { RcButtonGroup } from '../ButtonGroup';
|
|
8
8
|
import { splitButtonStyle, StyledArrowIcon } from './styles';
|
|
9
9
|
import { getVariant, RcSplitButtonClasses, RcSplitButtonTouchRippleClasses, variantIsHandler, } from './utils';
|
|
@@ -155,17 +155,17 @@ var _RcSplitButton = forwardRef(function (inProps, ref) {
|
|
|
155
155
|
variantIs(['plain', 'plainIcon']) }, rest, { className: clsx(className, (_a = {},
|
|
156
156
|
_a[RcSplitButtonClasses.menuOpen] = isMenuOpen,
|
|
157
157
|
_a)), innerRef: splitRef, classes: classes }),
|
|
158
|
-
React.createElement(RcButton, __assign({}, _ActionButtonProps)),
|
|
159
|
-
React.createElement(RcButton, __assign({ "aria-haspopup": "listbox" }, _ControlButtonProps),
|
|
158
|
+
React.createElement(RcButton, __assign({}, _ActionButtonProps, { focusVariant: "ripple" })),
|
|
159
|
+
React.createElement(RcButton, __assign({ "aria-haspopup": "listbox" }, _ControlButtonProps, { focusVariant: "ripple" }),
|
|
160
160
|
React.createElement(StyledArrowIcon, __assign({ open: isMenuOpen, size: variantIs(['round', 'plainIcon']) ? size : toButtonSize }, ArrowIconProps)))),
|
|
161
161
|
isMenuEverOpen && (React.createElement(RcMenu, __assign({}, MenuProps, { anchorEl: anchorEl, open: isMenuOpen, onClose: handleClose }), children))));
|
|
162
162
|
});
|
|
163
163
|
var RcSplitButton = styled(_RcSplitButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), splitButtonStyle);
|
|
164
164
|
RcSplitButton.displayName = 'RcSplitButton';
|
|
165
165
|
RcSplitButton.defaultProps = {
|
|
166
|
-
size:
|
|
167
|
-
color:
|
|
168
|
-
variant:
|
|
166
|
+
size: RcButtonDefaultSize,
|
|
167
|
+
color: RcButtonDefaultColor,
|
|
168
|
+
variant: RcButtonDefaultVariant,
|
|
169
169
|
ControlButtonProps: {},
|
|
170
170
|
ActionButtonProps: {},
|
|
171
171
|
MenuProps: {},
|
|
@@ -38,7 +38,7 @@ var iconButtonStyle = function (_a) {
|
|
|
38
38
|
var width = px(currIconSize);
|
|
39
39
|
return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n .", " {\n &.", " {\n min-width: auto;\n ", ";\n\n ", " {\n margin-right: 0;\n }\n }\n\n &.", " {\n min-width: ", ";\n width: ", ";\n }\n }\n "], ["\n .", " {\n &.", " {\n min-width: auto;\n ",
|
|
40
40
|
";\n\n ", " {\n margin-right: 0;\n }\n }\n\n &.", " {\n min-width: ", ";\n width: ", ";\n }\n }\n "])), RcSplitButtonClasses.groupedHorizontal, RcSplitButtonClasses.actionButton, variant === 'plainIcon'
|
|
41
|
-
? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 0;\n box-shadow: none;\n\n ", " {\n ", "\n }\n "], ["\n padding: 0;\n box-shadow: none;\n\n ", " {\n ", "\n }\n "])), focusVisible, plainIconButtonFocusStyle({ radius: 'circle' })) : css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding: ", ";\n "], ["\n padding: ", ";\n "])), spacing(space, rightSpace, space, space)), RcIcon, RcSplitButtonClasses.controlButton, width, width);
|
|
41
|
+
? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 0;\n box-shadow: none;\n\n ", " {\n outline: none;\n ", "\n }\n "], ["\n padding: 0;\n box-shadow: none;\n\n ", " {\n outline: none;\n ", "\n }\n "])), focusVisible, plainIconButtonFocusStyle({ radius: 'circle' })) : css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding: ", ";\n "], ["\n padding: ", ";\n "])), spacing(space, rightSpace, space, space)), RcIcon, RcSplitButtonClasses.controlButton, width, width);
|
|
42
42
|
};
|
|
43
43
|
export var splitButtonStyle = function (props) {
|
|
44
44
|
var variant = props.variant, disabled = props.disabled, loading = props.loading;
|
|
@@ -47,14 +47,14 @@ export var splitButtonStyle = function (props) {
|
|
|
47
47
|
var isContainer = variant === 'contained';
|
|
48
48
|
var activeColor24 = setOpacity(currColor, '24');
|
|
49
49
|
var containedActiveColor = setOpacity(currColor, '24', true);
|
|
50
|
-
return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n .", " {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n &:after {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n .", " {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:after {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n }\n\n &.", " {\n ", ";\n\n ", ";\n }\n\n .", " {\n ", ";\n\n &.", " {\n padding: 0;\n min-width: 24px;\n ", ";\n }\n\n &.", " {\n border-right: ", ";\n }\n\n &:not(.", ") {\n margin-left: 0;\n }\n\n ", ";\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n &.", " {\n ", ";\n\n .", " {\n background: ", ";\n }\n }\n "], ["\n .", " {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n &:after {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n .", " {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:after {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n }\n\n &.", " {\n ",
|
|
50
|
+
return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n .", " {\n &:not(:last-child) {\n border-right: unset;\n }\n }\n\n .", " {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n &:after {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n .", " {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:after {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n }\n\n &.", " {\n ", ";\n\n ", ";\n }\n\n .", " {\n ", ";\n\n &.", " {\n padding: 0;\n min-width: 24px;\n ", ";\n }\n\n &.", " {\n border-right: ", ";\n }\n\n &:not(.", ") {\n margin-left: 0;\n }\n\n ", ";\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n &.", " {\n ", ";\n\n .", " {\n background: ", ";\n }\n }\n "], ["\n .", " {\n &:not(:last-child) {\n border-right: unset;\n }\n }\n\n .", " {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n &:after {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n .", " {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:after {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n }\n\n &.", " {\n ",
|
|
51
51
|
";\n\n ",
|
|
52
52
|
";\n }\n\n .", " {\n ",
|
|
53
53
|
";\n\n &.", " {\n padding: 0;\n min-width: 24px;\n ", ";\n }\n\n &.", " {\n border-right: ", ";\n }\n\n &:not(.", ") {\n margin-left: 0;\n }\n\n ",
|
|
54
54
|
";\n }\n\n ",
|
|
55
55
|
";\n\n ",
|
|
56
56
|
";\n\n ", ";\n\n &.", " {\n ",
|
|
57
|
-
";\n\n .", " {\n background: ", ";\n }\n }\n "])), RcSplitButtonClasses.actionButton, RcSplitButtonClasses.controlButton, RcSplitButtonClasses.root, !disabled &&
|
|
57
|
+
";\n\n .", " {\n background: ", ";\n }\n }\n "])), RcSplitButtonClasses.groupedContainedHorizontal, RcSplitButtonClasses.actionButton, RcSplitButtonClasses.controlButton, RcSplitButtonClasses.root, !disabled &&
|
|
58
58
|
variantIs(['outlined', 'text', 'round']) &&
|
|
59
59
|
!loading && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n transition: ", ";\n\n ", " {\n &:hover {\n background: ", ";\n }\n }\n "], ["\n transition: ", ";\n\n ", " {\n &:hover {\n background: ", ";\n }\n }\n "])), transition, nonTouchHoverMedia, buttonHoverColor), variantIs(['text', 'round', 'plainIcon']) && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n align-items: center;\n\n ", "\n "], ["\n align-items: center;\n\n ",
|
|
60
60
|
"\n "])), !disabled &&
|
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import { RcClasses } from '../../../../foundation';
|
|
2
|
-
export var RcSplitButtonClasses = RcClasses([
|
|
2
|
+
export var RcSplitButtonClasses = RcClasses([
|
|
3
|
+
'root',
|
|
4
|
+
'groupedHorizontal',
|
|
5
|
+
'actionButton',
|
|
6
|
+
'controlButton',
|
|
7
|
+
'menuOpen',
|
|
8
|
+
'groupedContainedHorizontal',
|
|
9
|
+
], 'RcSplitButton');
|
|
3
10
|
export var RcSplitButtonTouchRippleClasses = RcClasses(['child', 'ripplePulsate'], 'RcSplitButton-TouchRipple');
|
|
4
11
|
export var getVariant = function (variant) {
|
|
5
12
|
switch (variant) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __makeTemplateObject } from "tslib";
|
|
2
|
-
import { css,
|
|
2
|
+
import { css, getParsePaletteColor, nonTouchHoverMedia, palette2, radius, setOpacity, spacing, focusRing, } from '../../../../foundation';
|
|
3
3
|
import { RcSwitchClasses } from '../utils';
|
|
4
4
|
var thumbColor = palette2('neutral', 'f01');
|
|
5
5
|
var disabledColor = palette2('disabled', 'f02');
|
|
@@ -12,6 +12,6 @@ export var SwitchStyle = function (_a) {
|
|
|
12
12
|
var colorProp = _a.color, trackColorProp = _a.trackColor;
|
|
13
13
|
var checkedColor = getParsePaletteColor(colorProp);
|
|
14
14
|
var trackColor = getParsePaletteColor(trackColorProp, defaultTrackColorArray);
|
|
15
|
-
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &.", " {\n padding: 0px;\n ", ";\n ", ";\n\n .", " {\n ", ";\n ", ";\n padding: 0;\n background-color: transparent;\n transform: translateX(", ");\n\n &.", " {\n transform: translateX(", ");\n }\n }\n\n .", " {\n ", ";\n background-color: ", ";\n box-shadow: none;\n }\n\n .", " {\n ", ";\n opacity: 1;\n margin: 0;\n border-radius: ", ";\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n
|
|
15
|
+
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &.", " {\n /* make sure focus ring can show correctly */\n overflow: visible;\n padding: 0px;\n ", ";\n ", ";\n\n .", " {\n ", ";\n ", ";\n padding: 0;\n background-color: transparent;\n transform: translateX(", ");\n\n &.", " {\n transform: translateX(", ");\n }\n }\n\n .", " {\n ", ";\n background-color: ", ";\n box-shadow: none;\n }\n\n .", " {\n ", ";\n opacity: 1;\n margin: 0;\n border-radius: ", ";\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n ", "\n }\n\n ", " {\n &:hover {\n ", ";\n }\n }\n\n &:active {\n ", ";\n }\n }\n "], ["\n &.", " {\n /* make sure focus ring can show correctly */\n overflow: visible;\n padding: 0px;\n ", ";\n ", ";\n\n .", " {\n ", ";\n ", ";\n padding: 0;\n background-color: transparent;\n transform: translateX(", ");\n\n &.", " {\n transform: translateX(", ");\n }\n }\n\n .", " {\n ", ";\n background-color: ", ";\n box-shadow: none;\n }\n\n .", " {\n ", ";\n opacity: 1;\n margin: 0;\n border-radius: ", ";\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n background-color: ", ";\n }\n\n .", " + .", " {\n ", "\n }\n\n ", " {\n &:hover {\n ", ";\n }\n }\n\n &:active {\n ", ";\n }\n }\n "])), RcSwitchClasses.root, widthCss, heightCss, RcSwitchClasses.switchBase, widthCss, heightCss, spacing(-2), RcSwitchClasses.checked, spacing(2), RcSwitchClasses.thumb, thumbSize, thumbColor, RcSwitchClasses.track, heightCss, radius('round'), trackColor, RcSwitchClasses.checked, RcSwitchClasses.track, checkedColor, RcSwitchClasses.disabled, RcSwitchClasses.track, disabledColor, RcSwitchClasses.focusVisible, RcSwitchClasses.track, focusRing('normal'), nonTouchHoverMedia, notDisabledSwitchBase('08', checkedColor, trackColor), notDisabledSwitchBase('24', checkedColor, trackColor));
|
|
16
16
|
};
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -6,8 +6,7 @@ import { combineClasses, combineProps, styled, useDeprecatedCheck, useThemeProps
|
|
|
6
6
|
import { withTooltip } from '../../Tooltip';
|
|
7
7
|
import { ListItemStyle } from './styles';
|
|
8
8
|
import { RcListItemClasses, RcListItemMultilineClassName, RcListItemRippleClasses, } from './utils';
|
|
9
|
-
var _RcListItem = forwardRef(function (
|
|
10
|
-
var props = useThemeProps({ props: inProps, name: 'RcListItem' });
|
|
9
|
+
var _RcListItem = forwardRef(function (props, ref) {
|
|
11
10
|
if (process.env.NODE_ENV !== 'production') {
|
|
12
11
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
13
12
|
useDeprecatedCheck(RcListItem, props, [
|
|
@@ -23,7 +22,7 @@ var _RcListItem = forwardRef(function (inProps, ref) {
|
|
|
23
22
|
},
|
|
24
23
|
]);
|
|
25
24
|
}
|
|
26
|
-
var classesProp = props.classes, color = props.color, TouchRipplePropsProp = props.TouchRippleProps, children = props.children, className = props.className, singleLine = props.singleLine, button = props.button, size = props.size, canHover = props.canHover, isInline = props.isInline, baseColor = props.baseColor, title = props.title, highlighted = props.highlighted, maxWidth = props.maxWidth, focused = props.focused, rest = __rest(props, ["classes", "color", "TouchRippleProps", "children", "className", "singleLine", "button", "size", "canHover", "isInline", "baseColor", "title", "highlighted", "maxWidth", "focused"]);
|
|
25
|
+
var classesProp = props.classes, color = props.color, TouchRipplePropsProp = props.TouchRippleProps, children = props.children, className = props.className, singleLine = props.singleLine, button = props.button, size = props.size, canHover = props.canHover, isInline = props.isInline, baseColor = props.baseColor, title = props.title, highlighted = props.highlighted, maxWidth = props.maxWidth, focused = props.focused, focusVariant = props.focusVariant, rest = __rest(props, ["classes", "color", "TouchRippleProps", "children", "className", "singleLine", "button", "size", "canHover", "isInline", "baseColor", "title", "highlighted", "maxWidth", "focused", "focusVariant"]);
|
|
27
26
|
var classes = useMemo(function () { return combineClasses(RcListItemClasses, classesProp); }, [classesProp]);
|
|
28
27
|
var ListItemClassName = useMemo(function () {
|
|
29
28
|
var _a;
|
|
@@ -42,13 +41,18 @@ var _RcListItem = forwardRef(function (inProps, ref) {
|
|
|
42
41
|
}, [TouchRipplePropsProp, button]);
|
|
43
42
|
return (React.createElement(MuiListItem, __assign({}, rest, additionProps, { ref: ref, title: typeof title === 'string' ? title : undefined, classes: classes, className: ListItemClassName, button: button }), children));
|
|
44
43
|
});
|
|
45
|
-
var RcListItem = styled(withTooltip(_RcListItem))(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
44
|
+
var RcListItem = styled(withTooltip(_RcListItem)).attrs(function (inProps) {
|
|
45
|
+
var _a = useThemeProps({ props: inProps, name: 'RcListItem' }),
|
|
46
|
+
// @ts-ignore
|
|
47
|
+
theme = _a.theme,
|
|
48
|
+
// Omit className, prevent duplicate className
|
|
49
|
+
className = _a.className, _b = _a.singleLine, singleLine = _b === void 0 ? false : _b, _c = _a.button, button = _c === void 0 ? true : _c, _d = _a.canHover, canHover = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? 'medium' : _e, _f = _a.focusVariant, focusVariant = _f === void 0 ? 'highlight' : _f, rest = __rest(_a, ["theme", "className", "singleLine", "button", "canHover", "size", "focusVariant"]);
|
|
50
|
+
return __assign({ singleLine: singleLine,
|
|
51
|
+
button: button,
|
|
52
|
+
canHover: canHover,
|
|
53
|
+
size: size,
|
|
54
|
+
focusVariant: focusVariant }, rest);
|
|
55
|
+
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), ListItemStyle);
|
|
52
56
|
RcListItem.displayName = 'RcListItem';
|
|
53
57
|
export { RcListItem };
|
|
54
58
|
var templateObject_1;
|
|
@@ -1,26 +1,36 @@
|
|
|
1
1
|
import { __assign, __makeTemplateObject } from "tslib";
|
|
2
|
-
import { css, focusVisible, getParsePaletteColor, nonTouchHoverMedia, palette2, px, setAlpha, setOpacity, spacing, typography, } from '../../../../foundation';
|
|
2
|
+
import { css, focusVisible, getParsePaletteColor, nonTouchHoverMedia, palette2, px, setAlpha, setOpacity, spacing, typography, focusRing, } from '../../../../foundation';
|
|
3
3
|
import { RcFormControlLabel } from '../../../Forms/FormControlLabel';
|
|
4
4
|
import { RcSwitch } from '../../../Forms/Switch';
|
|
5
5
|
import { colorMap, RcListItemClasses, RcListItemRippleClasses, RcListItemTopAndBottomPaddings, } from '../utils';
|
|
6
6
|
export var ListItemFormControlStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", " {\n margin-right: 0;\n\n > ", " {\n /** The DOM structure of Switch is special,\n should remove this after fix Switch as common control */\n margin-left: ", ";\n margin-right: ", ";\n }\n }\n"], ["\n ", " {\n margin-right: 0;\n\n > ", " {\n /** The DOM structure of Switch is special,\n should remove this after fix Switch as common control */\n margin-left: ", ";\n margin-right: ", ";\n }\n }\n"])), RcFormControlLabel, RcSwitch, spacing(1), spacing(1));
|
|
7
7
|
export var sharedListItemStyle = function (_a) {
|
|
8
|
-
var highlighted = _a.highlighted, color = _a.color, canHover = _a.canHover, _b = _a.baseColor, baseColorProp = _b === void 0 ? 'black' : _b, mainClasses = _a.mainClasses, rippleClasses = _a.rippleClasses;
|
|
8
|
+
var highlighted = _a.highlighted, color = _a.color, canHover = _a.canHover, _b = _a.baseColor, baseColorProp = _b === void 0 ? 'black' : _b, mainClasses = _a.mainClasses, rippleClasses = _a.rippleClasses, focusVariant = _a.focusVariant;
|
|
9
9
|
var baseColor = getParsePaletteColor(color !== null && color !== void 0 ? color : colorMap[baseColorProp]);
|
|
10
|
-
|
|
10
|
+
var useFocusRing = focusVariant === 'focusRing';
|
|
11
|
+
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n color: ", ";\n\n ", ";\n\n ", ",\n &.", " {\n background-color: ", ";\n ", "\n }\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n &.", " {\n &,\n &:hover {\n background-color: ", ";\n }\n }\n\n .", " {\n color: ", ";\n }\n\n ", ";\n "], ["\n ", ";\n color: ", ";\n\n ",
|
|
11
12
|
";\n\n "
|
|
12
13
|
// that for menuItem, because in current version of menuItem that not support focused classes
|
|
13
14
|
// TODO: that can be remove after upgrade to V5
|
|
14
15
|
,
|
|
15
|
-
",\n &.", " {\n background-color: ",
|
|
16
|
+
",\n &.", " {\n background-color: ",
|
|
17
|
+
";\n ", "\n }\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n &.", " {\n &,\n &:hover {\n background-color: ", ";\n }\n }\n\n .", " {\n color: ", ";\n }\n\n ", ";\n "])), typography('body1'), palette2('neutral', 'f06'), highlighted && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n "], ["\n background-color: ", ";\n "])), setAlpha(baseColor, 0.05)),
|
|
16
18
|
// that for menuItem, because in current version of menuItem that not support focused classes
|
|
17
19
|
// TODO: that can be remove after upgrade to V5
|
|
18
|
-
focusVisible, mainClasses.focusVisible,
|
|
20
|
+
focusVisible, mainClasses.focusVisible, function () {
|
|
21
|
+
// to override mui focus visible style when item is highlighted
|
|
22
|
+
if (useFocusRing && highlighted) {
|
|
23
|
+
return setAlpha(baseColor, 0.05);
|
|
24
|
+
}
|
|
25
|
+
if (!useFocusRing)
|
|
26
|
+
return setOpacity(baseColor, '16');
|
|
27
|
+
return 'unset';
|
|
28
|
+
}, useFocusRing && focusRing('inset'), nonTouchHoverMedia, canHover ? setOpacity(baseColor, '08') : 'unset', mainClasses.selected, setOpacity(baseColor, '12'), rippleClasses.rippleVisible, baseColor, ListItemFormControlStyle);
|
|
19
29
|
};
|
|
20
30
|
export var ListItemStyle = function (props) {
|
|
21
|
-
var maxWidth = props.maxWidth, isInline = props.isInline, size = props.size, onClick = props.onClick;
|
|
31
|
+
var maxWidth = props.maxWidth, isInline = props.isInline, size = props.size, onClick = props.onClick, focusVariant = props.focusVariant;
|
|
22
32
|
var defaultPadding = RcListItemTopAndBottomPaddings[size];
|
|
23
33
|
return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n display: ", ";\n cursor: ", ";\n\n ", ";\n\n &.", " {\n padding-left: ", ";\n padding-right: ", ";\n }\n\n &.", " {\n padding-top: ", ";\n padding-bottom: ", ";\n }\n "], ["\n width: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n display: ", ";\n cursor: ", ";\n\n ",
|
|
24
|
-
";\n\n &.", " {\n padding-left: ", ";\n padding-right: ", ";\n }\n\n &.", " {\n padding-top: ", ";\n padding-bottom: ", ";\n }\n "])), maxWidth ? px(maxWidth) : '100%', defaultPadding, defaultPadding, isInline ? 'inline-flex' : 'flex', onClick ? 'pointer' : 'default', sharedListItemStyle(__assign(__assign({}, props), { mainClasses: RcListItemClasses, rippleClasses: RcListItemRippleClasses })), RcListItemClasses.gutters, spacing(4), spacing(4), RcListItemClasses.dense, spacing(1), spacing(1));
|
|
34
|
+
";\n\n &.", " {\n padding-left: ", ";\n padding-right: ", ";\n }\n\n &.", " {\n padding-top: ", ";\n padding-bottom: ", ";\n }\n "])), maxWidth ? px(maxWidth) : '100%', defaultPadding, defaultPadding, isInline ? 'inline-flex' : 'flex', onClick ? 'pointer' : 'default', sharedListItemStyle(__assign(__assign({}, props), { mainClasses: RcListItemClasses, rippleClasses: RcListItemRippleClasses, focusVariant: focusVariant })), RcListItemClasses.gutters, spacing(4), spacing(4), RcListItemClasses.dense, spacing(1), spacing(1));
|
|
25
35
|
};
|
|
26
36
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -14,10 +14,9 @@ import { RcMenuListContext } from '../MenuList/MenuListContext';
|
|
|
14
14
|
import { RcSubMenuContext } from '../SubMenu/SubMenuContext';
|
|
15
15
|
import { MenuItemStyle, StyledCheckIcon } from './styles';
|
|
16
16
|
import { RcMenuItemClasses, RcMenuItemRippleClasses } from './utils';
|
|
17
|
-
var _RcMenuItem = forwardRef(function (
|
|
17
|
+
var _RcMenuItem = forwardRef(function (props, ref) {
|
|
18
18
|
var _a;
|
|
19
|
-
var props =
|
|
20
|
-
var classesProp = props.classes, children = props.children, color = props.color, button = props.button, className = props.className, onMouseEnter = props.onMouseEnter, onClick = props.onClick, onFocus = props.onFocus, highlighted = props.highlighted, size = props.size, type = props.type, checked = props.checked, icon = props.icon, symbol = props.symbol, avatar = props.avatar, secondaryAction = props.secondaryAction, idRef = props.idRef, isSubMenuItem = props.isSubMenuItem, TouchRipplePropsProp = props.TouchRippleProps, title = props.title, focused = props.focused, rest = __rest(props, ["classes", "children", "color", "button", "className", "onMouseEnter", "onClick", "onFocus", "highlighted", "size", "type", "checked", "icon", "symbol", "avatar", "secondaryAction", "idRef", "isSubMenuItem", "TouchRippleProps", "title", "focused"]);
|
|
19
|
+
var classesProp = props.classes, children = props.children, color = props.color, button = props.button, className = props.className, onMouseEnter = props.onMouseEnter, onClick = props.onClick, onFocus = props.onFocus, highlighted = props.highlighted, size = props.size, type = props.type, checked = props.checked, icon = props.icon, symbol = props.symbol, avatar = props.avatar, secondaryAction = props.secondaryAction, idRef = props.idRef, isSubMenuItem = props.isSubMenuItem, TouchRipplePropsProp = props.TouchRippleProps, title = props.title, focused = props.focused, focusVariant = props.focusVariant, rest = __rest(props, ["classes", "children", "color", "button", "className", "onMouseEnter", "onClick", "onFocus", "highlighted", "size", "type", "checked", "icon", "symbol", "avatar", "secondaryAction", "idRef", "isSubMenuItem", "TouchRippleProps", "title", "focused", "focusVariant"]);
|
|
21
20
|
var isCheckedType = type === 'checked';
|
|
22
21
|
var menuItemId = useId('menu-item', true);
|
|
23
22
|
var menuContext = useContext(RcMenuContext);
|
|
@@ -105,11 +104,16 @@ var _RcMenuItem = forwardRef(function (inProps, ref) {
|
|
|
105
104
|
children,
|
|
106
105
|
itemSubAction));
|
|
107
106
|
});
|
|
108
|
-
var RcMenuItem = styled(withTooltip(_RcMenuItem))(
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
107
|
+
var RcMenuItem = styled(withTooltip(_RcMenuItem)).attrs(function (inProps) {
|
|
108
|
+
var _a = useThemeProps({ props: inProps, name: 'RcMenuItem' }),
|
|
109
|
+
// @ts-ignore
|
|
110
|
+
theme = _a.theme,
|
|
111
|
+
// Omit className, prevent duplicate className
|
|
112
|
+
className = _a.className, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.button, button = _c === void 0 ? true : _c, _d = _a.focusVariant, focusVariant = _d === void 0 ? 'highlight' : _d, rest = __rest(_a, ["theme", "className", "size", "button", "focusVariant"]);
|
|
113
|
+
return __assign({ size: size,
|
|
114
|
+
button: button,
|
|
115
|
+
focusVariant: focusVariant }, rest);
|
|
116
|
+
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), MenuItemStyle);
|
|
113
117
|
RcMenuItem.displayName = 'RcMenuItem';
|
|
114
118
|
export { RcMenuItem };
|
|
115
119
|
var templateObject_1;
|