dynamic-modal 1.1.12 → 1.1.13

package/dist/components/input-upload/input-upload.js

@@ -1,24 +1,11 @@
 "use strict";
 'use client';
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const InputUpload = (_a) => {
-    var _b;
-    var { onChange, readAsArrayBuffer } = _a, props = __rest(_a, ["onChange", "readAsArrayBuffer"]);
+const InputUpload = ({ onChange, readAsArrayBuffer, ...props }) => {
     const onChangeHandler = (event) => {
         if (props.read && event.target.files) {
             readFileBlob(event.target.files[0], false)
@@ -56,7 +43,7 @@ const InputUpload = (_a) => {
     };
     return (react_1.default.createElement("div", { className: "flex flex-col w-full gap-1 text-center" },
         props.label && (react_1.default.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white", htmlFor: `file-input-${props.id}` }, props.label)),
-        react_1.default.createElement("input", Object.assign({ className: "file:transition-all file:delay-150 block w-full text-sm text-slate-500\r\n        file:mr-4 file:py-2 file:px-4 file:rounded-md\r\n        file:border-0 file:text-sm file:font-semibold\r\n        file:bg-gray-100 file:text-blue-600\r\n        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed", "aria-describedby": `file-input-${props.id}-help`, id: `file-input-${props.id}`, type: "file", onChange: onChangeHandler }, props)),
-        react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-300 text-start", id: `file-input-${props.id}-help` }, (_b = props.helpText) === null || _b === void 0 ? void 0 : _b.toUpperCase())));
+        react_1.default.createElement("input", { className: "file:transition-all file:delay-150 block w-full text-sm text-slate-500\r\n        file:mr-4 file:py-2 file:px-4 file:rounded-md\r\n        file:border-0 file:text-sm file:font-semibold\r\n        file:bg-gray-100 file:text-blue-600\r\n        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed", "aria-describedby": `file-input-${props.id}-help`, id: `file-input-${props.id}`, type: "file", onChange: onChangeHandler, ...props }),
+        react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-300 text-start", id: `file-input-${props.id}-help` }, props.helpText?.toUpperCase())));
 };
 exports.default = InputUpload;

package/dist/components/make-button/make-button.js

@@ -39,6 +39,6 @@ const component_state_1 = require("../../context/component/component-state");
 const MakeButton = ({ element }) => {
     const { Button } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
     const elementId = (0, react_1.useId)();
-    return react_1.default.createElement(Button, Object.assign({}, element, { id: elementId }));
+    return react_1.default.createElement(Button, { ...element, id: elementId });
 };
 exports.default = MakeButton;

package/dist/components/make-input/make-input.js

@@ -33,17 +33,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -55,40 +44,54 @@ const use_enable_if_1 = __importDefault(require("../../hooks/use-enable-if"));
 const use_render_if_1 = __importDefault(require("../../hooks/use-render-if"));
 const MakeInput = ({ element, control, watch, unregister, }) => {
     const { Input } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
-    const { name } = element, _a = element.validation, { required, message, regex } = _a, otherValidation = __rest(_a, ["required", "message", "regex"]), { enableIf, renderIf } = element, inputProps = __rest(element, ["name", "validation", "enableIf", "renderIf"]);
-    const { checkEnable, enable } = (0, use_enable_if_1.default)({ elementEnableIf: enableIf });
-    const { checkRender, render } = (0, use_render_if_1.default)({
-        elementName: name,
+    const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, ...inputProps } = element;
+    const { checkEnable, enable, setEnable } = (0, use_enable_if_1.default)({
+        elementEnableIf: enableIf,
+    });
+    const { checkRender, render, setRender } = (0, use_render_if_1.default)({
         elementRenderIf: renderIf,
-        unregister,
     });
     const elementId = (0, react_1.useId)();
     (0, react_1.useEffect)(() => {
-        const unsubscribe = watch((formData, { name, type }) => {
+        const { unsubscribe } = watch((formData, { name, type }) => {
             if (!name)
                 return;
             if (enableIf) {
-                checkEnable(formData, { name, type });
+                checkEnable(formData, { name, type }).then((enableStatus) => {
+                    if (enableStatus === undefined || enableStatus === null)
+                        return;
+                    if (enable !== enableStatus)
+                        setEnable(enableStatus);
+                });
             }
             if (renderIf) {
-                checkRender(formData, { name, type });
+                checkRender(formData, { name, type }).then((renderStatus) => {
+                    if (renderStatus === undefined || renderStatus === null)
+                        return;
+                    if (render !== renderStatus) {
+                        if (render && !renderStatus)
+                            unregister(elementName);
+                        setRender(!!renderStatus);
+                    }
+                });
             }
         });
-        return () => unsubscribe.unsubscribe();
-    }, [watch]);
+        return () => unsubscribe();
+    }, [watch, render, enable]);
     if (!render)
         return null;
-    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: name, rules: Object.assign({ required: {
+    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: elementName, rules: {
+            required: {
                 value: required,
-                message: message !== null && message !== void 0 ? message : '',
-            }, pattern: regex
+                message: message ?? '',
+            },
+            pattern: regex
                 ? {
                     value: regex,
-                    message: message !== null && message !== void 0 ? message : '',
+                    message: message ?? '',
                 }
-                : undefined }, otherValidation), render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => {
-            var _a;
-            return (react_1.default.createElement(Input, Object.assign({}, inputProps, { name: name, id: elementId, onChange: onChange, value: value !== null && value !== void 0 ? value : '', invalid: invalid, error: error, disabled: (_a = element.disabled) !== null && _a !== void 0 ? _a : !enable })));
-        } }));
+                : undefined,
+            ...otherValidation,
+        }, render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => (react_1.default.createElement(Input, { ...inputProps, name: elementName, id: elementId, onChange: onChange, value: value ?? '', invalid: invalid, error: error, disabled: element.disabled ?? !enable })) }));
 };
 exports.default = MakeInput;

package/dist/components/make-select/make-select.js

@@ -33,17 +33,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -56,48 +45,71 @@ const use_render_if_1 = __importDefault(require("../../hooks/use-render-if"));
 const use_live_data_1 = __importDefault(require("../../hooks/use-live-data"));
 const MakeSelect = ({ element, control, watch, setValue, unregister, }) => {
     const { Select } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
-    const { name } = element, _a = element.validation, { required, message, regex } = _a, otherValidation = __rest(_a, ["required", "message", "regex"]), { enableIf, renderIf, liveData: elementLiveData } = element, inputProps = __rest(element, ["name", "validation", "enableIf", "renderIf", "liveData"]);
-    const { checkLiveData, liveData, liveSearching } = (0, use_live_data_1.default)({
-        elementName: name,
+    const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, liveData: elementLiveData, ...inputProps } = element;
+    const [liveSearching, setLiveSearching] = (0, react_1.useState)(false);
+    const { checkLiveData, liveData, setLiveData } = (0, use_live_data_1.default)({
         elementLiveData,
-        setValue,
     });
-    const { checkEnable, enable } = (0, use_enable_if_1.default)({ elementEnableIf: enableIf });
-    const { checkRender, render } = (0, use_render_if_1.default)({
-        elementName: name,
+    const { checkEnable, enable, setEnable } = (0, use_enable_if_1.default)({
+        elementEnableIf: enableIf,
+    });
+    const { checkRender, render, setRender } = (0, use_render_if_1.default)({
         elementRenderIf: renderIf,
-        unregister,
     });
     const elementId = (0, react_1.useId)();
     (0, react_1.useEffect)(() => {
-        const unsubscribe = watch((formData, { name, type }) => {
+        const { unsubscribe } = watch((formData, { name, type }) => {
             if (!name)
                 return;
             if (enableIf) {
-                checkEnable(formData, { name, type });
+                checkEnable(formData, { name, type }).then((enableStatus) => {
+                    if (enableStatus === undefined || enableStatus === null)
+                        return;
+                    if (enable !== enableStatus)
+                        setEnable(enableStatus);
+                });
             }
             if (renderIf) {
-                checkRender(formData, { name, type });
+                checkRender(formData, { name, type }).then((renderStatus) => {
+                    if (renderStatus === undefined || renderStatus === null)
+                        return;
+                    if (render !== renderStatus) {
+                        if (render && !renderStatus)
+                            unregister(elementName);
+                        setRender(!!renderStatus);
+                    }
+                });
             }
             if (elementLiveData) {
-                checkLiveData(formData, { name, type });
+                setLiveSearching(true);
+                checkLiveData(formData, { name, type })
+                    .then((options) => {
+                    if (options === undefined || options === null)
+                        return;
+                    setLiveData(options);
+                    setValue(elementName, options);
+                })
+                    .finally(() => {
+                    setLiveSearching(false);
+                });
             }
         });
-        return () => unsubscribe.unsubscribe();
-    }, [watch]);
+        return () => unsubscribe();
+    }, [watch, render, enable, liveData]);
     if (!render)
         return null;
-    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: name, rules: Object.assign({ required: {
+    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: elementName, rules: {
+            required: {
                 value: required,
-                message: message !== null && message !== void 0 ? message : '',
-            }, pattern: regex
+                message: message ?? '',
+            },
+            pattern: regex
                 ? {
                     value: regex,
-                    message: message !== null && message !== void 0 ? message : '',
+                    message: message ?? '',
                 }
-                : undefined }, otherValidation), render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => {
-            var _a, _b;
-            return (react_1.default.createElement(Select, Object.assign({}, inputProps, { id: elementId, name: name, onChange: onChange, value: value, invalid: invalid, error: error, disabled: (_a = element.disabled) !== null && _a !== void 0 ? _a : !enable, liveSearching: liveSearching, options: liveData || ((_b = element.options) !== null && _b !== void 0 ? _b : []) })));
-        } }));
+                : undefined,
+            ...otherValidation,
+        }, render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => (react_1.default.createElement(Select, { ...inputProps, id: elementId, name: elementName, onChange: onChange, value: value, invalid: invalid, error: error, disabled: element.disabled ?? !enable, liveSearching: liveSearching, options: liveData || (element.options ?? []) })) }));
 };
 exports.default = MakeSelect;

