@erpsquad/common 1.8.45 → 1.8.46

package/dist/views/form-builder/custom-form/index.esm.js

@@ -1,1151 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useCallback, createElement, useMemo, useEffect } from "react";
-import { useNavigate, useLocation } from "react-router-dom";
-import { useForm, useFieldArray } from "react-hook-form";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import { useTranslation } from "react-i18next";
-import { enqueueSnackbar } from "../../../node_modules/notistack/notistack.esm/index.esm.js";
-import DynamicSectionHOC from "../../../components/form-control/form-builder/form-builder-element/section/index.esm.js";
-import DynamicButton from "../../../components/form-control/form-builder/form-builder-element/button/index.esm.js";
-import TabBar from "../../../components/tabs/tabs/index.esm.js";
-import { images } from "../../../images/index.esm.js";
-import FormHeader from "../../../components/form-header/form-header/index.esm.js";
-import { Typography } from "../../../components/typography/typography/index.esm.js";
-import formBuilderConversion from "../../../utils/form-builder-conversion/index.esm.js";
-import { useAppDispatch, useAppSelector } from "../../../redux/hooks/index.esm.js";
-import { formatLabel } from "../../../utils/format-text/index.esm.js";
-import Toast from "../../../components/toast/toast/index.esm.js";
-import Radio from "../../../components/radio/radio/index.esm.js";
-import { SECTION_TYPES } from "../../../utils/constant/index.esm.js";
-import ErpLoader from "../../../components/loaders/erp-loader/index.esm.js";
-import { getErrorMessage } from "../../../utils/common/index.esm.js";
-import FormParser from "../../../components/form-control/form-parser/form-parser/index.esm.js";
-import { patchFormDataById, getFormDataById, getFieldsByFormId } from "../redux/actionCreator/index.esm.js";
-import { element } from "../field_properties/index.esm.js";
-import { TextEditForm } from "../element-edit-forms/text/index.esm.js";
-import { SelectEditForm } from "../element-edit-forms/select/index.esm.js";
-import SectionEditForm from "../element-edit-forms/section/index.esm.js";
-import { CheckboxEditForm } from "../element-edit-forms/checkbox/index.esm.js";
-import TableEditForm from "../element-edit-forms/table-form/index.esm.js";
-import FormFields from "../form-fields/index.esm.js";
-import { generateModulePath, useFormDataEffect } from "../utils/common/index.esm.js";
-/* empty css                            */
-import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
-import { EyeOff } from "../../../components/icons/eye-off/index.esm.js";
-import { Eye } from "../../../components/icons/eye/index.esm.js";
-import Grid from "../../../node_modules/@mui/material/Grid/Grid/index.esm.js";
-import RadioGroup from "../../../node_modules/@mui/material/RadioGroup/RadioGroup/index.esm.js";
-import FormControlLabel from "../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.esm.js";
-import Add from "../../../node_modules/@mui/icons-material/esm/Add/index.esm.js";
-const DEFAULT_GRID_COLUMNS = 12;
-const DEFAULT_COLUMN_WIDTH = 2;
-const DEFAULT_TAB_TITLE = "data";
-const isValidNumber = (value) => !isNaN(Number(value)) && isFinite(Number(value));
-const deepClone = (obj) => JSON.parse(JSON.stringify(obj));
-const generateUniqueId = (separator = "") => {
-  return { uniqueStringId: `${Date.now()}${separator}${Math.random().toString(36).substr(2, 9)}` };
-};
-function CustomForm() {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const rowData = location.state ?? [];
-  const formBuilder = useAppSelector((state) => state.formBuilder);
-  const { control } = useForm({
-    reValidateMode: "onBlur"
-  });
-  const {
-    fields: members,
-    append,
-    remove,
-    update,
-    move,
-    insert
-  } = useFieldArray({
-    control,
-    name: "members"
-  });
-  const {
-    fields: section,
-    append: appendSection,
-    remove: removeSection,
-    update: updateSection
-  } = useFieldArray({
-    control,
-    name: "section"
-  });
-  const [selectedHoc, setSelectedHoc] = useState("");
-  const [activeSection, setActiveSection] = useState();
-  const [activeMember, setActiveMember] = useState();
-  const [formJSON, setFormJSON] = useState([]);
-  const [elementJSON, setElementJSON] = useState(null);
-  const [positionEditedElement, setPositionEditedElement] = useState();
-  const [sectionFormJSON, setSectionFormJSON] = useState([]);
-  const [sectionJSON, setSectionJSON] = useState({});
-  const [sectionPositionEditedElement, setSectionPositionEditedElement] = useState();
-  const [removeSectionActionPerformed, setRemoveSectionActionPerformed] = useState(false);
-  const [removeSectionMembersPerformed, setRemoveSectionMembersPerformed] = useState(false);
-  const [removeSectionPosition, setRemoveSectionPosition] = useState();
-  const [initialLoading, setInitialLoading] = useState(true);
-  const [tabsData, setTabsData] = useState([]);
-  const [activeTabValue, setActiveTabValue] = useState(0);
-  const [elementSwap, setElementSwap] = useState(false);
-  const [modifyAccordion, setModifyAccordion] = useState(false);
-  const [toast, setToast] = useState(null);
-  const [previewFieldsData, setPreviewFields] = useState(null);
-  const [_, setFormParserMethods] = useState();
-  let elementPerColumn;
-  const currentModule = location.pathname.split("/")[2];
-  const path = generateModulePath(currentModule);
-  useFormDataEffect(
-    formBuilder,
-    tabsData,
-    activeTabValue,
-    {
-      removeSection,
-      remove,
-      setTabsData,
-      append,
-      appendSection
-    }
-  );
-  const pickPropertyEditForm = useCallback((type) => {
-    try {
-      if (!type || typeof type !== "string") {
-        console.warn("Invalid field type provided to pickPropertyEditForm");
-        return /* @__PURE__ */ jsx("div", { className: "text-gray-500 p-4", children: "Select a field to edit" });
-      }
-      const normalizedType = type.toLowerCase().trim();
-      const formGroups = {
-        text: [
-          "text",
-          "number",
-          "email",
-          "phone",
-          "date",
-          "time",
-          "url",
-          "currency",
-          "file",
-          "geolocation",
-          "image",
-          "relation",
-          "info",
-          "tagsinput"
-        ],
-        select: ["select"],
-        section: ["section"],
-        checkbox: ["checkbox", "togglebutton", "radiobutton"],
-        table: ["table"]
-      };
-      const commonTextProps = {
-        element: elementJSON,
-        handlePropertyValueUpdate,
-        handleWidthChange,
-        handleColumnSelect,
-        fields: (formBuilder == null ? void 0 : formBuilder.fields) || []
-      };
-      const commonSelectProps = {
-        element: elementJSON,
-        handlePropertyValueUpdate,
-        handleSelectOptionValueUpdate,
-        handleWidthChange,
-        handleColumnSelect
-      };
-      if (formGroups.text.includes(normalizedType)) {
-        return /* @__PURE__ */ createElement(
-          TextEditForm,
-          {
-            ...commonTextProps,
-            key: `text-form-${(elementJSON == null ? void 0 : elementJSON.id) || "default"}`
-          }
-        );
-      }
-      if (formGroups.select.includes(normalizedType)) {
-        return /* @__PURE__ */ createElement(
-          SelectEditForm,
-          {
-            ...commonSelectProps,
-            key: `select-form-${(elementJSON == null ? void 0 : elementJSON.id) || "default"}`
-          }
-        );
-      }
-      if (formGroups.section.includes(normalizedType)) {
-        return /* @__PURE__ */ jsx(
-          SectionEditForm,
-          {
-            element: sectionJSON,
-            handlePropertyValueUpdate: handleSectionPropertyValueUpdate
-          },
-          `section-form-${(sectionJSON == null ? void 0 : sectionJSON.id) || "default"}`
-        );
-      }
-      if (formGroups.checkbox.includes(normalizedType)) {
-        return /* @__PURE__ */ createElement(
-          CheckboxEditForm,
-          {
-            ...commonSelectProps,
-            key: `checkbox-form-${(elementJSON == null ? void 0 : elementJSON.id) || "default"}`
-          }
-        );
-      }
-      if (formGroups.table.includes(normalizedType)) {
-        return /* @__PURE__ */ jsx(
-          TableEditForm,
-          {
-            element: elementJSON,
-            handlePropertyValueUpdate,
-            handleColumnsUpdate,
-            fields: (formBuilder == null ? void 0 : formBuilder.fields) || []
-          },
-          `table-form-${(elementJSON == null ? void 0 : elementJSON.id) || "default"}`
-        );
-      }
-      console.warn(`Unknown field type: ${type}`);
-      return /* @__PURE__ */ jsxs("div", { className: "text-gray-500 p-4 border border-gray-200 rounded", children: [
-        /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Unknown Field Type" }),
-        /* @__PURE__ */ jsxs("p", { className: "text-sm mt-1", children: [
-          'Field type "',
-          type,
-          '" is not supported. Please select a valid field to edit.'
-        ] })
-      ] });
-    } catch (error) {
-      console.error("Error in pickPropertyEditForm:", error);
-      return /* @__PURE__ */ jsxs("div", { className: "text-red-500 p-4 border border-red-200 rounded bg-red-50", children: [
-        /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Error Loading Form" }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: "There was an error loading the property edit form. Please try again." })
-      ] });
-    }
-  }, [elementJSON, sectionJSON, formBuilder]);
-  const addNewSection = useCallback(() => {
-    var _a;
-    try {
-      if (!((_a = element) == null ? void 0 : _a.section)) {
-        console.error("Element section template is not available");
-        return;
-      }
-      const { uniqueStringId: id } = generateUniqueId("-");
-      const newSection = {
-        ...deepClone(element.section),
-        id
-      };
-      if (newSection.switcher_forms) {
-        newSection.switcher_forms = newSection.switcher_forms.map((form) => ({
-          ...form,
-          id: generateUniqueId("-").uniqueStringId
-        }));
-      }
-      const newSectionIndex = section.length;
-      appendSection(newSection);
-      setActiveSection(newSectionIndex);
-      setSelectedHoc("section");
-      const sectionData = {
-        field_type: newSection.field_type,
-        section_type: newSection.section_type,
-        switcher_forms: newSection.switcher_forms,
-        form_switcher_label: newSection.form_switcher_label,
-        form_switcher_name: newSection.form_switcher_name,
-        label: newSection.label,
-        is_accordion: newSection.is_accordion,
-        id: newSection.id ?? newSectionIndex
-      };
-      setSectionJSON(sectionData);
-      setSectionPositionEditedElement(newSectionIndex);
-      pickPropertyEditForm(newSection.field_type);
-    } catch (error) {
-      console.error("Error adding new section:", error);
-    }
-  }, [element, section, appendSection, setActiveSection, setSelectedHoc, setSectionJSON, setSectionPositionEditedElement, pickPropertyEditForm]);
-  const handleAddTab = useCallback(() => {
-    try {
-      const formWithMembers2 = deepClone(sectionFormJSON);
-      formWithMembers2.forEach((section2, sectionIndex) => {
-        section2.members = members.filter(
-          (member) => (member == null ? void 0 : member.section_order) === sectionIndex
-        );
-      });
-      const hasSystemMembers = formWithMembers2.some(
-        (section2) => {
-          var _a;
-          return (_a = section2.members) == null ? void 0 : _a.some((member) => Boolean(member == null ? void 0 : member.is_system_field));
-        }
-      );
-      const shouldRemoveTab = !(tabsData == null ? void 0 : tabsData.length) && hasSystemMembers;
-      const newTab = {
-        tab_order: tabsData.length + 1,
-        title: DEFAULT_TAB_TITLE,
-        remove_tab: shouldRemoveTab,
-        data: (tabsData == null ? void 0 : tabsData.length) ? [] : formWithMembers2
-      };
-      setTabsData((prevTabs) => [...prevTabs, newTab]);
-    } catch (error) {
-      console.error("Error adding new tab:", error);
-    }
-  }, [sectionFormJSON, members, tabsData, setTabsData]);
-  const handleEditTabTitle = useCallback((tabId, newTitle) => {
-    try {
-      if (!isValidNumber(tabId) || !(newTitle == null ? void 0 : newTitle.trim())) {
-        console.error("Invalid tab ID or title provided");
-        return;
-      }
-      setTabsData(
-        (prevTabs) => prevTabs.map(
-          (tab) => tab.tab_order === tabId ? { ...tab, title: newTitle.trim() } : tab
-        )
-      );
-    } catch (error) {
-      console.error("Error editing tab title:", error);
-    }
-  }, [setTabsData]);
-  const handleRemoveTab = useCallback((id) => {
-    try {
-      if (!isValidNumber(id)) {
-        console.error("Invalid tab ID provided");
-        return;
-      }
-      const filteredTabs = tabsData.filter((tab) => tab.tab_order !== id);
-      const reorderedTabs = filteredTabs.map((tab) => ({
-        ...tab,
-        tab_order: tab.tab_order > id ? tab.tab_order - 1 : tab.tab_order
-      }));
-      setTabsData(reorderedTabs);
-      if (activeTabValue == id) {
-        setActiveTabValue((reorderedTabs == null ? void 0 : reorderedTabs.length) - 1);
-      }
-      if (reorderedTabs.length > 0) {
-        const activeTab = reorderedTabs.find(
-          (tab) => tab.tab_order === (activeTabValue ?? 0) + 1
-        );
-        if (activeTab == null ? void 0 : activeTab.data) {
-          const sections = activeTab.data.map(
-            ({ field_type, label, is_accordion, id: id2, remove_section }) => ({
-              field_type,
-              label,
-              is_accordion,
-              id: id2,
-              remove_section
-            })
-          );
-          const membersList = activeTab.data.flatMap(
-            (section2) => {
-              var _a;
-              return ((_a = section2.members) == null ? void 0 : _a.map((member) => ({ ...member }))) || [];
-            }
-          );
-          remove();
-          removeSection();
-          membersList.forEach((member) => append(member));
-          sections.forEach((section2) => appendSection(section2));
-        }
-      } else {
-        remove();
-        removeSection();
-      }
-    } catch (error) {
-      console.error("Error removing tab:", error);
-    }
-  }, [tabsData, activeTabValue, setTabsData, remove, removeSection, append, appendSection]);
-  const handleElementSelection = useCallback((e) => {
-    try {
-      const target = e.target;
-      const elementPositionIndex = target.dataset.position;
-      if (!elementPositionIndex || !isValidNumber(elementPositionIndex)) {
-        console.error("Invalid element position index");
-        return;
-      }
-      const positionIndex = Number(elementPositionIndex);
-      if (positionIndex < 0 || positionIndex >= formJSON.length) {
-        console.error("Element position index out of bounds");
-        return;
-      }
-      setActiveMember(positionIndex);
-      const elementDetails = deepClone(formJSON[positionIndex]);
-      setPositionEditedElement(positionIndex);
-      setElementJSON(elementDetails);
-      setSelectedHoc("element");
-    } catch (error) {
-      console.error("Error selecting element:", error);
-    }
-  }, [formJSON, setActiveMember, setPositionEditedElement, setElementJSON, setSelectedHoc]);
-  const handleSectionSelection = useCallback((e) => {
-    try {
-      const target = e.target;
-      const sectionPositionIndex = target.dataset.position;
-      if (!sectionPositionIndex || !isValidNumber(sectionPositionIndex)) {
-        console.error("Invalid section position index");
-        return;
-      }
-      const positionIndex = Number(sectionPositionIndex);
-      if (positionIndex < 0 || positionIndex >= sectionFormJSON.length) {
-        console.error("Section position index out of bounds");
-        return;
-      }
-      setActiveSection(positionIndex);
-      const sectionDetails = deepClone(sectionFormJSON[positionIndex]);
-      setSectionPositionEditedElement(positionIndex);
-      setSectionJSON(sectionDetails);
-      setSelectedHoc("section");
-    } catch (error) {
-      console.error("Error selecting section:", error);
-    }
-  }, [sectionFormJSON, setActiveSection, setSectionPositionEditedElement, setSectionJSON, setSelectedHoc]);
-  const handleAddMember = useCallback((e, otherProperties) => {
-    var _a, _b;
-    try {
-      const target = e.currentTarget;
-      const sectionPositionIndex = (_a = target == null ? void 0 : target.dataset) == null ? void 0 : _a.position;
-      if (sectionPositionIndex === void 0 || !isValidNumber(sectionPositionIndex)) {
-        console.error("Invalid section position index for adding member");
-        return;
-      }
-      const positionIndex = Number(sectionPositionIndex);
-      if (positionIndex < 0) {
-        console.error("Section position index cannot be negative");
-        return;
-      }
-      if (!((_b = element) == null ? void 0 : _b.text)) {
-        console.error("Element text template is not available");
-        return;
-      }
-      const newMember = {
-        ...deepClone(element.text),
-        ...otherProperties,
-        section_order: positionIndex,
-        type: "custom",
-        is_new: true,
-        custom_width: Math.floor(DEFAULT_GRID_COLUMNS / DEFAULT_COLUMN_WIDTH),
-        is_fullwidth: false,
-        is_system_field: Boolean(otherProperties == null ? void 0 : otherProperties.is_system_field),
-        id: generateUniqueId().uniqueStringId
-      };
-      setActiveSection(positionIndex);
-      append(newMember);
-      const elementPositionIndex = members.length;
-      setActiveMember(elementPositionIndex);
-      setSelectedHoc("element");
-      setPositionEditedElement(elementPositionIndex);
-      setElementJSON(newMember);
-      pickPropertyEditForm(newMember.field_type);
-    } catch (error) {
-      console.error("Error adding new member:", error);
-    }
-  }, [element, members, setActiveSection, append, setActiveMember, setSelectedHoc, setPositionEditedElement, setElementJSON, pickPropertyEditForm]);
-  const handleSectionPropertyValueUpdate = useCallback((e, overrideValue) => {
-    try {
-      const { name, type, checked, value } = e.target;
-      if (!name) {
-        console.error("Property name is required for update");
-        return;
-      }
-      const updatedValue = overrideValue !== void 0 ? overrideValue : type === "checkbox" ? checked : value;
-      if (sectionJSON[name] !== updatedValue) {
-        setSectionJSON((prev) => ({ ...prev, [name]: updatedValue }));
-      }
-    } catch (error) {
-      console.error("Error updating section property:", error);
-    }
-  }, [sectionJSON, setSectionJSON]);
-  const handleWidthChange = useCallback((newCustomWidth) => {
-    try {
-      if (!isValidNumber(newCustomWidth) || newCustomWidth < 1 || newCustomWidth > DEFAULT_GRID_COLUMNS) {
-        console.error("Invalid width value provided");
-        return;
-      }
-      setElementJSON((prevData) => ({
-        ...prevData,
-        custom_width: newCustomWidth
-      }));
-    } catch (error) {
-      console.error("Error updating width:", error);
-    }
-  }, [setElementJSON]);
-  const handleColumnSelect = useCallback((e) => {
-    try {
-      const columnValue = Number(e.target.value);
-      if (!isValidNumber(columnValue) || columnValue <= 0) {
-        console.error("Invalid column value provided");
-        return;
-      }
-      const elementPerColumn2 = Math.floor(DEFAULT_GRID_COLUMNS / columnValue);
-      if (elementPerColumn2 <= 0) {
-        console.error("Calculated element per column is invalid");
-        return;
-      }
-      members.forEach((field, index) => {
-        update(index, { ...field, custom_width: elementPerColumn2 });
-      });
-    } catch (error) {
-      console.error("Error updating column selection:", error);
-    }
-  }, [members, update]);
-  const handlePropertyValueUpdate = useCallback((e, numberValue, val, fieldType) => {
-    var _a;
-    try {
-      const getValue = () => {
-        var _a2;
-        if (fieldType) return fieldType;
-        if (val !== void 0) return val;
-        if (numberValue !== void 0) return numberValue;
-        return (_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value;
-      };
-      const value = getValue();
-      const elementJSONCopy = deepClone(elementJSON);
-      if ((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.name) {
-        elementJSONCopy[e.target.name] = e.target.type === "checkbox" ? e.target.checked : value;
-      }
-      if (fieldType) {
-        const { uniqueStringId: uniqueId } = generateUniqueId();
-        const copyOfUpdatedElement = {
-          ...element[fieldType],
-          section_form_id: elementJSONCopy == null ? void 0 : elementJSONCopy.section_form_id,
-          is_form_switcher_section: elementJSONCopy == null ? void 0 : elementJSONCopy.is_form_switcher_section,
-          section_order: elementJSONCopy.section_order,
-          id: uniqueId,
-          type: "custom",
-          is_system_field: Boolean(elementJSONCopy == null ? void 0 : elementJSONCopy.is_system_field),
-          is_new: true,
-          column_width: (elementJSONCopy == null ? void 0 : elementJSONCopy.column_width) || 6,
-          custom_width: (elementJSONCopy == null ? void 0 : elementJSONCopy.custom_width) || 6
-        };
-        setElementJSON(copyOfUpdatedElement);
-      } else if (JSON.stringify(elementJSON) !== JSON.stringify(elementJSONCopy)) {
-        setElementJSON({ ...elementJSON, ...elementJSONCopy });
-      }
-    } catch (error) {
-      console.error("Error updating property value:", error);
-    }
-  }, [elementJSON, element, setElementJSON]);
-  const handleSelectOptionValueUpdate = useCallback((options) => {
-    try {
-      if (!Array.isArray(options)) {
-        console.error("Options must be an array");
-        return;
-      }
-      const elementJSONCopy = deepClone(elementJSON);
-      elementJSONCopy.options = [...options];
-      const { uniqueStringId: uniqueId } = generateUniqueId("-");
-      if (JSON.stringify(elementJSON.options) !== JSON.stringify(options)) {
-        setElementJSON({ ...elementJSON, ...elementJSONCopy, id: uniqueId });
-      }
-    } catch (error) {
-      console.error("Error updating select options:", error);
-    }
-  }, [elementJSON, setElementJSON]);
-  const handleColumnsUpdate = useCallback((columns) => {
-    try {
-      if (!Array.isArray(columns)) {
-        console.error("Columns must be an array");
-        return;
-      }
-      const elementJSONCopy = deepClone(elementJSON);
-      elementJSONCopy.table_columns = [...columns];
-      const { uniqueStringId: uniqueId } = generateUniqueId("-");
-      if (JSON.stringify(elementJSON.table_columns) !== JSON.stringify(columns)) {
-        setElementJSON({ ...elementJSON, ...elementJSONCopy, id: uniqueId });
-      }
-    } catch (error) {
-      console.error("Error updating table columns:", error);
-    }
-  }, [elementJSON, setElementJSON]);
-  const handleRemoveSection = useCallback((sectionIndex) => {
-    try {
-      if (!isValidNumber(sectionIndex) || sectionIndex < 0 || sectionIndex >= section.length) {
-        console.error("Invalid section index for removal");
-        return;
-      }
-      setRemoveSectionPosition(sectionIndex);
-      removeSection(sectionIndex);
-      const membersToRemove = [];
-      members.forEach((member, index) => {
-        if ((member == null ? void 0 : member.section_order) === sectionIndex) {
-          membersToRemove.push(index);
-        }
-      });
-      membersToRemove.reverse().forEach((memberIndex) => {
-        remove(memberIndex);
-      });
-      setRemoveSectionActionPerformed(true);
-    } catch (error) {
-      console.error("Error removing section:", error);
-    }
-  }, [section, members, setRemoveSectionPosition, removeSection, remove, setRemoveSectionActionPerformed]);
-  const handleMakeAccordion = useCallback((sectionIndex) => {
-    try {
-      if (!isValidNumber(sectionIndex) || sectionIndex < 0 || sectionIndex >= section.length) {
-        console.error("Invalid section index for accordion conversion");
-        return;
-      }
-      setModifyAccordion(true);
-      setSectionPositionEditedElement(sectionIndex);
-      setActiveSection(sectionIndex);
-      const copyOfSection = {
-        ...deepClone(section[sectionIndex]),
-        is_accordion: true
-      };
-      updateSection(sectionIndex, copyOfSection);
-      setSelectedHoc("section");
-      setSectionJSON(copyOfSection);
-      pickPropertyEditForm(copyOfSection.field_type);
-    } catch (error) {
-      console.error("Error making section accordion:", error);
-    }
-  }, [section, setModifyAccordion, setSectionPositionEditedElement, setActiveSection, updateSection, setSelectedHoc, setSectionJSON, pickPropertyEditForm]);
-  const handleTabData = useCallback(() => {
-    try {
-      const formWithMembers2 = deepClone(sectionFormJSON);
-      formWithMembers2.forEach((section2, sectionIndex) => {
-        section2.members = members.filter(
-          (member) => (member == null ? void 0 : member.section_order) === sectionIndex
-        );
-      });
-      const hasSystemMembers = formWithMembers2.some(
-        (section2) => {
-          var _a;
-          return (_a = section2.members) == null ? void 0 : _a.some((member) => Boolean(member == null ? void 0 : member.is_system_field));
-        }
-      );
-      const activeTabIndex = Number(activeTabValue);
-      if (isValidNumber(activeTabIndex) && activeTabIndex >= 0 && activeTabIndex < tabsData.length) {
-        const updatedTabsData = [...tabsData];
-        updatedTabsData[activeTabIndex] = {
-          ...updatedTabsData[activeTabIndex],
-          data: formWithMembers2,
-          remove_tab: hasSystemMembers
-        };
-        setTabsData(updatedTabsData);
-        remove();
-        removeSection();
-        setActiveMember(void 0);
-        setSelectedHoc("");
-        setActiveSection(void 0);
-      }
-    } catch (error) {
-      console.error("Error updating tab data:", error);
-    }
-  }, [sectionFormJSON, members, activeTabValue, tabsData, setTabsData]);
-  const formWithMembers = useMemo(() => {
-    if (!sectionFormJSON || !members) return null;
-    return sectionFormJSON.map((section2, sectionIndex) => ({
-      ...section2,
-      members: members.filter(
-        (member) => (member == null ? void 0 : member.section_order) === sectionIndex
-      )
-    }));
-  }, [sectionFormJSON, members]);
-  const previewState = useMemo(() => {
-    if (!formWithMembers) return null;
-    return (tabsData == null ? void 0 : tabsData.length) ? { tab: tabsData } : { section: formWithMembers };
-  }, [tabsData, formWithMembers]);
-  const previewFields = useMemo(() => {
-    if (!previewState) return null;
-    return formBuilderConversion(previewState);
-  }, [previewState]);
-  const showPreview = useCallback(() => {
-    if (previewFields) {
-      setPreviewFields(previewFields);
-    }
-  }, [previewFields, setPreviewFields]);
-  const hidePreview = useCallback(() => {
-    setPreviewFields(null);
-  }, []);
-  const handleFormUpdate = useCallback(async () => {
-    var _a;
-    try {
-      if (!sectionFormJSON || !Array.isArray(sectionFormJSON)) {
-        console.warn("Invalid sectionFormJSON provided");
-        return;
-      }
-      if (!members || !Array.isArray(members)) {
-        console.warn("Invalid members array provided");
-        return;
-      }
-      if (!(rowData == null ? void 0 : rowData._id)) {
-        console.warn("Missing rowData._id for form update");
-        return;
-      }
-      let formWithMembers2;
-      try {
-        formWithMembers2 = structuredClone(sectionFormJSON);
-      } catch (cloneError) {
-        formWithMembers2 = JSON.parse(JSON.stringify(sectionFormJSON));
-      }
-      formWithMembers2.forEach((section2, sectionIndex) => {
-        if (!section2 || typeof section2 !== "object") {
-          console.warn(`Invalid section at index ${sectionIndex}`);
-          return;
-        }
-        section2.members = members.filter((member) => {
-          return member && typeof member === "object" && typeof member.section_order === "number" && member.section_order === sectionIndex;
-        });
-      });
-      const hasSystemMembers = formWithMembers2.some(
-        (section2) => {
-          var _a2;
-          return (_a2 = section2.members) == null ? void 0 : _a2.some((member) => Boolean(member == null ? void 0 : member.is_system_field));
-        }
-      );
-      const activeTabIndex = Number(activeTabValue);
-      let updatedTabsData = [...tabsData];
-      if (isValidNumber(activeTabIndex) && activeTabIndex >= 0 && activeTabIndex < tabsData.length) {
-        updatedTabsData = [...tabsData];
-        updatedTabsData[activeTabIndex] = {
-          ...updatedTabsData[activeTabIndex],
-          data: formWithMembers2,
-          remove_tab: hasSystemMembers
-        };
-        setTabsData(updatedTabsData);
-      }
-      const state = (updatedTabsData == null ? void 0 : updatedTabsData.length) > 0 ? { tab: updatedTabsData } : { section: formWithMembers2 };
-      if (typeof formBuilderConversion !== "function") {
-        console.error("formBuilderConversion is not a function");
-        return;
-      }
-      let formBuilderConversionResult;
-      try {
-        formBuilderConversionResult = formBuilderConversion(state);
-      } catch (conversionError) {
-        console.error("Error during form builder conversion:", conversionError);
-        return;
-      }
-      if (!formBuilderConversionResult) {
-        console.warn("Form builder conversion returned empty result");
-        return;
-      }
-      const updatePayload = {
-        gridCol: 2,
-        fields: formBuilderConversionResult
-      };
-      const updateRes = await dispatch(
-        patchFormDataById({
-          id: rowData._id,
-          data: updatePayload
-        })
-      );
-      if (updateRes.meta.requestStatus === "rejected") {
-        const m = getErrorMessage((_a = updateRes == null ? void 0 : updateRes.error) == null ? void 0 : _a.message);
-        enqueueSnackbar(m, { variant: "error" });
-      } else {
-        enqueueSnackbar("Form updated successfully", { variant: "success" });
-        navigate(path);
-      }
-    } catch (error) {
-      const m = (error == null ? void 0 : error.message) || "Something went wrong while updating the form";
-      enqueueSnackbar(m, { variant: "error" });
-    }
-  }, [
-    sectionFormJSON,
-    members,
-    tabsData,
-    rowData == null ? void 0 : rowData._id,
-    elementPerColumn,
-    dispatch,
-    formBuilderConversion
-  ]);
-  const handleDuplicateElement = (index) => {
-    const copyOfMember = { ...members[index], type: "custom" };
-    copyOfMember && insert(index + 1, copyOfMember);
-    setActiveMember(index + 1);
-    setSelectedHoc("element");
-    setPositionEditedElement(index + 1);
-    setElementJSON(copyOfMember);
-    pickPropertyEditForm(copyOfMember.field_type);
-  };
-  const breadCrumbPath = [
-    {
-      link: path,
-      label: "Forms"
-    },
-    {
-      link: "",
-      label: formatLabel(rowData == null ? void 0 : rowData.name)
-    },
-    {
-      link: "",
-      label: "Edit Form"
-    }
-  ];
-  useEffect(() => {
-    if (removeSectionActionPerformed) {
-      members.forEach((member, index) => {
-        if (removeSectionPosition !== void 0 && Boolean(removeSectionPosition == null ? void 0 : removeSectionPosition.toString) && member.section_order > removeSectionPosition) {
-          update(index, { ...member, section_order: member.section_order - 1 });
-        }
-      });
-      setRemoveSectionActionPerformed(false);
-      setRemoveSectionMembersPerformed(true);
-      setRemoveSectionPosition(void 0);
-      setSelectedHoc("");
-    }
-  }, [removeSectionActionPerformed]);
-  useEffect(() => {
-    formBuilder.isSuccess && navigate(path);
-  }, [formBuilder.isSuccess]);
-  useEffect(() => {
-    if (formBuilder.isError) {
-      setToast({
-        type: "alert",
-        message: formBuilder.error
-      });
-    }
-  }, [formBuilder.error, formBuilder.isError]);
-  useEffect(() => {
-    if (typeof positionEditedElement !== "number" || typeof positionEditedElement !== "string") {
-      const index = Number(positionEditedElement);
-      if (formJSON[index]) {
-        const copyOfUpdatedFormJson = JSON.parse(
-          JSON.stringify(formJSON[index])
-        );
-        update(index, { ...copyOfUpdatedFormJson });
-      }
-    }
-  }, [formJSON]);
-  useEffect(() => {
-    const updatedFormJSON = formJSON.map((obj, index) => {
-      if (index === Number(positionEditedElement)) {
-        return { ...elementJSON };
-      } else {
-        return { ...obj };
-      }
-    });
-    setFormJSON(updatedFormJSON);
-  }, [elementJSON]);
-  useEffect(() => {
-    if (members.length !== formJSON.length) {
-      setFormJSON(JSON.parse(JSON.stringify(members)));
-    }
-    if (Boolean(elementSwap) && JSON.stringify(members) !== JSON.stringify(formJSON)) {
-      setFormJSON(JSON.parse(JSON.stringify(members)));
-      setElementSwap(false);
-      const newMember = positionEditedElement && members[positionEditedElement];
-      newMember && setSelectedHoc("element");
-      newMember && setElementJSON(newMember);
-      newMember && pickPropertyEditForm(newMember.field_type);
-    }
-    if (removeSectionMembersPerformed && JSON.stringify(members) !== JSON.stringify(formJSON)) {
-      setFormJSON(JSON.parse(JSON.stringify(members)));
-      setRemoveSectionMembersPerformed(false);
-    }
-  }, [members, elementSwap]);
-  useEffect(() => {
-    if (typeof sectionPositionEditedElement !== "number" || typeof sectionPositionEditedElement !== "string") {
-      const index = Number(sectionPositionEditedElement);
-      if (sectionFormJSON[index]) {
-        const copyOfUpdatedFormJson = JSON.parse(
-          JSON.stringify(sectionFormJSON[index])
-        );
-        updateSection(index, { ...copyOfUpdatedFormJson });
-      }
-    }
-  }, [sectionFormJSON]);
-  useEffect(() => {
-    const updatedFormJSON = sectionFormJSON.map((obj, index) => {
-      if (index === Number(sectionPositionEditedElement)) {
-        return { ...obj, ...sectionJSON };
-      } else {
-        return { ...obj };
-      }
-    });
-    setSectionFormJSON(updatedFormJSON);
-  }, [sectionJSON]);
-  useEffect(() => {
-    if (section.length !== sectionFormJSON.length) {
-      setSectionFormJSON(JSON.parse(JSON.stringify(section)));
-    }
-    if (JSON.stringify(sectionFormJSON) !== JSON.stringify(section) && modifyAccordion) {
-      setSectionFormJSON(JSON.parse(JSON.stringify(section)));
-      setModifyAccordion(false);
-    }
-  }, [section]);
-  useEffect(() => {
-  }, []);
-  const handleFormData = useCallback(async () => {
-    setInitialLoading(true);
-    try {
-      if (rowData == null ? void 0 : rowData._id) {
-        setTabsData([]);
-        await dispatch(getFormDataById(rowData == null ? void 0 : rowData._id));
-        await dispatch(getFieldsByFormId({ id: rowData == null ? void 0 : rowData._id }));
-      }
-    } finally {
-      setInitialLoading(false);
-    }
-  }, [rowData == null ? void 0 : rowData._id]);
-  useEffect(() => {
-    handleFormData();
-  }, [handleFormData]);
-  const DEFAULT_FIELD_TYPE = "text";
-  const HOC_TYPES = {
-    ELEMENT: "element",
-    SECTION: "section"
-  };
-  const hasValidContent = (obj) => {
-    return obj && Object.keys(obj).length > 0;
-  };
-  const EmptyStateMessage = () => /* @__PURE__ */ jsx(Typography, { type: "s5", color: "theme.secondary.800", className: "formSection--Text", children: "Select a field to edit its properties." });
-  const getFieldTypeWithFallback = (json, fallback = DEFAULT_FIELD_TYPE) => {
-    return (json == null ? void 0 : json.field_type) || fallback;
-  };
-  const memoizedForm = useMemo(() => {
-    if (!selectedHoc) {
-      return /* @__PURE__ */ jsx(EmptyStateMessage, {});
-    }
-    if (selectedHoc === HOC_TYPES.ELEMENT) {
-      if (!hasValidContent(members)) {
-        console.warn("Element selected but no members data available");
-        return /* @__PURE__ */ jsx(EmptyStateMessage, {});
-      }
-      const fieldType = getFieldTypeWithFallback(elementJSON);
-      return pickPropertyEditForm(fieldType);
-    }
-    if (selectedHoc === HOC_TYPES.SECTION) {
-      if (!hasValidContent(section)) {
-        console.warn("Section selected but no section data available");
-        return /* @__PURE__ */ jsx(EmptyStateMessage, {});
-      }
-      const fieldType = getFieldTypeWithFallback(sectionJSON);
-      return pickPropertyEditForm(fieldType);
-    }
-    console.warn(`Unknown selectedHoc type: ${selectedHoc}`);
-    return /* @__PURE__ */ jsx(EmptyStateMessage, {});
-  }, [
-    // Core dependencies
-    selectedHoc,
-    // Data dependencies
-    Object.keys(members).length,
-    Object.keys(section).length,
-    // JSON dependencies with deep comparison consideration
-    elementJSON == null ? void 0 : elementJSON.field_type,
-    elementJSON == null ? void 0 : elementJSON.field_properties,
-    sectionJSON == null ? void 0 : sectionJSON.field_type,
-    sectionJSON == null ? void 0 : sectionJSON.field_properties,
-    // Function dependency
-    pickPropertyEditForm
-  ]);
-  return (
-    //   <FullScreenLayout className="formSection--Layout">
-    /* @__PURE__ */ jsx(Box, { position: "relative", children: initialLoading ? /* @__PURE__ */ jsx(ErpLoader, {}) : /* @__PURE__ */ jsxs(DndProvider, { backend: HTML5Backend, children: [
-      /* @__PURE__ */ jsx(FormHeader, { breadCrumbPath, children: /* @__PURE__ */ jsxs("div", { className: "formSection--Buttons", children: [
-        /* @__PURE__ */ jsx(
-          DynamicButton,
-          {
-            variant: "outlined",
-            className: "formSection--PreviewButton",
-            text: "Preview",
-            onClick: () => {
-              !previewFieldsData ? showPreview() : hidePreview();
-            },
-            disable: !(members == null ? void 0 : members.length),
-            startIcon: previewFieldsData ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          DynamicButton,
-          {
-            variant: "contained",
-            type: "submit",
-            text: "Update",
-            onClick: handleFormUpdate,
-            disable: previewFieldsData
-          }
-        )
-      ] }) }),
-      !previewFieldsData ? /* @__PURE__ */ jsxs(Grid, { className: "formSection--Grid", container: true, children: [
-        /* @__PURE__ */ jsx(
-          Grid,
-          {
-            item: true,
-            xs: 9,
-            component: "form",
-            sx: {
-              position: "relative",
-              background: "#F5F6F5",
-              padding: "0.75rem"
-            },
-            children: /* @__PURE__ */ jsxs(Grid, { className: "formSection--GridContainer", children: [
-              /* @__PURE__ */ jsxs(Box, { className: "formSection--Tab", children: [
-                tabsData && /* @__PURE__ */ jsx(
-                  TabBar,
-                  {
-                    tabs: tabsData,
-                    onEditTabTitle: handleEditTabTitle,
-                    activeValue: activeTabValue,
-                    setActiveValue: setActiveTabValue,
-                    handleTabChange: () => {
-                      handleTabData();
-                    },
-                    handleRemoveTab,
-                    containerProps: { mb: 0 }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  DynamicButton,
-                  {
-                    variant: "outlined",
-                    text: "Add Tab",
-                    onClick: handleAddTab,
-                    style: { color: "#292D32", margin: "0.5rem" }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "formSection--Form", children: [
-                section == null ? void 0 : section.map((item, i) => {
-                  var _a;
-                  const sectionMembers = members.filter(
-                    (member) => member.section_order === i
-                  );
-                  const isFormSwitcher = item.section_type === SECTION_TYPES.FORM_SWITCH_SECTION;
-                  const switchForms = (_a = item == null ? void 0 : item.switcher_forms) == null ? void 0 : _a.map((form) => ({
-                    ...form,
-                    formMembers: members.filter(
-                      (member) => member.section_form_id === form.id
-                    )
-                  }));
-                  return /* @__PURE__ */ jsxs(
-                    DynamicSectionHOC,
-                    {
-                      index: i,
-                      label: t(item.label),
-                      onClick: handleSectionSelection,
-                      position: i,
-                      fieldArrayName: "section",
-                      isFormSwitcher,
-                      activeIndex: activeSection === i,
-                      removeSection: () => handleRemoveSection(i),
-                      handleAccordion: () => handleMakeAccordion(i),
-                      handleAddButton: (e) => handleAddMember(e),
-                      remove_section: item.remove_section,
-                      children: [
-                        isFormSwitcher ? /* @__PURE__ */ jsxs("div", { style: { width: "100%" }, children: [
-                          /* @__PURE__ */ jsx(Typography, { type: "s5", style: { fontWeight: 500 }, color: "theme.secondary.800", children: item.form_switcher_label }),
-                          /* @__PURE__ */ jsx(
-                            RadioGroup,
-                            {
-                              "aria-labelledby": "theme-radio-buttons-group-label",
-                              name: item.form_switcher_name || item.form_switcher_label,
-                              children: switchForms == null ? void 0 : switchForms.map(({ name, id, formMembers }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                                  FormControlLabel,
-                                  {
-                                    value: name,
-                                    control: /* @__PURE__ */ jsx(Radio, {}),
-                                    label: t(name),
-                                    disabled: true
-                                  },
-                                  id
-                                ) }),
-                                /* @__PURE__ */ jsx(Grid, { container: true, sx: { mb: 3 }, children: /* @__PURE__ */ jsx(
-                                  FormFields,
-                                  {
-                                    sectionMembers: formMembers || [],
-                                    members,
-                                    activeMember,
-                                    control,
-                                    t,
-                                    element,
-                                    images,
-                                    elementJSON,
-                                    remove,
-                                    move,
-                                    handleElementSelection,
-                                    setElementSwap,
-                                    handleDuplicateElement,
-                                    setSelectedHoc,
-                                    setActiveMember
-                                  }
-                                ) }),
-                                /* @__PURE__ */ jsx(
-                                  DynamicButton,
-                                  {
-                                    text: "Add",
-                                    variant: "outlined",
-                                    className: "formSection--PreviewButton",
-                                    "data-position": i,
-                                    onClick: (e) => handleAddMember(e, {
-                                      section_form_id: id,
-                                      is_form_switcher_section: true
-                                    }),
-                                    startIcon: /* @__PURE__ */ jsx(Add, {})
-                                  }
-                                )
-                              ] }))
-                            }
-                          )
-                        ] }) : null,
-                        !isFormSwitcher && /* @__PURE__ */ jsx(
-                          FormFields,
-                          {
-                            sectionMembers: sectionMembers || [],
-                            members,
-                            activeMember,
-                            control,
-                            t,
-                            element,
-                            images,
-                            elementJSON,
-                            remove,
-                            move,
-                            handleElementSelection,
-                            setElementSwap,
-                            handleDuplicateElement,
-                            setSelectedHoc,
-                            setActiveMember
-                          }
-                        )
-                      ]
-                    }
-                  );
-                }),
-                /* @__PURE__ */ jsx("div", { className: "formSection--Section", children: /* @__PURE__ */ jsx(
-                  DynamicButton,
-                  {
-                    text: "Add a section",
-                    variant: "outlined",
-                    className: "formSection--PreviewButton",
-                    onClick: addNewSection,
-                    startIcon: /* @__PURE__ */ jsx(Add, {})
-                  }
-                ) })
-              ] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Grid,
-          {
-            item: true,
-            xs: 3,
-            className: Boolean(selectedHoc) && ((members == null ? void 0 : members.length) || section.length) ? "formSection--RightGrid" : "formSection--RightGrid formSection--Text",
-            children: memoizedForm
-          }
-        )
-      ] }) : /* @__PURE__ */ jsx(
-        FormParser,
-        {
-          data: previewFieldsData || [],
-          handleFormSubmit: (data) => console.log("Preview Data", data),
-          className: "form-container",
-          fieldArrayName: "form-builder-preview",
-          getFormMethods: (methods) => setFormParserMethods({ ...methods })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Toast,
-        {
-          open: Boolean(toast),
-          type: toast == null ? void 0 : toast.type,
-          message: toast == null ? void 0 : toast.message,
-          handleClose: () => setToast(null),
-          anchorOrigin: { horizontal: "right", vertical: "bottom" }
-        }
-      )
-    ] }) })
-  );
-}
-export {
-  CustomForm,
-  CustomForm as default
-};
-//# sourceMappingURL=index.esm.js.map