dynamic-formik-form 1.0.7 → 1.0.8

package/dist/index.d.mts

@@ -166,6 +166,15 @@ interface UILibraryAdapter {
         helperText?: string;
         [key: string]: unknown;
     }>;
+    Password?: ComponentType<BaseUIComponentProps & {
+        name: string;
+        value: string | number;
+        placeholder?: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+        autoComplete?: string;
+        readOnly?: boolean;
+    }>;
 }
 /**
  * UI Library configuration
@@ -410,7 +419,9 @@ type MUIComponent = ComponentType<any>;
  * 2. Import actual MUI components
  * 3. Map them to the adapter interface
  */
-declare const createMUIAdapter: (Box: MUIComponent, Button: MUIComponent, Checkbox: MUIComponent, FormControl: MUIComponent, FormControlLabel: MUIComponent, FormHelperText: MUIComponent, IconButton: MUIComponent, MenuItem: MUIComponent, Paper: MUIComponent, Popover: MUIComponent, Radio: MUIComponent, RadioGroup: MUIComponent, Switch: MUIComponent, TextField: MUIComponent, Typography: MUIComponent, DatePicker?: MUIComponent, DateTimePicker?: MUIComponent) => UILibraryAdapter;
+declare const createMUIAdapter: (Box: MUIComponent, Button: MUIComponent, Checkbox: MUIComponent, FormControl: MUIComponent, FormControlLabel: MUIComponent, FormHelperText: MUIComponent, IconButton: MUIComponent, InputAdornment: MUIComponent, MenuItem: MUIComponent, Paper: MUIComponent, Popover: MUIComponent, Radio: MUIComponent, RadioGroup: MUIComponent, Select: MUIComponent, Switch: MUIComponent, TextField: MUIComponent, Typography: MUIComponent, DatePicker?: MUIComponent, DateTimePicker?: MUIComponent) => UILibraryAdapter & {
+    InputAdornment?: MUIComponent;
+};
 
 /**
  * Bootstrap React Adapter Example

package/dist/index.d.ts

@@ -166,6 +166,15 @@ interface UILibraryAdapter {
         helperText?: string;
         [key: string]: unknown;
     }>;
+    Password?: ComponentType<BaseUIComponentProps & {
+        name: string;
+        value: string | number;
+        placeholder?: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+        autoComplete?: string;
+        readOnly?: boolean;
+    }>;
 }
 /**
  * UI Library configuration
@@ -410,7 +419,9 @@ type MUIComponent = ComponentType<any>;
  * 2. Import actual MUI components
  * 3. Map them to the adapter interface
  */
-declare const createMUIAdapter: (Box: MUIComponent, Button: MUIComponent, Checkbox: MUIComponent, FormControl: MUIComponent, FormControlLabel: MUIComponent, FormHelperText: MUIComponent, IconButton: MUIComponent, MenuItem: MUIComponent, Paper: MUIComponent, Popover: MUIComponent, Radio: MUIComponent, RadioGroup: MUIComponent, Switch: MUIComponent, TextField: MUIComponent, Typography: MUIComponent, DatePicker?: MUIComponent, DateTimePicker?: MUIComponent) => UILibraryAdapter;
+declare const createMUIAdapter: (Box: MUIComponent, Button: MUIComponent, Checkbox: MUIComponent, FormControl: MUIComponent, FormControlLabel: MUIComponent, FormHelperText: MUIComponent, IconButton: MUIComponent, InputAdornment: MUIComponent, MenuItem: MUIComponent, Paper: MUIComponent, Popover: MUIComponent, Radio: MUIComponent, RadioGroup: MUIComponent, Select: MUIComponent, Switch: MUIComponent, TextField: MUIComponent, Typography: MUIComponent, DatePicker?: MUIComponent, DateTimePicker?: MUIComponent) => UILibraryAdapter & {
+    InputAdornment?: MUIComponent;
+};
 
 /**
  * Bootstrap React Adapter Example

package/dist/index.js

@@ -1,14 +1,14 @@
 'use strict';
 
-var React7 = require('react');
+var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React7__default = /*#__PURE__*/_interopDefault(React7);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 
 // src/components/DynamicForm.tsx
