react-dialogger 1.1.21 → 1.1.23

package/components/CircularProgress.d.ts

@@ -1,8 +1,7 @@
-import * as React from "react";
 import { IInProcess } from "../types/types";
 declare const _default: ({ size, color, inProcess }: {
     color?: string;
     inProcess: IInProcess;
     size: number;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/components/CircularProgress.js

@@ -34,17 +34,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
 var React = __importStar(require("react"));
 exports.default = (function (_a) {
     var size = _a.size, color = _a.color, inProcess = _a.inProcess;
     if (inProcess === null || inProcess === void 0 ? void 0 : inProcess.inProcess) {
-        return React.createElement("div", { style: { display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' } },
-            React.createElement("span", { className: "circular-root", style: __assign({ display: 'flex', flex: 1, width: size, height: size }, color ? { color: color } : {}), role: "progressbar" },
-                React.createElement("svg", { className: "circular", viewBox: "22 22 44 44" },
-                    React.createElement("circle", { className: "circular-circle", cx: "44", cy: "44", r: "20.2", fill: "none", strokeWidth: "3.6" }))),
-            inProcess.message
-                &&
-                    React.createElement("span", { style: { fontStyle: 'normal', fontSize: 12 } }, inProcess.message));
+        return (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "circular-root", style: __assign({ display: 'flex', flex: 1, width: size, height: size }, color ? { color: color } : {}), role: "progressbar", children: (0, jsx_runtime_1.jsx)("svg", { className: "circular", viewBox: "22 22 44 44", children: (0, jsx_runtime_1.jsx)("circle", { className: "circular-circle", cx: "44", cy: "44", r: "20.2", fill: "none", strokeWidth: "3.6" }) }) }), inProcess.message
+                    &&
+                        (0, jsx_runtime_1.jsx)("span", { style: { fontStyle: 'normal', fontSize: 12 }, children: inProcess.message })] });
     }
-    return React.createElement(React.Fragment, null);
+    return (0, jsx_runtime_1.jsx)(React.Fragment, {});
 });

package/components/DialogActionBase.d.ts

@@ -1,5 +1,4 @@
 import { Component } from "react";
-import * as React from "react";
 import DialogBase from "./DialogBase";
 import { ActionProps, ActionState, DialogActionType, TBVariant, TBColor, DialogActionOptionsType, TDialogStateListenerForActionCallbackType } from "../types/DialogActionTypes";
 declare class DialogActionBase extends Component<ActionProps, ActionState> {
@@ -39,6 +38,6 @@ declare class DialogActionBase extends Component<ActionProps, ActionState> {
     remove: () => void;
     click: () => void;
     onClickHandler: () => DialogActionType;
-    render: () => React.JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
 }
 export default DialogActionBase;

package/components/DialogActionBase.js

@@ -52,6 +52,7 @@ 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 RippleButton_1 = __importDefault(require("./RippleButton"));
@@ -133,22 +134,20 @@ var DialogActionBase = /** @class */ (function (_super) {
         };
         _this.render = function () {
             console.log('this._options.style.render', _this._options);
-            return React.createElement(RippleButton_1.default, { ref: _this._buttonRef, innerRef: _this._rippleButtonRef, variant: _this._options.variant, color: _this._options.color, disabled: _this._options.disabled, onClick: function (e) {
+            return (0, jsx_runtime_1.jsx)(RippleButton_1.default, { ref: _this._buttonRef, innerRef: _this._rippleButtonRef, variant: _this._options.variant, color: _this._options.color, disabled: _this._options.disabled, onClick: function (e) {
                     if (_this._options.disabled || _this.isInProcess())
                         return;
                     // @ts-ignore
                     _this._onClick(_this, _this._dialogBaseComponent);
-                }, style: _this._options.style, baseStyle: _this.props.baseStyle, fontFamily: _this.props.fontFamily }, function (buttonRef) {
-                if (buttonRef) {
-                    if (!_this.isInProcess()) {
-                        buttonRef.style.minWidth = buttonRef.getBoundingClientRect().width + 'px';
+                }, style: _this._options.style, baseStyle: _this.props.baseStyle, fontFamily: _this.props.fontFamily, children: function (buttonRef) {
+                    if (buttonRef) {
+                        if (!_this.isInProcess()) {
+                            buttonRef.style.minWidth = buttonRef.getBoundingClientRect().width + 'px';
+                        }
                     }
-                }
-                return React.createElement(React.Fragment, null,
-                    React.createElement(CircularProgress_1.default, { size: 15, inProcess: { inProcess: _this.isInProcess() } }),
-                    !_this.isInProcess() &&
-                        _this._options.label);
-            });
+                    return (0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 15, inProcess: { inProcess: _this.isInProcess() } }), !_this.isInProcess() &&
+                                _this._options.label] });
+                } });
         };
         _this._options = props.options;
         // this._label = props.label;