package/dist/components/make-textarea/make-textarea.js

@@ -33,17 +33,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -55,40 +44,54 @@ const use_enable_if_1 = __importDefault(require("../../hooks/use-enable-if"));
 const use_render_if_1 = __importDefault(require("../../hooks/use-render-if"));
 const MakeTextarea = ({ element, control, watch, unregister, }) => {
     const { Textarea } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
-    const { name } = element, _a = element.validation, { required, message, regex } = _a, otherValidation = __rest(_a, ["required", "message", "regex"]), { enableIf, renderIf } = element, inputProps = __rest(element, ["name", "validation", "enableIf", "renderIf"]);
-    const { checkEnable, enable } = (0, use_enable_if_1.default)({ elementEnableIf: enableIf });
-    const { checkRender, render } = (0, use_render_if_1.default)({
-        elementName: name,
+    const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, ...inputProps } = element;
+    const { checkEnable, enable, setEnable } = (0, use_enable_if_1.default)({
+        elementEnableIf: enableIf,
+    });
+    const { checkRender, render, setRender } = (0, use_render_if_1.default)({
         elementRenderIf: renderIf,
-        unregister,
     });
     const elementId = (0, react_1.useId)();
     (0, react_1.useEffect)(() => {
-        const unsubscribe = watch((formData, { name, type }) => {
+        const { unsubscribe } = watch((formData, { name, type }) => {
             if (!name)
                 return;
             if (enableIf) {
-                checkEnable(formData, { name, type });
+                checkEnable(formData, { name, type }).then((enableStatus) => {
+                    if (enableStatus === undefined || enableStatus === null)
+                        return;
+                    if (enable !== enableStatus)
+                        setEnable(enableStatus);
+                });
             }
             if (renderIf) {
-                checkRender(formData, { name, type });
+                checkRender(formData, { name, type }).then((renderStatus) => {
+                    if (renderStatus === undefined || renderStatus === null)
+                        return;
+                    if (render !== renderStatus) {
+                        if (render && !renderStatus)
+                            unregister(elementName);
+                        setRender(!!renderStatus);
+                    }
+                });
             }
         });
-        return () => unsubscribe.unsubscribe();
-    }, [watch]);
+        return () => unsubscribe();
+    }, [watch, render, enable]);
     if (!render)
         return null;
-    return (react_1.default.createElement(react_hook_form_1.Controller, { name: name, control: control, rules: Object.assign({ required: {
+    return (react_1.default.createElement(react_hook_form_1.Controller, { name: elementName, control: control, rules: {
+            required: {
                 value: required,
-                message: message !== null && message !== void 0 ? message : '',
-            }, pattern: regex
+                message: message ?? '',
+            },
+            pattern: regex
                 ? {
                     value: regex,
-                    message: message !== null && message !== void 0 ? message : '',
+                    message: message ?? '',
                 }
-                : undefined }, otherValidation), render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => {
-            var _a;
-            return (react_1.default.createElement(Textarea, Object.assign({}, inputProps, { id: elementId, name: name, onChange: onChange, value: value !== null && value !== void 0 ? value : '', invalid: invalid, error: error, disabled: (_a = element.disabled) !== null && _a !== void 0 ? _a : !enable })));
-        } }));
+                : undefined,
+            ...otherValidation,
+        }, render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => (react_1.default.createElement(Textarea, { ...inputProps, id: elementId, name: elementName, onChange: onChange, value: value ?? '', invalid: invalid, error: error, disabled: element.disabled ?? !enable })) }));
 };
 exports.default = MakeTextarea;

package/dist/components/make-toggle/make-toggle.js

@@ -33,17 +33,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -55,40 +44,54 @@ const use_enable_if_1 = __importDefault(require("../../hooks/use-enable-if"));
 const use_render_if_1 = __importDefault(require("../../hooks/use-render-if"));
 const MakeToggle = ({ element, control, watch, unregister, }) => {
     const { Toggle } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
-    const { name } = element, _a = element.validation, { required, message, regex } = _a, otherValidation = __rest(_a, ["required", "message", "regex"]), { enableIf, renderIf } = element, inputProps = __rest(element, ["name", "validation", "enableIf", "renderIf"]);
-    const { checkEnable, enable } = (0, use_enable_if_1.default)({ elementEnableIf: enableIf });
-    const { checkRender, render } = (0, use_render_if_1.default)({
-        elementName: name,
+    const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, ...inputProps } = element;
+    const { checkEnable, enable, setEnable } = (0, use_enable_if_1.default)({
+        elementEnableIf: enableIf,
+    });
+    const { checkRender, render, setRender } = (0, use_render_if_1.default)({
         elementRenderIf: renderIf,
-        unregister,
     });
     const elementId = (0, react_1.useId)();
     (0, react_1.useEffect)(() => {
-        const unsubscribe = watch((formData, { name, type }) => {
+        const { unsubscribe } = watch((formData, { name, type }) => {
             if (!name)
                 return;
             if (enableIf) {
-                checkEnable(formData, { name, type });
+                checkEnable(formData, { name, type }).then((enableStatus) => {
+                    if (enableStatus === undefined || enableStatus === null)
+                        return;
+                    if (enable !== enableStatus)
+                        setEnable(enableStatus);
+                });
             }
             if (renderIf) {
-                checkRender(formData, { name, type });
+                checkRender(formData, { name, type }).then((renderStatus) => {
+                    if (renderStatus === undefined || renderStatus === null)
+                        return;
+                    if (render !== renderStatus) {
+                        if (render && !renderStatus)
+                            unregister(elementName);
+                        setRender(!!renderStatus);
+                    }
+                });
             }
         });
-        return () => unsubscribe.unsubscribe();
-    }, [watch]);
+        return () => unsubscribe();
+    }, [watch, render, enable]);
     if (!render)
         return null;
-    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: name, rules: Object.assign({ required: {
+    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: elementName, rules: {
+            required: {
                 value: required,
-                message: message !== null && message !== void 0 ? message : '',
-            }, pattern: regex
+                message: message ?? '',
+            },
+            pattern: regex
                 ? {
                     value: regex,
-                    message: message !== null && message !== void 0 ? message : '',
+                    message: message ?? '',
                 }
-                : undefined }, otherValidation), render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => {
-            var _a;
-            return (react_1.default.createElement(Toggle, Object.assign({}, inputProps, { id: elementId, name: name, onChange: onChange, value: value !== null && value !== void 0 ? value : '', invalid: invalid, error: error, disabled: (_a = element.disabled) !== null && _a !== void 0 ? _a : !enable })));
-        } }));
+                : undefined,
+            ...otherValidation,
+        }, render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => (react_1.default.createElement(Toggle, { ...inputProps, id: elementId, name: elementName, onChange: onChange, value: value ?? '', invalid: invalid, error: error, disabled: element.disabled ?? !enable })) }));
 };
 exports.default = MakeToggle;

