dynamic-modal 1.1.9 → 1.1.10

package/README.md

@@ -1,6 +1,5 @@
 # dynamic-modal
 
-<<<<<<< README.md
 `dynamic-modal` is a TypeScript library for creating reusable modals in React and Next.js applications. It uses JSON objects to configure the modal structure, eliminating the need to write HTML. This approach simplifies modal creation and customization, allowing you to open and close modals using a custom hook.
 
 ## Requirements

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

@@ -45,7 +45,7 @@ const InputUpload = (_a) => {
                 const fileResult = {
                     name: blob.name,
                     size: blob.size,
-                    data: fileReader.result
+                    data: fileReader.result,
                 };
                 resolve(fileResult);
             };
@@ -54,8 +54,8 @@ 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),
+    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())));
 };

package/dist/components/make-button/make-button.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 });
 const react_1 = __importStar(require("react"));
 const component_state_1 = require("../../context/component/component-state");
-const general_1 = require("../../tools/general");
 const MakeButton = ({ element }) => {
     const { Button } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
-    const elementId = (0, react_1.useMemo)(() => { var _a; return (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(); }, []);
-    return (react_1.default.createElement(Button, Object.assign({}, element, { id: elementId })));
+    const elementId = (0, react_1.useId)();
+    return react_1.default.createElement(Button, Object.assign({}, element, { id: elementId }));
 };
 exports.default = MakeButton;

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

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const MakeDescription = ({ element: { text, Icon, containerStyle, textStyle } }) => {
-    return (react_1.default.createElement("div", { className: 'flex gap-4 w-full h-auto text-xs text-center p-2 border-1 rounded-md', style: containerStyle },
+const MakeDescription = ({ element: { text, Icon, containerStyle, textStyle }, }) => {
+    return (react_1.default.createElement("div", { className: "flex gap-4 w-full h-auto text-xs text-center p-2 border-1 rounded-md", style: containerStyle },
         Icon && react_1.default.createElement(Icon, null),
         react_1.default.createElement("p", { style: textStyle }, text)));
 };

package/dist/components/make-input/make-input.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 __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)
@@ -34,33 +44,51 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
-const field_render_1 = require("../../hooks/field-render");
 const component_state_1 = require("../../context/component/component-state");
-const general_1 = require("../../tools/general");
-const MakeInput = (_a) => {
-    var _b, _c;
-    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), { enableIf, renderIf } = _d, element = __rest(_d, ["validation", "enableIf", "renderIf"]), props = __rest(_a, ["element"]);
+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 { render, enable, checkField } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element: Object.assign({ enableIf, renderIf }, element) }));
-    const elementId = (0, react_1.useMemo)(() => { var _a; return (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(); }, []);
+    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,
+        elementRenderIf: renderIf,
+        unregister,
+    });
+    const elementId = (0, react_1.useId)();
     (0, react_1.useEffect)(() => {
-        const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }));
-        return () => subscription.unsubscribe();
-    }, [checkField, props]);
-    return (render
-        ? react_1.default.createElement(react_hook_form_1.Controller, { control: props.control, name: element.name, rules: Object.assign({ required: {
-                    value: required,
-                    message: (_b = validation.message) !== null && _b !== void 0 ? _b : ''
-                }, pattern: validation.regex ? {
-                    value: validation.regex,
-                    message: (_c = validation.message) !== null && _c !== void 0 ? _c : ''
-                } : undefined }, validation), render: ({ field: { onChange, value }, fieldState: { invalid, error } }) => {
-                var _a;
-                return (react_1.default.createElement(Input, Object.assign({}, element, { 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 })));
-            } })
-        : null);
+        const unsubscribe = watch((formData, { name, type }) => {
+            if (!name)
+                return;
+            if (enableIf) {
+                checkEnable(formData, { name, type });
+            }
+            if (renderIf) {
+                checkRender(formData, { name, type });
+            }
+        });
+        return () => unsubscribe.unsubscribe();
+    }, [watch]);
+    if (!render)
+        return null;
+    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: name, rules: Object.assign({ required: {
+                value: required,
+                message: message !== null && message !== void 0 ? message : '',
+            }, pattern: regex
+                ? {
+                    value: regex,
+                    message: message !== null && message !== void 0 ? 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 })));
+        } }));
 };
 exports.default = MakeInput;

package/dist/components/make-select/make-select.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 __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)
@@ -34,33 +44,60 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
-const field_render_1 = require("../../hooks/field-render");
-const general_1 = require("../../tools/general");
 const component_state_1 = require("../../context/component/component-state");
