@ringcentral/juno 2.25.0 → 2.25.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/styles/StyledButton.js +10 -3
- package/components/Buttons/IconButton/styles/StyledIconButton.js +5 -2
- package/components/Forms/Switch/styles/SwitchStyle.js +1 -1
- package/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js +6 -3
- package/es6/components/Buttons/Button/styles/StyledButton.js +10 -3
- package/es6/components/Buttons/IconButton/styles/StyledIconButton.js +5 -2
- package/es6/components/Forms/Switch/styles/SwitchStyle.js +1 -1
- package/es6/components/Tabs/Tabs/MoreMenuTabs/MoreMenuTabs.js +6 -3
- package/es6/foundation/styles/focusRing.js +15 -5
- package/foundation/styles/focusRing.d.ts +28 -1
- package/foundation/styles/focusRing.js +14 -4
- package/package.json +1 -1
|
@@ -26,13 +26,13 @@ var containedButtonHoverColor = function (props) {
|
|
|
26
26
|
return foundation_1.setOpacity(exports.buttonColor(props), '08', true);
|
|
27
27
|
};
|
|
28
28
|
exports.buttonStyle = function (props) {
|
|
29
|
-
var variant = props.variant, size = props.size,
|
|
29
|
+
var variant = props.variant, size = props.size, _a = props.radius, radiusProp = _a === void 0 ? 'lg' : _a, keepElevation = props.keepElevation, loading = props.loading, disabled = props.disabled, disabledVariant = props.disabledVariant, focusVariant = props.focusVariant;
|
|
30
30
|
var isMask = loading || (disabled && disabledVariant === 'mask');
|
|
31
31
|
var textDisabledColor = !isMask ? foundation_1.palette2('disabled', 'f02') : undefined;
|
|
32
32
|
var plainTextColor = exports.plainButtonTextColor(props);
|
|
33
33
|
var iconSpace = foundation_1.spacing(utils_1.RcButtonIconSpace[size]);
|
|
34
34
|
var isPlain = variant === 'plain';
|
|
35
|
-
return foundation_1.css(templateObject_10 || (templateObject_10 = tslib_1.__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
|
|
35
|
+
return foundation_1.css(templateObject_10 || (templateObject_10 = tslib_1.__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 "], ["\n text-transform: none;\n ", ";\n text-align: center;\n box-shadow: ", ";\n border-radius: ", ";\n\n ",
|
|
36
36
|
";\n\n ",
|
|
37
37
|
";\n\n .", " {\n margin-right: ", ";\n\n ",
|
|
38
38
|
";\n }\n\n .", " {\n margin-left: ", ";\n\n ",
|
|
@@ -41,6 +41,13 @@ exports.buttonStyle = function (props) {
|
|
|
41
41
|
";\n }\n\n &.", " {\n color: ", ";\n background-color: ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n ",
|
|
42
42
|
"\n\n ",
|
|
43
43
|
"\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 ",
|
|
44
|
-
"\n
|
|
44
|
+
"\n }\n "])), foundation_1.typography(utils_1.RcButtonTypographies[size], true), !keepElevation && 'unset', foundation_1.radius(radiusProp), isMask && foundation_1.css(templateObject_1 || (templateObject_1 = tslib_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 "])), foundation_1.setOpacity(foundation_1.palette2('neutral', 'b01'), '32'), foundation_1.radius(radiusProp !== null && radiusProp !== void 0 ? radiusProp : 'lg')), !isPlain && foundation_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n min-width: ", ";\n min-height: ", ";\n padding: ", ";\n "], ["\n min-width: ", ";\n min-height: ", ";\n padding: ", ";\n "])), foundation_1.px(utils_1.RcButtonMinWidths[size]), foundation_1.px(utils_1.RcButtonHeights[size]), foundation_1.spacing(0, utils_1.RcButtonPadding[size])), utils_1.RcButtonClasses.startIcon, iconSpace, isPlain && foundation_1.css(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n margin-left: 0;\n "], ["\n margin-left: 0;\n "]))), utils_1.RcButtonClasses.endIcon, iconSpace, isPlain && foundation_1.css(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n margin-right: 0;\n "], ["\n margin-right: 0;\n "]))), utils_1.RcButtonClasses.text, exports.plainButtonTextColor, utils_1.RcButtonClasses.disabled, textDisabledColor, focusVariant === 'focusRing' && foundation_1.css(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n ", " {\n ", "\n background-color: ", ";\n }\n "], ["\n ", " {\n ", "\n background-color: ", ";\n }\n "])), foundation_1.focusVisible, foundation_1.focusRing('normal', { borderRadius: radiusProp }), textButtonFocusVisibleColor), foundation_1.nonTouchHoverMedia, exports.buttonHoverColor, isPlain && foundation_1.css(templateObject_6 || (templateObject_6 = tslib_1.__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 "])), foundation_1.spacing(1), foundation_1.nonTouchHoverMedia, foundation_1.setOpacity(plainTextColor, '80'), foundation_1.focusVisible, foundation_1.focusRing('inset', { borderRadius: radiusProp }), utils_1.RcButtonClasses.text, foundation_1.setOpacity(plainTextColor, '64')), utils_1.RcButtonClasses.contained, exports.buttonTextColor, exports.buttonColor, foundation_1.nonTouchHoverMedia, containedButtonHoverColor, focusVariant === 'focusRing' && foundation_1.css(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n ", " {\n ", "\n box-shadow: unset;\n }\n "], ["\n ", " {\n ",
|
|
45
|
+
"\n box-shadow: unset;\n }\n "])), foundation_1.focusVisible, foundation_1.focusRing('normal', {
|
|
46
|
+
borderRadius: radiusProp,
|
|
47
|
+
})), !isMask && foundation_1.css(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n &.", " {\n background-color: ", ";\n color: ", ";\n }\n "], ["\n &.", " {\n background-color: ", ";\n color: ", ";\n }\n "])), utils_1.RcButtonClasses.disabled, foundation_1.palette2('disabled', 'b01'), foundation_1.palette2('disabled', 'f01')), utils_1.RcButtonClasses.outlined, exports.plainButtonTextColor, exports.plainButtonTextColor, foundation_1.spacing(0, utils_1.RcButtonPadding[size] - 0.25), foundation_1.nonTouchHoverMedia, exports.buttonHoverColor, utils_1.RcButtonClasses.disabled, textDisabledColor, textDisabledColor, focusVariant === 'focusRing' && foundation_1.css(templateObject_9 || (templateObject_9 = tslib_1.__makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ",
|
|
48
|
+
"\n }\n "])), foundation_1.focusVisible, foundation_1.focusRing('normal', {
|
|
49
|
+
borderRadius: radiusProp,
|
|
50
|
+
borderWidth: '1px',
|
|
51
|
+
})));
|
|
45
52
|
};
|
|
46
53
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -49,7 +49,8 @@ exports.iconButtonStyle = function (_a) {
|
|
|
49
49
|
";\n\n font-size: ",
|
|
50
50
|
";\n\n ", " {\n &:hover {\n background-color: ",
|
|
51
51
|
";\n\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n }\n\n ", " {\n background-color: ",
|
|
52
|
-
";\n\n ",
|
|
52
|
+
";\n\n ",
|
|
53
|
+
"\n\n &:active {\n color: ", ";\n }\n\n ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n color: ",
|
|
53
54
|
";\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 ",
|
|
54
55
|
"\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 ",
|
|
55
56
|
"\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 "
|
|
@@ -78,7 +79,9 @@ exports.iconButtonStyle = function (_a) {
|
|
|
78
79
|
if (isInverse)
|
|
79
80
|
return foundation_1.setOpacity(mainColor, '32');
|
|
80
81
|
return foundation_1.setOpacity(mainColor, '16');
|
|
81
|
-
}, useFocusRing &&
|
|
82
|
+
}, useFocusRing &&
|
|
83
|
+
(isRound || isInverse) &&
|
|
84
|
+
foundation_1.focusRing('inset', { borderRadius: currRadius }), foundation_1.setOpacity(mainColor, '88'), isPlain && exports.plainIconButtonFocusStyle({ radius: currRadius }), utils_1.RcIconButtonClasses.persistBg, persistBgColor, utils_1.RcIconButtonClasses.disabled, useColorWhenDisabled
|
|
82
85
|
? foundation_1.setOpacity(mainColor, '32')
|
|
83
86
|
: foundation_1.palette2('disabled', 'f02'), isInverse && foundation_1.setOpacity(mainColor, '12'), utils_1.RcIconButtonClasses.invisible, utils_1.RcIconButtonClasses.outline, foundation_1.palette2('neutral', 'l03'), utils_1.RcIconButtonClasses.contained, containedColor, mainColor, utils_1.RcIconButtonClasses.disabled, function () {
|
|
84
87
|
if (useColorWhenDisabled)
|
|
@@ -14,6 +14,6 @@ exports.SwitchStyle = function (_a) {
|
|
|
14
14
|
var colorProp = _a.color, trackColorProp = _a.trackColor;
|
|
15
15
|
var checkedColor = foundation_1.getParsePaletteColor(colorProp);
|
|
16
16
|
var trackColor = foundation_1.getParsePaletteColor(trackColorProp, defaultTrackColorArray);
|
|
17
|
-
return foundation_1.css(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n &.", " {\n padding: 0px;\n ", ";\n ", ";\n\n &[data-focus-visible-within] {\n border-radius:
|
|
17
|
+
return foundation_1.css(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n &.", " {\n padding: 0px;\n ", ";\n ", ";\n\n &[data-focus-visible-within] {\n border-radius: ", ";\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 &:hover {\n ", ";\n }\n }\n\n &:active {\n ", ";\n }\n }\n "], ["\n &.", " {\n padding: 0px;\n ", ";\n ", ";\n\n &[data-focus-visible-within] {\n border-radius: ", ";\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 &:hover {\n ", ";\n }\n }\n\n &:active {\n ", ";\n }\n }\n "])), utils_1.RcSwitchClasses.root, widthCss, heightCss, foundation_1.radius('round'), foundation_1.focusRing('normal', { pseudo: false }), utils_1.RcSwitchClasses.switchBase, widthCss, heightCss, foundation_1.spacing(-2), utils_1.RcSwitchClasses.checked, foundation_1.spacing(2), utils_1.RcSwitchClasses.thumb, thumbSize, thumbColor, utils_1.RcSwitchClasses.track, heightCss, foundation_1.radius('round'), trackColor, utils_1.RcSwitchClasses.checked, utils_1.RcSwitchClasses.track, checkedColor, utils_1.RcSwitchClasses.disabled, utils_1.RcSwitchClasses.track, disabledColor, foundation_1.nonTouchHoverMedia, notDisabledSwitchBase('08', checkedColor, trackColor), notDisabledSwitchBase('24', checkedColor, trackColor));
|
|
18
18
|
};
|
|
19
19
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -155,7 +155,7 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
|
|
|
155
155
|
size: value.size ? value.size[oriStr] : 0,
|
|
156
156
|
});
|
|
157
157
|
});
|
|
158
|
-
var limitSize =
|
|
158
|
+
var limitSize = tabsSizeRef.current[oriStr] - moreTabSizeRef.current[oriStr];
|
|
159
159
|
var _a = utils_1.computeChildBySize(labelArray, currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0], limitSize), tabsTabLabel = _a.plainArr, menuTabLabel = _a.groupArr;
|
|
160
160
|
computeGroupingInfo(tabsTabLabel, menuTabLabel);
|
|
161
161
|
var tabsTabChild = tabsTabLabel.map(function (key) {
|
|
@@ -189,7 +189,7 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
|
|
|
189
189
|
: computedStandardModeChild(tabRefsMap);
|
|
190
190
|
}
|
|
191
191
|
};
|
|
192
|
-
if (
|
|
192
|
+
if (tabsSizeRef.current.width !== 0 && tabsSizeRef.current.height !== 0) {
|
|
193
193
|
// computed: 1.resize 2. valueProp 3.moreMenuClick 4.children change
|
|
194
194
|
// not computed: visible tab change
|
|
195
195
|
if (((_a = groupingRef.current) === null || _a === void 0 ? void 0 : _a.tabs.includes((currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0]) || '')) &&
|
|
@@ -197,7 +197,10 @@ var _MoreMenuTabs = react_1.forwardRef(function (props, ref) {
|
|
|
197
197
|
prevChildrenProp === childrenProp) {
|
|
198
198
|
return;
|
|
199
199
|
}
|
|
200
|
-
|
|
200
|
+
// can't use tabsSize
|
|
201
|
+
// It is possible that the children prop render effect will execute before the sizeChange effect
|
|
202
|
+
// which get a old tabsSize value
|
|
203
|
+
computeTabChild(tabsSizeRef.current);
|
|
201
204
|
hasResizeRef.current = false;
|
|
202
205
|
}
|
|
203
206
|
}, [
|
|
@@ -24,13 +24,13 @@ var containedButtonHoverColor = function (props) {
|
|
|
24
24
|
return setOpacity(buttonColor(props), '08', true);
|
|
25
25
|
};
|
|
26
26
|
export var buttonStyle = function (props) {
|
|
27
|
-
var variant = props.variant, size = props.size,
|
|
27
|
+
var variant = props.variant, size = props.size, _a = props.radius, radiusProp = _a === void 0 ? 'lg' : _a, keepElevation = props.keepElevation, loading = props.loading, disabled = props.disabled, disabledVariant = props.disabledVariant, focusVariant = props.focusVariant;
|
|
28
28
|
var isMask = loading || (disabled && disabledVariant === 'mask');
|
|
29
29
|
var textDisabledColor = !isMask ? palette2('disabled', 'f02') : undefined;
|
|
30
30
|
var plainTextColor = plainButtonTextColor(props);
|
|
31
31
|
var iconSpace = spacing(RcButtonIconSpace[size]);
|
|
32
32
|
var isPlain = variant === 'plain';
|
|
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
|
|
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 "], ["\n text-transform: none;\n ", ";\n text-align: center;\n box-shadow: ", ";\n border-radius: ", ";\n\n ",
|
|
34
34
|
";\n\n ",
|
|
35
35
|
";\n\n .", " {\n margin-right: ", ";\n\n ",
|
|
36
36
|
";\n }\n\n .", " {\n margin-left: ", ";\n\n ",
|
|
@@ -39,6 +39,13 @@ export var buttonStyle = function (props) {
|
|
|
39
39
|
";\n }\n\n &.", " {\n color: ", ";\n background-color: ", ";\n\n ", " {\n &:hover {\n background-color: ", ";\n }\n }\n\n ",
|
|
40
40
|
"\n\n ",
|
|
41
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
|
|
42
|
+
"\n }\n "])), typography(RcButtonTypographies[size], true), !keepElevation && 'unset', 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', { borderRadius: radiusProp }), 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', { borderRadius: radiusProp }), 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 ",
|
|
43
|
+
"\n box-shadow: unset;\n }\n "])), focusVisible, focusRing('normal', {
|
|
44
|
+
borderRadius: radiusProp,
|
|
45
|
+
})), !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 ",
|
|
46
|
+
"\n }\n "])), focusVisible, focusRing('normal', {
|
|
47
|
+
borderRadius: radiusProp,
|
|
48
|
+
borderWidth: '1px',
|
|
49
|
+
})));
|
|
43
50
|
};
|
|
44
51
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -47,7 +47,8 @@ export var iconButtonStyle = function (_a) {
|
|
|
47
47
|
";\n\n font-size: ",
|
|
48
48
|
";\n\n ", " {\n &:hover {\n background-color: ",
|
|
49
49
|
";\n\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n }\n\n ", " {\n background-color: ",
|
|
50
|
-
";\n\n ",
|
|
50
|
+
";\n\n ",
|
|
51
|
+
"\n\n &:active {\n color: ", ";\n }\n\n ", ";\n }\n\n &.", " {\n background-color: ", ";\n }\n\n &.", " {\n color: ",
|
|
51
52
|
";\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 ",
|
|
52
53
|
"\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 ",
|
|
53
54
|
"\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 "
|
|
@@ -76,7 +77,9 @@ export var iconButtonStyle = function (_a) {
|
|
|
76
77
|
if (isInverse)
|
|
77
78
|
return setOpacity(mainColor, '32');
|
|
78
79
|
return setOpacity(mainColor, '16');
|
|
79
|
-
}, useFocusRing &&
|
|
80
|
+
}, useFocusRing &&
|
|
81
|
+
(isRound || isInverse) &&
|
|
82
|
+
focusRing('inset', { borderRadius: currRadius }), setOpacity(mainColor, '88'), isPlain && plainIconButtonFocusStyle({ radius: currRadius }), RcIconButtonClasses.persistBg, persistBgColor, RcIconButtonClasses.disabled, useColorWhenDisabled
|
|
80
83
|
? setOpacity(mainColor, '32')
|
|
81
84
|
: palette2('disabled', 'f02'), isInverse && setOpacity(mainColor, '12'), RcIconButtonClasses.invisible, RcIconButtonClasses.outline, palette2('neutral', 'l03'), RcIconButtonClasses.contained, containedColor, mainColor, RcIconButtonClasses.disabled, function () {
|
|
82
85
|
if (useColorWhenDisabled)
|
|
@@ -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 &[data-focus-visible-within] {\n border-radius:
|
|
15
|
+
return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &.", " {\n padding: 0px;\n ", ";\n ", ";\n\n &[data-focus-visible-within] {\n border-radius: ", ";\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 &:hover {\n ", ";\n }\n }\n\n &:active {\n ", ";\n }\n }\n "], ["\n &.", " {\n padding: 0px;\n ", ";\n ", ";\n\n &[data-focus-visible-within] {\n border-radius: ", ";\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 &:hover {\n ", ";\n }\n }\n\n &:active {\n ", ";\n }\n }\n "])), RcSwitchClasses.root, widthCss, heightCss, radius('round'), focusRing('normal', { pseudo: false }), 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, nonTouchHoverMedia, notDisabledSwitchBase('08', checkedColor, trackColor), notDisabledSwitchBase('24', checkedColor, trackColor));
|
|
16
16
|
};
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -153,7 +153,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
|
|
|
153
153
|
size: value.size ? value.size[oriStr] : 0,
|
|
154
154
|
});
|
|
155
155
|
});
|
|
156
|
-
var limitSize =
|
|
156
|
+
var limitSize = tabsSizeRef.current[oriStr] - moreTabSizeRef.current[oriStr];
|
|
157
157
|
var _a = computeChildBySize(labelArray, currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0], limitSize), tabsTabLabel = _a.plainArr, menuTabLabel = _a.groupArr;
|
|
158
158
|
computeGroupingInfo(tabsTabLabel, menuTabLabel);
|
|
159
159
|
var tabsTabChild = tabsTabLabel.map(function (key) {
|
|
@@ -187,7 +187,7 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
|
|
|
187
187
|
: computedStandardModeChild(tabRefsMap);
|
|
188
188
|
}
|
|
189
189
|
};
|
|
190
|
-
if (
|
|
190
|
+
if (tabsSizeRef.current.width !== 0 && tabsSizeRef.current.height !== 0) {
|
|
191
191
|
// computed: 1.resize 2. valueProp 3.moreMenuClick 4.children change
|
|
192
192
|
// not computed: visible tab change
|
|
193
193
|
if (((_a = groupingRef.current) === null || _a === void 0 ? void 0 : _a.tabs.includes((currSelectTabItem === null || currSelectTabItem === void 0 ? void 0 : currSelectTabItem[0]) || '')) &&
|
|
@@ -195,7 +195,10 @@ var _MoreMenuTabs = forwardRef(function (props, ref) {
|
|
|
195
195
|
prevChildrenProp === childrenProp) {
|
|
196
196
|
return;
|
|
197
197
|
}
|
|
198
|
-
|
|
198
|
+
// can't use tabsSize
|
|
199
|
+
// It is possible that the children prop render effect will execute before the sizeChange effect
|
|
200
|
+
// which get a old tabsSize value
|
|
201
|
+
computeTabChild(tabsSizeRef.current);
|
|
199
202
|
hasResizeRef.current = false;
|
|
200
203
|
}
|
|
201
204
|
}, [
|
|
@@ -1,11 +1,21 @@
|
|
|
1
1
|
import { __makeTemplateObject } from "tslib";
|
|
2
2
|
import { css } from '../styled-components';
|
|
3
|
-
import { palette2 } from './newPalette';
|
|
3
|
+
import { palette2, getParsePaletteColor } from './newPalette';
|
|
4
|
+
import { radius } from './radius';
|
|
4
5
|
var focusRingOffsetMap = {
|
|
5
6
|
normal: '2px',
|
|
6
|
-
inset: '
|
|
7
|
+
inset: '0px',
|
|
7
8
|
};
|
|
8
|
-
export var focusRing = function (variant) {
|
|
9
|
-
|
|
9
|
+
export var focusRing = function (variant, options) {
|
|
10
|
+
if (options === void 0) { options = {}; }
|
|
11
|
+
var _a = options.pseudo, pseudo = _a === void 0 ? true : _a;
|
|
12
|
+
if (pseudo) {
|
|
13
|
+
var _b = options.borderRadius, borderRadius = _b === void 0 ? 'zero' : _b, _c = options.borderWidth, borderWidth = _c === void 0 ? '0px' : _c;
|
|
14
|
+
var isInset = variant === 'inset';
|
|
15
|
+
var offset = focusRingOffsetMap[variant];
|
|
16
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &:after {\n pointer-events: none;\n content: '';\n position: absolute;\n inset: 0;\n\n margin: calc(-", " - ", ");\n border-radius: calc(", " + ", ");\n box-shadow: ", " 0 0 0 2px\n ", ";\n }\n "], ["\n &:after {\n pointer-events: none;\n content: '';\n position: absolute;\n inset: 0;\n\n margin: calc(-", " - ", ");\n border-radius: calc(", " + ", ");\n box-shadow: ", " 0 0 0 2px\n ", ";\n }\n "])), offset, borderWidth, offset, radius(borderRadius), isInset ? 'inset' : '', palette2('interactive', 'b02'));
|
|
17
|
+
}
|
|
18
|
+
var _d = options.gapColor, gapColor = _d === void 0 ? 'neutral.b01' : _d;
|
|
19
|
+
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: 0 0 0 2px ", ",\n 0 0 0 4px ", ";\n "], ["\n box-shadow: 0 0 0 2px ", ",\n 0 0 0 4px ", ";\n "])), getParsePaletteColor(gapColor), palette2('interactive', 'b02'));
|
|
10
20
|
};
|
|
11
|
-
var templateObject_1;
|
|
21
|
+
var templateObject_1, templateObject_2;
|
|
@@ -1,2 +1,29 @@
|
|
|
1
|
+
import { radius } from './radius';
|
|
2
|
+
import { RcPaletteProp } from '../theme';
|
|
1
3
|
export declare type FocusRingVariant = 'normal' | 'inset';
|
|
2
|
-
export declare
|
|
4
|
+
export declare type FocusRingOptions = {
|
|
5
|
+
/**
|
|
6
|
+
* Border radius of reference element. Can help this utils to calculate focusRing radius.
|
|
7
|
+
* Only useful if `pseudo` is true.
|
|
8
|
+
* @default '0px'
|
|
9
|
+
*/
|
|
10
|
+
borderRadius?: Parameters<typeof radius>[0];
|
|
11
|
+
/**
|
|
12
|
+
* Border radius of reference element. Can help this utils to calculate focusRing position.
|
|
13
|
+
* Only useful if `pseudo` is true.
|
|
14
|
+
* @default '0px'
|
|
15
|
+
*/
|
|
16
|
+
borderWidth?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Should use pseudo to show focusRing.
|
|
19
|
+
* @default true
|
|
20
|
+
*/
|
|
21
|
+
pseudo?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Color of the gap between reference element and focusRing.
|
|
24
|
+
* Only useful if `pseudo` is false.
|
|
25
|
+
* @default 'neutral.b01'
|
|
26
|
+
*/
|
|
27
|
+
gapColor?: RcPaletteProp;
|
|
28
|
+
};
|
|
29
|
+
export declare const focusRing: (variant: FocusRingVariant, options?: FocusRingOptions) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("../theme").RcTheme>>[];
|
|
@@ -3,11 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
var tslib_1 = require("tslib");
|
|
4
4
|
var styled_components_1 = require("../styled-components");
|
|
5
5
|
var newPalette_1 = require("./newPalette");
|
|
6
|
+
var radius_1 = require("./radius");
|
|
6
7
|
var focusRingOffsetMap = {
|
|
7
8
|
normal: '2px',
|
|
8
|
-
inset: '
|
|
9
|
+
inset: '0px',
|
|
9
10
|
};
|
|
10
|
-
exports.focusRing = function (variant) {
|
|
11
|
-
|
|
11
|
+
exports.focusRing = function (variant, options) {
|
|
12
|
+
if (options === void 0) { options = {}; }
|
|
13
|
+
var _a = options.pseudo, pseudo = _a === void 0 ? true : _a;
|
|
14
|
+
if (pseudo) {
|
|
15
|
+
var _b = options.borderRadius, borderRadius = _b === void 0 ? 'zero' : _b, _c = options.borderWidth, borderWidth = _c === void 0 ? '0px' : _c;
|
|
16
|
+
var isInset = variant === 'inset';
|
|
17
|
+
var offset = focusRingOffsetMap[variant];
|
|
18
|
+
return styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n &:after {\n pointer-events: none;\n content: '';\n position: absolute;\n inset: 0;\n\n margin: calc(-", " - ", ");\n border-radius: calc(", " + ", ");\n box-shadow: ", " 0 0 0 2px\n ", ";\n }\n "], ["\n &:after {\n pointer-events: none;\n content: '';\n position: absolute;\n inset: 0;\n\n margin: calc(-", " - ", ");\n border-radius: calc(", " + ", ");\n box-shadow: ", " 0 0 0 2px\n ", ";\n }\n "])), offset, borderWidth, offset, radius_1.radius(borderRadius), isInset ? 'inset' : '', newPalette_1.palette2('interactive', 'b02'));
|
|
19
|
+
}
|
|
20
|
+
var _d = options.gapColor, gapColor = _d === void 0 ? 'neutral.b01' : _d;
|
|
21
|
+
return styled_components_1.css(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n box-shadow: 0 0 0 2px ", ",\n 0 0 0 4px ", ";\n "], ["\n box-shadow: 0 0 0 2px ", ",\n 0 0 0 4px ", ";\n "])), newPalette_1.getParsePaletteColor(gapColor), newPalette_1.palette2('interactive', 'b02'));
|
|
12
22
|
};
|
|
13
|
-
var templateObject_1;
|
|
23
|
+
var templateObject_1, templateObject_2;
|