dynamic-modal 1.1.14 → 1.1.15

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

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const InputUpload = ({ onChange, readAsArrayBuffer, ...props }) => {
+const InputUpload = ({ onChange, readAsArrayBuffer, read, helpText, label, ...props }) => {
     const onChangeHandler = (event) => {
-        if (props.read && event.target.files) {
+        if (read && event.target.files) {
             readFileBlob(event.target.files[0], false)
                 .then((result) => onChange(result))
                 .catch((err) => {
@@ -42,8 +42,8 @@ const InputUpload = ({ onChange, readAsArrayBuffer, ...props }) => {
         });
     };
     return (react_1.default.createElement("div", { className: "flex flex-col w-full gap-1 text-center" },
-        props.label && (react_1.default.createElement("label", { className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white", htmlFor: `file-input-${props.id}` }, props.label)),
+        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}` }, label)),
         react_1.default.createElement("input", { className: "file:transition-all file:delay-150 block w-full text-sm text-slate-500\r\n        file:mr-4 file:py-2 file:px-4 file:rounded-md\r\n        file:border-0 file:text-sm file:font-semibold\r\n        file:bg-gray-100 file:text-blue-600\r\n        hover:file:bg-blue-700 hover:file:text-white cursor-pointer disabled:cursor-not-allowed", "aria-describedby": `file-input-${props.id}-help`, id: `file-input-${props.id}`, type: "file", onChange: onChangeHandler, ...props }),
-        react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-300 text-start", id: `file-input-${props.id}-help` }, props.helpText?.toUpperCase())));
+        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` }, helpText?.toUpperCase())));
 };
 exports.default = InputUpload;

package/dist/components/make-custom-upload/make-custom-upload.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IMakeCustomUploadProps } from '../../interfaces/make-custom-upload';
+declare const MakeCustomUpload: FC<IMakeCustomUploadProps>;
+export default MakeCustomUpload;

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

@@ -0,0 +1,97 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const component_state_1 = require("../../context/component/component-state");
+const use_enable_if_1 = __importDefault(require("../../hooks/use-enable-if"));
+const use_render_if_1 = __importDefault(require("../../hooks/use-render-if"));
+const MakeCustomUpload = ({ element, control, watch, unregister, }) => {
+    const { CustomUpload } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
+    const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, ...inputProps } = element;
+    const { checkEnable, enable, setEnable } = (0, use_enable_if_1.default)({
+        elementEnableIf: enableIf,
+    });
+    const { checkRender, render, setRender } = (0, use_render_if_1.default)({
+        elementRenderIf: renderIf,
+    });
+    const elementId = (0, react_1.useId)();
+    (0, react_1.useEffect)(() => {
+        const { unsubscribe } = watch((formData, { name, type }) => {
+            if (!name)
+                return;
+            if (enableIf) {
+                checkEnable(formData, { name, type }).then((enableStatus) => {
+                    if (enableStatus === undefined || enableStatus === null)
+                        return;
+                    if (enable !== enableStatus)
+                        setEnable(enableStatus);
+                });
+            }
+            if (renderIf) {
+                checkRender(formData, { name, type }).then((renderStatus) => {
+                    if (renderStatus === undefined || renderStatus === null)
+                        return;
+                    if (render !== renderStatus) {
+                        if (render && !renderStatus)
+                            unregister(elementName);
+                        setRender(!!renderStatus);
+                    }
+                });
+            }
+        });
+        return () => unsubscribe();
+    }, [watch, render, enable]);
+    if (!render)
+        return null;
+    return (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: elementName, rules: {
+            required: {
+                value: required,
+                message: message ?? '',
+            },
+            pattern: regex
+                ? {
+                    value: regex,
+                    message: message ?? '',
+                }
+                : undefined,
+            ...otherValidation,
+        }, render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => (react_1.default.createElement(CustomUpload, { ...inputProps, name: elementName, id: elementId, onChange: onChange, value: value ?? '', invalid: invalid, error: error, disabled: element.disabled ?? !enable })) }));
+};
+exports.default = MakeCustomUpload;

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

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

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

