@ringcentral/juno 2.13.1 → 2.16.0

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

@@ -19,7 +19,7 @@ var List = forwardRef(function (props, ref) {
 var SuggestionList = forwardRef(function (inProps, ref) {
     var _a;
     var props = useThemeProps({ props: inProps, name: 'RcSuggestionList' });
-    var highlightedIndex = props.highlightedIndex, options = props.options, getItemProps = props.getItemProps, getMenuProps = props.getMenuProps, renderOption = props.renderOption, inputValue = props.inputValue, groupVariant = props.groupVariant, groupExpanded = props.groupExpanded, renderGroup = props.renderGroup, optionsGroupList = props.optionsGroupList, getOptionDisabled = props.getOptionDisabled, MenuItem = props.MenuItem, changeHighlightedIndexReason = props.changeHighlightedIndexReason, isKeepHighlightedIndex = props.isKeepHighlightedIndex, componentsProp = props.components, onUpdatePopper = props.onUpdatePopper, getOptionLabel = props.getOptionLabel, padding = props.padding, _b = props.maxContainerHeight, maxContainerHeight = _b === void 0 ? '100%' : _b, classNameProp = props.className, classesProp = props.classes, _c = props.position, position = _c === void 0 ? 'absolute' : _c, rest = __rest(props, ["highlightedIndex", "options", "getItemProps", "getMenuProps", "renderOption", "inputValue", "groupVariant", "groupExpanded", "renderGroup", "optionsGroupList", "getOptionDisabled", "MenuItem", "changeHighlightedIndexReason", "isKeepHighlightedIndex", "components", "onUpdatePopper", "getOptionLabel", "padding", "maxContainerHeight", "className", "classes", "position"]);
+    var highlightedIndex = props.highlightedIndex, options = props.options, getItemProps = props.getItemProps, _b = props.virtualize, virtualize = _b === void 0 ? true : _b, getMenuProps = props.getMenuProps, renderOption = props.renderOption, selectedOptions = props.value, inputValue = props.inputValue, groupVariant = props.groupVariant, groupExpanded = props.groupExpanded, renderGroup = props.renderGroup, optionsGroupList = props.optionsGroupList, getOptionDisabled = props.getOptionDisabled, MenuItem = props.MenuItem, changeHighlightedIndexReason = props.changeHighlightedIndexReason, isKeepHighlightedIndex = props.isKeepHighlightedIndex, componentsProp = props.components, onUpdatePopper = props.onUpdatePopper, getOptionLabel = props.getOptionLabel, padding = props.padding, _c = props.maxContainerHeight, maxContainerHeight = _c === void 0 ? '100%' : _c, classNameProp = props.className, classesProp = props.classes, _d = props.position, position = _d === void 0 ? 'absolute' : _d, selectedIndex = props.selectedIndex, rest = __rest(props, ["highlightedIndex", "options", "getItemProps", "virtualize", "getMenuProps", "renderOption", "value", "inputValue", "groupVariant", "groupExpanded", "renderGroup", "optionsGroupList", "getOptionDisabled", "MenuItem", "changeHighlightedIndexReason", "isKeepHighlightedIndex", "components", "onUpdatePopper", "getOptionLabel", "padding", "maxContainerHeight", "className", "classes", "position", "selectedIndex"]);
     var vlRef = useRef(null);
     var forkVlRef = useForkRef(ref, vlRef);
     var isTitleMode = groupVariant === 'normal';
@@ -28,7 +28,7 @@ var SuggestionList = forwardRef(function (inProps, ref) {
     var itemCount = options.length;
     var classes = combineClasses(RcSuggestionListClasses, classesProp);
     var className = clsx(classNameProp, classes === null || classes === void 0 ? void 0 : classes.root);
-    var _d = useDynamicHeight({
+    var _e = useDynamicHeight({
         itemCount: itemCount,
         maxContainerHeight: maxContainerHeight,
         onContainerHeightChange: function (changeHeight) {
@@ -38,25 +38,30 @@ var SuggestionList = forwardRef(function (inProps, ref) {
                 onUpdatePopper === null || onUpdatePopper === void 0 ? void 0 : onUpdatePopper();
             }
         },
-    }), totalListHeightChanged = _d.totalListHeightChanged, style = _d.style, containerHeighRef = _d.containerHeighRef;
+    }), totalListHeightChanged = _e.totalListHeightChanged, style = _e.style, containerHeighRef = _e.containerHeighRef;
     var sleep = useSleep().sleep;
     var scrollToIndexWithRetry = useRetry(function (location) { return __awaiter(void 0, void 0, void 0, function () {
-        var toIndex, toElm;
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var toIndex, toElm_1, toElm;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
+                    toIndex = location.index;
+                    if (!virtualize) {
+                        toElm_1 = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-item-index=\"" + toIndex + "\"]");
+                        toElm_1 === null || toElm_1 === void 0 ? void 0 : toElm_1.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                        return [2 /*return*/, true];
+                    }
                     if (location.index === 0 && padding !== undefined) {
                         location = __assign(__assign({}, location), { offset: -(typeof padding === 'number'
                                 ? padding
                                 : menuListBoundaryPadding) });
                     }
-                    (_a = vlRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(location);
-                    toIndex = location.index;
+                    (_b = vlRef.current) === null || _b === void 0 ? void 0 : _b.scrollToIndex(location);
                     return [4 /*yield*/, sleep(0)];
                 case 1:
-                    _c.sent();
-                    toElm = (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("[data-item-index=\"" + toIndex + "\"]");
+                    _d.sent();
+                    toElm = (_c = listRef.current) === null || _c === void 0 ? void 0 : _c.querySelector("[data-item-index=\"" + toIndex + "\"]");
                     if (toElm) {
                         return [2 /*return*/, true];
                     }
@@ -67,10 +72,10 @@ var SuggestionList = forwardRef(function (inProps, ref) {
         retryTimes: 10,
         intervalTime: 20,
     }).retry;
-    var _e = useHighlightScroll({
+    var _f = useHighlightScroll({
         containerHeighRef: containerHeighRef,
         scrollToIndex: scrollToIndexWithRetry,
-    }), scrollerRef = _e.scrollerRef, scrollerRefFn = _e.scrollerRefFn, itemsRendered = _e.itemsRendered, scrollToHighlightedIndex = _e.scrollToHighlightedIndex;
+    }), scrollerRef = _f.scrollerRef, scrollerRefFn = _f.scrollerRefFn, itemsRendered = _f.itemsRendered, scrollToHighlightedIndex = _f.scrollToHighlightedIndex;
     // for safari, prevent popover
     var virtuosoViewPort = (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.firstElementChild;
     useLayoutEffect(function () {
@@ -80,7 +85,7 @@ var SuggestionList = forwardRef(function (inProps, ref) {
     }, [virtuosoViewPort, position]);
     var prevHighlightedIndex = usePrevious(function () { return highlightedIndex; }, true);
     useLayoutEffect(function () {
-        if (vlRef.current &&
+        if ((!virtualize || vlRef.current) &&
             !isKeepHighlightedIndex &&
             // * only scroll when reason is 'keyboard'
             changeHighlightedIndexReason &&
@@ -118,8 +123,9 @@ var SuggestionList = forwardRef(function (inProps, ref) {
             index: index,
             className: isGroupTitle ? classes.groupTitle : undefined,
         });
-        var selected = highlightedIndex === index;
-        var resultProps = __assign(__assign(__assign({}, option), itemProps), { key: itemProps.id });
+        var highlighted = highlightedIndex === index;
+        var selected = selectedIndex === index;
+        var resultProps = __assign(__assign(__assign({ 'data-item-index': !virtualize ? index : undefined }, option), itemProps), { key: itemProps.id });
         var indexInOwnGroup = resultProps.indexInOwnGroup;
         delete resultProps.indexInOwnGroup;
         // * when item is not disabled, that should check outside is that disabled
@@ -129,6 +135,7 @@ var SuggestionList = forwardRef(function (inProps, ref) {
         var state = {
             inputValue: inputValue,
             selected: selected,
+            highlighted: highlighted,
             index: index,
             indexInOwnGroup: indexInOwnGroup,
         };
@@ -141,9 +148,11 @@ var SuggestionList = forwardRef(function (inProps, ref) {
         }
         // TODO: that MenuItem will be remove
         if (MenuItem) {
-            return (React.createElement(MenuItem, __assign({}, resultProps, { itemId: option.id, "data-suggestion-item-id": option.id, isHighlighted: selected, isMember: option.isMember })));
+            return (React.createElement(MenuItem
+            // when not virtualize, use index as key
+            , __assign({}, resultProps, { itemId: option.id, "data-suggestion-item-id": option.id, isHighlighted: selected || highlighted, isMember: option.isMember })));
         }
-        return (React.createElement(RcMenuItem, __assign({ component: "div", selected: selected }, omit(resultProps, [
+        return (React.createElement(RcMenuItem, __assign({ component: "div", selected: selected, focused: highlighted }, omit(resultProps, [
             'isSuggestion',
             'freeSolo',
             'label',
@@ -164,17 +173,23 @@ var SuggestionList = forwardRef(function (inProps, ref) {
     var components = useMemo(function () {
         return __assign({ List: List, Header: PaddingComponent, Footer: PaddingComponent }, componentsProp);
     }, [componentsProp, PaddingComponent]);
-    return (React.createElement(SuggestionListContext.Provider, { value: listRef },
-        React.createElement(Virtuoso, __assign({ ref: forkVlRef, totalCount: itemCount, data: itemData, className: className, components: components, itemContent: itemContent }, getMenuProps(), combineProps({
-            scrollerRef: function (scrollElm) {
-                scrollerRefFn(scrollElm);
-                modifyVlScrollerStyle(scrollElm, position);
-            },
-            itemsRendered: itemsRendered,
-            totalListHeightChanged: totalListHeightChanged,
-            style: style,
-            isScrolling: handleScrolling,
-        }, rest)))));
+    return (React.createElement(SuggestionListContext.Provider, { value: listRef }, virtualize ? (React.createElement(Virtuoso, __assign({ ref: forkVlRef, totalCount: itemCount, data: itemData, className: className, components: components, itemContent: itemContent }, getMenuProps(), combineProps({
+        scrollerRef: function (scrollElm) {
+            scrollerRefFn(scrollElm);
+            modifyVlScrollerStyle(scrollElm, position);
+        },
+        itemsRendered: itemsRendered,
+        totalListHeightChanged: totalListHeightChanged,
+        style: style,
+        isScrolling: handleScrolling,
+    }, rest)))) : (React.createElement(List, { style: { maxHeight: style.height, overflow: 'auto' }, ref: function (scrollElm) {
+            scrollerRefFn(scrollElm);
+        } },
+        React.createElement(PaddingComponent, null),
+        options.map(function (x, i) {
+            return itemContent(i, x);
+        }),
+        React.createElement(PaddingComponent, null)))));
 });
 export var RcSuggestionList = styled(SuggestionList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), SuggestionListStyle);
 RcSuggestionList.displayName = 'RcSuggestionList';

package/es6/components/Downshift/styles/StyledPopper.js

@@ -4,13 +4,13 @@ import { css, palette2, radius, shadows, styled } from '../../../foundation';
 import { RcPopper } from '../../Popper';
 var radiusLg = radius('lg');
 var _StyledPopper = forwardRef(function (_a, ref) {
-    var position = _a.position, rest = __rest(_a, ["position"]);
-    return React.createElement(RcPopper, __assign({ ref: ref }, rest));
+    var position = _a.position, _b = _a.component, Component = _b === void 0 ? RcPopper : _b, rest = __rest(_a, ["position", "component"]);
+    return React.createElement(Component, __assign({ ref: ref }, rest));
 });
-export var StyledPopper = styled(_StyledPopper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-shadow: ", ";\n  background-color: ", ";\n  overflow: hidden;\n\n  ", "\n"], ["\n  box-shadow: ", ";\n  background-color: ", ";\n  overflow: hidden;\n\n  ",
-    "\n"])), shadows('1'), palette2('neutral', 'elevation'), function (_a) {
+export var StyledPopper = styled(_StyledPopper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  > div {\n    box-shadow: ", ";\n    background-color: ", ";\n    overflow: hidden;\n\n    ", "\n  }\n"], ["\n  > div {\n    box-shadow: ", ";\n    background-color: ", ";\n    overflow: hidden;\n\n    ",
+    "\n  }\n"])), shadows('1'), palette2('neutral', 'elevation'), function (_a) {
     var position = _a.position;
-    return position === 'top'
-        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-top-right-radius: ", ";\n          border-top-left-radius: ", ";\n        "], ["\n          border-top-right-radius: ", ";\n          border-top-left-radius: ", ";\n        "])), radiusLg, radiusLg) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          border-bottom-right-radius: ", ";\n          border-bottom-left-radius: ", ";\n        "], ["\n          border-bottom-right-radius: ", ";\n          border-bottom-left-radius: ", ";\n        "])), radiusLg, radiusLg);
+    return position === 'top-start'
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            border-top-right-radius: ", ";\n            border-top-left-radius: ", ";\n          "], ["\n            border-top-right-radius: ", ";\n            border-top-left-radius: ", ";\n          "])), radiusLg, radiusLg) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            border-bottom-right-radius: ", ";\n            border-bottom-left-radius: ", ";\n          "], ["\n            border-bottom-right-radius: ", ";\n            border-bottom-left-radius: ", ";\n          "])), radiusLg, radiusLg);
 });
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -9,6 +9,7 @@ var DEFAULT_HIGHLIGHTED_INDEX = -1;
 export var useDownshift = function (_a) {
     var multipleProp = _a.multiple, variant = _a.variant, labelProp = _a.label, inputValueProp = _a.inputValue, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DEFAULT_GET_OPTION_LABEL : _b, _c = _a.keyToTags, keyToTags = _c === void 0 ? DEFAULT_KEY_TO_CHIPS : _c, filterOptionsProp = _a.filterOptions, disabledItemsHighlightable = _a.disabledItemsHighlightable, options = _a.options, freeSolo = _a.freeSolo, onInputChangeProp = _a.onInputChange, maxFreeSolo = _a.maxFreeSolo, onMaxFreeSolo = _a.onMaxFreeSolo, openOnFocus = _a.openOnFocus, disableCloseOnSelect = _a.disableCloseOnSelect, initialIsOpen = _a.initialIsOpen, autoSelect = _a.autoSelect, inputContainerRef = _a.inputContainerRef, inputRef = _a.inputRef, wrapperRef = _a.wrapperRef, onKeyDownProp = _a.onKeyDown, onSelectChange = _a.onChange, _d = _a.value, selectedItemsProp = _d === void 0 ? [] : _d, disabled = _a.disabled, renderNoOptions = _a.renderNoOptions, onClear = _a.onClear, autoHighlight = _a.autoHighlight, getOptionDisabled = _a.getOptionDisabled, addNoOptionItem = _a.addNoOptionItem, groupBy = _a.groupBy, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, groupExpanded = _a.groupExpanded, groupDefaultExpanded = _a.groupDefaultExpanded, getExpandIconProps = _a.getExpandIconProps, required = _a.required, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose, focused = _a.focused;
     var isAutocomplete = variant === 'autocomplete';
+    var autoCompleteSelectedIndexRef = useRef(DEFAULT_HIGHLIGHTED_INDEX);
     var downshiftId = useId('downshift', true);
     var _e = __read(useControlled({
         controlled: focused,
@@ -235,6 +236,7 @@ export var useDownshift = function (_a) {
                 var fIndex = optionItems.findIndex(function (x) { return getOptionLabel(x) === itemText_1; });
                 if (fIndex > -1) {
                     toIndex = fIndex;
+                    autoCompleteSelectedIndexRef.current = fIndex;
                 }
             }
             setHighlightedIndex(toIndex, { reason: 'auto' });
@@ -518,5 +520,6 @@ export var useDownshift = function (_a) {
         focused: focused !== null && focused !== void 0 ? focused : (tagFocused || inputFocused ? true : undefined),
         id: downshiftId,
         inputChanged: isInputValueChangedRef.current,
+        autoCompleteSelectedIndex: autoCompleteSelectedIndexRef.current,
     };
 };

package/es6/components/Forms/Select/Select.js

@@ -14,7 +14,7 @@ var _RcSelect = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcSelect' });
     var children = props.children, onChange = props.onChange, defaultValue = props.defaultValue, SelectInputPropsProp = props.SelectInputProps, MenuProps = props.MenuProps, textVariant = props.textVariant, placeholder = props.placeholder, renderValue = props.renderValue, displayEmpty = props.displayEmpty, variant = props.variant, size = props.size, value = props.value, virtualize = props.virtualize, 
     // * below is should pick into TextField props
-    focused = props.focused, gutterBottom = props.gutterBottom, helperText = props.helperText, color = props.color, label = props.label, id = props.id, className = props.className, validate = props.validate, InputProps = props.InputProps, required = props.required, fullWidth = props.fullWidth, disabled = props.disabled, error = props.error, rest = __rest(props, ["children", "onChange", "defaultValue", "SelectInputProps", "MenuProps", "textVariant", "placeholder", "renderValue", "displayEmpty", "variant", "size", "value", "virtualize", "focused", "gutterBottom", "helperText", "color", "label", "id", "className", "validate", "InputProps", "required", "fullWidth", "disabled", "error"]);
+    focused = props.focused, gutterBottom = props.gutterBottom, helperText = props.helperText, color = props.color, label = props.label, id = props.id, className = props.className, title = props.title, validate = props.validate, InputProps = props.InputProps, required = props.required, fullWidth = props.fullWidth, disabled = props.disabled, error = props.error, rest = __rest(props, ["children", "onChange", "defaultValue", "SelectInputProps", "MenuProps", "textVariant", "placeholder", "renderValue", "displayEmpty", "variant", "size", "value", "virtualize", "focused", "gutterBottom", "helperText", "color", "label", "id", "className", "title", "validate", "InputProps", "required", "fullWidth", "disabled", "error"]);
     var hasDefaultValue = hasValue(defaultValue);
     var nonValue = (!hasValue(value) && !hasDefaultValue) ||
         // * if that can't displayEmpty, and that value === '', same as no value
@@ -68,7 +68,7 @@ var _RcSelect = forwardRef(function (inProps, ref) {
     }, [InputProps, placeholder, nonValue, applyClasses, variant]);
     var valueIsNumber = typeof value === 'number';
     var currValue = valueIsNumber ? value : value || '';
-    return (React.createElement(RcSelectTextField, { ref: ref, id: id, className: className, 
+    return (React.createElement(RcSelectTextField, { ref: ref, id: id, className: className, title: title, 
         // for when that is select type that type will be select onChange, just any for ignore that
         onChange: onChange, color: color, select: true, focused: focused, gutterBottom: gutterBottom, helperText: helperText, label: label, 
         // when that has defaultValue, and that value always to be undefined

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

@@ -23,14 +23,15 @@ var _RcListItem = forwardRef(function (inProps, ref) {
             },
         ]);
     }
-    var classesProp = props.classes, color = props.color, TouchRipplePropsProp = props.TouchRippleProps, children = props.children, className = props.className, singleLine = props.singleLine, button = props.button, size = props.size, canHover = props.canHover, isInline = props.isInline, baseColor = props.baseColor, title = props.title, highlighted = props.highlighted, maxWidth = props.maxWidth, rest = __rest(props, ["classes", "color", "TouchRippleProps", "children", "className", "singleLine", "button", "size", "canHover", "isInline", "baseColor", "title", "highlighted", "maxWidth"]);
+    var classesProp = props.classes, color = props.color, TouchRipplePropsProp = props.TouchRippleProps, children = props.children, className = props.className, singleLine = props.singleLine, button = props.button, size = props.size, canHover = props.canHover, isInline = props.isInline, baseColor = props.baseColor, title = props.title, highlighted = props.highlighted, maxWidth = props.maxWidth, focused = props.focused, rest = __rest(props, ["classes", "color", "TouchRippleProps", "children", "className", "singleLine", "button", "size", "canHover", "isInline", "baseColor", "title", "highlighted", "maxWidth", "focused"]);
     var classes = useMemo(function () { return combineClasses(RcListItemClasses, classesProp); }, [classesProp]);
     var ListItemClassName = useMemo(function () {
         var _a;
         return clsx(className, (_a = {},
             _a[RcListItemMultilineClassName] = !singleLine,
+            _a[classes.focusVisible] = focused,
             _a));
-    }, [className, singleLine]);
+    }, [className, singleLine, classes, focused]);
     // * when not button can't have TouchRippleProps
     var additionProps = useMemo(function () {
         return button

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

@@ -1,14 +1,26 @@
-import { __makeTemplateObject } from "tslib";
-import { css, getParsePaletteColor, nonTouchHoverMedia, palette2, px, setAlpha, setOpacity, spacing, typography, } from '../../../../foundation';
+import { __assign, __makeTemplateObject } from "tslib";
+import { css, focusVisible, getParsePaletteColor, nonTouchHoverMedia, palette2, px, setAlpha, setOpacity, spacing, typography, } from '../../../../foundation';
 import { RcFormControlLabel } from '../../../Forms/FormControlLabel';
 import { RcSwitch } from '../../../Forms/Switch';
 import { colorMap, RcListItemClasses, RcListItemRippleClasses, RcListItemTopAndBottomPaddings, } from '../utils';
 export var ListItemFormControlStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    margin-right: 0;\n\n    > ", " {\n      /** The DOM structure of Switch is special,\n        should remove this after fix Switch as common control */\n      margin-left: ", ";\n      margin-right: ", ";\n    }\n  }\n"], ["\n  ", " {\n    margin-right: 0;\n\n    > ", " {\n      /** The DOM structure of Switch is special,\n        should remove this after fix Switch as common control */\n      margin-left: ", ";\n      margin-right: ", ";\n    }\n  }\n"])), RcFormControlLabel, RcSwitch, spacing(1), spacing(1));
-export var ListItemStyle = function (_a) {
-    var maxWidth = _a.maxWidth, isInline = _a.isInline, size = _a.size, onClick = _a.onClick, color = _a.color, canHover = _a.canHover, _b = _a.baseColor, baseColorProp = _b === void 0 ? 'black' : _b, highlighted = _a.highlighted;
+export var sharedListItemStyle = function (_a) {
+    var highlighted = _a.highlighted, color = _a.color, canHover = _a.canHover, _b = _a.baseColor, baseColorProp = _b === void 0 ? 'black' : _b, mainClasses = _a.mainClasses, rippleClasses = _a.rippleClasses;
     var baseColor = getParsePaletteColor(color !== null && color !== void 0 ? color : colorMap[baseColorProp]);
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", ";\n    color: ", ";\n\n    ", ";\n\n    ", ",\n    &.", " {\n      background-color: ", ";\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &,\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    ", ";\n  "], ["\n    ", ";\n    color: ", ";\n\n    ",
+        ";\n\n    "
+        // that for menuItem, because in current version of menuItem that not support focused classes
+        // TODO: that can be remove after upgrade to V5
+        ,
+        ",\n    &.", " {\n      background-color: ", ";\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &,\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    ", ";\n  "])), typography('body1'), palette2('neutral', 'f06'), highlighted && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), setAlpha(baseColor, 0.05)), 
+    // that for menuItem, because in current version of menuItem that not support focused classes
+    // TODO: that can be remove after upgrade to V5
+    focusVisible, mainClasses.focusVisible, setOpacity(baseColor, '16'), nonTouchHoverMedia, canHover ? setOpacity(baseColor, '08') : 'unset', mainClasses.selected, setOpacity(baseColor, '12'), rippleClasses.rippleVisible, baseColor, ListItemFormControlStyle);
+};
+export var ListItemStyle = function (props) {
+    var maxWidth = props.maxWidth, isInline = props.isInline, size = props.size, onClick = props.onClick;
     var defaultPadding = RcListItemTopAndBottomPaddings[size];
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", ";\n    width: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    display: ", ";\n    color: ", ";\n    cursor: ", ";\n\n    ", ";\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &,\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    &.", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n    }\n\n    ", ";\n  "], ["\n    ", ";\n    width: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    display: ", ";\n    color: ", ";\n    cursor: ", ";\n\n    ",
-        ";\n\n    &.", " {\n      background-color: ", ";\n    }\n\n    ", " {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", " {\n      &,\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    &.", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n    }\n\n    ", ";\n  "])), typography('body1'), maxWidth ? px(maxWidth) : '100%', defaultPadding, defaultPadding, isInline ? 'inline-flex' : 'flex', palette2('neutral', 'f06'), onClick ? 'pointer' : 'default', highlighted && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), setAlpha(baseColor, 0.05)), RcListItemClasses.focusVisible, setOpacity(baseColor, '16'), nonTouchHoverMedia, canHover ? setOpacity(baseColor, '08') : 'unset', RcListItemClasses.selected, setOpacity(baseColor, '12'), RcListItemRippleClasses.rippleVisible, baseColor, RcListItemClasses.gutters, spacing(4), spacing(4), RcListItemClasses.dense, spacing(1), spacing(1), ListItemFormControlStyle);
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    display: ", ";\n    cursor: ", ";\n\n    ", ";\n\n    &.", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n    }\n  "], ["\n    width: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    display: ", ";\n    cursor: ", ";\n\n    ",
+        ";\n\n    &.", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n    }\n  "])), maxWidth ? px(maxWidth) : '100%', defaultPadding, defaultPadding, isInline ? 'inline-flex' : 'flex', onClick ? 'pointer' : 'default', sharedListItemStyle(__assign(__assign({}, props), { mainClasses: RcListItemClasses, rippleClasses: RcListItemRippleClasses })), RcListItemClasses.gutters, spacing(4), spacing(4), RcListItemClasses.dense, spacing(1), spacing(1));
 };
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,7 +1,8 @@
 import { RcClasses, spacing, } from '../../../../foundation';
-var RcListItemPrefix = 'RcListItem';
+export var RcListItemPrefix = 'RcListItem';
+export var RcListItemRipplePrefix = RcListItemPrefix + "TouchRipple";
 export var RcListItemMultilineClassName = RcListItemPrefix + "-multiline";
-export var RcListItemClasses = RcClasses(['focusVisible', 'gutters', 'dense', 'selected'], RcListItemPrefix);
+export var RcListItemClasses = RcClasses(['gutters', 'dense', 'selected', 'focusVisible'], RcListItemPrefix);
 export var RcListItemTopAndBottomPaddings = {
     small: spacing(1),
     medium: spacing(1.25),
@@ -11,4 +12,4 @@ export var colorMap = {
     secondary: 'highlight.f02',
     black: 'action.grayLight',
 };
-export var RcListItemRippleClasses = RcClasses(['rippleVisible'], 'RcListItemTouchRipple');
+export var RcListItemRippleClasses = RcClasses(['rippleVisible'], RcListItemRipplePrefix);

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

@@ -3,7 +3,7 @@ import React, { forwardRef, useContext, useImperativeHandle, useMemo, } from 're
 import clsx from 'clsx';
 import MuiMenuItem from '@material-ui/core/MenuItem';
 import { Check as checkSvg } from '@ringcentral/juno-icon';
-import { combineClasses, isRcElement, logInDev, omit, styled, useEventCallback, useId, useThemeProps, } from '../../../foundation';
+import { combineClasses, isRcElement, logInDev, omit, styled, useEventCallback, useId, useThemeProps, combineProps, } from '../../../foundation';
 import { RcIcon } from '../../Icon';
 import { RcListItemSecondaryAction } from '../../List';
 import { RcListItemAvatar } from '../../List/ListItemAvatar';
@@ -13,11 +13,11 @@ import { RcMenuContext } from '../Menu/MenuContext';
 import { RcMenuListContext } from '../MenuList/MenuListContext';
 import { RcSubMenuContext } from '../SubMenu/SubMenuContext';
 import { MenuItemStyle, StyledCheckIcon } from './styles';
-import { RcMenuItemClasses } from './utils';
+import { RcMenuItemClasses, RcMenuItemRippleClasses } from './utils';
 var _RcMenuItem = forwardRef(function (inProps, ref) {
     var _a;
     var props = useThemeProps({ props: inProps, name: 'RcMenuItem' });
-    var classesProp = props.classes, children = props.children, className = props.className, onMouseEnter = props.onMouseEnter, onClick = props.onClick, onFocus = props.onFocus, 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, title = props.title, rest = __rest(props, ["classes", "children", "className", "onMouseEnter", "onClick", "onFocus", "size", "type", "checked", "icon", "symbol", "avatar", "secondaryAction", "idRef", "isSubMenuItem", "title"]);
+    var classesProp = props.classes, children = props.children, color = props.color, button = props.button, className = props.className, onMouseEnter = props.onMouseEnter, onClick = props.onClick, onFocus = props.onFocus, highlighted = props.highlighted, size = props.size, type = props.type, checked = props.checked, icon = props.icon, symbol = props.symbol, avatar = props.avatar, secondaryAction = props.secondaryAction, idRef = props.idRef, isSubMenuItem = props.isSubMenuItem, TouchRipplePropsProp = props.TouchRippleProps, title = props.title, focused = props.focused, rest = __rest(props, ["classes", "children", "color", "button", "className", "onMouseEnter", "onClick", "onFocus", "highlighted", "size", "type", "checked", "icon", "symbol", "avatar", "secondaryAction", "idRef", "isSubMenuItem", "TouchRippleProps", "title", "focused"]);
     var isCheckedType = type === 'checked';
     var menuItemId = useId('menu-item', true);
     var menuContext = useContext(RcMenuContext);
@@ -34,7 +34,7 @@ var _RcMenuItem = forwardRef(function (inProps, ref) {
         }
     });
     var classes = useMemo(function () { return combineClasses(RcMenuItemClasses, classesProp); }, [classesProp]);
-    var toClasses = useMemo(function () { return omit(classes, ['checked', 'unchecked']); }, [classes]);
+    var toClasses = useMemo(function () { return omit(classes, ['checked', 'unchecked', 'focusVisible']); }, [classes]);
     var itemAvatar = useMemo(function () {
         if (React.isValidElement(avatar)) {
             return isRcElement(avatar, ['RcListItemAvatar']) ? (avatar) : (React.createElement(RcListItemAvatar, null, avatar));
@@ -68,6 +68,14 @@ var _RcMenuItem = forwardRef(function (inProps, ref) {
         }
         return secondaryAction ? (isRcElement(secondaryAction, ['RcListItemSecondaryAction']) ? (secondaryAction) : (React.createElement(RcListItemSecondaryAction, null, secondaryAction))) : null;
     }, [checked, isCheckedType, secondaryAction]);
+    // * when not button can't have TouchRippleProps
+    var additionProps = useMemo(function () {
+        return button
+            ? {
+                TouchRippleProps: combineProps({ classes: RcMenuItemRippleClasses }, TouchRipplePropsProp),
+            }
+            : {};
+    }, [TouchRipplePropsProp, button]);
     var handleMouseEnter = useEventCallback(function (e) {
         onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
         setFocusedMenuItemId();
@@ -87,10 +95,11 @@ var _RcMenuItem = forwardRef(function (inProps, ref) {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
     });
     useImperativeHandle(idRef, function () { return menuItemId; }, [menuItemId]);
-    return (React.createElement(MuiMenuItem, __assign({ "aria-checked": isCheckedType && checked ? true : undefined }, rest, { ref: ref, title: typeof title === 'string' ? title : undefined, classes: toClasses, className: clsx(className, (_a = {},
+    return (React.createElement(MuiMenuItem, __assign({ "aria-checked": isCheckedType && checked ? true : undefined }, additionProps, rest, { ref: ref, title: typeof title === 'string' ? title : undefined, classes: toClasses, className: clsx(className, (_a = {},
             _a[classes.checked] = isCheckedType && checked,
             _a[classes.unchecked] = isCheckedType && !checked,
-            _a)), onMouseEnter: handleMouseEnter, onClick: handleClick, onFocus: handleFocus, "data-menuitem-id": menuItemId }),
+            _a[classes.focusVisible] = focused,
+            _a)), onMouseEnter: handleMouseEnter, onClick: handleClick, onFocus: handleFocus, "data-menuitem-id": menuItemId, button: button }),
         itemAvatar,
         itemIcon,
         children,
@@ -99,6 +108,7 @@ var _RcMenuItem = forwardRef(function (inProps, ref) {
 var RcMenuItem = styled(withTooltip(_RcMenuItem))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), MenuItemStyle);
 RcMenuItem.defaultProps = {
     size: 'medium',
+    button: true,
 };
 RcMenuItem.displayName = 'RcMenuItem';
 export { RcMenuItem };

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

@@ -1,13 +1,16 @@
-import { __makeTemplateObject } from "tslib";
-import { css, palette2, spacing, styled, typography, } from '../../../../foundation';
+import { __assign, __makeTemplateObject } from "tslib";
+import { css, spacing, styled } from '../../../../foundation';
 import { RcIcon } from '../../../Icon';
-import { ListItemFormControlStyle } from '../../../List/ListItem/styles';
-import { RcMenuItemClasses, RcMenuItemLeftAndRightPaddings, RcMenuItemTopAndBottomPaddings, } from '../utils';
+import { sharedListItemStyle } from '../../../List/ListItem/styles';
+import { RcMenuItemClasses, RcMenuItemLeftAndRightPaddings, RcMenuItemRippleClasses, RcMenuItemTopAndBottomPaddings, } from '../utils';
 export var StyledCheckIcon = styled(RcIcon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 22px;\n"], ["\n  height: 22px;\n"])));
-export var MenuItemStyle = function (_a) {
-    var size = _a.size;
+export var MenuItemStyle = function (props) {
+    var size = props.size, _a = props.color, color = _a === void 0 ? 'action.grayLight' : _a;
     var topAndBottomPadding = RcMenuItemTopAndBottomPaddings[size];
     var leftAndRightPadding = RcMenuItemLeftAndRightPaddings[size];
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    outline: none;\n    box-sizing: border-box;\n    ", ";\n    color: ", ";\n    height: auto;\n    min-height: 32px;\n    min-width: 112px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    .", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n      min-height: auto;\n      line-height: 22px;\n      font-weight: 700;\n    }\n\n    ", ";\n  "], ["\n    outline: none;\n    box-sizing: border-box;\n    ", ";\n    color: ", ";\n    height: auto;\n    min-height: 32px;\n    min-width: 112px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    .", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n      min-height: auto;\n      line-height: 22px;\n      font-weight: 700;\n    }\n\n    ", ";\n  "])), typography('body1'), palette2('neutral', 'f06'), topAndBottomPadding, topAndBottomPadding, RcMenuItemClasses.gutters, leftAndRightPadding, leftAndRightPadding, RcMenuItemClasses.dense, spacing(1), spacing(1), ListItemFormControlStyle);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    outline: none;\n    box-sizing: border-box;\n    height: auto;\n    min-height: 32px;\n    min-width: 112px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    ", ";\n\n    .", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n      min-height: auto;\n      line-height: 22px;\n      font-weight: 700;\n    }\n  "], ["\n    outline: none;\n    box-sizing: border-box;\n    height: auto;\n    min-height: 32px;\n    min-width: 112px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    ",
+        ";\n\n    .", " {\n      padding-left: ", ";\n      padding-right: ", ";\n    }\n\n    &.", " {\n      padding-top: ", ";\n      padding-bottom: ", ";\n      min-height: auto;\n      line-height: 22px;\n      font-weight: 700;\n    }\n  "])), topAndBottomPadding, topAndBottomPadding, sharedListItemStyle(__assign(__assign({}, props), { color: color, 
+        // in menuItem always be can hover
+        canHover: true, mainClasses: RcMenuItemClasses, rippleClasses: RcMenuItemRippleClasses })), RcMenuItemClasses.gutters, leftAndRightPadding, leftAndRightPadding, RcMenuItemClasses.dense, spacing(1), spacing(1));
 };
 var templateObject_1, templateObject_2;

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

@@ -1,5 +1,7 @@
 import { RcClasses, spacing } from '../../../../foundation';
-export var RcMenuItemClasses = RcClasses(['checked', 'unchecked', 'gutters', 'dense'], 'RcMenuItem');
+export var RcMenuItemPrefix = 'RcMenuItem';
+export var RcMenuItemRipplePrefix = RcMenuItemPrefix + "TouchRipple";
+export var RcMenuItemClasses = RcClasses(['checked', 'unchecked', 'gutters', 'dense', 'selected', 'focusVisible'], RcMenuItemPrefix);
 export var RcMenuItemTopAndBottomPaddings = {
     medium: spacing(1),
     large: spacing(2),
@@ -8,3 +10,4 @@ export var RcMenuItemLeftAndRightPaddings = {
     medium: spacing(4),
     large: spacing(5),
 };
+export var RcMenuItemRippleClasses = RcClasses(['rippleVisible'], RcMenuItemRipplePrefix);

package/package.json

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