@ringcentral/juno 2.21.2 → 2.22.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",
   "author": "RingCentral",
   "license": "MIT",
   "main": "./index.js",