package/dist/components/make-upload/make-upload.js

@@ -33,17 +33,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -54,40 +43,54 @@ const input_upload_1 = __importDefault(require("../input-upload/input-upload"));
 const use_enable_if_1 = __importDefault(require("../../hooks/use-enable-if"));
 const use_render_if_1 = __importDefault(require("../../hooks/use-render-if"));
 const MakeUpload = ({ element, control, watch, unregister, }) => {
-    const { name } = element, _a = element.validation, { required, message, regex } = _a, otherValidation = __rest(_a, ["required", "message", "regex"]), { enableIf, renderIf } = element, inputProps = __rest(element, ["name", "validation", "enableIf", "renderIf"]);
-    const { checkEnable, enable } = (0, use_enable_if_1.default)({ elementEnableIf: enableIf });
-    const { checkRender, render } = (0, use_render_if_1.default)({
-        elementName: name,
+    const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, ...inputProps } = element;
+    const { checkEnable, enable, setEnable } = (0, use_enable_if_1.default)({
+        elementEnableIf: enableIf,
+    });
+    const { checkRender, render, setRender } = (0, use_render_if_1.default)({
         elementRenderIf: renderIf,
-        unregister,
     });
     const elementId = (0, react_1.useId)();
     (0, react_1.useEffect)(() => {
-        const unsubscribe = watch((formData, { name, type }) => {
+        const { unsubscribe } = watch((formData, { name, type }) => {
             if (!name)
                 return;
             if (enableIf) {
-                checkEnable(formData, { name, type });
+                checkEnable(formData, { name, type }).then((enableStatus) => {
+                    if (enableStatus === undefined || enableStatus === null)
+                        return;
+                    if (enable !== enableStatus)
+                        setEnable(enableStatus);
+                });
             }
             if (renderIf) {
-                checkRender(formData, { name, type });
+                checkRender(formData, { name, type }).then((renderStatus) => {
+                    if (renderStatus === undefined || renderStatus === null)
+                        return;
+                    if (render !== renderStatus) {
+                        if (render && !renderStatus)
+                            unregister(elementName);
+                        setRender(!!renderStatus);
+                    }
+                });
             }
         });
-        return () => unsubscribe.unsubscribe();
-    }, [watch]);
+        return () => unsubscribe();
+    }, [watch, render, enable]);
     if (!render)
         return null;
-    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: name, rules: Object.assign({ required: {
+    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: elementName, rules: {
+            required: {
                 value: required,
-                message: message !== null && message !== void 0 ? message : '',
-            }, pattern: regex
+                message: message ?? '',
+            },
+            pattern: regex
                 ? {
                     value: regex,
-                    message: message !== null && message !== void 0 ? message : '',
+                    message: message ?? '',
                 }
-                : undefined }, otherValidation), render: ({ field: { onChange } }) => {
-            var _a;
-            return (react_1.default.createElement(input_upload_1.default, Object.assign({}, inputProps, { id: elementId, name: name, onChange: onChange, disabled: (_a = element.disabled) !== null && _a !== void 0 ? _a : !enable })));
-        } }));
+                : undefined,
+            ...otherValidation,
+        }, render: ({ field: { onChange } }) => (react_1.default.createElement(input_upload_1.default, { ...inputProps, id: elementId, name: elementName, onChange: onChange, disabled: element.disabled ?? !enable })) }));
 };
 exports.default = MakeUpload;

