@ringcentral/juno 2.15.0 → 2.16.0

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.15.0",
+  "version": "2.16.0",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",