-const MakeSelect = (_a) => {
-    var _b, _c;
-    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), { enableIf, renderIf } = _d, element = __rest(_d, ["validation", "enableIf", "renderIf"]), props = __rest(_a, ["element"]);
+const use_enable_if_1 = __importDefault(require("../../hooks/use-enable-if"));
+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 { render, enable, checkField, liveData, liveSearching } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element: Object.assign({ renderIf, enableIf }, element) }));
-    const elementId = (0, react_1.useMemo)(() => { var _a; return (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(); }, []);
+    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,
+        elementLiveData,
+        setValue,
+    });
+    const { checkEnable, enable } = (0, use_enable_if_1.default)({ elementEnableIf: enableIf });
+    const { checkRender, render } = (0, use_render_if_1.default)({
+        elementName: name,
+        elementRenderIf: renderIf,
+        unregister,
+    });
+    const elementId = (0, react_1.useId)();
     (0, react_1.useEffect)(() => {
-        const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }));
-        return () => subscription.unsubscribe();
-    }, [checkField, props, props.watch]);
-    return (render
-        ? react_1.default.createElement(react_hook_form_1.Controller, { control: props.control, name: element.name, rules: Object.assign({ required: {
-                    value: required,
-                    message: (_b = validation.message) !== null && _b !== void 0 ? _b : ''
-                }, pattern: validation.regex ? {
-                    value: validation.regex,
-                    message: (_c = validation.message) !== null && _c !== void 0 ? _c : ''
-                } : undefined }, validation), render: ({ field: { onChange, value }, fieldState: { invalid, error } }) => {
-                var _a, _b;
-                return (react_1.default.createElement(Select, Object.assign({}, element, { id: elementId, 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 : []) })));
-            } })
-        : react_1.default.createElement(react_1.default.Fragment, null));
+        const unsubscribe = watch((formData, { name, type }) => {
+            if (!name)
+                return;
+            if (enableIf) {
+                checkEnable(formData, { name, type });
+            }
+            if (renderIf) {
+                checkRender(formData, { name, type });
+            }
+            if (elementLiveData) {
+                checkLiveData(formData, { name, type });
+            }
+        });
+        return () => unsubscribe.unsubscribe();
+    }, [watch]);
+    if (!render)
+        return null;
+    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: name, rules: Object.assign({ required: {
+                value: required,
+                message: message !== null && message !== void 0 ? message : '',
+            }, pattern: regex
+                ? {
+                    value: regex,
+                    message: message !== null && message !== void 0 ? 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 : []) })));
+        } }));
 };
 exports.default = MakeSelect;

package/dist/components/make-textarea/make-textarea.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 __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)
@@ -34,33 +44,51 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
-const field_render_1 = require("../../hooks/field-render");
-const general_1 = require("../../tools/general");
 const component_state_1 = require("../../context/component/component-state");
-const MakeTextarea = (_a) => {
-    var _b, _c;
-    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), { enableIf, renderIf } = _d, element = __rest(_d, ["validation", "enableIf", "renderIf"]), props = __rest(_a, ["element"]);
+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 { render, enable, checkField } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element: Object.assign({ enableIf, renderIf }, element) }));
-    const elementId = (0, react_1.useMemo)(() => { var _a; return (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(); }, []);
+    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,
+        elementRenderIf: renderIf,
+        unregister,
+    });
+    const elementId = (0, react_1.useId)();
     (0, react_1.useEffect)(() => {
-        const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }));
-        return () => subscription.unsubscribe();
-    }, [checkField, props, props.watch]);
-    return (render
-        ? react_1.default.createElement(react_hook_form_1.Controller, { name: element.name, control: props.control, rules: Object.assign({ required: {
-                    value: required,
-                    message: (_b = validation.message) !== null && _b !== void 0 ? _b : ''
-                }, pattern: validation.regex ? {
-                    value: validation.regex,
-                    message: (_c = validation.message) !== null && _c !== void 0 ? _c : ''
-                } : undefined }, validation), render: ({ field: { onChange, value }, fieldState: { invalid, error } }) => {
-                var _a;
-                return (react_1.default.createElement(Textarea, Object.assign({}, element, { 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 })));
-            } })
-        : null);
+        const unsubscribe = watch((formData, { name, type }) => {
+            if (!name)
+                return;
+            if (enableIf) {
+                checkEnable(formData, { name, type });
+            }
+            if (renderIf) {
+                checkRender(formData, { name, type });
+            }
+        });
+        return () => unsubscribe.unsubscribe();
+    }, [watch]);
+    if (!render)
+        return null;
+    return (react_1.default.createElement(react_hook_form_1.Controller, { name: name, control: control, rules: Object.assign({ required: {
+                value: required,
+                message: message !== null && message !== void 0 ? message : '',
+            }, pattern: regex
+                ? {
+                    value: regex,
+                    message: message !== null && message !== void 0 ? 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 })));
+        } }));
 };
 exports.default = MakeTextarea;