@@ -0,0 +1,62 @@
+"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 });
+const react_1 = __importStar(require("react"));
+const component_state_1 = require("../../context/component/component-state");
+const MakeWatcher = ({ element, watch }) => {
+    const [value, setValue] = (0, react_1.useState)('');
+    const { Input } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
+    const { watchList, style } = element;
+    const elementId = (0, react_1.useId)();
+    (0, react_1.useEffect)(() => {
+        const { unsubscribe } = watch((formData, { name }) => {
+            if (!name)
+                return;
+            if (watchList.includes(name)) {
+                const watchValue = [];
+                watchList.forEach((watchName) => {
+                    const fragment = formData[watchName];
+                    if (fragment)
+                        watchValue.push(fragment);
+                });
+                setValue(watchValue.join(' '));
+            }
+        });
+        return () => unsubscribe();
+    }, [watch]);
+    return (react_1.default.createElement(Input, { name: `watcher-${elementId}`, id: elementId, value: value ?? '', onChange: () => { }, invalid: false, disabled: true, style: style }));
+};
+exports.default = MakeWatcher;

package/dist/components/portal/portal.js

@@ -59,6 +59,6 @@ const Portal = (props) => {
     }, [mounted, props.closeTime, props.portalOpen, props.portalTag]);
     if (!mounted && !ref.current)
         return null;
-    return (0, react_dom_1.createPortal)(react_1.default.createElement("div", { className: "transition-all delay-100 fixed top-0 left-0 w-full h-full grid place-items-center bg-black bg-opacity-40 z-20" }, props.children), ref.current);
+    return (0, react_dom_1.createPortal)(react_1.default.createElement("div", { className: `transition-all delay-100 fixed top-0 left-0 w-full h-full grid place-items-center bg-black bg-opacity-40 z-20 ${props.useBlur && 'backdrop-blur-xs'}` }, props.children), ref.current);
 };
 exports.Portal = Portal;

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

@@ -6,6 +6,7 @@ import { IMakeButton } from './make-button';
 import { IMakeSelect } from './make-select';
 import { IMakeTextarea } from './make-textarea';
 import { IMakeToggle } from './make-toggle';
