@erpsquad/common 1.8.29 → 1.8.30

package/dist/components/material-editable-table/material-editable-table/index.esm.js

@@ -1,1164 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React__default, { useState, useEffect, useCallback, cloneElement } from "react";
-import { useMaterialReactTable, MaterialReactTable } from "../../../node_modules/material-react-table/dist/index.esm/index.esm.js";
-import default_1$1 from "../../../node_modules/@mui/icons-material/ChevronRight/index.esm.js";
-import default_1 from "../../../node_modules/@mui/icons-material/ChevronLeft/index.esm.js";
-import Menu from "../../menu/menu/index.esm.js";
-import { Typography } from "../../typography/typography/index.esm.js";
-import SearchBar from "../../search-bar/search-bar/index.esm.js";
-import { images } from "../../../images/index.esm.js";
-/* empty css                                        */
-import InlineEditFields from "../components/inline-edit-fields/index.esm.js";
-import Tooltip from "../../tooltip/Tooltip/index.esm.js";
-import Button from "../../button/button/index.esm.js";
-import default_1$2 from "../../../node_modules/@mui/icons-material/Add/index.esm.js";
-import dayjs from "dayjs";
-import * as Yup from "yup";
-import ConfirmPopUp from "../../confirm-modal/confirm-modal/index.esm.js";
-import { useTranslation } from "react-i18next";
-import { enqueueSnackbar } from "../../../node_modules/notistack/notistack.esm/index.esm.js";
-import { usePages } from "../../../hooks/use-pages/index.esm.js";
-import { useNavigate } from "react-router-dom";
-import { PathnameDocument } from "../../../constants/pathnames/pathname.document/index.esm.js";
-import { PathnameAccounting } from "../../../constants/pathnames/pathname.accounting/index.esm.js";
-import { PathnameInventory } from "../../../constants/pathnames/pathname.inventory/index.esm.js";
-import { PathnameManufacturing } from "../../../constants/pathnames/pathname.manufacturing/index.esm.js";
-import { PathnamePurchase } from "../../../constants/pathnames/pathname.procurement/index.esm.js";
-import { PathnameCrm } from "../../../constants/pathnames/pathname.crm/index.esm.js";
-import { PathnameUsers } from "../../../constants/pathnames/pathname.user/index.esm.js";
-import { PathnameRental } from "../../../constants/pathnames/pathname.rental/index.esm.js";
-import useDeepMemo from "../../../hooks/use-deep-memo/index.esm.js";
-import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
-import IconButton from "../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
-import styled from "../../../node_modules/@mui/material/styles/styled/index.esm.js";
-import MenuItem from "../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
-import ListItemIcon from "../../../node_modules/@mui/material/ListItemIcon/ListItemIcon/index.esm.js";
-import ListItemText from "../../../node_modules/@mui/material/ListItemText/ListItemText/index.esm.js";
-import Divider from "../../../node_modules/@mui/material/Divider/Divider/index.esm.js";
-import { Close } from "../../icons/close/index.esm.js";
-import { ArrowUpDown } from "../../icons/arrow-up-down/index.esm.js";
-import { RecgtangleIcon } from "../../icons/rectangle/index.esm.js";
-import { CheckBoxIcon } from "../../icons/check-box/index.esm.js";
-import { Trash } from "../../icons/trash/index.esm.js";
-const TableWrapper = styled(Box)(({ theme: { palette } }) => {
-  var _a, _b, _c, _d;
-  return {
-    ".MuiTableCell-root": {
-      border: "1px solid #efefef",
-      borderBottom: 0,
-      borderLeft: 0,
-      padding: "0.19rem 0.5rem",
-      lineHeight: "19px",
-      fontSize: "14px",
-      minHeight: 40
-      // '&:first-child': {
-      // 	borderLeft: '1px solid #efefef'
-      // },
-      // '&:last-child': {
-      // 	borderBottom: '1px solid #efefef'
-      // }
-    },
-    ".MuiTableCell-head": {
-      backgroundColor: (_a = palette.theme) == null ? void 0 : _a.secondary[100]
-    },
-    ".MuiTableContainer-root": {
-      maxHeight: "clamp(350px, 100vh - 200px, 9999px) !important"
-    },
-    ".MuiPaper-root": {
-      boxShadow: "none"
-    },
-    ".MuiPaginationItem-root": {
-      "&.Mui-selected": {
-        backgroundColor: (_b = palette == null ? void 0 : palette.theme) == null ? void 0 : _b.primary[700],
-        color: "white"
-      }
-    },
-    ".MuiTableRow-root": {
-      "&.Mui-selected": {
-        backgroundColor: `${(_c = palette == null ? void 0 : palette.theme) == null ? void 0 : _c.primary[100]} !important`,
-        color: "white"
-      }
-    },
-    ".MuiCheckbox-indeterminate": {
-      color: `${(_d = palette == null ? void 0 : palette.theme) == null ? void 0 : _d.primary[700]} !important`,
-      "& svg": {
-        height: `20px !important`,
-        width: `20px !important`
-      }
-    }
-  };
-});
-const MaterialEditableTable = React__default.memo(({
-  enablePagination = false,
-  rows,
-  columns,
-  totalPages,
-  paginationModel,
-  columnOrder,
-  updateData,
-  handleColumnOrdering,
-  enableEditing,
-  enableColumnDragging,
-  states,
-  rowActionMenu,
-  destructiveActionMenu,
-  disableDefaultActionColumn,
-  enableRowSelection,
-  defaultActionColumnItems = [],
-  enableBottomToolbar,
-  SetSelectedRowId,
-  isResetRow,
-  onCreateRow,
-  onEditRow,
-  onDeleteRow,
-  editDisplayMode,
-  enableRowCreate,
-  onChangeRowField,
-  onSelectRow,
-  enableColumnResizing = true,
-  selectedRowIds = [],
-  onColumnVisibility,
-  onSortingChange,
-  getSelectedData,
-  disabledDefaultActionColumnIcon = false,
-  enableAddCustomField = true,
-  enableRowDragging = false,
-  handleColumnResizing = () => {
-  },
-  columnSizes = {},
-  // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars
-  // getRowId,
-  // onDelete,
-  // onUpdate,
-  ...rest
-}) => {
-  const { t } = useTranslation();
-  const { formData = null, updatePageInfo, activePage: aPage } = usePages();
-  const activePage = useDeepMemo(aPage);
-  const { pageNo } = paginationModel;
-  const [row, setRow] = useState({});
-  const [tableColumns, setTableColumns] = useState(columns);
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [popUpShow, setPopupShow] = useState(false);
-  const [rowAnchorEl, setRowAnchorEl] = useState(null);
-  const visibleColumns = tableColumns.filter((column) => column.visible);
-  const hiddenColumns = tableColumns.filter((column) => !column.visible);
-  const [filteredOptions, setFilteredOptions] = useState(hiddenColumns);
-  const [selectedRow, setSelectedRow] = useState(null);
-  const [validationErrors, setValidationErrors] = useState({});
-  const [validationSchema, setValidationSchema] = useState([]);
-  const [isCreatingRow, setIsCreatingRow] = useState(false);
-  const [isEditingRow, setIsEditingRow] = useState(false);
-  const [isDeletingRow, setIsDeletingRow] = useState(false);
-  const [rowToDelete, setRowToDelete] = useState(null);
-  const [rowSelection, setRowSelection] = useState({});
-  const [isChecked, setIsChecked] = useState(false);
-  const [sorting, setSorting] = useState([]);
-  const [disableNextEdit, setDisableNextEdit] = useState(false);
-  const [columnSizing, setColumnSizing] = useState(activePage.column_sizes);
-  const [columnSizingInfo, setColumnSizingInfo] = useState({
-    columnSizingStart: [],
-    deltaOffset: null,
-    deltaPercentage: null,
-    isResizingColumn: false,
-    startOffset: null,
-    startSize: null
-  });
-  useState(0);
-  const navigate = useNavigate();
-  const currentModule = location.pathname.split("/")[2];
-  let redirectionPath = "";
-  switch (currentModule) {
-    case "accounting":
-      redirectionPath = PathnameAccounting.CUSTOM_FORM;
-      break;
-    case "inventory":
-      redirectionPath = PathnameInventory.CUSTOM_FORM;
-      break;
-    case "manufacturing":
-      redirectionPath = PathnameManufacturing.CUSTOM_FORM;
-      break;
-    case "procurement":
-      redirectionPath = PathnamePurchase.CUSTOM_FORM;
-      break;
-    case "crm":
-      redirectionPath = PathnameCrm.CUSTOM_FORM;
-      break;
-    case "user":
-      redirectionPath = PathnameUsers.CUSTOM_FORM;
-      break;
-    case "rental":
-      redirectionPath = PathnameRental.CUSTOM_FORM;
-      break;
-    case "drive":
-      redirectionPath = PathnameDocument.ADD_CUSTOM_FIELDS;
-      break;
-  }
-  const path = `/dashboard/${currentModule}${redirectionPath}`;
-  const getValidationType = (column) => {
-    var _a;
-    switch (column.editVariant) {
-      case "select":
-        return ((_a = column == null ? void 0 : column.editProperties) == null ? void 0 : _a.is_multiple) ? Yup.array() : Yup.string();
-      case "number":
-        return Yup.number().nullable().transform((value, originalValue) => originalValue === "" ? null : value);
-      case "url":
-        return Yup.string().matches(
-          /^(https?:\/\/)?((([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,})|localhost)(:\d{2,5})?(\/[a-zA-Z0-9#_-]+\/?)*(\?[a-zA-Z0-9&=_-]+)?(#\S+)?$/,
-          { excludeEmptyString: true, message: "Please enter valid URL." }
-        );
-      default:
-        return Yup.string();
-    }
-  };
-  const validationReducer = (validations, validation, column) => {
-    var _a;
-    let vld = validations;
-    switch (validation.type) {
-      case "required":
-        vld = validation.value ? validations.required(validation.msg_en).typeError(validation.msg_en) : ((_a = column == null ? void 0 : column.editProperties) == null ? void 0 : _a.is_multiple) ? validations.min(1, validation.msg_en) : validations;
-        break;
-      case "min":
-        vld = validations.min(validation.value, validation.msg_en);
-        break;
-      case "email":
-        vld = validations.email(validation.value, validation.msg_en);
-        break;
-      case "max":
-        vld = validations.max(validation.value, validation.msg_en);
-        break;
-      case "positive":
-        vld = validation.value === true ? validations.test("is-positive-number", "Value must be a positive number", (value) => !value || value >= 0) : validations;
-        break;
-      case "when":
-        return validations.when(validation.relation, {
-          is: (val) => val === validation.values,
-          then: () => {
-            var _a2;
-            return ((_a2 = validation == null ? void 0 : validation.thenValidations) == null ? void 0 : _a2.reduce(
-              (validations2, validation2) => validationReducer(validations2, validation2, column),
-              validations
-            )) || validations;
-          },
-          otherwise: () => {
-            var _a2;
-            return ((_a2 = validation == null ? void 0 : validation.otherWiseValidations) == null ? void 0 : _a2.reduce(
-              (validations2, validation2) => validationReducer(validations2, validation2, column),
-              validations
-            )) || validations;
-          }
-        });
-      default:
-        vld = validations;
-        break;
-    }
-    if (validation.type == "required" && validation.value && (!(column == null ? void 0 : column.editVariant) || (column == null ? void 0 : column.editVariant) == "text")) {
-      vld = validations.test("no-blank-spaces", "Blank space is not allowed", (value) => {
-        var _a2;
-        return value && ((_a2 = value.trim()) == null ? void 0 : _a2.length) > 0;
-      });
-    }
-    return vld;
-  };
-  const generateValidationSchema = (columns2) => {
-    const schema = {};
-    columns2.forEach((clm) => {
-      var _a, _b, _c;
-      if ((_b = (_a = clm == null ? void 0 : clm.editProperties) == null ? void 0 : _a.validations) == null ? void 0 : _b.length) {
-        const fieldValidations = (_c = clm == null ? void 0 : clm.editProperties) == null ? void 0 : _c.validations.reduce(
-          (validations, validation) => validationReducer(validations, validation, clm),
-          getValidationType(clm)
-        );
-        schema[clm.accessorKey] = fieldValidations;
-      }
-    });
-    return schema;
-  };
-  useEffect(() => {
-    setTableColumns(columns);
-    const schema = generateValidationSchema(columns);
-    setValidationSchema(Yup.object().shape(schema));
-  }, [columns]);
-  useEffect(() => {
-    if (!(columnSizingInfo == null ? void 0 : columnSizingInfo.isResizingColumn)) {
-      updatePageInfo({ column_sizes: { ...activePage.column_sizes, ...columnSizing } });
-      handleColumnResizing == null ? void 0 : handleColumnResizing(columnSizing);
-    }
-  }, [columnSizingInfo == null ? void 0 : columnSizingInfo.isResizingColumn, columnSizing]);
-  const handleHeaderClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleHeaderClose = () => {
-    setAnchorEl(null);
-  };
-  const handleVisibleColumn = (column) => {
-    const updatedColumns = tableColumns.map((col) => ({
-      ...col,
-      visible: col.accessorKey === column.accessorKey ? false : col.visible
-    }));
-    setTableColumns(updatedColumns);
-    onColumnVisibility == null ? void 0 : onColumnVisibility(JSON.parse(JSON.stringify(updatedColumns)));
-    setFilteredOptions([...filteredOptions, column]);
-    setAnchorEl(null);
-  };
-  const handleAddButtonClick = () => {
-    setPopupShow(true);
-  };
-  const handleBackButtonClick = () => {
-    setPopupShow(false);
-  };
-  const handleAddColumn = (column) => {
-    const updatedColumns = tableColumns.map((col) => ({
-      ...col,
-      visible: col.accessorKey === column.accessorKey ? true : col.visible
-    }));
-    onColumnVisibility == null ? void 0 : onColumnVisibility(JSON.parse(JSON.stringify(updatedColumns)));
-    setTableColumns(updatedColumns);
-    const updatedFilteredOptions = filteredOptions.filter(
-      (option) => option.accessorKey !== column.accessorKey
-    );
-    setFilteredOptions(updatedFilteredOptions);
-    setAnchorEl(null);
-    setPopupShow(false);
-  };
-  const handleSearchEvent = (searchQuery) => {
-    const filteredColumns = hiddenColumns.filter(
-      (option) => option.header.toLowerCase().includes(searchQuery.toLowerCase())
-    );
-    setFilteredOptions(filteredColumns);
-  };
-  const handleCustomAddColumn = () => {
-    navigate(path, { state: formData });
-    setAnchorEl(null);
-    setPopupShow(false);
-  };
-  const handleActionsClick = (event, data) => {
-    setRow(data);
-    setRowAnchorEl(event.currentTarget);
-  };
-  const handleActionsClose = () => {
-    setRowAnchorEl(null);
-  };
-  const formtValues = useCallback((values, cells) => {
-    const v = {};
-    Object.keys(values).forEach((vl) => {
-      const val = values[vl];
-      const cell = cells.find((c) => c.accessorKey == vl);
-      if (val) {
-        if (val instanceof File) {
-          v[vl] = val.name;
-        } else if (cell && (cell == null ? void 0 : cell.editVariant) == "date") {
-          v[vl] = dayjs(val).format((cell == null ? void 0 : cell.dateFormat) || "DD-MM-YYYY");
-        } else if (cell && (cell == null ? void 0 : cell.editVariant) == "select" && typeof val === "object" && val !== null) {
-          v[vl] = val.name || val.label || val.display_name || val.title || val.value || val.id || val;
-        } else if (cell && (cell == null ? void 0 : cell.editVariant) == "select" && typeof val === "string") {
-          v[vl] = val;
-        } else {
-          v[vl] = val;
-        }
-      } else {
-        v[vl] = val;
-      }
-    });
-    return v;
-  }, []);
-  const handleRowDelete = async () => {
-    setIsDeletingRow(true);
-    if (rowToDelete) {
-      await (onDeleteRow == null ? void 0 : onDeleteRow(rowToDelete));
-      setRowToDelete(null);
-    }
-    setIsDeletingRow(false);
-  };
-  const checkRequired = useCallback((editProperties) => {
-    var _a;
-    return (_a = editProperties == null ? void 0 : editProperties.validations) == null ? void 0 : _a.some((validation) => validation.type === "required");
-  }, []);
-  useEffect(() => {
-    const selectedRows = {};
-    if (!isChecked && selectedRowIds.length) {
-      rows.forEach((row2) => {
-        if (selectedRowIds.includes(row2.id)) {
-          selectedRows[row2.id] = true;
-        }
-      });
-      setRowSelection(selectedRows);
-      setIsChecked(true);
-    }
-  }, [rows, selectedRowIds]);
-  useEffect(() => {
-    if (onSortingChange instanceof Function) {
-      const sortingArray = Array.isArray(sorting) ? sorting : [];
-      onSortingChange(sortingArray[0] || null);
-    }
-  }, [sorting]);
-  const resetRowSelection = () => {
-    setRowSelection({});
-    setDisableNextEdit(false);
-  };
-  const getTextWidth = (text) => {
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return 50;
-    return ctx.measureText(text).width + 5;
-  };
-  const handleSaveRow = useCallback(async (row2, values, tableInstance) => {
-    console.log("handleSaveRow", onEditRow);
-    try {
-      await validationSchema.validate(values, {
-        abortEarly: false
-      });
-      setValidationErrors({});
-      setIsEditingRow(true);
-      setDisableNextEdit(false);
-      const cells = row2.getAllCells().map((c) => c.column.columnDef);
-      row2._valuesCache = formtValues(values, cells);
-      const data = { row: row2, values, table: tableInstance };
-      if (onEditRow) {
-        await onEditRow(data, "edit");
-      }
-      setIsEditingRow(false);
-      tableInstance.setEditingRow(null);
-    } catch (err) {
-      console.log("handleSaveRow error", err);
-      setIsEditingRow(false);
-      if (err instanceof Yup.ValidationError) {
-        const errors = {};
-        err.inner.forEach((error) => {
-          if (error.path) {
-            errors[error.path] = error.message;
-          }
-        });
-        setValidationErrors(errors);
-      } else if (err instanceof Error) {
-        enqueueSnackbar(err.message, { variant: "error" });
-      } else {
-        enqueueSnackbar("Something went wrong", { variant: "error" });
-      }
-    }
-  }, [validationSchema, onEditRow, formtValues]);
-  const table = useMaterialReactTable({
-    // options:{
-    // 	tableLayout: "auto", // 👈 important
-    // 	padding: "dense",
-    // },
-    // columns: visibleColumns,
-    defaultColumn: {
-      minSize: 0,
-      // 👈 remove default min width
-      size: void 0
-      // 👈 optional, default size
-    },
-    columns: [
-      ...visibleColumns.map((c) => {
-        getTextWidth(c.header || "");
-        Math.max(
-          ...rows.map((row2) => getTextWidth(String(row2[c.accessorKey] ?? "")))
-        );
-        return {
-          ...c,
-          ...editDisplayMode === "row" ? {
-            Edit: ({ cell, row: row2, table: table2, column }) => {
-              return /* @__PURE__ */ jsx(
-                InlineEditFields,
-                {
-                  cell,
-                  column,
-                  col: c,
-                  row: row2,
-                  table: table2,
-                  callback: (s) => console.log("Save", s),
-                  errors: validationErrors,
-                  validationSchema,
-                  setValidationErrors,
-                  onChangeRowField,
-                  getSelectedData: (name, row3) => getSelectedData == null ? void 0 : getSelectedData(name, row3)
-                }
-              );
-            }
-          } : {},
-          Header: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
-            c.header,
-            (c == null ? void 0 : c.required) || checkRequired(c == null ? void 0 : c.editProperties) && /* @__PURE__ */ jsx(Typography, { type: "s5", color: "theme.error.600", children: "*" })
-          ] }),
-          enableColumnDragging: c.id !== "actions",
-          // cellStyle: { ...c.cellStyle, width: finalWidth },
-          // headerStyle: { ...c.headerStyle, width: finalWidth },
-          // size: finalWidth
-          size: void 0,
-          // minSize: 40,
-          maxSize: 800
-        };
-      }),
-      ...!disableDefaultActionColumn ? [
-        {
-          id: "actions",
-          enableEditing: false,
-          size: (defaultActionColumnItems == null ? void 0 : defaultActionColumnItems.length) > 1 ? 80 : 50,
-          header: /* @__PURE__ */ jsx(IconButton, { size: "small", sx: { p: 0.5, "&:hover": { backgroundColor: "transparent" } }, onClick: handleHeaderClick, children: /* @__PURE__ */ jsx("img", { src: images.common.arrowIcon, alt: "Arrow Icon" }) }),
-          enableColumnDragging: false,
-          visible: true,
-          muiTableHeadCellProps: {
-            className: "pinned-column"
-          },
-          muiTableBodyCellProps: {
-            className: "pinned-column",
-            sx: {
-              whiteSpace: "pre-wrap"
-            }
-          },
-          Cell: (props) => (defaultActionColumnItems == null ? void 0 : defaultActionColumnItems.length) ? defaultActionColumnItems.map((item) => {
-            const updatedProps = {
-              ...item.props,
-              onClick: () => item.props.onClick(props)
-            };
-            return cloneElement(item, updatedProps);
-          }) : !disabledDefaultActionColumnIcon && /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              onClick: (e) => handleActionsClick(e, props.row.original),
-              disabled: !(rowActionMenu == null ? void 0 : rowActionMenu.length) && !(destructiveActionMenu == null ? void 0 : destructiveActionMenu.length),
-              children: /* @__PURE__ */ jsx("img", { src: images.more, alt: "More Icon" })
-            }
-          )
-        }
-      ] : []
-    ],
-    data: rows,
-    muiTablePaperProps: {
-      sx: {
-        tableLayout: "auto"
-        // lets columns shrink to fit content
-      }
-    },
-    columnResizeMode: "onChange",
-    onEditingRowSave: async (data) => {
-      await handleSaveRow(data.row, data.values, data.table);
-    },
-    onCreatingRowSave: async (data) => {
-      try {
-        await validationSchema.validate(data.values, {
-          abortEarly: false
-        });
-        setValidationErrors({});
-        setIsCreatingRow(true);
-        setDisableNextEdit(false);
-        const cells = data.row.getAllCells().map((c) => c.column.columnDef);
-        data.row._valuesCache = formtValues(data.values, cells);
-        if (onCreateRow) {
-          await onCreateRow(data);
-        }
-        setIsCreatingRow(false);
-        data.table.setCreatingRow(null);
-      } catch (err) {
-        setIsCreatingRow(false);
-        if (err instanceof Yup.ValidationError) {
-          const errors = {};
-          err.inner.forEach((error) => {
-            if (error.path) {
-              errors[error.path] = error.message;
-            }
-          });
-          setValidationErrors(errors);
-        } else if (err instanceof Error) {
-          enqueueSnackbar(err.message, { variant: "error" });
-        } else {
-          enqueueSnackbar("Something went wrong", { variant: "error" });
-        }
-      }
-    },
-    onCreatingRowCancel: () => resetRowSelection(),
-    onEditingRowCancel: () => {
-      console.log("onEditingRowCancel called");
-      setDisableNextEdit(false);
-    },
-    onSortingChange: (states == null ? void 0 : states.sorting) ? onSortingChange : setSorting,
-    displayColumnDefOptions: {
-      "mrt-row-actions": {
-        // size: onDeleteRow ? 80 : 50,
-        Header: /* @__PURE__ */ jsx(IconButton, { onClick: handleHeaderClick, size: "small", children: /* @__PURE__ */ jsx("img", { src: images.common.arrowIcon, alt: "Arrow Icon" }) }),
-        muiTableBodyCellProps: ({ row: row2, table: table2 }) => {
-          var _a, _b;
-          const isCreatingRow2 = ((_a = table2.getState().creatingRow) == null ? void 0 : _a.id) === row2.id;
-          const isEditingRow2 = ((_b = table2.getState().editingRow) == null ? void 0 : _b.id) === row2.id;
-          return {
-            sx: {
-              "& .MuiBox-root": {
-                gap: 0
-              },
-              backgroundColor: "#fff",
-              whiteSpace: "pre-wrap",
-              // Hide save button only when editing existing row (not in create mode or non-editable mode)
-              ...isEditingRow2 && !isCreatingRow2 && {
-                "& .MuiBox-root > .MuiIconButton-root:first-of-type": {
-                  display: "none !important"
-                },
-                // Also hide any save icon buttons by aria-label or title
-                '& button[aria-label*="Save"]': {
-                  display: "none !important"
-                },
-                '& button[title*="Save"]': {
-                  display: "none !important"
-                },
-                // Hide save icon by class or data attributes
-                '& .MuiIconButton-root[class*="save"]': {
-                  display: "none !important"
-                },
-                '& .MuiIconButton-root[data-testid*="save"]': {
-                  display: "none !important"
-                }
-              }
-            },
-            onKeyUp: (e) => console.log(e)
-          };
-        }
-      },
-      "mrt-row-expand": {
-        size: 70
-        // Set the size of the expand-collapse arrow column here
-      },
-      "mrt-row-select": {
-        size: 50
-        // Set the width of the checkbox column here
-      }
-    },
-    renderRowActions: ({ row: row2, table: table2 }) => /* @__PURE__ */ jsx(Fragment, { children: (rest == null ? void 0 : rest.enableExpanding) ? /* @__PURE__ */ jsx(Fragment, { children: (row2 == null ? void 0 : row2.parentId) && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 0 }, children: onDeleteRow && /* @__PURE__ */ jsx(Tooltip, { title: "Delete", children: /* @__PURE__ */ jsx(IconButton, { disabled: disableNextEdit, onClick: () => setRowToDelete(row2), size: "small", children: /* @__PURE__ */ jsx(Trash, { fontSize: "small", sx: { color: "theme.secondary.1000" } }) }) }) }) }) : /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 0 }, children: onDeleteRow && /* @__PURE__ */ jsx(Tooltip, { title: "Delete", children: /* @__PURE__ */ jsx(IconButton, { disabled: disableNextEdit, onClick: () => setRowToDelete(row2), children: /* @__PURE__ */ jsx(Trash, { fontSize: "small", sx: { color: "theme.secondary.1000" } }) }) }) }) }),
-    ...Boolean(enableRowCreate) && {
-      renderBottomToolbarCustomActions: ({ table: table2 }) => /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "outlined",
-          startIcon: /* @__PURE__ */ jsx(default_1$2, {}),
-          className: "add-row-btn",
-          disabled: disableNextEdit,
-          onClick: () => {
-            table2.setCreatingRow(true);
-            setDisableNextEdit(true);
-          },
-          children: t("common.add")
-        }
-      )
-    },
-    onRowSelectionChange: setRowSelection,
-    enableColumnOrdering: true,
-    enableRowSelection: enableRowSelection ?? true,
-    enableEditing: enableEditing instanceof Function ? enableEditing() : enableEditing ?? true,
-    editDisplayMode: editDisplayMode ?? "row",
-    createDisplayMode: "row",
-    enableColumnResizing,
-    enableRowDragging,
-    enableTopToolbar: false,
-    enableColumnActions: false,
-    enableSorting: true,
-    enableGrouping: true,
-    enableBottomToolbar: enableBottomToolbar ?? false,
-    enableColumnDragging: enableColumnDragging ?? true,
-    enableStickyHeader: true,
-    enableSortingRemoval: false,
-    // column ordering
-    state: {
-      // columnOrder: (!columnOrder || columnOrder.length <= 1) 
-      // ? [...internalColumnOrder] 
-      // : [...columnOrder],
-      columnOrder,
-      columnPinning: { left: ["actions", "mrt-row-actions"] },
-      isSaving: isCreatingRow || isEditingRow,
-      showProgressBars: false,
-      rowSelection,
-      ...states,
-      sorting: Array.isArray(states == null ? void 0 : states.sorting) ? states == null ? void 0 : states.sorting : Array.isArray(sorting) ? sorting : [],
-      columnSizing
-    },
-    getRowId: (row2) => row2 == null ? void 0 : row2.id,
-    // table.getState().editingRow
-    muiTableBodyRowProps: ({ row: row2, table: table2 }) => {
-      var _a, _b, _c, _d, _e;
-      const editingRowId = ((_b = (_a = table2.getState()) == null ? void 0 : _a.editingRow) == null ? void 0 : _b.id) || ((_d = (_c = table2.getState()) == null ? void 0 : _c.creatingRow) == null ? void 0 : _d.id) || null;
-      const isErrorRow = Boolean((_e = row2 == null ? void 0 : row2.original) == null ? void 0 : _e.has_error);
-      const isCurrentlyEditing = editingRowId === row2.id;
-      return {
-        onClick: () => {
-          setSelectedRow(row2.id);
-          console.log("Row clicked:", row2.id, "editingRowId:", editingRowId, "isCurrentlyEditing:", isCurrentlyEditing, "disableNextEdit:", disableNextEdit);
-          if (editingRowId && editingRowId !== row2.id) {
-            table2.setEditingRow(null);
-            setTimeout(() => {
-              table2.setEditingRow(row2);
-              setDisableNextEdit(true);
-            }, 100);
-            return;
-          }
-          if (!disableNextEdit && !isCurrentlyEditing && !editingRowId) {
-            console.log("Setting row as editable:", row2.id);
-            table2.setEditingRow(row2);
-            setDisableNextEdit(true);
-          } else {
-            console.log("Cannot edit row - conditions not met");
-          }
-        },
-        onKeyDown: (e) => {
-          if (isCurrentlyEditing) {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              table2.setEditingRow(null);
-            } else if (e.key === "Escape") {
-              e.preventDefault();
-              console.log("Escape pressed, canceling edit for row:", row2.id);
-              table2.setEditingRow(null);
-              setDisableNextEdit(false);
-              handleSaveRow(row2, row2._valuesCache || row2.original, table2);
-            }
-          }
-        },
-        sx: {
-          cursor: "pointer",
-          // backgroundColor: !editingRowId
-          // 	? (selectedRow === row.id
-          // 		? '#e8e8e8'
-          // 		: (isErrorRow ? 'theme.error.100' : 'inherit'))
-          // 	: 'inherit',
-          backgroundColor: !editingRowId ? isErrorRow ? "theme.error.100" : "inherit" : "inherit",
-          "&:hover": {
-            backgroundColor: editingRowId ? "transparent" : isErrorRow ? "theme.error.200" : "#e8e8e8"
-            // Removes hover effect globally
-          },
-          "&:hover td:after": {
-            backgroundColor: "transparent"
-            // Removes the grey background applied via :after
-          }
-        }
-      };
-    },
-    onColumnOrderChange: (colOrder) => {
-      if (handleColumnOrdering) handleColumnOrdering(colOrder);
-    },
-    onColumnSizingChange: setColumnSizing,
-    onColumnSizingInfoChange: setColumnSizingInfo,
-    renderEmptyRowsFallback: () => /* @__PURE__ */ jsxs(Box, { className: "no-data", children: [
-      /* @__PURE__ */ jsx("img", { src: images.common.tableNoData }),
-      /* @__PURE__ */ jsx(Typography, { type: "s3", weight: "medium", color: "theme.secondary.1000", children: t("common.noData") })
-    ] }),
-    // pagination
-    enablePagination,
-    paginationDisplayMode: "pages",
-    muiPaginationProps: {
-      shape: "rounded",
-      page: pageNo,
-      // current page number
-      count: totalPages,
-      // total pages
-      showRowsPerPage: false,
-      // Hide rows per page options
-      boundaryCount: 3
-    },
-    muiEditTextFieldProps: ({ row: row2, column }) => ({
-      InputProps: {
-        disableUnderline: true
-      },
-      onBlur: (e) => {
-        updateData(e.target.value, column, row2.id);
-      },
-      // onChange: (e) => {
-      // 	updateData(e.target.value, column, row.id);
-      // },
-      variant: "outlined",
-      sx: ({ palette }) => {
-        var _a;
-        return {
-          "& .MuiOutlinedInput-root": {
-            "& fieldset": {
-              borderColor: `${(_a = palette.theme) == null ? void 0 : _a.primary[700]} !important`
-              // backgroundColor: palette.theme?.primary[700]
-            }
-          }
-        };
-      }
-    }),
-    /* Table loader style */
-    muiCircularProgressProps: {
-      sx: {
-        color: "#289B64"
-      }
-    },
-    // Table header cell default styles
-    muiTableHeadCellProps: {
-      sx: {
-        lineHeight: "140%",
-        letterSpacing: "-0.28px",
-        fontWeight: "500",
-        fontSize: "0.875rem",
-        "& .Mui-TableHeadCell-Content": {
-          height: "100%"
-        },
-        "& .Mui-TableHeadCell-Content-Labels": {
-          width: "100%",
-          justifyContent: "space-between"
-        },
-        "&.pinned-column": {
-          backgroundColor: "#fff"
-        },
-        "& .Mui-TableHeadCell-ResizeHandle-Wrapper": {
-          padding: 0,
-          margin: 0,
-          right: "-5px",
-          opacity: 0
-        }
-      }
-    },
-    // Table body cell default styles
-    muiTableBodyProps: {
-      sx: {
-        zIndex: 500
-      }
-    },
-    muiTableHeadProps: {
-      sx: {
-        zIndex: 600
-      }
-    },
-    muiTableBodyCellProps: () => ({
-      sx: {
-        lineHeight: "140%",
-        letterSpacing: "-0.26px",
-        fontWeight: "400",
-        fontSize: "0.8125rem",
-        "&.pinned-column": {
-          backgroundColor: "#fff"
-        },
-        "&:hover": {
-          backgroundColor: "transparent"
-          // Removes hover effect globally
-        },
-        whiteSpace: "pre-wrap"
-      }
-      // onClick: () => {
-      // 	table.setEditingCell(cell); //set editing cell
-      // 	queueMicrotask(() => {
-      // 		const textField = table.refs.editInputRefs.current[column.id];
-      // 		if (textField) {
-      // 			textField.focus();
-      // 			textField.select?.();
-      // 		}
-      // 	});
-      // }
-      // onKeyDown: (event) => {
-      // 	if (event.key === 'Tab') {
-      // 		try {
-      // 				// if (column.columnDef.editVariant === 'select') {
-      // 				// 	table.refs.editInputRefs.current[column.id]?.node?.blur();
-      // 				// } else {
-      // 				// 	table.refs.editInputRefs.current[column.id].blur();
-      // 				// }
-      // 			const rowIdx = row.index;
-      // 			const colIdx = columns.findIndex(
-      // 				(col) => col.accessorKey === column.id
-      // 			);
-      // 			const newColIdx = colIdx + 1;
-      // 			const clm = columns[newColIdx];
-      // 			const nextCell = row
-      // 				.getAllCells()
-      // 				.find((cl) => (cl.id = `${rowIdx}_${clm.accessorKey}`));
-      // 			if (nextCell) {
-      // 				// updateData(event.target.value, column, row.id);
-      // 				table.setEditingCell(nextCell);
-      // 				queueMicrotask(() => {
-      // 					const textField = table.refs.editInputRefs.current[column.id];
-      // 					if (textField) {
-      // 						textField.focus();
-      // 						textField.select?.();
-      // 					}
-      // 				});
-      // 			}
-      // 		} catch (error) {
-      // 		}
-      // 	}
-      // },
-      // onBlur: () => {
-      // 	table.setEditingCell(null);
-      // }
-    }),
-    // Checkbox styling
-    muiSelectCheckboxProps: {
-      sx: {
-        color: "theme.secondary.300",
-        "&.Mui-checked": {
-          color: "theme.primary.600",
-          "&:hover": {
-            color: "theme.primary.500"
-          }
-        },
-        "&.Mui-disabled": {
-          color: "theme.secondary.200"
-        }
-      },
-      icon: /* @__PURE__ */ jsx(RecgtangleIcon, { sx: { width: 20, height: 20 } }),
-      checkedIcon: /* @__PURE__ */ jsx(CheckBoxIcon, { sx: { width: 20, height: 20 } })
-    },
-    muiSelectAllCheckboxProps: {
-      sx: {
-        color: "theme.secondary.300",
-        "&.Mui-checked": {
-          color: "theme.primary.600",
-          "&:hover": {
-            color: "theme.primary.500"
-          }
-        },
-        "&.Mui-disabled": {
-          color: "theme.secondary.600"
-        }
-      },
-      icon: /* @__PURE__ */ jsx(RecgtangleIcon, { sx: { width: 20, height: 20 } }),
-      checkedIcon: /* @__PURE__ */ jsx(CheckBoxIcon, { sx: { width: 20, height: 20 } })
-    },
-    muiBottomToolbarProps: {
-      sx: {
-        boxShadow: "none",
-        "& .MuiBox-root": {
-          paddingLeft: 0
-        }
-      }
-    },
-    layoutMode: "grid",
-    icons: {
-      DragHandleIcon: () => /* @__PURE__ */ jsx(RecgtangleIcon, { fontSize: "medium" }),
-      SortIcon: () => /* @__PURE__ */ jsx(ArrowUpDown, { fontSize: "medium" }),
-      ArrowDownwardIcon: () => /* @__PURE__ */ jsx(ArrowUpDown, { fontSize: "medium" }),
-      ArrowUpwardIcon: () => /* @__PURE__ */ jsx(ArrowUpDown, { fontSize: "medium" }),
-      ExpandMoreIcon: () => /* @__PURE__ */ jsx(ArrowUpDown, { fontSize: "medium" }),
-      ExpandLessIcon: () => /* @__PURE__ */ jsx(ArrowUpDown, { fontSize: "medium" }),
-      SyncAltIcon: () => /* @__PURE__ */ jsx(ArrowUpDown, { fontSize: "medium" }),
-      CancelIcon: (props) => /* @__PURE__ */ jsx(Close, { fontSize: "small", ...props, color: "theme.secondary.1000" })
-    },
-    ...rest
-  });
-  useEffect(() => {
-    var _a, _b;
-    if (enableRowSelection) {
-      if ((_a = table == null ? void 0 : table.getSelectedRowModel()) == null ? void 0 : _a.rows) {
-        SetSelectedRowId == null ? void 0 : SetSelectedRowId((_b = table == null ? void 0 : table.getSelectedRowModel()) == null ? void 0 : _b.rows);
-      }
-    }
-  }, [enableRowSelection]);
-  useEffect(() => {
-    if (onSelectRow) {
-      if (rest == null ? void 0 : rest.enableExpanding) {
-        const selectedRowModels = [];
-        const selection = table.getState().rowSelection;
-        const traverseRows = (rows2, parentKey = "") => {
-          rows2.forEach((row2, index) => {
-            var _a;
-            const rowKey = parentKey ? `${parentKey}.${index}` : `${row2.id}`;
-            if (selection[rowKey]) {
-              selectedRowModels.push(row2);
-            }
-            if ((_a = row2.subRows) == null ? void 0 : _a.length) {
-              traverseRows(row2.subRows, rowKey);
-            }
-          });
-        };
-        traverseRows(table.getRowModel().rows);
-        onSelectRow(selectedRowModels, rowSelection);
-      } else {
-        onSelectRow(table.getSelectedRowModel().rows, rowSelection);
-      }
-    }
-  }, [rowSelection, table]);
-  useEffect(() => {
-    if (isResetRow) {
-      table == null ? void 0 : table.resetRowSelection();
-    }
-  }, [isResetRow, table]);
-  useEffect(() => {
-    if (!table) return;
-    let dropdownOpenTimer;
-    let saveTimer;
-    let lastDropdownClick = 0;
-    let isDropdownInteraction = false;
-    const handleMouseDown = (e) => {
-      const target = e.target;
-      const isDropdownElement = target.closest(
-        '.MuiSelect-root, .MuiMenuItem-root, .MuiPopover-root, .MuiList-root, .MuiMenu-list, .MuiModal-root, .MuiBackdrop-root, .MuiButtonBase-root, .MuiFormControl-root, .MuiInputBase-root, .MuiTextField-root, .MuiOutlinedInput-root, .MuiFilledInput-root, .MuiAutocomplete-popper, .MuiPickersPopper-root, [role="option"], [role="listbox"], [role="combobox"]'
-      );
-      if (isDropdownElement) {
-        isDropdownInteraction = true;
-        lastDropdownClick = Date.now();
-        if (saveTimer) {
-          clearTimeout(saveTimer);
-        }
-        if (dropdownOpenTimer) {
-          clearTimeout(dropdownOpenTimer);
-        }
-        dropdownOpenTimer = setTimeout(() => {
-          isDropdownInteraction = false;
-        }, 500);
-      }
-    };
-    const handleClick = (e) => {
-      var _a;
-      const editingRow = (_a = table.getState()) == null ? void 0 : _a.editingRow;
-      if (!editingRow) return;
-      const target = e.target;
-      const now = Date.now();
-      if (isDropdownInteraction || now - lastDropdownClick < 300) {
-        return;
-      }
-      const isInsideTable = target.closest(".MuiTableContainer-root, .MuiPaper-root, .MRT_Table");
-      if (!isInsideTable) {
-        if (saveTimer) {
-          clearTimeout(saveTimer);
-        }
-        saveTimer = setTimeout(() => {
-          var _a2;
-          const currentEditingRow = (_a2 = table.getState()) == null ? void 0 : _a2.editingRow;
-          if (currentEditingRow && !isDropdownInteraction) {
-            handleSaveRow(currentEditingRow, currentEditingRow._valuesCache || currentEditingRow.original, table);
-          }
-        }, 200);
-      }
-    };
-    document.addEventListener("mousedown", handleMouseDown, true);
-    document.addEventListener("click", handleClick, true);
-    return () => {
-      document.removeEventListener("mousedown", handleMouseDown, true);
-      document.removeEventListener("click", handleClick, true);
-      if (dropdownOpenTimer) {
-        clearTimeout(dropdownOpenTimer);
-      }
-      if (saveTimer) {
-        clearTimeout(saveTimer);
-      }
-    };
-  }, [table, handleSaveRow]);
-  return /* @__PURE__ */ jsxs(TableWrapper, { className: "MRT-TableWrapper custom-table", children: [
-    /* @__PURE__ */ jsx(MaterialReactTable, { table }),
-    /* @__PURE__ */ jsx(
-      Menu,
-      {
-        anchorEl,
-        open: Boolean(anchorEl),
-        onClose: handleHeaderClose,
-        className: "add-role-drp",
-        children: popUpShow ? /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs(
-            MenuItem,
-            {
-              onClick: handleBackButtonClick,
-              className: "role-drp-list add-column-title",
-              children: [
-                /* @__PURE__ */ jsx(ListItemIcon, { className: "add-icon", children: /* @__PURE__ */ jsx(default_1, {}) }),
-                /* @__PURE__ */ jsx(ListItemText, { className: "title", children: t("common.addColumn_label") })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(Divider, { flexItem: true, sx: { mt: "0.25rem !important", mb: "0.25rem !important" } }),
-          /* @__PURE__ */ jsx("div", { className: "searchbar-box-list", children: /* @__PURE__ */ jsx(
-            SearchBar,
-            {
-              placeholder: "Search User",
-              handleSearch: (e) => handleSearchEvent(e)
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: "all-attribute-title", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: t("common.allAttributes_label") }) }),
-          filteredOptions.map((column) => /* @__PURE__ */ jsx(
-            MenuItem,
-            {
-              onClick: () => handleAddColumn(column),
-              children: /* @__PURE__ */ jsx(Typography, { color: "theme.secondary.1000", type: "s3", children: column.header })
-            },
-            column.accessorKey
-          )),
-          /* @__PURE__ */ jsx(Divider, { flexItem: true, sx: { mt: "0.25rem !important", mb: "0.25rem !important" } }),
-          enableAddCustomField && /* @__PURE__ */ jsxs(MenuItem, { onClick: handleCustomAddColumn, className: "role-drp-list", children: [
-            /* @__PURE__ */ jsx(ListItemIcon, { className: "add-icon", children: /* @__PURE__ */ jsx("img", { src: images.common.addIcon, alt: "Add Icon" }) }),
-            /* @__PURE__ */ jsx(ListItemText, { className: "title", children: t("common.addCustomField_label") })
-          ] })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          visibleColumns.map((column) => /* @__PURE__ */ jsxs(
-            MenuItem,
-            {
-              onClick: () => handleVisibleColumn(column),
-              className: "role-drp-list",
-              children: [
-                /* @__PURE__ */ jsx(ListItemIcon, { className: "add-icon", children: /* @__PURE__ */ jsx("img", { src: images.common.dotsIcon, alt: "Add Icon" }) }),
-                /* @__PURE__ */ jsx(ListItemText, { className: "title", children: column.header }),
-                /* @__PURE__ */ jsx(ListItemIcon, { className: "eye-icon", children: /* @__PURE__ */ jsx("img", { src: images.common.eyeIcon, alt: "Eye Icon" }) })
-              ]
-            },
-            column.accessorKey
-          )),
-          /* @__PURE__ */ jsx(Divider, { flexItem: true, sx: { mt: "0.25rem !important", mb: "0.25rem !important" } }),
-          /* @__PURE__ */ jsxs(MenuItem, { onClick: handleAddButtonClick, className: "role-drp-list", children: [
-            /* @__PURE__ */ jsx(ListItemIcon, { className: "add-icon", children: /* @__PURE__ */ jsx("img", { src: images.common.addIcon, alt: "Add Icon" }) }),
-            /* @__PURE__ */ jsx(ListItemText, { className: "title", children: t("common.addColumn_label") }),
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "body2",
-                color: "text.secondary",
-                className: "eye-icon",
-                children: /* @__PURE__ */ jsx(default_1$1, { sx: { fontSize: "1.25rem !important" } })
-              }
-            )
-          ] })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      Menu,
-      {
-        anchorEl: rowAnchorEl,
-        open: Boolean(rowAnchorEl),
-        onClose: handleActionsClose,
-        children: [
-          rowActionMenu == null ? void 0 : rowActionMenu.map((option) => {
-            return /* @__PURE__ */ jsxs(
-              MenuItem,
-              {
-                onClick: async () => {
-                  await option.handleAction(row);
-                  setRowAnchorEl(null);
-                },
-                disabled: typeof option.disabled === "function" ? option.disabled(row) : Boolean(option.disabled),
-                sx: { alignItems: "center", gap: 0.5 },
-                children: [
-                  option == null ? void 0 : option.icon,
-                  /* @__PURE__ */ jsx(Typography, { type: "s4", color: "inherit", children: typeof option.label === "function" ? option.label(row) : option.label })
-                ]
-              }
-            );
-          }),
-          (destructiveActionMenu == null ? void 0 : destructiveActionMenu.length) > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Divider, { flexItem: true, sx: { mt: "0.25rem !important", mb: "0.25rem !important" } }),
-            /* @__PURE__ */ jsx("div", { className: "dropdown-inner--DestructiveHeader", children: destructiveActionMenu == null ? void 0 : destructiveActionMenu.map((option) => /* @__PURE__ */ jsx(
-              MenuItem,
-              {
-                onClick: () => {
-                  option.handleAction(row);
-                  setRowAnchorEl(null);
-                },
-                className: "dropdown-inner--DestructiveActions",
-                disabled: typeof option.disabled === "function" ? option.disabled(row) : Boolean(option.disabled),
-                children: /* @__PURE__ */ jsx(Typography, { type: "s4", color: "inherit", children: typeof option.label === "function" ? option.label(row) : option.label })
-              }
-            )) })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ConfirmPopUp,
-      {
-        open: Boolean(rowToDelete),
-        onClose: () => setRowToDelete(null),
-        onConfirm: () => handleRowDelete(),
-        title: "Delete Item",
-        description: `Are you sure you want to delete entry ?`,
-        loading: isDeletingRow
-      }
-    )
-  ] });
-});
-export {
-  MaterialEditableTable as default
-};
-//# sourceMappingURL=index.esm.js.map