react-dialogger 1.1.41 → 1.1.42

package/components/DialogBase.d.ts

@@ -7,13 +7,14 @@ import DialogActionBase from "./DialogActionBase";
 import { IInProcess, ComponentOrderType, TInitialHolder, ISnackbarAnchor, ComponentOrderPositions, TSeverity, BaseDialogDOMRect, TAccessFrom, TInitialValues, DialogValues } from "../types/types";
 import { BaseDialogProps, BaseDialogState, IDialogSize, DialogOptionsType, TBaseDialogState, TDialogStateListenerCallbackType, IDialogDef, TDialogCallbackNodeFn, TDialogCallbackVoidFn } from "../types/DialogTypes";
 import Resizeable from "../models/Resizeable";
+export declare const WithHeaderFooterContext: (props: any) => import("react/jsx-runtime").JSX.Element;
 export declare const DialogHeaderFooterContext: React.Context<any>;
 declare class DialogBase<Values extends Record<string, any>> extends Component<BaseDialogProps, BaseDialogState> {
     get parent(): Dialog;
     protected _dom: HTMLDivElement;
     protected _innerRef: React.RefObject<any>;
     protected _stateListener: TDialogStateListenerCallbackType;
-    protected _processingListener: (inProcess: boolean) => void;
+    _processingListener: (inProcess: boolean) => void;
     protected _keyboardListener: (key: string, dialog: IDialogDef) => void;
     protected _resizeListener: (size: IDialogSize, dialog: IDialogDef) => void;
     protected _initialHolder: TInitialHolder;
@@ -24,12 +25,12 @@ declare class DialogBase<Values extends Record<string, any>> extends Component<B
     protected readonly _backdropRef: RefObject<any>;
     protected readonly _dialogRef: RefObject<any>;
     protected readonly _dialogBodyRef: RefObject<any>;
+    /**@deprecated use outside Content component*/
     protected readonly _snackbarRef: RefObject<any>;
     protected _dialogSize: IDialogSize;
     protected _holder?: TInitialHolder;
     protected _formikProps: FormikProps<any>;
-    /**@deprecated use outside Content component*/
-    protected _dialogTranslate: {
+    _dialogTranslate: {
         lastX: number;
         lastY: number;
     };
@@ -43,7 +44,7 @@ declare class DialogBase<Values extends Record<string, any>> extends Component<B
     protected _shInterval: number;
     protected _onClose: TDialogCallbackVoidFn;
     private _inProcess;
-    private _footeRef;
+    private _footerRef;
     /**
      * @deprecated
      * @see dialogOptions.snackbar.anchorOrigin */
@@ -70,8 +71,9 @@ declare class DialogBase<Values extends Record<string, any>> extends Component<B
     private _storedBounds;
     constructor(props?: Readonly<BaseDialogProps>);
     get fullscreenMode(): boolean;
-    private initializeActionRef;
+    initializeActionRef: (key: string) => RefObject<DialogActionBase>;
     get dialogOptions(): DialogOptionsType;
+    get holder(): DialogOptionsType;
     /**@deprecate
      * @see this.state
      * */
@@ -79,8 +81,8 @@ declare class DialogBase<Values extends Record<string, any>> extends Component<B
     get formikProps(): FormikProps<any>;
     set formikProps(value: FormikProps<any>);
     get formikValidate(): Promise<FormikProps<any>>;
-    get values(): DialogValues;
-    setValues(values: DialogValues, callbackFn?: () => void): void;
+    get values(): Record<string, any>;
+    setValues(values: Record<string, any>, callbackFn?: () => void): void;
     setValue(key: string, value: any): void;
     private dialogAutoPos;
     componentDidMount(): void;

package/components/DialogBase.js

@@ -62,7 +62,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DialogHeaderFooterContext = void 0;
+exports.DialogHeaderFooterContext = exports.WithHeaderFooterContext = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 // import {JSX} from "react";
@@ -80,12 +80,14 @@ var ResizeIcon_1 = __importDefault(require("./icons/ResizeIcon"));
 var Futures_1 = require("./Futures");
 // 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);
@@ -109,11 +111,10 @@ var DialogBase = /** @class */ (function (_super) {
         if (props === void 0) { props = {}; }
         var _a, _b;
         var _this = _super.call(this, props) || this; // This ensures that props is treated as readonly
-        /**@deprecated use outside Content component*/
         _this._dialogTranslate = { lastX: 0, lastY: 0 };
         _this._shInterval = 300;
         _this._inProcess = { inProcess: false };
-        _this._footeRef = React.createRef();
+        _this._footerRef = React.createRef();
         // Initialize a ref for each action dynamically
         _this.initializeActionRef = function (key) {
             if (!_this._actionRefs.hasOwnProperty(key)) {
@@ -232,7 +233,7 @@ var DialogBase = /** @class */ (function (_super) {
                 _this.snackbar.close("kInProcess");
             }
             // @ts-ignore
-            (_c = _this._footeRef.current) === null || _c === void 0 ? void 0 : _c.setProcessing(process);
+            (_c = _this._footerRef.current) === null || _c === void 0 ? void 0 : _c.setProcessing(process);
             // this.forceUpdate();
             return _this;
         };
@@ -240,7 +241,7 @@ var DialogBase = /** @class */ (function (_super) {
             // return this.state.inProcess;
             return _this._inProcess;
             // @ts-ignore
-            // return this._footeRef?.current?.inProcess ?? false;
+            // return this._footerRef?.current?.inProcess ?? false;
         };
         _this.close = function (callbackFn) {
             var _a;
@@ -349,7 +350,7 @@ var DialogBase = /** @class */ (function (_super) {
                         return;
                     }
                     _this.baseZoomEffect();
-                }, children: (0, jsx_runtime_1.jsx)(_this.Content, { body: body, header: header, actions: actions }) });
+                }, 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, resizeHandleMouseDown: _this._Resizeable.resizeHandleMouseDown, dialog: _this }) });
         };
         _this.switchFullScreen = function () {
             if (!_this.state.fullscreenMode) {
@@ -395,7 +396,7 @@ var DialogBase = /** @class */ (function (_super) {
                         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)(WithHeaderFooterContext, __assign({}, staticProps, { children: (0, jsx_runtime_1.jsx)(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)(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) {
@@ -403,12 +404,13 @@ var DialogBase = /** @class */ (function (_super) {
                             _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)(WithHeaderFooterContext, { dialog: _this, children: (0, jsx_runtime_1.jsxs)(Futures_1.DialogHeaderActionsWrapper, { children: [_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) {
@@ -499,7 +501,7 @@ var DialogBase = /** @class */ (function (_super) {
                 });
             }
             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)(WithHeaderFooterContext, __assign({}, staticProps, { dialog: _this, children: _this._dialogOptions.slot.footer ?
+            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))
                                 :
@@ -590,7 +592,7 @@ 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(__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._footeRef, actions: actions })] }), (_this._dialogOptions.base.resizeable) &&
+                    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' }) }) })] }) });
@@ -701,6 +703,13 @@ var DialogBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DialogBase.prototype, "holder", {
+        get: function () {
+            return this._holder;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DialogBase.prototype, "formikProps", {
         // get state(): T | Readonly<BaseDialogState> {
         //     return super.state
@@ -738,13 +747,13 @@ var DialogBase = /** @class */ (function (_super) {
     Object.defineProperty(DialogBase.prototype, "values", {
         // get values(): DialogValues {
         get: function () {
-            var _a;
-            // return this.state.values;
-            return (_a = this._formikProps) === null || _a === void 0 ? void 0 : _a.values;
+            return this.state.values;
+            // return this._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}}) );

package/components/DialogContenFooter.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import DialogBase from "./DialogBase";
+import { DialogAction } from "../models/DialogAction";
+interface IContentFooterProps {
+    dialog: DialogBase<any>;
+    actions?: DialogAction[];
+}
+export interface DialogContentFooterReturnType {
+    setProcessing: React.Dispatch<React.SetStateAction<boolean>>;
+    inProcess: boolean;
+}
+declare const DialogContentFooter: React.ForwardRefExoticComponent<IContentFooterProps & React.RefAttributes<DialogContentFooterReturnType>>;
+export { DialogContentFooter };

package/components/DialogContenFooter.js

@@ -0,0 +1,112 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _this = this;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContentFooter = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var react_1 = require("react");
+var DialogBase_1 = require("./DialogBase");
+var Futures_1 = require("./Futures");
+var DialogActionBase_1 = __importDefault(require("./DialogActionBase"));
+var Actions = function (_a) {
+    var actions = _a.actions, dialog = _a.dialog;
+    var dialogOptions = dialog.dialogOptions;
+    console.log('Actions', 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) {
+            var referencedAction = dialog.initializeActionRef(action.name);
+            // this._actions[action.name] = referencedAction.current
+            return (0, jsx_runtime_1.jsx)(DialogActionBase_1.default, { name: action.name, ref: referencedAction, dialogBaseComponent: dialog, options: action.options, onClick: action.onClickHandler(), inProcess: action.isInProcess(), 
+                // onLoad={ dialogAction => {
+                //     action.baseDialogAction = dialogAction;
+                // }}
+                style: action.options.style, baseStyle: dialogOptions.base.actions.baseStyle, fontFamily: dialogOptions.base.style.fontFamily, stateListener: action._stateListener }, index.toString());
+        }) });
+};
+var DialogContentFooter = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b, _c, _d;
+    var actions = _a.actions, dialog = _a.dialog;
+    var state = dialog.state, dialogOptions = dialog.dialogOptions;
+    console.log('DialogContentHeader', dialog);
+    var baseOptions = dialogOptions.base;
+    var CustomFooter = (_b = 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 dialog._processingListener === "function") {
+        dialog._processingListener(inProcess);
+    }
+    var staticProps = {
+        dialogValues: dialog.state.values,
+        dialogOptions: dialogOptions,
+        dialog: _this
+    };
+    var footerProps = {};
+    if (dialogOptions.slotProps.footer) {
+        footerProps = dialogOptions.slotProps.footer({
+            dialogValues: dialog.state.values,
+            dialogOptions: dialogOptions,
+            inProcess: dialog.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 = 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)(DialogBase_1.WithHeaderFooterContext, __assign({}, staticProps, { dialog: dialog, children: 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, {}) })) }), (0, jsx_runtime_1.jsx)(Actions, { dialog: dialog, actions: actions })] });
+});
+exports.DialogContentFooter = DialogContentFooter;

package/components/DialogContent.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { BaseDialogProps, DialogOptionsType, TDialogCallbackNodeFn } from "../types/DialogTypes";
+import DialogBase from "./DialogBase";
+import { DialogContentFooterReturnType } from "./DialogContenFooter";
+interface IContentProps {
+    body: TDialogCallbackNodeFn;
+    header: TDialogCallbackNodeFn;
+    actions: any;
+    dialogRef: React.RefObject<any>;
+    footerRef: React.RefObject<DialogContentFooterReturnType>;
+    backdropRef: React.RefObject<any>;
+    dialogOptions: DialogOptionsType;
+    dom: HTMLDivElement;
+    keyboardListener: BaseDialogProps['keyboardListener'];
+    resizeHandleMouseDown: () => void;
+    dialog: DialogBase<any>;
+}
+declare const DialogContent: React.FC<IContentProps>;
+export { DialogContent };

package/components/DialogContent.js

@@ -1,181 +1,139 @@
-// import Draggable from "react-draggable";
-// import {setDialogBounds} from "../helpers";
-// import * as React from "react";
-// import ResizeIcon from "./icons/ResizeIcon";
-// import {IBaseDialogOptions, TDialogCallbackNodeFn} from "../types/DialogTypes";
-// import {Dialog} from "../index";
-// import {BaseDialogDOMRect} from "../types/types";
-//
-// interface IBodyProps {
-//     body: TDialogCallbackNodeFn;
-//     header: TDialogCallbackNodeFn;
-//     actions: any;
-//     dialogRef: React.RefObject<Dialog>;
-//     backdropRef: React.RefObject<any>; // 👈 Type ???
-//     baseOptions: IBaseDialogOptions;
-//     dom: HTMLDivElement;
-// }
-//
-// const dialogAutoPos = (): BaseDialogDOMRect => {
-//     const nodes =  Array.from(document.querySelectorAll('.appinsource-dialog-root'));
-//     if(nodes.length > 1 ) {
-//         const lastDialog = nodes[nodes.length - 2];
-//         const dialogMain = lastDialog.querySelector('#dialog-main')
-//         return {
-//             top: dialogMain?.getBoundingClientRect().top + 10,
-//             left: dialogMain?.getBoundingClientRect().left + 10,
-//             isMultiple: true
-//         }
-//     }
-//     return {top: 0 ,left: 0, isMultiple: false}
-// }
-//
-// const baseZoomEffect = (dialogRef: React.RefObject<Dialog>, lastX: number, lastY: number) => {
-//
-//     // const {lastX, lastY} = this._dialogTranslate;
-//     dialogRef.current.animate([
-//         // key frames
-//         { transform: `translate(${lastX}px, ${lastY}px) scale(1)` },
-//         { transform: `translate(${lastX}px, ${lastY}px) scale(1.01)`},
-//         // { boxShadow: `0 0 20px red`},
-//         { transform: `translate(${lastX}px, ${lastY}px) scale(1)` }
-//     ], {
-//         // sync options
-//         duration: 300,
-//         iterations: 1
-//     });
-// }
-//
-// const DialogContent: React.FC<IBodyProps> = ({
-//                                                  body,
-//                                                  header,
-//                                                  actions,
-//                                                  dialogRef,
-//                                                  baseOptions,
-//                                                  dom,
-//                                                  backdropRef
-//
-//                        }) => {
-//
-//     const position: BaseDialogDOMRect = dialogAutoPos();
-//
-//     const [fullscreenMode, setFullscreenMode] = React.useState<booleab>(false);
-//     const [dialogTranslate, setDialogTranslate] = React.useState<{lastX: number, lastY: number}>({lastX: 0, lastY: 0});
-//
-//
-//     if(dialogRef.current){
-//         // Öncelikle ref'i al ve input elemanlarını bul
-//         const inputElements = dialogRef.current.querySelectorAll("input");
-//         // Tüm input elemanlarını döngüye al
-//         inputElements.forEach((input) => {
-//             console.log(input); // Her bir input elemanını burada işleyebilirsiniz
-//             // Örneğin, input değerini okuma veya ayarlama
-//             input.addEventListener('keydown', (e: KeyboardEvent) => e.key === "Enter" && e.preventDefault()); // Değerini boşaltmak için örnek
-//             input.addEventListener('keyup', (e: KeyboardEvent) => e.key === "Enter" && e.preventDefault()); // Değerini boşaltmak için örnek
-//             input.addEventListener('keypress', (e: KeyboardEvent) => e.key === "Enter" && e.preventDefault()); // Değerini boşaltmak için örnek
-//         });
-//     }
-//
-//
-//     console.log('Content:', actions);
-//
-//     const xKey = position.isMultiple ? "left":"marginLeft"
-//     const yKey = position.isMultiple ? "top":"marginTop"
-//
-//     /**
-//      * default null
-//      * eget momoize islemi uygulanmissa read from memory
-//      * */
-//     const bounds = baseOptions.memoBounds;
-//
-//     // console.log('MAIN DOM', window.getComputedStyle(this.props.dom).zIndex);
-//     const domZIndex = window.getComputedStyle(dom).zIndex;
-//
-//
-//     // Burda kaldik
-//
-//     return <Draggable
-//         disabled={!baseOptions.draggable || fullscreenMode}
-//         axis={'both'}
-//         handle={baseOptions.draggable ? '.drag-handle' : ''}
-//         scale={1}
-//         ref={backdropRef}
-//         onDrag={(event, data) => {
-//             event.stopPropagation();
-//             setDialogTranslate({lastX: data.lastX, lastY: data.lastY})
-//         }}
-//         onStop={(event, data) => {
-//             event.stopPropagation();
-//             event.preventDefault();
-//
-//             console.log('onDragStop', 'fired');
-//
-//             const {width, height, x, y} = this._dialogRef.current?.getBoundingClientRect()
-//             setDialogBounds(
-//                 this._dialogOptions.base.id,
-//                 {
-//                     width, height, x, y
-//                 },
-//                 this._dialogRef
-//             );
-//         }}
-//     >
-//         <div
-//             id={"dialog-main"}
-//             ref={this._dialogRef}
-//             onClick={e => {
-//                 e.stopPropagation()
-//             }}
-//             onKeyDown={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-${this._dialogOptions.base.size.width} dialog-main show-opacity show-position-${this._dialogOptions.base.initialAnchor.vertical}`}
-//             style={{
-//
-//                 alignSelf: this._dialogOptions.base.initialAnchor.vertical,
-//                 height: this._dialogOptions.base.size.height ?? 'auto',
-//                 ...typeof this._dialogOptions.base.size.width === "number" ? {width: this._dialogOptions.base.size.width} : null,
-//                 outline: 'none',
-//                 [yKey]: this.dialogPosFromMultipleDialogs.top + 'px',
-//                 [xKey]: this.dialogPosFromMultipleDialogs.left + 'px',
-//                 //...this._Resizeable ? {width: this._Resizeable.width } : null,
-//                 // ...this._Resizeable ? {height: this._Resizeable.height } : null,
-//                 ...this._dialogOptions.base.style,
-//                 fontFamily: this._fontFamily,
-//
-//                 // overwrite
-//                 ...bounds ? {position: 'absolute', top: bounds.y, left: bounds.x, width: bounds.width, height: bounds.height} : null
-//
-//             }}
-//         >
-//             <WithSnackbar snackbarRef={this._snackbarRef} maxSnack={this._dialogOptions.snackbar.maxSnack} >
-//                 { (this._header || this._dialogOptions.slot.header) && this.Header(header)}
-//                 {this.Body(body)}
-//                 {/*{this.Footer(actions)}*/}
-//                 <this.Footer ref={this._footeRef} actions={actions} />
-//             </WithSnackbar>
-//
-//             {
-//                 (this._dialogOptions.base.resizeable) &&
-//                 <React.Fragment>
-//                     <div className="resizable-handle" style={{
-//                         zIndex: parseInt(domZIndex) + 1
-//                     }}
-//                          onMouseDown={this._Resizeable?.resizeHandleMouseDown}
-//                     >
-//                         <ResizeIcon color={'#286e94'} />
-//                     </div>
-//
-//                 </React.Fragment>
-//             }
-//
-//         </div>
-//
-//
-//     </Draggable>
-// }
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _this = this;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContent = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_draggable_1 = __importDefault(require("react-draggable"));
+var helpers_1 = require("../helpers");
+var React = __importStar(require("react"));
+var ResizeIcon_1 = __importDefault(require("./icons/ResizeIcon"));
+var notistack_1 = require("notistack");
+var DialogContentHeader_1 = require("./DialogContentHeader");
+var DialogContentBody_1 = require("./DialogContentBody");
+var DialogContenFooter_1 = require("./DialogContenFooter");
+var WithSnackbar = function (props) {
+    return (0, jsx_runtime_1.jsx)(notistack_1.SnackbarProvider, { ref: props.snackbarRef, maxSnack: props.maxSnack, children: props.children });
+};
+var 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 };
+};
+var DialogContent = function (_a) {
+    var _b;
+    var _c, _d, _e;
+    var body = _a.body, header = _a.header, actions = _a.actions, dialogRef = _a.dialogRef, footerRef = _a.footerRef, dialogOptions = _a.dialogOptions, dom = _a.dom, backdropRef = _a.backdropRef, keyboardListener = _a.keyboardListener, resizeHandleMouseDown = _a.resizeHandleMouseDown, dialog = _a.dialog;
+    var position = dialogAutoPos();
+    var snackbarRef = React.useRef(null);
+    var _f = React.useState(false), fullscreenMode = _f[0], setFullscreenMode = _f[1];
+    var baseOptions = dialogOptions.base;
+    if (dialogRef.current) {
+        // Öncelikle ref'i al ve input elemanlarını bul
+        var inputElements = 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
+        });
+    }
+    var xKey = position.isMultiple ? "left" : "marginLeft";
+    var yKey = position.isMultiple ? "top" : "marginTop";
+    /**
+     * default null
+     * eget momoize islemi uygulanmissa read from memory
+     * */
+    var base = dialogOptions.base;
+    var bounds = ((_c = dialogOptions.base) === null || _c === void 0 ? void 0 : _c.memoBounds) ? (0, helpers_1.getDialogBounds)(base) : null;
+    // console.log('MAIN DOM', window.getComputedStyle(this.props.dom).zIndex);
+    var domZIndex = window.getComputedStyle(dialog.getDom()).zIndex;
+    // Burda kaldik
+    return (0, jsx_runtime_1.jsx)(react_draggable_1.default, { disabled: !baseOptions.draggable || fullscreenMode, axis: 'both', handle: baseOptions.draggable ? '.drag-handle' : '', scale: 1, ref: backdropRef, onDrag: function (event, data) {
+            event.stopPropagation();
+            dialog._dialogTranslate = { lastX: data.lastX, lastY: data.lastY };
+        }, onStop: function (event, data) {
+            var _a;
+            event.stopPropagation();
+            event.preventDefault();
+            console.log('onDragStop', 'fired');
+            var _b = (_a = 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)(dialogOptions.base.id, {
+                width: width,
+                height: height,
+                x: x,
+                y: y
+            }, dialogRef);
+        }, children: (0, jsx_runtime_1.jsxs)("div", { id: "dialog-main", ref: dialogRef, onClick: function (e) {
+                e.stopPropagation();
+            }, onKeyDown: function (e) {
+                if (typeof keyboardListener === "function") {
+                    // @ts-ignore
+                    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: baseOptions.size.width === 'auto' ? 'auto' : "dialog-width-".concat(dialogOptions.base.size.width, " dialog-main show-opacity show-position-").concat(baseOptions.initialAnchor.vertical), style: __assign(__assign(__assign(__assign(__assign({ alignSelf: baseOptions.initialAnchor.vertical, height: (_d = baseOptions.size.height) !== null && _d !== void 0 ? _d : 'auto' }, typeof baseOptions.size.width === "number" ? { width: baseOptions.size.width } : null), (_b = { outline: 'none' }, _b[yKey] = position.top + 'px', _b[xKey] = position.left + 'px', _b)), baseOptions.style), { fontFamily: (_e = baseOptions.style.fontFamily) !== null && _e !== void 0 ? _e : 'Arial' }), bounds ? { position: 'absolute', top: bounds.y, left: bounds.x, width: bounds.width, height: bounds.height } : null), children: [(0, jsx_runtime_1.jsxs)(WithSnackbar, { snackbarRef: snackbarRef, maxSnack: dialogOptions.snackbar.maxSnack, children: [(header || dialogOptions.slot.header) && (0, jsx_runtime_1.jsx)(DialogContentHeader_1.DialogContentHeader, { header: header, 
+                            // dialogOptions={dialogOptions}
+                            dialog: dialog }), (0, jsx_runtime_1.jsx)(DialogContentBody_1.DialogContentBody, { dialog: dialog, body: body }), (0, jsx_runtime_1.jsx)(DialogContenFooter_1.DialogContentFooter, { dialog: dialog, ref: footerRef, actions: actions })] }), (baseOptions.resizeable) &&
+                    (0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "resizable-handle", style: {
+                                zIndex: parseInt(domZIndex) + 1
+                            }, onMouseDown: resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(ResizeIcon_1.default, { color: '#286e94' }) }) })] }) });
+};
+exports.DialogContent = DialogContent;

package/components/DialogContentBody.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { TDialogCallbackNodeFn } from "../types/DialogTypes";
+import DialogBase from "./DialogBase";
+interface IContentBodyProps {
+    body: TDialogCallbackNodeFn;
+    dialog: DialogBase<any>;
+}
+declare const DialogContentBody: React.FC<IContentBodyProps>;
+export { DialogContentBody };

package/components/DialogContentBody.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContentBody = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Placeholder = function (_a) {
+    var dialogOptions = _a.dialogOptions, placeholder = _a.placeholder;
+    var bgColor = dialogOptions.base.style.backgroundColor ?
+        dialogOptions.base.style.backgroundColor : "#FFFFFF";
+    var bg = dialogOptions.base.style.background ?
+        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 });
+};
+var DialogContentBody = function (_a) {
+    var body = _a.body, dialog = _a.dialog;
+    if (body instanceof Function) {
+        return (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-body', style: { height: '100%' }, children: [dialog.holder && (0, jsx_runtime_1.jsx)(Placeholder, { dialogOptions: dialog.dialogOptions, placeholder: dialog.holder }), body(dialog)] });
+    }
+    return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-body', style: { height: '100%', padding: 10 }, children: dialog.holder ?
+            // this.Placeholder(this._holder)
+            (0, jsx_runtime_1.jsx)(Placeholder, { dialogOptions: dialog.dialogOptions, placeholder: dialog.holder })
+            :
+                //@ts-ignore
+                body });
+};
+exports.DialogContentBody = DialogContentBody;