package/dist/components/portal/portal.js

@@ -41,7 +41,6 @@ const Portal = (props) => {
     const ref = (0, react_1.useRef)(null);
     const [mounted, setMounted] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
-        var _a;
         if (mounted && !props.portalOpen && props.closeTime > 0) {
             const timeoutId = setTimeout(() => {
                 setMounted(false);
@@ -54,7 +53,7 @@ const Portal = (props) => {
             ref.current = null;
         }
         else if (!mounted && props.portalOpen) {
-            ref.current = document.querySelector((_a = props.portalTag) !== null && _a !== void 0 ? _a : '#portal');
+            ref.current = document.querySelector(props.portalTag ?? '#portal');
             setMounted(true);
         }
     }, [mounted, props.closeTime, props.portalOpen, props.portalTag]);

package/dist/hooks/modal-handler.js

@@ -23,6 +23,6 @@ function useModalHandler() {
     const closeModal = () => setModalConfig(initialState);
     return {
         openModal,
-        modalProps: Object.assign(Object.assign({}, modalConfig.modalProps), { close: closeModal }),
+        modalProps: { ...modalConfig.modalProps, close: closeModal },
     };
 }

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

@@ -4,6 +4,7 @@ export interface IRenderIfProps {
 }
 declare const useEnableIf: ({ elementEnableIf }: IRenderIfProps) => {
     enable: boolean;
-    checkEnable: (formData: Record<string, unknown>, { name }: Record<"name", string> & Record<"type", string | undefined>) => Promise<void>;
+    checkEnable: (formData: Record<string, unknown>, { name }: Record<"name", string> & Record<"type", string | undefined>) => Promise<boolean | undefined>;
+    setEnable: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };
 export default useEnableIf;

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

@@ -1,13 +1,5 @@
 "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());
-    });
-};
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const general_util_1 = require("../util/general/general.util");
@@ -15,31 +7,30 @@ 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 checkEnable = async (formData, { name }) => {
         const targetFieldData = formData[name];
         if (targetFieldData === undefined ||
             targetFieldData === '' ||
             targetFieldData === null)
-            return;
+            return false;
         const enableIfConfig = elementEnableIf;
-        const isLiveEnable = !!(enableIfConfig === null || enableIfConfig === void 0 ? void 0 : enableIfConfig.action) && !!enableIfConfig.condition;
+        const isLiveEnable = !!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);
+            const enableStatus = await (0, general_util_1.liveDataHandler)(targetFieldData, formData, enableIfConfig.action);
+            return 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 enableStatus;
             }
         }