package/components/DialogBase.d.ts

@@ -1,5 +1,5 @@
 import { Component, ReactNode, RefObject } from "react";
-import { FormikProps } from "../types/FormikProps";
+import { FormikProps } from "formik";
 import * as React from "react";
 import Dialog from "../models/Dialog";
 import { DialogAction } from "../models/DialogAction";
@@ -64,6 +64,7 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
      * which is not assignable to that type.
      * */
     private readonly _fontFamily;
+    private _storedBounds;
     constructor(props?: Readonly<BaseDialogProps>);
     get fullscreenMode(): boolean;
     private initializeActionRef;
@@ -81,7 +82,6 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
     private dialogAutoPos;
     componentDidMount(): void;
     onResize(callbackFn: (size: IDialogSize, dialog: IDialogDef) => void): void;
-    componentDidUpdate(prevProps: Readonly<BaseDialogProps>, prevState: Readonly<BaseDialogState>, snapshot?: any): void;
     componentWillUnmount(): void;
     setState<K extends keyof BaseDialogState>(state: ((prevState: Readonly<BaseDialogState>, props: Readonly<BaseDialogProps>) => (Pick<BaseDialogState, K> | BaseDialogState | null)) | Pick<BaseDialogState, K> | BaseDialogState | null, callback?: () => void): void;
     protected setHeader(header: TDialogCallbackNodeFn): DialogBase;
