@ringcentral/juno 2.24.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/Picker/DatePicker/Calendar.js +0 -1
- package/components/Forms/Picker/DatePicker/DatePickerHeader.js +5 -1
- package/components/Forms/Picker/TimePicker/NumberPicker.d.ts +13 -1
- package/components/Forms/Picker/TimePicker/NumberPicker.js +9 -2
- package/components/Forms/Picker/TimePicker/TimePicker.js +1 -1
- 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/Picker/DatePicker/Calendar.js +0 -1
- package/es6/components/Forms/Picker/DatePicker/DatePickerHeader.js +6 -2
- package/es6/components/Forms/Picker/TimePicker/NumberPicker.js +10 -3
- package/es6/components/Forms/Picker/TimePicker/TimePicker.js +1 -1
- 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)
|
|
@@ -162,7 +162,6 @@ var Calendar = react_1.forwardRef(function (_a, ref) {
|
|
|
162
162
|
}
|
|
163
163
|
}, [previousView, view, viewChange]);
|
|
164
164
|
react_1.useLayoutEffect(function () {
|
|
165
|
-
utils_2.focusDayElement();
|
|
166
165
|
calendarRef.current = document.querySelector("." + utils_2.RcDatePickerClasses.popover + " ." + utils_2.RcDatePickerClasses.popoverPaper);
|
|
167
166
|
var unsubscribe = utils_1.transitionendSubscriber(calendarRef.current, utils_2.onTransitionEnd);
|
|
168
167
|
return function () {
|
|
@@ -15,6 +15,10 @@ var DatePickerHeader = react_1.memo(function (props) {
|
|
|
15
15
|
var nextMonth = utils.getNextMonth(focusedDate);
|
|
16
16
|
var monthLabel = utils.getCalendarHeaderText(focusedDate);
|
|
17
17
|
var changeFromRef = react_1.useRef();
|
|
18
|
+
var headerRef = react_1.useRef(null);
|
|
19
|
+
react_1.useLayoutEffect(function () {
|
|
20
|
+
headerRef.current.focus();
|
|
21
|
+
}, []);
|
|
18
22
|
var selectNextMonth = function () {
|
|
19
23
|
onMonthChange(nextMonth, 'left');
|
|
20
24
|
changeFromRef.current = 'next';
|
|
@@ -33,7 +37,7 @@ var DatePickerHeader = react_1.memo(function (props) {
|
|
|
33
37
|
? nextMonthAriaLabel
|
|
34
38
|
: previousMonthAriaLabel)),
|
|
35
39
|
react_1.default.createElement(styles_1.SwitchHeaderWrapper, { size: size, className: classes.header },
|
|
36
|
-
react_1.default.createElement(styles_1.StyledCurrentMonth, { role: 'button', tabIndex: 0, view: view, onClick: onViewChange, "aria-label": monthYearAriaLabel, "aria-expanded": ariaExpanded, "data-test-automation-id": "date-picker-month-year", className: classes.select },
|
|
40
|
+
react_1.default.createElement(styles_1.StyledCurrentMonth, { role: 'button', tabIndex: 0, view: view, onClick: onViewChange, "aria-label": monthYearAriaLabel, "aria-expanded": ariaExpanded, "data-test-automation-id": "date-picker-month-year", className: classes.select, ref: headerRef },
|
|
37
41
|
monthLabel,
|
|
38
42
|
react_1.default.createElement(SelectArrowDownIcon_1.SelectArrowDownIcon, null)),
|
|
39
43
|
react_1.default.createElement(styles_1.SwitchHeaderButtonWrapper, { size: size, gap: 3, view: view },
|
|
@@ -30,6 +30,10 @@ declare type NumberPickerProps = {
|
|
|
30
30
|
step: number;
|
|
31
31
|
/** render value fn */
|
|
32
32
|
renderValue?: (value: number) => string;
|
|
33
|
+
/**
|
|
34
|
+
* If `true`, the `NumberPicker` element will be focused during the first mount.
|
|
35
|
+
*/
|
|
36
|
+
autoFocus?: boolean;
|
|
33
37
|
} & RcClickFiledStyleProps & RcBaseProps<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onChange'>;
|
|
34
38
|
declare type NumberPickerRef = {
|
|
35
39
|
value: number;
|
|
@@ -60,6 +64,10 @@ declare const NumberPicker: import("styled-components").StyledComponentClass<{
|
|
|
60
64
|
step: number;
|
|
61
65
|
/** render value fn */
|
|
62
66
|
renderValue?: ((value: number) => string) | undefined;
|
|
67
|
+
/**
|
|
68
|
+
* If `true`, the `NumberPicker` element will be focused during the first mount.
|
|
69
|
+
*/
|
|
70
|
+
autoFocus?: boolean | undefined;
|
|
63
71
|
} & RcClickFiledStyleProps & Pick<React.HTMLAttributes<HTMLDivElement>, "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & React.RefAttributes<NumberPickerRef>, import("../../../../foundation").RcTheme, Pick<{
|
|
64
72
|
/** min number */
|
|
65
73
|
min?: number | undefined;
|
|
@@ -85,7 +93,11 @@ declare const NumberPicker: import("styled-components").StyledComponentClass<{
|
|
|
85
93
|
step: number;
|
|
86
94
|
/** render value fn */
|
|
87
95
|
renderValue?: ((value: number) => string) | undefined;
|
|
88
|
-
|
|
96
|
+
/**
|
|
97
|
+
* If `true`, the `NumberPicker` element will be focused during the first mount.
|
|
98
|
+
*/
|
|
99
|
+
autoFocus?: boolean | undefined;
|
|
100
|
+
} & RcClickFiledStyleProps & Pick<React.HTMLAttributes<HTMLDivElement>, "className" | "color" | "id" | "lang" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is"> & React.RefAttributes<NumberPickerRef>, "ref" | "key" | "className" | "color" | "id" | "lang" | "max" | "min" | "style" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "slot" | "source" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "disabled" | "autoFocus" | "onClose" | "onUpdateValue" | "isTwelveHourSystem" | "onInnerChange" | "automationId" | "getScreenReaderLabel" | "renderValue"> & {
|
|
89
101
|
theme?: import("../../../../foundation").RcTheme | undefined;
|
|
90
102
|
}>;
|
|
91
103
|
export { NumberPicker };
|
|
@@ -9,10 +9,17 @@ var StyledNumberPicker_1 = require("./styles/StyledNumberPicker");
|
|
|
9
9
|
var StyledTimeIconButton_1 = require("./styles/StyledTimeIconButton");
|
|
10
10
|
var utils_1 = require("./utils");
|
|
11
11
|
var _NumberPicker = react_1.forwardRef(function (props, ref) {
|
|
12
|
-
var onClick = props.onClick, value = props.value, onUpdateValue = props.onUpdateValue, onKeyDown = props.onKeyDown, source = props.source, automationId = props.automationId, size = props.size, minProp = props.min, maxProp = props.max, onClose = props.onClose, step = props.step, onInnerChange = props.onInnerChange, renderValue = props.renderValue, getScreenReaderLabel = props.getScreenReaderLabel, rest = tslib_1.__rest(props, ["onClick", "value", "onUpdateValue", "onKeyDown", "source", "automationId", "size", "min", "max", "onClose", "step", "onInnerChange", "renderValue", "getScreenReaderLabel"]);
|
|
12
|
+
var onClick = props.onClick, value = props.value, onUpdateValue = props.onUpdateValue, onKeyDown = props.onKeyDown, source = props.source, automationId = props.automationId, size = props.size, minProp = props.min, maxProp = props.max, onClose = props.onClose, step = props.step, onInnerChange = props.onInnerChange, renderValue = props.renderValue, getScreenReaderLabel = props.getScreenReaderLabel, autoFocus = props.autoFocus, rest = tslib_1.__rest(props, ["onClick", "value", "onUpdateValue", "onKeyDown", "source", "automationId", "size", "min", "max", "onClose", "step", "onInnerChange", "renderValue", "getScreenReaderLabel", "autoFocus"]);
|
|
13
13
|
var forceUpdate = foundation_1.useForceUpdate();
|
|
14
14
|
var _a = tslib_1.__read(foundation_1.useRefState(value, forceUpdate), 2), innerValueRef = _a[0], setInnerValue = _a[1];
|
|
15
15
|
var rangeRef = react_1.useRef({ max: maxProp, min: minProp });
|
|
16
|
+
var pickerRef = react_1.useRef(null);
|
|
17
|
+
react_1.useLayoutEffect(function () {
|
|
18
|
+
if (autoFocus) {
|
|
19
|
+
pickerRef.current.focus();
|
|
20
|
+
}
|
|
21
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
22
|
+
}, []);
|
|
16
23
|
foundation_1.useDepsChange(function () {
|
|
17
24
|
rangeRef.current = { max: maxProp, min: minProp };
|
|
18
25
|
}, [maxProp, minProp]);
|
|
@@ -102,7 +109,7 @@ var _NumberPicker = react_1.forwardRef(function (props, ref) {
|
|
|
102
109
|
return 'large';
|
|
103
110
|
}
|
|
104
111
|
})();
|
|
105
|
-
return (react_1.default.createElement(StyledNumberPicker_1.StyledNumberPicker, tslib_1.__assign({ tabIndex: 0, onKeyDown: handleKeyDown, "aria-live": "assertive", "aria-label": label }, rest),
|
|
112
|
+
return (react_1.default.createElement(StyledNumberPicker_1.StyledNumberPicker, tslib_1.__assign({ tabIndex: 0, onKeyDown: handleKeyDown, "aria-live": "assertive", "aria-label": label, ref: pickerRef }, rest),
|
|
106
113
|
react_1.default.createElement(StyledTimeIconButton_1.StyledTimeIconButton, { tabIndex: -1, size: iconSize, color: "neutral.f04", wrapperSize: size, disabled: increaseDisabled, onClick: function () {
|
|
107
114
|
onUpdateValue(increaseValue);
|
|
108
115
|
}, symbol: juno_icon_1.ArrowUp, "data-test-automation-id": automationId && automationId + "-prev-pagination", "aria-label": "Arrow Up" }),
|
|
@@ -240,7 +240,7 @@ var _RcTimePicker = react_1.forwardRef(function (inProps, ref) {
|
|
|
240
240
|
react_1.default.createElement(styles_1.StyledPickerPopperWrap, { size: size }, selectionShowType === 'none' ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
241
241
|
react_1.default.createElement(NumberPicker_1.NumberPicker, tslib_1.__assign({ ref: hourRef, size: size, onInnerChange: handleHourInnerChange, onClick: setHourSelectionShow, onClose: closeMenu, value: hourValue }, boundary.hour, { onUpdateValue: handleHourChange, step: 1, source: isTwelveHourSystem
|
|
242
242
|
? utils_2.twelveHourSystemSource
|
|
243
|
-
: utils_2.twentyFourHourSystemSource, renderValue: renderHourValue, automationId: "time-picker-hour" }, HourPickerProps)),
|
|
243
|
+
: utils_2.twentyFourHourSystemSource, renderValue: renderHourValue, automationId: "time-picker-hour", autoFocus: true }, HourPickerProps)),
|
|
244
244
|
react_1.default.createElement(Box_1.RcBox, { textAlign: "center", width: "48px" }, ":"),
|
|
245
245
|
react_1.default.createElement(NumberPicker_1.NumberPicker, tslib_1.__assign({ ref: minuteRef, size: size }, boundary.minute, { onUpdateValue: handleMinuteChange, onClick: setMinuteSelectionShow, onClose: closeMenu, value: minuteValue, source: utils_2.minuteSource, step: utils_2.TIME_GAP, automationId: "time-picker-minute" }, MinutePickerProps)),
|
|
246
246
|
isTwelveHourSystem && (react_1.default.createElement("div", null,
|
|
@@ -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)
|
|
@@ -160,7 +160,6 @@ var Calendar = forwardRef(function (_a, ref) {
|
|
|
160
160
|
}
|
|
161
161
|
}, [previousView, view, viewChange]);
|
|
162
162
|
useLayoutEffect(function () {
|
|
163
|
-
focusDayElement();
|
|
164
163
|
calendarRef.current = document.querySelector("." + RcDatePickerClasses.popover + " ." + RcDatePickerClasses.popoverPaper);
|
|
165
164
|
var unsubscribe = transitionendSubscriber(calendarRef.current, onTransitionEnd);
|
|
166
165
|
return function () {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { memo, useRef } from 'react';
|
|
1
|
+
import React, { memo, useRef, useLayoutEffect } from 'react';
|
|
2
2
|
import { useUtils as useMuiUtils } from '@material-ui/pickers';
|
|
3
3
|
import { ArrowLeft2 as arrowLeftSvg, ArrowRight as arrowRightSvg, } from '@ringcentral/juno-icon';
|
|
4
4
|
import { RcVisuallyHidden } from '../../../VisuallyHidden';
|
|
@@ -12,6 +12,10 @@ var DatePickerHeader = memo(function (props) {
|
|
|
12
12
|
var nextMonth = utils.getNextMonth(focusedDate);
|
|
13
13
|
var monthLabel = utils.getCalendarHeaderText(focusedDate);
|
|
14
14
|
var changeFromRef = useRef();
|
|
15
|
+
var headerRef = useRef(null);
|
|
16
|
+
useLayoutEffect(function () {
|
|
17
|
+
headerRef.current.focus();
|
|
18
|
+
}, []);
|
|
15
19
|
var selectNextMonth = function () {
|
|
16
20
|
onMonthChange(nextMonth, 'left');
|
|
17
21
|
changeFromRef.current = 'next';
|
|
@@ -30,7 +34,7 @@ var DatePickerHeader = memo(function (props) {
|
|
|
30
34
|
? nextMonthAriaLabel
|
|
31
35
|
: previousMonthAriaLabel)),
|
|
32
36
|
React.createElement(SwitchHeaderWrapper, { size: size, className: classes.header },
|
|
33
|
-
React.createElement(StyledCurrentMonth, { role: 'button', tabIndex: 0, view: view, onClick: onViewChange, "aria-label": monthYearAriaLabel, "aria-expanded": ariaExpanded, "data-test-automation-id": "date-picker-month-year", className: classes.select },
|
|
37
|
+
React.createElement(StyledCurrentMonth, { role: 'button', tabIndex: 0, view: view, onClick: onViewChange, "aria-label": monthYearAriaLabel, "aria-expanded": ariaExpanded, "data-test-automation-id": "date-picker-month-year", className: classes.select, ref: headerRef },
|
|
34
38
|
monthLabel,
|
|
35
39
|
React.createElement(SelectArrowDownIcon, null)),
|
|
36
40
|
React.createElement(SwitchHeaderButtonWrapper, { size: size, gap: 3, view: view },
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
|
|
2
|
-
import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef, } from 'react';
|
|
2
|
+
import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef, useLayoutEffect, } from 'react';
|
|
3
3
|
import { runKeyHandler } from '@material-ui/pickers/_shared/hooks/useKeyDown';
|
|
4
4
|
import { ArrowDown as ArrowDownIcon, ArrowUp as ArrowUpIcon, } from '@ringcentral/juno-icon';
|
|
5
5
|
import { styled, useChange, useDepsChange, useEventCallback, useForceUpdate, useRefState, } from '../../../../foundation';
|
|
@@ -7,10 +7,17 @@ import { StyledNumberPicker } from './styles/StyledNumberPicker';
|
|
|
7
7
|
import { StyledTimeIconButton } from './styles/StyledTimeIconButton';
|
|
8
8
|
import { pad } from './utils';
|
|
9
9
|
var _NumberPicker = forwardRef(function (props, ref) {
|
|
10
|
-
var onClick = props.onClick, value = props.value, onUpdateValue = props.onUpdateValue, onKeyDown = props.onKeyDown, source = props.source, automationId = props.automationId, size = props.size, minProp = props.min, maxProp = props.max, onClose = props.onClose, step = props.step, onInnerChange = props.onInnerChange, renderValue = props.renderValue, getScreenReaderLabel = props.getScreenReaderLabel, rest = __rest(props, ["onClick", "value", "onUpdateValue", "onKeyDown", "source", "automationId", "size", "min", "max", "onClose", "step", "onInnerChange", "renderValue", "getScreenReaderLabel"]);
|
|
10
|
+
var onClick = props.onClick, value = props.value, onUpdateValue = props.onUpdateValue, onKeyDown = props.onKeyDown, source = props.source, automationId = props.automationId, size = props.size, minProp = props.min, maxProp = props.max, onClose = props.onClose, step = props.step, onInnerChange = props.onInnerChange, renderValue = props.renderValue, getScreenReaderLabel = props.getScreenReaderLabel, autoFocus = props.autoFocus, rest = __rest(props, ["onClick", "value", "onUpdateValue", "onKeyDown", "source", "automationId", "size", "min", "max", "onClose", "step", "onInnerChange", "renderValue", "getScreenReaderLabel", "autoFocus"]);
|
|
11
11
|
var forceUpdate = useForceUpdate();
|
|
12
12
|
var _a = __read(useRefState(value, forceUpdate), 2), innerValueRef = _a[0], setInnerValue = _a[1];
|
|
13
13
|
var rangeRef = useRef({ max: maxProp, min: minProp });
|
|
14
|
+
var pickerRef = useRef(null);
|
|
15
|
+
useLayoutEffect(function () {
|
|
16
|
+
if (autoFocus) {
|
|
17
|
+
pickerRef.current.focus();
|
|
18
|
+
}
|
|
19
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
20
|
+
}, []);
|
|
14
21
|
useDepsChange(function () {
|
|
15
22
|
rangeRef.current = { max: maxProp, min: minProp };
|
|
16
23
|
}, [maxProp, minProp]);
|
|
@@ -100,7 +107,7 @@ var _NumberPicker = forwardRef(function (props, ref) {
|
|
|
100
107
|
return 'large';
|
|
101
108
|
}
|
|
102
109
|
})();
|
|
103
|
-
return (React.createElement(StyledNumberPicker, __assign({ tabIndex: 0, onKeyDown: handleKeyDown, "aria-live": "assertive", "aria-label": label }, rest),
|
|
110
|
+
return (React.createElement(StyledNumberPicker, __assign({ tabIndex: 0, onKeyDown: handleKeyDown, "aria-live": "assertive", "aria-label": label, ref: pickerRef }, rest),
|
|
104
111
|
React.createElement(StyledTimeIconButton, { tabIndex: -1, size: iconSize, color: "neutral.f04", wrapperSize: size, disabled: increaseDisabled, onClick: function () {
|
|
105
112
|
onUpdateValue(increaseValue);
|
|
106
113
|
}, symbol: ArrowUpIcon, "data-test-automation-id": automationId && automationId + "-prev-pagination", "aria-label": "Arrow Up" }),
|
|
@@ -238,7 +238,7 @@ var _RcTimePicker = forwardRef(function (inProps, ref) {
|
|
|
238
238
|
React.createElement(StyledPickerPopperWrap, { size: size }, selectionShowType === 'none' ? (React.createElement(React.Fragment, null,
|
|
239
239
|
React.createElement(NumberPicker, __assign({ ref: hourRef, size: size, onInnerChange: handleHourInnerChange, onClick: setHourSelectionShow, onClose: closeMenu, value: hourValue }, boundary.hour, { onUpdateValue: handleHourChange, step: 1, source: isTwelveHourSystem
|
|
240
240
|
? twelveHourSystemSource
|
|
241
|
-
: twentyFourHourSystemSource, renderValue: renderHourValue, automationId: "time-picker-hour" }, HourPickerProps)),
|
|
241
|
+
: twentyFourHourSystemSource, renderValue: renderHourValue, automationId: "time-picker-hour", autoFocus: true }, HourPickerProps)),
|
|
242
242
|
React.createElement(RcBox, { textAlign: "center", width: "48px" }, ":"),
|
|
243
243
|
React.createElement(NumberPicker, __assign({ ref: minuteRef, size: size }, boundary.minute, { onUpdateValue: handleMinuteChange, onClick: setMinuteSelectionShow, onClose: closeMenu, value: minuteValue, source: minuteSource, step: TIME_GAP, automationId: "time-picker-minute" }, MinutePickerProps)),
|
|
244
244
|
isTwelveHourSystem && (React.createElement("div", null,
|
|
@@ -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;
|