-    });
+    };
     return {
         enable,
         checkEnable,
+        setEnable,
     };
 };
 exports.default = useEnableIf;

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

@@ -1,14 +1,11 @@
-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;
+declare const useLiveData: ({ elementLiveData }: ILiveDataProps) => {
     liveData: IOption[] | undefined;
-    checkLiveData: (formData: Record<string, unknown>, { name }: Record<"name", string> & Record<"type", string | undefined>) => Promise<void>;
+    checkLiveData: (formData: Record<string, unknown>, { name }: Record<"name", string> & Record<"type", string | undefined>) => Promise<IOption[] | null>;
+    setLiveData: import("react").Dispatch<import("react").SetStateAction<IOption[] | undefined>>;
 };
 export default useLiveData;

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

@@ -1,42 +1,25 @@
 "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());
-    });
-};
+'use client';
 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 useLiveData = ({ elementLiveData }) => {
     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 checkLiveData = async (formData, { name }) => {
         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;
+        const isLiveData = !!liveDataConfig?.action && !!liveDataConfig.condition;
         if (!isLiveData)
-            return;
+            return null;
         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 await (0, general_util_1.liveDataAction)(targetFieldData, formData, liveDataConfig.action);
         }
-    });
+        return null;
+    };
     return {
-        liveSearching,
         liveData,
         checkLiveData,
+        setLiveData,
     };
 };
 exports.default = useLiveData;

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

