react-dialogger 1.1.51 → 1.1.53

package/components/Actions.js

@@ -10,8 +10,9 @@ var Actions = function (_a) {
     var actions = _a.actions, dialog = _a.dialog;
     var dialogOptions = dialog.dialogOptions;
     return (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' }, children: actions.map(function (action, index) {
+            console.log('Actions_action', action, action.getIntent());
             var referencedAction = dialog.initializeActionRef(action.name);
-            return (0, jsx_runtime_1.jsx)(DialogActionBase_1.default, { name: action.name, ref: referencedAction, dialogBaseComponent: dialog, options: action.options, onClick: action.onClickHandler(), inProcess: action.isInProcess(), style: action.options.style, baseStyle: dialogOptions.base.actions.baseStyle, fontFamily: dialogOptions.base.style.fontFamily, stateListener: action._stateListener }, index.toString());
+            return (0, jsx_runtime_1.jsx)(DialogActionBase_1.default, { name: action.name, ref: referencedAction, dialogBaseComponent: dialog, options: action.options, onClick: action.onClickHandler(), inProcess: action.isInProcess(), style: action.options.style, baseStyle: dialogOptions.base.actions.baseStyle, fontFamily: dialogOptions.base.style.fontFamily, stateListener: action._stateListener, intent: action.getIntent() }, index.toString());
         }) });
 };
 exports.Actions = Actions;

package/components/DialogActionBase.d.ts

@@ -1,9 +1,10 @@
 import { Component } from "react";
 import DialogBase from "./DialogBase";
