dynamic-modal 1.0.12 → 1.1.1

package/src/interfaces/make-upload.ts

@@ -1,14 +1,14 @@
 import { IField, IFieldProps } from './field'
 
 export interface IMakeUpload extends Omit<IField, 'defaultValue'> {
-  elementType: 'upload';
-  helpText?: string;
-  read: boolean;
-  image?: boolean;
-  accept?:string;
-  readAsArrayBuffer?: boolean;
+  elementType: 'upload'
+  helpText?: string
+  read: boolean
+  image?: boolean
+  accept?:string
+  readAsArrayBuffer?: boolean
 }
 
 export interface IMakeUploadProps extends IFieldProps {
-  element: IMakeUpload
+  element: Omit<IMakeUpload, 'elementType'>
 }

package/src/interfaces/modal.ts

@@ -1,45 +1,39 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 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 IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeDescription | IMakeUpload | IMakeButton
 
-export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle | IMakeMultiSelect
+export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle
 
 export type IModalRenderCondition = Record<string, Array<string | number>>
 
 export type IModalLiveDataCondition = {
-  action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
+  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

package/src/interfaces/option.ts

@@ -1,4 +1,4 @@
 export interface IOption {
-  id: string;
-  name: string;
+  id: string
+  name: string
 }

package/src/interfaces/portal.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react'
 
 export interface IPortal {
-  children: ReactNode;
-  closeTime: number;
-  portalOpen: boolean;
-  portalTag?: string;
+  children: ReactNode
+  closeTime: number
+  portalOpen: boolean
+  portalTag?: string
 }

package/src/modal.tsx

@@ -1,21 +1,28 @@
 'use client'
-import React, { useEffect, useState } from 'react'
+
+import React, { useContext, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { Button } from '@nextui-org/react'
 import { Portal } from './components/portal/portal'
 import MakeToggle from './components/make-toggle/make-toggle'
 import MakeInput from './components/make-input/make-input'
 import MakeSelect from './components/make-select/make-select'
 import MakeTextarea from './components/make-textarea/make-textarea'
 import { IModal, IModalField, IModalConfigProps, IFormField } from './interfaces/modal'
-import MakeMultiSelect from './components/make-multi-select/make-multi-select'
-import MakeText from './components/make-text/make-text'
+import MakeDescription from './components/make-description/make-description'
 import { IFieldProps } from './interfaces/field'
 import MakeUpload from './components/make-upload/make-upload'
 import MakeButton from './components/make-button/make-button'
-import MakeAutocomplete from './components/make-autocomplete/make-autocomplete'
+import { IMakeInput } from './interfaces/make-input'
+import { IMakeSelect } from './interfaces/make-select'
+import { IMakeTextarea } from './interfaces/make-textarea'
+import { IMakeToggle } from './interfaces/make-toggle'
+import { IMakeDescription } from './interfaces/make-description'
+import { IMakeUpload } from './interfaces/make-upload'
+import { IMakeButton } from './interfaces/make-button'
+import { ComponentStateContext } from './context/component/component-state'
 
 export const Modal = ({ open, close, config }: IModal) => {
+  const { ModalButtonAction, ModalButtonCancel } = useContext(ComponentStateContext)
   const [modalReady, setModalReady] = useState<IModalConfigProps | undefined>(undefined)
   const [defaultLoaded, setDefaultLoaded] = useState<boolean>(false)
 
@@ -60,7 +67,7 @@ export const Modal = ({ open, close, config }: IModal) => {
     setDefaultLoaded(true)
   }
 
-  const getRender = (element: IModalField, index: number, isEndOfRender: boolean = false) => {
+  const getRender = ({ elementType, ...element }: IModalField, index: number, isEndOfRender: boolean = false) => {
     if (isEndOfRender && modalReady) setTimeout(() => autoLoadField(modalReady.fields), 200)
 
     const props: IFieldProps = {
@@ -70,29 +77,26 @@ export const Modal = ({ open, close, config }: IModal) => {
       unregister
     }
 
-    return element.elementType === 'input'
-      ? <MakeInput {...props} key={`modal-input-${index}`} element={element} />
-      : element.elementType === 'select'
-        ? <MakeSelect {...props} key={`modal-select-${index}`} element={element} />
-        : element.elementType === 'textarea'
-          ? <MakeTextarea {...props} key={`modal-textarea-${index}`} element={element} />
-          : element.elementType === 'toggle'
-            ? <MakeToggle {...props} key={`modal-toggle-${index}`} element={element} />
-            : element.elementType === 'multiselect'
-              ? <MakeMultiSelect {...props} key={`modal-multiselect-${index}`} element={element} />
-              : element.elementType === 'text'
-                ? <MakeText {...props} key={`modal-text-${index}`} element={element} />
-                : element.elementType === 'upload'
-                  ? <MakeUpload {...props} key={`modal-upload-${index}`} element={element} />
-                  : element.elementType === 'button'
-                    ? <MakeButton {...props} key={`modal-button-${index}`} element={element} />
-                    : element.elementType === 'autocomplete'
-                      ? <MakeAutocomplete {...props} key={`modal-autocomplete-${index}`} element={element} />
-                      : null
+    return elementType === 'input'
+      ? <MakeInput {...props} key={`modal-input-${index}`} element={element as IMakeInput} />
+      : elementType === 'select'
+        ? <MakeSelect {...props} key={`modal-select-${index}`} element={element as IMakeSelect} />
+        : elementType === 'textarea'
+          ? <MakeTextarea {...props} key={`modal-textarea-${index}`} element={element as IMakeTextarea} />
+          : elementType === 'toggle'
+            ? <MakeToggle {...props} key={`modal-toggle-${index}`} element={element as IMakeToggle} />
+            : elementType === 'text'
+                ? <MakeDescription {...props} key={`modal-text-${index}`} element={element as IMakeDescription} />
+                : elementType === 'upload'
+                  ? <MakeUpload {...props} key={`modal-upload-${index}`} element={element as IMakeUpload} />
+                  : elementType === 'button'
+                    ? <MakeButton {...props} key={`modal-button-${index}`} element={element as IMakeButton} />
+                    : null
   }
 
   const closeHandler = (): void => {
-    if (modalReady?.cancel && modalReady.cancel.action) modalReady.cancel.action()
+    if (modalReady?.onClose) modalReady.onClose()
+      
     setTimeout(() => {
       const form = getValues()
       unregister(Object.keys(form))
@@ -103,7 +107,7 @@ export const Modal = ({ open, close, config }: IModal) => {
   }
 
   const actionHandler = (data: Record<string, string | number | object>): void => {
-    if (modalReady?.action && modalReady.action.action) modalReady.action.action({ ...modalReady?.reservedData, ...data })
+    modalReady?.out({ ...(modalReady?.reservedData ?? {}), ...data })
     closeHandler()
   }
 
@@ -114,11 +118,11 @@ export const Modal = ({ open, close, config }: IModal) => {
   return (
     modalReady
       ? <Portal closeTime={200} portalOpen={open} portalTag={'#modal-portal'}>
-        <div className='rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]' style={{ ...modalReady.styles }} >
+        <div className='rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]' style={modalReady.style} >
           <form className='flex flex-col p-4 gap-4' autoComplete='off' onSubmit={handleSubmit(actionHandler)}>
             <h2 className='text-bold text-center border-b pb-4 font-semibold'>{modalReady.title}</h2>
             <div
-              className='flex flex-col items-center gap-4 py-4'
+              className='flex flex-col gap-4 py-4'
               style={{
                 overflowY: modalReady.overFlowBody ? 'auto' : undefined,
                 height: modalReady.overFlowBody,
@@ -131,38 +135,24 @@ export const Modal = ({ open, close, config }: IModal) => {
 
                   if (element.elementType === 'group') {
                     return (
-                      <div key={`modal-group-${index}`} className='flex gap-4 w-full' style={element.style} >
-                        {
-                          element.groups
+                      <div key={`modal-group-${index}`} className='flex flex-col w-full gap-2'>
+                        { element.title && <h3 className='font-bold border-b-2 pb-2 mb-2'>{element.title}</h3> }
+                        <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))
-                        }
+                          }
+                        </div>
                       </div>
                     )
                   } else { return getRender(element, index, isEndOfRender) }
                 })
               }
             </div>
-            <div className='flex items-center justify-around gap-4 py-2 border-t'>
-              {modalReady.cancel &&
-                <Button
-                  variant='bordered'
-                  onClick={closeHandler}
-                  type='reset'
-                  className='w-[140px]'
-                >
-                  {modalReady.cancel.name ?? 'Close'}
-                </Button>
-              }
-              {modalReady.action &&
-                <Button
-                  color='primary'
-                  type='submit'
-                  className='w-[140px]'
-                >
-                  {modalReady.action.name ?? 'Ok'}
-                </Button>
-              }
+            <div className='flex gap-4 items-center justify-center border-t' style={modalReady?.actions.containerStyle}>
+              {modalReady.actions.cancel && <ModalButtonCancel {...modalReady.actions.cancel} onClick={closeHandler} />}
+              <ModalButtonAction {...modalReady.actions.action} type='submit' />
             </div>
           </form>
         </div>

package/src/tools/general.ts

@@ -1,3 +1,5 @@
+'use client'
+
 export const generateId = (): string => {
   return Math.random()
     .toString(36)

package/.idea/dynamic-modal.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/dynamic-modal.iml" filepath="$PROJECT_DIR$/.idea/dynamic-modal.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

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

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

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

@@ -1,70 +0,0 @@
-"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;
-    };
-})();
-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;
-};
-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 react_2 = require("@nextui-org/react");
-const MakeAutocomplete = (_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 }));
-    (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 : /(.*)/,
-                    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.Autocomplete, Object.assign({ size: 'sm' }, element, { isDisabled: (_a = element.disabled) !== null && _a !== void 0 ? _a : !enable, id: (_b = element.id) !== null && _b !== void 0 ? _b : (0, general_1.generateId)(), onSelectionChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectedKey: value, color: invalid ? 'danger' : undefined, isInvalid: invalid, errorMessage: invalid ? ((_c = validation.message) !== null && _c !== void 0 ? _c : '') : undefined }), (liveData || ((_d = element.options) !== null && _d !== void 0 ? _d : [])).map((opt) => (react_1.default.createElement(react_2.AutocompleteItem, { key: opt.id, value: opt.id }, opt.name)))));
-            } })
-        : react_1.default.createElement(react_1.default.Fragment, null));
-};
-exports.default = MakeAutocomplete;