@@ -1,12 +1,10 @@
 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) => {
+declare const useRenderIf: ({ elementRenderIf }: IRenderIfProps) => {
     render: boolean;
-    checkRender: (formData: Record<string, unknown>, { name }: Record<"name", string> & Record<"type", string | undefined>) => Promise<void>;
+    checkRender: (formData: Record<string, unknown>, { name }: Record<"name", string> & Record<"type", string | undefined>) => Promise<boolean | undefined>;
+    setRender: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };
 export default useRenderIf;

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

@@ -1,51 +1,36 @@
 "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());
-    });
-};
+'use client';
 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 useRenderIf = ({ elementRenderIf }) => {
     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 checkRender = async (formData, { name }) => {
         const targetFieldData = formData[name];
         if (targetFieldData === undefined ||
             targetFieldData === '' ||
             targetFieldData === null)
-            return;
+            return false;
         const renderIfConfig = elementRenderIf;
-        const isLiveRender = !!(renderIfConfig === null || renderIfConfig === void 0 ? void 0 : renderIfConfig.action) && !!(renderIfConfig === null || renderIfConfig === void 0 ? void 0 : renderIfConfig.condition);
+        const isLiveRender = !!renderIfConfig?.action && !!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);
-            }
+            const renderStatus = await (0, general_util_1.liveDataHandler)(targetFieldData, formData, renderIfConfig.action);
+            return 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 renderStatus;
             }
         }
