magneto365.ui 2.71.0 → 2.72.0

package/dist/cjs/types/components/UI/molecules/Drawer/Drawer.interface.d.ts

@@ -42,6 +42,10 @@ export interface IDrawer {
      * this property blocks fn onClose from background
      */
     blockBackgroundClose?: boolean;
+    /**
+     * this property sets custom styles into background drawer
+     */
+    backGroundClassName?: string;
 }
 /**
  * This interface represents a Portal for the Drawer component.

package/dist/esm/index.js

@@ -3656,13 +3656,13 @@ var style$T = {"magneto-ui-drawer":"mg_drawer_magneto-ui-drawer_1hxen","magneto-
 
 var DEFAULT_PADDING = 20;
 var Component$22 = function (_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, isOpen = _a.isOpen, _c = _a.direction, direction = _c === void 0 ? 'left' : _c, isFull = _a.isFull, customPadding = _a.customPadding, drawerWidth = _a.drawerWidth, isMobile = _a.isMobile, hideButton = _a.hideButton, children = _a.children, onClose = _a.onClose, _d = _a.blockBackgroundClose, blockBackgroundClose = _d === void 0 ? false : _d;
+    var _b = _a.className, className = _b === void 0 ? '' : _b, isOpen = _a.isOpen, _c = _a.direction, direction = _c === void 0 ? 'left' : _c, isFull = _a.isFull, customPadding = _a.customPadding, drawerWidth = _a.drawerWidth, isMobile = _a.isMobile, hideButton = _a.hideButton, children = _a.children, onClose = _a.onClose, _d = _a.blockBackgroundClose, blockBackgroundClose = _d === void 0 ? false : _d, _e = _a.backGroundClassName, backGroundClassName = _e === void 0 ? '' : _e;
     var fullDrawer = isFull ? "full-drawer" : '';
     var paddingValue = customPadding !== undefined ? "".concat(customPadding, "px") : "".concat(DEFAULT_PADDING, "px");
     var backgroundEffect = isMobile ? 'no-background' : 'background-drawer';
     var widthValue = { '--drawer-width': drawerWidth };
-    var _e = useState(false), showContent = _e[0], setShowContent = _e[1];
-    var _f = useState(isOpen), renderPortal = _f[0], setRenderPortal = _f[1];
+    var _f = useState(false), showContent = _f[0], setShowContent = _f[1];
+    var _g = useState(isOpen), renderPortal = _g[0], setRenderPortal = _g[1];
     var showDrawer = showContent ? "show-".concat(direction) : "hidden-".concat(direction);
     useEffect(function () {
         var body = document.body;
@@ -3696,7 +3696,7 @@ var Component$22 = function (_a) {
                 !hideButton && (React.createElement("button", { className: style$T['magneto-ui-close-button'], onClick: onClose },
                     React.createElement(IconItem, { icon: Add, hover: false }))),
                 children),
-            isOpen && (React.createElement("span", { className: "".concat(style$T[backgroundEffect]), onClick: blockBackgroundClose ? function () { return null; } : onClose })))))));
+            isOpen && (React.createElement("span", { className: "".concat(style$T[backgroundEffect], " ").concat(backGroundClassName), onClick: blockBackgroundClose ? function () { return null; } : onClose })))))));
 };
 /**
  * Molecule UI component for Drawer