dynamic-modal 1.0.13 → 1.1.4

package/dist/components/make-toggle/make-toggle.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,26 +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 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"]), 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 { 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)(); }, []);
     (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: {
-                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 : ''
-                }
-            }, render: ({ field: { onChange, value } }) => {
-                var _a, _b;
-                return (react_1.default.createElement(react_2.Switch, Object.assign({}, element, { id: (_a = element.id) !== null && _a !== void 0 ? _a : (0, general_1.generateId)(), isSelected: value, onValueChange: onChange, isDisabled: (_b = element.disabled) !== null && _b !== void 0 ? _b : !enable }), element.label));
+                } : 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);
 };

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

@@ -1,4 +1,5 @@
 "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)
@@ -20,18 +21,18 @@ 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"]), element = __rest(_d, ["validation"]), props = __rest(_a, ["element"]);
-    const { render, enable } = (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 { 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: {
-                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 : ''
-                }
-            }, render: ({ field: { onChange } }) => {
+                } : undefined }, validation), render: ({ field: { onChange } }) => {
                 var _a;
-                return (react_1.default.createElement(input_upload_1.default, Object.assign({}, element, { disabled: (_a = element.disabled) !== null && _a !== void 0 ? _a : !enable, onChange: onChange })));
+                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);
 };

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

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

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

@@ -0,0 +1,45 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentState = exports.ComponentStateContext = void 0;
+const react_1 = __importStar(require("react"));
+const react_2 = require("react");
+exports.ComponentStateContext = (0, react_2.createContext)({});
+const ComponentState = ({ children, components }) => {
+    const value = (0, react_1.useMemo)(() => components, []);
+    return (react_1.default.createElement(exports.ComponentStateContext.Provider, { value: value }, children));
+};
+exports.ComponentState = ComponentState;

package/dist/hooks/field-render.js

@@ -60,7 +60,7 @@ const useFieldRender = ({ element, setValue, unregister }) => {
             }
         }
         else if (enableCondition && enableConditionList.includes(key) && fieldValidValue) {
-            const enableStatus = element.enableIf[key].includes(targetField) || element.enableIf[key].includes('');
+            const enableStatus = element.enableIf[key].includes(targetField) || element.enableIf[key].includes('*');
             if (enable !== enableStatus)
                 setEnable(enableStatus);
         }

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

@@ -0,0 +1,27 @@
+import { FC, PropsWithChildren } from "react";
+import { FieldError } from "react-hook-form";
+import { IOption } from "./option";
+import { IMakeInput } from "./make-input";
+import { IMakeButton } from "./make-button";
+import { IMakeSelect } from "./make-select";
+import { IMakeTextarea } from "./make-textarea";
+import { IMakeToggle } from "./make-toggle";
+export interface IComponentAditionalProps {
+    onChange: (...event: any[]) => void;
+    value: any;
+    invalid: boolean;
+    error?: FieldError;
+    liveSearching?: boolean;
+}
+export interface IComponentState {
+    ModalButtonCancel: FC<Omit<IMakeButton, 'elementType'>>;
+    ModalButtonAction: FC<Omit<IMakeButton, 'elementType'>>;
+    Button: FC<Omit<IMakeButton, 'elementType'>>;
+    Input: FC<Omit<IMakeInput, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> & IComponentAditionalProps>;
+    Select: FC<Omit<IMakeSelect, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> & IComponentAditionalProps & Record<'options', Array<IOption>>>;
+    Textarea: FC<Omit<IMakeTextarea, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> & IComponentAditionalProps>;
+    Toggle: FC<Omit<IMakeToggle, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> & IComponentAditionalProps>;
+}
+export interface IComponentStateProps extends PropsWithChildren {
+    components: IComponentState;
+}

package/dist/interfaces/field.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties } from 'react';
 import { Control, FieldValues, UseFormSetValue, UseFormUnregister, UseFormWatch } from 'react-hook-form';
