dynamic-modal 1.0.13 → 1.1.4

package/README-ES.md

@@ -6,12 +6,9 @@
 
 Para que `dynamic-modal` funcione correctamente, debes instalar las siguientes dependencias:
 
-- React 18
-- React-DOM 18
-- react-hook-form
-- NextUI
+- React
 
-Además, es compatible con **Next.js 14**.
+Además, es compatible con **Next.js**.
 
 ## Instalación
 
@@ -21,17 +18,118 @@ Puedes instalar la librería a través de npm:
 npm install dynamic-modal
 ```
 
-## Configuración para Next.js 14
-En el provider principal de tu aplicación Next.js, debes envolver tu aplicación con el componente `NextUIProvider` para que `dynamic-modal` funcione adecuadamente. Aquí un ejemplo:
+## Configuración para Next.js (14 o 15)
+Define los componentes que seran usados por el modal, crea el archivo y configura todos los componentes del modal. Aqui un ejemplo utilizando HeroUI (anteriormente NextUI):
 
 ```jsx
-import { NextUIProvider } from '@nextui-org/react';
+'use client'
+import { Autocomplete, AutocompleteItem, Button, Input, Select, SelectItem, Switch, Textarea } from "@heroui/react";
+import { IComponentState } from "dynamic-modal/src/interfaces/component-state";
+
+export const ModalComponents: IComponentState = {
+  ModalButtonCancel: (props) => {
+    return (
+      <Button 
+        {...props} 
+        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined}  
+        variant={'bordered'}
+      >
+        {props.text}
+      </Button>
+    )
+  },
+  ModalButtonAction: (props) => {
+    return (
+      <Button 
+        {...props} 
+        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined} 
+        variant={'solid'}
+      >
+        {props.text}
+      </Button>)
+  },
+  Button: ({ text, ...props }) => {
+    return (
+      <Button 
+        {...props} 
+        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined}  
+        variant={props.variant as "flat" | "bordered" | "solid" | "light" | "faded" | "shadow" | "ghost" | undefined}
+      >
+        {text}
+      </Button>)
+  },
+  Input: ({ invalid, error, disabled, onChange, ...props }) => {
+    return (
+      <Input 
+        {...props}
+        onValueChange={onChange}
+        errorMessage={error?.message}
+        isInvalid={invalid}
+        isDisabled={disabled}
+        />
+    )
+  },
+  Select: ({ options, invalid, error, isMulti, isSearch, disabled, onChange, value, ...props }) => {
+    return (
+      !isSearch ?
+      <Select 
+        {...props}
+        selectedKeys={isMulti ? value : [value]}
+        onSelectionChange={onChange}
+        selectionMode={isMulti ? 'multiple' : 'single'}
+        errorMessage={error?.message}
+        isInvalid={invalid}
+        isDisabled={disabled}
+        >
+        {options.map((option) => (
+          <SelectItem key={option.id}>{option.name}</SelectItem>
+        ))}
+      </Select> :
+      <Autocomplete 
+        {...props} 
+        selectedKey={value}
+        onSelectionChange={onChange}
+        errorMessage={error?.message}
+        isInvalid={invalid}
+        isDisabled={disabled}
+        >
+        {options.map((item) => (
+          <AutocompleteItem key={item.id}>{item.name}</AutocompleteItem>
+        ))}
+      </Autocomplete>
+    )
+  },
+  Textarea: ({ invalid, error, disabled, ...props }) => {
+    return (
+      <Textarea 
+        {...props}
+        errorMessage={error?.message}
+        isInvalid={invalid}
+        isDisabled={disabled}
+        />
+    )
+  },
+  Toggle: ({ value, onChange, label, invalid, ...props }) => {
+    return(
+      <Switch {...props} isSelected={value} onValueChange={onChange}>
+        {label}
+      </Switch>
+    )
+  }
+}
+```
+
+En el provider principal de tu aplicación Next.js, importa tus componentes del modal (definidos anteriormente) y envuelve tu aplicación con el componente `ComponentState` para que `dynamic-modal` funcione adecuadamente. Aquí un ejemplo:
+
+```jsx
+import { ComponentState } from 'dynamic-modal'
+import { ModalComponents } from "@data/modal-component/modal-component";
 
 function Provider({ children }: Readonly<{ children: ReactNode }>) {
   return (
-    <NextUIProvider>
+    <ComponentState components={ModalComponents}>
       <Component {...pageProps} />
-    </NextUIProvider>
+    </ComponentState>
   );
 }
 
