@ringcentral/juno 1.12.3-beta.5791-ea7a35ca → 1.12.4-beta.5841-601f173e

package/es6/components/Forms/TextField/styles/OutlineTextFieldStyle.js

@@ -1,14 +1,16 @@
 import { __makeTemplateObject } from "tslib";
-import { css, fakeBorder, palette2, px, radius as radiusFn, spacing, typography, } from '../../../../foundation';
+import { css, fakeBorder, getParsePaletteColor, palette2, px, radius as radiusFn, spacing, typography, } from '../../../../foundation';
 import { belowIconButtonSpacing, RcOutlineTextFieldFontStyles, RcOutlineTextFieldHeights, RcOutlineTextFieldInputClasses, RcOutlineTextFieldLabelMargins, RcOutlineTextFieldSpaces, RcTextFieldClasses, } from '../utils';
 export var OutlineTextFieldStyle = function (_a) {
-    var radius = _a.radius, size = _a.size;
+    var radius = _a.radius, size = _a.size, colorProp = _a.color;
     var height = px(RcOutlineTextFieldHeights[size]);
     var _b = RcOutlineTextFieldSpaces[size], inside = _b.inside, outside = _b.outside, insideLeft = _b.insideLeft;
     var labelMargin = RcOutlineTextFieldLabelMargins[size];
     var typographyToken = RcOutlineTextFieldFontStyles[size];
     var currRadius = radiusFn(radius);
+    var borderColor = getParsePaletteColor(colorProp, palette2('neutral', 'l03'));
+    var focusBorderColor = getParsePaletteColor(colorProp, palette2('interactive', 'f01'));
     // `-webkit-tap-highlight-color` for cover background color, prevent color be cover by browser
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .", " {\n      ", ";\n    }\n\n    ", ";\n\n    * + .", " {\n      margin-left: ", ";\n    }\n\n    &.", " {\n      label + .", " {\n        margin-top: ", ";\n      }\n    }\n\n    .", " {\n      -webkit-tap-highlight-color: transparent;\n      height: ", ";\n      min-height: ", ";\n      background: ", ";\n      padding: ", ";\n      border-radius: ", ";\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: ", ";\n        transition: none;\n        border-bottom: none !important;\n        pointer-events: none;\n        ", ";\n      }\n\n      &:not(.", "):not(.", "):hover {\n        background: ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      background: ", ";\n      &:before {\n        ", ";\n      }\n    }\n  "], ["\n    .", " {\n      ", ";\n    }\n\n    ", ";\n\n    * + .", " {\n      margin-left: ", ";\n    }\n\n    &.", " {\n      label + .", " {\n        margin-top: ", ";\n      }\n    }\n\n    .", " {\n      -webkit-tap-highlight-color: transparent;\n      height: ", ";\n      min-height: ", ";\n      background: ", ";\n      padding: ", ";\n      border-radius: ", ";\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: ", ";\n        transition: none;\n        border-bottom: none !important;\n        pointer-events: none;\n        ", ";\n      }\n\n      &:not(.", "):not(.", "):hover {\n        background: ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      background: ", ";\n      &:before {\n        ", ";\n      }\n    }\n  "])), RcOutlineTextFieldInputClasses.input, typography(typographyToken), belowIconButtonSpacing(spacing(inside)), RcOutlineTextFieldInputClasses.input, spacing(insideLeft || inside), RcTextFieldClasses.root, RcOutlineTextFieldInputClasses.root, spacing(labelMargin), RcOutlineTextFieldInputClasses.root, height, height, palette2('neutral', 'b01'), spacing(outside), currRadius, currRadius, fakeBorder({ color: palette2('neutral', 'l03') }), RcOutlineTextFieldInputClasses.focused, RcOutlineTextFieldInputClasses.disabled, palette2('neutral', 'b02'), RcOutlineTextFieldInputClasses.focused, fakeBorder({ color: palette2('interactive', 'f01') }), RcOutlineTextFieldInputClasses.error, fakeBorder({ color: palette2('danger', 'f02') }), RcOutlineTextFieldInputClasses.disabled, palette2('neutral', 'b03'), fakeBorder({ color: palette2('disabled', 'f02') }));
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .", " {\n      ", ";\n    }\n\n    ", ";\n\n    * + .", " {\n      margin-left: ", ";\n    }\n\n    &.", " {\n      label + .", " {\n        margin-top: ", ";\n      }\n    }\n\n    .", " {\n      -webkit-tap-highlight-color: transparent;\n      height: ", ";\n      min-height: ", ";\n      background: ", ";\n      padding: ", ";\n      border-radius: ", ";\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: ", ";\n        transition: none;\n        border-bottom: none !important;\n        pointer-events: none;\n        ", ";\n      }\n\n      &:not(.", "):not(.", "):hover {\n        background: ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      background: ", ";\n      &:before {\n        ", ";\n      }\n    }\n  "], ["\n    .", " {\n      ", ";\n    }\n\n    ", ";\n\n    * + .", " {\n      margin-left: ", ";\n    }\n\n    &.", " {\n      label + .", " {\n        margin-top: ", ";\n      }\n    }\n\n    .", " {\n      -webkit-tap-highlight-color: transparent;\n      height: ", ";\n      min-height: ", ";\n      background: ", ";\n      padding: ", ";\n      border-radius: ", ";\n\n      &:before {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        border-radius: ", ";\n        transition: none;\n        border-bottom: none !important;\n        pointer-events: none;\n        ", ";\n      }\n\n      &:not(.", "):not(.", "):hover {\n        background: ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      &:before {\n        ", ";\n      }\n    }\n\n    .", " {\n      background: ", ";\n      &:before {\n        ", ";\n      }\n    }\n  "])), RcOutlineTextFieldInputClasses.input, typography(typographyToken), belowIconButtonSpacing(spacing(inside)), RcOutlineTextFieldInputClasses.input, spacing(insideLeft || inside), RcTextFieldClasses.root, RcOutlineTextFieldInputClasses.root, spacing(labelMargin), RcOutlineTextFieldInputClasses.root, height, height, palette2('neutral', 'b01'), spacing(outside), currRadius, currRadius, fakeBorder({ color: borderColor }), RcOutlineTextFieldInputClasses.focused, RcOutlineTextFieldInputClasses.disabled, palette2('neutral', 'b02'), RcOutlineTextFieldInputClasses.focused, fakeBorder({ color: focusBorderColor }), RcOutlineTextFieldInputClasses.error, fakeBorder({ color: palette2('danger', 'f02') }), RcOutlineTextFieldInputClasses.disabled, palette2('neutral', 'b03'), fakeBorder({ color: palette2('disabled', 'f02') }));
 };
 var templateObject_1;

package/es6/components/Forms/TextField/styles/TextFieldStyle.js

@@ -1,5 +1,5 @@
 import { __makeTemplateObject } from "tslib";
-import { css, isFilled, nonTouchHoverMedia, palette2, px, spacing, typography, } from '../../../../foundation';
+import { css, getParsePaletteColor, isFilled, nonTouchHoverMedia, palette2, px, spacing, typography, } from '../../../../foundation';
 import { RcIconButtonSizes } from '../../../Buttons/IconButton/utils';
 import { belowIconButtonSpacing, RcTextFieldClasses, RcTextFieldFormHelperTextClasses, RcTextFieldInputClasses, RcTextFieldInputLabelClasses, } from '../utils';
 import { ClearIconButton } from './ClearIconButton';
@@ -14,13 +14,17 @@ export var RcDefaultTextFieldWidth = '168px';
 var focusWithNotDisabled = "." + RcTextFieldInputClasses.root + ":hover:not(." + RcTextFieldInputClasses.disabled + ")";
 var TextFieldInputHoverFocusStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    display: inline-flex;\n  }\n"], ["\n  ", " {\n    display: inline-flex;\n  }\n"])), ClearIconButton);
 export var clearBtnInactiveStyle = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", " {\n    ", " {\n      ", "\n    }\n  }\n\n  .", " {\n    ", "\n  }\n"], ["\n  ", " {\n    ", " {\n      ", "\n    }\n  }\n\n  .", " {\n    ", "\n  }\n"])), nonTouchHoverMedia, focusWithNotDisabled, TextFieldInputHoverFocusStyle, RcTextFieldInputClasses.focused, TextFieldInputHoverFocusStyle);