package/dist/components/make-multi-select/make-multi-select.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import { IMakeMultiSelectProps } from '../../interfaces/make-multi-select';
-declare const MakeMultiSelect: FC<IMakeMultiSelectProps>;
-export default MakeMultiSelect;

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

@@ -1,70 +0,0 @@
-"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;
-    };
-})();
-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;
-};
-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 react_2 = require("@nextui-org/react");
-const MakeMultiSelect = (_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 }));
-    (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 : /(.*)/,
-                    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)(), onSelectionChange: onChange, label: liveSearching ? 'Loading...' : element.label, selectionMode: "multiple", selectedKeys: value, color: invalid ? 'danger' : undefined, isInvalid: invalid, errorMessage: invalid ? ((_b = validation.message) !== null && _b !== void 0 ? _b : '') : undefined, disabled: (_c = element.disabled) !== null && _c !== void 0 ? _c : !enable, className: 'max-w-lg' }), (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)))));
-            } })
-        : null);
-};
-exports.default = MakeMultiSelect;

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

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

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

@@ -1,11 +0,0 @@
-"use strict";
-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 MakeText = ({ element }) => {
-    return (react_1.default.createElement("div", { className: 'text-xs text-center' },
-        react_1.default.createElement("p", { style: element.styles }, element.text)));
-};
-exports.default = MakeText;

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

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

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

