magneto365.ui 2.65.4 → 2.65.5

package/dist/cjs/index.js

@@ -2711,9 +2711,9 @@ var style$V = {"magneto-ui-mobile-drawer":"mg_mobile_drawer_magneto-ui-mobile-dr
 
 var cx$S = classNames.bind(style$V);
 var Component$23 = function (_a) {
-    var onClose = _a.onClose, isOpen = _a.isOpen, children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.blockBackgroundClose, blockBackgroundClose = _c === void 0 ? false : _c;
-    var _d = React.useState(false), showContent = _d[0], setShowContent = _d[1];
-    var _e = React.useState(isOpen), renderPortal = _e[0], setRenderPortal = _e[1];
+    var onClose = _a.onClose, isOpen = _a.isOpen, children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.blockBackgroundClose, blockBackgroundClose = _c === void 0 ? false : _c, _d = _a.backgroundClassName, backgroundClassName = _d === void 0 ? '' : _d;
+    var _e = React.useState(false), showContent = _e[0], setShowContent = _e[1];
+    var _f = React.useState(isOpen), renderPortal = _f[0], setRenderPortal = _f[1];
     var showMenu = showContent ? 'show' : 'hidden';
     React.useEffect(function () {
         var timer = null;
@@ -2741,7 +2741,7 @@ var Component$23 = function (_a) {
                 React__default["default"].createElement("button", { "data-name": "close-drawer", title: "close-modal", className: cx$S('magneto-ui-close-button'), onClick: onClose },
                     React__default["default"].createElement(IconItem, { icon: Add, hover: false })),
                 React__default["default"].createElement("div", { className: cx$S('magneto-ui-container') }, children)),
-            isOpen && (React__default["default"].createElement("span", { className: cx$S('background-drawer'), onClick: blockBackgroundClose ? function () { return null; } : onClose })))))));
+            isOpen && (React__default["default"].createElement("span", { className: cx$S('background-drawer', backgroundClassName), onClick: blockBackgroundClose ? function () { return null; } : onClose })))))));
 };
 /**
  * Molecule UI component for Mobile Drawer
@@ -4535,7 +4535,7 @@ var Component$1x = function (_a) {
  */
 var MobileSearchbar = Component$1x;
 
-var styles$1p = {"magneto-ui-modal":"mg_modal_magneto-ui-modal_1vun3","magneto-ui-modal__close-btn":"mg_modal_magneto-ui-modal_close-btn_1vun3","magneto-ui-modal__title":"mg_modal_magneto-ui-modal_title_1vun3","magneto-ui-modal__description":"mg_modal_magneto-ui-modal_description_1vun3","magneto-ui-modal__children-container":"mg_modal_magneto-ui-modal_children-container_1vun3","magneto-ui-background-modal":"mg_modal_magneto-ui-background-modal_1vun3","fadeIn":"mg_modal_fadeIn_1vun3"};
+var styles$1p = {"magneto-ui-modal":"mg_modal_magneto-ui-modal_1ffsw","magneto-ui-modal__close-btn":"mg_modal_magneto-ui-modal_close-btn_1ffsw","magneto-ui-modal__title":"mg_modal_magneto-ui-modal_title_1ffsw","magneto-ui-modal__description":"mg_modal_magneto-ui-modal_description_1ffsw","magneto-ui-modal__children-container":"mg_modal_magneto-ui-modal_children-container_1ffsw","magneto-ui-background-modal":"mg_modal_magneto-ui-background-modal_1ffsw","fadeIn":"mg_modal_fadeIn_1ffsw"};
 
 var ModalPortal = function (_a) {
     var children = _a.children;
@@ -4558,7 +4558,7 @@ var ModalPortal = function (_a) {
 };
 
 var Modal = function (_a) {
-    var onClose = _a.onClose, isOpen = _a.isOpen, children = _a.children, title = _a.title, description = _a.description, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.blockBackgroundClose, blockBackgroundClose = _c === void 0 ? false : _c;
+    var onClose = _a.onClose, isOpen = _a.isOpen, children = _a.children, title = _a.title, description = _a.description, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.blockBackgroundClose, blockBackgroundClose = _c === void 0 ? false : _c, _d = _a.backgroundClassName, backgroundClassName = _d === void 0 ? '' : _d;
     React.useEffect(function () {
         var body = document.body;
         if (!body)
@@ -4574,7 +4574,7 @@ var Modal = function (_a) {
             children,
             React__default["default"].createElement("button", { "data-name": "close-drawer", className: "".concat(styles$1p["".concat(classMUI, "-modal__close-btn")]), onClick: onClose, type: "button" },
                 React__default["default"].createElement("img", { src: Close, alt: "close icon" }))),
-        React__default["default"].createElement("span", { className: "".concat(styles$1p["".concat(classMUI, "-background-modal")]), onClick: blockBackgroundClose ? function () { return null; } : onClose })));
+        React__default["default"].createElement("span", { className: "".concat(styles$1p["".concat(classMUI, "-background-modal")], " ").concat(backgroundClassName), onClick: blockBackgroundClose ? function () { return null; } : onClose })));
 };
 var Title = function (_a) {
     var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
@@ -4587,9 +4587,9 @@ var Description = function (_a) {
 var Modal$1 = Object.assign(Modal, { Title: Title, Description: Description });
 
 var Component$1w = function (_a) {
-    var children = _a.children, open = _a.open, onClose = _a.onClose, modalClassName = _a.modalClassName, mobileDrawerClassName = _a.mobileDrawerClassName;
-    var container = useMediaQuery(React__default["default"].createElement(Modal$1, { className: modalClassName, isOpen: open, onClose: onClose }, children), {
-        md: (React__default["default"].createElement(MobileDrawer, { className: mobileDrawerClassName, isOpen: open, onClose: onClose }, children))
+    var children = _a.children, open = _a.open, onClose = _a.onClose, _b = _a.modalClassName, modalClassName = _b === void 0 ? '' : _b, _c = _a.mobileDrawerClassName, mobileDrawerClassName = _c === void 0 ? '' : _c, _d = _a.backgroundClassNameDesktop, backgroundClassNameDesktop = _d === void 0 ? '' : _d, _e = _a.backgroundClassNameMobile, backgroundClassNameMobile = _e === void 0 ? '' : _e;
+    var container = useMediaQuery(React__default["default"].createElement(Modal$1, { className: modalClassName, backgroundClassName: backgroundClassNameDesktop, isOpen: open, onClose: onClose }, children), {
+        md: (React__default["default"].createElement(MobileDrawer, { backgroundClassName: backgroundClassNameMobile, className: mobileDrawerClassName, isOpen: open, onClose: onClose }, children))
     });
     return container;
 };