+import { IModalRenderCondition } from './modal';
 export interface IValidationBase<T> {
     value: T;
     message: string;
@@ -8,10 +9,11 @@ export interface IField {
     name: string;
     id?: string;
     label?: string;
-    styles?: CSSProperties;
-    defaultValue?: string;
-    renderIf?: Record<string, Array<string | number>>;
-    enableIf?: Record<string, Array<string | number>>;
+    style?: CSSProperties;
+    placeholder?: string;
+    defaultValue?: any;
+    renderIf?: IModalRenderCondition;
+    enableIf?: IModalRenderCondition;
     validation: {
         required: boolean;
         regex?: RegExp;

package/dist/interfaces/input-upload.d.ts

@@ -11,7 +11,7 @@ export interface IInputUpload {
     accept?: string;
     label?: string;
     helpText?: string;
-    styles?: CSSProperties;
+    style?: CSSProperties;
     readAsArrayBuffer?: boolean;
     name: string;
     disabled?: boolean;

package/dist/interfaces/make-button.d.ts

@@ -1,18 +1,17 @@
 import { CSSProperties } from 'react';
 import { IFieldProps } from './field';
 export interface IMakeButton {
+    id?: string;
     elementType: 'button';
     disabled?: boolean;
     className?: string;
-    variant?: 'solid' | 'light' | 'flat' | 'bordered' | 'faded' | 'shadow' | 'ghost';
+    style?: CSSProperties;
+    variant?: string;
     text?: string;
     type?: 'button' | 'submit' | 'reset';
     onClick?: () => void;
-    iconName?: string;
-    iconSize?: number | string;
-    iconClassName?: CSSProperties;
-    color?: 'primary' | 'secondary' | 'default' | 'success' | 'warning' | 'danger';
+    color?: string;
 }
 export interface IMakeButtonProps extends IFieldProps {
-    element: IMakeButton;
+    element: Omit<IMakeButton, 'elementType'>;
 }

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

@@ -0,0 +1,12 @@
+import { CSSProperties, FC } from 'react';
+import { IFieldProps } from './field';
+export interface IMakeDescription {
+    elementType: 'text';
+    text: string;
+    containerStyle?: CSSProperties;
+    textStyle?: CSSProperties;
+    Icon?: FC;
+}
+export interface IMakeDescriptionProps extends IFieldProps {
+    element: Omit<IMakeDescription, 'elementType'>;
+}

package/dist/interfaces/make-field-group.d.ts

@@ -5,6 +5,7 @@ export interface IMakeFieldGroup {
     elementType: 'group';
     groups: Array<IModalField>;
     style?: CSSProperties;
+    title?: string;
 }
 export interface IMakeFieldGroupProps extends IFieldProps {
     element: IMakeFieldGroup;

package/dist/interfaces/{make-field.d.ts → make-input.d.ts}

@@ -2,11 +2,11 @@ import { HTMLInputTypeAttribute } from 'react';
 import { IField, IFieldProps } from './field';
 export interface IMakeInput extends IField {
     elementType: 'input';
-    placeHolder?: string;
+    placeholder?: string;
     min?: string;
     max?: string;
     type?: HTMLInputTypeAttribute;
 }
 export interface IMakeInputProps extends IFieldProps {
-    element: IMakeInput;
+    element: Omit<IMakeInput, 'elementType'>;
 }

package/dist/interfaces/make-select.d.ts

@@ -1,10 +1,13 @@
 import { IField, IFieldProps } from './field';
 import { IModalLiveDataCondition } from './modal';
+import { IOption } from './option';
 export interface IMakeSelect extends IField {
     elementType: 'select';
-    options: Array<Record<'id' | 'name', string>>;
+    options: Array<IOption>;
     liveData?: IModalLiveDataCondition;
+    isSearch?: boolean;
+    isMulti?: boolean;
 }
 export interface IMakeSelectProps extends IFieldProps {
-    element: IMakeSelect;
+    element: Omit<IMakeSelect, 'elementType'>;
 }

package/dist/interfaces/make-textarea.d.ts

@@ -5,5 +5,5 @@ export interface IMakeTextarea extends IField {
     rows?: number;
 }
 export interface IMakeTextareaProps extends IFieldProps {
-    element: IMakeTextarea;
+    element: Omit<IMakeTextarea, 'elementType'>;
 }

package/dist/interfaces/make-toggle.d.ts

@@ -3,5 +3,5 @@ export interface IMakeToggle extends IField {
     elementType: 'toggle';
 }
 export interface IMakeToggleProps extends IFieldProps {
-    element: IMakeToggle;
+    element: Omit<IMakeToggle, 'elementType'>;
 }

package/dist/interfaces/make-upload.d.ts

@@ -8,5 +8,5 @@ export interface IMakeUpload extends Omit<IField, 'defaultValue'> {
     readAsArrayBuffer?: boolean;
 }
 export interface IMakeUploadProps extends IFieldProps {
-    element: IMakeUpload;
+    element: Omit<IMakeUpload, 'elementType'>;
 }

package/dist/interfaces/modal.d.ts

@@ -1,39 +1,34 @@
 import { CSSProperties } from 'react';
 import { IMakeSelect } from './make-select';
-import { IMakeInput } from './make-field';
+import { IMakeInput } from './make-input';
 import { IMakeTextarea } from './make-textarea';
 import { IMakeToggle } from './make-toggle';
-import { IMakeMultiSelect } from './make-multi-select';
-import { IMakeText } from './make-text';
+import { IMakeDescription } from './make-description';
 import { IMakeFieldGroup } from './make-field-group';
 import { IMakeUpload } from './make-upload';
 import { IOption } from './option';
 import { IMakeButton } from './make-button';
-import { IMakeAutoComplete } from './make-autocomplete';
-export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeMultiSelect | IMakeText | IMakeUpload | IMakeButton | IMakeAutoComplete;
-export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle | IMakeMultiSelect;
-export type IModalRenderCondition = Record<string, Array<string | number>>;
+export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeDescription | IMakeUpload | IMakeButton;
+export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle;
+export type IModalRenderCondition = Record<string, Array<string | number | boolean> | undefined>;
 export type IModalLiveDataCondition = {
     action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
     condition: Array<string>;
 };
 export interface IModalConfigProps {
-    fields: Array<IModalField>;
-    title: string;
-    action: {
-        name: string;
-        action?: (data: any) => void;
-        hide?: boolean;
-    };
-    cancel?: {
-        name?: string;
-        action?: () => void;
-        hide?: boolean;
-    };
     reservedData?: Record<string, any>;
-    styles?: CSSProperties;
+    title: string;
+    fields: Array<IModalField>;
+    out: (data: any) => void;
+    onClose?: () => void;
+    style?: CSSProperties;
     overFlowBody?: string | number;
     minHeightBody?: string | number;
+    actions: {
+        containerStyle?: CSSProperties;
+        cancel?: Omit<IMakeButton, 'elementType'>;
+        action: Omit<IMakeButton, 'elementType'>;
+    };
 }
 export type IModalConfigLoader<T = any, D = any> = (props: T, action: (modalResult: D) => void) => IModalConfigProps;
 export interface IModal {

package/dist/modal.js

@@ -33,6 +33,17 @@ 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 };
 };
@@ -40,19 +51,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 const react_1 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
-const react_2 = require("@nextui-org/react");
 const portal_1 = require("./components/portal/portal");
 const make_toggle_1 = __importDefault(require("./components/make-toggle/make-toggle"));
 const make_input_1 = __importDefault(require("./components/make-input/make-input"));
 const make_select_1 = __importDefault(require("./components/make-select/make-select"));
 const make_textarea_1 = __importDefault(require("./components/make-textarea/make-textarea"));
-const make_multi_select_1 = __importDefault(require("./components/make-multi-select/make-multi-select"));
-const make_text_1 = __importDefault(require("./components/make-text/make-text"));
+const make_description_1 = __importDefault(require("./components/make-description/make-description"));
 const make_upload_1 = __importDefault(require("./components/make-upload/make-upload"));
 const make_button_1 = __importDefault(require("./components/make-button/make-button"));
-const make_autocomplete_1 = __importDefault(require("./components/make-autocomplete/make-autocomplete"));
+const component_state_1 = require("./context/component/component-state");
 const Modal = ({ open, close, config }) => {
-    var _a, _b;
+    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 } = (0, react_hook_form_1.useForm)();
@@ -85,7 +94,9 @@ const Modal = ({ open, close, config }) => {
         });
         setDefaultLoaded(true);
     };
-    const getRender = (element, index, isEndOfRender = false) => {
+    const getRender = (_a, index, isEndOfRender) => {
+        var { elementType } = _a, element = __rest(_a, ["elementType"]);
+        if (isEndOfRender === void 0) { isEndOfRender = false; }
         if (isEndOfRender && modalReady)
             setTimeout(() => autoLoadField(modalReady.fields), 200);
         const props = {
@@ -94,29 +105,25 @@ const Modal = ({ open, close, config }) => {
             setValue,
             unregister
         };
-        return element.elementType === 'input'
+        return elementType === 'input'
             ? react_1.default.createElement(make_input_1.default, Object.assign({}, props, { key: `modal-input-${index}`, element: element }))
-            : element.elementType === 'select'
+            : elementType === 'select'
                 ? react_1.default.createElement(make_select_1.default, Object.assign({}, props, { key: `modal-select-${index}`, element: element }))
-                : element.elementType === 'textarea'
+                : elementType === 'textarea'
                     ? react_1.default.createElement(make_textarea_1.default, Object.assign({}, props, { key: `modal-textarea-${index}`, element: element }))
-                    : element.elementType === 'toggle'
+                    : elementType === 'toggle'
                         ? react_1.default.createElement(make_toggle_1.default, Object.assign({}, props, { key: `modal-toggle-${index}`, element: element }))
-                        : element.elementType === 'multiselect'
-                            ? react_1.default.createElement(make_multi_select_1.default, Object.assign({}, props, { key: `modal-multiselect-${index}`, element: element }))
-                            : element.elementType === 'text'
-                                ? react_1.default.createElement(make_text_1.default, Object.assign({}, props, { key: `modal-text-${index}`, element: element }))
-                                : element.elementType === 'upload'
-                                    ? react_1.default.createElement(make_upload_1.default, Object.assign({}, props, { key: `modal-upload-${index}`, element: element }))
-                                    : element.elementType === 'button'
-                                        ? react_1.default.createElement(make_button_1.default, Object.assign({}, props, { key: `modal-button-${index}`, element: element }))
-                                        : element.elementType === 'autocomplete'
-                                            ? react_1.default.createElement(make_autocomplete_1.default, Object.assign({}, props, { key: `modal-autocomplete-${index}`, element: element }))
-                                            : null;
+                        : elementType === 'text'
+                            ? react_1.default.createElement(make_description_1.default, Object.assign({}, props, { key: `modal-text-${index}`, element: element }))
+                            : elementType === 'upload'
+                                ? react_1.default.createElement(make_upload_1.default, Object.assign({}, props, { key: `modal-upload-${index}`, element: element }))
+                                : elementType === 'button'
+                                    ? react_1.default.createElement(make_button_1.default, Object.assign({}, props, { key: `modal-button-${index}`, element: element }))
+                                    : null;
     };
     const closeHandler = () => {
-        if ((modalReady === null || modalReady === void 0 ? void 0 : modalReady.cancel) && modalReady.cancel.action)
-            modalReady.cancel.action();
+        if (modalReady === null || modalReady === void 0 ? void 0 : modalReady.onClose)
+            modalReady.onClose();
         setTimeout(() => {
             const form = getValues();
             unregister(Object.keys(form));
@@ -126,8 +133,8 @@ const Modal = ({ open, close, config }) => {
         }, 200);
     };
     const actionHandler = (data) => {
-        if ((modalReady === null || modalReady === void 0 ? void 0 : modalReady.action) && modalReady.action.action)
-            modalReady.action.action(Object.assign(Object.assign({}, modalReady === null || modalReady === void 0 ? void 0 : modalReady.reservedData), 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));
         closeHandler();
     };
     (0, react_1.useEffect)(() => {
@@ -136,29 +143,29 @@ const Modal = ({ open, close, config }) => {
     }, [config, modalReady, open]);
     return (modalReady
         ? react_1.default.createElement(portal_1.Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal' },
-            react_1.default.createElement("div", { className: 'rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]', style: Object.assign({}, modalReady.styles) },
+            react_1.default.createElement("div", { className: 'rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]', style: modalReady.style },
                 react_1.default.createElement("form", { className: 'flex flex-col p-4 gap-4', autoComplete: 'off', onSubmit: handleSubmit(actionHandler) },
                     react_1.default.createElement("h2", { className: 'text-bold text-center border-b pb-4 font-semibold' }, modalReady.title),
-                    react_1.default.createElement("div", { className: 'flex flex-col items-center gap-4 py-4', style: {
+                    react_1.default.createElement("div", { className: 'flex flex-col gap-4 py-4', style: {
                             overflowY: modalReady.overFlowBody ? 'auto' : undefined,
                             height: modalReady.overFlowBody,
                             minHeight: modalReady.minHeightBody
                         } }, modalReady.fields.map((element, index) => {
                         const isEndOfRender = index + 1 === modalReady.fields.length;
                         if (element.elementType === 'group') {
-                            return (react_1.default.createElement("div", { key: `modal-group-${index}`, className: 'flex gap-4 w-full', style: element.style }, element.groups
-                                .filter(sub => ['input', 'select', 'toggle', 'multiselect', 'upload', 'button', 'autocomplete'].includes(sub.elementType))
-                                .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender))));
+                            return (react_1.default.createElement("div", { key: `modal-group-${index}`, className: 'flex flex-col w-full gap-2' },
+                                element.title && react_1.default.createElement("h3", { className: 'font-bold border-b-2 pb-2 mb-2' }, element.title),
+                                react_1.default.createElement("div", { key: `modal-group-${index}`, className: 'flex gap-4 w-full', style: element.style }, element.groups
+                                    .filter(sub => ['input', 'select', 'toggle', 'multiselect', 'upload', 'button', 'autocomplete'].includes(sub.elementType))
+                                    .map((sub, subIndex) => getRender(sub, index + subIndex, isEndOfRender)))));
                         }
                         else {
                             return getRender(element, index, isEndOfRender);
                         }
                     })),
-                    react_1.default.createElement("div", { className: 'flex items-center justify-around gap-4 py-2 border-t' },
-                        modalReady.cancel &&
-                            react_1.default.createElement(react_2.Button, { variant: 'bordered', onClick: closeHandler, type: 'reset', className: 'w-[140px]' }, (_a = modalReady.cancel.name) !== null && _a !== void 0 ? _a : 'Close'),
-                        modalReady.action &&
-                            react_1.default.createElement(react_2.Button, { color: 'primary', type: 'submit', className: 'w-[140px]' }, (_b = modalReady.action.name) !== null && _b !== void 0 ? _b : 'Ok')))))
+                    react_1.default.createElement("div", { className: 'flex gap-4 items-center justify-center border-t', style: modalReady === null || modalReady === void 0 ? void 0 : modalReady.actions.containerStyle },
+                        modalReady.actions.cancel && react_1.default.createElement(ModalButtonCancel, Object.assign({}, modalReady.actions.cancel, { onClick: closeHandler })),
+                        react_1.default.createElement(ModalButtonAction, Object.assign({}, modalReady.actions.action, { type: 'submit' }))))))
         : null);
 };
 exports.Modal = Modal;

package/dist/tools/general.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateId = void 0;
 const generateId = () => {

package/examples/enable-if.ts

@@ -112,16 +112,14 @@ const enableIfModal: IEnableIfModal = {
           ]
         },
       ],
-      styles: { // Put here styles for modal like height or width
+      style: { // Put here styles for modal like height or width
         width: '500px'
       },
       title: `Title of enable if modal`, //Title of modal
-      action: {
-        name: 'Save', //Name of action button 
-        action //Function to receive data from modal
-      },
-      cancel: {
-        name: 'Cancel' //Name of cancel button
+      out: action, //Function to receive data from modal
+      actions: { //Actions of modal, all props that you define here will be pass to ModalButtonCancel and ModalButtonAction components in your ComponentState
+        action: { text:'Action', color: 'primary' },
+        cancel: { text: 'Cancel', color: 'danger' }
       }
     }
   }

package/examples/live-data.ts

@@ -42,20 +42,18 @@ const liveDataModal: ILiveDataModal = {
           },
           liveData: {
             action: props.optionReadAction, //Define live data action (function that receive data selected from other field for execute and build other options)
-            condition: 'typeId' //Define element into modal was to observed
+            condition: ['typeId'] //Define element into modal was to observed
           }
         }
       ],
-      styles: { // Put here styles for modal like height or width
+      style: { // Put here styles for modal like height or width
         width: '500px'
       },
-      title: `Title of live data modal`, //Title of modal
-      action: {
-        name: 'Save', //Name of action button 
-        action //Function to receive data from modal
-      },
-      cancel: {
-        name: 'Cancel' //Name of cancel button
+      title: `Title of enable if modal`, //Title of modal
+      out: action, //Function to receive data from modal
+      actions: { //Actions of modal, all props that you define here will be pass to ModalButtonCancel and ModalButtonAction components in your ComponentState
+        action: { text:'Action', color: 'primary' },
+        cancel: { text: 'Cancel', color: 'danger' }
       }
     }
   }

package/examples/render-if.ts

@@ -113,16 +113,14 @@ const renderIfModal: IRenderIfModal = {
           ]
         },
       ],
