react-dialogger 1.1.117 → 1.1.119

package/README.md

@@ -3,6 +3,9 @@
 npm i react-dialogger
 ```
 
+Please use 
+
+
 # GitHub
 You can find the example code and more information about the project on our [GitHub repository](https://github.com/appinsource2021/react-dialogger-example.git).
 
@@ -12,6 +15,83 @@ You can find the example code about the project on our [Codesandbox](https://cod
 # Youtube
 You can watch simple example on Youtube [Youtube](https://www.youtube.com/watch?v=vhSroEgdj1c)
 
+#### ⚠️ Breaking Change: initialValues Scope Restriction
+` In previous versions, initialValues, setValue, and setValues were able to store any type of data, including:
+Functions
+Object references
+Component refs
+Arbitrary complex objects
+This behavior has changed in the latest version.`
+
+#### ✅ New Behavior
+`initialValues now only supports serializable key–value data, such as:
+Primitive values
+Plain objects
+Arrays
+Collections that represent form/state data
+Methods, functions, class instances, and object references are no longer supported in initialValues.
+This change improves:
+Predictability
+State safety
+Serialization compatibility
+Debugging and maintainability`
+
+#### 🔌 How to Pass Methods and References
+ * To pass methods or object references, use the new inject API.
+### Injection Example
+```js
+dialog.inject({
+  myMethod,
+  myRef
+});
+```
+
+#### Accessing Injected Dependencies
+* Injected dependencies are available via dialog.deps:
+```js
+show(dialog => {
+  dialog.deps.myMethod('Suleyman');
+  dialog.deps.myRef.current;
+});
+
+```
+
+#### 🧠 Design Principle
+    * State (initialValues) → data only
+    * Behavior & references → dependency injection (inject)
+    * This separation enforces a clean architecture and prevents unintended side effects.
+
+
+#### ❌ Invalid Usage (No Longer Supported)
+```js
+initialValues: {
+  onSubmit: () => {},
+  tableRef: ref,
+}
+```
+#### ✅ Correct Usage
+```js
+initialValues: {
+  status: 'active',
+  items: []
+}
+
+dialog.inject({
+  onSubmit,
+  tableRef
+});
+```
+
+#### 🚀 Migration Guide
+`If you were previously storing functions or references inside initialValues:
+Remove them from initialValues
+Register them via dialog.inject(...)
+Access them using dialog.deps.*`
+
+
+
+
+
 # Why react-dialogger?
 > react-dialogger is built for React applications that need dynamic, runtime-managed dialogs rather than static JSX-based modals.
 It enables centralized dialog configuration, action-driven logic, and dialog-owned state, making complex dialog flows easier to manage and scale.

package/components/DialogBase.d.ts

@@ -22,7 +22,7 @@ declare class DialogBase<V, I> extends Component<BaseDialogProps<V, I>, BaseDial
     protected _formikProps: FormikProps<any>;
     protected readonly _backdropRef: RefObject<any>;
     protected readonly _dialogRef: RefObject<any>;
-    protected readonly _dialogBodyRef: RefObject<any>;
+    protected readonly _bodyRef: RefObject<any>;
     protected readonly _snackbarRef: WithBackdrop['snackbarRef'];
     protected _dialogOptions?: DialogOptionsType;
     protected _onClose: TDialogCallbackFn<V, I, void>;
@@ -60,6 +60,7 @@ declare class DialogBase<V, I> extends Component<BaseDialogProps<V, I>, BaseDial
     set inlineFormikProps(inlineFormikProps: IFormikAdapter);
     setValues<T>(values: Dialogify<T>, callbackFn?: () => void): void;
     componentDidMount(): void;
+    componentWillUnmount(): void;
     setInProcess: (process: boolean, message?: string, holder?: TInitialHolder) => this;
     isInProcess: () => IInProcess;
     private kill;

package/components/DialogBase.js

@@ -86,7 +86,7 @@ var DialogBase = /** @class */ (function (_super) {
             return _this._actionRefs[key];
         };
         _this.setInProcess = function (process, message, holder) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             _this._inProcess = __assign({ inProcess: process }, message ? { message: message } : {});
             if (!process) {
                 _this._holder = null;
@@ -104,8 +104,7 @@ var DialogBase = /** @class */ (function (_super) {
                         var currentDisabled = (_d = (_c = action.current) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.disabled;
                         // Set the options with prevDisabled as the current disabled state
                         if (currentDisabled !== process) {
-                            action.current
-                                .updateOptions(__assign(__assign({}, (_f = (_e = action.current) === null || _e === void 0 ? void 0 : _e.options) !== null && _f !== void 0 ? _f : {}), { prevDisabled: currentDisabled, disabled: process // Set the new disabled state based on the process
+                            action === null || action === void 0 ? void 0 : action.current.updateOptions(__assign(__assign({}, (_f = (_e = action.current) === null || _e === void 0 ? void 0 : _e.options) !== null && _f !== void 0 ? _f : {}), { prevDisabled: currentDisabled, disabled: process // Set the new disabled state based on the process
                              }));
                         }
                     }
@@ -123,8 +122,8 @@ var DialogBase = /** @class */ (function (_super) {
             if (!process) {
                 _this.snackbar.close("kInProcess");
             }
-            for (var _i = 0, _m = _this._processingListeners; _i < _m.length; _i++) {
-                var listener = _m[_i];
+            for (var _i = 0, _o = _this._processingListeners; _i < _o.length; _i++) {
+                var listener = _o[_i];
                 if (typeof listener === "function") {
                     listener(process);
                 }
@@ -133,6 +132,7 @@ var DialogBase = /** @class */ (function (_super) {
             // @ts-ignore
             (_k = _this._footerRef.current) === null || _k === void 0 ? void 0 : _k.setProcessing(_this._inProcess);
             (_l = _this._headerRef.current) === null || _l === void 0 ? void 0 : _l.setProcessing(_this._inProcess);
+            (_m = _this._bodyRef.current) === null || _m === void 0 ? void 0 : _m.setProcessing(_this._inProcess);
             // this._footerRef.current?.setProcessing(process);
             return _this;
         };
@@ -154,7 +154,7 @@ var DialogBase = /** @class */ (function (_super) {
             };
             setTimeout(function () {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-                if (((_b = (_a = _this._footerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.inProcess) && !_this.state.aborted) {
+                if (((_b = (_a = _this._footerRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.inProcess.inProcess) && !_this.state.aborted) {
                     var notify = (_e = (_d = (_c = _this._dialogOptions) === null || _c === void 0 ? void 0 : _c.base) === null || _d === void 0 ? void 0 : _d.notifyOnClosing) !== null && _e !== void 0 ? _e : "snackbar";
                     if (notify === "snackbar") {
                         var busyMessage = (_h = (_g = (_f = _this._dialogOptions) === null || _f === void 0 ? void 0 : _f.localText) === null || _g === void 0 ? void 0 : _g.busyMessage) !== null && _h !== void 0 ? _h : 'In Process, Please wait...';
@@ -192,7 +192,7 @@ var DialogBase = /** @class */ (function (_super) {
                 // Component
                 body: _this.state.body, 
                 // Refs Props
-                dialogRef: _this._dialogRef, headerRef: _this._headerRef, bodyRef: _this._dialogBodyRef, footerRef: _this._footerRef, backdropRef: _this._backdropRef, snackbarRef: _this._snackbarRef, prevDialogRect: _this.state.prevDialogRect, children: (0, jsx_runtime_1.jsx)(_components_1.DialogWithBackdropWrapper, {}) });
+                dialogRef: _this._dialogRef, headerRef: _this._headerRef, bodyRef: _this._bodyRef, footerRef: _this._footerRef, backdropRef: _this._backdropRef, snackbarRef: _this._snackbarRef, prevDialogRect: _this.state.prevDialogRect, children: (0, jsx_runtime_1.jsx)(_components_1.DialogWithBackdropWrapper, {}) });
         };
         // this.inject(props.inject);
         _this.state = {
@@ -236,7 +236,7 @@ var DialogBase = /** @class */ (function (_super) {
         _this._actions = props.actions;
         _this._backdropRef = React.createRef();
         _this._dialogRef = React.createRef();
-        _this._dialogBodyRef = React.createRef();
+        _this._bodyRef = React.createRef();
         _this._inProcess = { inProcess: false };
         _this._snackbarRef = React.createRef();
         _this._holder = props.initialHolder;
@@ -375,6 +375,9 @@ var DialogBase = /** @class */ (function (_super) {
         // accessFrom Property of Parent object Internal->External
         this.accessFrom = "internal";
     };
+    DialogBase.prototype.componentWillUnmount = function () {
+        console.log('componentWillUnmount');
+    };
     DialogBase.prototype.kill = function (callbackFn) {
         var _this = this;
         // ReactDOM.unmountComponentAtNode(this.props.dom);

package/components/DialogContent.js

@@ -74,7 +74,7 @@ var appLogger_1 = require("../helpers/appLogger");
 var DialogContent = function (props) {
     var _a, _b, _c, _d, _e, _f, _g;
     var firstUpdate = React.useRef(true);
-    var _h = (0, react_1.useContext)(_context_1.DialogContentContext), dialog = _h.dialog, dialogRef = _h.dialogRef, prevDialogRect = _h.prevDialogRect, backdropRef = _h.backdropRef, snackbarRef = _h.snackbarRef, footerRef = _h.footerRef, headerRef = _h.headerRef, resizeableObject = _h.resizeableObject, body = _h.body;
+    var _h = (0, react_1.useContext)(_context_1.DialogContentContext), dialog = _h.dialog, dialogRef = _h.dialogRef, prevDialogRect = _h.prevDialogRect, backdropRef = _h.backdropRef, snackbarRef = _h.snackbarRef, footerRef = _h.footerRef, bodyRef = _h.bodyRef, headerRef = _h.headerRef, resizeableObject = _h.resizeableObject, body = _h.body;
     var dialogOptions = dialog.dialogOptions;
     var baseOptions = dialogOptions.base;
     var _j = React.useState(false), fullscreenMode = _j[0], setFullscreenMode = _j[1];
@@ -177,7 +177,7 @@ 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: (_b = baseOptions.size.height) !== null && _b !== void 0 ? _b : 'auto' }, typeof baseOptions.size.width === "number" ? { width: "".concat(baseOptions.size.width, "px") } : { width: "".concat(baseOptions.size.width) }), { outline: 'none', fontFamily: (_c = baseOptions.style.fontFamily) !== null && _c !== void 0 ? _c : 'Arial' }), rect), { alignSelf: (_d = baseOptions.initialAnchor.vertical) !== null && _d !== void 0 ? _d : 'flex-start', justifySelf: (_e = baseOptions.initialAnchor.horizontal) !== null && _e !== void 0 ? _e : 'flex-start' }), children: (0, jsx_runtime_1.jsxs)(notistack_1.SnackbarProvider, { ref: snackbarRef, maxSnack: dialog.dialogOptions.snackbar.maxSnack, style: __assign({ width: 'min-content' }, (_g = (_f = dialog.dialogOptions) === null || _f === void 0 ? void 0 : _f.snackbar) === null || _g === void 0 ? void 0 : _g.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, { body: body }), (0, jsx_runtime_1.jsx)(_1.DialogContentFooter, { ref: footerRef }), (baseOptions.resizeable) &&
+            }, 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: (_b = baseOptions.size.height) !== null && _b !== void 0 ? _b : 'auto' }, typeof baseOptions.size.width === "number" ? { width: "".concat(baseOptions.size.width, "px") } : { width: "".concat(baseOptions.size.width) }), { outline: 'none', fontFamily: (_c = baseOptions.style.fontFamily) !== null && _c !== void 0 ? _c : 'Arial' }), rect), { alignSelf: (_d = baseOptions.initialAnchor.vertical) !== null && _d !== void 0 ? _d : 'flex-start', justifySelf: (_e = baseOptions.initialAnchor.horizontal) !== null && _e !== void 0 ? _e : 'flex-start' }), children: (0, jsx_runtime_1.jsxs)(notistack_1.SnackbarProvider, { ref: snackbarRef, maxSnack: dialog.dialogOptions.snackbar.maxSnack, style: __assign({ width: 'min-content' }, (_g = (_f = dialog.dialogOptions) === null || _f === void 0 ? void 0 : _f.snackbar) === null || _g === void 0 ? void 0 : _g.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' }) }) })] }) }) });

package/components/DialogContentBody.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { TDialogCallbackFn } from "../types/index.js";
+import { DialogContentBodyReturnType, TDialogCallbackFn } from "../types/index.js";
 interface IContentBodyProps {
     body: TDialogCallbackFn<any, any>;
 }
-declare const DialogContentBody: React.FC<IContentBodyProps>;
+declare const DialogContentBody: React.ForwardRefExoticComponent<IContentBodyProps & React.RefAttributes<DialogContentBodyReturnType>>;
 export { DialogContentBody };

package/components/DialogContentBody.js

@@ -50,9 +50,23 @@ var Placeholder = function (_a) {
             display: placeholder ? 'flex' : 'none',
         }, children: placeholder });
 };
+// const DialogContentBody: React.FC<IContentBodyProps> = React.forwardRef(({
+//         body
+// }, ref ) => {
 var DialogContentBody = React.forwardRef(function (_a, ref) {
     var body = _a.body;
     var dialog = (0, react_1.useContext)(_context_1.DialogContentContext).dialog;
+    // Imperative handle
+    var _b = React.useState({
+        inProcess: false
+    }), inProcess = _b[0], setInProcess = _b[1];
+    var setProcessing = function (processing) {
+        setInProcess(processing);
+    };
+    React.useImperativeHandle(ref, function () { return ({
+        setProcessing: setProcessing,
+        inProcess: inProcess
+    }); });
     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)] });
     }

package/package.json

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

@@ -52,6 +52,10 @@ export interface BaseDialogProps<V extends Record<string, any>, I> {
     processingListeners?: Array<(inProcess: boolean) => void>;
     abortedListeners?: Array<(dialog: IDialogApiDef<V, I>) => void>;
 }
+export interface DialogContentBodyReturnType {
+    setProcessing: React.Dispatch<React.SetStateAction<InProcessType>>;
+    inProcess: InProcessType;
+}
 export interface IDialogSize {
     width?: ITypeWidth | number;
     height?: ITypeHeight | number;
@@ -212,6 +216,7 @@ export interface IContentProps {
     snackbarRef: WithBackdrop['snackbarRef'];
 }
 import { TSnackbarHorizontal, TSnackbarVertical, TFlexPos } from "./SizePosTypes";
+import { InProcessType } from "./DialogActionTypes";
 export interface ISnackbarAnchor {
     vertical?: TSnackbarVertical;
     horizontal?: TSnackbarHorizontal;