react-dialogger 1.1.128 → 1.1.130

package/README.md

@@ -123,6 +123,22 @@ Custom Dialog Configurations
 
 Although a global configuration is set by useDialogOptions, each dialog can still be individually customized as needed. You can override the default settings for specific dialogs to meet particular requirements. This flexibility allows you to customize the appearance, behavior, and actions of each dialog instance separately, while still maintaining the benefits of a unified base configuration.
 ```
+
+## New feature 
+```
+backdrop: {
+    dimOnInactive: boolean
+},
+scaleable: boolean,
+```
+#### Explanations:
+* <b>backdrop.dimOnInactive</b>: 
+When set to true, the dialog will dim the background when it becomes inactive. This makes it easier for the user to identify which dialog is currently active.
+* <b>scaleable</b>: 
+When set to true, the dialog becomes resizable, allowing the user to change its size. When this feature is enabled, resizing handles will appear around the dialog.
+
+
+
 ## Example Usage
 
 Below is an example of customizing a dialog using `baseDialogOptions`:

package/components/DialogBase.d.ts

@@ -53,7 +53,7 @@ declare class DialogBase<V, I> extends Component<BaseDialogProps<V, I>, BaseDial
     get accessFrom(): TAccessFrom;
     initializeActionRef: (key: string) => RefObject<DialogActionBase>;
     get dialogOptions(): DialogOptionsType;
-    get holder(): DialogOptionsType;
+    get holder(): DialogOptionsType['slot']['loader'];
     get formikProps(): FormikProps<any>;
     set formikProps(value: FormikProps<any>);
     get formikValidate(): Promise<DialogFormikAdapter<any>>;

package/components/DialogBase.js

@@ -69,7 +69,7 @@ var _context_1 = require("../context/index.js");
 var DialogBase = /** @class */ (function (_super) {
     __extends(DialogBase, _super);
     function DialogBase(props) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         var _this = _super.call(this, props) || this;
         // ✨✨✨✨✨✨✨✨✨✨✨
         _this._dialogTranslate = { lastX: 0, lastY: 0 };
@@ -238,13 +238,13 @@ var DialogBase = /** @class */ (function (_super) {
         _this._bodyRef = React.createRef();
         _this._inProcess = { inProcess: false };
         _this._snackbarRef = React.createRef();
-        _this._holder = props.initialHolder;
+        _this._holder = (_c = (_b = (_a = props.initialOptions) === null || _a === void 0 ? void 0 : _a.slot) === null || _b === void 0 ? void 0 : _b.loader) !== null && _c !== void 0 ? _c : props === null || props === void 0 ? void 0 : props.initialHolder;
         // Initialize _actionRefs as an empty object
         _this._actionRefs = {};
         _this._parent = props.parent;
         _this._dialogWithBackDropRef = (0, react_1.createRef)();
-        _this._processingListeners = (_a = props.processingListeners) !== null && _a !== void 0 ? _a : [];
-        _this._abortedListeners = (_b = props.abortedListeners) !== null && _b !== void 0 ? _b : [];
+        _this._processingListeners = (_d = props.processingListeners) !== null && _d !== void 0 ? _d : [];
+        _this._abortedListeners = (_e = props.abortedListeners) !== null && _e !== void 0 ? _e : [];
         _this._initialValues = props.initialValues;
         return _this;
     }

package/components/DialogContent.js

@@ -74,16 +74,16 @@ var appLogger_1 = require("../helpers/appLogger");
 var PlusIcon_1 = __importDefault(require("../icons/PlusIcon"));
 var MinusIcon_1 = __importDefault(require("../icons/MinusIcon"));
 var DialogContent = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var firstUpdate = React.useRef(true);
-    var _j = (0, react_1.useContext)(_context_1.DialogContentContext), dialog = _j.dialog, dialogRef = _j.dialogRef, prevDialogRect = _j.prevDialogRect, backdropRef = _j.backdropRef, snackbarRef = _j.snackbarRef, footerRef = _j.footerRef, bodyRef = _j.bodyRef, headerRef = _j.headerRef, resizeableObject = _j.resizeableObject, body = _j.body;
+    var _k = (0, react_1.useContext)(_context_1.DialogContentContext), dialog = _k.dialog, dialogRef = _k.dialogRef, prevDialogRect = _k.prevDialogRect, backdropRef = _k.backdropRef, snackbarRef = _k.snackbarRef, footerRef = _k.footerRef, bodyRef = _k.bodyRef, headerRef = _k.headerRef, resizeableObject = _k.resizeableObject, body = _k.body;
     var dialogOptions = dialog.dialogOptions;
     var baseOptions = dialogOptions.base;
-    var _k = React.useState(false), fullscreenMode = _k[0], setFullscreenMode = _k[1];
-    var _l = React.useState(null), rect = _l[0], setRect = _l[1];
-    var _m = React.useState(((_a = dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.scale) !== null && _a !== void 0 ? _a : 1)), zoom = _m[0], setZoom = _m[1];
-    var bounds = ((_b = dialog.dialogOptions.base) === null || _b === void 0 ? void 0 : _b.memoBounds) ? (0, _helpers_1.getDialogBounds)(dialog.dialogOptions.base.id) : null;
+    var _l = React.useState(false), fullscreenMode = _l[0], setFullscreenMode = _l[1];
+    var _m = React.useState(null), rect = _m[0], setRect = _m[1];
+    var bounds = ((_a = dialog.dialogOptions.base) === null || _a === void 0 ? void 0 : _a.memoBounds) ? (0, _helpers_1.getDialogBounds)(dialog.dialogOptions.base.id) : null;
     var domZIndex = window.getComputedStyle(dialog.getDom()).zIndex;
+    var _o = React.useState(((_b = bounds === null || bounds === void 0 ? void 0 : bounds.scale) !== null && _b !== void 0 ? _b : ((_c = dialogOptions === null || dialogOptions === void 0 ? void 0 : dialogOptions.scale) !== null && _c !== void 0 ? _c : 1))), zoom = _o[0], setZoom = _o[1];
     var positionSelector = function () {
         var _a;
         var dialogRectSelectors = { xKey: 'marginLeft', yKey: 'marginTop' };
@@ -151,13 +151,16 @@ var DialogContent = function (props) {
             dialogRef.current = null;
         };
     }, []);
-    // TODO Bi dene Zoom + Scale ile drag yapiliyor (Resize eksik) & Memo tam coordine degil!!
-    var scale = zoom; //dialogOptions?.scale ?? 1;
     // Set Zoom
     (0, react_1.useEffect)(function () {
+        var _a, _b;
         dialogOptions.scale = zoom;
+        if (((_a = dialogOptions.base) === null || _a === void 0 ? void 0 : _a.memoBounds) && ((_b = dialogOptions.base) === null || _b === void 0 ? void 0 : _b.id)) {
+            // const gb = getDialogBounds(dialogOptions.base.id)
+            (0, _helpers_1.setDialogBounds)(dialogOptions.base.id, __assign(__assign({}, bounds), { scale: zoom }), dialogRef);
+        }
     }, [zoom]);
-    return (0, jsx_runtime_1.jsx)(react_draggable_1.default, { disabled: !baseOptions.draggable || fullscreenMode, axis: 'both', handle: baseOptions.draggable ? '.drag-handle' : '', scale: scale, nodeRef: dialogRef, onDrag: function (event, data) {
+    return (0, jsx_runtime_1.jsx)(react_draggable_1.default, { disabled: !baseOptions.draggable || fullscreenMode, axis: 'both', handle: baseOptions.draggable ? '.drag-handle' : '', scale: zoom, nodeRef: dialogRef, onDrag: function (event, data) {
             event.stopPropagation();
             dialog._dialogTranslate = { lastX: data.lastX, lastY: data.lastY };
         }, onStop: function (event, data) {
@@ -167,13 +170,13 @@ var DialogContent = function (props) {
             var _c = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), width = _c.width, height = _c.height, x = _c.x, y = _c.y;
             (0, appLogger_1.appLog)('onDragStop', 'fired', (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect());
             (0, _helpers_1.setDialogBounds)(dialogOptions.base.id, {
-                width: width / scale,
-                height: height / scale,
-                x: x / scale,
-                y: y / scale,
+                width: width / zoom,
+                height: height / zoom,
+                x: x / zoom,
+                y: y / zoom,
                 fullscreen: false
             }, dialogRef);
-        }, children: (0, jsx_runtime_1.jsxs)("div", { onBlur: function (event) {
+        }, children: (0, jsx_runtime_1.jsx)("div", { onBlur: function (event) {
                 if (dialog.dialogOptions.backdrop.dimOnInactive) {
                     dialogRef.current.classList.add('inactive');
                 }
@@ -204,17 +207,21 @@ var DialogContent = function (props) {
                     // @ts-ignore
                     dialog.props.keyboardListener(e.key, _this);
                 }
-            }, className: baseOptions.size.width === 'auto' ? 'auto' : "dialog-width-".concat(dialogOptions.base.size.width, " dialog-main show-opacity show-position-").concat(baseOptions.initialAnchor.vertical), style: __assign(__assign(__assign(__assign({ height: (_c = baseOptions.size.height) !== null && _c !== void 0 ? _c : 'auto' }, typeof baseOptions.size.width === "number" ? { width: "".concat(baseOptions.size.width, "px") } : { width: "".concat(baseOptions.size.width) }), { outline: 'none', fontFamily: (_d = baseOptions.style.fontFamily) !== null && _d !== void 0 ? _d : 'Arial' }), rect), { alignSelf: (_e = baseOptions.initialAnchor.vertical) !== null && _e !== void 0 ? _e : 'flex-start', justifySelf: (_f = baseOptions.initialAnchor.horizontal) !== null && _f !== void 0 ? _f : 'flex-start', zoom: scale !== null && scale !== void 0 ? scale : 1, overflow: 'unset' }), children: [dialog.dialogOptions.scaleable &&
-                    (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-zoom-root', style: { width: 36 }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'dialog-zoom-wrapper', children: [(0, jsx_runtime_1.jsx)("div", { className: "zoom-action", onClick: function () {
-                                            setZoom(function (prev) { return Number((prev + 0.1).toFixed(2)); }); // 0.6 → 0.7
-                                        }, children: (0, jsx_runtime_1.jsx)(PlusIcon_1.default, { size: 22 }) }), (0, jsx_runtime_1.jsx)("div", { className: "zoom-action", onClick: function (event) {
-                                            setZoom(function (prev) { return Number((prev - 0.1).toFixed(2)); }); // 0.7 → 0.6
-                                            setTimeout(function () {
-                                                event.clientX;
-                                            });
-                                        }, children: (0, jsx_runtime_1.jsx)(MinusIcon_1.default, { size: 22 }) })] }), (0, jsx_runtime_1.jsxs)("span", { className: 'dialog-zoom-label', children: [(Math.round(zoom * 100)), "%"] })] }), (0, jsx_runtime_1.jsxs)(notistack_1.SnackbarProvider, { ref: snackbarRef, maxSnack: dialog.dialogOptions.snackbar.maxSnack, style: __assign({ width: 'min-content' }, (_h = (_g = dialog.dialogOptions) === null || _g === void 0 ? void 0 : _g.snackbar) === null || _h === void 0 ? void 0 : _h.style), children: [(dialog.props.header || dialogOptions.slot.header) && ((0, jsx_runtime_1.jsx)(_1.DialogContentHeader, { ref: headerRef, header: dialog.props.header, bounds: bounds })), (0, jsx_runtime_1.jsx)(_1.DialogContentBody, { ref: bodyRef, body: body }), (0, jsx_runtime_1.jsx)(_1.DialogContentFooter, { ref: footerRef }), (baseOptions.resizeable) &&
-                            (0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "resizable-handle", style: {
-                                        zIndex: parseInt(domZIndex) + 1
-                                    }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(_icons_1.ResizeIcon, { color: '#286e94' }) }) })] })] }) });
+            }, className: baseOptions.size.width === 'auto' ? 'auto' : "dialog-width-".concat(dialogOptions.base.size.width, " dialog-main show-opacity show-position-").concat(baseOptions.initialAnchor.vertical), style: __assign(__assign(__assign(__assign({ height: (_d = baseOptions.size.height) !== null && _d !== void 0 ? _d : 'auto' }, typeof baseOptions.size.width === "number" ? { width: "".concat(baseOptions.size.width, "px") } : { width: "".concat(baseOptions.size.width) }), { outline: 'none', fontFamily: (_e = baseOptions.style.fontFamily) !== null && _e !== void 0 ? _e : 'Arial' }), rect), { alignSelf: (_f = baseOptions.initialAnchor.vertical) !== null && _f !== void 0 ? _f : 'flex-start', justifySelf: (_g = baseOptions.initialAnchor.horizontal) !== null && _g !== void 0 ? _g : 'flex-start', zoom: zoom !== null && zoom !== void 0 ? zoom : 1, overflow: 'hidden' }), children: (0, jsx_runtime_1.jsxs)(notistack_1.SnackbarProvider
+            // domRoot={document.getElementById('mirsak')}
+            , { 
+                // domRoot={document.getElementById('mirsak')}
+                ref: snackbarRef, maxSnack: dialog.dialogOptions.snackbar.maxSnack, style: __assign({ width: 'min-content' }, (_j = (_h = dialog.dialogOptions) === null || _h === void 0 ? void 0 : _h.snackbar) === null || _j === void 0 ? void 0 : _j.style), children: [dialog.dialogOptions.scaleable &&
+                        (0, jsx_runtime_1.jsxs)("div", { className: 'dialog-zoom-root', style: { width: 36 }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'dialog-zoom-wrapper', children: [(0, jsx_runtime_1.jsx)("div", { className: "zoom-action", onClick: function () {
+                                                setZoom(function (prev) { return Number((prev + 0.1).toFixed(2)); }); // 0.6 → 0.7
+                                            }, children: (0, jsx_runtime_1.jsx)(PlusIcon_1.default, { size: 22 }) }), (0, jsx_runtime_1.jsx)("div", { className: "zoom-action", onClick: function (event) {
+                                                setZoom(function (prev) { return Number((prev - 0.1).toFixed(2)); }); // 0.7 → 0.6
+                                                setTimeout(function () {
+                                                    event.clientX;
+                                                });
+                                            }, children: (0, jsx_runtime_1.jsx)(MinusIcon_1.default, { size: 22 }) })] }), (0, jsx_runtime_1.jsxs)("span", { className: 'dialog-zoom-label', children: [(Math.round(zoom * 100)), "%"] })] }), (dialog.props.header || dialogOptions.slot.header) && ((0, jsx_runtime_1.jsx)(_1.DialogContentHeader, { ref: headerRef, header: dialog.props.header, bounds: bounds })), (0, jsx_runtime_1.jsx)(_1.DialogContentBody, { ref: bodyRef, body: body }), (0, jsx_runtime_1.jsx)(_1.DialogContentFooter, { ref: footerRef }), (baseOptions.resizeable) &&
+                        (0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "resizable-handle", style: {
+                                    zIndex: parseInt(domZIndex) + 1
+                                }, onMouseDown: resizeableObject === null || resizeableObject === void 0 ? void 0 : resizeableObject.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(_icons_1.ResizeIcon, { color: '#286e94' }) }) })] }) }) });
 };
 exports.DialogContent = DialogContent;

package/components/DialogContentBody.js

@@ -1,4 +1,15 @@
 "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);
@@ -50,6 +61,64 @@ var Placeholder = function (_a) {
             display: placeholder ? 'flex' : 'none',
         }, children: placeholder });
 };
+// /**
+//  * @deprecated gereksiz render */
+// const PlaceholderWrapper_: React.FC<{dialog: IDialogApiDef, dialogOptions: DialogOptionsType, children: React.ReactNode}> = ({dialog, dialogOptions, children}) => {
+//     const bgColor = dialogOptions.base.style.backgroundColor ?
+//         dialogOptions.base.style.backgroundColor : "#FFFFFF";
+//     const bg = dialogOptions.base.style.background ?
+//         dialogOptions.base.style.background : "#FFFFFF";
+//
+//     const [inProcess, setInProcess] = React.useState<any>();
+//
+//     React.useEffect(() => {
+//         dialog.processingListener( inProcess => {
+//             setInProcess(dialog.isInProcess);
+//         })
+//     }, []);
+//
+//     const LoaderSlotElement = children ? React.isValidElement(children)
+//         ? React.cloneElement( children as React.ReactElement<DialogOptionsType['slotProps']['loader'] & {dialog: IDialogApiDef}>, {
+//             ...dialog.dialogOptions.slotProps.loader,
+//             dialog
+//         })
+//         : React.createElement(children as unknown as React.JSXElementConstructor<DialogOptionsType['slotProps']['loader'] & {dialog: IDialogApiDef}>, {
+//             ...dialog.dialogOptions.slotProps.loader,
+//             dialog
+//         }) : null
+//
+//     console.log('PlaceholderWrapper', dialog.isInProcess().message)
+//
+//     return <div className={'dialog-content-placeholder'} style={{
+//         backgroundColor: bgColor,
+//         background: bg,
+//         display: "flex"
+//     }}>
+//         {/*{children}*/}
+//         {LoaderSlotElement}
+//     </div>
+// }
+var PlaceholderWrapper = function (_a) {
+    var _b;
+    var dialog = _a.dialog, dialogOptions = _a.dialogOptions, children = _a.children;
+    var _c = React.useState(dialog.isInProcess()), inProcess = _c[0], setInProcess = _c[1];
+    React.useEffect(function () {
+        var unsubscribe = dialog.processingListener(function () {
+            setInProcess(dialog.isInProcess());
+        });
+        // return () => (unsubscribe as any)?.()
+    }, [dialog]);
+    var initialElement = React.useState(function () {
+        if (!children)
+            return null;
+        return React.isValidElement(children) ? children : React.createElement(children, {});
+    })[0];
+    var LoaderSlotElement = initialElement
+        ? React.cloneElement(initialElement, __assign(__assign({}, dialog.dialogOptions.slotProps.loader), { values: dialog.values, inProcess: dialog.isInProcess() }))
+        : null;
+    var backgroundColor = (_b = dialogOptions.base.style.backgroundColor) !== null && _b !== void 0 ? _b : "#FFFFFF";
+    return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-content-placeholder', style: { display: 'flex', backgroundColor: backgroundColor }, children: LoaderSlotElement });
+};
 // const DialogContentBody: React.FC<IContentBodyProps> = React.forwardRef(({
 //         body
 // }, ref ) => {
@@ -67,8 +136,18 @@ var DialogContentBody = React.forwardRef(function (_a, ref) {
         setProcessing: setProcessing,
         inProcess: inProcess
     }); });
+    // const LoaderSlotElement = dialog.holder ? React.isValidElement(dialog.holder)
+    //     ? React.cloneElement( dialog.holder as React.ReactElement<DialogOptionsType['slotProps']['loader'] & {dialog: IDialogApiDef}>, {
+    //         ...dialog.dialogOptions.slotProps.loader,
+    //         dialog
+    //     })
+    //     : React.createElement(dialog.holder as JSXElementConstructor<DialogOptionsType['slotProps']['loader'] & {dialog: IDialogApiDef}>, {
+    //         ...dialog.dialogOptions.slotProps.loader,
+    //         dialog
+    //     }) : null
+    console.log('LoaderSlotElement', dialog.isInProcess());
     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.jsxs)("div", { className: 'dialog-body', style: { height: '100%' }, children: [dialog.holder && (0, jsx_runtime_1.jsx)(PlaceholderWrapper, { dialog: dialog, dialogOptions: dialog.dialogOptions, children: dialog.holder }), body(dialog)] });
     }
     return (0, jsx_runtime_1.jsx)("div", { className: 'dialog-body', style: { height: '100%', padding: 10 }, children: dialog.holder ?
             (0, jsx_runtime_1.jsx)(Placeholder, { dialogOptions: dialog.dialogOptions, placeholder: dialog.holder })

package/helpers/dialogBoundsMemoize.js

@@ -78,7 +78,7 @@ var setDialogBounds = function (dialogId, bounds, dialogRef) {
         // Save to RAM
         initDialogMemoizeBounds_1.registeredDialogs.set(combined.join('-'), {
             id: combined.join('-'),
-            bounds: bounds
+            bounds: __assign(__assign({}, (0, exports.getDialogBounds)(dialogId)), bounds)
         });
         /**
          * const myMap = new Map();
@@ -92,7 +92,7 @@ var setDialogBounds = function (dialogId, bounds, dialogRef) {
          *
          * */
         // Save to Store
-        (0, appLogger_1.appLog)('registeredDialogs', initDialogMemoizeBounds_1.registeredDialogs);
+        // console.log('registeredDialogs', registeredDialogs);
         try {
             window.localStorage.setItem(initDialogMemoizeBounds_1.BOUNDS_STORE_KEY, JSON.stringify(Array.from(initDialogMemoizeBounds_1.registeredDialogs)));
         }

package/models/Dialog.d.ts

@@ -37,6 +37,7 @@ declare class Dialog<V, I> {
     stateListener(listener: TDialogStateListenerCallbackType): this;
     processingListener(listener: (inProcess: boolean) => void): this;
     onAbort(callbackFn: TDialogCallbackFn<V, I, void>): this;
+    /**@deprecated use slot.loader instead */
     initialHolder(holder: TInitialHolder): this;
     keyboardListener(listener: (key: string, dialog: IDialogApiDef) => void): this;
     resizeListener(listener: (size: IDialogSize, dialog: IDialogApiDef) => void): this;

package/models/Dialog.js

@@ -155,6 +155,7 @@ var Dialog = /** @class */ (function () {
         this._abortedListeners.push(callbackFn);
         return this;
     };
+    /**@deprecated use slot.loader instead */
     Dialog.prototype.initialHolder = function (holder) {
         this._initialHolder = holder;
         return this;

package/models/baseDialogOptions.js

@@ -76,7 +76,7 @@ var BASE_DIALOG_OPTIONS = {
         busyMessage: "Please wait...",
     },
     slot: {
-        action: undefined,
+        action: undefined
     },
     slotProps: {
         action: {},

package/package.json

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

package/types/BoundTypes.d.ts

@@ -5,6 +5,7 @@ export interface IDialogBoundsDef {
     x: number;
     y: number;
     fullscreen: boolean;
+    scale?: number;
 }
 export interface IDialogBoundDef {
     id: IDialogBoundsMemoKey;

package/types/DialogTypes.d.ts

@@ -41,6 +41,7 @@ export interface BaseDialogProps<V extends Record<string, any>, I> {
     didMountCallback?: TDialogCallbackFn<V, I, void>;
     dialogSize?: IDialogSize;
     stateListener: TDialogStateListenerCallbackType;
+    /**@deprecated use slot.loader instead */
     initialHolder: TInitialHolder;
     snackbarAnchor?: ISnackbarAnchor;
     dom: HTMLDivElement;
@@ -90,6 +91,7 @@ interface kSlot {
     action?: React.JSXElementConstructor<any>;
     footer?: React.JSXElementConstructor<any>;
     header?: React.JSXElementConstructor<any>;
+    loader?: React.JSXElementConstructor<any>;
 }
 interface kSlotProps {
     action?: {
@@ -98,6 +100,7 @@ interface kSlotProps {
     };
     footer?: Record<string, any>;
     header?: Record<string, any>;
+    loader?: Record<string, any>;
 }
 export interface IBaseDialogOptions {
     closeable?: boolean;
@@ -236,7 +239,7 @@ export interface IBackdropOptions {
     dimOnInactive?: boolean;
 }
 export type TNotifyOnClosing = "snackbar" | "zoom" | undefined;
-export type TInitialHolder = any;
+export type TInitialHolder = kSlot['loader'];
 export type TLoaderHolder = any;
 export interface IInProcess {
     inProcess: boolean;