-      styles: { // Put here styles for modal like height or width
+      style: { // Put here styles for modal like height or width
         width: '500px'
       },
-      title: `Title of render if modal`, //Title of modal
-      action: {
-        name: 'Save', //Name of action button 
-        action //Function to receive data from modal
-      },
-      cancel: {
-        name: 'Cancel' //Name of cancel button
+      title: `Title of enable if modal`, //Title of modal
+      out: action, //Function to receive data from modal
+      actions: { //Actions of modal, all props that you define here will be pass to ModalButtonCancel and ModalButtonAction components in your ComponentState
+        action: { text:'Action', color: 'Primary' },
+        cancel: { text: 'Cancel', color: 'Danger' }
       }
     }
   }

package/examples/simple.ts

@@ -59,16 +59,14 @@ const simpleModal: ISimpleModal = {
           ]
         },
       ],
-      styles: { // Put here styles for modal like height or width
+      style: { // Put here styles for modal like height or width
         width: '500px'
       },
-      title: `Title of simple modal`, //Title of modal
-      action: {
-        name: 'Save', //Name of action button 
-        action //Function to receive data from modal
-      },
-      cancel: {
-        name: 'Cancel', //Name of cancel button
+      title: `Title of enable if modal`, //Title of modal
+      out: action, //Function to receive data from modal
+      actions: { //Actions of modal, all props that you define here will be pass to ModalButtonCancel and ModalButtonAction components in your ComponentState
+        action: { text:'Action', color: 'Primary' },
+        cancel: { text: 'Cancel', color: 'Danger' }
       }
     }
   }