@ringcentral/juno 2.17.0 → 2.18.0

package/components/Backdrop/styles/BackdropStyle.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../foundation");
+var utils_1 = require("../utils");
 exports.BackdropStyle = function () {
-    return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
+    return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    &.", " {\n      background-color: rgba(0, 0, 0, 0.7);\n    }\n  "], ["\n    &.", " {\n      background-color: rgba(0, 0, 0, 0.7);\n    }\n  "])), utils_1.RcBackdropClasses.root);
 };
 var templateObject_1;

package/components/Backdrop/utils/BackdropUtils.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var foundation_1 = require("../../../foundation");
-exports.RcBackdropClasses = foundation_1.RcClasses([], 'RcBackdrop');
+exports.RcBackdropClasses = foundation_1.RcClasses(['root'], 'RcBackdrop');

package/components/Dialog/Dialog.js

@@ -10,6 +10,7 @@ var utils_1 = require("./utils");
 var DialogContext_1 = require("./utils/DialogContext");
 exports.RcDialogContext = DialogContext_1.RcDialogContext;
 var HasPortalParentContext_1 = require("../PortalHost/context/HasPortalParentContext");
+var Backdrop_1 = require("../Backdrop");
 var _RcDialog = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcDialog' });
     if (process.env.NODE_ENV !== 'production') {
@@ -48,7 +49,7 @@ var _RcDialog = react_1.forwardRef(function (inProps, ref) {
         role: 'presentation' }, TransitionPropsProp), { onExited: onExited });
     var PaperProps = tslib_1.__assign({ 'aria-modal': true }, PaperPropsProp);
     return (react_1.default.createElement(HasPortalParentContext_1.HasPortalParentProvider, null,
-        react_1.default.createElement(Dialog_1.default, tslib_1.__assign({ ref: ref, fullWidth: fullWidth, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, maxWidth: maxWidth, fullScreen: size === 'fullScreen' ? true : undefined, classes: classes, TransitionProps: TransitionProps, PaperProps: PaperProps }, rest),
+        react_1.default.createElement(Dialog_1.default, tslib_1.__assign({ ref: ref, fullWidth: fullWidth, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, maxWidth: maxWidth, fullScreen: size === 'fullScreen' ? true : undefined, classes: classes, TransitionProps: TransitionProps, PaperProps: PaperProps, BackdropComponent: Backdrop_1.RcBackdrop }, rest),
             react_1.default.createElement(DialogContext_1.RcDialogContext.Provider, { value: contextValue }, children))));
 });
 var RcDialog = foundation_1.styled(_RcDialog)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.DialogStyle);

package/components/Drawer/Drawer.js

@@ -8,6 +8,7 @@ var styles_1 = require("./styles");
 var utils_1 = require("./utils");
 var PortalHost_1 = require("../PortalHost");
 var HasPortalParentContext_1 = require("../PortalHost/context/HasPortalParentContext");
+var Backdrop_1 = require("../Backdrop");
 var _RcDrawer = react_1.forwardRef(function (inProps, ref) {
     var props = foundation_1.useThemeProps({ props: inProps, name: 'RcDrawer' });
     var inlinePaper = props.inlinePaper, radius = props.radius, classesProp = props.classes, children = props.children, PaperPropsProp = props.PaperProps, onClose = props.onClose, SlidePropsProp = props.SlideProps, rest = tslib_1.__rest(props, ["inlinePaper", "radius", "classes", "children", "PaperProps", "onClose", "SlideProps"]);
@@ -31,7 +32,7 @@ var _RcDrawer = react_1.forwardRef(function (inProps, ref) {
     var managerWithID = PortalHost_1.usePortalManagerWithID();
     var SlideProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, SlidePropsProp), { onExited: onExited }), (managerWithID ? { appear: true } : {}));
     return (react_1.default.createElement(HasPortalParentContext_1.HasPortalParentProvider, null,
-        react_1.default.createElement(Drawer_1.default, tslib_1.__assign({}, rest, { ref: ref, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, classes: classes, onClose: onClose, PaperProps: PaperProps, SlideProps: SlideProps }), children)));
+        react_1.default.createElement(Drawer_1.default, tslib_1.__assign({ BackdropComponent: Backdrop_1.RcBackdrop }, rest, { ref: ref, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, classes: classes, onClose: onClose, PaperProps: PaperProps, SlideProps: SlideProps }), children)));
 });
 var RcDrawer = foundation_1.styled(_RcDrawer)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.DrawerStyle);
 exports.RcDrawer = RcDrawer;

