dynamic-modal 1.1.8 → 1.1.10

package/dist/components/portal/portal.js

@@ -16,13 +16,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Portal = void 0;
 const react_1 = __importStar(require("react"));
@@ -48,8 +58,8 @@ const Portal = (props) => {
             setMounted(true);
         }
     }, [mounted, props.closeTime, props.portalOpen, props.portalTag]);
-    return (mounted && ref.current
-        ? (0, react_dom_1.createPortal)(react_1.default.createElement("div", { className: 'transition-all delay-100 fixed top-0 left-0 w-full h-full grid place-items-center bg-black bg-opacity-40 z-20' }, props.children), ref.current)
-        : null);
+    if (!mounted && !ref.current)
+        return null;
+    return (0, react_dom_1.createPortal)(react_1.default.createElement("div", { className: "transition-all delay-100 fixed top-0 left-0 w-full h-full grid place-items-center bg-black bg-opacity-40 z-20" }, props.children), ref.current);
 };
 exports.Portal = Portal;

package/dist/context/component/component-state.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { IComponentState, IComponentStateProps } from "../../interfaces/component-state";
+import React from 'react';
+import { IComponentState, IComponentStateProps } from '../../interfaces/component-state';
 export declare const ComponentStateContext: React.Context<IComponentState>;
-export declare const ComponentState: ({ children, components }: IComponentStateProps) => React.JSX.Element;
+export declare const ComponentState: ({ children, components, }: IComponentStateProps) => React.JSX.Element;

package/dist/context/component/component-state.js

@@ -16,20 +16,29 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentState = exports.ComponentStateContext = void 0;
 const react_1 = __importStar(require("react"));