package/components/DialogContentHeader.d.ts

@@ -0,0 +1,9 @@
+import { TDialogCallbackNodeFn } from "../types/DialogTypes";
+import * as React from "react";
+import DialogBase from "./DialogBase";
+interface IContentHeaderProps {
+    header: TDialogCallbackNodeFn;
+    dialog: DialogBase<any>;
+}
+declare const DialogContentHeader: React.FC<IContentHeaderProps>;
+export { DialogContentHeader };

package/components/DialogContentHeader.js

@@ -0,0 +1,55 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var _this = this;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContentHeader = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Futures_1 = require("./Futures");
+var DialogBase_1 = require("./DialogBase");
+var DialogContentHeader = function (_a) {
+    var _b, _c, _d, _e;
+    var header = _a.header, dialog = _a.dialog;
+    var state = dialog.state, dialogOptions = dialog.dialogOptions;
+    console.log('DialogContentHeader', dialog);
+    var baseOptions = dialogOptions.base;
+    var CustomHeader = (_b = dialogOptions.slot) === null || _b === void 0 ? void 0 : _b.header;
+    var staticProps = {
+        dialogValues: state.values,
+        dialogOptions: dialogOptions,
+        dialog: dialog
+    };
+    var headerProps = {};
+    if (dialogOptions.slotProps.header) {
+        headerProps = dialogOptions.slotProps.header(staticProps);
+    }
+    if (dialogOptions.slot.header) {
+        return (0, jsx_runtime_1.jsx)("div", { onDoubleClick: function (event) {
+                var _a;
+                if ((_a = dialog === null || dialog === void 0 ? void 0 : dialog.dialogOptions.base) === null || _a === void 0 ? void 0 : _a.fullscreen) {
+                    dialog.switchFullScreen();
+                }
+            }, style: (_c = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.header) === null || _c === void 0 ? void 0 : _c.style, className: "dialog-header ".concat(baseOptions.draggable && !dialog.state.fullscreenMode ? 'drag-handle' : ''), children: (0, jsx_runtime_1.jsx)(DialogBase_1.WithHeaderFooterContext, { 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 (baseOptions.fullscreen) {
+                    dialog.switchFullScreen();
+                }
+            }, style: (_d = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.header) === null || _d === void 0 ? void 0 : _d.style, className: "dialog-header ".concat(baseOptions.draggable && !dialog.state.fullscreenMode ? 'drag-handle' : ''), children: [header(dialog), (baseOptions.closeable || baseOptions.fullscreen) &&
+                    (0, jsx_runtime_1.jsx)(DialogBase_1.WithHeaderFooterContext, { dialog: dialog, children: (0, jsx_runtime_1.jsxs)(Futures_1.DialogHeaderActionsWrapper, { children: [baseOptions.fullscreen &&
+                                    (0, jsx_runtime_1.jsx)(Futures_1.DialogFullscreenAction, {}), baseOptions.closeable &&
+                                    (0, jsx_runtime_1.jsx)(Futures_1.DialogCloseAction, {})] }) })] });
+    }
+    return (0, jsx_runtime_1.jsx)("div", { style: (_e = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.header) === null || _e === void 0 ? void 0 : _e.style, className: 'drag-handle dialog-header', children: header });
+};
+exports.DialogContentHeader = DialogContentHeader;

package/package.json

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