dynamic-modal 1.1.22 → 1.1.24

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MakeDescription = ({ element: { text, Icon, containerStyle, textStyle, elements }, }) => {
-    return (_jsxs("div", { className: "flex gap-4 w-full h-auto text-xs text-center p-2 border-1 rounded-md", style: containerStyle, children: [Icon && _jsx(Icon, {}), text && !elements && _jsx("p", { style: textStyle, children: text }), !text && elements && (_jsx("p", { style: textStyle, children: elements.map((fragment, index) => (_jsx("span", { style: fragment.style, children: fragment.text }, `desc-fragment-${index}`))) }))] }));
+    return (_jsxs("div", { className: "flex gap-4 w-full h-auto text-xs text-center p-2 border-1 rounded-md", style: containerStyle, children: [Icon && _jsx(Icon, {}), text && !elements && _jsx("p", { style: textStyle, children: text }), !text && elements && (_jsx("p", { style: textStyle, children: elements.map((fragment) => (_jsx("span", { style: fragment.style, children: fragment.text }, `desc-fragment-${fragment.text}`))) }))] }));
 };
 export default MakeDescription;

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

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useId } from 'react';
+import { useContext, 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 useConditionalField from '../../hooks/use-conditional-field';
 const MakeInput = ({ element, control, watch, unregister, }) => {
     const { Input } = useContext(ComponentStateContext);
     const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, ...inputProps } = element;
@@ -15,32 +16,20 @@ const MakeInput = ({ element, control, watch, unregister, }) => {
         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);
-                        setRender(!!renderStatus);
-                    }
-                });
-            }
-        });
-        return () => unsubscribe();
-    }, [watch, render, enable]);
+    useConditionalField({
+        watch,
+        elementName,
+        renderIf,
+        enableIf,
+        render,
+        enable,
+        checkRender,
+        checkEnable,
+        checkLiveData: async () => null,
+        setRender,
+        setEnable,
+        unregister,
+    });
     if (!render)
         return null;
     return (_jsx(Controller, { control: control, name: elementName, rules: {

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

@@ -1,11 +1,12 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useId, useState } from 'react';
+import { useContext, useId, useState } 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 useLiveData from '../../hooks/use-live-data';
+import useConditionalField from '../../hooks/use-conditional-field';
 const MakeSelect = ({ element, control, watch, setValue, unregister, }) => {
     const { Select } = useContext(ComponentStateContext);
     const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, liveData: elementLiveData, ...inputProps } = element;
@@ -20,45 +21,25 @@ const MakeSelect = ({ element, control, watch, setValue, unregister, }) => {
         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);
-                        setRender(!!renderStatus);
-                    }
-                });
-            }
-            if (elementLiveData) {
-                setLiveSearching(true);
-                checkLiveData(formData, { name, type })
-                    .then((options) => {
-                    if (options === undefined || options === null)
-                        return;
-                    setLiveData(options);
-                    setValue(elementName, options);
-                })
-                    .finally(() => {
-                    setLiveSearching(false);
-                });
-            }
-        });
-        return () => unsubscribe();
-    }, [watch, render, enable, liveData]);
+    useConditionalField({
+        watch,
+        elementName,
+        renderIf,
+        enableIf,
+        liveDataConfig: elementLiveData,
+        render,
+        enable,
+        checkRender,
+        checkEnable,
+        checkLiveData,
+        setRender,
+        setEnable,
+        setLiveData,
+        setLiveSearching,
+        unregister,
+        setValue,
+        liveDataResetValue: inputProps.defaultValue ?? [],
+    });
     if (!render)
         return null;
     return (_jsx(Controller, { control: control, name: elementName, rules: {

package/dist/src/components/make-table/make-table.js

@@ -1,100 +1,86 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useMemo, useState } from 'react';
 import useRenderIf from '../../hooks/use-render-if';
 import { ComponentStateContext } from '../../context/component/component-state';
 import useLiveData from '../../hooks/use-live-data';
 import { Controller } from 'react-hook-form';
-const MakeTable = ({ element, watch, control, setValue }) => {
+import useConditionalField from '../../hooks/use-conditional-field';
+const MakeTable = ({ element, watch, control, setValue, }) => {
     const [liveSearching, setLiveSearching] = useState(false);
     const [selected, setSelected] = useState('');
     const [rowSelected, setRowSelected] = useState(new Map());
-    const { Select } = useContext(ComponentStateContext);
-    const { Button } = useContext(ComponentStateContext);
-    const { selectTitleName, selectValueName, selectActionName, selectPlaceholder, renderIf, columns, name: elementName, data, liveData: elementLiveData, style, buttonStyle } = element;
+    const { Select, Button } = useContext(ComponentStateContext);
+    const { selectTitleName, selectValueName, selectActionName, selectPlaceholder, renderIf, columns, name: elementName, data, liveData: elementLiveData, style, buttonStyle, } = element;
     const { checkLiveData, liveData, setLiveData } = useLiveData({
         elementLiveData,
     });
     const { checkRender, render, setRender } = useRenderIf({
         elementRenderIf: renderIf,
     });
-    const addToTable = useCallback((selected) => {
-        if (selected === '')
+    useConditionalField({
+        watch,
+        elementName,
+        renderIf,
+        liveDataConfig: elementLiveData,
+        render,
+        enable: true,
+        checkRender,
+        checkEnable: async () => null,
+        checkLiveData,
+        setRender,
+        setEnable: () => { },
+        setLiveData,
+        setLiveSearching,
+    });
+    const addToTable = useCallback((selectedValue) => {
+        if (selectedValue === '')
             return;
-        const elementSelected = data.find((e) => e[selectValueName] === selected);
+        const elementSelected = data.find((item) => String(item[selectValueName]) === selectedValue);
         if (elementSelected) {
             const currentElements = new Map(rowSelected.entries());
-            currentElements.set(selected, elementSelected);
+            currentElements.set(selectedValue, elementSelected);
             setValue(elementName, Array.from(currentElements.values()));
             setRowSelected(currentElements);
             setSelected('');
         }
-    }, [data, rowSelected, setRowSelected, setSelected]);
+    }, [data, elementName, rowSelected, selectValueName, setValue]);
     const tableButtonAction = useCallback((row, isDeleteAction, action) => {
-        const id = row[selectValueName];
+        const id = String(row[selectValueName]);
         if (isDeleteAction) {
             const currentElements = new Map(rowSelected.entries());
             currentElements.delete(id);
             setRowSelected(currentElements);
+            setValue(elementName, Array.from(currentElements.values()));
             return;
         }
-        if (action)
-            action(row);
-    }, [rowSelected, setRowSelected]);
-    useEffect(() => {
-        const { unsubscribe } = watch((formData, { name, type }) => {
-            if (!name)
-                return;
-            if (renderIf) {
-                checkRender(formData, { name, type }).then((renderStatus) => {
-                    if (renderStatus === undefined || renderStatus === null)
-                        return;
-                    if (render !== renderStatus) {
-                        setRender(!!renderStatus);
-                    }
-                });
-            }
-            if (elementLiveData) {
-                setLiveSearching(true);
-                checkLiveData(formData, { name, type })
-                    .then((options) => {
-                    if (options === undefined || options === null)
-                        return;
-                    setLiveData(options);
-                })
-                    .finally(() => {
-                    setLiveSearching(false);
-                });
-            }
-        });
-        return () => unsubscribe();
-    }, [watch, render, liveData]);
-    if (!render)
-        return null;
+        action?.(row);
+    }, [elementName, rowSelected, selectValueName, setValue]);
     const selectOptions = useMemo(() => {
-        return data.map((e) => {
-            const id = e[selectValueName];
-            const name = e[selectTitleName];
-            return {
-                id,
-                name
-            };
-        });
-    }, [data]);
+        return data.map((item) => ({
+            id: String(item[selectValueName]),
+            name: String(item[selectTitleName]),
+        }));
+    }, [data, selectTitleName, selectValueName]);
     const keyColumns = useMemo(() => {
-        return columns.map((e) => e.title);
+        return columns.map((column) => column.title);
     }, [columns]);
     const tableData = useMemo(() => {
         return Array.from(rowSelected.values());
     }, [rowSelected]);
-    return (_jsxs("div", { className: 'flex flex-col gap-2', style: { ...style }, children: [_jsxs("div", { className: "flex w-full justify-between gap-4", children: [_jsx(Controller, { control: control, name: elementName, defaultValue: [], render: ({ field: { value } }) => (_jsx("input", { type: 'hidden', value: value })) }), _jsx(Select, { name: 'table-select-field', placeholder: selectPlaceholder, isSearch: true, value: selected, invalid: false, options: liveData || selectOptions, liveSearching: liveSearching, onChange: (selected) => {
-                            setSelected(selected);
-                        } }), _jsx(Button, { style: buttonStyle, text: selectActionName, onClick: () => addToTable(selected) })] }), _jsxs("table", { className: "text-[11px] w-full shadow-md sm:rounded-lg", children: [_jsx("thead", { className: "sticky top-0 text-gray-700 bg-gray-50 text-center z-10", children: _jsx("tr", { children: keyColumns.map((title) => (_jsx("th", { scope: 'col', className: 'px-6 py-3', children: title }))) }) }), _jsx("tbody", { children: tableData.map((row, index) => {
-                            return (_jsx("tr", { className: "bg-white border-b hover:bg-gray-50 text-center", children: columns.map(({ Icon, isButton, action, isDeleteAction, style, ...column }) => {
-                                    if (!isButton)
-                                        return (_jsx("td", { className: 'px-6 py-4', style: style, children: row[column.key] ?? '' }));
-                                    return (_jsx("td", { children: _jsx("button", { className: 'p-2 rounded-md text-lg', onClick: () => { tableButtonAction(row, isDeleteAction, action); }, style: style, children: Icon && _jsx(Icon, {}) }) }));
-                                }) }, `row-${row[selectValueName]}-i-${index}`));
+    if (!render)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col gap-2", style: style, children: [_jsxs("div", { className: "flex w-full justify-between gap-4", children: [_jsx(Controller, { control: control, name: elementName, defaultValue: [], render: ({ field: { value } }) => (_jsx("input", { type: "hidden", value: value })) }), _jsx(Select, { name: "table-select-field", placeholder: selectPlaceholder, isSearch: true, value: selected, invalid: false, options: liveData || selectOptions, liveSearching: liveSearching, onChange: (value) => {
+                            setSelected(value);
+                        } }), _jsx(Button, { style: buttonStyle, text: selectActionName, onClick: () => addToTable(selected) })] }), _jsxs("table", { className: "w-full text-[11px] shadow-md sm:rounded-lg", children: [_jsx("thead", { className: "sticky top-0 z-10 bg-gray-50 text-center text-gray-700", children: _jsx("tr", { children: keyColumns.map((title) => (_jsx("th", { scope: "col", className: "px-6 py-3", children: title }, `column-${title}`))) }) }), _jsx("tbody", { children: tableData.map((row) => {
+                            return (_jsx("tr", { className: "border-b bg-white text-center hover:bg-gray-50", children: columns.map(({ Icon, isButton, action, isDeleteAction, style: columnStyle, ...column }) => {
+                                    if (!isButton) {
+                                        return (_jsx("td", { className: "px-6 py-4", style: columnStyle, children: row[column.key] ?? '' }, `${String(row[selectValueName])}-${column.title}`));
+                                    }
+                                    return (_jsx("td", { children: _jsx("button", { type: "button", className: "rounded-md p-2 text-lg", onClick: () => {
+                                                tableButtonAction(row, isDeleteAction, action);
+                                            }, style: columnStyle, children: Icon && _jsx(Icon, {}) }) }, `${String(row[selectValueName])}-${column.title}`));
+                                }) }, `row-${String(row[selectValueName])}`));
                         }) })] })] }));
 };
 export default MakeTable;

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

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useId } from 'react';
+import { useContext, 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 useConditionalField from '../../hooks/use-conditional-field';
 const MakeTextarea = ({ element, control, watch, unregister, }) => {
     const { Textarea } = useContext(ComponentStateContext);
     const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, ...inputProps } = element;
@@ -15,32 +16,20 @@ const MakeTextarea = ({ element, control, watch, unregister, }) => {
         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);
-                        setRender(!!renderStatus);
-                    }
-                });
-            }
-        });
-        return () => unsubscribe();
-    }, [watch, render, enable]);
+    useConditionalField({
+        watch,
+        elementName,
+        renderIf,
+        enableIf,
+        render,
+        enable,
+        checkRender,
+        checkEnable,
+        checkLiveData: async () => null,
+        setRender,
+        setEnable,
+        unregister,
+    });
     if (!render)
         return null;
     return (_jsx(Controller, { name: elementName, control: control, rules: {

package/dist/src/components/make-toggle/make-toggle.js

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useId } from 'react';
+import { useContext, 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 useConditionalField from '../../hooks/use-conditional-field';
 const MakeToggle = ({ element, control, watch, unregister, }) => {
     const { Toggle } = useContext(ComponentStateContext);
     const { name: elementName, validation: { required, message, regex, ...otherValidation }, enableIf, renderIf, ...inputProps } = element;
@@ -15,32 +16,20 @@ const MakeToggle = ({ element, control, watch, unregister, }) => {
         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);
-                        setRender(!!renderStatus);
-                    }
-                });
-            }
-        });
-        return () => unsubscribe();
-    }, [watch, render, enable]);
+    useConditionalField({
+        watch,
+        elementName,
+        renderIf,
+        enableIf,
+        render,
+        enable,
+        checkRender,
+        checkEnable,
+        checkLiveData: async () => null,
+        setRender,
+        setEnable,
+        unregister,
+    });
     if (!render)
         return null;
     return (_jsx(Controller, { control: control, name: elementName, rules: {

package/dist/src/components/portal/portal.js

@@ -1,28 +1,39 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect, useState } from 'react';
+import { useEffect, useReducer } from 'react';
 import { createPortal } from 'react-dom';
+const initialState = {
+    mounted: false,
+    node: null,
+};
+const portalReducer = (state, action) => {
+    if (action.type === 'OPEN') {
+        return {
+            mounted: !!action.node,
+            node: action.node,
+        };
+    }
+    if (!state.mounted && !state.node)
+        return state;
+    return initialState;
+};
 export const Portal = (props) => {
-    const ref = useRef(null);
-    const [mounted, setMounted] = useState(false);
+    const [{ mounted, node }, dispatch] = useReducer(portalReducer, initialState);
     useEffect(() => {
-        if (mounted && !props.portalOpen && props.closeTime > 0) {
+        if (props.portalOpen) {
+            const portalNode = document.querySelector(props.portalTag ?? '#portal');
+            dispatch({ type: 'OPEN', node: portalNode });
+            return;
+        }
+        if (mounted && props.closeTime > 0) {
             const timeoutId = setTimeout(() => {
-                setMounted(false);
-                ref.current = null;
+                dispatch({ type: 'CLOSE' });
             }, props.closeTime);
             return () => clearTimeout(timeoutId);
         }
-        else if (mounted && !props.portalOpen) {
-            setMounted(false);
-            ref.current = null;
-        }
-        else if (!mounted && props.portalOpen) {
-            ref.current = document.querySelector(props.portalTag ?? '#portal');
-            setMounted(true);
-        }
+        dispatch({ type: 'CLOSE' });
     }, [mounted, props.closeTime, props.portalOpen, props.portalTag]);
-    if (!mounted && !ref.current)
+    if (!mounted || !node)
         return null;
-    return createPortal(_jsx("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-sm'}`, children: props.children }), ref.current);
+    return createPortal(_jsx("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-sm'}`, children: props.children }), node);
 };

package/dist/src/hooks/use-conditional-field.d.ts

@@ -0,0 +1,28 @@
+import { FieldValues, UseFormSetValue, UseFormUnregister, UseFormWatch } from 'react-hook-form';
+import { IOption } from '../interfaces/option';
+import { IModalLiveDataCondition, IModalRenderCondition } from '../interfaces/modal';
+type WatchMeta = {
+    name: string;
+    type: string | undefined;
+};
+interface IUseConditionalFieldProps {
+    watch: UseFormWatch<FieldValues>;
+    elementName: string;
+    renderIf?: IModalRenderCondition;
+    enableIf?: IModalRenderCondition;
+    liveDataConfig?: IModalLiveDataCondition;
+    render: boolean;
+    enable: boolean;
+    checkRender: (formData: Record<string, unknown>, meta: WatchMeta) => Promise<boolean | undefined | null>;
+    checkEnable: (formData: Record<string, unknown>, meta: WatchMeta) => Promise<boolean | undefined | null>;
+    checkLiveData: (formData: Record<string, unknown>, meta: WatchMeta) => Promise<Array<IOption> | undefined | null>;
+    setRender: (value: boolean) => void;
+    setEnable: (value: boolean) => void;
+    setLiveData?: (value: Array<IOption>) => void;
+    setLiveSearching?: (value: boolean) => void;
+    unregister?: UseFormUnregister<FieldValues>;
+    setValue?: UseFormSetValue<FieldValues>;
+    liveDataResetValue?: string | Array<string>;
+}
+declare const useConditionalField: ({ watch, elementName, renderIf, enableIf, liveDataConfig, render, enable, checkRender, checkEnable, checkLiveData, setRender, setEnable, setLiveData, setLiveSearching, unregister, setValue, liveDataResetValue, }: IUseConditionalFieldProps) => void;
+export default useConditionalField;

package/dist/src/hooks/use-conditional-field.js

@@ -0,0 +1,61 @@
+'use client';
+import { useEffect, useEffectEvent, useRef } from 'react';
+const useConditionalField = ({ watch, elementName, renderIf, enableIf, liveDataConfig, render, enable, checkRender, checkEnable, checkLiveData, setRender, setEnable, setLiveData, setLiveSearching, unregister, setValue, liveDataResetValue, }) => {
+    const liveRequestId = useRef(0);
+    const handleWatchChange = useEffectEvent(async (formData, meta) => {
+        if (enableIf) {
+            const enableStatus = await checkEnable(formData, meta);
+            if (enableStatus !== undefined &&
+                enableStatus !== null &&
+                enable !== enableStatus) {
+                setEnable(enableStatus);
+            }
+        }
+        if (renderIf) {
+            const renderStatus = await checkRender(formData, meta);
+            if (renderStatus !== undefined &&
+                renderStatus !== null &&
+                render !== renderStatus) {
+                if (render && !renderStatus)
+                    unregister?.(elementName);
+                setRender(renderStatus);
+            }
+        }
+        if (liveDataConfig && setLiveData) {
+            const requestId = ++liveRequestId.current;
+            setLiveSearching?.(true);
+            try {
+                const options = await checkLiveData(formData, meta);
+                if (requestId !== liveRequestId.current ||
+                    options === undefined ||
+                    options === null) {
+                    return;
+                }
+                setLiveData(options);
+                if (setValue) {
+                    setValue(elementName, liveDataResetValue ?? []);
+                }
+            }
+            finally {
+                if (requestId === liveRequestId.current) {
+                    setLiveSearching?.(false);
+                }
+            }
+        }
+    });
+    useEffect(() => {
+        const { unsubscribe } = watch((formData, meta) => {
+            if (!meta.name)
+                return;
+            void handleWatchChange(formData, {
+                name: meta.name,
+                type: meta.type,
+            });
+        });
+        return () => {
+            liveRequestId.current += 1;
+            unsubscribe();
+        };
+    }, [watch]);
+};
+export default useConditionalField;