@@ -61,7 +159,7 @@ export default function RootLayout ({
 }
 ```
 
-## Setup for Next.js 13
+## Setup for Next.js 13 o mas antiguo
 Edita el archivo llamado `_document.tsx` y crea el `portal` para el modal (este componente utiliza react portal)
 
 ```jsx

package/README.md

@@ -1,17 +1,15 @@
 # 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
 
 To use `dynamic-modal` properly, ensure you have the following dependencies installed:
 
-- React 18
-- React-DOM 18
-- react-hook-form
-- NextUI
+- React
 
-Additionally, `dynamic-modal` is compatible with **Next.js 14**.
+Additionally, `dynamic-modal` is compatible with **Next.js**.
 
 ## Installation
 
@@ -21,17 +19,118 @@ Install the library via npm:
 npm install dynamic-modal
 ```
 
-## Setup for Next.js 14
-In the main provider of your Next.js application, wrap your app with the `NextUIProvider` component to ensure `dynamic-modal` functions properly. Here’s an example:
+## Setup for Next.js (14 or 15)
+Define your components for use inside modal, create file and configure all modal components. Here´s an example using HeroUI (previously NextUI):
 
 ```jsx
-import { NextUIProvider } from '@nextui-org/react';
+'use client'
+import { Autocomplete, AutocompleteItem, Button, Input, Select, SelectItem, Switch, Textarea } from "@heroui/react";
+import { IComponentState } from "dynamic-modal/src/interfaces/component-state";
+
+export const ModalComponents: IComponentState = {
+  ModalButtonCancel: (props) => {
+    return (
+      <Button 
+        {...props} 
+        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined}  
+        variant={'bordered'}
+      >
+        {props.text}
+      </Button>
+    )
+  },
+  ModalButtonAction: (props) => {
+    return (
+      <Button 
+        {...props} 
+        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined} 
+        variant={'solid'}
+      >
+        {props.text}
+      </Button>)
+  },
+  Button: ({ text, ...props }) => {
+    return (
+      <Button 
+        {...props} 
+        color={props.color as "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined}  
+        variant={props.variant as "flat" | "bordered" | "solid" | "light" | "faded" | "shadow" | "ghost" | undefined}
+      >
+        {text}
+      </Button>)
+  },
+  Input: ({ invalid, error, disabled, onChange, ...props }) => {
+    return (
+      <Input 
+        {...props}
+        onValueChange={onChange}
+        errorMessage={error?.message}
+        isInvalid={invalid}
+        isDisabled={disabled}
+        />
+    )
+  },
+  Select: ({ options, invalid, error, isMulti, isSearch, disabled, onChange, value, ...props }) => {
+    return (
+      !isSearch ?
+      <Select 
+        {...props}
+        selectedKeys={isMulti ? value : [value]}
+        onSelectionChange={onChange}
+        selectionMode={isMulti ? 'multiple' : 'single'}
+        errorMessage={error?.message}
+        isInvalid={invalid}
+        isDisabled={disabled}
+        >
+        {options.map((option) => (
+          <SelectItem key={option.id}>{option.name}</SelectItem>
+        ))}
+      </Select> :
+      <Autocomplete 
+        {...props} 
+        selectedKey={value}
+        onSelectionChange={onChange}
+        errorMessage={error?.message}
+        isInvalid={invalid}
+        isDisabled={disabled}
+        >
+        {options.map((item) => (
+          <AutocompleteItem key={item.id}>{item.name}</AutocompleteItem>
+        ))}
+      </Autocomplete>
+    )
+  },
+  Textarea: ({ invalid, error, disabled, ...props }) => {
+    return (
+      <Textarea 
+        {...props}
+        errorMessage={error?.message}
+        isInvalid={invalid}
+        isDisabled={disabled}
+        />
+    )
+  },
+  Toggle: ({ value, onChange, label, invalid, ...props }) => {
+    return(
+      <Switch {...props} isSelected={value} onValueChange={onChange}>
+        {label}
+      </Switch>
+    )
+  }
+}
+```
+
+In the main provider of your React application, import your modal components (defined previously) and wrap your app with the `ComponentState` component to ensure `dynamic-modal` functions properly. Here’s an example:
+
+```jsx
+import { ComponentState } from 'dynamic-modal'
+import { ModalComponents } from "@data/modal-component/modal-component";
 
 function Provider({ children }: Readonly<{ children: ReactNode }>) {
   return (
-    <NextUIProvider>
+    <ComponentState components={ModalComponents}>
       <Component {...pageProps} />
-    </NextUIProvider>
+    </ComponentState>
   );
 }
 
@@ -61,7 +160,7 @@ export default function RootLayout ({
 }
 ```
 
-## Setup for Next.js 13
+## Setup for Next.js 13 and old
 Edit file named `_document.tsx` and define `portal` for modal (this component use react portal)
 
 ```jsx
@@ -115,5 +214,4 @@ export default ExampleComponent;
 ```
 
 ## Examples
-The examples folder in the repository contains different configuration modes to help you customize your modal.
-
+The examples folder in the repository contains different configuration modes to help you customize your modal.

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

@@ -1,37 +1,5 @@
 "use strict";
-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;
-    };
-})();
+'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)
@@ -43,9 +11,11 @@ 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 general_1 = require("../../tools/general");
+const react_1 = __importDefault(require("react"));
 const InputUpload = (_a) => {
     var _b;
     var { onChange, readAsArrayBuffer } = _a, props = __rest(_a, ["onChange", "readAsArrayBuffer"]);
@@ -84,13 +54,9 @@ const InputUpload = (_a) => {
             };
         });
     };
-    const elementId = (0, react_1.useMemo)(() => {
-        var _a;
-        return (_a = props.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)();
-    }, [props.id]);
     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-${elementId}` }, props.label),