-    });
+    };
     return {
         render,
         checkRender,
+        setRender,
     };
 };
 exports.default = useRenderIf;

package/dist/modal.js

@@ -33,26 +33,6 @@ var __importStar = (this && this.__importStar) || (function () {
         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) {
-        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());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -73,22 +53,21 @@ 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, reset, getFieldState, } = (0, react_hook_form_1.useForm)();
     const formValueHandler = (element) => {
-        var _a;
         if (['group', 'upload', 'text'].includes(element.elementType))
             return;
         if (!element.defaultValue && element.renderIf) {
             unregister(element.name);
             return;
         }
-        const defaultValue = (_a = element.defaultValue) !== null && _a !== void 0 ? _a : '';
+        const defaultValue = element.defaultValue ?? '';
         const parsedValue = defaultValue === 'true'
             ? true
             : defaultValue === 'false'
                 ? false
                 : defaultValue;
-        setValue(element.name, parsedValue !== null && parsedValue !== void 0 ? parsedValue : '');
+        setValue(element.name, parsedValue ?? '');
     };
     const autoLoadGroup = (groupFields) => {
         groupFields.forEach((element) => {
@@ -115,9 +94,7 @@ const Modal = ({ open, close, config }) => {
                 : true;
         return useSubmit;
     };
-    const getRender = (_a, index, isEndOfRender) => {
-        var { elementType } = _a, element = __rest(_a, ["elementType"]);
-        if (isEndOfRender === void 0) { isEndOfRender = false; }
+    const getRender = ({ elementType, ...element }, index, isEndOfRender = false) => {
         if (isEndOfRender && modalReady)
             setTimeout(() => autoLoadField(modalReady.fields), 200);
         const props = {
@@ -126,24 +103,22 @@ const Modal = ({ open, close, config }) => {
             setValue,
             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, { ...props, key: `modal-input-${index}`, element: element })) : elementType === 'select' ? (react_1.default.createElement(make_select_1.default, { ...props, key: `modal-select-${index}`, element: element })) : elementType === 'textarea' ? (react_1.default.createElement(make_textarea_1.default, { ...props, key: `modal-textarea-${index}`, element: element })) : elementType === 'toggle' ? (react_1.default.createElement(make_toggle_1.default, { ...props, key: `modal-toggle-${index}`, element: element })) : elementType === 'text' ? (react_1.default.createElement(make_description_1.default, { ...props, key: `modal-text-${index}`, element: element })) : elementType === 'upload' ? (react_1.default.createElement(make_upload_1.default, { ...props, key: `modal-upload-${index}`, element: element })) : elementType === 'button' ? (react_1.default.createElement(make_button_1.default, { ...props, key: `modal-button-${index}`, element: element })) : null;
     };
     const closeHandler = () => {
-        if (modalReady === null || modalReady === void 0 ? void 0 : modalReady.onClose)
+        if (modalReady?.onClose)
             modalReady.onClose();
         setTimeout(() => {
-            const form = getValues();
-            unregister(Object.keys(form));
             setModalReady(undefined);
             setDefaultLoaded(false);
+            reset();
             close();
         }, 200);
     };
-    const manualSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
+    const manualSubmit = async () => {
         const form = getValues();
         const fields = Object.keys(form);
-        yield trigger(fields);
+        await trigger(fields);
         const validations = fields.map((field) => {
             const { invalid } = getFieldState(field);
             return invalid;
@@ -153,11 +128,10 @@ const Modal = ({ open, close, config }) => {
             : 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));
-    });
+        actionHandler({ ...(modalReady?.reservedData ?? {}), ...form });
+    };
     const actionHandler = (data) => {
-        var _a;
-        modalReady === null || modalReady === void 0 ? void 0 : modalReady.out(Object.assign(Object.assign({}, ((_a = modalReady === null || modalReady === void 0 ? void 0 : modalReady.reservedData) !== null && _a !== void 0 ? _a : {})), data));
+        modalReady?.out({ ...(modalReady?.reservedData ?? {}), ...data });
         closeHandler();
     };
     (0, react_1.useEffect)(() => {
@@ -195,9 +169,9 @@ const Modal = ({ open, close, config }) => {
                         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" }))))))));
+                react_1.default.createElement("div", { className: "flex gap-4 items-center justify-center border-t p-2", style: modalReady?.actions.containerStyle },
+                    modalReady.actions.cancel && (react_1.default.createElement(ModalButtonCancel, { ...modalReady.actions.cancel, onClick: closeHandler })),
+                    getUseSubmit(modalReady) ? (react_1.default.createElement(ModalButtonAction, { ...modalReady.actions.action, type: "submit" })) : (react_1.default.createElement(ModalButtonAction, { ...modalReady.actions.action, onClick: manualSubmit, type: "button" })))))));
 };
 exports.Modal = Modal;
 exports.default = exports.Modal;

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

@@ -1,28 +1,20 @@
 "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());
-    });
-};
+'use client';
 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* () {
+const liveDataAction = async (fieldData, formData, action) => {
     if (typeof fieldData === 'string') {
-        const options = yield action(fieldData, formData);
-        return options !== null && options !== void 0 ? options : [];
+        const options = await action(fieldData, formData);
+        return options ?? [];
     }
     return [];
-});
+};
 exports.liveDataAction = liveDataAction;