@@ -99,7 +99,7 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
     close: (callbackFn?: any) => void;
     focus: () => void;
     get actions(): {
-        [key: string]: Pick<DialogActionBase, "remove" | "click" | "options" | "setInProcess" | "setOptions" | "getLabel">;
+        [key: string]: Pick<DialogActionBase, "options" | "setInProcess" | "setOptions" | "getLabel" | "click" | "remove">;
     };
     private orderPositionWithReference;
     /**
@@ -132,6 +132,6 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
     private Actions;
     private Content;
     protected show(callback?: TDialogCallbackVoidFn): void;
-    render: () => React.JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
 }
 export default DialogBase;

package/components/DialogBase.js

@@ -53,6 +53,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogHeaderFooterContext = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var React = __importStar(require("react"));
 var react_draggable_1 = __importDefault(require("react-draggable"));
@@ -64,11 +65,13 @@ 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");
+// Bounds methods
+var helpers_1 = require("../helpers");
 var WithSnackbar = function (props) {
-    return React.createElement(notistack_1.SnackbarProvider, { ref: props.snackbarRef, maxSnack: props.maxSnack }, props.children);
+    return (0, jsx_runtime_1.jsx)(notistack_1.SnackbarProvider, { ref: props.snackbarRef, maxSnack: props.maxSnack, children: props.children });
 };
 var WithHeaderFooterContext = function (props) {
-    return React.createElement(exports.DialogHeaderFooterContext.Provider, { value: __assign({}, props) }, props.children);
+    return (0, jsx_runtime_1.jsx)(exports.DialogHeaderFooterContext.Provider, { value: __assign({}, props), children: props.children });
 };
 var hexToRgb = function (hex, opacity) {
     try {
@@ -86,11 +89,12 @@ var hexToRgb = function (hex, opacity) {
     return '';
 };
 exports.DialogHeaderFooterContext = React.createContext(null);
+// export const DialogContext = React.createContext(null);
 var DialogBase = /** @class */ (function (_super) {
     __extends(DialogBase, _super);
     function DialogBase(props) {
         if (props === void 0) { props = {}; }
-        var _a;
+        var _a, _b;
         var _this = _super.call(this, props) || this; // This ensures that props is treated as readonly
         _this._dialogTranslate = { lastX: 0, lastY: 0 };
         _this._shInterval = 300;
@@ -296,6 +300,7 @@ var DialogBase = /** @class */ (function (_super) {
             return _this._dialogSize;
         };
         _this.baseZoomEffect = function () {
+            console.log('this._dialogTranslate', _this._dialogTranslate);
             var _a = _this._dialogTranslate, lastX = _a.lastX, lastY = _a.lastY;
             _this._dialogRef.current.animate([
                 // key frames
@@ -313,7 +318,7 @@ var DialogBase = /** @class */ (function (_super) {
             _this.orderPositionWithReference();
             var _a = _this._dialogOptions.backdrop, backgroundColor = _a.backgroundColor, opacity = _a.opacity;
             var bgCl = hexToRgb(backgroundColor, opacity);
-            return React.createElement("div", { className: "dialog-backdrop dialog-backdrop-show", ref: _this._backdropRef, style: {
+            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
@@ -325,7 +330,7 @@ var DialogBase = /** @class */ (function (_super) {
                         return;
                     }
                     _this.baseZoomEffect();
-                } }, _this.Content(body, header, actions));
+                }, children: _this.Content(body, header, actions) });
         };
         _this.switchFullScreen = function () {
             if (!_this.state.fullscreenMode) {
@@ -346,11 +351,11 @@ var DialogBase = /** @class */ (function (_super) {
                 _this._dialogOptions.base.style.backgroundColor : "#FFFFFF";
             var bg = _this._dialogOptions.base.style.background ?
                 _this._dialogOptions.base.style.background : "#FFFFFF";
-            return React.createElement("div", { className: 'dialog-content-placeholder', style: {
+            return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-content-placeholder', style: {
                     backgroundColor: bgColor,
                     background: bg,
                     display: placeholder ? 'flex' : 'none',
-                } }, placeholder);
+                }, children: placeholder });
         };
         _this.Header = function (header) {
             var _a, _b, _c, _d, _e, _f, _g;
@@ -367,42 +372,33 @@ var DialogBase = /** @class */ (function (_super) {
                 headerProps = _this._dialogOptions.slotProps.header(staticProps);
             }
             if (_this._dialogOptions.slot.header) {
-                return React.createElement("div", { onDoubleClick: function (event) {
+                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' : '') },
-                    React.createElement(WithHeaderFooterContext, __assign({}, staticProps),
-                        React.createElement(CustomHeader, __assign({}, staticProps, headerProps, { dialog: _this }))));
+                    }, 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)(WithHeaderFooterContext, __assign({}, staticProps, { children: (0, jsx_runtime_1.jsx)(CustomHeader, __assign({}, staticProps, headerProps, { dialog: _this })) })) });
             }
             if (header instanceof Function) {
-                return React.createElement("div", { onDoubleClick: function (event) {
+                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' : '') },
-                    header(_this),
-                    (_this._closeable || _this._fullscreen) &&
-                        React.createElement(WithHeaderFooterContext, { dialog: _this },
-                            React.createElement(Futures_1.DialogHeaderActionsWrapper, null,
-                                _this._fullscreen &&
-                                    React.createElement(Futures_1.DialogFullscreenAction, null),
-                                _this._closeable &&
-                                    React.createElement(Futures_1.DialogCloseAction, null))));
+                    }, 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)(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 React.createElement("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' }, header);
+            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 });
         };
         _this.Body = function (body) {
             if (body instanceof Function) {
-                return React.createElement("div", { ref: _this._dialogBodyRef, className: 'dialog-body', style: { height: '100%' } },
-                    _this.Placeholder(_this._holder),
-                    body(_this));
+                return (0, jsx_runtime_1.jsxs)("div", { ref: _this._dialogBodyRef, className: 'dialog-body', style: { height: '100%' }, children: [_this.Placeholder(_this._holder), body(_this)] });
             }
-            return React.createElement("div", { style: { height: '100%', padding: 10 } }, _this._holder ?
-                _this.Placeholder(_this._holder)
-                :
-                    //@ts-ignore
-                    body);
+            return (0, jsx_runtime_1.jsx)("div", { style: { height: '100%', padding: 10 }, children: _this._holder ?
+                    _this.Placeholder(_this._holder)
+                    :
+                        //@ts-ignore
+                        body });
         };
         // private Footer = (actions?: DialogAction[]) => {
         //
@@ -449,6 +445,7 @@ var DialogBase = /** @class */ (function (_super) {
         //     </div>
         //
         // };
+        // Bu islem Dialog Base state inden bagimsiz calisir
         _this.Footer = React.forwardRef(function (_a, ref) {
             var _b, _c, _d;
             var actions = _a.actions;
@@ -477,43 +474,38 @@ var DialogBase = /** @class */ (function (_super) {
                 });
             }
             console.log('FooterSlot_props_Y', footerProps, staticProps, 'V6 ya hazirlik -2');
-            return React.createElement("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 },
-                React.createElement("div", null,
-                    React.createElement(WithHeaderFooterContext, __assign({}, staticProps, { dialog: _this }), _this._dialogOptions.slot.footer ?
-                        /*<CustomFooter inProcess={this._inProcess} dialogValues={this.state.values} dialogOptions={this._dialogOptions}  />*/
-                        React.createElement(CustomFooter, __assign({}, staticProps, footerProps))
-                        :
-                            React.createElement(Futures_1.DialogProcessing, null)
-                    /*<CircularProgress size={20} inProcess={this._inProcess} color={this._dialogOptions.progress.color}/>*/
-                    )),
-                _this.Actions(actions));
+            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)(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 React.createElement("div", { style: { position: 'relative', display: 'flex', flexDirection: 'row', columnGap: 10, alignItems: 'center' } }, 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 React.createElement(DialogActionBase_1.default, { name: action.name, ref: referencedAction, key: index.toString(), 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 });
-            }));
+            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());
+                }) });
         };
         _this.Content = function (body, header, actions) {
             var _a;
@@ -533,11 +525,27 @@ var DialogBase = /** @class */ (function (_super) {
             console.log('Content:', actions);
             var xKey = _this.dialogPosFromMultipleDialogs.isMultiple ? "left" : "marginLeft";
             var yKey = _this.dialogPosFromMultipleDialogs.isMultiple ? "top" : "marginTop";
-            return React.createElement(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) {
+            /**
+             * default null
+             * eget momoize islemi uygulanmissa read from memory
+             * */
+            var bounds = _this._storedBounds;
+            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 };
-                } },
-                React.createElement("div", { id: "dialog-main", ref: _this._dialogRef, onClick: function (e) {
+                }, 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") {
@@ -546,16 +554,13 @@ var DialogBase = /** @class */ (function (_super) {
                         }
                     }, 
                     // 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({ alignSelf: _this._dialogOptions.base.initialAnchor.vertical, height: (_b = _this._dialogOptions.base.size.height) !== null && _b !== void 0 ? _b : 'auto' }, typeof _this._dialogOptions.base.size.width === "number" ? { width: _this._dialogOptions.base.size.width } : null), (_a = { outline: 'none' }, _a[yKey] = _this.dialogPosFromMultipleDialogs.top + 'px', _a[xKey] = _this.dialogPosFromMultipleDialogs.left + 'px', _a)), _this._dialogOptions.base.style), { fontFamily: _this._fontFamily }) },
-                    React.createElement(WithSnackbar, { snackbarRef: _this._snackbarRef, maxSnack: _this._dialogOptions.snackbar.maxSnack },
-                        (_this._header || _this._dialogOptions.slot.header) && _this.Header(header),
-                        _this.Body(body),
-                        React.createElement(_this.Footer, { ref: _this._footeRef, actions: actions })),
-                    (_this._dialogOptions.base.resizeable) &&
-                        React.createElement(React.Fragment, null,
-                            React.createElement("div", { className: "resizable-handle", onMouseDown: (_c = _this._Resizeable) === null || _c === void 0 ? void 0 : _c.resizeHandleMouseDown },
-                                React.createElement(ResizeIcon_1.default, { color: '#286e94' })))));
+                    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: (_b = _this._dialogOptions.base.size.height) !== null && _b !== void 0 ? _b : 'auto' }, typeof _this._dialogOptions.base.size.width === "number" ? { width: _this._dialogOptions.base.size.width } : null), (_a = { outline: 'none' }, _a[yKey] = _this.dialogPosFromMultipleDialogs.top + 'px', _a[xKey] = _this.dialogPosFromMultipleDialogs.left + 'px', _a)), _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), _this.Body(body), (0, jsx_runtime_1.jsx)(_this.Footer, { ref: _this._footeRef, actions: actions })] }), (_this._dialogOptions.base.resizeable) &&
+                            (0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "resizable-handle", onMouseDown: (_c = _this._Resizeable) === null || _c === void 0 ? void 0 : _c.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(ResizeIcon_1.default, { color: '#286e94' }) }) })] }) });
         };