package/dist/components/make-toggle/make-toggle.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 __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)
@@ -34,33 +44,51 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
-const field_render_1 = require("../../hooks/field-render");
-const general_1 = require("../../tools/general");
 const component_state_1 = require("../../context/component/component-state");
-const MakeToggle = (_a) => {
-    var _b, _c;
-    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), { enableIf, renderIf } = _d, element = __rest(_d, ["validation", "enableIf", "renderIf"]), props = __rest(_a, ["element"]);
+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 { render, enable, checkField } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element: Object.assign({ enableIf, renderIf }, element) }));
-    const elementId = (0, react_1.useMemo)(() => { var _a; return (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(); }, []);
+    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,
+        elementRenderIf: renderIf,
+        unregister,
+    });
+    const elementId = (0, react_1.useId)();
     (0, react_1.useEffect)(() => {
-        const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }));
-        return () => subscription.unsubscribe();
-    }, [checkField, props, props.watch]);
-    return (render
-        ? react_1.default.createElement(react_hook_form_1.Controller, { control: props.control, name: element.name, rules: Object.assign({ required: {
-                    value: required,
-                    message: (_b = validation.message) !== null && _b !== void 0 ? _b : ''
-                }, pattern: validation.regex ? {
-                    value: validation.regex,
-                    message: (_c = validation.message) !== null && _c !== void 0 ? _c : ''
-                } : undefined }, validation), render: ({ field: { onChange, value }, fieldState: { invalid, error } }) => {
-                var _a;
-                return (react_1.default.createElement(Toggle, Object.assign({}, element, { 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 })));
-            } })
-        : null);
+        const unsubscribe = watch((formData, { name, type }) => {
+            if (!name)
+                return;
+            if (enableIf) {
+                checkEnable(formData, { name, type });
+            }
+            if (renderIf) {
+                checkRender(formData, { name, type });
+            }
+        });
+        return () => unsubscribe.unsubscribe();
+    }, [watch]);
+    if (!render)
+        return null;
+    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: name, rules: Object.assign({ required: {
+                value: required,
+                message: message !== null && message !== void 0 ? message : '',
+            }, pattern: regex
+                ? {
+                    value: regex,
+                    message: message !== null && message !== void 0 ? 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 })));
+        } }));
 };
 exports.default = MakeToggle;

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

@@ -1,5 +1,38 @@
 "use strict";
 'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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 __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)
@@ -15,25 +48,46 @@ 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 react_1 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
 const input_upload_1 = __importDefault(require("../input-upload/input-upload"));
-const field_render_1 = require("../../hooks/field-render");
-const MakeUpload = (_a) => {
-    var _b, _c;
-    var _d = _a.element, _e = _d.validation, { required } = _e, validation = __rest(_e, ["required"]), { enableIf, renderIf } = _d, element = __rest(_d, ["validation", "enableIf", "renderIf"]), props = __rest(_a, ["element"]);
-    const { render, enable } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element: Object.assign({ enableIf, renderIf }, element) }));
-    return (render
-        ? react_1.default.createElement(react_hook_form_1.Controller, { control: props.control, name: element.name, rules: Object.assign({ required: {
-                    value: required,
-                    message: (_b = validation.message) !== null && _b !== void 0 ? _b : ''
-                }, pattern: validation.regex ? {
-                    value: validation.regex,
-                    message: (_c = validation.message) !== null && _c !== void 0 ? _c : ''
-                } : undefined }, validation), render: ({ field: { onChange } }) => {
-                var _a;
-                return (react_1.default.createElement(input_upload_1.default, Object.assign({}, element, { onChange: onChange, disabled: (_a = element.disabled) !== null && _a !== void 0 ? _a : !enable })));
-            } })
-        : null);
+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,
+        elementRenderIf: renderIf,
+        unregister,
+    });
+    const elementId = (0, react_1.useId)();
+    (0, react_1.useEffect)(() => {
+        const unsubscribe = watch((formData, { name, type }) => {
+            if (!name)
+                return;
+            if (enableIf) {
+                checkEnable(formData, { name, type });
+            }
+            if (renderIf) {
+                checkRender(formData, { name, type });
+            }
+        });
+        return () => unsubscribe.unsubscribe();
+    }, [watch]);
+    if (!render)
+        return null;
+    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: name, rules: Object.assign({ required: {
+                value: required,
+                message: message !== null && message !== void 0 ? message : '',
+            }, pattern: regex
+                ? {
+                    value: regex,
+                    message: message !== null && message !== void 0 ? 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 })));
+        } }));
 };
 exports.default = MakeUpload;