-export var TextFieldStyle = function (_a) {
-    var value = _a.value, variant = _a.variant, fullWidth = _a.fullWidth, clearBtn = _a.clearBtn, size = _a.size, textVariant = _a.textVariant, gutterBottom = _a.gutterBottom, align = _a.align;
+export var TextFieldStyle = function (props) {
+    var value = props.value, variant = props.variant, fullWidth = props.fullWidth, clearBtn = props.clearBtn, size = props.size, textVariant = props.textVariant, gutterBottom = props.gutterBottom, align = props.align, colorProp = props.color;
     var showClean = isFilled({ value: value });
+    var color = getParsePaletteColor(colorProp, palette2('interactive', 'f01'));
+    var labelRootColor = getParsePaletteColor(colorProp, idleColor);
+    var underlineColor = getParsePaletteColor(colorProp, palette2('neutral', 'f02'));
+    var underlineFocusColor = getParsePaletteColor(colorProp, palette2('neutral', 'f06'));
     return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", ";\n\n    width: ", ";\n\n    ", ";\n\n    .", " {\n      ", ";\n      color: ", ";\n      transform: scale(1);\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n\n      ", " {\n        display: none;\n      }\n    }\n\n    ", ";\n\n    .", " {\n      ", ";\n      text-align: ", ";\n\n      ::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n\n      ", ";\n    }\n\n    .", " {\n      &:before {\n        border-bottom-color: ", ";\n      }\n\n      ", " {\n        &:hover:not(.", ") {\n          &:before {\n            border-bottom-color: ", ";\n          }\n        }\n      }\n\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      // * safari need that in disabled input\n      -webkit-text-fill-color: ", ";\n      ::placeholder {\n        color: ", ";\n      }\n      &:before {\n        border-bottom-style: solid;\n        border-bottom-color: ", ";\n      }\n      &:after {\n        border-bottom-style: none;\n      }\n    }\n\n    .", " {\n      ", ";\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    /* clears the 'X' from Internet Explorer */\n    input[type='search']::-ms-clear,\n    input[type='search']::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    /* clears the 'X' from Chrome */\n    input[type='search']::-webkit-search-decoration,\n    input[type='search']::-webkit-search-cancel-button,\n    input[type='search']::-webkit-search-results-button,\n    input[type='search']::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    ", "\n  "], ["\n    ", ";\n\n    width: ", ";\n\n    ",
         ";\n\n    .", " {\n      ", ";\n      color: ", ";\n      transform: scale(1);\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n\n      ", " {\n        display: none;\n      }\n    }\n\n    ", ";\n\n    .", " {\n      ", ";\n      text-align: ", ";\n\n      ::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n\n      ",
-        ";\n    }\n\n    .", " {\n      &:before {\n        border-bottom-color: ", ";\n      }\n\n      ", " {\n        &:hover:not(.", ") {\n          &:before {\n            border-bottom-color: ", ";\n          }\n        }\n      }\n\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      // * safari need that in disabled input\n      -webkit-text-fill-color: ", ";\n      ::placeholder {\n        color: ", ";\n      }\n      &:before {\n        border-bottom-style: solid;\n        border-bottom-color: ", ";\n      }\n      &:after {\n        border-bottom-style: none;\n      }\n    }\n\n    .", " {\n      ", ";\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    /* clears the 'X' from Internet Explorer */\n    input[type='search']::-ms-clear,\n    input[type='search']::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    /* clears the 'X' from Chrome */\n    input[type='search']::-webkit-search-decoration,\n    input[type='search']::-webkit-search-cancel-button,\n    input[type='search']::-webkit-search-results-button,\n    input[type='search']::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    ", "\n  "])), belowIconButtonSpacing(spacing(3)), !fullWidth && RcDefaultTextFieldWidth, gutterBottom && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "], ["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "])), RcTextFieldClasses.root, spacing(4)), RcTextFieldInputLabelClasses.root, typography('caption2'), idleColor, RcTextFieldInputLabelClasses.focused, palette2('interactive', 'f01'), RcTextFieldInputClasses.root, textColor, ClearIconButton, showClean && clearBtnInactiveStyle, RcTextFieldInputClasses.input, typography(variant === 'borderLess' ? textVariant : 'subheading1'), align, placeholderColor, clearBtn &&
+        ";\n    }\n\n    .", " {\n      &:before {\n        border-bottom-color: ", ";\n      }\n\n      ", " {\n        &:hover:not(.", ") {\n          &:before {\n            border-bottom-color: ", ";\n          }\n        }\n      }\n\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      // * safari need that in disabled input\n      -webkit-text-fill-color: ", ";\n      ::placeholder {\n        color: ", ";\n      }\n      &:before {\n        border-bottom-style: solid;\n        border-bottom-color: ", ";\n      }\n      &:after {\n        border-bottom-style: none;\n      }\n    }\n\n    .", " {\n      ", ";\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    /* clears the 'X' from Internet Explorer */\n    input[type='search']::-ms-clear,\n    input[type='search']::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    /* clears the 'X' from Chrome */\n    input[type='search']::-webkit-search-decoration,\n    input[type='search']::-webkit-search-cancel-button,\n    input[type='search']::-webkit-search-results-button,\n    input[type='search']::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    ", "\n  "])), belowIconButtonSpacing(spacing(3)), !fullWidth && RcDefaultTextFieldWidth, gutterBottom && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "], ["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "])), RcTextFieldClasses.root, spacing(4)), RcTextFieldInputLabelClasses.root, typography('caption2'), labelRootColor, RcTextFieldInputLabelClasses.focused, color, RcTextFieldInputClasses.root, textColor, ClearIconButton, showClean && clearBtnInactiveStyle, RcTextFieldInputClasses.input, typography(variant === 'borderLess' ? textVariant : 'subheading1'), align, placeholderColor, clearBtn &&
         align &&
