@ringcentral/juno 2.22.0 → 2.22.1-hotfix.1

package/es6/components/Buttons/IconButton/IconButton.js

@@ -8,9 +8,8 @@ import { RcButtonBase } from '../ButtonBase';
 import { rcIconButtonWarning, } from './deprecated/IconButtonProps';
 import { iconButtonStyle } from './styles';
 import { RcIconButtonClasses, RcIconButtonTouchRippleClasses } from './utils';
-var _RcIconButton = memo(forwardRef(function (inProps, ref) {
+var _RcIconButton = memo(forwardRef(function (props, ref) {
     var _a;
-    var props = useThemeProps({ props: inProps, name: 'RcIconButton' });
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useDeprecatedCheck(RcIconButton, props, rcIconButtonWarning);
@@ -54,18 +53,22 @@ var _RcIconButton = memo(forwardRef(function (inProps, ref) {
     }
     return iconButton;
 }));
-var RcIconButton = styled(withTooltip(_RcIconButton))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), iconButtonStyle);
+var RcIconButton = styled(withTooltip(_RcIconButton)).attrs(function (inProps) {
+    var _a = useThemeProps({ props: inProps, name: 'RcIconButton' }), 
+    // @ts-ignore
+    theme = _a.theme, 
+    // Omit className, prevent duplicate className
+    className = _a.className, _b = _a.variant, variant = _b === void 0 ? 'round' : _b, _c = _a.color, color = _c === void 0 ? 'neutral.f04' : _c, _d = _a.size, size = _d === void 0 ? 'medium' : _d, _e = _a.type, type = _e === void 0 ? 'button' : _e, _f = _a.focusRipple, focusRipple = _f === void 0 ? true : _f, _g = _a.disableTouchRipple, disableTouchRipple = _g === void 0 ? true : _g, _h = _a.classes, classes = _h === void 0 ? {} : _h, _j = _a.useRcTooltip, useRcTooltip = _j === void 0 ? true : _j, _k = _a.focusVariant, focusVariant = _k === void 0 ? 'highlight' : _k, rest = __rest(_a, ["theme", "className", "variant", "color", "size", "type", "focusRipple", "disableTouchRipple", "classes", "useRcTooltip", "focusVariant"]);
+    return __assign({ variant: variant,
+        color: color,
+        size: size,
+        type: type,
+        focusRipple: focusRipple,
+        disableTouchRipple: disableTouchRipple,
+        classes: classes,
+        useRcTooltip: useRcTooltip,
+        focusVariant: focusVariant }, rest);
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), iconButtonStyle);
 RcIconButton.displayName = 'RcIconButton';
-RcIconButton.defaultProps = {
-    variant: 'round',
-    color: 'neutral.f04',
-    size: 'medium',
-    type: 'button',
-    focusRipple: true,
-    disableTouchRipple: true,
-    classes: {},
-    useRcTooltip: true,
-    focusVariant: 'highlight',
-};
 export { RcIconButton };
 var templateObject_1;

package/es6/components/Buttons/SplitButton/SplitButton.js

@@ -3,7 +3,7 @@ import React, { forwardRef, useMemo, useRef, useState, } from 'react';
 import clsx from 'clsx';
 import { checkDefaultPrevented, combineClasses, combineProps, logInDev, omit, styled, useEventCallback, useEver, useForkRef, useTheme, useThemeProps, } from '../../../foundation';
 import { RcMenu } from '../../Menu/Menu';
-import { RcButton } from '../Button';
+import { RcButtonDefaultVariant, RcButtonDefaultSize, RcButtonDefaultColor, RcButton, } from '../Button';
 import { RcButtonGroup } from '../ButtonGroup';
 import { splitButtonStyle, StyledArrowIcon } from './styles';
 import { getVariant, RcSplitButtonClasses, RcSplitButtonTouchRippleClasses, variantIsHandler, } from './utils';
@@ -155,17 +155,17 @@ var _RcSplitButton = forwardRef(function (inProps, ref) {
                 variantIs(['plain', 'plainIcon']) }, rest, { className: clsx(className, (_a = {},
                 _a[RcSplitButtonClasses.menuOpen] = isMenuOpen,
                 _a)), innerRef: splitRef, classes: classes }),
-            React.createElement(RcButton, __assign({}, _ActionButtonProps)),
-            React.createElement(RcButton, __assign({ "aria-haspopup": "listbox" }, _ControlButtonProps),
+            React.createElement(RcButton, __assign({}, _ActionButtonProps, { focusVariant: "ripple" })),
+            React.createElement(RcButton, __assign({ "aria-haspopup": "listbox" }, _ControlButtonProps, { focusVariant: "ripple" }),
                 React.createElement(StyledArrowIcon, __assign({ open: isMenuOpen, size: variantIs(['round', 'plainIcon']) ? size : toButtonSize }, ArrowIconProps)))),
         isMenuEverOpen && (React.createElement(RcMenu, __assign({}, MenuProps, { anchorEl: anchorEl, open: isMenuOpen, onClose: handleClose }), children))));
 });
 var RcSplitButton = styled(_RcSplitButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), splitButtonStyle);
 RcSplitButton.displayName = 'RcSplitButton';
 RcSplitButton.defaultProps = {
-    size: RcButton.defaultProps.size,
-    color: RcButton.defaultProps.color,
-    variant: RcButton.defaultProps.variant,
+    size: RcButtonDefaultSize,
+    color: RcButtonDefaultColor,
+    variant: RcButtonDefaultVariant,
     ControlButtonProps: {},
     ActionButtonProps: {},
     MenuProps: {},

package/es6/components/Buttons/SplitButton/styles/StyledSplitButton.js

@@ -38,7 +38,7 @@ var iconButtonStyle = function (_a) {
     var width = px(currIconSize);
     return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    .", " {\n      &.", " {\n        min-width: auto;\n        ", ";\n\n        ", " {\n          margin-right: 0;\n        }\n      }\n\n      &.", " {\n        min-width: ", ";\n        width: ", ";\n      }\n    }\n  "], ["\n    .", " {\n      &.", " {\n        min-width: auto;\n        ",
         ";\n\n        ", " {\n          margin-right: 0;\n        }\n      }\n\n      &.", " {\n        min-width: ", ";\n        width: ", ";\n      }\n    }\n  "])), RcSplitButtonClasses.groupedHorizontal, RcSplitButtonClasses.actionButton, variant === 'plainIcon'
-        ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n              padding: 0;\n              box-shadow: none;\n\n              ", " {\n                ", "\n              }\n            "], ["\n              padding: 0;\n              box-shadow: none;\n\n              ", " {\n                ", "\n              }\n            "])), focusVisible, plainIconButtonFocusStyle({ radius: 'circle' })) : css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n              padding: ", ";\n            "], ["\n              padding: ", ";\n            "])), spacing(space, rightSpace, space, space)), RcIcon, RcSplitButtonClasses.controlButton, width, width);
+        ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n              padding: 0;\n              box-shadow: none;\n\n              ", " {\n                outline: none;\n                ", "\n              }\n            "], ["\n              padding: 0;\n              box-shadow: none;\n\n              ", " {\n                outline: none;\n                ", "\n              }\n            "])), focusVisible, plainIconButtonFocusStyle({ radius: 'circle' })) : css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n              padding: ", ";\n            "], ["\n              padding: ", ";\n            "])), spacing(space, rightSpace, space, space)), RcIcon, RcSplitButtonClasses.controlButton, width, width);
 };
 export var splitButtonStyle = function (props) {
     var variant = props.variant, disabled = props.disabled, loading = props.loading;
@@ -47,14 +47,14 @@ export var splitButtonStyle = function (props) {
     var isContainer = variant === 'contained';
     var activeColor24 = setOpacity(currColor, '24');
     var containedActiveColor = setOpacity(currColor, '24', true);
-    return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    .", " {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n\n      &:after {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n\n    .", " {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      &:after {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n\n    &.", " {\n      ", ";\n\n      ", ";\n    }\n\n    .", " {\n      ", ";\n\n      &.", " {\n        padding: 0;\n        min-width: 24px;\n        ", ";\n      }\n\n      &.", " {\n        border-right: ", ";\n      }\n\n      &:not(.", ") {\n        margin-left: 0;\n      }\n\n      ", ";\n    }\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    &.", " {\n      ", ";\n\n      .", " {\n        background: ", ";\n      }\n    }\n  "], ["\n    .", " {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n\n      &:after {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n\n    .", " {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      &:after {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n\n    &.", " {\n      ",
+    return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    .", " {\n      &:not(:last-child) {\n        border-right: unset;\n      }\n    }\n\n    .", " {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n\n      &:after {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n\n    .", " {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      &:after {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n\n    &.", " {\n      ", ";\n\n      ", ";\n    }\n\n    .", " {\n      ", ";\n\n      &.", " {\n        padding: 0;\n        min-width: 24px;\n        ", ";\n      }\n\n      &.", " {\n        border-right: ", ";\n      }\n\n      &:not(.", ") {\n        margin-left: 0;\n      }\n\n      ", ";\n    }\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    &.", " {\n      ", ";\n\n      .", " {\n        background: ", ";\n      }\n    }\n  "], ["\n    .", " {\n      &:not(:last-child) {\n        border-right: unset;\n      }\n    }\n\n    .", " {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n\n      &:after {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n\n    .", " {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n\n      &:after {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n\n    &.", " {\n      ",
         ";\n\n      ",
         ";\n    }\n\n    .", " {\n      ",
         ";\n\n      &.", " {\n        padding: 0;\n        min-width: 24px;\n        ", ";\n      }\n\n      &.", " {\n        border-right: ", ";\n      }\n\n      &:not(.", ") {\n        margin-left: 0;\n      }\n\n      ",
         ";\n    }\n\n    ",
         ";\n\n    ",
         ";\n\n    ", ";\n\n    &.", " {\n      ",
-        ";\n\n      .", " {\n        background: ", ";\n      }\n    }\n  "])), RcSplitButtonClasses.actionButton, RcSplitButtonClasses.controlButton, RcSplitButtonClasses.root, !disabled &&
+        ";\n\n      .", " {\n        background: ", ";\n      }\n    }\n  "])), RcSplitButtonClasses.groupedContainedHorizontal, RcSplitButtonClasses.actionButton, RcSplitButtonClasses.controlButton, RcSplitButtonClasses.root, !disabled &&
         variantIs(['outlined', 'text', 'round']) &&
         !loading && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        transition: ", ";\n\n        ", " {\n          &:hover {\n            background: ", ";\n          }\n        }\n      "], ["\n        transition: ", ";\n\n        ", " {\n          &:hover {\n            background: ", ";\n          }\n        }\n      "])), transition, nonTouchHoverMedia, buttonHoverColor), variantIs(['text', 'round', 'plainIcon']) && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        align-items: center;\n\n        ", "\n      "], ["\n        align-items: center;\n\n        ",
         "\n      "])), !disabled &&

package/es6/components/Buttons/SplitButton/utils/SplitButtonUtils.js

@@ -1,5 +1,12 @@
 import { RcClasses } from '../../../../foundation';
-export var RcSplitButtonClasses = RcClasses(['root', 'groupedHorizontal', 'actionButton', 'controlButton', 'menuOpen'], 'RcSplitButton');
+export var RcSplitButtonClasses = RcClasses([
+    'root',
+    'groupedHorizontal',
+    'actionButton',
+    'controlButton',
+    'menuOpen',
+    'groupedContainedHorizontal',
+], 'RcSplitButton');
 export var RcSplitButtonTouchRippleClasses = RcClasses(['child', 'ripplePulsate'], 'RcSplitButton-TouchRipple');
 export var getVariant = function (variant) {
     switch (variant) {

package/es6/components/Downshift/Downshift.js

@@ -188,7 +188,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
         onKeyDown: onKeyDownProp,
         disabledItemsHighlightable: disabledItemsHighlightable,
         onGroupExpanded: onGroupExpanded,
-    }), focusInput = _10.focusInput, optionItems = _10.optionItems, optionsGroupList = _10.optionsGroupList, selectedItems = _10.tags, highlightedIndex = _10.highlightedIndex, getToggleButtonProps = _10.getToggleButtonProps, getTagProps = _10.getTagProps, getTagListBoxProps = _10.getTagListBoxProps, getMenuProps = _10.getMenuProps, getPopperProps = _10.getPopperProps, getInputProps = _10.getInputProps, getInputAriaProps = _10.getInputAriaProps, getLabelProps = _10.getLabelProps, getItemProps = _10.getItemProps, isOpen = _10.isOpen, inputValue = _10.inputValue, activeIndex = _10.activeIndex, setActiveIndex = _10.setActiveIndex, setHighlightedIndex = _10.setHighlightedIndex, onInputChange = _10.onInputChange, keepHighlightedIndex = _10.keepHighlightedIndex, changeHighlightedIndexReason = _10.changeHighlightedIndexReason, closeMenu = _10.closeMenu, openMenu = _10.openMenu, reset = _10.reset, getClearButtonProps = _10.getClearButtonProps, noOptionItem = _10.noOptionItem, getNoOptionsProps = _10.getNoOptionsProps, isKeepHighlightedIndex = _10.isKeepHighlightedIndex, isDownshiftFocused = _10.focused, autoCompleteSelectedIndex = _10.autoCompleteSelectedIndex;
+    }), focusInput = _10.focusInput, optionItems = _10.optionItems, optionsGroupList = _10.optionsGroupList, selectedItems = _10.tags, highlightedIndex = _10.highlightedIndex, getToggleButtonProps = _10.getToggleButtonProps, getTagProps = _10.getTagProps, getTagListBoxProps = _10.getTagListBoxProps, getMenuProps = _10.getMenuProps, getPopperProps = _10.getPopperProps, getInputProps = _10.getInputProps, getInputAriaProps = _10.getInputAriaProps, getLabelProps = _10.getLabelProps, getItemProps = _10.getItemProps, isOpen = _10.isOpen, inputValue = _10.inputValue, activeIndex = _10.activeIndex, setActiveIndex = _10.setActiveIndex, setHighlightedIndex = _10.setHighlightedIndex, onInputChange = _10.onInputChange, keepHighlightedIndex = _10.keepHighlightedIndex, changeHighlightedIndexReason = _10.changeHighlightedIndexReason, closeMenu = _10.closeMenu, openMenu = _10.openMenu, reset = _10.reset, getClearButtonProps = _10.getClearButtonProps, noOptionItem = _10.noOptionItem, getNoOptionsProps = _10.getNoOptionsProps, isKeepHighlightedIndex = _10.isKeepHighlightedIndex, isDownshiftFocused = _10.focused, autoCompleteSelectedIndex = _10.autoCompleteSelectedIndex, popperElementRef = _10.popperElementRef;
     var open = Boolean((isOpen || noOptionItem) && textFieldRef.current);
     var _11 = getInputProps(), onBlur = _11.onBlur, InputProps = __rest(_11, ["onBlur"]);
     var helperText = isNew
@@ -303,7 +303,7 @@ var _RcDownshift = memo(forwardRef(function (inProps, ref) {
                 maxLength: maxLength, containerRef: inputContainerRef }, getInputAriaProps(TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.inputProps)),
         }, rest), { value: inputValue, clearBtn: false })),
         !helperText && screenReaderText && (React.createElement(RcVisuallyHidden, { id: describedbyId }, screenReaderText)),
-        React.createElement(StyledPopper, __assign({ open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, modifiers: { fixOffsets: fixOffsetsModifer }, 
+        React.createElement(StyledPopper, __assign({ ref: popperElementRef, open: open, position: position, component: PopperComponent, placement: "bottom-start", anchorEl: anchorElRef.current, "data-test-automation-id": "suggestions-list", popperRef: popperRef, modifiers: { fixOffsets: fixOffsetsModifer }, 
             // * view type in popper.js
             popperOptions: {
                 onUpdate: function (e) {

package/es6/components/Downshift/SuggestionList/utils/useSuggestionList.js

@@ -116,9 +116,6 @@ export var useSuggestionList = function (_a) {
         var groupOrder = (currGroup === null || currGroup === void 0 ? void 0 : currGroup.order) || 0;
         return combineProps(__assign({ id: currUniqueId + "-option-" + index, onClick: function (e) {
                 selectItem(e, item);
-            }, onMouseDown: function (e) {
-                e.preventDefault();
-                e.stopPropagation();
             }, onMouseOver: function () {
                 if (highlightedIndexRef.current !== index &&
                     getIsItemCanSelected(item)) {

package/es6/components/Downshift/utils/useDownshift.js

@@ -1,4 +1,4 @@
-import { __assign, __awaiter, __generator, __read, __spread } from "tslib";
+import { __assign, __awaiter, __generator, __read, __rest, __spread } from "tslib";
 import { useCallback, useLayoutEffect, useMemo, useRef, } from 'react';
 import { combineProps, getSelectionPosition, useChange, useControlled, useId, useSleep, } from '../../../foundation';
 import { useSuggestionList } from '../SuggestionList/utils/useSuggestionList';
@@ -27,6 +27,7 @@ export var useDownshift = function (_a) {
     var stopAutoSelectRef = useRef(false);
     var fromPasteString = useRef('');
     var keepHighlightedIndexRef = useRef(false);
+    var popperElementRef = useRef(null);
     var _g = useSleep(), sleep = _g.sleep, getSleeping = _g.getSleeping;
     // * when that is autocomplete, that will never be multiple
     var multiple = isAutocomplete ? false : multipleProp;
@@ -144,7 +145,20 @@ export var useDownshift = function (_a) {
                 }
             }
         },
-    }), inputValue = _j.inputValue, optionItems = _j.optionItems, optionsGroupList = _j.optionsGroupList, highlightedIndexRef = _j.highlightedIndexRef, changeHighlightedIndexReasonRef = _j.changeHighlightedIndexReasonRef, forceUpdate = _j.forceUpdate, selectItem = _j.selectItem, handleF10KeyDown = _j.handleF10KeyDown, onKeyFocusedIndexHandle = _j.onKeyFocusedIndexHandle, setHighlightedIndex = _j.setHighlightedIndex, updateInputValue = _j.updateInputValue, clearInput = _j.clearInput, getNextFocusableOption = _j.getNextFocusableOption, getItemProps = _j.getItemProps, focusInput = _j.focusInput, resetSuggestionList = _j.reset, getSuggestionListInputProps = _j.getInputProps, getSuggestionListInputAriaProps = _j.getInputAriaProps, getSuggestionListClearButtonProps = _j.getClearButtonProps, getLabelProps = _j.getLabelProps, getMenuProps = _j.getMenuProps;
+    }), inputValue = _j.inputValue, optionItems = _j.optionItems, optionsGroupList = _j.optionsGroupList, highlightedIndexRef = _j.highlightedIndexRef, changeHighlightedIndexReasonRef = _j.changeHighlightedIndexReasonRef, forceUpdate = _j.forceUpdate, selectItem = _j.selectItem, handleF10KeyDown = _j.handleF10KeyDown, onKeyFocusedIndexHandle = _j.onKeyFocusedIndexHandle, setHighlightedIndex = _j.setHighlightedIndex, updateInputValue = _j.updateInputValue, clearInput = _j.clearInput, getNextFocusableOption = _j.getNextFocusableOption, getSuggestionListItemProps = _j.getItemProps, focusInput = _j.focusInput, resetSuggestionList = _j.reset, getSuggestionListInputProps = _j.getInputProps, getSuggestionListInputAriaProps = _j.getInputAriaProps, getSuggestionListClearButtonProps = _j.getClearButtonProps, getLabelProps = _j.getLabelProps, getMenuProps = _j.getMenuProps;
+    var getItemProps = function (props) {
+        var onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, rest = __rest(props, ["onMouseDown", "onMouseUp"]);
+        return getSuggestionListItemProps(__assign(__assign({}, rest), { onMouseDown: function (e) {
+                // `getPopperProps` will prevent change focus when mouse down popper
+                // but suggestion item is an exception.
+                // so we need stop propagation to make sure focus can be changed
+                e.stopPropagation();
+                onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
+            }, onMouseUp: function (e) {
+                focusInput();
+                onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(e);
+            } }));
+    };
     var readOnly = !isAutocomplete && !multiple && tags.length >= 1 ? true : undefined;
     var closeMenu = function (e, reason) {
         keepHighlightedIndexRef.current = false;
@@ -280,8 +294,8 @@ export var useDownshift = function (_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var getInputProps = function (props) {
-        var suggestionListItemProps = getSuggestionListInputProps(props);
-        return combineProps(__assign(__assign({}, suggestionListItemProps), { onPaste: function (e) {
+        var suggestionListInputProps = getSuggestionListInputProps(props);
+        return combineProps(__assign(__assign({}, suggestionListInputProps), { onPaste: function (e) {
                 var _a;
                 if (freeSolo) {
                     var clipboardData = e.clipboardData;
@@ -318,7 +332,12 @@ export var useDownshift = function (_a) {
                 stopAutoSelectRef.current = false;
                 blurTags();
             }, onBlur: function (e) {
+                var _a;
                 setInputFocused(false);
+                // mouse down suggestion item will change focus,
+                // but we don't want to close popper in this case
+                if ((_a = popperElementRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))
+                    return;
                 if (autoSelect && !stopAutoSelectRef.current) {
                     if (!freeSolo)
                         selectItem(e, optionItems[highlightedIndexRef.current]);
@@ -530,5 +549,6 @@ export var useDownshift = function (_a) {
         id: downshiftId,
         inputChanged: isInputValueChangedRef.current,
         autoCompleteSelectedIndex: autoCompleteSelectedIndexRef.current,
+        popperElementRef: popperElementRef,
     };
 };

package/es6/components/Forms/Switch/Switch.js

@@ -1,18 +1,29 @@
 import { __assign, __makeTemplateObject, __rest } from "tslib";
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useMemo, useRef } from 'react';
 import clsx from 'clsx';
 import MuiSwitch from '@material-ui/core/Switch';
-import { combineClasses, omit, useThemeProps, } from '../../../foundation';
+import { combineClasses, omit, useThemeProps, useForkRef, } from '../../../foundation';
 import styled from '../../../foundation/styled-components';
 import { RcFormControlLabel } from '../FormControlLabel';
 import { SwitchStyle } from './styles';
 import { RcSwitchClasses } from './utils';
 var _RcSwitch = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcSwitch' });
-    var label = props.label, _a = props.formControlLabelProps, formControlLabelProps = _a === void 0 ? {} : _a, focusVisibleClassNameProp = props.focusVisibleClassName, classesProp = props.classes, color = props.color, trackColor = props.trackColor, rest = __rest(props, ["label", "formControlLabelProps", "focusVisibleClassName", "classes", "color", "trackColor"]);
+    var label = props.label, _a = props.formControlLabelProps, formControlLabelProps = _a === void 0 ? {} : _a, focusVisibleClassNameProp = props.focusVisibleClassName, classesProp = props.classes, color = props.color, trackColor = props.trackColor, _b = props.inputRef, inputRefProp = _b === void 0 ? null : _b, onFocus = props.onFocus, onBlur = props.onBlur, rest = __rest(props, ["label", "formControlLabelProps", "focusVisibleClassName", "classes", "color", "trackColor", "inputRef", "onFocus", "onBlur"]);
     var classes = useMemo(function () { return combineClasses(omit(RcSwitchClasses, ['focusVisible']), classesProp); }, [classesProp]);
     var focusVisibleClassName = useMemo(function () { return clsx(RcSwitchClasses.focusVisible, focusVisibleClassNameProp); }, [focusVisibleClassNameProp]);
-    var Switch = (React.createElement(MuiSwitch, __assign({ ref: ref, focusVisibleClassName: focusVisibleClassName, classes: classes }, rest, { color: "default", size: "medium", disableRipple: true, disableTouchRipple: true })));
+    var inputRef = useRef(null);
+    var handleInputRef = useForkRef(inputRef, inputRefProp);
+    var Switch = (React.createElement(MuiSwitch, __assign({ ref: ref, inputRef: handleInputRef, focusVisibleClassName: focusVisibleClassName, classes: classes }, rest, { color: "default", size: "medium", disableRipple: true, disableTouchRipple: true, onFocus: function (e) {
+            var _a;
+            if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.matches('[data-focus-visible-added]')) {
+                e.currentTarget.parentElement.setAttribute('data-focus-visible-within', '');
+            }
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        }, onBlur: function (e) {
+            e.currentTarget.parentElement.removeAttribute('data-focus-visible-within');
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        } })));
     if (label) {
         return (React.createElement(RcFormControlLabel, __assign({}, formControlLabelProps, { label: label, control: Switch })));
     }

package/es6/components/Forms/Switch/styles/SwitchStyle.js

@@ -12,6 +12,6 @@ export var SwitchStyle = function (_a) {
     var colorProp = _a.color, trackColorProp = _a.trackColor;
     var checkedColor = getParsePaletteColor(colorProp);
     var trackColor = getParsePaletteColor(trackColorProp, defaultTrackColorArray);
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    &.", " {\n      /* make sure focus ring can show correctly */\n      overflow: visible;\n      padding: 0px;\n      ", ";\n      ", ";\n\n      .", " {\n        ", ";\n        ", ";\n        padding: 0;\n        background-color: transparent;\n        transform: translateX(", ");\n\n        &.", " {\n          transform: translateX(", ");\n        }\n      }\n\n      .", " {\n        ", ";\n        background-color: ", ";\n        box-shadow: none;\n      }\n\n      .", " {\n        ", ";\n        opacity: 1;\n        margin: 0;\n        border-radius: ", ";\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        ", "\n      }\n\n      ", " {\n        &:hover {\n          ", ";\n        }\n      }\n\n      &:active {\n        ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      /* make sure focus ring can show correctly */\n      overflow: visible;\n      padding: 0px;\n      ", ";\n      ", ";\n\n      .", " {\n        ", ";\n        ", ";\n        padding: 0;\n        background-color: transparent;\n        transform: translateX(", ");\n\n        &.", " {\n          transform: translateX(", ");\n        }\n      }\n\n      .", " {\n        ", ";\n        background-color: ", ";\n        box-shadow: none;\n      }\n\n      .", " {\n        ", ";\n        opacity: 1;\n        margin: 0;\n        border-radius: ", ";\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        background-color: ", ";\n      }\n\n      .", " + .", " {\n        ", "\n      }\n\n      ", " {\n        &:hover {\n          ", ";\n        }\n      }\n\n      &:active {\n        ", ";\n      }\n    }\n  "])), RcSwitchClasses.root, widthCss, heightCss, RcSwitchClasses.switchBase, widthCss, heightCss, spacing(-2), RcSwitchClasses.checked, spacing(2), RcSwitchClasses.thumb, thumbSize, thumbColor, RcSwitchClasses.track, heightCss, radius('round'), trackColor, RcSwitchClasses.checked, RcSwitchClasses.track, checkedColor, RcSwitchClasses.disabled, RcSwitchClasses.track, disabledColor, RcSwitchClasses.focusVisible, RcSwitchClasses.track, focusRing('normal'), nonTouchHoverMedia, notDisabledSwitchBase('08', checkedColor, trackColor), notDisabledSwitchBase('24', checkedColor, trackColor));
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    &.", " {\n      padding: 0px;\n      ", ";\n      ", ";\n\n      &[data-focus-visible-within] {\n        border-radius: 100vw;\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: 100vw;\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, focusRing('normal'), 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));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/es6/components/Forms/Switch/utils/SwitchUtils.js

@@ -1,10 +1,2 @@
 import { RcClasses } from '../../../../foundation';
-export var RcSwitchClasses = RcClasses([
-    'root',
-    'switchBase',
-    'thumb',
-    'track',
-    'checked',
-    'disabled',
-    'focusVisible',
-], 'RcSwitch');
+export var RcSwitchClasses = RcClasses(['root', 'switchBase', 'thumb', 'track', 'checked', 'disabled'], 'RcSwitch');

package/es6/components/Forms/TextField/TextField.js

@@ -2,7 +2,7 @@ import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
 import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import MuiTextField from '@material-ui/core/TextField';
 import { DeleteCircle } from '@ringcentral/juno-icon';
-import { clearReactReferencesInNode, combineClasses, combineProps, styled, useControlled, useDeprecatedCheck, useEventCallback, useForkRef, useThemeProps, } from '../../../foundation';
+import { clearReactReferencesInNode, combineClasses, combineProps, styled, useControlled, useDeprecatedCheck, useEventCallback, useForkRef, useThemeProps, useId, } from '../../../foundation';
 import { useRcFormContext } from '../Form/Form/FormContext';
 import { ClearIconButton, TextFieldStyle } from './styles';
 import { RcOutlineTextFieldIconSizes, RcOutlineTextFieldInputClasses, RcTextFieldClasses, RcTextFieldFormHelperTextClasses, RcTextFieldInputClasses, RcTextFieldInputLabelClasses, } from './utils';
@@ -41,7 +41,7 @@ var _RcTextField = forwardRef(function (inProps, ref) {
     // TODO: remove when remove focusOnMount
     autoFocusProp = _a === void 0 ? focusOnMount : _a, InputPropsProp = props.InputProps, error = props.error, helperText = props.helperText, 
     // no need assign to MuiTextField
-    defaultValue = props.defaultValue, inputRefProp = props.inputRef, _b = props.autoSelect, autoSelect = _b === void 0 ? selectOnMount : _b, autoFocusDelay = props.autoFocusDelay, clearLabel = props.clearLabel, clearButtonProps = props.clearButtonProps, clearBtn = props.clearBtn, validate = props.validate, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onClear = props.onClear, id = props.id, 
+    defaultValue = props.defaultValue, inputRefProp = props.inputRef, _b = props.autoSelect, autoSelect = _b === void 0 ? selectOnMount : _b, autoFocusDelay = props.autoFocusDelay, clearLabel = props.clearLabel, clearButtonProps = props.clearButtonProps, clearBtn = props.clearBtn, validate = props.validate, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onClear = props.onClear, idProp = props.id, 
     // #region outline pick props
     variant = props.variant, radius = props.radius, size = props.size, align = props.align, textVariant = props.textVariant, gutterBottom = props.gutterBottom, color = props.color, 
     // #endregion
@@ -65,7 +65,7 @@ var _RcTextField = forwardRef(function (inProps, ref) {
         onChange === null || onChange === void 0 ? void 0 : onChange(fakeEvent);
         setValidateMessage('');
     });
-    var endAdornment = useMemo(function () {
+    var endAdornment = (function () {
         var getCleanButton = function () {
             var iconTitle = clearLabel || (clearButtonProps === null || clearButtonProps === void 0 ? void 0 : clearButtonProps.title);
             var combineClearProps = combineProps({
@@ -86,48 +86,32 @@ var _RcTextField = forwardRef(function (inProps, ref) {
             return InputPropsProp.endAdornment;
         }
         return clearBtn ? getCleanButton() : undefined;
-    }, [
-        InputPropsProp,
-        clearAriaLabel,
-        clearBtn,
-        clearButtonProps,
-        clearLabel,
-        handleClear,
-        size,
-    ]);
-    var events = useMemo(function () {
-        return combineProps({
-            onBlur: function () {
-                runValidate();
-            },
-            onFocus: function () {
-                if (validateMessage !== '') {
-                    setValidateMessage('');
-                }
-            },
-        }, {
-            onBlur: onBlur,
-            onFocus: onFocus,
-        });
-    }, [onBlur, onFocus, runValidate, validateMessage]);
+    })();
+    var events = combineProps({
+        onBlur: function () {
+            runValidate();
+        },
+        onFocus: function () {
+            if (validateMessage !== '') {
+                setValidateMessage('');
+            }
+        },
+    }, {
+        onBlur: onBlur,
+        onFocus: onFocus,
+    });
     var classes = useMemo(function () { return combineClasses(RcTextFieldClasses, classesProp); }, [classesProp]);
-    var InputProps = useMemo(function () {
-        var curr = {
-            outline: combineOutlineClasses,
-            borderLess: undefined,
-            standard: undefined,
-        }[variant];
-        return combineProps({
-            classes: curr || RcTextFieldInputClasses,
-            disableUnderline: ['outline', 'borderLess', 'inline'].includes(variant),
-        }, __assign(__assign({}, InputPropsProp), { endAdornment: endAdornment }));
-    }, [InputPropsProp, endAdornment, variant]);
-    var FormHelperTextProps = useMemo(function () {
-        return combineProps({ classes: RcTextFieldFormHelperTextClasses }, FormHelperTextPropsProp);
-    }, [FormHelperTextPropsProp]);
-    var InputLabelProps = useMemo(function () {
-        return combineProps({ classes: RcTextFieldInputLabelClasses, shrink: true }, InputLabelPropsProp);
-    }, [InputLabelPropsProp]);
+    var additionClasses = {
+        outline: combineOutlineClasses,
+        borderLess: undefined,
+        standard: undefined,
+    }[variant];
+    var InputProps = combineProps({
+        classes: additionClasses || RcTextFieldInputClasses,
+        disableUnderline: ['outline', 'borderLess', 'inline'].includes(variant),
+    }, __assign(__assign({}, InputPropsProp), { endAdornment: endAdornment }));
+    var FormHelperTextProps = combineProps({ classes: RcTextFieldFormHelperTextClasses }, FormHelperTextPropsProp);
+    var InputLabelProps = combineProps({ classes: RcTextFieldInputLabelClasses, shrink: true }, InputLabelPropsProp);
     useLayoutEffect(function () {
         var inputElm = innerRef.current;
         var autoFocus = autoFocusProp || (InputPropsProp === null || InputPropsProp === void 0 ? void 0 : InputPropsProp.autoFocus);
@@ -155,6 +139,8 @@ var _RcTextField = forwardRef(function (inProps, ref) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    // TODO: remove this after upgrade to Mui5
+    var id = useId(idProp);
     useEffect(function () {
         if (id)
             formContext.set(id, { validate: function () { return runValidate(); } });

package/es6/components/List/ListItem/ListItem.js

@@ -6,8 +6,7 @@ import { combineClasses, combineProps, styled, useDeprecatedCheck, useThemeProps
 import { withTooltip } from '../../Tooltip';
 import { ListItemStyle } from './styles';
 import { RcListItemClasses, RcListItemMultilineClassName, RcListItemRippleClasses, } from './utils';
-var _RcListItem = forwardRef(function (inProps, ref) {
-    var props = useThemeProps({ props: inProps, name: 'RcListItem' });
+var _RcListItem = forwardRef(function (props, ref) {
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useDeprecatedCheck(RcListItem, props, [
@@ -42,14 +41,18 @@ var _RcListItem = forwardRef(function (inProps, ref) {
     }, [TouchRipplePropsProp, button]);
     return (React.createElement(MuiListItem, __assign({}, rest, additionProps, { ref: ref, title: typeof title === 'string' ? title : undefined, classes: classes, className: ListItemClassName, button: button }), children));
 });
-var RcListItem = styled(withTooltip(_RcListItem))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), ListItemStyle);
-RcListItem.defaultProps = {
-    singleLine: false,
-    button: true,
-    canHover: true,
-    size: 'medium',
-    focusVariant: 'highlight',
-};
+var RcListItem = styled(withTooltip(_RcListItem)).attrs(function (inProps) {
+    var _a = useThemeProps({ props: inProps, name: 'RcListItem' }), 
+    // @ts-ignore
+    theme = _a.theme, 
+    // Omit className, prevent duplicate className
+    className = _a.className, _b = _a.singleLine, singleLine = _b === void 0 ? false : _b, _c = _a.button, button = _c === void 0 ? true : _c, _d = _a.canHover, canHover = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? 'medium' : _e, _f = _a.focusVariant, focusVariant = _f === void 0 ? 'highlight' : _f, rest = __rest(_a, ["theme", "className", "singleLine", "button", "canHover", "size", "focusVariant"]);
+    return __assign({ singleLine: singleLine,
+        button: button,
+        canHover: canHover,
+        size: size,
+        focusVariant: focusVariant }, rest);
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), ListItemStyle);
 RcListItem.displayName = 'RcListItem';
 export { RcListItem };
 var templateObject_1;

package/es6/components/Menu/MenuItem/MenuItem.js

@@ -14,9 +14,8 @@ import { RcMenuListContext } from '../MenuList/MenuListContext';
 import { RcSubMenuContext } from '../SubMenu/SubMenuContext';
 import { MenuItemStyle, StyledCheckIcon } from './styles';
 import { RcMenuItemClasses, RcMenuItemRippleClasses } from './utils';
-var _RcMenuItem = forwardRef(function (inProps, ref) {
+var _RcMenuItem = forwardRef(function (props, ref) {
     var _a;
-    var props = useThemeProps({ props: inProps, name: 'RcMenuItem' });
     var classesProp = props.classes, children = props.children, color = props.color, button = props.button, className = props.className, onMouseEnter = props.onMouseEnter, onClick = props.onClick, onFocus = props.onFocus, highlighted = props.highlighted, size = props.size, type = props.type, checked = props.checked, icon = props.icon, symbol = props.symbol, avatar = props.avatar, secondaryAction = props.secondaryAction, idRef = props.idRef, isSubMenuItem = props.isSubMenuItem, TouchRipplePropsProp = props.TouchRippleProps, title = props.title, focused = props.focused, focusVariant = props.focusVariant, rest = __rest(props, ["classes", "children", "color", "button", "className", "onMouseEnter", "onClick", "onFocus", "highlighted", "size", "type", "checked", "icon", "symbol", "avatar", "secondaryAction", "idRef", "isSubMenuItem", "TouchRippleProps", "title", "focused", "focusVariant"]);
     var isCheckedType = type === 'checked';
     var menuItemId = useId('menu-item', true);
@@ -105,12 +104,16 @@ var _RcMenuItem = forwardRef(function (inProps, ref) {
         children,
         itemSubAction));
 });
-var RcMenuItem = styled(withTooltip(_RcMenuItem))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), MenuItemStyle);
-RcMenuItem.defaultProps = {
-    size: 'medium',
-    button: true,
-    focusVariant: 'highlight',
-};
+var RcMenuItem = styled(withTooltip(_RcMenuItem)).attrs(function (inProps) {
+    var _a = useThemeProps({ props: inProps, name: 'RcMenuItem' }), 
+    // @ts-ignore
+    theme = _a.theme, 
+    // Omit className, prevent duplicate className
+    className = _a.className, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.button, button = _c === void 0 ? true : _c, _d = _a.focusVariant, focusVariant = _d === void 0 ? 'highlight' : _d, rest = __rest(_a, ["theme", "className", "size", "button", "focusVariant"]);
+    return __assign({ size: size,
+        button: button,
+        focusVariant: focusVariant }, rest);
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), MenuItemStyle);
 RcMenuItem.displayName = 'RcMenuItem';
 export { RcMenuItem };
 var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "2.22.0",
+  "version": "2.22.1-hotfix.1",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",