-const liveDataHandler = (fieldData, formData, action) => __awaiter(void 0, void 0, void 0, function* () {
+const liveDataHandler = async (fieldData, formData, action) => {
     if (typeof fieldData === 'string') {
-        const result = yield action(fieldData, formData);
-        return result !== null && result !== void 0 ? result : false;
+        const result = await action(fieldData, formData);
+        return result ?? false;
     }
     return false;
-});
+};
 exports.liveDataHandler = liveDataHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-modal",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "description": "The dynamic-modal is a solution of creation different modals into project using a json configuration file",
   "main": "index.js",
   "scripts": {

package/src/hooks/use-enable-if.ts

@@ -23,12 +23,13 @@ const useEnableIf = ({ elementEnableIf }: IRenderIfProps) => {
     { name }: Record<'name', string> & Record<'type', string | undefined>,
   ) => {
     const targetFieldData = formData[name] as string | number;
+
     if (
       targetFieldData === undefined ||
       targetFieldData === '' ||
       targetFieldData === null
     )
-      return;
+      return false;
 
     const enableIfConfig = elementEnableIf;
     const isLiveEnable: boolean =

package/src/hooks/use-render-if.ts

@@ -24,6 +24,13 @@ const useRenderIf = ({ elementRenderIf }: IRenderIfProps) => {
   ) => {
     const targetFieldData = formData[name] as string | number;
 
+    if (
+      targetFieldData === undefined ||
+      targetFieldData === '' ||
+      targetFieldData === null
+    )
+      return false;
+
     const renderIfConfig = elementRenderIf!;
     const isLiveRender: boolean =
       !!renderIfConfig?.action && !!renderIfConfig?.condition;