-        react_1.default.createElement("input", Object.assign({ className: "file:transition-all file:delay-150 block w-full text-sm text-slate-500\n        file:mr-4 file:py-2 file:px-4 file:rounded-md\n        file:border-0 file:text-sm file:font-semibold\n        file:bg-gray-100 file:text-blue-600\n        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed", "aria-describedby": `file-input-${elementId}-help`, id: `file-input-${elementId}`, 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-${elementId}-help` }, (_b = props.helpText) === null || _b === void 0 ? void 0 : _b.toUpperCase())));
+        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\n        file:mr-4 file:py-2 file:px-4 file:rounded-md\n        file:border-0 file:text-sm file:font-semibold\n        file:bg-gray-100 file:text-blue-600\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())));
 };
 exports.default = InputUpload;

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

@@ -1,22 +1,45 @@
 "use strict";
-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 };
-};
+'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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const MakeButton = (_a) => {
-    var _b = _a.element, { text } = _b, element = __rest(_b, ["text"]);
-    return (react_1.default.createElement("button", Object.assign({ className: 'transition-all delay-100 hover:translate-y-1 bg-blue-500 text-white hover:bg-blue-700 rounded w-11/12 h-[40px] p-2' }, element), text));
+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 })));
 };
 exports.default = MakeButton;

package/dist/components/make-description/make-description.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IMakeDescriptionProps } from '../../interfaces/make-description';
+declare const MakeDescription: FC<IMakeDescriptionProps>;
+export default MakeDescription;

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

@@ -0,0 +1,13 @@
+"use strict";
+'use client';
+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 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)));
+};
+exports.default = MakeDescription;

package/dist/components/make-input/make-input.d.ts

@@ -1,4 +1,4 @@
 import { FC } from 'react';
-import { IMakeInputProps } from '../../interfaces/make-field';
+import { IMakeInputProps } from '../../interfaces/make-input';
 declare const MakeInput: FC<IMakeInputProps>;
 export default MakeInput;

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

@@ -1,4 +1,5 @@
 "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);
@@ -47,23 +48,28 @@ 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 react_2 = require("@nextui-org/react");
+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"]), element = __rest(_d, ["validation"]), props = __rest(_a, ["element"]);
-    const { render, enable, checkField } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element }));
+    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 { 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)(); }, []);
     (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, pattern: {
-                    value: (_b = validation.regex) !== null && _b !== void 0 ? _b : /(.*)/,
+        ? 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 : ''
-                } }, validation), render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
-                var _a, _b, _c;
-                return (react_1.default.createElement(react_2.Input, Object.assign({ size: 'sm' }, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, value: value !== null && value !== void 0 ? value : '', color: invalid ? 'danger' : undefined, isInvalid: invalid, errorMessage: invalid ? ((_b = validation.message) !== null && _b !== void 0 ? _b : '') : undefined, isDisabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable })));
+                } : 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);
 };

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

@@ -1,4 +1,5 @@
 "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);
@@ -48,22 +49,27 @@ 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 react_2 = require("@nextui-org/react");
+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"]), element = __rest(_d, ["validation"]), props = __rest(_a, ["element"]);
-    const { render, enable, checkField, liveData, liveSearching } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element }));
+    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 { 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)(); }, []);
     (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, pattern: {
-                    value: (_b = validation.regex) !== null && _b !== void 0 ? _b : /(.*)/,
+        ? 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 : ''
-                } }, validation), render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
-                var _a, _b, _c, _d;
-                return (react_1.default.createElement(react_2.Select, Object.assign({ size: 'sm' }, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectedKeys: [value], color: invalid ? 'danger' : undefined, isInvalid: invalid, errorMessage: invalid ? ((_b = validation.message) !== null && _b !== void 0 ? _b : '') : undefined, isDisabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.SelectItem, { key: opt.id, value: opt.id }, opt.name)))));
+                } : 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));
 };

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

@@ -1,4 +1,5 @@
 "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);
@@ -48,22 +49,27 @@ 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 react_2 = require("@nextui-org/react");
+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"]), element = __rest(_d, ["validation"]), props = __rest(_a, ["element"]);
-    const { render, enable, checkField } = (0, field_render_1.useFieldRender)(Object.assign(Object.assign({}, props), { element }));
+    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 { 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)(); }, []);
     (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, pattern: {
-                    value: (_b = validation.regex) !== null && _b !== void 0 ? _b : /(.*)/,
+        ? 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 : ''
-                } }, validation), render: ({ field: { onChange, value }, fieldState: { invalid } }) => {
-                var _a, _b, _c;
-                return (react_1.default.createElement(react_2.Textarea, Object.assign({}, element, { disableAutosize: true, id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), onChange: onChange, label: element.label, value: value !== null && value !== void 0 ? value : '', color: invalid ? 'danger' : undefined, isInvalid: invalid, errorMessage: invalid ? ((_b = validation.message) !== null && _b !== void 0 ? _b : '') : undefined, isDisabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable })));
+                } : 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);
 };