-        align !== 'left' && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        width: calc(100% - ", ");\n      "], ["\n        width: calc(100% - ", ");\n      "])), px(RcIconButtonSizes[size])), RcTextFieldInputClasses.underline, palette2('neutral', 'f02'), nonTouchHoverMedia, RcTextFieldInputClasses.disabled, palette2('neutral', 'f06'), palette2('interactive', 'f01'), RcTextFieldInputClasses.error, errorColor, RcTextFieldInputClasses.disabled, disabledColor, disabledColor, disabledColor, disabledColor, RcTextFieldFormHelperTextClasses.root, typography('caption1'), idleColor, RcTextFieldFormHelperTextClasses.error, RcTextFieldInputLabelClasses.error, errorTextColor, RcTextFieldFormHelperTextClasses.disabled, RcTextFieldInputLabelClasses.disabled, disabledColor, variant === 'outline' && OutlineTextFieldStyle);
+        align !== 'left' && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        width: calc(100% - ", ");\n      "], ["\n        width: calc(100% - ", ");\n      "])), px(RcIconButtonSizes[size])), RcTextFieldInputClasses.underline, underlineColor, nonTouchHoverMedia, RcTextFieldInputClasses.disabled, underlineFocusColor, color, RcTextFieldInputClasses.error, errorColor, RcTextFieldInputClasses.disabled, disabledColor, disabledColor, disabledColor, disabledColor, RcTextFieldFormHelperTextClasses.root, typography('caption1'), idleColor, RcTextFieldFormHelperTextClasses.error, RcTextFieldInputLabelClasses.error, errorTextColor, RcTextFieldFormHelperTextClasses.disabled, RcTextFieldInputLabelClasses.disabled, disabledColor, variant === 'outline' && OutlineTextFieldStyle);
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/es6/components/Menu/SubMenu/SubMenu.js

