@erpsquad/common 1.8.35 → 1.8.37

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

@@ -0,0 +1,1164 @@
+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