react-dialogger 1.1.121 → 1.1.122

package/components/DialogBase.js

@@ -360,9 +360,9 @@ var DialogBase = /** @class */ (function (_super) {
     };
     DialogBase.prototype.componentDidMount = function () {
         var _this = this;
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         // First position take from Global
-        var _d = this._dialogOptions.snackbar.anchorOrigin, vertical = _d.vertical, horizontal = _d.horizontal;
+        var _f = this._dialogOptions.snackbar.anchorOrigin, vertical = _f.vertical, horizontal = _f.horizontal;
         var initialAnchor = { vertical: vertical, horizontal: horizontal };
         // Merge user defied positions with global positions!
         this._snackbarAnchor = __assign(__assign(__assign({}, initialAnchor), (((_a = this.props.snackbarAnchor) === null || _a === void 0 ? void 0 : _a.vertical) ? { vertical: this.props.snackbarAnchor.vertical } : {})), (((_b = this.props.snackbarAnchor) === null || _b === void 0 ? void 0 : _b.horizontal) ? { horizontal: this.props.snackbarAnchor.horizontal } : {}));
@@ -373,6 +373,9 @@ var DialogBase = /** @class */ (function (_super) {
         }
         // accessFrom Property of Parent object Internal->External
         this.accessFrom = "internal";
+        if ((_e = (_d = this.props.initialOptions) === null || _d === void 0 ? void 0 : _d.backdrop) === null || _e === void 0 ? void 0 : _e.throughable) {
+            this.getDom().style.pointerEvents = 'none';
+        }
     };
     DialogBase.prototype.componentWillUnmount = function () {
         console.log('componentWillUnmount');

package/components/DialogContent.js

@@ -166,6 +166,10 @@ var DialogContent = function (props) {
             }, dialogRef);
         }, children: (0, jsx_runtime_1.jsx)("div", { id: "dialog-main", ref: dialogRef, onClick: function (e) {
                 e.stopPropagation();
+                var dom = dialog.getDom();
+                if (dom) {
+                    dom.style.zIndex = String(dialog.props.zFinder() + 1);
+                }
             }, tabIndex: 0, onKeyDown: function (e) {
                 var target = e.target;
                 if (target.tagName === 'INPUT' ||

package/components/DialogWithBackdropWrapper.js

@@ -7,13 +7,18 @@ var _components_1 = require("./index.js");
 var _helpers_1 = require("../helpers/index.js");
 var _context_1 = require("../context/index.js");
 var DialogWithBackdropWrapper = function () {
-    var _a = (0, react_1.useContext)(_context_1.DialogContentContext), dialog = _a.dialog, backdropRef = _a.backdropRef, baseZoomEffect = _a.baseZoomEffect;
-    var _b = dialog.dialogOptions.backdrop, backgroundColor = _b.backgroundColor, opacity = _b.opacity;
+    var _a, _b;
+    var _c = (0, react_1.useContext)(_context_1.DialogContentContext), dialog = _c.dialog, backdropRef = _c.backdropRef, baseZoomEffect = _c.baseZoomEffect;
+    var _d = dialog.dialogOptions.backdrop, backgroundColor = _d.backgroundColor, opacity = _d.opacity;
     var bgCl = (0, _helpers_1.hexToRGB)(backgroundColor, opacity);
-    return (0, jsx_runtime_1.jsx)("div", { className: "dialog-backdrop dialog-backdrop-show", ref: backdropRef, style: {
+    var classes = ['dialog-backdrop', 'dialog-backdrop-show'];
+    if (dialog.dialogOptions.backdrop.throughable) {
+        classes.push("dialogger-throughable");
+    }
+    return (0, jsx_runtime_1.jsx)("div", { className: classes.join(" "), ref: backdropRef, style: {
             justifyContent: dialog.dialogOptions.base.initialAnchor.horizontal,
             // alignItems: dialogOptions.base.initialAnchor.vertical,
-            background: bgCl
+            background: ((_b = (_a = dialog.dialogOptions) === null || _a === void 0 ? void 0 : _a.backdrop) === null || _b === void 0 ? void 0 : _b.throughable) ? 'transparent !important' : bgCl
         }, onClick: function (e) {
             if (dialog.state.fullscreenMode)
                 return;

package/models/Dialog.js

@@ -194,7 +194,7 @@ var Dialog = /** @class */ (function () {
             // Listeners
             stateListener: this._stateListener, keyboardListener: this._keyboardListener, resizeListener: this._resizeListener, processingListeners: this._processingListeners, abortedListeners: this._abortedListeners, 
             // Others
-            dialogSize: this._dialogSize, initialHolder: this._initialHolder, snackbarAnchor: this._snackbarAnchor, root: root, dom: dom, parent: this }, this._apiRef ? { ref: this._apiRef } : null), { onClose: this._onCloseCallback, inject: this._inject });
+            dialogSize: this._dialogSize, initialHolder: this._initialHolder, snackbarAnchor: this._snackbarAnchor, root: root, dom: dom, parent: this }, this._apiRef ? { ref: this._apiRef } : null), { onClose: this._onCloseCallback, inject: this._inject, zFinder: this.highestZ });
         // @ts-ignore
         // root.render( React.createElement( DialogBase as React.ComponentType<
         //     typeof this._initialValues

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.121",
+  "version": "1.1.122",
   "description": "This package is a continuation of the react-araci package. Due to an error, react-araci was removed, and it has been decided to continue under the new package name react-dialogger",
   "main": "index.js",
   "author": "Sueleyman Topaloglu",

package/styles/dialog.css

@@ -173,6 +173,11 @@
     width: 100%;
   }
 }
+.dialogger-throughable {
+  pointer-events: none;
+  background-color: transparent !important;
+}
+
 .react-guzzle-root {
   position: fixed;
   right: 0;
@@ -208,6 +213,7 @@
   display: flex;
   flex-direction: column;
   overflow: clip;
+  pointer-events: auto;
 }
 .dialog-main .actions-wrapper {
   display: flex;

package/types/DialogTypes.d.ts

@@ -51,6 +51,7 @@ export interface BaseDialogProps<V extends Record<string, any>, I> {
     resizeListener?: (size: IDialogSize, dialog: IDialogApiDef<V, I>) => void;
     processingListeners?: Array<(inProcess: boolean) => void>;
     abortedListeners?: Array<(dialog: IDialogApiDef<V, I>) => void>;
+    zFinder: () => number;
 }
 export interface DialogContentBodyReturnType {
     setProcessing: React.Dispatch<React.SetStateAction<InProcessType>>;
@@ -229,6 +230,7 @@ export interface IBackdropOptions {
     backgroundColor?: string;
     opacity?: number;
     hideOnClick?: boolean;
+    throughable?: false;
 }
 export type TNotifyOnClosing = "snackbar" | "zoom" | undefined;
 export type TInitialHolder = any;