-import { ActionProps, ActionState, DialogActionType, TBVariant, TBColor, DialogActionOptionsType, TDialogStateListenerForActionCallbackType } from "../types/DialogActionTypes";
+import { ActionProps, ActionState, DialogActionType, TBVariant, TBColor, DialogActionOptionsType, TDialogStateListenerForActionCallbackType, ActionIntent } from "../types/DialogActionTypes";
 declare class DialogActionBase extends Component<ActionProps, ActionState> {
     get dialogBaseComponent(): DialogBase<any>;
     protected _options: DialogActionOptionsType;
+    protected _intent: ActionIntent;
     _stateListener: TDialogStateListenerForActionCallbackType;
     protected _baseDialogAction?: DialogActionBase;
     protected _name: string;
@@ -18,20 +19,20 @@ declare class DialogActionBase extends Component<ActionProps, ActionState> {
     componentDidMount(): void;
     get baseDialogAction(): DialogActionBase;
     getInitialClickHandler: () => DialogActionType;
-    setOptions(options: DialogActionOptionsType): this;
+    updateOptions(options: DialogActionOptionsType): this;
     get options(): DialogActionOptionsType;
-    setLabel: (label: string) => DialogActionBase;
+    updateLabel: (label: string) => DialogActionBase;
     getLabel(): string;
     protected onClick(callback: DialogActionType): DialogActionBase;
     /**
      * @deprecated use Options*/
-    setVariant: (variant: TBVariant) => DialogActionBase;
+    updateVariant: (variant: TBVariant) => DialogActionBase;
     /**
      * @deprecated use Options*/
     getVariant: () => TBVariant;
     /**
      * @deprecated use Options*/
-    setColor: (color: TBColor) => DialogActionBase;
+    updateColor: (color: TBColor) => DialogActionBase;
     /**
      * @deprecated use Options*/
     getColor: () => TBColor;
@@ -45,6 +46,7 @@ declare class DialogActionBase extends Component<ActionProps, ActionState> {
     /**
      * @deprecated use Options*/
     isDisabled: () => boolean;
+    updateIntent: (intent: ActionIntent) => DialogActionBase;
     setInProcess: (inProcess: boolean) => DialogActionBase;
     isInProcess: () => boolean;
     remove: () => void;

package/components/DialogActionBase.js

@@ -75,17 +75,18 @@ var DialogActionBase = /** @class */ (function (_super) {
             disabled: false,
             prevDisabled: false
         };
+        _this._intent = null; // {color: "primary", variant: 'contained'};
         _this.getInitialClickHandler = function () {
             return _this._initialClickHandler;
         };
-        _this.setLabel = function (label) {
+        _this.updateLabel = function (label) {
             _this._options.label = label;
             _this.forceUpdate();
             return _this;
         };
         /**
          * @deprecated use Options*/
-        _this.setVariant = function (variant) {
+        _this.updateVariant = function (variant) {
             _this._options.variant = variant;
             _this.forceUpdate();
             return _this;
@@ -97,7 +98,7 @@ var DialogActionBase = /** @class */ (function (_super) {
         };
         /**
          * @deprecated use Options*/
-        _this.setColor = function (color) {
+        _this.updateColor = function (color) {
             // this._color = color;
             _this._options.color = color;
             _this.forceUpdate();
@@ -126,6 +127,10 @@ var DialogActionBase = /** @class */ (function (_super) {
         _this.isDisabled = function () {
             return _this._options.disabled;
         };
+        _this.updateIntent = function (intent) {
+            _this.setState(function (prevState) { return (__assign(__assign({}, _this.state), { intent: intent })); });
+            return _this;
+        };
         _this.setInProcess = function (inProcess) {
             _this._inProcess = inProcess;
             _this._options.disabled = inProcess;
@@ -147,8 +152,16 @@ var DialogActionBase = /** @class */ (function (_super) {
             return _this._onClick;
         };
         _this.render = function () {
-            console.log('this._options.style.render', _this._options);
-            return (0, jsx_runtime_1.jsx)(index_1.RippleButton, { ref: _this._buttonRef, innerRef: _this._rippleButtonRef, variant: _this._options.variant, color: _this._options.color, disabled: _this._options.disabled, onClick: function (e) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            console.log('Dialog_Action_Base_render', _this._options, _this._intent);
+            // Set as default converted from action name prop
+            var converted = (_b = (_a = _this.props.name) === null || _a === void 0 ? void 0 : _a.replace(/action/i, '')) !== null && _b !== void 0 ? _b : _this.props.name;
+            _this._options.label = (_g = ((_f = (_e = (_d = (_c = _this.props.dialogBaseComponent) === null || _c === void 0 ? void 0 : _c.dialogOptions) === null || _d === void 0 ? void 0 : _d.localText) === null || _e === void 0 ? void 0 : _e[converted]) !== null && _f !== void 0 ? _f : converted)) !== null && _g !== void 0 ? _g : 'Button';
+            return (0, jsx_runtime_1.jsx)(index_1.RippleButton, { ref: _this._buttonRef, innerRef: _this._rippleButtonRef, 
+                // Intent Based
+                variant: (_k = (_j = (_h = _this.state) === null || _h === void 0 ? void 0 : _h.intent) === null || _j === void 0 ? void 0 : _j.variant) !== null && _k !== void 0 ? _k : _this._options.variant, 
+                // Intent Based
+                color: (_o = (_m = (_l = _this.state) === null || _l === void 0 ? void 0 : _l.intent) === null || _m === void 0 ? void 0 : _m.color) !== null && _o !== void 0 ? _o : _this._options.color, disabled: _this._options.disabled, onClick: function (e) {
                     if (_this._options.disabled || _this.isInProcess())
                         return;
                     // @ts-ignore
@@ -159,8 +172,16 @@ var DialogActionBase = /** @class */ (function (_super) {
                             buttonRef.style.minWidth = buttonRef.getBoundingClientRect().width + 'px';
                         }
                     }
+                    /**
+                     * 🎯 Amaç:
+                     * action veya Action kelimesini silmek
+                     * this.props.name.replace(/action/i, '');
+                     * /action/ → kelime
+                     * i → case-insensitive
+                     * Daha temiz, daha kısa
+                     */
                     return (0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.CircularProgress, { size: 15, inProcess: { inProcess: _this.isInProcess() } }), !_this.isInProcess() &&
-                                _this._options.label] });
+                                _this.options.label] });
                 } });
         };
         _this._options = props.options;
@@ -172,7 +193,8 @@ var DialogActionBase = /** @class */ (function (_super) {
         _this._inProcess = props.inProcess;
         _this.state = {
             coords: { x: -1, y: -1 },
-            isRippling: false
+            isRippling: false,
+            intent: props.intent
         };
         _this._buttonRef = React.createRef();
         _this._rippleButtonRef = React.createRef();
@@ -208,9 +230,7 @@ var DialogActionBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    DialogActionBase.prototype.setOptions = function (options) {
-        console.log(23);
-        console.log('setOptions-XAA', JSON.stringify(options));
+    DialogActionBase.prototype.updateOptions = function (options) {
         this._options = __assign(__assign({}, this._options), options);
         this.forceUpdate();
         return this;

package/components/DialogBase.d.ts

@@ -7,6 +7,7 @@ import { DialogContentFooterReturnType } from "../types/DialogActionTypes";
 import Dialog, { DialogAction } from "../index";
 interface IFormikAdapter extends Pick<FormikProps<any>, 'setValues' | 'setFieldValue' | 'values'> {
 }
+type FeatureType = Partial<Record<string, any>>;
 declare class DialogBase<Values extends Record<string, any>> extends Component<BaseDialogProps, BaseDialogState> {
     _dialogTranslate: {
         lastX: number;
@@ -15,7 +16,6 @@ declare class DialogBase<Values extends Record<string, any>> extends Component<B
     readonly _actionRefs: {
         [key: string]: RefObject<DialogActionBase>;
     };
-    private _keyboardListener;
     protected _inlineFormikProps: IFormikAdapter;
     protected _header: TDialogCallbackFn;
     protected _body: TDialogCallbackFn;
@@ -38,7 +38,12 @@ declare class DialogBase<Values extends Record<string, any>> extends Component<B
     private readonly _dialogWithBackDropRef;
     protected readonly _parent: Dialog;
     private _accessFrom;
+    private _processingListener;
     constructor(props?: Readonly<BaseDialogProps>);
+    private T;
+    private readonly _features;
+    addFeature(key: string, value: any): void;
+    getFeature(key: string): FeatureType;
     get parent(): Dialog;
     get dialogTranslate(): {
         lastX: number;
@@ -63,9 +68,10 @@ declare class DialogBase<Values extends Record<string, any>> extends Component<B
     close: (callbackFn?: () => void) => void;
     focus: () => void;
     get actions(): {
-        [key: string]: Pick<DialogActionBase, "setOptions" | "setInProcess" | "getLabel" | "options" | "click" | "remove" | "name">;
+        [key: string]: Pick<DialogActionBase, "updateOptions" | "setInProcess" | "getLabel" | "options" | "click" | "remove" | "name">;
     };
     updateBody(body: TDialogCallbackFn): void;
+    processingListener(listener: (inProcess: boolean) => void): this;
     getDom: () => HTMLDivElement;
     get snackbar(): {
         open: (message: string, severity: TSeverity, key?: string, action?: ((key: string, snackbarRef: any) => ReactNode | void), autoHideDuration?: number | null) => void;

package/components/DialogBase.js

@@ -58,15 +58,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var React = __importStar(require("react"));
 var lodash_1 = require("lodash");
 var _1 = require("./");
-// Bounds methods
-var helpers_1 = require("../helpers");
 var dialogRectAuto_1 = require("../helpers/dialogRectAuto");
+var DialogContentContextProvider_1 = __importDefault(require("../context/DialogContentContextProvider"));
 var DialogBase = /** @class */ (function (_super) {
     __extends(DialogBase, _super);
     function DialogBase(props) {
@@ -78,6 +80,8 @@ var DialogBase = /** @class */ (function (_super) {
         _this._inProcess = { inProcess: false };
         _this._footerRef = React.createRef();
         _this._headerRef = React.createRef();
+        _this.T = [];
+        _this._features = {};
         // Initialize a ref for each action dynamically
         _this.initializeActionRef = function (key) {
             if (!_this._actionRefs.hasOwnProperty(key)) {
@@ -107,7 +111,7 @@ var DialogBase = /** @class */ (function (_super) {
                         // Set the options with prevDisabled as the current disabled state
                         if (currentDisabled !== process) {
                             action.current
-                                .setOptions(__assign(__assign({}, action.current.options), { prevDisabled: currentDisabled, disabled: process // Set the new disabled state based on the process
+                                .updateOptions(__assign(__assign({}, action.current.options), { prevDisabled: currentDisabled, disabled: process // Set the new disabled state based on the process
                              }));
                         }
                     }
@@ -118,7 +122,7 @@ var DialogBase = /** @class */ (function (_super) {
                         // Restore the previous disabled state from options
                         // Call prevDisabled state from memo
                         action.current
-                            .setOptions(__assign(__assign({}, action.current.options), { disabled: action.current.options.prevDisabled // Set the new disabled state based on the process
+                            .updateOptions(__assign(__assign({}, action.current.options), { disabled: action.current.options.prevDisabled // Set the new disabled state based on the process
                          }));
                     }
                 }
@@ -126,23 +130,23 @@ var DialogBase = /** @class */ (function (_super) {
             if (!process) {
                 _this.snackbar.close("kInProcess");
             }
+            if (typeof _this._processingListener === "function") {
+                _this._processingListener(process);
+            }
             // @ts-ignore
             (_c = _this._footerRef.current) === null || _c === void 0 ? void 0 : _c.setProcessing(process);
             return _this;
         };
         _this.isInProcess = function () {
-            // return this.state.inProcess;
             return _this._inProcess;
-            // @ts-ignore
-            // return this._footerRef?.current?.inProcess ?? false;
         };
         _this.close = function (callbackFn) {
-            var _a;
+            var _a, _b, _c, _d;
             if (_this._footerRef.current.inProcess) {
                 var notify = (_a = _this._dialogOptions.base.notifyOnClosing) !== null && _a !== void 0 ? _a : "snackbar";
                 if (notify === "snackbar") {
-                    // this.snackbar.open(this._dialogOptions.snackbar.busyMessage ? this._dialogOptions.snackbar.busyMessage : 'In Process, Please wait...', "warning", "kInProcess");
-                    _this.snackbar.open(_this._dialogOptions.snackbar.busyMessage ? _this._dialogOptions.snackbar.busyMessage : 'In Process, Please wait...', "warning");
+                    var busyMessage = (_d = (_c = (_b = _this._dialogOptions) === null || _b === void 0 ? void 0 : _b.localText) === null || _c === void 0 ? void 0 : _c.busyMessage) !== null && _d !== void 0 ? _d : 'In Process, Please wait...';
+                    _this.snackbar.open(busyMessage, "warning");
                 }
                 else {
                     _this._dialogWithBackDropRef.current.baseZoomEffect();
@@ -164,11 +168,15 @@ var DialogBase = /** @class */ (function (_super) {
         };
         _this.render = function () {
             console.log('this._prevDialogRect', _this.state.prevDialogRect);
-            return (0, jsx_runtime_1.jsx)(_1.DialogWithBackdropWrapper, { initialValues: _this.props.initialValues, dialog: _this, 
+            return (0, jsx_runtime_1.jsx)(DialogContentContextProvider_1.default
+            // 1️⃣initialValues={this.props.initialValues}
+            , { 
+                // 1️⃣initialValues={this.props.initialValues}
+                dialogBase: _this, 
                 // Component
-                header: _this.props.header, body: _this.state.body, actions: _this.props.actions, 
+                body: _this.state.body, 
                 // Refs Props
-                ref: _this._dialogWithBackDropRef, dialogRef: _this._dialogRef, headerRef: _this._headerRef, bodyRef: _this._dialogBodyRef, footerRef: _this._footerRef, backdropRef: _this._backdropRef, snackbarRef: _this._snackbarRef, prevDialogRect: _this.state.prevDialogRect });
+                dialogRef: _this._dialogRef, headerRef: _this._headerRef, bodyRef: _this._dialogBodyRef, footerRef: _this._footerRef, backdropRef: _this._backdropRef, snackbarRef: _this._snackbarRef, prevDialogRect: _this.state.prevDialogRect, children: (0, jsx_runtime_1.jsx)(_1.DialogWithBackdropWrapper, {}) });
         };
         _this.state = {
             inProcess: { inProcess: false },
@@ -204,6 +212,7 @@ var DialogBase = /** @class */ (function (_super) {
                 size: _this._dialogSize
             }
         }, _this._dialogOptions);
+        console.log('Dialog_Base_Options', defaultOptions, window["dialogOptions"], props.initialOptions);
         _this._dialogOptions = (0, lodash_1.merge)({}, defaultOptions, window["dialogOptions"], props.initialOptions);
         _this._header = props.header;
         _this._body = props.body;
@@ -219,9 +228,17 @@ var DialogBase = /** @class */ (function (_super) {
         _this._initialValues = props.initialValues;
         _this._dialogWithBackDropRef = (0, react_1.createRef)();
         _this._parent = props.parent;
+        _this._processingListener = props.processingListener;
+        _this._features = [];
         console.log('this._dialogOptions', _this._dialogOptions);
         return _this;
     }
+    DialogBase.prototype.addFeature = function (key, value) {
+        this._features[key] = value;
+    };
+    DialogBase.prototype.getFeature = function (key) {
+        return this._features[key];
+    };
     Object.defineProperty(DialogBase.prototype, "parent", {
         get: function () {
             return this._parent;
@@ -329,33 +346,16 @@ var DialogBase = /** @class */ (function (_super) {
     };
     // ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
     DialogBase.prototype.componentDidMount = function () {
-        var _a, _b, _c, _d, _e;
-        console.log('clalisan componentDidMount');
-        // İlk konumları global seçeneklerden al
-        var _f = this._dialogOptions.snackbar.anchorOrigin, vertical = _f.vertical, horizontal = _f.horizontal;
+        var _a, _b, _c;
+        // First position take from Global
+        var _d = this._dialogOptions.snackbar.anchorOrigin, vertical = _d.vertical, horizontal = _d.horizontal;
         var initialAnchor = { vertical: vertical, horizontal: horizontal };
-        // Kullanıcı tanımlı konumlar varsa, onları ilk konumlarla birleştir
+        // 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 } : {}));
         if (typeof ((_c = this.props) === null || _c === void 0 ? void 0 : _c.didMountCallback) === "function") {
             this.props.didMountCallback(this);
         }
-        // Register Dialog Bounds
-        if ((_d = this._dialogOptions.base) === null || _d === void 0 ? void 0 : _d.memoBounds) {
-            if (!helpers_1.InitDialogMemoizeBoundsDeclared) {
-                throw new Error('InitDialogMemoizeBounds is not defined. Please make sure to declare it only once, at the top‑level of your module—outside of App or its render logic.\n' +
-                    'InitDialogMemoizeBounds()\n' +
-                    'const App() => {...');
-            }
-            var _g = (_e = this._dialogRef.current) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect(), width = _g.width, height = _g.height, x = _g.x, y = _g.y;
-            (0, helpers_1.dialogRegister)(this._dialogOptions.base.id, {
-                width: width,
-                height: height,
-                x: x,
-                y: y,
-                fullscreen: false
-            });
-        }
-        // Parent objesinin accessFrom özelliğini ayarla
+        // accessFrom Property of Parent object Internal->External
         this.accessFrom = "internal";
     };
     DialogBase.prototype.kill = function (callbackFn) {
@@ -397,6 +397,11 @@ var DialogBase = /** @class */ (function (_super) {
         var _this = this;
         this.setState(function (prevState) { return (__assign(__assign({}, _this.state), { body: body })); });
     };
+    DialogBase.prototype.processingListener = function (listener) {
+        // @ts-ignore
+        this._processingListener = listener;
+        return this;
+    };
     Object.defineProperty(DialogBase.prototype, "snackbar", {
         // Reference: https://notistack.com/api-reference#mutual-props
         get: function () {

package/components/DialogContent.d.ts

@@ -1,4 +1,3 @@
 import * as React from "react";
-import { IContentProps } from "../types/DialogTypes";
-declare const DialogContent: React.FC<IContentProps>;
+declare const DialogContent: React.FC<{}>;
 export { DialogContent };

package/components/DialogContent.js

@@ -70,22 +70,26 @@ var _1 = require("./");
 var react_1 = require("react");
 var helpers_2 = require("../helpers");
 var jumper_animate_1 = require("./utils/effects/jumper-animate");
-var WithSnackbar = function (props) {
-    return (0, jsx_runtime_1.jsx)(notistack_1.SnackbarProvider, { ref: props.snackbarRef, maxSnack: props.maxSnack, children: props.children });
-};
-var DialogContent = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var body = _a.body, header = _a.header, actions = _a.actions, dialogRef = _a.dialogRef, headerRef = _a.headerRef, bodyRef = _a.bodyRef, footerRef = _a.footerRef, dialogOptions = _a.dialogOptions, backdropRef = _a.backdropRef, dialog = _a.dialog, resizeableObject = _a.resizeableObject, prevDialogRect = _a.prevDialogRect, snackbarRef = _a.snackbarRef;
+var DialogContentContextProvider_1 = require("../context/DialogContentContextProvider");
+var DialogContent = function (props) {
+    var _a, _b, _c, _d, _e;
+    var _f = (0, react_1.useContext)(DialogContentContextProvider_1.DialogContentContext), dialog = _f.dialog, dialogRef = _f.dialogRef, prevDialogRect = _f.prevDialogRect, backdropRef = _f.backdropRef, snackbarRef = _f.snackbarRef, footerRef = _f.footerRef, resizeableObject = _f.resizeableObject;
+    var dialogOptions = dialog.dialogOptions;
+    var baseOptions = dialogOptions.base;
     var _g = React.useState(false), fullscreenMode = _g[0], setFullscreenMode = _g[1];
     var _h = React.useState(null), rect = _h[0], setRect = _h[1];
-    var baseOptions = dialogOptions.base;
-    /**
-     * default null
-     * If memoized, than read values from memory
-     * */
-    var base = dialogOptions.base;
-    var bounds = ((_b = dialogOptions.base) === null || _b === void 0 ? void 0 : _b.memoBounds) ? (0, helpers_1.getDialogBounds)(base.id) : null;
+    var bounds = ((_a = dialog.dialogOptions.base) === null || _a === void 0 ? void 0 : _a.memoBounds) ? (0, helpers_1.getDialogBounds)(dialog.dialogOptions.base.id) : null;
     var domZIndex = window.getComputedStyle(dialog.getDom()).zIndex;
+    var positionSelector = function () {
+        var _a;
+        var dialogRectSelectors = { xKey: 'marginLeft', yKey: 'marginTop' };
+        if (prevDialogRect === null || prevDialogRect === void 0 ? void 0 : prevDialogRect.isMultiple) {
+            dialogRectSelectors = { xKey: 'left', yKey: 'top' };
+        }
+        var _b = bounds !== null && bounds !== void 0 ? bounds : {}, fullscreen = _b.fullscreen, x = _b.x, y = _b.y, restBounds = __rest(_b, ["fullscreen", "x", "y"]);
+        var cssBounds = __assign(__assign(__assign(__assign({}, restBounds), (_a = {}, _a[dialogRectSelectors.xKey] = prevDialogRect === null || prevDialogRect === void 0 ? void 0 : prevDialogRect.left, _a[dialogRectSelectors.yKey] = prevDialogRect === null || prevDialogRect === void 0 ? void 0 : prevDialogRect.top, _a)), prevDialogRect.isMultiple ? { position: 'absolute' } : null), { translate: prevDialogRect.isMultiple ? "".concat(5, "px ").concat(5, "px") : 'none' });
+        return __assign({}, bounds ? { position: 'absolute', top: bounds.y, left: bounds.x, width: bounds.width, height: bounds.height } : cssBounds);
+    };
     // Effect Listener
     (0, react_1.useEffect)(function () {
         var _a;
@@ -101,6 +105,7 @@ var DialogContent = function (_a) {
             }
         }
     }, [dialog === null || dialog === void 0 ? void 0 : dialog.values]);
+    // Listener & Animate
     (0, react_1.useEffect)(function () {
         // setDialogRect();
         (0, helpers_2.formInputKeyListeners)(dialogRef.current);
@@ -108,15 +113,31 @@ var DialogContent = function (_a) {
             (0, jumper_animate_1.jumperAnimate)(dialogRef.current);
         }
     }, []);
+    // Set Rect
     (0, react_1.useEffect)(function () {
-        var _a;
-        var dialogRectSelectors = { xKey: 'marginLeft', yKey: 'marginTop' };
-        if (prevDialogRect === null || prevDialogRect === void 0 ? void 0 : prevDialogRect.isMultiple) {
-            dialogRectSelectors = { xKey: 'left', yKey: 'top' };
-        }
-        var _b = bounds !== null && bounds !== void 0 ? bounds : {}, fullscreen = _b.fullscreen, x = _b.x, y = _b.y, restBounds = __rest(_b, ["fullscreen", "x", "y"]);
-        var cssBounds = __assign(__assign(__assign(__assign({}, restBounds), (_a = {}, _a[dialogRectSelectors.xKey] = prevDialogRect === null || prevDialogRect === void 0 ? void 0 : prevDialogRect.left, _a[dialogRectSelectors.yKey] = prevDialogRect === null || prevDialogRect === void 0 ? void 0 : prevDialogRect.top, _a)), prevDialogRect.isMultiple ? { position: 'absolute' } : null), { translate: prevDialogRect.isMultiple ? "".concat(5, "px ").concat(5, "px") : 'none' });
-        setRect(__assign({}, bounds ? { position: 'absolute', top: bounds.y, left: bounds.x, width: bounds.width, height: bounds.height } : cssBounds));
+        setRect(positionSelector());
+    }, []);
+    // Register Dialog If already not registered
+    (0, react_1.useEffect)(function () {
+        // Register Dialog Bounds
+        setTimeout(function () {
+            var _a, _b;
+            if ((_a = dialog.dialogOptions.base) === null || _a === void 0 ? void 0 : _a.memoBounds) {
+                if (!helpers_1.InitDialogMemoizeBoundsDeclared) {
+                    throw new Error('InitDialogMemoizeBounds is not defined. Please make sure to declare it only once, at the top‑level of your module—outside of App or its render logic.\n' +
+                        'InitDialogMemoizeBounds()\n' +
+                        'const App() => {...');
+                }
+                var _c = (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect(), width = _c.width, height = _c.height, x = _c.x, y = _c.y;
+                (0, helpers_1.dialogRegister)(dialog.dialogOptions.base.id, {
+                    width: width,
+                    height: height,
+                    x: x,
+                    y: y,
+                    fullscreen: false
+                });
+            }
+        }, 1000);
     }, []);
     return (0, jsx_runtime_1.jsx)(react_draggable_1.default, { disabled: !baseOptions.draggable || fullscreenMode, axis: 'both', handle: baseOptions.draggable ? '.drag-handle' : '', scale: 1, ref: backdropRef, onDrag: function (event, data) {
             event.stopPropagation();
@@ -134,7 +155,7 @@ var DialogContent = function (_a) {
                 y: y,
                 fullscreen: false
             }, dialogRef);
-        }, children: (0, jsx_runtime_1.jsxs)("div", { id: "dialog-main", ref: dialogRef, onClick: function (e) {
+        }, children: (0, jsx_runtime_1.jsx)("div", { id: "dialog-main", ref: dialogRef, onClick: function (e) {
                 e.stopPropagation();
             }, tabIndex: 0, onKeyDown: function (e) {
                 var target = e.target;
@@ -147,9 +168,9 @@ var DialogContent = function (_a) {
                     // @ts-ignore
                     dialog.props.keyboardListener(e.key, _this);
                 }
-            }, className: baseOptions.size.width === 'auto' ? 'auto' : "dialog-width-".concat(dialogOptions.base.size.width, " dialog-main show-opacity show-position-").concat(baseOptions.initialAnchor.vertical), style: __assign(__assign(__assign(__assign({ height: (_c = baseOptions.size.height) !== null && _c !== void 0 ? _c : 'auto' }, typeof baseOptions.size.width === "number" ? { width: "".concat(baseOptions.size.width, "px") } : { width: "".concat(baseOptions.size.width) }), { outline: 'none', fontFamily: (_d = baseOptions.style.fontFamily) !== null && _d !== void 0 ? _d : 'Arial' }), rect), { alignSelf: (_e = baseOptions.initialAnchor.vertical) !== null && _e !== void 0 ? _e : 'flex-start', justifySelf: (_f = baseOptions.initialAnchor.horizontal) !== null && _f !== void 0 ? _f : 'flex-start' }), children: [(0, jsx_runtime_1.jsxs)(WithSnackbar, { snackbarRef: snackbarRef, maxSnack: dialogOptions.snackbar.maxSnack, children: [(header || dialogOptions.slot.header) && ((0, jsx_runtime_1.jsx)(_1.DialogContentHeader, { ref: headerRef, dialogRef: dialogRef, header: header, dialog: dialog, bounds: bounds })), (0, jsx_runtime_1.jsx)(_1.DialogContentBody, { ref: bodyRef, dialog: dialog, body: body }), (0, jsx_runtime_1.jsx)(_1.DialogContentFooter, { ref: footerRef, dialog: dialog, actions: actions })] }), (baseOptions.resizeable) &&
-                    (0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "resizable-handle", style: {
-                                zIndex: parseInt(domZIndex) + 1
-                            }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(ResizeIcon_1.default, { color: '#286e94' }) }) })] }) });
+            }, className: baseOptions.size.width === 'auto' ? 'auto' : "dialog-width-".concat(dialogOptions.base.size.width, " dialog-main show-opacity show-position-").concat(baseOptions.initialAnchor.vertical), style: __assign(__assign(__assign(__assign({ height: (_b = baseOptions.size.height) !== null && _b !== void 0 ? _b : 'auto' }, typeof baseOptions.size.width === "number" ? { width: "".concat(baseOptions.size.width, "px") } : { width: "".concat(baseOptions.size.width) }), { outline: 'none', fontFamily: (_c = baseOptions.style.fontFamily) !== null && _c !== void 0 ? _c : 'Arial' }), rect), { alignSelf: (_d = baseOptions.initialAnchor.vertical) !== null && _d !== void 0 ? _d : 'flex-start', justifySelf: (_e = baseOptions.initialAnchor.horizontal) !== null && _e !== void 0 ? _e : 'flex-start' }), children: (0, jsx_runtime_1.jsxs)(notistack_1.SnackbarProvider, { ref: snackbarRef, maxSnack: dialog.dialogOptions.snackbar.maxSnack, children: [(dialog.props.header || dialogOptions.slot.header) && ((0, jsx_runtime_1.jsx)(_1.DialogContentHeader, { header: dialog.props.header, bounds: bounds })), (0, jsx_runtime_1.jsx)(_1.DialogContentBody, { body: dialog.state.body }), (0, jsx_runtime_1.jsx)(_1.DialogContentFooter, { ref: footerRef }), (baseOptions.resizeable) &&
+                        (0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "resizable-handle", style: {
+                                    zIndex: parseInt(domZIndex) + 1
+                                }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(ResizeIcon_1.default, { color: '#286e94' }) }) })] }) }) });
 };
 exports.DialogContent = DialogContent;

package/components/DialogContentBody.d.ts

@@ -1,10 +1,7 @@
 import * as React from "react";
 import { TDialogCallbackFn } from "../types/DialogTypes";
-import DialogBase from "./DialogBase";
 interface IContentBodyProps {
     body: TDialogCallbackFn;
-    dialog: DialogBase<any>;
-    ref?: React.RefObject<any>;
 }
 declare const DialogContentBody: React.FC<IContentBodyProps>;
 export { DialogContentBody };

package/components/DialogContentBody.js

@@ -36,6 +36,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogContentBody = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
+var react_1 = require("react");
+var DialogContentContextProvider_1 = require("../context/DialogContentContextProvider");
 var Placeholder = function (_a) {
     var dialogOptions = _a.dialogOptions, placeholder = _a.placeholder;
     var bgColor = dialogOptions.base.style.backgroundColor ?
@@ -49,9 +51,16 @@ var Placeholder = function (_a) {
         }, children: placeholder });
 };
 var DialogContentBody = React.forwardRef(function (_a, ref) {
-    var body = _a.body, dialog = _a.dialog;
+    // const [localBody, setLocalBody] = React.useState(null);
+    var body = _a.body;
+    var dialog = (0, react_1.useContext)(DialogContentContextProvider_1.DialogContentContext).dialog;
+    // useEffect(() => {
+    //     setLocalBody(body(dialog));
+    // }, [body]);
     if (body instanceof Function) {
-        return (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-body', style: { height: '100%' }, children: [dialog.holder && (0, jsx_runtime_1.jsx)(Placeholder, { dialogOptions: dialog.dialogOptions, placeholder: dialog.holder }), body(dialog)] });
+        var BodyElement = body(dialog); // localBody;
+        console.log('Typeof BodyElement', BodyElement);
+        return (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-body', style: { height: '100%' }, children: [dialog.holder && (0, jsx_runtime_1.jsx)(Placeholder, { dialogOptions: dialog.dialogOptions, placeholder: dialog.holder }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: BodyElement })] });
     }
     return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-body', style: { height: '100%', padding: 10 }, children: dialog.holder ?
             (0, jsx_runtime_1.jsx)(Placeholder, { dialogOptions: dialog.dialogOptions, placeholder: dialog.holder })

package/components/DialogContentFooter.js

@@ -52,13 +52,14 @@ var react_1 = require("react");
 var Features_1 = require("./Features");
 var context_1 = require("../context");
 var _1 = require("./");
-var DialogContentFooter = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b, _c, _d;
-    var actions = _a.actions, dialog = _a.dialog;
+var DialogContentContextProvider_1 = require("../context/DialogContentContextProvider");
+var DialogContentFooter = (0, react_1.forwardRef)(function (props, ref) {
+    var _a, _b, _c;
+    var dialog = (0, react_1.useContext)(DialogContentContextProvider_1.DialogContentContext).dialog;
     var dialogOptions = dialog.dialogOptions;
-    var CustomFooter = (_b = dialogOptions.slot) === null || _b === void 0 ? void 0 : _b.footer;
+    var CustomFooter = (_a = dialogOptions.slot) === null || _a === void 0 ? void 0 : _a.footer;
     // Imperative handle
-    var _e = React.useState(false), inProcess = _e[0], setInProcess = _e[1];
+    var _d = React.useState(false), inProcess = _d[0], setInProcess = _d[1];
     var setProcessing = function (inProcess) {
         setInProcess(inProcess);
     };
@@ -77,9 +78,9 @@ var DialogContentFooter = (0, react_1.forwardRef)(function (_a, ref) {
             inProcess: dialog.isInProcess()
         });
     }
-    return (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-footer', style: (_d = (_c = dialogOptions.base) === null || _c === void 0 ? void 0 : _c.footer) === null || _d === void 0 ? void 0 : _d.style, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(context_1.WithHeaderFooterContext, __assign({}, staticProps, { dialog: dialog, children: dialogOptions.slot.footer ?
+    return (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-footer', style: (_c = (_b = dialogOptions.base) === null || _b === void 0 ? void 0 : _b.footer) === null || _c === void 0 ? void 0 : _c.style, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(context_1.WithHeaderFooterContext, __assign({}, staticProps, { dialog: dialog, children: dialogOptions.slot.footer ?
                         (0, jsx_runtime_1.jsx)(CustomFooter, __assign({}, staticProps, footerProps))
                         :
-                            (0, jsx_runtime_1.jsx)(Features_1.DialogProcessing, {}) })) }), (0, jsx_runtime_1.jsx)(_1.Actions, { dialog: dialog, actions: actions })] });
+                            (0, jsx_runtime_1.jsx)(Features_1.DialogProcessing, {}) })) }), (0, jsx_runtime_1.jsx)(_1.Actions, { dialog: dialog, actions: dialog.props.actions })] });
 });
 exports.DialogContentFooter = DialogContentFooter;

package/components/DialogContentHeader.d.ts

@@ -1,12 +1,8 @@
 import { TDialogCallbackFn } from "../types/DialogTypes";
 import * as React from "react";
-import DialogBase from "./DialogBase";
 import { IDialogBoundsDef } from "../types/BoundTypes";
 interface IContentHeaderProps {
     header: TDialogCallbackFn;
-    dialog: DialogBase<any>;
-    ref: React.RefObject<any>;
-    dialogRef: React.RefObject<any>;
     bounds: IDialogBoundsDef;
 }
 declare const DialogContentHeader: React.FC<IContentHeaderProps>;

package/components/DialogContentHeader.js

@@ -52,15 +52,14 @@ var React = __importStar(require("react"));
 var react_1 = require("react");
 var helpers_1 = require("../helpers");
 var context_1 = require("../context");
-var DialogContentHeader = React.forwardRef(function (_a, ref) {
+var DialogContentContextProvider_1 = require("../context/DialogContentContextProvider");
+var DialogContentHeader = function (_a) {
     var _b, _c, _d, _e;
-    var header = _a.header, dialog = _a.dialog, dialogRef = _a.dialogRef, bounds = _a.bounds;
+    var header = _a.header, bounds = _a.bounds;
+    var _f = (0, react_1.useContext)(DialogContentContextProvider_1.DialogContentContext), dialog = _f.dialog, dialogRef = _f.dialogRef;
     var dialogOptions = dialog.dialogOptions;
-    var _f = React.useState(bounds === null || bounds === void 0 ? void 0 : bounds.fullscreen), fullscreen = _f[0], setFullscreen = _f[1];
-    (0, react_1.useImperativeHandle)(ref, function () { return ({
-        setFullscreen: setFullscreen,
-        fullscreen: fullscreen
-    }); });
+    var baseOptions = dialogOptions.base;
+    var _g = React.useState(bounds === null || bounds === void 0 ? void 0 : bounds.fullscreen), fullscreen = _g[0], setFullscreen = _g[1];
     (0, react_1.useEffect)(function () {
         if (fullscreen) {
             dialogRef.current.classList.add('fullscreen');
@@ -73,7 +72,6 @@ var DialogContentHeader = React.forwardRef(function (_a, ref) {
             dialogRef.current.classList.remove('no-user-select');
         }, 300);
     }, [fullscreen]);
-    var baseOptions = dialogOptions.base;
     var CustomHeader = (_b = dialogOptions.slot) === null || _b === void 0 ? void 0 : _b.header;
     var staticProps = {
         dialogOptions: dialogOptions,
@@ -105,5 +103,5 @@ var DialogContentHeader = React.forwardRef(function (_a, ref) {
                                     (0, jsx_runtime_1.jsx)(Features_1.DialogInfoAction, {})] }) })] });
     }
     return (0, jsx_runtime_1.jsx)("div", { style: (_e = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.header) === null || _e === void 0 ? void 0 : _e.style, className: 'drag-handle dialog-header', children: header });
-});
+};
 exports.DialogContentHeader = DialogContentHeader;

package/components/DialogWithBackdropWrapper.d.ts

@@ -1,4 +1,2 @@
-import React from "react";
-import { DialogWithBackdropWrapperRefProps, WithBackdrop } from "../types/DialogTypes";
-declare const DialogWithBackdropWrapper: React.ForwardRefExoticComponent<Omit<WithBackdrop, "ref"> & React.RefAttributes<DialogWithBackdropWrapperRefProps>>;
+declare const DialogWithBackdropWrapper: () => import("react/jsx-runtime").JSX.Element;
 export { DialogWithBackdropWrapper };