+        // render = () => {
+        //
+        //     return this.withBackdrop(this._body, this._header, this._actions)
+        // }
         _this.render = function () {
             return _this.withBackdrop(_this._body, _this._header, _this._actions);
         };
@@ -618,6 +623,10 @@ var DialogBase = /** @class */ (function (_super) {
         // 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;
         return _this;
     }
     Object.defineProperty(DialogBase.prototype, "parent", {
@@ -700,9 +709,10 @@ var DialogBase = /** @class */ (function (_super) {
     };
     DialogBase.prototype.componentDidMount = function () {
         var _this = this;
-        var _a, _b;
+        var _a, _b, _c, _d;
+        console.log('clalisan componentDidMount');
         // İlk konumları global seçeneklerden al
-        var _c = this._dialogOptions.snackbar.anchorOrigin, vertical = _c.vertical, horizontal = _c.horizontal;
+        var _e = this._dialogOptions.snackbar.anchorOrigin, vertical = _e.vertical, horizontal = _e.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 } : {}));
@@ -730,7 +740,7 @@ var DialogBase = /** @class */ (function (_super) {
             this._dialogRef.current.tabIndex = 0; // Odaklanabilir hale getirir
             this._dialogRef.current.focus();
             if (this._Resizeable) {
-                this._Resizeable.setContainer(this._dialogRef.current);
+                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);
@@ -756,6 +766,28 @@ var DialogBase = /** @class */ (function (_super) {
         // }
         // 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) {
+        }
+        // Register Dialog Bounds
+        if ((_c = this._dialogOptions.base) === null || _c === void 0 ? void 0 : _c.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, {
+                width: width,
+                height: height,
+                x: x,
+                y: y
+            });
+        }
     };
     DialogBase.prototype.onResize = function (callbackFn) {
         if (typeof callbackFn === "function") {
@@ -763,32 +795,8 @@ var DialogBase = /** @class */ (function (_super) {
             // Bu olay overwite olmasinin onune gecer
             // Cunku en sonku callback calistirildigi icin ornedin header ve
             this._resizeListenersStore.push(callbackFn);
-            // if(this._Resizeable){
-            //     this._Resizeable.onResizeListener((width, height) => {
-            //         // @ts-ignore
-            //         callbackFn({width, height}, this);
-            //     });
-            // }
         }
     };
-    // onResize: (callbackFn: (size: IDialogSize, dialog: IDialogDef) => void){
-    //     if(typeof callbackFn === "function"){
-    //
-    //     }
-    // }
-    DialogBase.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {
-        /*if(this._dialogRef.current && this._dialogOptions.base.resizeable && !this._Resizeable){
-            console.log('this._Resizeable.onResizeListener', this._Resizeable );
-
-            this._Resizeable.onResizeListener((width, height) => {
-                console.log('this._Resizeable.onResizeListener', width, height );
-                this._dialogRef.current.style.width = width + 'px';
-                this._dialogRef.current.style.height = height + 'px';
-            })
-        }*/
-    };
-    // getSnapshotBeforeUpdate(prevProps: Readonly<BaseDialogProps>, prevState: Readonly<BaseDialogState>): any {
-    // }
     DialogBase.prototype.componentWillUnmount = function () {
         if (this._Resizeable) {
             // Temizlik fonksiyonu
@@ -941,8 +949,10 @@ var DialogBase = /** @class */ (function (_super) {
         this._dom.classList.add('appinsource-dialog-root');
         // Find root element
         var rootElement = document.getElementById('root');
+        var AppElement = rootElement.firstElementChild;
         if (rootElement) {
-            rootElement.appendChild(this._dom);
+            // rootElement.appendChild(this._dom);
+            AppElement.prepend(this._dom);
         }
         else {
             document.body.appendChild(this._dom);

package/components/Futures/DialogCloseAction.d.ts

@@ -1,3 +1,2 @@
-import * as React from "react";
-declare const DialogCloseAction: () => React.JSX.Element;
+declare const DialogCloseAction: () => import("react/jsx-runtime").JSX.Element;
 export { DialogCloseAction };

package/components/Futures/DialogCloseAction.js

@@ -1,34 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogCloseAction = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var CloseIcon_1 = __importDefault(require("../icons/CloseIcon"));
-var React = __importStar(require("react"));
 var react_1 = require("react");
 var DialogBase_1 = require("../DialogBase");
 // const DialogCloseAction = ({dialog}:{dialog: React.RefObject<IDialogRef> | undefined}) => {
@@ -39,16 +16,15 @@ var DialogCloseAction = function () {
     var _dialog = dialogHeaderContext.dialog;
     // console.log('DialogCloseAction_props', dialogHeaderContext);
     // return <div className={'close-icon-wrapper'} onClick={event => apiRef.current.close()} >
-    return React.createElement("div", { className: 'close-icon-wrapper', onClick: function (event) {
+    return (0, jsx_runtime_1.jsx)("div", { className: 'close-icon-wrapper', onClick: function (event) {
             // props.dialog.close()
             _dialog.close();
-        } },
-        React.createElement(CloseIcon_1.default
+        }, children: (0, jsx_runtime_1.jsx)(CloseIcon_1.default
         // size={apiRef.current.dialogOptions.base.headerControllerIcons?.size ?? 24 }
         // color={apiRef.current.dialogOptions.base.headerControllerIcons?.color ?? null }
         , { 
             // size={apiRef.current.dialogOptions.base.headerControllerIcons?.size ?? 24 }
             // color={apiRef.current.dialogOptions.base.headerControllerIcons?.color ?? null }
-            size: (_b = (_a = _dialog.dialogOptions.base.headerControllerIcons) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 24, color: (_d = (_c = _dialog.dialogOptions.base.headerControllerIcons) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : null }));
+            size: (_b = (_a = _dialog.dialogOptions.base.headerControllerIcons) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 24, color: (_d = (_c = _dialog.dialogOptions.base.headerControllerIcons) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : null }) });
 };
 exports.DialogCloseAction = DialogCloseAction;

package/components/Futures/DialogFullscreenAction.d.ts

@@ -1,3 +1,2 @@
-import * as React from "react";
-declare const DialogFullscreenAction: () => React.JSX.Element;
+declare const DialogFullscreenAction: () => import("react/jsx-runtime").JSX.Element;
 export { DialogFullscreenAction };