-var FormContext = React7.createContext(null);
+var FormContext = React2.createContext(null);
 var FormProvider = ({
   children,
   uiLibrary,
@@ -17,7 +17,7 @@ var FormProvider = ({
   return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: { uiLibrary, formik }, children });
 };
 var useFormContext = () => {
-  const context = React7.useContext(FormContext);
+  const context = React2.useContext(FormContext);
   if (!context) {
     throw new Error("useFormContext must be used within FormProvider");
   }
@@ -96,7 +96,7 @@ var defaultAdapter = {
     }
   )
 };
-var createMUIAdapter = (Box, Button, Checkbox, FormControl, FormControlLabel, FormHelperText, IconButton, MenuItem, Paper, Popover, Radio, RadioGroup, Switch, TextField2, Typography, DatePicker, DateTimePicker) => {
+var createMUIAdapter = (Box, Button, Checkbox, FormControl, FormControlLabel, FormHelperText, IconButton, InputAdornment, MenuItem, Paper, Popover, Radio, RadioGroup, Select, Switch, TextField2, Typography, DatePicker, DateTimePicker) => {
   const filterMUIProps = (props) => {
     const filtered = { ...props };
     delete filtered.error;
@@ -106,19 +106,21 @@ var createMUIAdapter = (Box, Button, Checkbox, FormControl, FormControlLabel, Fo
     delete filtered.variant;
     return filtered;
   };
-  return {
+  const adapterReturn = {
     Input: ({ className, disabled, error, type, ...props }) => {
       const filteredProps = filterMUIProps(props);
+      const { InputProps, ...restFilteredProps } = filteredProps;
       return /* @__PURE__ */ jsxRuntime.jsx(
         TextField2,
         {
-          ...filteredProps,
+          ...restFilteredProps,
           type,
           disabled,
           ...error ? { error: true } : {},
           className,
           fullWidth: true,
-          variant: "outlined"
+          variant: "outlined",
+          InputProps
         }
       );
     },
@@ -140,17 +142,41 @@ var createMUIAdapter = (Box, Button, Checkbox, FormControl, FormControlLabel, Fo
     },
     Select: ({ className, disabled, error, children, ...props }) => {
       const filteredProps = filterMUIProps(props);
+      const convertOptionsToMenuItems = (children2) => {
+        return React2__default.default.Children.map(children2, (child) => {
+          if (React2__default.default.isValidElement(child) && child.type === "option") {
+            const { value, children: optionChildren, ...optionProps } = child.props;
+            return /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { value: value || "", ...optionProps, children: optionChildren }, value || optionChildren);
+          }
+          return child;
+        });
+      };
+      const menuItems = convertOptionsToMenuItems(children);
       return /* @__PURE__ */ jsxRuntime.jsx(
-        TextField2,
+        Select,
         {
           ...filteredProps,
-          select: true,
           disabled,
-          ...error ? { error: true } : {},
-          className,
+          value: props.value || "",
+          onChange: props.onChange,
+          onBlur: props.onBlur,
+          displayEmpty: !props.value,
           fullWidth: true,
-          variant: "outlined",
-          children
+          className,
+          sx: {
+            borderRadius: "10px",
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderColor: error ? "#ef4444" : "#d1d5db"
+            },
+            "&:hover .MuiOutlinedInput-notchedOutline": {
+              borderColor: error ? "#ef4444" : "#6366f1"
+            },
+            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              borderColor: error ? "#ef4444" : "#6366f1",
+              borderWidth: 2
+            }
+          },
+          children: menuItems
         }
       );
     },
@@ -289,6 +315,8 @@ var createMUIAdapter = (Box, Button, Checkbox, FormControl, FormControlLabel, Fo
       );
     } : void 0
   };