package/es6/components/Backdrop/styles/BackdropStyle.js

@@ -1,6 +1,7 @@
 import { __makeTemplateObject } from "tslib";
 import { css } from '../../../foundation';
+import { RcBackdropClasses } from '../utils';
 export var BackdropStyle = function () {
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &.", " {\n      background-color: rgba(0, 0, 0, 0.7);\n    }\n  "], ["\n    &.", " {\n      background-color: rgba(0, 0, 0, 0.7);\n    }\n  "])), RcBackdropClasses.root);
 };
 var templateObject_1;

package/es6/components/Backdrop/utils/BackdropUtils.js

@@ -1,2 +1,2 @@
 import { RcClasses } from '../../../foundation';
-export var RcBackdropClasses = RcClasses([], 'RcBackdrop');
+export var RcBackdropClasses = RcClasses(['root'], 'RcBackdrop');

package/es6/components/Dialog/Dialog.js

@@ -7,6 +7,7 @@ import { DialogStyle } from './styles';
 import { RcDialogClasses } from './utils';
 import { RcDialogContext } from './utils/DialogContext';
 import { HasPortalParentProvider } from '../PortalHost/context/HasPortalParentContext';
+import { RcBackdrop } from '../Backdrop';
 var _RcDialog = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDialog' });
     if (process.env.NODE_ENV !== 'production') {
@@ -45,7 +46,7 @@ var _RcDialog = forwardRef(function (inProps, ref) {
         role: 'presentation' }, TransitionPropsProp), { onExited: onExited });
     var PaperProps = __assign({ 'aria-modal': true }, PaperPropsProp);
     return (React.createElement(HasPortalParentProvider, null,
-        React.createElement(MuiDialog, __assign({ ref: ref, fullWidth: fullWidth, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, maxWidth: maxWidth, fullScreen: size === 'fullScreen' ? true : undefined, classes: classes, TransitionProps: TransitionProps, PaperProps: PaperProps }, rest),
+        React.createElement(MuiDialog, __assign({ ref: ref, fullWidth: fullWidth, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, maxWidth: maxWidth, fullScreen: size === 'fullScreen' ? true : undefined, classes: classes, TransitionProps: TransitionProps, PaperProps: PaperProps, BackdropComponent: RcBackdrop }, rest),
             React.createElement(RcDialogContext.Provider, { value: contextValue }, children))));
 });
 var RcDialog = styled(_RcDialog)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DialogStyle);

package/es6/components/Drawer/Drawer.js

@@ -6,6 +6,7 @@ import { DrawerStyle } from './styles';
 import { RcDrawerClasses } from './utils';
 import { usePortalManagerWithID, useUnmountPortalHandler } from '../PortalHost';
 import { HasPortalParentProvider } from '../PortalHost/context/HasPortalParentContext';
+import { RcBackdrop } from '../Backdrop';
 var _RcDrawer = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcDrawer' });
     var inlinePaper = props.inlinePaper, radius = props.radius, classesProp = props.classes, children = props.children, PaperPropsProp = props.PaperProps, onClose = props.onClose, SlidePropsProp = props.SlideProps, rest = __rest(props, ["inlinePaper", "radius", "classes", "children", "PaperProps", "onClose", "SlideProps"]);
@@ -29,7 +30,7 @@ var _RcDrawer = forwardRef(function (inProps, ref) {
     var managerWithID = usePortalManagerWithID();
     var SlideProps = __assign(__assign(__assign({}, SlidePropsProp), { onExited: onExited }), (managerWithID ? { appear: true } : {}));
     return (React.createElement(HasPortalParentProvider, null,
-        React.createElement(MuiDrawer, __assign({}, rest, { ref: ref, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, classes: classes, onClose: onClose, PaperProps: PaperProps, SlideProps: SlideProps }), children)));
+        React.createElement(MuiDrawer, __assign({ BackdropComponent: RcBackdrop }, rest, { ref: ref, container: externalWindow === null || externalWindow === void 0 ? void 0 : externalWindow.document.body, classes: classes, onClose: onClose, PaperProps: PaperProps, SlideProps: SlideProps }), children)));
 });
 var RcDrawer = styled(_RcDrawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), DrawerStyle);
 RcDrawer.defaultProps = {

package/package.json

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