@ringcentral/juno 2.15.0 → 2.17.0

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/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/es6/components/Text/index.js

@@ -1,2 +1 @@
 export * from './Text';
-export * from './TextWithEllipsis';

package/es6/components/index.js

@@ -21,7 +21,6 @@ export * from './Forms';
 export * from './Grid';
 export * from './Hidden';
 export * from './Icon';
-export * from './ImageView';
 export * from './InlineEditable';
 export * from './Link';
 export * from './List';

package/foundation/theme/ThemeHandler.d.ts

@@ -15,7 +15,7 @@ export declare class RcThemeHandler {
     setTheme(themeOptions: RcThemeInput, isEmit?: boolean): RcTheme;
     /** Set Theme Name with read static json file */
     setThemeName(name: string): Promise<void>;
-    read(theme: string): Promise<import("type-fest/source/partial-deep").PartialObjectDeep<Pick<RcTheme, "direction" | "opacity" | "radius" | "props" | "palette" | "typography" | "shape" | "breakpoints" | "mixins" | "overrides" | "shadows" | "transitions" | "zIndex" | "unstable_strictMode">>>;
+    read(theme: string): Promise<import("type-fest/source/partial-deep").PartialObjectDeep<Pick<RcTheme, "direction" | "opacity" | "radius" | "props" | "palette" | "typography" | "shape" | "breakpoints" | "mixins" | "overrides" | "shadows" | "transitions" | "zIndex" | "unstable_strictMode">, {}>>;
     loadUrl(url: string): Promise<RcThemeInput>;
 }
 export {};

package/foundation/theme/ThemeSwitcherProvider/ThemeSwitcherProvider.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { RcThemeSwitcherProviderProps } from './ThemeContext';
-export declare const RcDefaultDarkTheme: import("type-fest/source/partial-deep").PartialObjectDeep<Pick<import("../theme.type").RcTheme, "direction" | "opacity" | "radius" | "props" | "palette" | "typography" | "shape" | "breakpoints" | "mixins" | "overrides" | "shadows" | "transitions" | "zIndex" | "unstable_strictMode">>;
-export declare const RcDefaultHighContrastTheme: import("type-fest/source/partial-deep").PartialObjectDeep<Pick<import("../theme.type").RcTheme, "direction" | "opacity" | "radius" | "props" | "palette" | "typography" | "shape" | "breakpoints" | "mixins" | "overrides" | "shadows" | "transitions" | "zIndex" | "unstable_strictMode">>;
+export declare const RcDefaultDarkTheme: import("type-fest/source/partial-deep").PartialObjectDeep<Pick<import("../theme.type").RcTheme, "direction" | "opacity" | "radius" | "props" | "palette" | "typography" | "shape" | "breakpoints" | "mixins" | "overrides" | "shadows" | "transitions" | "zIndex" | "unstable_strictMode">, {}>;
+export declare const RcDefaultHighContrastTheme: import("type-fest/source/partial-deep").PartialObjectDeep<Pick<import("../theme.type").RcTheme, "direction" | "opacity" | "radius" | "props" | "palette" | "typography" | "shape" | "breakpoints" | "mixins" | "overrides" | "shadows" | "transitions" | "zIndex" | "unstable_strictMode">, {}>;
 export declare const RcThemeSwitcherDefaultTheme: {
     defaultTheme: string;
     themeMap: {

package/package.json

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

package/components/Autocomplete/Autocomplete.d.ts

@@ -1,4 +0,0 @@
-import Autocomplete from '@material-ui/lab/Autocomplete';
-/** @deprecated should use `RcDownshift` to replace that */
-declare const RcAutocomplete: typeof Autocomplete;
-export { RcAutocomplete };

package/components/Autocomplete/Autocomplete.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var Autocomplete_1 = tslib_1.__importDefault(require("@material-ui/lab/Autocomplete"));
-/** @deprecated should use `RcDownshift` to replace that */
-var RcAutocomplete = Autocomplete_1.default;
-exports.RcAutocomplete = RcAutocomplete;

package/components/Autocomplete/index.d.ts

@@ -1 +0,0 @@
-export * from './Autocomplete';

package/components/Autocomplete/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Autocomplete"), exports);

package/components/Grid/deprecated/Grid.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { GridProps as MuiGridProps } from '@material-ui/core/Grid';
-export declare type RcGridProps = MuiGridProps;
-export declare const RcGrid: React.SFC<RcGridProps> & {
-    dependencies?: any[];
-};

package/components/Grid/deprecated/Grid.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
-var Grid_1 = tslib_1.__importDefault(require("@material-ui/core/Grid"));
-exports.RcGrid = react_1.default.memo(function (props) { return react_1.default.createElement(Grid_1.default, tslib_1.__assign({}, props)); });
-exports.RcGrid.displayName = 'RcGrid';
-exports.RcGrid.dependencies = [exports.RcGrid];

package/components/Grid/deprecated/index.d.ts

@@ -1 +0,0 @@
-export * from './Grid';

package/components/Grid/deprecated/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Grid"), exports);