react-dialogger 1.1.47 → 1.1.49

package/components/DialogBase.js

@@ -58,63 +58,26 @@ 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 });
-exports.DialogHeaderFooterContext = exports.WithHeaderFooterContext = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-// import {JSX} from "react";
-// import {FormikProps} from "../types/FormikProps";
-var formik_1 = require("formik");
 var React = __importStar(require("react"));
-var react_draggable_1 = __importDefault(require("react-draggable"));
-var notistack_1 = require("notistack");
-var lodash_isequal_1 = __importDefault(require("lodash.isequal"));
 var lodash_1 = require("lodash");
-var DialogActionBase_1 = __importDefault(require("./DialogActionBase"));
-var client_1 = require("react-dom/client");
-var Resizeable_1 = __importDefault(require("../models/Resizeable"));
-var ResizeIcon_1 = __importDefault(require("./icons/ResizeIcon"));
-var Futures_1 = require("./Futures");
+var _1 = require("./");
 // Bounds methods
 var helpers_1 = require("../helpers");
-var DialogContent_1 = require("./DialogContent");
-var WithSnackbar = function (props) {
-    return (0, jsx_runtime_1.jsx)(notistack_1.SnackbarProvider, { ref: props.snackbarRef, maxSnack: props.maxSnack, children: props.children });
-};
-var WithHeaderFooterContext = function (props) {
-    return (0, jsx_runtime_1.jsx)(exports.DialogHeaderFooterContext.Provider, { value: __assign({}, props), children: props.children });
-};
-exports.WithHeaderFooterContext = WithHeaderFooterContext;
-var hexToRgb = function (hex, opacity) {
-    try {
-        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        var colors = {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16)
-        };
-        return "rgba(".concat(colors.r, ", ").concat(colors.g, ", ").concat(colors.b, ", ").concat(opacity, ")");
-    }
-    catch (e) {
-        console.warn('Color should be hex string', e.message);
-    }
-    return '';
-};
-exports.DialogHeaderFooterContext = React.createContext(null);
-// export const DialogContext = React.createContext(null);
+var dialogRectAuto_1 = require("../helpers/dialogRectAuto");
 var DialogBase = /** @class */ (function (_super) {
     __extends(DialogBase, _super);
     function DialogBase(props) {
         if (props === void 0) { props = {}; }
-        var _a, _b;
-        var _this = _super.call(this, props) || this; // This ensures that props is treated as readonly
+        var _this = _super.call(this, props) || this;
+        // ✨✨✨✨✨✨✨✨✨✨✨
         _this._dialogTranslate = { lastX: 0, lastY: 0 };
         _this._shInterval = 300;
         _this._inProcess = { inProcess: false };
         _this._footerRef = React.createRef();
+        _this._headerRef = React.createRef();
         // Initialize a ref for each action dynamically
         _this.initializeActionRef = function (key) {
             if (!_this._actionRefs.hasOwnProperty(key)) {
@@ -123,78 +86,9 @@ var DialogBase = /** @class */ (function (_super) {
             // Replace with referenced
             return _this._actionRefs[key];
         };
-        /**@deprecate
-         * @see this.state
-         * */
-        _this.getState = function () {
-            return _this.state;
-        };
-        _this.dialogAutoPos = function () {
-            var nodes = Array.from(document.querySelectorAll('.appinsource-dialog-root'));
-            if (nodes.length > 1) {
-                var lastDialog = nodes[nodes.length - 2];
-                var dialogMain = lastDialog.querySelector('#dialog-main');
-                return {
-                    top: (dialogMain === null || dialogMain === void 0 ? void 0 : dialogMain.getBoundingClientRect().top) + 10,
-                    left: (dialogMain === null || dialogMain === void 0 ? void 0 : dialogMain.getBoundingClientRect().left) + 10,
-                    isMultiple: true
-                };
-            }
-            return { top: 0, left: 0, isMultiple: false };
-        };
-        _this.setInProcess_noRef = function (process, message, holder) {
-            var _a, _b;
-            _this._inProcess = __assign({ inProcess: process }, message ? { message: message } : {});
-            // this.setState( prevState => ({
-            //     ...prevState, inProcess: { inProcess: process, ...message ? {message} : {} }
-            // }));
-            if (!process) {
-                _this._holder = null;
-            }
-            else {
-                if (holder) {
-                    _this._holder = holder;
-                }
-            }
-            if ((_b = (_a = _this._dialogOptions.base) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.disabledOnDialogProcessing) {
-                if (process) {
-                    // Set current disabled of action
-                    _this._actions.forEach(function (action) {
-                        var _a;
-                        // Save the current disabled state before changing it
-                        // const currentDisabled = action.getDisabled();
-                        var currentDisabled = (_a = action.options.disabled) !== null && _a !== void 0 ? _a : action.getDisabled();
-                        console.log('this._actions', currentDisabled, process);
-                        // Set the options with prevDisabled as the current disabled state
-                        if (currentDisabled !== process) {
-                            action
-                                .setOptions(__assign(__assign({}, action.options), { prevDisabled: currentDisabled, disabled: process // Set the new disabled state based on the process
-                             }));
-                        }
-                    });
-                }
-                else {
-                    // Call prevDisabled state from memo
-                    _this._actions.forEach(function (action) {
-                        // Restore the previous disabled state from options
-                        action
-                            .setOptions(__assign(__assign({}, action.options), { disabled: action.options.prevDisabled // Set the new disabled state based on the process
-                         }));
-                    });
-                }
-            }
-            if (!process) {
-                _this.snackbar.close("kInProcess");
-            }
-            _this.forceUpdate();
-            return _this;
-        };
         _this.setInProcess = function (process, message, holder) {
             var _a, _b, _c;
             _this._inProcess = __assign({ inProcess: process }, message ? { message: message } : {});
-            // this.setState( prevState => ({
-            //     ...prevState, inProcess: { inProcess: process, ...message ? {message} : {} }
-            // }));
             if (!process) {
                 _this._holder = null;
             }
@@ -234,7 +128,6 @@ var DialogBase = /** @class */ (function (_super) {
             }
             // @ts-ignore
             (_c = _this._footerRef.current) === null || _c === void 0 ? void 0 : _c.setProcessing(process);
-            // this.forceUpdate();
             return _this;
         };
         _this.isInProcess = function () {
@@ -245,382 +138,40 @@ var DialogBase = /** @class */ (function (_super) {
         };
         _this.close = function (callbackFn) {
             var _a;
-            if (_this.isInProcess().inProcess) {
+            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");
                 }
                 else {
-                    _this.baseZoomEffect();
+                    _this._dialogWithBackDropRef.current.baseZoomEffect();
                 }
                 return;
             }
-            // ReactDOM.unmountComponentAtNode(this.props.dom);
-            var _backdrop = _this._backdropRef.current;
-            var _dialog = _this._dialogRef.current;
-            _backdrop === null || _backdrop === void 0 ? void 0 : _backdrop.classList.remove('dialog-backdrop-show');
-            _backdrop === null || _backdrop === void 0 ? void 0 : _backdrop.classList.add('dialog-backdrop-hide');
-            _dialog === null || _dialog === void 0 ? void 0 : _dialog.classList.remove('show-position-' + _this._dialogOptions.base.initialAnchor.vertical);
-            _dialog === null || _dialog === void 0 ? void 0 : _dialog.classList.add('hide-position-' + _this._dialogOptions.base.initialAnchor.vertical);
-            setTimeout(function () {
-                _this.props.root.unmount();
-                _this.props.dom.remove();
-                // unmountComponentAtNode(this.props.dom);
-                // @deprecated
-                if (typeof _this._onClose === "function") {
-                    _this._onClose(_this);
-                }
-                if (typeof callbackFn === "function") {
-                    callbackFn();
-                }
-            }, _this._shInterval);
+            _this.kill(callbackFn);
         };
         _this.focus = function () {
             if (_this._dialogRef.current) {
                 _this._dialogRef.current.focus();
             }
         };
-        _this.orderPositionWithReference = function () {
-            try {
-                if (undefined !== _this._order) {
-                    switch (_this._order.position) {
-                        case "after":
-                            _this.props.dom.before(_this._order.dom);
-                            break;
-                        case "before":
-                            _this.props.dom.after(_this._order.dom);
-                            break;
-                        default: // same
-                    }
-                }
-            }
-            catch (e) {
-                console.error('Error with orderPositionWithReference', e.message);
-            }
-        };
-        /**
-         * @deprecated
-         * @info This method is deprecated and will be removed in a future release.
-         * Please use an alternative approach for setting dialog ordering or layout.
-         * The dialog ordering functionality will be managed differently in future versions.
-         */
-        _this.setOrder = function (position, component) {
-            _this._order = { position: position, dom: component };
-            _this.forceUpdate();
-            return _this;
-        };
         _this.getDom = function () {
             return _this.props.dom;
         };
-        _this.getSize = function () {
-            return _this._dialogSize;
-        };
-        /**
-         * @deprecated
-         * use outside Content component
-         * */
-        _this.baseZoomEffect = function () {
-            var _a = _this._dialogTranslate, lastX = _a.lastX, lastY = _a.lastY;
-            _this._dialogRef.current.animate([
-                // key frames
-                { transform: "translate(".concat(lastX, "px, ").concat(lastY, "px) scale(1)") },
-                { transform: "translate(".concat(lastX, "px, ").concat(lastY, "px) scale(1.01)") },
-                // { boxShadow: `0 0 20px red`},
-                { transform: "translate(".concat(lastX, "px, ").concat(lastY, "px) scale(1)") }
-            ], {
-                // sync options
-                duration: 300,
-                iterations: 1
-            });
-        };
-        // private withBackdrop = ( body: TDialogCallbackNodeFn, header: TDialogCallbackNodeFn, actions?: Array<DialogAction> ) => {
-        _this.WithBackdrop = function (_a) {
-            var body = _a.body, header = _a.header, actions = _a.actions;
-            _this.orderPositionWithReference();
-            var _b = _this._dialogOptions.backdrop, backgroundColor = _b.backgroundColor, opacity = _b.opacity;
-            var bgCl = hexToRgb(backgroundColor, opacity);
-            return (0, jsx_runtime_1.jsx)("div", { className: "dialog-backdrop dialog-backdrop-show", ref: _this._backdropRef, style: {
-                    justifyContent: _this._dialogOptions.base.initialAnchor.horizontal,
-                    // alignItems: dialogOptions.base.initialAnchor.vertical,
-                    background: bgCl
-                }, onClick: function (e) {
-                    if (_this.state.fullscreenMode)
-                        return;
-                    if (_this._dialogOptions.backdrop.hideOnClick) {
-                        _this.close();
-                        return;
-                    }
-                    _this.baseZoomEffect();
-                }, children: (0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { body: body, header: header, actions: actions, dialogRef: _this._dialogRef, footerRef: _this._footerRef, backdropRef: _this._backdropRef, dialogOptions: _this.dialogOptions, dom: _this._dom, keyboardListener: _this._keyboardListener, dialog: _this, initialValues: _this._initialValues, formikProps: _this._formikProps }) });
-        };
-        _this.switchFullScreen = function () {
-            if (!_this.state.fullscreenMode) {
-                _this._dialogRef.current.classList.add('fullscreen');
-            }
-            else {
-                // alert(2);
-                _this._dialogRef.current.classList.remove('fullscreen');
-            }
-            _this._dialogRef.current.classList.add('no-user-select');
-            setTimeout(function () {
-                _this._dialogRef.current.classList.remove('no-user-select');
-            }, 500);
-            _this.setState(function (prevState) { return (__assign(__assign({}, prevState), { fullscreenMode: !_this.state.fullscreenMode })); });
-        };
-        _this.Placeholder = function (placeholder) {
-            var bgColor = _this._dialogOptions.base.style.backgroundColor ?
-                _this._dialogOptions.base.style.backgroundColor : "#FFFFFF";
-            var bg = _this._dialogOptions.base.style.background ?
-                _this._dialogOptions.base.style.background : "#FFFFFF";
-            return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-content-placeholder', style: {
-                    backgroundColor: bgColor,
-                    background: bg,
-                    display: placeholder ? 'flex' : 'none',
-                }, children: placeholder });
-        };
-        _this.Header = function (header) {
-            var _a, _b, _c, _d, _e, _f, _g;
-            var CustomHeader = (_a = _this._dialogOptions.slot) === null || _a === void 0 ? void 0 : _a.header;
-            var staticProps = {
-                dialogValues: _this.state.values,
-                dialogOptions: _this._dialogOptions,
-                // apiRef: { current: this as IDialogRef } as RefObject<IDialogRef|IDialogCloseRef>
-                // apiRef: { current: this as IDialogRef }
-                dialog: _this
-            };
-            var headerProps = {};
-            if (_this._dialogOptions.slotProps.header) {
-                headerProps = _this._dialogOptions.slotProps.header(staticProps);
-            }
-            if (_this._dialogOptions.slot.header) {
-                return (0, jsx_runtime_1.jsx)("div", { onDoubleClick: function (event) {
-                        if (_this._fullscreen) {
-                            _this.switchFullScreen();
-                        }
-                    }, style: (_c = (_b = _this._dialogOptions.base) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.style, className: "dialog-header ".concat(_this._draggable && !_this.state.fullscreenMode ? 'drag-handle' : ''), children: (0, jsx_runtime_1.jsx)(exports.WithHeaderFooterContext, __assign({}, staticProps, { children: (0, jsx_runtime_1.jsx)(CustomHeader, __assign({}, staticProps, headerProps, { dialog: _this })) })) });
-            }
-            if (header instanceof Function) {
-                return (0, jsx_runtime_1.jsxs)("div", { onDoubleClick: function (event) {
-                        if (_this._fullscreen) {
-                            _this.switchFullScreen();
-                        }
-                    }, style: (_e = (_d = _this._dialogOptions.base) === null || _d === void 0 ? void 0 : _d.header) === null || _e === void 0 ? void 0 : _e.style, className: "dialog-header ".concat(_this._draggable && !_this.state.fullscreenMode ? 'drag-handle' : ''), children: [header(_this), (_this._closeable || _this._fullscreen) &&
-                            (0, jsx_runtime_1.jsx)(exports.WithHeaderFooterContext, { dialog: _this, children: (0, jsx_runtime_1.jsxs)(Futures_1.DialogHeaderActionsWrapper, { children: [_this._fullscreen &&
-                                            (0, jsx_runtime_1.jsx)(Futures_1.DialogFullscreenAction, {}), _this._closeable &&
-                                            (0, jsx_runtime_1.jsx)(Futures_1.DialogCloseAction, {})] }) })] });
-            }
-            return (0, jsx_runtime_1.jsx)("div", { style: (_g = (_f = _this._dialogOptions.base) === null || _f === void 0 ? void 0 : _f.header) === null || _g === void 0 ? void 0 : _g.style, className: 'drag-handle dialog-header', children: header });
-        };
-        // TODO Body
-        _this.Body = function (_a) {
-            var body = _a.body;
-            if (body instanceof Function) {
-                return (0, jsx_runtime_1.jsxs)("div", { ref: _this._dialogBodyRef, className: 'dialog-body', style: { height: '100%' }, children: [_this.Placeholder(_this._holder), body(_this)] });
-            }
-            return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-body', style: { height: '100%', padding: 10 }, children: _this._holder ?
-                    _this.Placeholder(_this._holder)
-                    :
-                        //@ts-ignore
-                        body });
-        };
-        // private Footer = (actions?: DialogAction[]) => {
-        //
-        //     const CustomFooter = this._dialogOptions.slot?.footer;
-        //
-        //
-        //     const staticProps: BaseDialogSlotProps = {
-        //         dialogValues: this.state.values,
-        //         dialogOptions: this._dialogOptions,
-        //         // apiRef: { current: this as IDialogRef } as RefObject<IDialogRef|IDialogCloseRef>
-        //         // apiRef: { current: this as IDialogRef }
-        //         dialog: this as IDialogDef
-        //     };
-        //
-        //     let footerProps = {};
-        //
-        //     if( this._dialogOptions.slotProps.footer ){
-        //         footerProps = this._dialogOptions.slotProps.footer({
-        //             dialogValues: this.state.values,
-        //             dialogOptions: this._dialogOptions,
-        //             inProcess: this.isInProcess()
-        //         })
-        //     }
-        //
-        //
-        //     console.log('FooterSlot_props_Y', footerProps, staticProps, 'V6 ya hazirlik -2');
-        //
-        //     return <div className={'dialog-footer'} style={this._dialogOptions.base?.footer?.style}>
-        //         <div>
-        //             <WithHeaderFooterContext {...staticProps} dialog={this}>
-        //                 {
-        //                     this._dialogOptions.slot.footer ?
-        //                         /*<CustomFooter inProcess={this._inProcess} dialogValues={this.state.values} dialogOptions={this._dialogOptions}  />*/
-        //                         <CustomFooter {...staticProps} {...footerProps} />
-        //                         :
-        //                         <DialogProcessing />
-        //                     /*<CircularProgress size={20} inProcess={this._inProcess} color={this._dialogOptions.progress.color}/>*/
-        //                 }
-        //             </WithHeaderFooterContext>
-        //
-        //
-        //         </div>
-        //         { this.Actions(actions)}
-        //     </div>
-        //
-        // };
-        // Bu islem Dialog Base state inden bagimsiz calisir
-        _this.Footer = React.forwardRef(function (_a, ref) {
-            var _b, _c, _d;
-            var actions = _a.actions;
-            var CustomFooter = (_b = _this._dialogOptions.slot) === null || _b === void 0 ? void 0 : _b.footer;
-            // Imperative handle
-            var _e = React.useState(false), inProcess = _e[0], setInProcess = _e[1];
-            var setProcessing = function (inProcess) {
-                setInProcess(inProcess);
-            };
-            React.useImperativeHandle(ref, function () { return ({
-                setProcessing: setProcessing,
-                inProcess: inProcess
-            }); });
-            // console.log('processingListener', this._processingListener);
-            if (typeof _this._processingListener === "function") {
-                _this._processingListener(inProcess);
-            }
-            var staticProps = {
-                dialogValues: _this.state.values,
-                dialogOptions: _this._dialogOptions,
-                // apiRef: { current: this as IDialogRef } as RefObject<IDialogRef|IDialogCloseRef>
-                // apiRef: { current: this as IDialogRef }
-                dialog: _this
-            };
-            var footerProps = {};
-            if (_this._dialogOptions.slotProps.footer) {
-                footerProps = _this._dialogOptions.slotProps.footer({
-                    dialogValues: _this.state.values,
-                    dialogOptions: _this._dialogOptions,
-                    inProcess: _this.isInProcess()
-                });
-            }
-            console.log('FooterSlot_props_Y', footerProps, staticProps, 'V6 ya hazirlik -2');
-            return (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-footer', style: (_d = (_c = _this._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)(exports.WithHeaderFooterContext, __assign({}, staticProps, { dialog: _this, children: _this._dialogOptions.slot.footer ?
-                                /*<CustomFooter inProcess={this._inProcess} dialogValues={this.state.values} dialogOptions={this._dialogOptions}  />*/
-                                (0, jsx_runtime_1.jsx)(CustomFooter, __assign({}, staticProps, footerProps))
-                                :
-                                    (0, jsx_runtime_1.jsx)(Futures_1.DialogProcessing, {}) })) }), _this.Actions(actions)] });
-        });
-        _this.Actions = function (actions) {
-            return (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' }, children: actions.map(function (action, index) {
-                    // const ref = this.slotActionsRef[index];
-                    // const ActionSlot = this._dialogOptions?.slot?.action;
-                    // // console.log('ActionSlot',ActionSlot);
-                    // if (ActionSlot) {
-                    //     return <ActionSlot
-                    //         ref={ref}
-                    //         key={index.toString()}
-                    //         {...this._dialogOptions?.slotProps?.action}
-                    //         onClick={ (event: React.MouseEvent) => {
-                    //             action._onClickSlot( ref, this );
-                    //         }}
-                    //         label={action.options.label}
-                    //         style={{...this._dialogOptions.slotProps?.action?.style, ...action.options.style }}
-                    //     />
-                    //
-                    // }
-                    var referencedAction = _this.initializeActionRef(action.name);
-                    // this._actions[action.name] = referencedAction.current
-                    return (0, jsx_runtime_1.jsx)(DialogActionBase_1.default, { name: action.name, ref: referencedAction, dialogBaseComponent: _this, options: action.options, onClick: action.onClickHandler(), inProcess: action.isInProcess(), 
-                        // onLoad={ dialogAction => {
-                        //     action.baseDialogAction = dialogAction;
-                        // }}
-                        style: action.options.style, baseStyle: _this._dialogOptions.base.actions.baseStyle, fontFamily: _this._fontFamily, stateListener: action._stateListener }, index.toString());
-                }) });
-        };
-        // TODO Content
-        _this.Content = function (_a) {
-            var _b;
-            var _c, _d;
-            var body = _a.body, header = _a.header, actions = _a.actions;
-            _this._formikProps.current = (0, formik_1.useFormik)({
-                enableReinitialize: true,
-                initialValues: _this._initialValues,
-                onSubmit: function (values, formikHelpers) {
-                    // No Necessary
-                }
-            });
-            if (_this._dialogRef.current) {
-                // Öncelikle ref'i al ve input elemanlarını bul
-                var inputElements = _this._dialogRef.current.querySelectorAll("input");
-                // Tüm input elemanlarını döngüye al
-                inputElements.forEach(function (input) {
-                    console.log(input); // Her bir input elemanını burada işleyebilirsiniz
-                    // Örneğin, input değerini okuma veya ayarlama
-                    input.addEventListener('keydown', function (e) { return e.key === "Enter" && e.preventDefault(); }); // Değerini boşaltmak için örnek
-                    input.addEventListener('keyup', function (e) { return e.key === "Enter" && e.preventDefault(); }); // Değerini boşaltmak için örnek
-                    input.addEventListener('keypress', function (e) { return e.key === "Enter" && e.preventDefault(); }); // Değerini boşaltmak için örnek
-                });
-            }
-            console.log('Content:', actions);
-            var xKey = _this.dialogPosFromMultipleDialogs.isMultiple ? "left" : "marginLeft";
-            var yKey = _this.dialogPosFromMultipleDialogs.isMultiple ? "top" : "marginTop";
-            /**
-             * default null
-             * eget momoize islemi uygulanmissa read from memory
-             * */
-            var bounds = _this._storedBounds;
-            // console.log('MAIN DOM', window.getComputedStyle(this.props.dom).zIndex);
-            var domZIndex = window.getComputedStyle(_this.props.dom).zIndex;
-            return (0, jsx_runtime_1.jsx)(react_draggable_1.default, { disabled: !_this._draggable || _this.state.fullscreenMode, axis: 'both', handle: _this._draggable ? '.drag-handle' : '', scale: 1, ref: _this._backdropRef, onDrag: function (event, data) {
-                    event.stopPropagation();
-                    _this._dialogTranslate = { lastX: data.lastX, lastY: data.lastY };
-                }, onStop: function (event, data) {
-                    var _a;
-                    event.stopPropagation();
-                    event.preventDefault();
-                    console.log('onDragStop', 'fired');
-                    var _b = (_a = _this._dialogRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), width = _b.width, height = _b.height, x = _b.x, y = _b.y;
-                    (0, helpers_1.setDialogBounds)(_this._dialogOptions.base.id, {
-                        width: width,
-                        height: height,
-                        x: x,
-                        y: y
-                    }, _this._dialogRef);
-                }, children: (0, jsx_runtime_1.jsxs)("div", { id: "dialog-main", ref: _this._dialogRef, onClick: function (e) {
-                        e.stopPropagation();
-                    }, onKeyDown: function (e) {
-                        if (typeof _this.props.keyboardListener === "function") {
-                            // @ts-ignore
-                            _this.props.keyboardListener(e.key, _this);
-                        }
-                    }, 
-                    // className={this._dialogSize.width === 'auto' ? 'auto' : `dialog-width-${this._dialogSize.width} dialog-main show-opacity show-position-${this._dialogOptions.base.initialAnchor.vertical}`}
-                    className: _this._dialogOptions.base.size.width === 'auto' ? 'auto' : "dialog-width-".concat(_this._dialogOptions.base.size.width, " dialog-main show-opacity show-position-").concat(_this._dialogOptions.base.initialAnchor.vertical), style: __assign(__assign(__assign(__assign(__assign({ alignSelf: _this._dialogOptions.base.initialAnchor.vertical, height: (_c = _this._dialogOptions.base.size.height) !== null && _c !== void 0 ? _c : 'auto' }, typeof _this._dialogOptions.base.size.width === "number" ? { width: _this._dialogOptions.base.size.width } : null), (_b = { outline: 'none' }, _b[yKey] = _this.dialogPosFromMultipleDialogs.top + 'px', _b[xKey] = _this.dialogPosFromMultipleDialogs.left + 'px', _b)), _this._dialogOptions.base.style), { fontFamily: _this._fontFamily }), bounds ? { position: 'absolute', top: bounds.y, left: bounds.x, width: bounds.width, height: bounds.height } : null), children: [(0, jsx_runtime_1.jsxs)(WithSnackbar, { snackbarRef: _this._snackbarRef, maxSnack: _this._dialogOptions.snackbar.maxSnack, children: [(_this._header || _this._dialogOptions.slot.header) && _this.Header(header), (0, jsx_runtime_1.jsx)(_this.Body, { body: body }), (0, jsx_runtime_1.jsx)(_this.Footer, { ref: _this._footerRef, actions: actions })] }), (_this._dialogOptions.base.resizeable) &&
-                            (0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "resizable-handle", style: {
-                                        zIndex: parseInt(domZIndex) + 1
-                                    }, onMouseDown: (_d = _this._Resizeable) === null || _d === void 0 ? void 0 : _d.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(ResizeIcon_1.default, { color: '#286e94' }) }) })] }) });
-        };
-        _this.highestZ = function () {
-            var presentationElements = document.querySelectorAll('div[data-family="presentation"]');
-            var highest = 1201;
-            presentationElements.forEach(function (element) {
-                var z = parseInt(window.getComputedStyle(element).zIndex, 10);
-                if (!isNaN(z) && z > highest) {
-                    highest = z;
-                }
-            });
-            return highest + 1;
-        };
-        // render = () => {
-        //
-        //     return this.withBackdrop(this._body, this._header, this._actions)
-        // }
         _this.render = function () {
-            // return this.withBackdrop(this._body, this._header, this._actions)
-            return (0, jsx_runtime_1.jsx)(_this.WithBackdrop, { body: _this._body, header: _this._header, actions: _this._actions });
+            console.log('this._prevDialogRect', _this.state.prevDialogRect);
+            return (0, jsx_runtime_1.jsx)(_1.DialogWithBackdropWrapper, { initialValues: _this.props.initialValues, dialog: _this, 
+                // Component
+                header: _this.props.header, body: _this.props.body, actions: _this.props.actions, 
+                // 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 });
         };
-        _this.state = __assign(__assign({}, _this._initialState), { fullscreenMode: false, isResizing: false, 
-            /**@deprecated use FormikProps Values*/
-            values: props.initialValues, inProcess: { inProcess: false } });
+        _this.state = {
+            inProcess: { inProcess: false },
+            prevDialogRect: (0, dialogRectAuto_1.dialogRectAuto)()
+        };
+        console.log('Class_Type', _this instanceof DialogBase);
         var defaultOptions = {
             base: {
                 initialAnchor: {
@@ -638,16 +189,6 @@ var DialogBase = /** @class */ (function (_super) {
                 }
             }
         };
-        _this._dialogOptions = (0, lodash_1.merge)({}, defaultOptions, window["dialogOptions"], props.options);
-        _this._fontFamily = (_a = _this._dialogOptions.base.style.fontFamily) !== null && _a !== void 0 ? _a : 'Arial';
-        _this._header = props.header;
-        _this._body = props.body;
-        _this._actions = props.actions;
-        _this._backdropRef = React.createRef();
-        _this._dialogRef = React.createRef();
-        _this._dialogBodyRef = React.createRef();
-        _this._inProcess = { inProcess: false };
-        _this._snackbarRef = React.createRef();
         if (props.dialogSize) {
             _this._dialogSize = props.dialogSize;
         }
@@ -659,31 +200,22 @@ var DialogBase = /** @class */ (function (_super) {
                 size: _this._dialogSize
             }
         }, _this._dialogOptions);
-        // this._draggable = props.draggable ? props.draggable : this._dialogOptions.base.draggable;
-        _this._draggable = typeof _this._dialogOptions.base.draggable === "boolean" ? _this._dialogOptions.base.draggable : true;
-        // this._resizeable = props.resizeable ? props.resizeable : this._dialogOptions.base.resizeable;
-        _this._resizeable = typeof _this._dialogOptions.base.resizeable === "boolean" ? _this._dialogOptions.base.resizeable : false;
-        _this._closeable = typeof _this._dialogOptions.base.closeable === "boolean" ? _this._dialogOptions.base.closeable : false;
-        _this._fullscreen = typeof _this._dialogOptions.base.fullscreen === "boolean" ? _this._dialogOptions.base.fullscreen : false;
-        _this._order = props.order;
+        _this._dialogOptions = (0, lodash_1.merge)({}, defaultOptions, window["dialogOptions"], props.initialOptions);
+        _this._header = props.header;
+        _this._body = props.body;
+        _this._actions = props.actions;
+        _this._backdropRef = React.createRef();
+        _this._dialogRef = React.createRef();
+        _this._dialogBodyRef = React.createRef();
+        _this._inProcess = { inProcess: false };
+        _this._snackbarRef = React.createRef();
         _this._holder = props.initialHolder;
-        _this._parent = props.parent;
-        _this._onClose = props.onClose;
-        _this.dialogPosFromMultipleDialogs = _this.dialogAutoPos();
-        if (_this._dialogOptions.base.resizeable) {
-            _this._Resizeable = new Resizeable_1.default();
-        }
         // Initialize _actionRefs as an empty object
         _this._actionRefs = {};
-        // Initialize Slots
-        // this._slots = this._dialogOptions.base.slots
         _this._initialValues = props.initialValues;
-        _this._resizeListenersStore = [];
-        // Fetch Initial Dialog Bounds
-        var base = _this._dialogOptions.base;
-        var memoBounds = base.memoBounds;
-        _this._storedBounds = ((_b = _this._dialogOptions.base) === null || _b === void 0 ? void 0 : _b.memoBounds) ? (0, helpers_1.getDialogBounds)(base) : null;
-        _this._formikProps = (0, react_1.createRef)();
+        _this._dialogWithBackDropRef = (0, react_1.createRef)();
+        _this._parent = props.parent;
+        console.log('this._dialogOptions', _this._dialogOptions);
         return _this;
     }
     Object.defineProperty(DialogBase.prototype, "parent", {
@@ -693,43 +225,43 @@ var DialogBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DialogBase.prototype, "fullscreenMode", {
+    Object.defineProperty(DialogBase.prototype, "dialogTranslate", {
         get: function () {
-            return this.state.fullscreenMode;
+            return this._dialogTranslate;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DialogBase.prototype, "dialogOptions", {
+    Object.defineProperty(DialogBase.prototype, "accessFrom", {
         get: function () {
-            return this._dialogOptions;
+            return this._accessFrom;
+        },
+        set: function (accessFrom) {
+            this._accessFrom = accessFrom;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DialogBase.prototype, "holder", {
+    Object.defineProperty(DialogBase.prototype, "dialogOptions", {
         get: function () {
-            return this._holder;
+            return this._dialogOptions;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DialogBase.prototype, "Resizeable", {
+    Object.defineProperty(DialogBase.prototype, "holder", {
         get: function () {
-            return this._Resizeable;
+            return this._holder;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(DialogBase.prototype, "formikProps", {
-        // get state(): T | Readonly<BaseDialogState> {
-        //     return super.state
-        // }
         get: function () {
-            return this._formikProps.current;
+            return this._formikProps;
         },
         set: function (value) {
-            this._formikProps.current = value;
+            this._formikProps = value;
         },
         enumerable: false,
         configurable: true
@@ -755,249 +287,101 @@ var DialogBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DialogBase.prototype, "inlineFormikProps", {
+        // ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
+        // ༄ inlineFormikProps 👉 Will Be initialized from Body or Content Component
+        // Instead of Dialog stateValues use FormikEngine
+        set: function (inlineFormikProps) {
+            this._inlineFormikProps = inlineFormikProps;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DialogBase.prototype, "values", {
-        // 1248
-        //
-        // get values(): DialogValues {
+        // ✨✨✨✨✨✨✨✨✨✨✨
         get: function () {
-            return this.state.values;
-            // return this._formikProps?.values;
+            return this._inlineFormikProps.values;
+            // UseImperative
+            // return this._dialogWithBackDropRef?.current?.formikProps.values;
         },
         enumerable: false,
         configurable: true
     });
-    // public setValues(values: DialogValues, callbackFn?: () => void): void {
-    DialogBase.prototype.setValues = function (values, callbackFn) {
-        var prevValues = __assign({}, this.state.values);
-        // this.setState( prevState => ({...prevState, values: {...prevValues, ...values}}) );
-        this.setState(function (prevState) { return (__assign(__assign({}, prevState), { values: __assign(__assign({}, prevValues), values) })); }, function () {
-            if (typeof callbackFn === 'function') {
-                callbackFn();
-            }
-        });
-        // this._formikProps?.setValues(values);
-    };
+    // ✨✨✨✨✨✨✨✨✨✨✨
     DialogBase.prototype.setValue = function (key, value) {
-        this.setState(function (prevState) {
-            var clonedVal = __assign({}, prevState.values);
-            clonedVal[key] = value;
-            return __assign(__assign({}, prevState), { values: clonedVal });
-        });
-        // Cok mantikli Ama butun yapida zorluk cikrariyor
-        // Eger direct kullanilmak istenirse olusacak sorun
-        // Eget bir state icinde birden fazla domain kullaniliyor sadece bir domain sadece formikProps baglantisi varsa
-        // O zaman setValues dedigim de ilgili domain i guncellemek yerine buton props lar etki altina girer
-        // Ornek
-        // initialValues/values icinde iki domain var {order: ... project...}
-        // inputs formikProps ile direct baglanti kurabildigi icin order i ilgilendiren bir field artik order icindeki propla ulasamaz
-        // cunju values icinde order, project tanimlanmistir formikProps.values={order, project}
-        // Dogru bisekilde calismasi icin formikProps.values direct oreder field leri olmali {...} <- Order fields
-        // O sebepten values dialog state ile baglantili eget dialog icinde form kullanmak isterse m
-        // Bu Durumu sinirlandiriyor
-        // this._formikProps?.setFieldValue(key, value);
+        var _a;
+        (_a = this._inlineFormikProps) === null || _a === void 0 ? void 0 : _a.setFieldValue(key, value);
+        // UseImperative
+        // this._dialogWithBackDropRef?.current?.formikProps?.setFieldValue(key, value);
+    };
+    // ✨✨✨✨✨✨✨✨✨✨✨
+    DialogBase.prototype.setValues = function (values, callbackFn) {
+        this._inlineFormikProps.setValues(values);
+        // UseImperative
+        // this._dialogWithBackDropRef?.current?.formikProps?.setValues(values);
+        if (typeof callbackFn === "function") {
+            callbackFn();
+        }
     };
+    // ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
     DialogBase.prototype.componentDidMount = function () {
-        var _this = this;
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         console.log('clalisan componentDidMount');
         // İlk konumları global seçeneklerden al
-        var _e = this._dialogOptions.snackbar.anchorOrigin, vertical = _e.vertical, horizontal = _e.horizontal;
+        var _f = this._dialogOptions.snackbar.anchorOrigin, vertical = _f.vertical, horizontal = _f.horizontal;
         var initialAnchor = { vertical: vertical, horizontal: horizontal };
         // Kullanıcı tanımlı konumlar varsa, onları ilk konumlarla birleştir
         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 } : {}));
-        // didMountCallback varsa, promise ile çağır
-        if (undefined !== this.props.didMountCallback && typeof this.props.didMountCallback === "function") {
-            // @ts-ignore
-            // this.props.didMountCallback( this )
-            new Promise(function (resolve, reject) {
-                try {
-                    setTimeout(function () {
-                        resolve(true);
-                    }, _this._shInterval);
-                }
-                catch (e) {
-                    // fail(e);
-                }
-            }).then(function (completed) {
-                if (completed) {
-                    // @ts-ignore
-                    _this.props.didMountCallback(_this);
-                }
-            });
-        }
-        if (this._dialogRef.current) {
-            this._dialogRef.current.tabIndex = 0; // Odaklanabilir hale getirir
-            this._dialogRef.current.focus();
-            if (this._Resizeable) {
-                this._Resizeable.setContainer(this._dialogRef, this._dialogOptions);
-                this._Resizeable.onResizeListener(function (width, height) {
-                    if (typeof _this.props.resizeListener === "function") {
-                        _this._resizeListenersStore.push(_this.props.resizeListener);
-                    }
-                    // this.props.resizeListener({width, height}, this);
-                    // Butun eklenmis Resize collbackler ayni anda maplenerek cevap veriliyor
-                    _this._resizeListenersStore.map(function (itemCallback) {
-                        // @ts-ignore
-                        itemCallback({ width: width, height: height }, _this);
-                    });
-                });
-            }
-        }
-        // Initialize SlotsProps
-        // this._slots?.forEach( (slot: any) => {
-        //     this._slotProps[slot.name] = slot;
-        // });
-        // // Callback Slot Props
-        // try{
-        //     this._dialogOptions.base?.slotProps(this._slotProps);
-        // } catch (e){
-        //
-        // }
-        // Parent objesinin accessFrom özelliğini ayarla
-        this.props.parent.accessFrom = "internal";
-        // Check This
-        try {
-            var t = window.localStorage.getItem('react-super-dialog');
-            console.log('Parsed Bounds Store', JSON.parse(t));
-        }
-        catch (e) {
+        if (typeof ((_c = this.props) === null || _c === void 0 ? void 0 : _c.didMountCallback) === "function") {
+            this.props.didMountCallback(this);
         }
         // Register Dialog Bounds
-        if ((_c = this._dialogOptions.base) === null || _c === void 0 ? void 0 : _c.memoBounds) {
+        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 _f = (_d = this._dialogRef.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect(), width = _f.width, height = _f.height, x = _f.x, y = _f.y;
-            (0, helpers_1.dialogRegister)(this._dialogOptions.base, {
+            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
+                y: y,
+                fullscreen: false
             });
         }
+        // Parent objesinin accessFrom özelliğini ayarla
+        this.accessFrom = "internal";
     };
-    DialogBase.prototype.onResize = function (callbackFn) {
-        if (typeof callbackFn === "function") {
-            // Header body veya baska biserden gelen callback i storla
-            // Bu olay overwite olmasinin onune gecer
-            // Cunku en sonku callback calistirildigi icin ornedin header ve
-            this._resizeListenersStore.push(callbackFn);
-        }
-    };
-    DialogBase.prototype.componentWillUnmount = function () {
-        if (this._Resizeable) {
-            // Temizlik fonksiyonu
-            this._Resizeable.cleanUp();
-        }
-    };
-    DialogBase.prototype.setState = function (state, callback) {
+    DialogBase.prototype.kill = function (callbackFn) {
         var _this = this;
-        var prevState = this.state;
-        _super.prototype.setState.call(this, state, function () {
-            // if( typeof this.props.stateListener === "function" && JSON.stringify(prevState) !== JSON.stringify(state)  ){
-            var _a;
-            // Outer State Listener
-            if (typeof _this.props.stateListener === "function" && !(0, lodash_isequal_1.default)(prevState, state)) {
-                _this.props.stateListener(_this.state, _this.state.values, _this);
-            }
-            // Inner State Listener
-            if (typeof _this._stateListener === "function" && !(0, lodash_isequal_1.default)(prevState, state)) {
-                _this._stateListener(_this.state, _this.state.values, _this);
-            }
-            for (var actionKey in _this._actionRefs) {
-                var action = _this._actionRefs[actionKey];
-                if (typeof action.current._stateListener === "function") {
-                    // action.getStateListener()( this.state, this.state.values, action.baseDialogAction, this );
-                    // When using ref
-                    action.current._stateListener(_this.state, _this.state.values, (_a = _this._actionRefs[action.current.name]) === null || _a === void 0 ? void 0 : _a.current, _this);
-                    // action.getStateListener()( this.state, this.state.values, action.baseDialogAction, this );
-                }
-                // console.log('setStateRunned', action.current._stateListener, action.current.name, this._actionRefs, this );
-            }
-            // this._actions.forEach( action => {
-            //     if( typeof action.getStateListener() === "function" ){
-            //         // action.getStateListener()( this.state, this.state.values, action.baseDialogAction, this );
-            //         // When using ref
-            //         action.getStateListener()( this.state, this.state.values, this._actionRefs[action.name]?.current, this );
-            //         // action.getStateListener()( this.state, this.state.values, action.baseDialogAction, this );
-            //     }
-            // })
-            if (callback) {
-                setTimeout(function () {
-                    callback();
-                }, 100);
+        // ReactDOM.unmountComponentAtNode(this.props.dom);
+        var _backdrop = this._backdropRef.current;
+        var _dialog = this._dialogRef.current;
+        _backdrop === null || _backdrop === void 0 ? void 0 : _backdrop.classList.remove('dialog-backdrop-show');
+        _backdrop === null || _backdrop === void 0 ? void 0 : _backdrop.classList.add('dialog-backdrop-hide');
+        _dialog === null || _dialog === void 0 ? void 0 : _dialog.classList.remove('show-position-' + this._dialogOptions.base.initialAnchor.vertical);
+        _dialog === null || _dialog === void 0 ? void 0 : _dialog.classList.add('hide-position-' + this._dialogOptions.base.initialAnchor.vertical);
+        setTimeout(function () {
+            _this.props.root.unmount();
+            _this.props.dom.remove();
+            // unmountComponentAtNode(this.props.dom);
+            // @deprecated
+            if (typeof _this._onClose === "function") {
+                _this._onClose(_this);
+            }
+            if (typeof callbackFn === "function") {
+                callbackFn();
             }
-        });
-    };
-    DialogBase.prototype.setHeader = function (header) {
-        this._header = header;
-        this.forceUpdate();
-        return this;
-    };
-    DialogBase.prototype.setBody = function (body) {
-        this._body = body;
-        this.forceUpdate();
-        return this;
-    };
-    DialogBase.prototype.addActions = function (actions) {
-        this._actions = actions;
-        return this;
-    };
-    DialogBase.prototype.addAction = function (action) {
-        this._actions.push(action);
-        return this;
-    };
-    DialogBase.prototype.stateListener = function (listener) {
-        this._stateListener = listener;
-        return this;
-    };
-    DialogBase.prototype.keyboardListener = function (listener) {
-        this._keyboardListener = listener;
-        return this;
-    };
-    DialogBase.prototype.resizeListener = function (listener) {
-        this._resizeListener = listener;
-        return this;
-    };
-    DialogBase.prototype.processingListener = function (listener) {
-        // @ts-ignore
-        this._processingListener = listener;
-        return this;
-    };
-    DialogBase.prototype.initialHolder = function (holder) {
-        this._initialHolder = holder;
-        return this;
-    };
-    // protected initialValues<T extends TValues>(values: T): DialogWithValues<T> {
-    //
-    //     this.setState( prevState => {
-    //         return {
-    //             ...prevState, values
-    //         }
-    //     })
-    //     // Burada yeni tipli bir sınıfa dönüyoruz
-    //     return this as unknown as DialogWithValues<T>;
-    // }
-    DialogBase.prototype.onClose = function (callback) {
-        this._onClose = callback;
-        return this;
+        }, this._shInterval);
     };
     Object.defineProperty(DialogBase.prototype, "actions", {
         get: function () {
             var _this = this;
             var __actions = {};
             this._actions.forEach(function (action, index) {
-                // if (!this.slotActionsRef[index]) {
-                //     this.slotActionsRef[index] = createRef();
-                // }
                 var _a, _b;
-                /**
-                 * Herbir action Ref Objecsine atandi Her Ref Objeside BaseDialogActionBase ine baglandi
-                 * inital Actionlar DialogAction i reference aliyor ve buda ic method erisimlerine engel oluyor DialogActionBase in ötelliklerine ulasamiyor o yuzden
-                 * hetBir Action ic Reference ataniyor ve ic referencedeki methodlar disaridan cagirilabiliyor
-                 * */
                 __actions[action.name] = (_b = (_a = _this._actionRefs[action.name]) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : action;
             });
             return __actions;
@@ -1041,54 +425,6 @@ var DialogBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    DialogBase.prototype.show = function (callback) {
-        var presentationElements = document.querySelectorAll('div[data-family="presentation"]');
-        console.log('String(this.highestZ()', presentationElements, String(this.highestZ()));
-        console.log('this._actions', this._actions);
-        this._dom = document.createElement('div');
-        this._dom.setAttribute('role', 'presentation');
-        this._dom.setAttribute('data-type', 'dialog');
-        this._dom.setAttribute('data-family', 'presentation');
-        this._dom.classList.add('appinsource-dialog-root');
-        this._dom.style.setProperty('z-index', String(this.highestZ()));
-        // Find root element
-        var rootElement = document.getElementById('root');
-        // const AppElement = rootElement.firstElementChild;
-        if (rootElement) {
-            rootElement.appendChild(this._dom);
-            // AppElement.prepend(this._dom);
-        }
-        else {
-            document.body.appendChild(this._dom);
-        }
-        var root = (0, client_1.createRoot)(this._dom);
-        var props = {
-            ref: this._innerRef,
-            options: this._dialogOptions,
-            header: this._header,
-            body: this._body,
-            actions: this._actions,
-            stateListener: this._stateListener,
-            dialogSize: this._dialogSize,
-            didMountCallback: callback,
-            keyboardListener: this._keyboardListener,
-            resizeListener: this._resizeListener,
-            /**Dialog order with Reference Element, like before-after-same reference*/
-            order: this._order,
-            // initialState: this._initialState,
-            // initialValues: this._initialValues,
-            // initialUserProps: this._initialUserProps,
-            initialValues: this._initialValues,
-            initialHolder: this._initialHolder,
-            snackbarAnchor: this._snackbarAnchor,
-            dom: this._dom,
-            parent: this,
-            onClose: this._onClose,
-            root: root,
-        };
-        // @ts-ignore
-        root.render(React.createElement(DialogBase, props));
-    };
     return DialogBase;
 }(react_1.Component));
 exports.default = DialogBase;