@ringcentral/juno 2.21.2 → 2.22.1-hotfix.0

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

@@ -14,10 +14,9 @@ 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, 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 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);
     var menuContext = useContext(RcMenuContext);
@@ -105,11 +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,
-};
+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/es6/components/Menu/MenuItem/styles/MenuItemStyle.js

@@ -5,11 +5,11 @@ 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 (props) {
-    var size = props.size, _a = props.color, color = _a === void 0 ? 'action.grayLight' : _a;
+    var size = props.size, _a = props.color, color = _a === void 0 ? 'action.grayLight' : _a, focusVariant = props.focusVariant;
     var topAndBottomPadding = RcMenuItemTopAndBottomPaddings[size];
     var leftAndRightPadding = RcMenuItemLeftAndRightPaddings[size];
     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, 
+        ";\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), { focusVariant: focusVariant, color: color, 
         // in menuItem always be can hover
         canHover: true, mainClasses: RcMenuItemClasses, rippleClasses: RcMenuItemRippleClasses })), RcMenuItemClasses.gutters, leftAndRightPadding, leftAndRightPadding, RcMenuItemClasses.dense, spacing(1), spacing(1));
 };

package/es6/foundation/styles/focusRing.js

@@ -0,0 +1,11 @@
+import { __makeTemplateObject } from "tslib";
+import { css } from '../styled-components';
+import { palette2 } from './newPalette';
+var focusRingOffsetMap = {
+    normal: '2px',
+    inset: '-2px',
+};
+export var focusRing = function (variant) {
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    outline-color: ", ";\n    outline-width: 2px;\n    outline-style: solid;\n    outline-offset: ", ";\n  "], ["\n    outline-color: ", ";\n    outline-width: 2px;\n    outline-style: solid;\n    outline-offset: ", ";\n  "])), palette2('interactive', 'b02'), focusRingOffsetMap[variant]);
+};
+var templateObject_1;

package/es6/foundation/styles/index.js

@@ -4,6 +4,7 @@ export * from './ellipsis';
 export * from './fakeBorder';
 export * from './flexCenter';
 export * from './flexWidth';
+export * from './focusRing';
 export * from './focusVisible';
 export * from './lineClamp';
 export * from './newPalette';

package/foundation/styles/focusRing.d.ts

@@ -0,0 +1,2 @@
+export declare type FocusRingVariant = 'normal' | 'inset';
+export declare const focusRing: (variant: FocusRingVariant) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("..").RcTheme>>[];

package/foundation/styles/focusRing.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var styled_components_1 = require("../styled-components");
+var newPalette_1 = require("./newPalette");
+var focusRingOffsetMap = {
+    normal: '2px',
+    inset: '-2px',
+};
+exports.focusRing = function (variant) {
+    return styled_components_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    outline-color: ", ";\n    outline-width: 2px;\n    outline-style: solid;\n    outline-offset: ", ";\n  "], ["\n    outline-color: ", ";\n    outline-width: 2px;\n    outline-style: solid;\n    outline-offset: ", ";\n  "])), newPalette_1.palette2('interactive', 'b02'), focusRingOffsetMap[variant]);
+};
+var templateObject_1;

package/foundation/styles/index.d.ts

@@ -4,6 +4,7 @@ export * from './ellipsis';
 export * from './fakeBorder';
 export * from './flexCenter';
 export * from './flexWidth';
+export * from './focusRing';
 export * from './focusVisible';
 export * from './lineClamp';
 export * from './newPalette';

package/foundation/styles/index.js

@@ -7,6 +7,7 @@ tslib_1.__exportStar(require("./ellipsis"), exports);
 tslib_1.__exportStar(require("./fakeBorder"), exports);
 tslib_1.__exportStar(require("./flexCenter"), exports);
 tslib_1.__exportStar(require("./flexWidth"), exports);
+tslib_1.__exportStar(require("./focusRing"), exports);
 tslib_1.__exportStar(require("./focusVisible"), exports);
 tslib_1.__exportStar(require("./lineClamp"), exports);
 tslib_1.__exportStar(require("./newPalette"), exports);

package/foundation/typings/BaseFocusVariant.d.ts

@@ -0,0 +1,7 @@
+declare type BaseFocusVariant = {
+    ripple: any;
+    focusRing: any;
+    highlight: any;
+};
+export declare type RcBaseFocusVariant<T extends keyof BaseFocusVariant> = keyof Pick<BaseFocusVariant, T>;
+export {};

package/foundation/typings/BaseFocusVariant.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/foundation/typings/index.d.ts

@@ -1,5 +1,6 @@
 export * from './BaseColor';
 export * from './BaseDirection';
+export * from './BaseFocusVariant';
 export * from './BaseFormControlLabel';
 export * from './BaseLabelPlacement';
 export * from './BaseProps';

package/package.json

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