-const react_2 = require("react");
-exports.ComponentStateContext = (0, react_2.createContext)({});
-const ComponentState = ({ children, components }) => {
-    const value = (0, react_1.useMemo)(() => components, []);
+exports.ComponentStateContext = (0, react_1.createContext)({});
+const ComponentState = ({ children, components, }) => {
+    const value = (0, react_1.useMemo)(() => components, [components]);
     return (react_1.default.createElement(exports.ComponentStateContext.Provider, { value: value }, children));
 };
 exports.ComponentState = ComponentState;

package/dist/hooks/use-enable-if.d.ts

@@ -0,0 +1,9 @@
+import { IModalRenderCondition } from '../interfaces/modal';
+export interface IRenderIfProps {
+    elementEnableIf?: IModalRenderCondition;
+}
+declare const useEnableIf: ({ elementEnableIf }: IRenderIfProps) => {
+    enable: boolean;
+    checkEnable: (formData: Record<string, unknown>, { name }: Record<"name", string> & Record<"type", string | undefined>) => Promise<void>;
+};
+export default useEnableIf;

package/dist/hooks/use-enable-if.js

@@ -0,0 +1,45 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const general_util_1 = require("../util/general/general.util");
+const useEnableIf = ({ elementEnableIf }) => {
+    const [enable, setEnable] = (0, react_1.useState)(() => {
+        return elementEnableIf === undefined;
+    });
+    const checkEnable = (formData_1, _a) => __awaiter(void 0, [formData_1, _a], void 0, function* (formData, { name }) {
+        const targetFieldData = formData[name];
+        if (targetFieldData === undefined ||
+            targetFieldData === '' ||
+            targetFieldData === null)
+            return;
+        const enableIfConfig = elementEnableIf;
+        const isLiveEnable = !!(enableIfConfig === null || enableIfConfig === void 0 ? void 0 : enableIfConfig.action) && !!enableIfConfig.condition;
+        if (isLiveEnable && enableIfConfig.condition.includes(name)) {
+            const enableStatus = yield (0, general_util_1.liveDataHandler)(targetFieldData, formData, enableIfConfig.action);
+            if (enable !== enableStatus)
+                setEnable(enableStatus);
+        }
+        else {
+            const enableConditionList = Object.keys(elementEnableIf);
+            if (enableConditionList.includes(name)) {
+                const enableStatus = enableIfConfig[name].includes(targetFieldData) || enableIfConfig[name].includes('*');
+                if (enable !== enableStatus)
+                    setEnable(enableStatus);
+            }
+        }
+    });
+    return {
+        enable,
+        checkEnable,
+    };
+};
+exports.default = useEnableIf;

package/dist/hooks/use-live-data.d.ts

@@ -0,0 +1,14 @@
+import { FieldValues, UseFormSetValue } from 'react-hook-form';
+import { IModalLiveDataCondition } from '../interfaces/modal';
+import { IOption } from '../interfaces/option';
+export interface ILiveDataProps {
+    elementName: string;
+    elementLiveData?: IModalLiveDataCondition;
+    setValue: UseFormSetValue<FieldValues>;
+}
+declare const useLiveData: ({ elementName, elementLiveData, setValue, }: ILiveDataProps) => {
+    liveSearching: boolean;
+    liveData: IOption[] | undefined;
+    checkLiveData: (formData: Record<string, unknown>, { name }: Record<"name", string> & Record<"type", string | undefined>) => Promise<void>;
+};
+export default useLiveData;

package/dist/hooks/use-live-data.js

@@ -0,0 +1,42 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const general_util_1 = require("../util/general/general.util");
+const useLiveData = ({ elementName, elementLiveData, setValue, }) => {
+    const [liveSearching, setLiveSearching] = (0, react_1.useState)(false);
+    const [liveData, setLiveData] = (0, react_1.useState)(undefined);
+    const checkLiveData = (formData_1, _a) => __awaiter(void 0, [formData_1, _a], void 0, function* (formData, { name }) {
+        var _b;
+        const targetFieldData = formData[name];
+        if (targetFieldData === undefined ||
+            targetFieldData === '' ||
+            targetFieldData === null)
+            return;
+        const liveDataConfig = elementLiveData;
+        const isLiveData = !!(liveDataConfig === null || liveDataConfig === void 0 ? void 0 : liveDataConfig.action) && !!liveDataConfig.condition;
+        if (!isLiveData)
+            return;
+        if (liveDataConfig.condition.includes(name)) {
+            setLiveSearching(true);
+            const options = (_b = (yield (0, general_util_1.liveDataAction)(targetFieldData, formData, liveDataConfig.action))) !== null && _b !== void 0 ? _b : [];
+            setValue(elementName, options);
+            setLiveData(options);
+            setLiveSearching(false);
+        }
+    });
+    return {
+        liveSearching,
+        liveData,
+        checkLiveData,
+    };
+};
+exports.default = useLiveData;

package/dist/hooks/use-render-if.d.ts

@@ -0,0 +1,12 @@
+import { IModalRenderCondition } from '../interfaces/modal';
+import { FieldValues, UseFormUnregister } from 'react-hook-form';
+export interface IRenderIfProps {
+    elementName: string;
+    elementRenderIf?: IModalRenderCondition;
+    unregister: UseFormUnregister<FieldValues>;
+}
+declare const useRenderIf: ({ elementName, elementRenderIf, unregister, }: IRenderIfProps) => {
+    render: boolean;
+    checkRender: (formData: Record<string, unknown>, { name }: Record<"name", string> & Record<"type", string | undefined>) => Promise<void>;
+};
+export default useRenderIf;

package/dist/hooks/use-render-if.js

@@ -0,0 +1,51 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const general_util_1 = require("../util/general/general.util");
+const useRenderIf = ({ elementName, elementRenderIf, unregister, }) => {
+    const [render, setRender] = (0, react_1.useState)(() => {
+        return elementRenderIf === undefined;
+    });
+    const checkRender = (formData_1, _a) => __awaiter(void 0, [formData_1, _a], void 0, function* (formData, { name }) {
+        const targetFieldData = formData[name];
+        if (targetFieldData === undefined ||
+            targetFieldData === '' ||
+            targetFieldData === null)
+            return;
+        const renderIfConfig = elementRenderIf;
+        const isLiveRender = !!(renderIfConfig === null || renderIfConfig === void 0 ? void 0 : renderIfConfig.action) && !!(renderIfConfig === null || renderIfConfig === void 0 ? void 0 : renderIfConfig.condition);
+        if (isLiveRender && renderIfConfig.condition.includes(name)) {
+            const renderStatus = yield (0, general_util_1.liveDataHandler)(targetFieldData, formData, renderIfConfig.action);
+            if (render !== renderStatus) {
+                if (render && !renderStatus)
+                    unregister(elementName);
+                setRender(renderStatus);
+            }
+        }
+        else {
+            const renderConditionList = Object.keys(elementRenderIf);
+            if (renderConditionList.includes(name)) {
+                const renderStatus = renderIfConfig[name].includes(targetFieldData) || renderIfConfig[name].includes('*');
+                if (render !== renderStatus) {
+                    if (render && !renderStatus)
+                        unregister(elementName);
+                    setRender(renderStatus);
+                }
+            }
+        }
+    });
+    return {
+        render,
+        checkRender,
+    };
+};
+exports.default = useRenderIf;

package/dist/interfaces/component-state.d.ts

@@ -1,11 +1,11 @@
-import { FC, PropsWithChildren } from "react";
-import { FieldError } from "react-hook-form";
-import { IOption } from "./option";
-import { IMakeInput } from "./make-input";
-import { IMakeButton } from "./make-button";
-import { IMakeSelect } from "./make-select";
-import { IMakeTextarea } from "./make-textarea";
-import { IMakeToggle } from "./make-toggle";
+import { FC, PropsWithChildren } from 'react';
+import { FieldError } from 'react-hook-form';
+import { IOption } from './option';
+import { IMakeInput } from './make-input';
+import { IMakeButton } from './make-button';
+import { IMakeSelect } from './make-select';
+import { IMakeTextarea } from './make-textarea';
+import { IMakeToggle } from './make-toggle';
 export interface IComponentAditionalProps {
     onChange: (...event: any[]) => void;
     value: any;

package/dist/interfaces/modal.d.ts

@@ -10,10 +10,12 @@ import { IOption } from './option';
 import { IMakeButton } from './make-button';
 export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeDescription | IMakeUpload | IMakeButton;
 export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle;
-export type IModalRenderCondition = {
+export interface IModalRenderAction {
     action: (data: string, ...args: any[]) => Promise<boolean>;
     condition: Array<string>;
-};
+}
+export type IModalRenderCriteria = Record<string, Array<string | number | boolean> | undefined>;
+export type IModalRenderCondition = IModalRenderAction | IModalRenderCriteria;
 export type IModalLiveDataCondition = {
     action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
     condition: Array<string>;

package/dist/modal.js

@@ -16,13 +16,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -63,7 +73,7 @@ const Modal = ({ open, close, config }) => {
     const { ModalButtonAction, ModalButtonCancel } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
     const [modalReady, setModalReady] = (0, react_1.useState)(undefined);
     const [defaultLoaded, setDefaultLoaded] = (0, react_1.useState)(false);
-    const { control, handleSubmit, getValues, unregister, setValue, watch, trigger, getFieldState } = (0, react_hook_form_1.useForm)();
+    const { control, handleSubmit, getValues, unregister, setValue, watch, trigger, getFieldState, } = (0, react_hook_form_1.useForm)();
     const formValueHandler = (element) => {
         var _a;
         if (['group', 'upload', 'text'].includes(element.elementType))
@@ -73,18 +83,22 @@ const Modal = ({ open, close, config }) => {
             return;
         }
         const defaultValue = (_a = element.defaultValue) !== null && _a !== void 0 ? _a : '';
-        const parsedValue = defaultValue === 'true' ? true : defaultValue === 'false' ? false : defaultValue;
+        const parsedValue = defaultValue === 'true'
+            ? true
+            : defaultValue === 'false'
+                ? false
+                : defaultValue;
         setValue(element.name, parsedValue !== null && parsedValue !== void 0 ? parsedValue : '');
     };
     const autoLoadGroup = (groupFields) => {
-        groupFields.forEach(element => {
+        groupFields.forEach((element) => {
             formValueHandler(element);
         });
     };
     const autoLoadField = (modalFields) => {
         if (defaultLoaded)
             return;
-        modalFields.forEach(element => {
+        modalFields.forEach((element) => {
             if (element.elementType === 'group') {
                 autoLoadGroup(element.groups);
                 return;
@@ -94,7 +108,11 @@ const Modal = ({ open, close, config }) => {
         setDefaultLoaded(true);
     };
     const getUseSubmit = (modalConfig) => {
-        const useSubmit = modalConfig.useSubmit === undefined ? true : modalConfig.useSubmit === false ? false : true;
+        const useSubmit = modalConfig.useSubmit === undefined
+            ? true
+            : modalConfig.useSubmit === false
+                ? false
+                : true;
         return useSubmit;
     };
     const getRender = (_a, index, isEndOfRender) => {
@@ -106,23 +124,9 @@ const Modal = ({ open, close, config }) => {
             control,
             watch,
             setValue,
-            unregister
+            unregister,
         };
-        return elementType === 'input'
-            ? react_1.default.createElement(make_input_1.default, Object.assign({}, props, { key: `modal-input-${index}`, element: element }))
-            : elementType === 'select'
-                ? react_1.default.createElement(make_select_1.default, Object.assign({}, props, { key: `modal-select-${index}`, element: element }))
-                : elementType === 'textarea'
-                    ? react_1.default.createElement(make_textarea_1.default, Object.assign({}, props, { key: `modal-textarea-${index}`, element: element }))
-                    : elementType === 'toggle'
-                        ? react_1.default.createElement(make_toggle_1.default, Object.assign({}, props, { key: `modal-toggle-${index}`, element: element }))
-                        : elementType === 'text'
-                            ? react_1.default.createElement(make_description_1.default, Object.assign({}, props, { key: `modal-text-${index}`, element: element }))
-                            : elementType === 'upload'
-                                ? react_1.default.createElement(make_upload_1.default, Object.assign({}, props, { key: `modal-upload-${index}`, element: element }))
-                                : elementType === 'button'
-                                    ? react_1.default.createElement(make_button_1.default, Object.assign({}, props, { key: `modal-button-${index}`, element: element }))
-                                    : null;
+        return elementType === 'input' ? (react_1.default.createElement(make_input_1.default, Object.assign({}, props, { key: `modal-input-${index}`, element: element }))) : elementType === 'select' ? (react_1.default.createElement(make_select_1.default, Object.assign({}, props, { key: `modal-select-${index}`, element: element }))) : elementType === 'textarea' ? (react_1.default.createElement(make_textarea_1.default, Object.assign({}, props, { key: `modal-textarea-${index}`, element: element }))) : elementType === 'toggle' ? (react_1.default.createElement(make_toggle_1.default, Object.assign({}, props, { key: `modal-toggle-${index}`, element: element }))) : elementType === 'text' ? (react_1.default.createElement(make_description_1.default, Object.assign({}, props, { key: `modal-text-${index}`, element: element }))) : elementType === 'upload' ? (react_1.default.createElement(make_upload_1.default, Object.assign({}, props, { key: `modal-upload-${index}`, element: element }))) : elementType === 'button' ? (react_1.default.createElement(make_button_1.default, Object.assign({}, props, { key: `modal-button-${index}`, element: element }))) : null;
     };
     const closeHandler = () => {
         if (modalReady === null || modalReady === void 0 ? void 0 : modalReady.onClose)
@@ -140,11 +144,13 @@ const Modal = ({ open, close, config }) => {
         const form = getValues();
         const fields = Object.keys(form);
         yield trigger(fields);
-        const validations = fields.map(field => {
+        const validations = fields.map((field) => {
             const { invalid } = getFieldState(field);
             return invalid;
         });
-        const result = validations.some(isInvalid => isInvalid) ? undefined : form;
+        const result = validations.some((isInvalid) => isInvalid)
+            ? undefined
+            : form;
         if (!result)
             return;
         actionHandler(Object.assign(Object.assign({}, ((_a = modalReady === null || modalReady === void 0 ? void 0 : modalReady.reservedData) !== null && _a !== void 0 ? _a : {})), form));
@@ -158,34 +164,40 @@ const Modal = ({ open, close, config }) => {
         if (open && !modalReady)
             setModalReady(config);
     }, [config, modalReady, open]);
-    return (modalReady
-        ? react_1.default.createElement(portal_1.Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal' },
-            react_1.default.createElement("div", { className: 'rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]', style: modalReady.style },
-                react_1.default.createElement("form", { className: 'flex flex-col p-4 gap-4', autoComplete: 'off', onSubmit: handleSubmit(actionHandler) },
-                    react_1.default.createElement("h2", { className: 'text-bold text-center border-b pb-4 font-semibold' }, modalReady.title),
-                    react_1.default.createElement("div", { className: 'flex flex-col gap-4 py-4', style: {
-                            overflowY: modalReady.overFlowBody ? 'auto' : undefined,
-                            height: modalReady.overFlowBody,
-                            minHeight: modalReady.minHeightBody
-                        } }, modalReady.fields.map((element, index) => {
-                        const isEndOfRender = index + 1 === modalReady.fields.length;
-                        if (element.elementType === 'group') {
-                            return (react_1.default.createElement("div", { key: `modal-group-${index}`, className: 'flex flex-col w-full gap-2' },
-                                element.title && react_1.default.createElement("h3", { className: 'font-bold border-b-2 pb-2 mb-2' }, element.title),
-                                react_1.default.createElement("div", { key: `modal-group-${index}`, className: 'flex gap-4 w-full', style: element.style }, element.groups
-                                    .filter(sub => ['input', 'select', 'toggle', 'multiselect', 'upload', 'button', 'autocomplete'].includes(sub.elementType))
-                                    .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender)))));
-                        }
-                        else {
-                            return getRender(element, index, isEndOfRender);
-                        }
-                    })),
-                    react_1.default.createElement("div", { className: 'flex gap-4 items-center justify-center border-t', style: modalReady === null || modalReady === void 0 ? void 0 : modalReady.actions.containerStyle },
-                        modalReady.actions.cancel && react_1.default.createElement(ModalButtonCancel, Object.assign({}, modalReady.actions.cancel, { onClick: closeHandler })),
-                        getUseSubmit(modalReady) ?
-                            react_1.default.createElement(ModalButtonAction, Object.assign({}, modalReady.actions.action, { type: 'submit' })) :
-                            react_1.default.createElement(ModalButtonAction, Object.assign({}, modalReady.actions.action, { onClick: manualSubmit, type: 'button' }))))))
-        : null);
+    if (!modalReady)
+        return null;
+    return (react_1.default.createElement(portal_1.Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal' },
+        react_1.default.createElement("div", { className: "rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]", style: modalReady.style },
+            react_1.default.createElement("form", { className: "flex flex-col p-4 gap-4", autoComplete: "off", onSubmit: handleSubmit(actionHandler) },
+                react_1.default.createElement("h2", { className: "text-bold text-center border-b pb-4 font-semibold" }, modalReady.title),
+                react_1.default.createElement("div", { className: "flex flex-col gap-4 py-4", style: {
+                        overflowY: modalReady.overFlowBody ? 'auto' : undefined,
+                        height: modalReady.overFlowBody,
+                        minHeight: modalReady.minHeightBody,
+                    } }, modalReady.fields.map((element, index) => {
+                    const isEndOfRender = index + 1 === modalReady.fields.length;
+                    if (element.elementType === 'group') {
+                        return (react_1.default.createElement("div", { key: `modal-group-${index}`, className: "flex flex-col w-full gap-2" },
+                            element.title && (react_1.default.createElement("h3", { className: "font-bold border-b-2 pb-2 mb-2" }, element.title)),
+                            react_1.default.createElement("div", { key: `modal-group-${index}`, className: "flex gap-4 w-full", style: element.style }, element.groups
+                                .filter((sub) => [
+                                'input',
+                                'select',
+                                'toggle',
+                                'multiselect',
+                                'upload',
+                                'button',
+                                'autocomplete',
+                            ].includes(sub.elementType))
+                                .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender)))));
+                    }
+                    else {
+                        return getRender(element, index, isEndOfRender);
+                    }
+                })),
+                react_1.default.createElement("div", { className: "flex gap-4 items-center justify-center border-t p-2", style: modalReady === null || modalReady === void 0 ? void 0 : modalReady.actions.containerStyle },
+                    modalReady.actions.cancel && (react_1.default.createElement(ModalButtonCancel, Object.assign({}, modalReady.actions.cancel, { onClick: closeHandler }))),
+                    getUseSubmit(modalReady) ? (react_1.default.createElement(ModalButtonAction, Object.assign({}, modalReady.actions.action, { type: "submit" }))) : (react_1.default.createElement(ModalButtonAction, Object.assign({}, modalReady.actions.action, { onClick: manualSubmit, type: "button" }))))))));
 };
 exports.Modal = Modal;
 exports.default = exports.Modal;

package/dist/util/general/general.util.d.ts

@@ -0,0 +1,3 @@
+import { IOption } from '../../interfaces/option';
+export declare const liveDataAction: (fieldData: string | number | Array<unknown>, formData: Record<string, unknown>, action: (data: string, ...args: any[]) => Promise<IOption[]>) => Promise<IOption[]>;
+export declare const liveDataHandler: (fieldData: string | number | Array<unknown>, formData: Record<string, unknown>, action: (data: string, ...args: any[]) => Promise<boolean>) => Promise<boolean>;

package/dist/util/general/general.util.js

@@ -0,0 +1,28 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.liveDataHandler = exports.liveDataAction = void 0;
+const liveDataAction = (fieldData, formData, action) => __awaiter(void 0, void 0, void 0, function* () {
+    if (typeof fieldData === 'string') {
+        const options = yield action(fieldData, formData);
+        return options !== null && options !== void 0 ? options : [];
+    }
+    return [];
+});
+exports.liveDataAction = liveDataAction;
+const liveDataHandler = (fieldData, formData, action) => __awaiter(void 0, void 0, void 0, function* () {
+    if (typeof fieldData === 'string') {
+        const result = yield action(fieldData, formData);
+        return result !== null && result !== void 0 ? result : false;
+    }
+    return false;
+});
+exports.liveDataHandler = liveDataHandler;

package/eslint.config.mjs

@@ -1,14 +1,72 @@
-import globals from "globals"
-import pluginJs from "@eslint/js"
-import tseslint from "typescript-eslint"
-import pluginReact from "eslint-plugin-react"
-
-export default [
-  { files: ['**/*.{ts,tsx}'] },
-  { languageOptions: { globals: globals.browser } },
-  { settings: { react: { version: 'detect' } } },
-  { ignores : ['dist/**', 'node_modules/**'] },
-  pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  pluginReact.configs.flat.recommended,
-]
+
+import typescriptEslintEslintPlugin from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import js from '@eslint/js';
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+const eslintConfig = [
+  ...compat.extends(
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended'
+  ),
+  { ignores : ['index.ts', 'examples/**', 'dist/**', 'node_modules/**', 'eslint.config.mjs', 'tsconfig.json'] },
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslintEslintPlugin,
+    },
+
+    languageOptions: {
+
+      parser: tsParser,
+      ecmaVersion: 5,
+      sourceType: 'module',
+
+      parserOptions: {
+        project: 'tsconfig.json',
+        tsconfigRootDir: __dirname,
+      },
+    },
+
+    rules: {
+      '@typescript-eslint/interface-name-prefix': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      'global-require': 'off',
+      'newline-per-chained-call': 'off',
+      'import/no-dynamic-require': 'off',
+
+      quotes: [
+        'error',
+        'single',
+        {
+          allowTemplateLiterals: true,
+        },
+      ],
+
+      'class-methods-use-this': 'off',
+
+      'prettier/prettier': [
+        'error',
+        {
+          endOfLine: 'auto',
+          singleQuote: true,
+          trailingComma: 'all',
+        },
+      ],
+    },
+  },
+];
+
+export default eslintConfig;

package/examples/live-data.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { IModalConfigLoader } from '../src/interfaces/modal'
 import { IOption } from '../src/interfaces/option'