react-dialogger 1.1.36 → 1.1.38

package/components/DialogActionBase.d.ts

@@ -2,7 +2,7 @@ import { Component } from "react";
 import DialogBase from "./DialogBase";
 import { ActionProps, ActionState, DialogActionType, TBVariant, TBColor, DialogActionOptionsType, TDialogStateListenerForActionCallbackType } from "../types/DialogActionTypes";
 declare class DialogActionBase extends Component<ActionProps, ActionState> {
-    get dialogBaseComponent(): DialogBase;
+    get dialogBaseComponent(): DialogBase<any>;
     protected _options: DialogActionOptionsType;
     _stateListener: TDialogStateListenerForActionCallbackType;
     protected _baseDialogAction?: DialogActionBase;

package/components/DialogBase.d.ts

@@ -8,7 +8,7 @@ import { IInProcess, ComponentOrderType, TInitialHolder, ISnackbarAnchor, Compon
 import { BaseDialogProps, BaseDialogState, IDialogSize, DialogOptionsType, TBaseDialogState, TDialogStateListenerCallbackType, IDialogDef, TDialogCallbackNodeFn, TDialogCallbackVoidFn } from "../types/DialogTypes";
 import Resizeable from "../models/Resizeable";
 export declare const DialogHeaderFooterContext: React.Context<any>;
-declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
+declare class DialogBase<Values extends Record<string, any>> extends Component<BaseDialogProps, BaseDialogState> {
     get parent(): Dialog;
     protected _dom: HTMLDivElement;
     protected _innerRef: React.RefObject<any>;
@@ -28,6 +28,7 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
     protected _dialogSize: IDialogSize;
     protected _holder?: TInitialHolder;
     protected _formikProps: FormikProps<any>;
+    /**@deprecated use outside Content component*/
     protected _dialogTranslate: {
         lastX: number;
         lastY: number;
@@ -48,6 +49,7 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
      * @see dialogOptions.snackbar.anchorOrigin */
     protected _snackbarAnchor: ISnackbarAnchor;
     protected _Resizeable: Resizeable;
+    /**@deprecated use outside Content component*/
     protected readonly dialogPosFromMultipleDialogs: BaseDialogDOMRect;
     private readonly _actionRefs;
     /**@deprecated
@@ -77,26 +79,26 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
     get formikProps(): FormikProps<any>;
     set formikProps(value: FormikProps<any>);
     get formikValidate(): Promise<FormikProps<any>>;
-    get values(): DialogValues;
-    setValues(values: DialogValues, callbackFn?: () => void): void;
-    setValue(key: string, values: any): void;
+    get values(): FormikProps<Values>;
+    setValues(values: FormikProps<Values>, callbackFn?: () => void): void;
+    setValue(key: string, value: any): void;
     private dialogAutoPos;
     componentDidMount(): void;
     onResize(callbackFn: (size: IDialogSize, dialog: IDialogDef) => void): 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;
-    setBody(body: TDialogCallbackNodeFn): DialogBase;
-    protected addActions(actions: Array<DialogAction>): DialogBase;
-    protected addAction(action: DialogAction): DialogBase;
-    stateListener(listener: TDialogStateListenerCallbackType): DialogBase;
-    protected keyboardListener(listener: (key: string, dialog: IDialogDef) => void): DialogBase;
-    protected resizeListener(listener: (size: IDialogSize, dialog: IDialogDef) => void): DialogBase;
-    processingListener(listener: (inProcess: boolean) => void): DialogBase;
-    protected initialHolder(holder: TInitialHolder): DialogBase;
-    protected onClose(callback: TDialogCallbackVoidFn): DialogBase;
-    setInProcess_noRef: (process: boolean, message?: string, holder?: TInitialHolder) => DialogBase;
-    setInProcess: (process: boolean, message?: string, holder?: TInitialHolder) => DialogBase;
+    protected setHeader(header: TDialogCallbackNodeFn): this;
+    setBody(body: TDialogCallbackNodeFn): this;
+    protected addActions(actions: Array<DialogAction>): this;
+    protected addAction(action: DialogAction): this;
+    stateListener(listener: TDialogStateListenerCallbackType): this;
+    protected keyboardListener(listener: (key: string, dialog: IDialogDef) => void): this;
+    protected resizeListener(listener: (size: IDialogSize, dialog: IDialogDef) => void): this;
+    processingListener(listener: (inProcess: boolean) => void): this;
+    protected initialHolder(holder: TInitialHolder): this;
+    protected onClose(callback: TDialogCallbackVoidFn): this;
+    setInProcess_noRef: (process: boolean, message?: string, holder?: TInitialHolder) => this;
+    setInProcess: (process: boolean, message?: string, holder?: TInitialHolder) => this;
     isInProcess: () => IInProcess;
     close: (callbackFn?: any) => void;
     focus: () => void;
@@ -110,7 +112,7 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
      * Please use an alternative approach for setting dialog ordering or layout.
      * The dialog ordering functionality will be managed differently in future versions.
      */
-    setOrder: (position: ComponentOrderPositions, component: HTMLElement) => DialogBase;
+    setOrder: (position: ComponentOrderPositions, component: HTMLElement) => this;
     getDom: () => HTMLDivElement;
     get snackbar(): {
         open: (message: string, severity: TSeverity, key?: string, action?: ((key: string, snackbarRef: any) => ReactNode | void), autoHideDuration?: number | null) => void;
@@ -124,6 +126,10 @@ declare class DialogBase extends Component<BaseDialogProps, BaseDialogState> {
         close: (key?: string) => void;
     };
     getSize: () => IDialogSize;
+    /**
+     * @deprecated
+     * use outside Content component
+     * */
     private baseZoomEffect;
     private withBackdrop;
     switchFullScreen: () => void;

package/components/DialogBase.js

@@ -65,6 +65,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogHeaderFooterContext = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+// import {JSX} from "react";
+// import {FormikProps} from "../types/FormikProps";
+var formik_1 = require("formik");
 var React = __importStar(require("react"));
 var react_draggable_1 = __importDefault(require("react-draggable"));
 var notistack_1 = require("notistack");
@@ -106,6 +109,7 @@ 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 };
@@ -311,8 +315,11 @@ var DialogBase = /** @class */ (function (_super) {
         _this.getSize = function () {
             return _this._dialogSize;
         };
+        /**
+         * @deprecated
+         * use outside Content component
+         * */
         _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
@@ -342,7 +349,7 @@ var DialogBase = /** @class */ (function (_super) {
                         return;
                     }
                     _this.baseZoomEffect();
-                }, children: _this.Content(body, header, actions) });
+                }, children: (0, jsx_runtime_1.jsx)(_this.Content, { body: body, header: header, actions: actions }) });
         };
         _this.switchFullScreen = function () {
             if (!_this.state.fullscreenMode) {
@@ -402,7 +409,8 @@ var DialogBase = /** @class */ (function (_super) {
             }
             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) {
+        _this.Body = function (_a) {
+            var body = _a.body;
             if (body instanceof Function) {
                 return (0, jsx_runtime_1.jsxs)("div", { ref: _this._dialogBodyRef, className: 'dialog-body', style: { height: '100%' }, children: [_this.Placeholder(_this._holder), body(_this)] });
             }
@@ -524,9 +532,16 @@ var DialogBase = /** @class */ (function (_super) {
                         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;
-            var _b, _c;
+        _this.Content = function (_a) {
+            var _b;
+            var _c, _d;
+            var body = _a.body, header = _a.header, actions = _a.actions;
+            _this._formikProps = (0, formik_1.useFormik)({
+                initialValues: _this._initialValues,
+                onSubmit: function (values, formikHelpers) {
+                    // No Necessary
+                }
+            });
             if (_this._dialogRef.current) {
                 // Öncelikle ref'i al ve input elemanlarını bul
                 var inputElements = _this._dialogRef.current.querySelectorAll("input");
@@ -573,10 +588,10 @@ 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: (_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) &&
+                    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) &&
                             (0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "resizable-handle", style: {
                                         zIndex: parseInt(domZIndex) + 1
-                                    }, onMouseDown: (_c = _this._Resizeable) === null || _c === void 0 ? void 0 : _c.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(ResizeIcon_1.default, { color: '#286e94' }) }) })] }) });
+                                    }, onMouseDown: (_d = _this._Resizeable) === null || _d === void 0 ? void 0 : _d.resizeHandleMouseDown, children: (0, jsx_runtime_1.jsx)(ResizeIcon_1.default, { color: '#286e94' }) }) })] }) });
         };
         _this.highestZ = function () {
             var presentationElements = document.querySelectorAll('div[data-family="presentation"]');
@@ -717,27 +732,40 @@ var DialogBase = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(DialogBase.prototype, "values", {
+        // get values(): DialogValues {
         get: function () {
-            return this.state.values;
+            var _a;
+            // return this.state.values;
+            return (_a = this._formikProps) === null || _a === void 0 ? void 0 : _a.values;
         },
         enumerable: false,
         configurable: true
     });
     DialogBase.prototype.setValues = function (values, callbackFn) {
-        var prevValues = __assign({}, this.state.values);
-        // this.setState( prevState => ({...prevState, values: {...prevValues, ...values}}) );
-        this.setState(function (prevState) { return (__assign(__assign({}, prevState), { values: __assign(__assign({}, prevValues), values) })); }, function () {
-            if (typeof callbackFn === 'function') {
-                callbackFn();
-            }
-        });
+        var _a;
+        // const prevValues = {...this.state.values};
+        //
+        //
+        // // this.setState( prevState => ({...prevState, values: {...prevValues, ...values}}) );
+        // this.setState((prevState) => ({
+        //     ...prevState,
+        //     values: {...prevValues, ...values}
+        // }), () => {
+        //     if( typeof callbackFn === 'function' ){
+        //         callbackFn();
+        //     }
+        // });
+        (_a = this._formikProps) === null || _a === void 0 ? void 0 : _a.setValues(values);
     };
-    DialogBase.prototype.setValue = function (key, values) {
-        this.setState(function (prevState) {
-            var clonedVal = __assign({}, prevState.values);
-            clonedVal[key] = values;
-            return __assign(__assign({}, prevState), { values: clonedVal });
-        });
+    DialogBase.prototype.setValue = function (key, value) {
+        var _a;
+        // this.setState( prevState => {
+        //
+        //     const clonedVal = {...prevState.values};
+        //     clonedVal[key] = values;
+        //     return {...prevState, values: clonedVal}
+        // });
+        (_a = this._formikProps) === null || _a === void 0 ? void 0 : _a.setFieldValue(key, value);
     };
     DialogBase.prototype.componentDidMount = function () {
         var _this = this;
@@ -994,16 +1022,16 @@ var DialogBase = /** @class */ (function (_super) {
         this._dom.setAttribute('data-family', 'presentation');
         this._dom.classList.add('appinsource-dialog-root');
         this._dom.style.setProperty('z-index', String(this.highestZ()));
-        // // Find root element
-        // const rootElement = document.getElementById('root');
-        // // const AppElement = rootElement.firstElementChild;
-        // if (rootElement) {
-        //     rootElement.appendChild(this._dom);
-        //     // AppElement.prepend(this._dom);
-        // } else {
-        //     document.body.appendChild(this._dom);
-        // }
-        document.body.appendChild(this._dom);
+        // Find root element
+        var rootElement = document.getElementById('root');
+        // const AppElement = rootElement.firstElementChild;
+        if (rootElement) {
+            rootElement.appendChild(this._dom);
+            // AppElement.prepend(this._dom);
+        }
+        else {
+            document.body.appendChild(this._dom);
+        }
         var root = (0, client_1.createRoot)(this._dom);
         var props = {
             ref: this._innerRef,

package/components/DialogContent.js

@@ -0,0 +1,181 @@
+// 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>
+// }

package/models/Dialog.d.ts

@@ -4,7 +4,7 @@ import DialogBase from "../components/DialogBase";
 import { TInitialHolder, TAccessFrom, ComponentOrderPositions, ISnackbarAnchor, DialogValues } from "../types/types";
 import { IDialogSize, TDialogStateListenerCallbackType, DialogOptionsType, IDialogDef, TDialogCallbackNodeFn, TDialogCallbackVoidFn } from "../types/DialogTypes";
 import { FormikProps } from "formik";
-declare class Dialog extends DialogBase {
+declare class Dialog extends DialogBase<any> {
     constructor(dialogRef?: React.RefObject<IDialogDef | undefined | null> | null, options?: DialogOptionsType);
     /**
      * @deprecated

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dialogger",
-  "version": "1.1.36",
+  "version": "1.1.38",
   "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/DialogActionTypes.d.ts

@@ -19,7 +19,7 @@ export interface ActionProps {
      * @see options.label */
     label?: string;
     onClick: DialogActionType;
-    dialogBaseComponent: DialogBase;
+    dialogBaseComponent: DialogBase<any>;
     /**
      * @deprecated
      * @see options.variant */

package/types/DialogTypes.d.ts

@@ -34,8 +34,8 @@ export interface BaseDialogProps {
     parent?: Dialog;
     onClose?: TDialogCallbackVoidFn;
     root?: any;
-    keyboardListener: (key: string, dialog: Dialog) => void;
-    resizeListener?: (size: IDialogSize, dialog: Dialog) => void;
+    keyboardListener: (key: string, dialog: IDialogDef) => void;
+    resizeListener?: (size: IDialogSize, dialog: IDialogDef) => void;
 }
 export interface IDialogSize {
     width?: ITypeWidth | number;
@@ -123,12 +123,12 @@ export type TDialogStateListenerCallbackType = (state: IStateDef, values: Dialog
 type TDialogCallbackFn<T> = (dialog?: IDialogDef) => T;
 export type TDialogCallbackNodeFn = TDialogCallbackFn<string | React.ReactElement<any>> | React.ReactNode | React.JSX.Element;
 export type TDialogCallbackVoidFn = TDialogCallbackFn<void>;
-export interface IDialogDef extends Omit<Partial<Pick<DialogBase, 'isInProcess' | 'setInProcess' | 'values' | 'setValue' | 'setValues' | 'close' | 'dialogOptions' | 'switchFullScreen' | 'actions' | 'snackbar' | 'formikValidate' | 'formikProps' | 'focus' | 'setOrder' | 'setBody' | 'onResize' | 'processingListener'>>, 'switchFullScreen'> {
+export interface IDialogDef extends Omit<Partial<Pick<DialogBase<any>, 'isInProcess' | 'setInProcess' | 'values' | 'setValue' | 'setValues' | 'close' | 'dialogOptions' | 'switchFullScreen' | 'actions' | 'snackbar' | 'formikValidate' | 'formikProps' | 'focus' | 'setOrder' | 'setBody' | 'onResize' | 'processingListener'>>, 'switchFullScreen'> {
     /** @deprecated Deprecated, use setValues instead. */
-    switchFullScreen?: DialogBase['switchFullScreen'];
+    switchFullScreen?: DialogBase<any>['switchFullScreen'];
     /** @deprecated Deprecated, never use. */
-    setOrder?: DialogBase['setOrder'];
+    setOrder?: DialogBase<any>['setOrder'];
 }
-export interface IDialogCloseRef extends Pick<DialogBase, 'close'> {
+export interface IDialogCloseRef extends Pick<DialogBase<any>, 'close'> {
 }
 export {};