+import { IMakeCustomUpload } from './make-custom-upload';
 export interface IComponentAditionalProps {
     onChange: (...event: any[]) => void;
     value: any;
@@ -18,6 +19,7 @@ export interface IComponentState {
     ModalButtonAction: FC<Omit<IMakeButton, 'elementType'>>;
     Button: FC<Omit<IMakeButton, 'elementType'>>;
     Input: FC<Omit<IMakeInput, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> & IComponentAditionalProps>;
+    CustomUpload: FC<Omit<IMakeCustomUpload, '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>;

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

@@ -0,0 +1,12 @@
+import { ChangeEvent, CSSProperties } from 'react';
+export interface ICustomUpload {
+    id?: string;
+    value?: string;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    accept?: string;
+    label?: string;
+    helpText?: string;
+    style?: CSSProperties;
+    name: string;
+    disabled?: boolean;
+}

package/dist/interfaces/custom-upload.js

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

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

@@ -0,0 +1,7 @@
+import { IField, IFieldProps } from './field';
+export interface IMakeCustomUpload extends IField {
+    elementType: 'custom-upload';
+}
+export interface IMakeCustomUploadProps extends IFieldProps {
+    element: Omit<IMakeCustomUpload, 'elementType'>;
+}

package/dist/interfaces/make-custom-upload.js

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

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

@@ -0,0 +1,8 @@
+import { IField, IFieldProps } from './field';
+export interface IMakeWatcher extends Pick<IField, 'style'> {
+    elementType: 'watcher';
+    watchList: Array<string>;
+}
+export interface IMakeWatcherProps extends IFieldProps {
+    element: Omit<IMakeWatcher, 'elementType'>;
+}

package/dist/interfaces/make-watcher.js

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

package/dist/interfaces/modal.d.ts

@@ -8,7 +8,9 @@ import { IMakeFieldGroup } from './make-field-group';
 import { IMakeUpload } from './make-upload';
 import { IOption } from './option';
 import { IMakeButton } from './make-button';
-export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeDescription | IMakeUpload | IMakeButton;
+import { IMakeCustomUpload } from './make-custom-upload';
+import { IMakeWatcher } from './make-watcher';
+export type IModalField = IMakeSelect | IMakeInput | IMakeFieldGroup | IMakeTextarea | IMakeToggle | IMakeDescription | IMakeUpload | IMakeCustomUpload | IMakeWatcher | IMakeButton;
 export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle;
 export interface IModalRenderAction {
     action: (data: string, ...args: any[]) => Promise<boolean>;
@@ -30,6 +32,7 @@ export interface IModalConfigProps {
     overFlowBody?: string | number;
     minHeightBody?: string | number;
     useSubmit?: boolean;
+    useBlur?: boolean;
     actions: {
         containerStyle?: CSSProperties;
         cancel?: Omit<IMakeButton, 'elementType'>;

package/dist/interfaces/portal.d.ts

@@ -4,4 +4,5 @@ export interface IPortal {
     closeTime: number;
     portalOpen: boolean;
     portalTag?: string;
+    useBlur?: boolean;
 }

package/dist/modal.js

@@ -49,13 +49,15 @@ const make_description_1 = __importDefault(require("./components/make-descriptio
 const make_upload_1 = __importDefault(require("./components/make-upload/make-upload"));
 const make_button_1 = __importDefault(require("./components/make-button/make-button"));
 const component_state_1 = require("./context/component/component-state");
+const make_custom_upload_1 = __importDefault(require("./components/make-custom-upload/make-custom-upload"));
+const make_watcher_1 = __importDefault(require("./components/make-watcher/make-watcher"));
 const Modal = ({ open, close, config }) => {
     const { ModalButtonAction, ModalButtonCancel } = (0, react_1.useContext)(component_state_1.ComponentStateContext);
     const [modalReady, setModalReady] = (0, react_1.useState)(undefined);
     const [defaultLoaded, setDefaultLoaded] = (0, react_1.useState)(false);
     const { control, handleSubmit, getValues, unregister, setValue, watch, trigger, reset, getFieldState, } = (0, react_hook_form_1.useForm)();
     const formValueHandler = (element) => {
-        if (['group', 'upload', 'text'].includes(element.elementType))
+        if (['group', 'upload', 'custom-upload', 'text'].includes(element.elementType))
             return;
         if (!element.defaultValue && element.renderIf) {
             unregister(element.name);
@@ -103,7 +105,7 @@ const Modal = ({ open, close, config }) => {
             setValue,
             unregister,
         };
-        return elementType === 'input' ? (react_1.default.createElement(make_input_1.default, { ...props, key: `modal-input-${index}`, element: element })) : elementType === 'select' ? (react_1.default.createElement(make_select_1.default, { ...props, key: `modal-select-${index}`, element: element })) : elementType === 'textarea' ? (react_1.default.createElement(make_textarea_1.default, { ...props, key: `modal-textarea-${index}`, element: element })) : elementType === 'toggle' ? (react_1.default.createElement(make_toggle_1.default, { ...props, key: `modal-toggle-${index}`, element: element })) : elementType === 'text' ? (react_1.default.createElement(make_description_1.default, { ...props, key: `modal-text-${index}`, element: element })) : elementType === 'upload' ? (react_1.default.createElement(make_upload_1.default, { ...props, key: `modal-upload-${index}`, element: element })) : elementType === 'button' ? (react_1.default.createElement(make_button_1.default, { ...props, key: `modal-button-${index}`, element: element })) : null;
+        return elementType === 'input' ? (react_1.default.createElement(make_input_1.default, { ...props, key: `modal-input-${index}`, element: element })) : elementType === 'select' ? (react_1.default.createElement(make_select_1.default, { ...props, key: `modal-select-${index}`, element: element })) : elementType === 'textarea' ? (react_1.default.createElement(make_textarea_1.default, { ...props, key: `modal-textarea-${index}`, element: element })) : elementType === 'toggle' ? (react_1.default.createElement(make_toggle_1.default, { ...props, key: `modal-toggle-${index}`, element: element })) : elementType === 'text' ? (react_1.default.createElement(make_description_1.default, { ...props, key: `modal-text-${index}`, element: element })) : elementType === 'upload' ? (react_1.default.createElement(make_upload_1.default, { ...props, key: `modal-upload-${index}`, element: element })) : elementType === 'custom-upload' ? (react_1.default.createElement(make_custom_upload_1.default, { ...props, key: `modal-custom-upload-${index}`, element: element })) : elementType === 'watcher' ? (react_1.default.createElement(make_watcher_1.default, { ...props, key: `modal-watcher-${index}`, element: element })) : elementType === 'button' ? (react_1.default.createElement(make_button_1.default, { ...props, key: `modal-button-${index}`, element: element })) : null;
     };
     const closeHandler = () => {
         if (modalReady?.onClose)
@@ -140,7 +142,7 @@ const Modal = ({ open, close, config }) => {
     }, [config, modalReady, open]);
     if (!modalReady)
         return null;
-    return (react_1.default.createElement(portal_1.Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal' },
+    return (react_1.default.createElement(portal_1.Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal', useBlur: modalReady.useBlur },
         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),
@@ -160,6 +162,8 @@ const Modal = ({ open, close, config }) => {
                                 'toggle',
                                 'multiselect',
                                 'upload',
+                                'custom-upload',
+                                'watcher',
                                 'button',
                                 'autocomplete',
                             ].includes(sub.elementType))

package/package.json

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

package/src/components/input-upload/input-upload.tsx

@@ -7,10 +7,13 @@ import { IFileResult, IInputUpload } from '../../interfaces/input-upload';
 const InputUpload: FC<IInputUpload> = ({
   onChange,
   readAsArrayBuffer,
+  read,
+  helpText,
+  label,
   ...props
 }: IInputUpload) => {
   const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
-    if (props.read && event.target.files) {
+    if (read && event.target.files) {
       readFileBlob(event.target.files[0], false)
         .then((result) => onChange(result))
         .catch((err) => {
@@ -46,12 +49,12 @@ const InputUpload: FC<IInputUpload> = ({
 
   return (
     <div className="flex flex-col w-full gap-1 text-center">
-      {props.label && (
+      {label && (
         <label
           className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
           htmlFor={`file-input-${props.id}`}
         >
-          {props.label}
+          {label}
         </label>
       )}
       <input
@@ -70,7 +73,7 @@ const InputUpload: FC<IInputUpload> = ({
         className="mt-1 text-sm text-gray-500 dark:text-gray-300 text-start"
         id={`file-input-${props.id}-help`}
       >
-        {props.helpText?.toUpperCase()}
+        {helpText?.toUpperCase()}
       </p>
     </div>
   );

package/src/components/make-custom-upload/make-custom-upload.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import React, { FC, useContext, useEffect, useId } from 'react';
+import { Controller } from 'react-hook-form';
+
+import { ComponentStateContext } from '../../context/component/component-state';
+import useEnableIf from '../../hooks/use-enable-if';
+import useRenderIf from '../../hooks/use-render-if';
+import { IMakeCustomUploadProps } from '../../interfaces/make-custom-upload';
+
+const MakeCustomUpload: FC<IMakeCustomUploadProps> = ({
+  element,
+  control,
+  watch,
+  unregister,
+}) => {
+  const { CustomUpload } = useContext(ComponentStateContext);
+
+  const {
+    name: elementName,
+    validation: { required, message, regex, ...otherValidation },
+    enableIf,
+    renderIf,
+    ...inputProps
+  } = element;
+
+  const { checkEnable, enable, setEnable } = useEnableIf({
+    elementEnableIf: enableIf,
+  });
+  const { checkRender, render, setRender } = useRenderIf({
+    elementRenderIf: renderIf,
+  });
+
+  const elementId = useId();
+
+  useEffect(() => {
+    const { unsubscribe } = watch((formData, { name, type }) => {
+      if (!name) return;
+
+      if (enableIf) {
+        checkEnable(formData, { name, type }).then((enableStatus) => {
+          if (enableStatus === undefined || enableStatus === null) return;
+          if (enable !== enableStatus) setEnable(enableStatus);
+        });
+      }
+
+      if (renderIf) {
+        checkRender(formData, { name, type }).then((renderStatus) => {
+          if (renderStatus === undefined || renderStatus === null) return;
+
+          if (render !== renderStatus) {
+            if (render && !renderStatus) unregister(elementName as string);
+            setRender(!!renderStatus);
+          }
+        });
+      }
+    });
+
+    return () => unsubscribe();
+  }, [watch, render, enable]);
+
+  if (!render) return null;
+
+  return (
+    <Controller
+      control={control}
+      name={elementName}
+      rules={{
+        required: {
+          value: required,
+          message: message ?? '',
+        },
+        pattern: regex
+          ? {
+              value: regex,
+              message: message ?? '',
+            }
+          : undefined,
+        ...otherValidation,
+      }}
+      render={({
+        field: { onChange, value },
+        fieldState: { invalid, error },
+      }) => (
+        <CustomUpload
+          {...inputProps}
+          name={elementName}
+          id={elementId}
+          onChange={onChange}
+          value={value ?? ''}
+          invalid={invalid}
+          error={error}
+          disabled={element.disabled ?? !enable}
+        />
+      )}
+    />
+  );
+};
+
+export default MakeCustomUpload;

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

@@ -0,0 +1,48 @@
+'use client';
+
+import React, { FC, useContext, useEffect, useId, useState } from 'react';
+
+import { ComponentStateContext } from '../../context/component/component-state';
+import { IMakeWatcherProps } from '../../interfaces/make-watcher';
+
+const MakeWatcher: FC<IMakeWatcherProps> = ({ element, watch }) => {
+  const [value, setValue] = useState<string>('');
+  const { Input } = useContext(ComponentStateContext);
+
+  const { watchList, style } = element;
+
+  const elementId = useId();
+
+  useEffect(() => {
+    const { unsubscribe } = watch((formData, { name }) => {
+      if (!name) return;
+
+      if (watchList.includes(name)) {
+        const watchValue: Array<string> = [];
+
+        watchList.forEach((watchName) => {
+          const fragment: string = formData[watchName];
+          if (fragment) watchValue.push(fragment);
+        });
+
+        setValue(watchValue.join(' '));
+      }
+    });
+
+    return () => unsubscribe();
+  }, [watch]);
+
+  return (
+    <Input
+      name={`watcher-${elementId}`}
+      id={elementId}
+      value={value ?? ''}
+      onChange={() => {}}
+      invalid={false}
+      disabled={true}
+      style={style}
+    />
+  );
+};
+
+export default MakeWatcher;

package/src/components/portal/portal.tsx

@@ -31,7 +31,9 @@ export const Portal: FC<IPortal> = (props) => {
   if (!mounted && !ref.current) return null;
 
   return createPortal(
-    <div className="transition-all delay-100 fixed top-0 left-0 w-full h-full grid place-items-center bg-black bg-opacity-40 z-20">
+    <div
+      className={`transition-all delay-100 fixed top-0 left-0 w-full h-full grid place-items-center bg-black bg-opacity-40 z-20 ${props.useBlur && 'backdrop-blur-xs'}`}
+    >
       {props.children}
     </div>,
     ref.current!,

package/src/interfaces/component-state.ts

@@ -7,6 +7,7 @@ import { IMakeButton } from './make-button';
 import { IMakeSelect } from './make-select';
 import { IMakeTextarea } from './make-textarea';
 import { IMakeToggle } from './make-toggle';
+import { IMakeCustomUpload } from './make-custom-upload';
 
 export interface IComponentAditionalProps {
   onChange: (...event: any[]) => void;
@@ -25,6 +26,13 @@ export interface IComponentState {
     Omit<IMakeInput, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> &
       IComponentAditionalProps
   >;
+  CustomUpload: FC<
+    Omit<
+      IMakeCustomUpload,
+      'elementType' | 'validation' | 'renderIf' | 'enableIf'
+    > &
+      IComponentAditionalProps
+  >;
   Select: FC<
     Omit<IMakeSelect, 'elementType' | 'validation' | 'renderIf' | 'enableIf'> &
       IComponentAditionalProps &

package/src/interfaces/custom-upload.ts

@@ -0,0 +1,13 @@
+import { ChangeEvent, CSSProperties } from 'react';
+
+export interface ICustomUpload {
+  id?: string;
+  value?: string;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  accept?: string;
+  label?: string;
+  helpText?: string;
+  style?: CSSProperties;
+  name: string;
+  disabled?: boolean;
+}

package/src/interfaces/make-custom-upload.ts

@@ -0,0 +1,9 @@
+import { IField, IFieldProps } from './field';
+
+export interface IMakeCustomUpload extends IField {
+  elementType: 'custom-upload';
+}
+
+export interface IMakeCustomUploadProps extends IFieldProps {
+  element: Omit<IMakeCustomUpload, 'elementType'>;
+}

package/src/interfaces/make-watcher.ts

@@ -0,0 +1,10 @@
+import { IField, IFieldProps } from './field';
+
+export interface IMakeWatcher extends Pick<IField, 'style'> {
+  elementType: 'watcher';
+  watchList: Array<string>;
+}
+
+export interface IMakeWatcherProps extends IFieldProps {
+  element: Omit<IMakeWatcher, 'elementType'>;
+}

package/src/interfaces/modal.ts

@@ -9,6 +9,8 @@ import { IMakeFieldGroup } from './make-field-group';
 import { IMakeUpload } from './make-upload';
 import { IOption } from './option';
 import { IMakeButton } from './make-button';
+import { IMakeCustomUpload } from './make-custom-upload';
+import { IMakeWatcher } from './make-watcher';
 
 export type IModalField =
   | IMakeSelect
@@ -18,6 +20,8 @@ export type IModalField =
   | IMakeToggle
   | IMakeDescription
   | IMakeUpload
+  | IMakeCustomUpload
+  | IMakeWatcher
   | IMakeButton;
 
 export type IFormField = IMakeSelect | IMakeInput | IMakeTextarea | IMakeToggle;
@@ -49,6 +53,7 @@ export interface IModalConfigProps {
   overFlowBody?: string | number;
   minHeightBody?: string | number;
   useSubmit?: boolean;
+  useBlur?: boolean;
   actions: {
     containerStyle?: CSSProperties;
     cancel?: Omit<IMakeButton, 'elementType'>;

package/src/interfaces/portal.ts

@@ -5,4 +5,5 @@ export interface IPortal {
   closeTime: number;
   portalOpen: boolean;
   portalTag?: string;
+  useBlur?: boolean;
 }

package/src/modal.tsx

@@ -26,6 +26,10 @@ 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';
+import MakeCustomUpload from './components/make-custom-upload/make-custom-upload';
+import { IMakeCustomUpload } from './interfaces/make-custom-upload';
+import MakeWatcher from './components/make-watcher/make-watcher';
+import { IMakeWatcher } from './interfaces/make-watcher';
 
 export const Modal = ({ open, close, config }: IModal) => {
   const { ModalButtonAction, ModalButtonCancel } = useContext(
@@ -49,7 +53,10 @@ export const Modal = ({ open, close, config }: IModal) => {
   } = useForm();
 
   const formValueHandler = (element: IFormField) => {
-    if (['group', 'upload', 'text'].includes(element.elementType)) return;
+    if (
+      ['group', 'upload', 'custom-upload', 'text'].includes(element.elementType)
+    )
+      return;
     if (!element.defaultValue && element.renderIf) {
       unregister(element.name);
       return;
@@ -149,6 +156,18 @@ export const Modal = ({ open, close, config }: IModal) => {
         key={`modal-upload-${index}`}
         element={element as IMakeUpload}
       />
+    ) : elementType === 'custom-upload' ? (
+      <MakeCustomUpload
+        {...props}
+        key={`modal-custom-upload-${index}`}
+        element={element as IMakeCustomUpload}
+      />
+    ) : elementType === 'watcher' ? (
+      <MakeWatcher
+        {...props}
+        key={`modal-watcher-${index}`}
+        element={element as IMakeWatcher}
+      />
     ) : elementType === 'button' ? (
       <MakeButton
         {...props}
@@ -203,7 +222,12 @@ export const Modal = ({ open, close, config }: IModal) => {
   if (!modalReady) return null;
 
   return (
-    <Portal closeTime={200} portalOpen={open} portalTag={'#modal-portal'}>
+    <Portal
+      closeTime={200}
+      portalOpen={open}
+      portalTag={'#modal-portal'}
+      useBlur={modalReady.useBlur}
+    >
       <div
         className="rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]"
         style={modalReady.style}
@@ -252,6 +276,8 @@ export const Modal = ({ open, close, config }: IModal) => {
                             'toggle',
                             'multiselect',
                             'upload',
+                            'custom-upload',
+                            'watcher',
                             'button',
                             'autocomplete',
                           ].includes(sub.elementType),