@@ -178,7 +178,7 @@ var _RcSubMenu = forwardRef(function (inProps, ref) {
             title,
             React.createElement(StyledListItemSecondaryAction, null,
                 React.createElement(RcIcon, { size: "medium", color: "neutral.f04", symbol: ArrowRight }))),
-        React.createElement(RcPopper, __assign({ role: "menu", id: popperId, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body }, restPopperProps, { ref: popperRef, open: open, anchorEl: anchorEl, transition: true, placement: "right-start", modifiers: modifiers, onKeyDown: handlePopperKeyDown, onMouseLeave: handlePopperMouseLeave }), function (_a) {
+        React.createElement(RcPopper, __assign({ role: "menu", id: popperId, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, placement: "right-start" }, restPopperProps, { ref: popperRef, open: open, anchorEl: anchorEl, transition: true, modifiers: modifiers, onKeyDown: handlePopperKeyDown, onMouseLeave: handlePopperMouseLeave }), function (_a) {
             var TransitionProps = _a.TransitionProps;
             return (React.createElement(StyledGrow, __assign({}, TransitionProps, { timeout: "auto" }),
                 React.createElement(RcPaper, null,

package/es6/components/Toast/Toast.js

@@ -0,0 +1,47 @@
+import { __assign, __makeTemplateObject, __read, __rest, __spread } from "tslib";
+import React, { forwardRef } from 'react';
+import { styled } from '../../foundation';
+import { Close as CloseIcon } from '../../icon';
+import { RcPortal } from '../Portal';
+import { RcSnackbar, RcSnackbarAction } from '../Snackbar';
+import { ToastStyle } from './styles';
+import { RC_TOAST_CONTAINER_ID } from './utils';
+var _RcToast = forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.container, containerProp = _b === void 0 ? RC_TOAST_CONTAINER_ID : _b, getWindow = _a.getWindow, onClose = _a.onClose, _c = _a.ContentProps, ContentPropsInput = _c === void 0 ? {} : _c, _d = _a.dismissButton, dismissButton = _d === void 0 ? false : _d, _e = _a.autoHideDuration, autoHideDuration = _e === void 0 ? 3000 : _e, rest = __rest(_a, ["children", "container", "getWindow", "onClose", "ContentProps", "dismissButton", "autoHideDuration"]);
+    var container = (function () {
+        var _a;
+        // mean containerProp is id
+        if (typeof containerProp === 'string') {
+            var targetWindow = (_a = getWindow === null || getWindow === void 0 ? void 0 : getWindow()) !== null && _a !== void 0 ? _a : window;
+            return targetWindow.document.getElementById(containerProp);
+        }
+        return containerProp;
+    })();
+    var action = (function () {
+        var originActions = React.Children.toArray(ContentPropsInput.action);
+        if (dismissButton) {
+            var closeAction = (React.createElement(RcSnackbarAction, { key: "dismiss-action", variant: "icon", "aria-label": "Dismiss", symbol: CloseIcon, onClick: function (e) { return handleClose(e, 'dismissButton'); } }));
+            return __spread(originActions, [closeAction]);
+        }
+        return originActions.length === 0 ? null : originActions;
+    })();
+    var messageAlign = (function () {
+        if (action === null || action === void 0 ? void 0 : action.length) {
+            return 'left';
+        }
+        return 'center';
+    })();
+    var ContentProps = __assign(__assign({}, ContentPropsInput), { action: action,
+        messageAlign: messageAlign });
+    var handleClose = function (e, reason) {
+        if (reason === 'clickaway')
+            return;
+        onClose(e, reason);
+    };
+    return (React.createElement(RcPortal, { container: container },
+        React.createElement(RcSnackbar, __assign({}, rest, { autoHideDuration: autoHideDuration, onClose: handleClose, ref: ref, ContentProps: ContentProps }), children)));
+});
+var RcToast = styled(_RcToast)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ToastStyle);
+RcToast.displayName = 'RcToast';
+export { RcToast };
+var templateObject_1;

package/es6/components/Toast/ToastContainer.js

@@ -0,0 +1,15 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { styled } from '../../foundation';
+import { RcPortal } from '../Portal';
+import { ToastContainerStyle } from './styles';
+import { RC_TOAST_CONTAINER_ID } from './utils';
+var _RcToastContainer = forwardRef(function (props, ref) {
+    var _a = props.container, container = _a === void 0 ? document.body : _a, _b = props.id, id = _b === void 0 ? RC_TOAST_CONTAINER_ID : _b, rest = __rest(props, ["container", "id"]);
+    return (React.createElement(RcPortal, { container: container },
+        React.createElement("div", __assign({}, rest, { id: id, ref: ref }))));
+});
+var RcToastContainer = styled(_RcToastContainer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ToastContainerStyle);
+RcToastContainer.displayName = 'RcToastContainer';
+export { RcToastContainer };
+var templateObject_1;

package/es6/components/Toast/index.js

@@ -0,0 +1,3 @@
+export * from './Toast';
+export * from './ToastContainer';
+export { ToastContainerStyle } from './styles';

package/es6/components/Toast/styles/ToastStyle.js

@@ -0,0 +1,10 @@
+import { __makeTemplateObject } from "tslib";
+import { css, spacing, zIndex } from '../../../foundation';
+import { RC_TOAST_CONTAINER_ID } from '../utils';
+export var ToastStyle = function () {
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    margin-bottom: ", ";\n\n    ", "\n    position: static;\n    transform: none;\n  "], ["\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    margin-bottom: ", ";\n\n    ", /** clean snackbar style about anchorOrigin */ "\n    position: static;\n    transform: none;\n  "])), spacing(3), '' /** clean snackbar style about anchorOrigin */);
+};
+export var ToastContainerStyle = function () {
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    #", " {\n      padding-left: ", ";\n      padding-right: ", ";\n\n      position: fixed;\n      top: ", ";\n      left: 0;\n      right: 0;\n\n      z-index: ", ";\n      box-sizing: border-box;\n      pointer-events: none;\n    }\n  "], ["\n    #", " {\n      padding-left: ", ";\n      padding-right: ", ";\n\n      position: fixed;\n      top: ", ";\n      left: 0;\n      right: 0;\n\n      z-index: ", ";\n      box-sizing: border-box;\n      pointer-events: none;\n    }\n  "])), RC_TOAST_CONTAINER_ID, spacing(4), spacing(4), spacing(22), zIndex('toast'));
+};
+var templateObject_1, templateObject_2;

package/es6/components/Toast/styles/index.js

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

package/es6/components/Toast/utils/ToastUtils.js

@@ -0,0 +1 @@
+export var RC_TOAST_CONTAINER_ID = 'RC_TOAST_CONTAINER';

package/es6/components/Toast/utils/index.js

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

package/es6/foundation/config.js

@@ -7,11 +7,14 @@ var RcConfig = /** @class */ (function () {
         this._WARNING_FUNCTION = function (message, options) {
             console[(options === null || options === void 0 ? void 0 : options.level) || 'warn'](message);
         };
-        // * get value once when init
-        this._WARNING_IGNORE =
-            ((_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(JUNO_WARNING_IGNORE_KEY)) === 'true';
-        // * also provide user to set variable from window
-        window.__JUNO__ = this;
+        if (typeof window !== 'undefined') {
+            // SSR support
+            // * get value once when init
+            this._WARNING_IGNORE =
+                ((_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(JUNO_WARNING_IGNORE_KEY)) === 'true';
+            // * also provide user to set variable from window
+            window.__JUNO__ = this;
+        }
     }
     Object.defineProperty(RcConfig.prototype, "WARNING_IGNORE", {
         get: function () {

package/es6/foundation/contexts/PortalWindowContext.js

@@ -1,6 +1,8 @@
 import { createContext, useContext } from 'react';
 var RcPortalWindowContext = createContext({
-    document: document,
+    document: 
+    // directly access `document` will cause error in next.js
+    typeof globalThis !== 'undefined' ? globalThis.document : window.document,
 });
 var useRcPortalWindowContext = function () { return useContext(RcPortalWindowContext); };
 export { RcPortalWindowContext, useRcPortalWindowContext };

package/es6/foundation/hooks/useAnnouncer/useAnnouncer.js

@@ -3,6 +3,13 @@ import { useId } from '../useId';
 export var visuallyHiddenStyles = "\n  clip-path: inset(100%);\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n";
 /**
  * read announce when need read message.
+ *
+ * @example
+ * ```ts
+ *   const announce = useAnnouncer('simpleId');
+ *
+ *   announce(`You click "Announce" button`);
+ * ```
  */
 export var useAnnouncer = function (id) {
     var _id = useId(id ? "rc-announcer-" + id : 'rc-announcer', !id);

package/es6/foundation/hooks/useKeyboardMoveFocus/useKeyboardMoveFocus.js

@@ -56,7 +56,8 @@ export var useKeyboardMoveFocus = function (_a) {
             // * mean that item is disabled, use same direction find next
             else {
                 // * find toIndex is same as current, mean that already find all
-                if (toIndex === Math.max(focusedIndexRef.current, 0)) {
+                if (focusedIndexRef.current !== -1 &&
+                    toIndex === Math.max(focusedIndexRef.current, 0)) {
                     break;
                 }
                 currIndex = toIndex;

package/es6/foundation/theme/ThemeProvider.js

@@ -1,9 +1,10 @@
-import { __assign } from "tslib";
+import { __assign, __rest } from "tslib";
 import 'focus-visible';
 import React from 'react';
-import { MuiThemeProvider, StylesProvider } from '@material-ui/core/styles';
+import { MuiThemeProvider, StylesProvider, createGenerateClassName, } from '@material-ui/core/styles';
 import { ThemeProvider as StyledThemeProvider, useTheme, } from '../styled-components';
 import createTheme from './createTheme';
+import { useResultRef } from '../hooks';
 /**
  * sub theme provider,
  * that will use when you want use multiple theme in one app
@@ -24,6 +25,18 @@ export var RcSubThemeProvider = function (_a) {
  * each app should always have one `RcThemeProvider` at root,
  * if you need multiple, use `RcSubThemeProvider` inside that `RcThemeProvider` */
 export var RcThemeProvider = function (props) {
-    return (React.createElement(StylesProvider, { injectFirst: true },
-        React.createElement(RcSubThemeProvider, __assign({}, props))));
+    var prefixGlobalClass = props.prefixGlobalClass, rest = __rest(props, ["prefixGlobalClass"]);
+    // cannot pass `generateClassName: undefine`
+    // otherwise global class will be random
+    var stylesProviderProps = useResultRef(function () {
+        return prefixGlobalClass
+            ? {
+                generateClassName: createGenerateClassName({
+                    seed: prefixGlobalClass,
+                }),
+            }
+            : {};
+    });
+    return (React.createElement(StylesProvider, __assign({ injectFirst: true }, stylesProviderProps.current),
+        React.createElement(RcSubThemeProvider, __assign({}, rest))));
 };

package/es6/foundation/theme/assets/zIndex.json

@@ -5,5 +5,6 @@
     "modal": 1300,
     "snackbar": 1400,
     "speedDial": 1050,
-    "tooltip": 1500
+    "tooltip": 1500,
+    "toast": 3000
 }

package/foundation/config.js

@@ -9,11 +9,14 @@ var RcConfig = /** @class */ (function () {
         this._WARNING_FUNCTION = function (message, options) {
             console[(options === null || options === void 0 ? void 0 : options.level) || 'warn'](message);
         };
-        // * get value once when init
-        this._WARNING_IGNORE =
-            ((_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(JUNO_WARNING_IGNORE_KEY)) === 'true';
-        // * also provide user to set variable from window
-        window.__JUNO__ = this;
+        if (typeof window !== 'undefined') {
+            // SSR support
+            // * get value once when init
+            this._WARNING_IGNORE =
+                ((_a = window === null || window === void 0 ? void 0 : window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(JUNO_WARNING_IGNORE_KEY)) === 'true';
+            // * also provide user to set variable from window
+            window.__JUNO__ = this;
+        }
     }
     Object.defineProperty(RcConfig.prototype, "WARNING_IGNORE", {
         get: function () {

package/foundation/contexts/PortalWindowContext.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var RcPortalWindowContext = react_1.createContext({
-    document: document,
+    document: 
+    // directly access `document` will cause error in next.js
+    typeof globalThis !== 'undefined' ? globalThis.document : window.document,
 });
 exports.RcPortalWindowContext = RcPortalWindowContext;
 var useRcPortalWindowContext = function () { return react_1.useContext(RcPortalWindowContext); };

package/foundation/hooks/useAnnouncer/useAnnouncer.d.ts

@@ -1,5 +1,12 @@
 export declare const visuallyHiddenStyles = "\n  clip-path: inset(100%);\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n";
 /**
  * read announce when need read message.
+ *
+ * @example
+ * ```ts
+ *   const announce = useAnnouncer('simpleId');
+ *
+ *   announce(`You click "Announce" button`);
+ * ```
  */
 export declare const useAnnouncer: (id?: string | undefined) => (message?: string | undefined) => void;

package/foundation/hooks/useAnnouncer/useAnnouncer.js

@@ -5,6 +5,13 @@ var useId_1 = require("../useId");
 exports.visuallyHiddenStyles = "\n  clip-path: inset(100%);\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n";
 /**
  * read announce when need read message.
+ *
+ * @example
+ * ```ts
+ *   const announce = useAnnouncer('simpleId');
+ *
+ *   announce(`You click "Announce" button`);
+ * ```
  */
 exports.useAnnouncer = function (id) {
     var _id = useId_1.useId(id ? "rc-announcer-" + id : 'rc-announcer', !id);

package/foundation/hooks/useKeyboardMoveFocus/useKeyboardMoveFocus.js

@@ -58,7 +58,8 @@ exports.useKeyboardMoveFocus = function (_a) {
             // * mean that item is disabled, use same direction find next
             else {
                 // * find toIndex is same as current, mean that already find all
-                if (toIndex === Math.max(focusedIndexRef.current, 0)) {
+                if (focusedIndexRef.current !== -1 &&
+                    toIndex === Math.max(focusedIndexRef.current, 0)) {
                     break;
                 }
                 currIndex = toIndex;

package/foundation/theme/ThemeProvider.d.ts

@@ -5,6 +5,8 @@ export declare type RcThemeProviderProps = {
     /** custom theme */
     theme?: RcThemeInput;
     children?: ReactNode;
+    /** prefix the mui global class */
+    prefixGlobalClass?: string;
 };
 /**
  * sub theme provider,

package/foundation/theme/ThemeProvider.js

@@ -6,6 +6,7 @@ var react_1 = tslib_1.__importDefault(require("react"));
 var styles_1 = require("@material-ui/core/styles");
 var styled_components_1 = require("../styled-components");
 var createTheme_1 = tslib_1.__importDefault(require("./createTheme"));
+var hooks_1 = require("../hooks");
 /**
  * sub theme provider,
  * that will use when you want use multiple theme in one app
@@ -26,6 +27,18 @@ exports.RcSubThemeProvider = function (_a) {
  * each app should always have one `RcThemeProvider` at root,
  * if you need multiple, use `RcSubThemeProvider` inside that `RcThemeProvider` */
 exports.RcThemeProvider = function (props) {
-    return (react_1.default.createElement(styles_1.StylesProvider, { injectFirst: true },
-        react_1.default.createElement(exports.RcSubThemeProvider, tslib_1.__assign({}, props))));
+    var prefixGlobalClass = props.prefixGlobalClass, rest = tslib_1.__rest(props, ["prefixGlobalClass"]);
+    // cannot pass `generateClassName: undefine`
+    // otherwise global class will be random
+    var stylesProviderProps = hooks_1.useResultRef(function () {
+        return prefixGlobalClass
+            ? {
+                generateClassName: styles_1.createGenerateClassName({
+                    seed: prefixGlobalClass,
+                }),
+            }
+            : {};
+    });
+    return (react_1.default.createElement(styles_1.StylesProvider, tslib_1.__assign({ injectFirst: true }, stylesProviderProps.current),
+        react_1.default.createElement(exports.RcSubThemeProvider, tslib_1.__assign({}, rest))));
 };

package/foundation/theme/assets/zIndex.json

@@ -5,5 +5,6 @@
     "modal": 1300,
     "snackbar": 1400,
     "speedDial": 1050,
-    "tooltip": 1500
+    "tooltip": 1500,
+    "toast": 3000
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/juno",
-  "version": "1.12.3-beta.5791-ea7a35ca",
+  "version": "1.12.4-beta.5841-601f173e",
   "main": "./index.js",
   "module": "./es6/index.js",
   "author": "RingCentral",
@@ -29,8 +29,8 @@
     "react-beautiful-dnd": "^13.0.0",
     "react-virtuoso": "^1.9.3",
     "resize-observer-polyfill": "^1.5.1",
-    "typeface-lato": "^0.0.75",
-    "tslib": ">=2.0.0"
+    "tslib": ">=2.0.0",
+    "typeface-lato": "^0.0.75"
   },
   "peerDependencies": {
     "moment": "^2.29.1",