@@ -1,10 +0,0 @@
-"use strict";
-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 MakeTitle = ({ title }) => {
-    return (react_1.default.createElement("div", { className: 'flex text-center items-center justify-center text-xl' }, title));
-};
-exports.default = MakeTitle;

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

@@ -1,11 +0,0 @@
-import { IField, IFieldProps } from './field';
-import { IModalLiveDataCondition } from './modal';
-import { IOption } from './option';
-export interface IMakeAutoComplete extends IField {
-    elementType: 'autocomplete';
-    options: Array<IOption>;
-    liveData?: IModalLiveDataCondition;
-}
-export interface IMakeAutoCompleteProps extends IFieldProps {
-    element: IMakeAutoComplete;
-}

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

@@ -1,12 +0,0 @@
-import { IOption } from './option';
-import { IField, IFieldProps } from './field';
-import { IModalLiveDataCondition } from './modal';
-export interface IMakeMultiSelect extends Omit<IField, 'defaultValue'> {
-    elementType: 'multiselect';
-    options: Array<IOption>;
-    liveData?: IModalLiveDataCondition;
-    defaultValue?: Array<string>;
-}
-export interface IMakeMultiSelectProps extends IFieldProps {
-    element: IMakeMultiSelect;
-}

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

@@ -1,10 +0,0 @@
-import { CSSProperties } from 'react';
-import { IFieldProps } from './field';
-export interface IMakeText {
-    elementType: 'text';
-    text: string;
-    styles?: CSSProperties;
-}
-export interface IMakeTextProps extends IFieldProps {
-    element: IMakeText;
-}