+  adapterReturn.InputAdornment = InputAdornment;
+  return adapterReturn;
 };
 var createBootstrapAdapter = (Form, FormControl, FormLabel, FormText, FormCheck, FormSelect, ButtonComponent, InputGroup, OverlayTrigger, Popover, ListGroup, ListGroupItem) => {
   return {
@@ -439,9 +467,9 @@ var createBootstrapAdapter = (Form, FormControl, FormLabel, FormText, FormCheck,
 var createAntDesignAdapter = (Input, Button, Checkbox, Radio, Switch, Select, Form, Typography, Popover, DatePicker, DateTimePicker, Space, Card) => {
   const TextArea = Input.TextArea || Input;
   const { TextArea: AntDTextArea } = Input;
+  const Password = Input.Password || Input;
   const { Text: TypographyText } = Typography;
   const { Group: RadioGroup } = Radio;
-  const SpaceComponent = Space || (({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, children }));
   const CardComponent = Card || (({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `ant-card ${className || ""}`, children }));
   return {
     Input: ({ className, disabled, error, type, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -454,26 +482,49 @@ var createAntDesignAdapter = (Input, Button, Checkbox, Radio, Switch, Select, Fo
         className
       }
     ),
-    Textarea: ({ className, disabled, error, rows, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-      TextArea,
+    Password: ({ className, disabled, error, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+      Password,
       {
         ...props,
-        rows: rows || 4,
         disabled,
         status: error ? "error" : void 0,
         className
       }
     ),
-    Select: ({ className, disabled, error, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-      Select,
+    Textarea: ({ className, disabled, error, rows, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+      TextArea,
       {
         ...props,
+        rows: rows || 4,
         disabled,
         status: error ? "error" : void 0,
-        className,
-        children
+        className
       }
     ),
+    Select: ({ className, disabled, error, children, ...props }) => {
+      const convertOptionsToSelectOptions = (children2) => {
+        const SelectComponent = Select;
+        const Option = SelectComponent.Option;
+        return React2__default.default.Children.map(children2, (child) => {
+          if (React2__default.default.isValidElement(child) && child.type === "option") {
+            const { value, children: optionChildren, ...optionProps } = child.props;
+            return /* @__PURE__ */ jsxRuntime.jsx(Option, { value: value || "", ...optionProps, children: optionChildren }, value || optionChildren);
+          }
+          return child;
+        });
+      };
+      const selectOptions = convertOptionsToSelectOptions(children);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Select,
+        {
+          ...props,
+          disabled,
+          status: error ? "error" : void 0,
+          className,
+          children: selectOptions
+        }
+      );
+    },
     Checkbox: ({ className, disabled, label, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
       Checkbox,
       {
@@ -512,14 +563,34 @@ var createAntDesignAdapter = (Input, Button, Checkbox, Radio, Switch, Select, Fo
         children
       }
     ),
-    FormControl: ({ className, children }) => {
+    FormControl: ({ className, children, required, error }) => {
       const FormComponent = Form;
       const FormItem = FormComponent.Item || FormComponent;
-      return /* @__PURE__ */ jsxRuntime.jsx(FormItem, { className, children });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        FormItem,
+        {
+          className,
+          required,
+          validateStatus: error ? "error" : void 0,
+          style: { marginBottom: "24px" },
+          children
+        }
+      );
     },
     FormHelperText: ({ className, children }) => /* @__PURE__ */ jsxRuntime.jsx(TypographyText, { type: "secondary", className, children }),
     Label: ({ className, htmlFor, children }) => /* @__PURE__ */ jsxRuntime.jsx("label", { className, htmlFor, children }),
-    Box: ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(SpaceComponent, { className, ...props, children }),
+    Box: ({ className, children, ...props }) => {
+      const { style, ...restProps } = props;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className,
+          style: { display: "flex", width: "100%", ...style },
+          ...restProps,
+          children
+        }
+      );
+    },
     Paper: ({ className, children }) => /* @__PURE__ */ jsxRuntime.jsx(CardComponent, { className, children }),
     Popover: ({ open, anchorEl, onClose, children, anchorOrigin, ...props }) => {
       if (!open) return null;
@@ -760,14 +831,17 @@ var FieldWrapper = ({
   index
 }) => {
   if (hidden) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "d-none", children });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "none" }, children });
   }
+  const wrapperStyle = {
+    marginBottom: customClass ? void 0 : "16px",
+    paddingLeft: isChild && !noIndent ? "20px" : void 0
+  };
   const wrapperClasses = [
-    customClass || "mb-4",
-    isChild && !noIndent ? "ps-5" : "",
+    customClass,
     className || ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClasses, children }, index);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClasses, style: wrapperStyle, children }, index);
 };
 var IconRenderer = ({
   Icon,
@@ -775,7 +849,7 @@ var IconRenderer = ({
   className
 }) => {
   if (!Icon) return null;
-  return React7__default.default.createElement(Icon, { size, className });
+  return React2__default.default.createElement(Icon, { size, className });
 };
 var FieldLabel = ({
   name,
@@ -1080,21 +1154,26 @@ var InputField = ({
   formik: formikProp
 }) => {
   const { uiLibrary, formik } = useFormContext();
-  const { adapter, icons } = uiLibrary;
+  const { adapter, icons, name: uiLibraryName } = uiLibrary;
   const Input = adapter.Input;
-  adapter.IconButton;
+  const Password = adapter.Password;
+  const IconButton = adapter.IconButton;
+  const Box = adapter.Box;
   const activeFormik = formikProp || formik;
-  const [showField, setShowField] = React7.useState({});
+  const isMUI = uiLibraryName === "mui";
+  const isAntD = uiLibraryName === "antd";
+  const InputAdornment = isMUI ? adapter.InputAdornment : void 0;
+  const [showField, setShowField] = React2.useState({});
   const fieldValue = getFieldValue(activeFormik, name);
   const fieldError = getFieldError(activeFormik, name);
   const fieldTouched = getFieldTouched(activeFormik, name);
-  const showFieldHandler = React7.useCallback((fieldName) => {
+  const showFieldHandler = React2.useCallback((fieldName) => {
     setShowField((prev) => ({
       ...prev,
       [fieldName]: !prev[fieldName]
     }));
   }, []);
-  const handleCopy = React7.useCallback(() => {
+  const handleCopy = React2.useCallback(() => {
     if (typeof window !== "undefined" && document) {
       const input = document.getElementById(name);
       if (input) {
@@ -1106,7 +1185,8 @@ var InputField = ({
   const VisibilityIcon = icons?.Visibility;
   const VisibilityOffIcon = icons?.VisibilityOff;
   const CopyIcon = icons?.Copy;
-  const inputType = fieldType === "password" ? !showField[name] ? "password" : "text" : fieldType;
+  const usePasswordComponent = isAntD && fieldType === "password" && isVisibleEnable && Password;
+  const inputType = fieldType === "password" && !usePasswordComponent ? !showField[name] ? "password" : "text" : fieldType;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     FieldWrapper,
     {
@@ -1128,14 +1208,47 @@ var InputField = ({
         ),
         desc && /* @__PURE__ */ jsxRuntime.jsx(FieldDescription, { desc }),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+          Box,
           {
-            className: `input-group ${isCopyEnable || isVisibleEnable ? "" : "rounded"}`,
+            sx: isMUI ? {
+              display: "flex",
+              alignItems: "stretch",
+              width: "100%"
+            } : void 0,
+            className: !isMUI ? `input-group ${isCopyEnable || isVisibleEnable ? "" : "rounded"}` : void 0,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
+              usePasswordComponent ? /* @__PURE__ */ jsxRuntime.jsx(
+                Password,
+                {
+                  className: !isMUI ? `form-control font-14 ${isCopyEnable || customIcon ? "border border-end-0" : "rounded"} ${fieldError && fieldTouched ? "border-danger" : ""}` : void 0,
+                  id: name,
+                  "data-testid": dataTestId || `${formatString(name)}-input`,
+                  ref: inputRef,
+                  autoComplete: autocomplete || "new-password",
+                  disabled: disabled || false,
+                  name,
+                  placeholder,
+                  value: fieldValue || "",
+                  onChange: (event) => {
+                    if (customHandleChange) {
+                      customHandleChange(event, type);
+                    } else if (customFormChange) {
+                      customFormChange(event, type);
+                    } else {
+                      activeFormik.handleChange(event);
+                    }
+                  },
+                  onBlur: onBlur || activeFormik.handleBlur,
+                  readOnly: readonly || false,
+                  error: !!(fieldError && fieldTouched)
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
                 {
-                  className: `form-control font-14 ${isCopyEnable || isVisibleEnable || customIcon ? "border border-end-0" : "rounded"} ${fieldError && fieldTouched ? "border-danger" : ""}`,
+                  className: !isMUI ? `form-control font-14 ${isCopyEnable || isVisibleEnable || customIcon ? "border border-end-0" : "rounded"} ${fieldError && fieldTouched ? "border-danger" : ""}` : void 0,
+                  sx: isMUI ? {
+                    flex: 1
+                  } : void 0,
                   id: name,
                   "data-testid": dataTestId || `${formatString(name)}-input`,
                   ref: inputRef,
@@ -1156,10 +1269,33 @@ var InputField = ({
                   },
                   onBlur: onBlur || activeFormik.handleBlur,
                   readOnly: readonly || false,
-                  error: !!(fieldError && fieldTouched)
+                  error: !!(fieldError && fieldTouched),
+                  InputProps: isMUI && isVisibleEnable && VisibilityIcon && VisibilityOffIcon && InputAdornment ? {
+                    endAdornment: /* @__PURE__ */ jsxRuntime.jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      IconButton,
+                      {
+                        "aria-label": showField[name] ? "Hide password" : "Show password",
+                        onClick: () => showFieldHandler(name),
+                        edge: "end",
+                        "data-testid": `${formatString(name)}-visible-btn`,
+                        children: !showField[name] ? /* @__PURE__ */ jsxRuntime.jsx(IconRenderer, { Icon: VisibilityOffIcon, size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(IconRenderer, { Icon: VisibilityIcon, size: 20 })
+                      }
+                    ) })
+                  } : isMUI && isCopyEnable && CopyIcon && InputAdornment ? {
+                    endAdornment: /* @__PURE__ */ jsxRuntime.jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      IconButton,
+                      {
+                        "aria-label": "copy",
+                        onClick: handleCopy,
+                        edge: "end",
+                        "data-testid": `${formatString(name)}-copy-btn`,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(IconRenderer, { Icon: CopyIcon, size: 20 })
+                      }
+                    ) })
+                  } : void 0
                 }
               ),
-              customIcon && /* @__PURE__ */ jsxRuntime.jsx(
+              customIcon && !isMUI && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   className: `z-0 bg-transparent btn btn-outline-secondary border-0 border-top border-bottom px-3 ${!isCopyEnable && !isVisibleEnable ? "border-end rounded-end" : ""} ${fieldError && fieldTouched ? "border-danger" : ""}`,
@@ -1167,7 +1303,7 @@ var InputField = ({
                   children: customIcon
                 }
               ),
-              isVisibleEnable && VisibilityIcon && VisibilityOffIcon && /* @__PURE__ */ jsxRuntime.jsx(
+              isVisibleEnable && VisibilityIcon && VisibilityOffIcon && !isMUI && !usePasswordComponent && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   className: `z-0 btn btn-outline-secondary border-0 rounded-0 border-top border-bottom ${!isCopyEnable ? "border-end rounded-end" : ""} ${fieldError && fieldTouched ? "border-danger" : ""}`,
@@ -1177,7 +1313,7 @@ var InputField = ({
                   children: !showField[name] ? /* @__PURE__ */ jsxRuntime.jsx(IconRenderer, { Icon: VisibilityOffIcon, size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(IconRenderer, { Icon: VisibilityIcon, size: 16 })
                 }
               ),
-              isCopyEnable && CopyIcon && /* @__PURE__ */ jsxRuntime.jsx(
+              isCopyEnable && CopyIcon && !isMUI && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   className: `z-0 btn btn-outline-secondary border border-start-0 border-end rounded-end ${fieldError && fieldTouched ? "border-danger" : ""}`,
@@ -2068,7 +2204,7 @@ var AsyncSelectField = ({
   const { adapter } = uiLibrary;
   const FormControl = adapter.FormControl;
   const activeFormik = formikProp || formik;
-  const [asyncLoading, setAsyncLoading] = React7.useState(false);
+  const [asyncLoading, setAsyncLoading] = React2.useState(false);
   const fieldValue = getFieldValue(activeFormik, name);
   const fieldError = getFieldError(activeFormik, name);
   const fieldTouched = getFieldTouched(activeFormik, name);
@@ -2983,7 +3119,7 @@ var AttributeField = ({
           className: customAttrClass || "d-flex flex-row gap-3 mb-3",
           children: [
             transformedProperties.map((property, propIndex) => {
-              return /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Fragment, { children: renderPropertyField(property, propIndex) }, propIndex);
+              return /* @__PURE__ */ jsxRuntime.jsx(React2__default.default.Fragment, { children: renderPropertyField(property, propIndex) }, propIndex);
             }),
             (minimumValuePresent ? valuesArray.length > 1 : true) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-1 mt-4 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: minimumValuePresent ? "mt-0" : "", children: IconButton && DeleteIcon ? /* @__PURE__ */ jsxRuntime.jsx(
               IconButton,
@@ -3057,28 +3193,28 @@ var EditableDivField = ({
   adapter.IconButton;
   const activeFormik = formikProp || formik;
   const { t } = useTranslation();
-  const [showPlaceholder, setShowPlaceholder] = React7.useState({});
-  const [anchorElEditableDiv, setAnchorElEditableDiv] = React7.useState(null);
-  const [activeSpan, setActiveSpan] = React7.useState(null);
-  const [prevKey, setPrevKey] = React7.useState("");
-  const [isTyping, setIsTyping] = React7.useState(false);
-  const editorRefEditableDiv = React7.useRef(null);
-  const fieldTimeoutRef = React7.useRef(null);
-  const isFieldFocusedRef = React7.useRef(false);
+  const [showPlaceholder, setShowPlaceholder] = React2.useState({});
+  const [anchorElEditableDiv, setAnchorElEditableDiv] = React2.useState(null);
+  const [activeSpan, setActiveSpan] = React2.useState(null);
+  const [prevKey, setPrevKey] = React2.useState("");
+  const [isTyping, setIsTyping] = React2.useState(false);
+  const editorRefEditableDiv = React2.useRef(null);
+  const fieldTimeoutRef = React2.useRef(null);
+  const isFieldFocusedRef = React2.useRef(false);
   getFieldValue(activeFormik, name);
   const fieldError = getFieldError(activeFormik, name);
   const fieldTouched = getFieldTouched(activeFormik, name);
   const CopyIcon = icons?.Copy;
   const VisibilityIcon = icons?.Visibility;
   const VisibilityOffIcon = icons?.VisibilityOff;
-  const checkPlaceholderVisibility = React7.useCallback((content, fieldName) => {
+  const checkPlaceholderVisibility = React2.useCallback((content, fieldName) => {
     const isEmpty = !content || content.trim() === "" || content === "\u200B";
     setShowPlaceholder((prev) => ({
       ...prev,
       [fieldName]: isEmpty
     }));
   }, []);
-  const setCursorToEnd = React7.useCallback(() => {
+  const setCursorToEnd = React2.useCallback(() => {
     if (editorRefEditableDiv.current) {
       const editor = editorRefEditableDiv.current;
       if (editor.childNodes.length > 0) {
@@ -3096,7 +3232,7 @@ var EditableDivField = ({
       }
     }
   }, []);
-  const setEditorContentWithSpans = React7.useCallback((expression, fields) => {
+  const setEditorContentWithSpans = React2.useCallback((expression, fields) => {
     if (!editorRefEditableDiv.current) return;
     const editor = editorRefEditableDiv.current;
     editor.innerHTML = "";
@@ -3123,7 +3259,7 @@ var EditableDivField = ({
       }
     });
   }, [availableFields]);
-  const handleKeyDown = React7.useCallback((e) => {
+  const handleKeyDown = React2.useCallback((e) => {
     if (e.key === "{" && prevKey === "{") {
       e.preventDefault();
       return;
@@ -3150,7 +3286,7 @@ var EditableDivField = ({
       }
     }
   }, [prevKey]);
-  const handleKeyUp = React7.useCallback((e) => {
+  const handleKeyUp = React2.useCallback((e) => {
     const currentKey = e.key;
     if (currentKey === "{" && prevKey === "{" && !e.defaultPrevented) {
       const selection = window.getSelection();
@@ -3170,7 +3306,7 @@ var EditableDivField = ({
     }
     setPrevKey(currentKey);
   }, [prevKey]);
-  const handleFieldSelect = React7.useCallback((item) => {
+  const handleFieldSelect = React2.useCallback((item) => {
     if (!editorRefEditableDiv.current) return;
     const newSpan = document.createElement("span");
     newSpan.className = "field-span";
@@ -3229,7 +3365,7 @@ var EditableDivField = ({
       setCursorToEnd();
     }, 0);
   }, [activeSpan, name, customHandleChange, customFormChange, activeFormik, setCursorToEnd]);
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     if (editorRefEditableDiv.current && activeFormik.values && !isTyping && availableFields.length > 0) {
       const fieldValue2 = getNestedProperty(activeFormik.values, name);
       checkPlaceholderVisibility(String(fieldValue2 || ""), name);
@@ -3238,7 +3374,7 @@ var EditableDivField = ({
       }, 0);
     }
   }, [activeFormik.values, name, isTyping, availableFields, checkPlaceholderVisibility, setEditorContentWithSpans]);
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     return () => {
       if (fieldTimeoutRef.current) {
         clearTimeout(fieldTimeoutRef.current);
@@ -3506,17 +3642,17 @@ var DynamicForm = ({
   RadiusTab = false,
   uiLibrary
 }) => {
-  const [formFields, setFormFields] = React7.useState([]);
+  const [formFields, setFormFields] = React2.useState([]);
   const activeUILibrary = uiLibrary || {
     adapter: defaultAdapter,
     icons: defaultIcons,
     name: "default"
   };
-  React7.useEffect(() => {
+  React2.useEffect(() => {
     const newFormFields = fields?.filter((item) => item !== false);
     setFormFields(newFormFields);
   }, [fields]);
-  const setFieldValuesRecursive = React7.useCallback(
+  const setFieldValuesRecursive = React2.useCallback(
     (child, parentValue = null) => {
       if (!child) return;
       child.forEach((c) => {
@@ -3564,7 +3700,7 @@ var DynamicForm = ({
     if (field.child && field.child.length > 0) {
       const fieldValue = getFieldValue(formik, field.name);
       const valuePath = getNestedProperty(formik.values, field.name);
-      return /* @__PURE__ */ jsxRuntime.jsxs(React7__default.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React2__default.default.Fragment, { children: [
         fieldElement,
         field.child.map((childField, childIndex) => {
           const shouldShowChild = fieldValue === childField.hiddenlabel || valuePath === childField.hiddenlabel || field.type === "checkbox" && fieldValue || field.type === "radiobtn" && (fieldValue === childField.targetType || String(fieldValue) === String(childField.targetType)) || field.type === "attribute" && true;
@@ -3595,7 +3731,7 @@ var DynamicForm = ({
   if (attributeFields !== void 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { uiLibrary: activeUILibrary, formik, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row", children: groupFormFieldsIntoRows().map((rowFields, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row", children: rowFields.map((fieldValue, index) => {
       const uniqueKey = `${fieldValue?.label || fieldValue?.name}-${index}`;
-      return /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Fragment, { children: renderField(fieldValue, uniqueKey) }, uniqueKey);
+      return /* @__PURE__ */ jsxRuntime.jsx(React2__default.default.Fragment, { children: renderField(fieldValue, uniqueKey) }, uniqueKey);
     }) }, rowIndex)) }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { uiLibrary: activeUILibrary, formik, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row mx-0", children: formFields.map((fieldValue, index) => {