package/dist/interfaces/make-text.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,3 +0,0 @@
-export interface IMakeTitle {
-    title: string;
-}

package/dist/interfaces/make-title.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/make-autocomplete/make-autocomplete.tsx

@@ -1,54 +0,0 @@
-import React, { FC, useEffect } from 'react'
-import { Controller } from 'react-hook-form'
-import { useFieldRender } from '../../hooks/field-render'
-import { generateId } from '../../tools/general'
-import { Autocomplete, AutocompleteItem } from '@nextui-org/react'
-import { IMakeAutoCompleteProps } from '../../interfaces/make-autocomplete'
-
-const MakeAutocomplete: FC<IMakeAutoCompleteProps> = ({ element: { validation: { required, ...validation }, ...element }, ...props }) => {
-  const { render, enable, checkField, liveData, liveSearching } = useFieldRender({ ...props, element })
-
-  useEffect(() => {
-    const subscription = props.watch((value, { name, type }) => checkField(value, { name, type }))
-    return () => subscription.unsubscribe()
-  }, [checkField, props, props.watch])
-
-  return (
-    render
-      ? <Controller
-        control={props.control}
-        name={element.name}
-        rules={{
-          required,
-          pattern: {
-            value: validation.regex as RegExp ?? /(.*)/,
-            message: validation.message ?? ''
-          },
-            ...validation
-        }}
-        render={({ field: { onChange, value }, fieldState: { invalid } }) => (
-          <Autocomplete
-            size='sm'
-            {...element}
-            isDisabled={element.disabled ?? !enable}
-            id={element.id ?? generateId()}
-            onSelectionChange={onChange}
-            label={liveSearching ? 'Loading...' : element.label}
-            selectedKey={value}
-            color={invalid ? 'danger' : undefined}
-            isInvalid={invalid}
-            errorMessage={invalid ? (validation.message ?? '') : undefined}
-          >
-            {
-              (liveData || (element.options ?? [])).map((opt) => (
-                <AutocompleteItem key={opt.id} value={opt.id}>{opt.name}</AutocompleteItem>
-              ))
-            }
-          </Autocomplete>
-        )}
-      />
-      : <></>
-  )
-}
-
-export default MakeAutocomplete