@megha-ui/react 1.2.169 → 1.2.171

package/dist/components/grid/index.js

@@ -1,84 +1,46 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const XLSX = __importStar(require("xlsx"));
-const file_saver_1 = require("file-saver");
-const pagination_1 = __importDefault(require("./utils/pagination"));
-const gridRow_1 = __importDefault(require("./utils/gridRow"));
-const pagination_2 = require("./utils/pagination");
-const gridHeader_1 = __importDefault(require("./utils/gridHeader"));
-const useSort_1 = require("./hooks/useSort");
-const usePagination_1 = require("./hooks/usePagination");
-const useBulkSelect_1 = require("./hooks/useBulkSelect");
-const regexUtils_1 = require("./utils/regexUtils");
-const fi_1 = require("react-icons/fi");
-const md_1 = require("react-icons/md");
-const SummariseDetails_1 = __importDefault(require("./utils/SummariseDetails"));
-const globalSearchChips_1 = __importDefault(require("./utils/globalSearchChips"));
-const groupedGridDetails_1 = __importDefault(require("./utils/groupedGridDetails"));
-const md_2 = require("react-icons/md");
-const dropdown_1 = __importDefault(require("../dropdown"));
-const loader_1 = __importDefault(require("../loader"));
-const button_1 = __importDefault(require("../button"));
-const tb_1 = require("react-icons/tb");
-const commonService_1 = require("../../services/commonService");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo, } from "react";
+import * as XLSX from "xlsx";
+import { saveAs } from "file-saver";
+import Pagination from "./utils/pagination";
+import GridRow from "./utils/gridRow";
+import { getTotalPages } from "./utils/pagination";
+import GridHeader from "./utils/gridHeader";
+import { useSort } from "./hooks/useSort";
+import { usePagination } from "./hooks/usePagination";
+import { useBulkSelect } from "./hooks/useBulkSelect";
+import { createRegexFromWildcard, isValidDateFormat } from "./utils/regexUtils";
+import { FiEye, FiShare, FiChevronsLeft, FiChevronsRight, } from "react-icons/fi";
+import { MdFilterAltOff, MdGroupOff, MdSave } from "react-icons/md";
+import SummariseDetails from "./utils/SummariseDetails";
+import GlobalSearchChiProps from "./utils/globalSearchChips";
+import GroupedGridDetails from "./utils/groupedGridDetails";
+import { MdFullscreen, MdFullscreenExit, } from "react-icons/md";
+import Dropdown from "../dropdown";
+import Loader from "../loader";
+import Button from "../button";
+import { TbAntennaBarsOff, TbCalculator, TbCalculatorFilled, TbCalculatorOff, } from "react-icons/tb";
+import { formatValue } from "../../services/commonService";
 const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = 38, onRowClick, rowCount = false, rowBorder = true, showMenu = false, search = false, defaultSearchOperation = "contains", gridBorder = false, isLoading = false, rowTopBorder, rowBottomBorder, rowLeftBorder, rowRightBorder, headerBackground = "var(--row-header-bg)", headerTopBorder = "none", headerBottomBorder = "none", SettingIcon, ExportIcon, ignoredExportItems = ["action", "actions"], borderColor = "#dbdfe9", updateColumns, showHideAvailable = false, columnSearchOutside = false, multiSorting = false, exportAvailable = false, exportableFileName = "", groupBy, updateGroupBy, rowKey = "id", hlBorderColor = "black", selectedRow, selectedRowStyle = {
     borderLeft: "0.5rem solid #d9d9d9",
 }, defaultSort, noKeyEvents = true, customOperation, hasCustomOperation, globalSearch, headerDropdownIndex, draggable = false, resizable = false, updateGridData, widthUnits, checkboxWrapper, ignoreHugContent = false, setRendered, isSummarise = true, fullScreenAvailable = true, defaultGroupOpen, alternateRowColor = true, activeCalculateColor = "#2377BA", calculatetextColor = "#fff", actionsKey = "actions", saveAsNewView = false, handleSaveAsView, saveAsViewIcon, filterData, chipColor = "#ccc", withAscii = false, propSummariseKeys, SummariseIcon, summarizeColor = "black", isExpandable = false, expandedRow, extraRow, selectedCheckBox, setSelectedCheckbox, ignoreRowSelect, setOpenedRows, openedRows, getLoadingState, globalSearchOpen = false, updateFixedFilterValues = (fixedFilterValues) => {
     console.log("Update fixed filter values not implemented", fixedFilterValues);
-}, locale, formatOptions, }) => {
+}, locale, formatOptions, exportOptions }) => {
     var _a, _b, _c, _d;
-    const [searchQueries, setSearchQueries] = (0, react_1.useState)({});
-    const [chips, setChips] = (0, react_1.useState)([]);
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [filterColumns, setFilterColumn] = (0, react_1.useState)([]);
-    const modalContent = (0, react_1.useRef)(null);
-    const [startIndex, setStartIndex] = (0, react_1.useState)(0);
-    const [endIndex, setEndIndex] = (0, react_1.useState)(defaultRowsPerPage);
-    const [gridGroupBy, setGridGroupBy] = (0, react_1.useState)("");
-    const [rowIndex, setRowIndex] = (0, react_1.useState)(-1);
-    const [columnIndex, setColumnIndex] = (0, react_1.useState)(-1);
-    const [removalHeight, setRemovalHeight] = (0, react_1.useState)("0px");
-    const [gridColumns, setGridColumns] = (0, react_1.useState)([]);
-    const [uniqueSearch, setUniqueSearch] = (0, react_1.useState)({});
-    const [globalInputSearch, setGlobalInputSearch] = (0, react_1.useState)("");
+    const [searchQueries, setSearchQueries] = useState({});
+    const [chips, setChips] = useState([]);
+    const [isOpen, setIsOpen] = useState(false);
+    const [filterColumns, setFilterColumn] = useState([]);
+    const modalContent = useRef(null);
+    const [startIndex, setStartIndex] = useState(0);
+    const [endIndex, setEndIndex] = useState(defaultRowsPerPage);
+    const [gridGroupBy, setGridGroupBy] = useState("");
+    const [rowIndex, setRowIndex] = useState(-1);
+    const [columnIndex, setColumnIndex] = useState(-1);
+    const [removalHeight, setRemovalHeight] = useState("0px");
+    const [gridColumns, setGridColumns] = useState([]);
+    const [uniqueSearch, setUniqueSearch] = useState({});
+    const [globalInputSearch, setGlobalInputSearch] = useState("");
     const summariseDisplay = {
         count: "Count",
         countUnqValues: "Unique",
@@ -94,36 +56,36 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
         new: "Earliest",
         old: "Latest",
     };
-    const [prevRenderedData, setPrevRenderedData] = (0, react_1.useState)(null);
-    const [globalSearchOp, setGlobalSearchOp] = (0, react_1.useState)("or");
-    const [searchOp, setSearchOp] = (0, react_1.useState)("and");
-    const [summariseAvailable, setSummariseAvailable] = (0, react_1.useState)(false);
-    const [groupedKeys, setGroupedKeys] = (0, react_1.useState)([]);
+    const [prevRenderedData, setPrevRenderedData] = useState(null);
+    const [globalSearchOp, setGlobalSearchOp] = useState("or");
+    const [searchOp, setSearchOp] = useState("and");
+    const [summariseAvailable, setSummariseAvailable] = useState(false);
+    const [groupedKeys, setGroupedKeys] = useState([]);
     // const [changed, setChanged] = useState<string[]>([]);
-    const prevData = (0, react_1.useRef)(data);
-    const [isFullScreen, setIsFullScreen] = (0, react_1.useState)(false);
-    const [fullScreen, setFullScreen] = (0, react_1.useState)(false);
-    const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(false);
-    const prevColumns = (0, react_1.useRef)(null);
-    const [inputValue, setInputValue] = (0, react_1.useState)("");
-    const [expandedGI, setExpandedGI] = (0, react_1.useState)(false);
-    const freezeColumnsAvailable = (0, react_1.useMemo)(() => gridColumns.some((col) => col.freeze), [gridColumns]);
-    const fixedColumns = (0, react_1.useMemo)(() => {
+    const prevData = useRef(data);
+    const [isFullScreen, setIsFullScreen] = useState(false);
+    const [fullScreen, setFullScreen] = useState(false);
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const prevColumns = useRef(null);
+    const [inputValue, setInputValue] = useState("");
+    const [expandedGI, setExpandedGI] = useState(false);
+    const freezeColumnsAvailable = useMemo(() => gridColumns.some((col) => col.freeze), [gridColumns]);
+    const fixedColumns = useMemo(() => {
         return gridColumns.filter((col) => col.fixedFilter && col.fixedFilter !== "");
     }, [gridColumns]);
-    const [fixedFilterValues, setFixedFilterValues] = (0, react_1.useState)({});
-    (0, react_1.useEffect)(() => {
+    const [fixedFilterValues, setFixedFilterValues] = useState({});
+    useEffect(() => {
         setSummariseAvailable(isSummarise);
     }, [isSummarise]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         setFullScreen(fullScreenAvailable);
     }, [fullScreenAvailable]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (defaultSort) {
             setSortQueries(defaultSort);
         }
     }, [defaultSort]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         let _columns = [...columns];
         if (_columns.length > 0 && data.length > 0) {
             const columnData = _columns.reduce((acc, item) => {
@@ -131,7 +93,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                 const values = data.map((row) => { var _a, _b; return (_b = (_a = row === null || row === void 0 ? void 0 : row[item === null || item === void 0 ? void 0 : item.key]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""; });
                 const hasValues = values.some((item) => item !== "");
                 if (hasValues) {
-                    if (values.every((item) => typeof item === "string" && (0, regexUtils_1.isValidDateFormat)(item))) {
+                    if (values.every((item) => typeof item === "string" && isValidDateFormat(item))) {
                         type = "date";
                     }
                     else if (values.every((item) => typeof item === "number")) {
@@ -151,12 +113,12 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
         }
         setGridColumns(_columns);
     }, [columns, data]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (globalSearchOpen) {
             setExpandedGI(true);
         }
     }, [globalSearchOpen]);
-    const filteredData = (0, react_1.useMemo)(() => {
+    const filteredData = useMemo(() => {
         let _filteredData = data.filter((item) => fixedColumns.length > 0
             ? Object.keys(fixedFilterValues)
                 .filter((key) => fixedColumns.find((col) => col.key === key))
@@ -178,7 +140,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                     ? (_b = item[column.key].value) === null || _b === void 0 ? void 0 : _b.toString()
                     : "";
                 if (query.includes("*") || query.includes("?")) {
-                    const regex = (0, regexUtils_1.createRegexFromWildcard)(query);
+                    const regex = createRegexFromWildcard(query);
                     return regex.test(value);
                 }
                 switch ((_c = searchQueries[column.key]) === null || _c === void 0 ? void 0 : _c.type) {
@@ -255,7 +217,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                     ? (_b = item[column.key].value) === null || _b === void 0 ? void 0 : _b.toString()
                     : "";
                 if (query.includes("*") || query.includes("?")) {
-                    const regex = (0, regexUtils_1.createRegexFromWildcard)(query);
+                    const regex = createRegexFromWildcard(query);
                     return regex.test(value);
                 }
                 switch ((_c = searchQueries[column.key]) === null || _c === void 0 ? void 0 : _c.type) {
@@ -494,38 +456,38 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
         setSummariseKeys(_summariseKeys);
         setSummariseDetails(newSummariseDetails);
     };
-    const { sortedData, handleSort, sortQueries, setSortQueries } = (0, useSort_1.useSort)(filteredData, gridColumns, uniqueSearch, multiSorting, withAscii);
-    const { paginatedData, currentPage, handleChangePage, handleChangeRowsPerPage, rowsPerPage, } = (0, usePagination_1.usePagination)(sortedData, defaultRowsPerPage);
-    (0, react_1.useEffect)(() => {
+    const { sortedData, handleSort, sortQueries, setSortQueries } = useSort(filteredData, gridColumns, uniqueSearch, multiSorting, withAscii);
+    const { paginatedData, currentPage, handleChangePage, handleChangeRowsPerPage, rowsPerPage, } = usePagination(sortedData, defaultRowsPerPage);
+    useEffect(() => {
         const keys = Object.keys(summariseKeys);
         if (keys.length > 0 && summariseAvailable) {
             recalculate(summariseKeys);
         }
     }, [paginatedData, sortedData, groupedKeys]);
-    const { selectedRows, toggleRowSelection, toggleSelectAll, allRowsSelected, someRowsSelected, } = (0, useBulkSelect_1.useBulkSelect)({
+    const { selectedRows, toggleRowSelection, toggleSelectAll, allRowsSelected, someRowsSelected, } = useBulkSelect({
         data: sortedData,
         selectedRows: selectedCheckBox,
         setSelectedRows: setSelectedCheckbox,
     });
-    const [hasVerticalScroll, setHasVerticalScroll] = (0, react_1.useState)(false);
-    const [totalPages, setTotalPages] = (0, react_1.useState)(0);
-    const [rowOpened, setRowOpened] = (0, react_1.useState)([]);
-    const gridRef = (0, react_1.useRef)(null);
-    const entrieGridRef = (0, react_1.useRef)(null);
-    const headerRef = (0, react_1.useRef)(null);
-    const [groupedData, setGroupedData] = (0, react_1.useState)([]);
-    const [hugLoading, setHugLoading] = (0, react_1.useState)(false);
-    const [menuVisible, setMenuVisible] = (0, react_1.useState)("");
-    const [dropdownVisible, setDropdownVisible] = (0, react_1.useState)("");
-    const [summariseDetails, setSummariseDetails] = (0, react_1.useState)({});
-    const [summariseKeys, setSummariseKeys] = (0, react_1.useState)({});
-    (0, react_1.useEffect)(() => {
+    const [hasVerticalScroll, setHasVerticalScroll] = useState(false);
+    const [totalPages, setTotalPages] = useState(0);
+    const [rowOpened, setRowOpened] = useState([]);
+    const gridRef = useRef(null);
+    const entrieGridRef = useRef(null);
+    const headerRef = useRef(null);
+    const [groupedData, setGroupedData] = useState([]);
+    const [hugLoading, setHugLoading] = useState(false);
+    const [menuVisible, setMenuVisible] = useState("");
+    const [dropdownVisible, setDropdownVisible] = useState("");
+    const [summariseDetails, setSummariseDetails] = useState({});
+    const [summariseKeys, setSummariseKeys] = useState({});
+    useEffect(() => {
         if (propSummariseKeys) {
             setSummariseKeys(propSummariseKeys);
         }
     }, [propSummariseKeys]);
-    const [calculatePosition, setCalculatePosition] = (0, react_1.useState)({ top: 0, left: 0 });
-    const [calculateVisible, setCalculateVisible] = (0, react_1.useState)("");
+    const [calculatePosition, setCalculatePosition] = useState({ top: 0, left: 0 });
+    const [calculateVisible, setCalculateVisible] = useState("");
     // useEffect(() => {
     //   const closeMenu = () => {
     //     setCalculatePosition({ top: 0, left: 0 });
@@ -536,25 +498,25 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
     //     document.removeEventListener("click", closeMenu);
     //   };
     // }, []);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (menuVisible) {
             setDropdownVisible("");
             setCalculateVisible("");
         }
     }, [menuVisible]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (dropdownVisible) {
             setMenuVisible("");
             setCalculateVisible("");
         }
     }, [dropdownVisible]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (calculateVisible) {
             setMenuVisible("");
             setDropdownVisible("");
         }
     }, [calculateVisible]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         setFilterColumn(gridColumns.map((column) => {
             if (!Object.keys(column).includes("hidden")) {
                 column.hidden = false;
@@ -632,11 +594,9 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
         }
         return flatArray;
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (gridGroupBy && gridGroupBy !== "") {
-            console.log(gridGroupBy.split(","));
             const groupedArray = groupByMultipleKeys(sortedData, gridGroupBy.split(","));
-            console.log(groupedArray);
             const flatGroupedArray = flattenGroupedData(groupedArray, 1);
             setGroupedData(flatGroupedArray);
             const grouped = flatGroupedArray
@@ -652,7 +612,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
             setGroupedData([]);
         }
     }, [sortedData, gridGroupBy]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         var _a;
         if (rowIndex > -1 && rowIndex < 2) {
             if (gridRef.current) {
@@ -662,12 +622,12 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
         (_a = document
             .getElementById(`column-${rowIndex}-${columnIndex}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "end" });
     }, [rowIndex, columnIndex]);
-    const [columnWidths, setColumnWidths] = (0, react_1.useState)({});
-    const [columnHeights, setColumnHeights] = (0, react_1.useState)({});
-    (0, react_1.useEffect)(() => {
+    const [columnWidths, setColumnWidths] = useState({});
+    const [columnHeights, setColumnHeights] = useState({});
+    useEffect(() => {
         getLoadingState && getLoadingState(hugLoading);
     }, [hugLoading]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         let shouldRender = true;
         const _prevRenderedData = prevRenderedData ? prevRenderedData : [];
         if (_prevRenderedData &&
@@ -761,7 +721,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
             return prev;
         });
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const handleKeydown = (event) => {
             const keyButton = ["ArrowRight", "ArrowUp", "ArrowDown", "ArrowLeft"];
             const _data = [...(paginate ? paginatedData : sortedData)];
@@ -806,8 +766,8 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
             window.removeEventListener("keydown", handleKeydown);
         };
     }, [sortedData, paginate, paginatedData]);
-    (0, react_1.useEffect)(() => {
-        setTotalPages((0, pagination_2.getTotalPages)(sortedData.length, rowsPerPage));
+    useEffect(() => {
+        setTotalPages(getTotalPages(sortedData.length, rowsPerPage));
     }, [data, sortQueries, rowsPerPage, sortedData.length]);
     const isScrollAlmostAtEnd = (element, threshold = 100) => {
         return (element.scrollHeight - element.scrollTop - element.clientHeight <
@@ -855,12 +815,13 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
         const exportableJson = sortedData.map((item) => {
             const newItem = filterColumns.reduce((acc, column) => {
                 if (!ignoredExportItems.includes(column.key) && item[column.key]) {
-                    acc[column.key] = (0, commonService_1.formatValue)(item[column.key].value, locale, formatOptions);
+                    acc[column.key] = formatValue(item[column.key].value, locale, formatOptions);
                 }
                 return acc;
             }, {});
             return newItem;
         });
+        console.log({ exportableJson });
         const worksheet = XLSX.utils.json_to_sheet(exportableJson);
         const workbook = XLSX.utils.book_new();
         XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
@@ -869,7 +830,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
             type: "array",
         });
         const blob = new Blob([excelBuffer], { type: "application/octet-stream" });
-        (0, file_saver_1.saveAs)(blob, filename);
+        saveAs(blob, filename);
     };
     const openSetting = () => {
         setIsOpen(true);
@@ -901,7 +862,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
             setIsCollapsed(true);
         }
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const handleFullScreenChange = () => {
             setIsFullScreen(!!document.fullscreenElement);
         };
@@ -938,7 +899,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
         setRowOpened(updatedRowOpened);
         setOpenedRows && setOpenedRows(updatedRowOpened);
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (showHideAvailable ||
             exportAvailable ||
             hasCustomOperation ||
@@ -965,7 +926,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
         expandedGI,
         fixedColumns,
     ]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (defaultGroupOpen && gridGroupBy !== "" && groupedData.length > 0) {
             let updatedRowOpened = groupedData
                 .filter((item) => item.type === "main" && item.level == 1)
@@ -997,7 +958,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
         }
         setRemovalHeight(`${_removalHeight}px`);
     };
-    const [draggingIndex, setDraggingIndex] = (0, react_1.useState)(null);
+    const [draggingIndex, setDraggingIndex] = useState(null);
     const handleDragStart = (e, index) => {
         setDraggingIndex(index);
         e.dataTransfer.effectAllowed = "move";
@@ -1035,7 +996,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
         });
         setSearchQueries((prev) => (Object.assign(Object.assign({}, prev), filterObj)));
     };
-    const filterDetails = (0, react_1.useMemo)(() => {
+    const filterDetails = useMemo(() => {
         const filterColumn = gridColumns.reduce((acc, column) => {
             const query = searchQueries[column.key];
             const uniqeValues = [
@@ -1098,7 +1059,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                 (filterData === null || filterData === void 0 ? void 0 : filterData.globalInputSearch) !== globalInputSearch,
         };
     }, [searchQueries, globalInputSearch, uniqueSearch, gridColumns]);
-    const sortDetails = (0, react_1.useMemo)(() => {
+    const sortDetails = useMemo(() => {
         const sortColumn = gridColumns.reduce((acc, column) => {
             const query = sortQueries === null || sortQueries === void 0 ? void 0 : sortQueries[column.key];
             if (query) {
@@ -1122,7 +1083,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                     Object.values(propSortColumn).sort().toString(),
         };
     }, [sortQueries, gridColumns]);
-    const summarise = (0, react_1.useMemo)(() => {
+    const summarise = useMemo(() => {
         const summariseColumn = gridColumns.reduce((acc, column) => {
             const query = summariseKeys === null || summariseKeys === void 0 ? void 0 : summariseKeys[column.key];
             if (query) {
@@ -1146,10 +1107,10 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                     Object.values(propSummariseColumn).sort().toString(),
         };
     }, [summariseKeys, gridColumns]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         handleChangePage(1);
     }, [filterDetails.hasFilters]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (filterData) {
             setUniqueSearch(filterData.uniqueSearch);
             setGlobalInputSearch(filterData.globalInputSearch);
@@ -1192,10 +1153,10 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
     //     setGridGroupBy(groupBy);
     //   }
     // };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    return (_jsxs("div", { style: {
             height,
             backgroundColor: isFullScreen ? "white" : "transparent",
-        }, className: wrapperClass, ref: entrieGridRef, children: [isOpen && ((0, jsx_runtime_1.jsx)("div", { style: {
+        }, className: wrapperClass, ref: entrieGridRef, children: [isOpen && (_jsx("div", { style: {
                     position: "fixed",
                     width: "100vw",
                     height: "100vh",
@@ -1206,7 +1167,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                     left: 0,
                     zIndex: "9999",
                     backdropFilter: "blur(2px)",
-                }, onClick: closeSetting, ref: modalContent, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                }, onClick: closeSetting, ref: modalContent, children: _jsxs("div", { style: {
                         height: "100vh",
                         width: "20rem",
                         background: "#fff",
@@ -1214,65 +1175,65 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                         display: "flex",
                         flexDirection: "column",
                         borderLeft: `1px solid ${borderColor}`,
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    }, children: [_jsx("div", { style: {
                                 borderBottom: `1px solid ${borderColor}`,
                                 width: "100%",
                                 display: "flex",
                                 alignItems: "center",
                                 justifyContent: "center",
                                 padding: "1rem",
-                            }, children: "Show/Hide columns" }), (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1, overflow: "auto", padding: "1rem" }, children: filterColumns.map((column) => {
+                            }, children: "Show/Hide columns" }), _jsx("div", { style: { flexGrow: 1, overflow: "auto", padding: "1rem" }, children: filterColumns.map((column) => {
                                 if (!column.fixed) {
-                                    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    return (_jsxs("div", { style: {
                                             display: "flex",
                                             alignItems: "center",
-                                        }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", onChange: (e) => handleColumnChange(e.target.checked, column.key), checked: !column.hidden }), (0, jsx_runtime_1.jsx)("div", { style: { marginLeft: "0.25rem" }, children: column.label })] }, column.key));
+                                        }, children: [_jsx("input", { type: "checkbox", onChange: (e) => handleColumnChange(e.target.checked, column.key), checked: !column.hidden }), _jsx("div", { style: { marginLeft: "0.25rem" }, children: column.label })] }, column.key));
                                 }
                                 return null;
-                            }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            }) }), _jsxs("div", { style: {
                                 borderTop: `1px solid ${borderColor}`,
                                 display: "flex",
                                 alignItems: "center",
                                 justifyContent: "space-between",
                                 padding: "1rem",
-                            }, children: [(0, jsx_runtime_1.jsx)("button", { style: {
+                            }, children: [_jsx("button", { style: {
                                         borderColor: "#D9D9D9",
                                         borderWidth: 1,
                                         padding: "0.25rem 0.5rem",
-                                    }, onClick: (e) => closeSetting(e, true), children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { style: {
+                                    }, onClick: (e) => closeSetting(e, true), children: "Cancel" }), _jsx("button", { style: {
                                         borderColor: "#D9D9D9",
                                         borderWidth: 1,
                                         padding: "0.25rem 0.5rem",
-                                    }, onClick: (e) => saveColumns(), children: "Save" })] })] }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    }, onClick: (e) => saveColumns(), children: "Save" })] })] }) })), _jsxs("div", { style: {
                     padding: "0.25rem",
-                }, id: "grid-action", children: [chips.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                }, id: "grid-action", children: [chips.length > 0 && (_jsxs("div", { style: {
                             width: "100%",
                             display: "flex",
                             alignItems: "center",
                             flexWrap: "wrap",
                             marginBottom: "0.5rem",
-                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 75 }, children: (0, jsx_runtime_1.jsx)(dropdown_1.default, { options: [
+                        }, children: [_jsx("div", { style: { width: 75 }, children: _jsx(Dropdown, { options: [
                                         { label: "OR", value: "or" },
                                         { label: "AND", value: "and" },
-                                    ], placeholder: "", selectedValues: [globalSearchOp], onChange: (selected) => setGlobalSearchOp(selected[0].toString()), searchEnabled: false, dropdownListWidth: 100, className: "h-8", style: { position: "relative", zIndex: 101 } }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                    ], placeholder: "", selectedValues: [globalSearchOp], onChange: (selected) => setGlobalSearchOp(selected[0].toString()), searchEnabled: false, dropdownListWidth: 100, className: "h-8", style: { position: "relative", zIndex: 101 } }) }), _jsx("div", { style: {
                                     width: `calc(100% - 75px)`,
                                     display: "flex",
                                     flexWrap: "wrap",
-                                }, children: chips.map((chip) => ((0, jsx_runtime_1.jsx)(button_1.default, { className: "epic-btn mx-2", textEleClass: "flex w-full items-center justify-between", text: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: chip }), (0, jsx_runtime_1.jsx)("span", { style: {
+                                }, children: chips.map((chip) => (_jsx(Button, { className: "epic-btn mx-2", textEleClass: "flex w-full items-center justify-between", text: _jsxs(_Fragment, { children: [_jsx("span", { children: chip }), _jsx("span", { style: {
                                                     display: "inline-block",
                                                     cursor: "pointer",
                                                     marginLeft: "0.5rem",
-                                                }, onClick: () => removeChip(chip), children: "\u00D7" })] }) }, chip))) })] })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                }, onClick: () => removeChip(chip), children: "\u00D7" })] }) }, chip))) })] })), _jsxs("div", { style: {
                             display: "flex",
                             alignItems: "end",
                             justifyContent: globalSearch || filterDetails.hasFilters || sortDetails.hasSort
                                 ? "space-between"
                                 : "end",
-                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [globalSearch && ((0, jsx_runtime_1.jsx)("div", { style: { width: expandedGI ? 300 : "fit-content" }, children: (0, jsx_runtime_1.jsx)(globalSearchChips_1.default, { expanded: expandedGI, setExpanded: setExpandedGI, globalInputSearch: globalInputSearch, setGlobalInputSearch: setGlobalInputSearch, chips: chips, setChips: setChips, inputValue: inputValue, setInputValue: setInputValue, shouldClose: !globalSearchOpen }) })), filterDetails.hasFilters && ((0, jsx_runtime_1.jsx)("div", { title: "Clear All Filters", onClick: () => clearAllFilter(), style: {
+                        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [globalSearch && (_jsx("div", { style: { width: expandedGI ? 300 : "fit-content" }, children: _jsx(GlobalSearchChiProps, { expanded: expandedGI, setExpanded: setExpandedGI, globalInputSearch: globalInputSearch, setGlobalInputSearch: setGlobalInputSearch, chips: chips, setChips: setChips, inputValue: inputValue, setInputValue: setInputValue, shouldClose: !globalSearchOpen }) })), filterDetails.hasFilters && (_jsx("div", { title: "Clear All Filters", onClick: () => clearAllFilter(), style: {
                                             cursor: "pointer",
                                             marginLeft: 10,
                                             color: "var(--clear-color)",
-                                        }, children: (0, jsx_runtime_1.jsx)(md_1.MdFilterAltOff, { size: 18 }) })), sortDetails.hasSort && ((0, jsx_runtime_1.jsx)("div", { title: "Clear All Sorts", onClick: () => {
+                                        }, children: _jsx(MdFilterAltOff, { size: 18 }) })), sortDetails.hasSort && (_jsx("div", { title: "Clear All Sorts", onClick: () => {
                                             // setChanged((prev) => [...prev, "sorts"]);
                                             setSortQueries({});
                                         }, style: {
@@ -1280,7 +1241,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                                             marginLeft: 10,
                                             transform: "rotate(-90deg)",
                                             color: "var(--clear-color)",
-                                        }, children: (0, jsx_runtime_1.jsx)(tb_1.TbAntennaBarsOff, { size: 18 }) })), summarise.hasSummarise && ((0, jsx_runtime_1.jsx)("div", { title: "Clear All Sorts", onClick: () => {
+                                        }, children: _jsx(TbAntennaBarsOff, { size: 18 }) })), summarise.hasSummarise && (_jsx("div", { title: "Clear All Sorts", onClick: () => {
                                             setSummariseKeys({});
                                             setSummariseDetails({});
                                             // setChanged((prev) => [...prev, "summary"]);
@@ -1288,15 +1249,15 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                                             cursor: "pointer",
                                             marginLeft: 10,
                                             color: "var(--clear-color)",
-                                        }, children: (0, jsx_runtime_1.jsx)(tb_1.TbCalculatorOff, {}) }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [isSummarise && ((0, jsx_runtime_1.jsx)("div", { onClick: () => setSummariseAvailable((prev) => !prev), style: {
+                                        }, children: _jsx(TbCalculatorOff, {}) }))] }), _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [isSummarise && (_jsx("div", { onClick: () => setSummariseAvailable((prev) => !prev), style: {
                                             cursor: "pointer",
                                             marginLeft: 10,
-                                        }, children: SummariseIcon ? (SummariseIcon) : summariseAvailable ? ((0, jsx_runtime_1.jsx)(tb_1.TbCalculatorFilled, { color: summarizeColor, size: 18 })) : ((0, jsx_runtime_1.jsx)(tb_1.TbCalculator, { size: 18 })) })), showHideAvailable && ((0, jsx_runtime_1.jsx)("div", { onClick: openSetting, style: { cursor: "pointer", marginLeft: 10 }, children: SettingIcon ? SettingIcon : (0, jsx_runtime_1.jsx)(fi_1.FiEye, { size: 18 }) })), exportAvailable && ((0, jsx_runtime_1.jsx)("div", { onClick: handleExport, style: { cursor: "pointer", marginLeft: 10 }, children: ExportIcon ? ExportIcon : (0, jsx_runtime_1.jsx)(fi_1.FiShare, { size: 16 }) })), fullScreen && ((0, jsx_runtime_1.jsx)("div", { onClick: toggleFullScreen, style: { cursor: "pointer", marginLeft: 10 }, children: isFullScreen ? ((0, jsx_runtime_1.jsx)(md_2.MdFullscreenExit, { size: 20 })) : ((0, jsx_runtime_1.jsx)(md_2.MdFullscreen, { size: 20 })) })), freezeColumnsAvailable && ((0, jsx_runtime_1.jsx)("div", { onClick: toggleCollapse, style: { cursor: "pointer", marginLeft: 10 }, children: isCollapsed ? ((0, jsx_runtime_1.jsx)(fi_1.FiChevronsRight, { size: 20 })) : ((0, jsx_runtime_1.jsx)(fi_1.FiChevronsLeft, { size: 20 })) })), (filterDetails.filtersUpdated ||
+                                        }, children: SummariseIcon ? (SummariseIcon) : summariseAvailable ? (_jsx(TbCalculatorFilled, { color: summarizeColor, size: 18 })) : (_jsx(TbCalculator, { size: 18 })) })), showHideAvailable && (_jsx("div", { onClick: openSetting, style: { cursor: "pointer", marginLeft: 10 }, children: SettingIcon ? SettingIcon : _jsx(FiEye, { size: 18 }) })), exportAvailable && (_jsx("div", { onClick: handleExport, style: { cursor: "pointer", marginLeft: 10 }, children: ExportIcon ? ExportIcon : _jsx(FiShare, { size: 16 }) })), fullScreen && (_jsx("div", { onClick: toggleFullScreen, style: { cursor: "pointer", marginLeft: 10 }, children: isFullScreen ? (_jsx(MdFullscreenExit, { size: 20 })) : (_jsx(MdFullscreen, { size: 20 })) })), freezeColumnsAvailable && (_jsx("div", { onClick: toggleCollapse, style: { cursor: "pointer", marginLeft: 10 }, children: isCollapsed ? (_jsx(FiChevronsRight, { size: 20 })) : (_jsx(FiChevronsLeft, { size: 20 })) })), (filterDetails.filtersUpdated ||
                                         sortDetails.sortUpdated ||
                                         summarise.summariseUpdated ||
                                         gridGroupBy !== (groupBy || "")) &&
                                         handleSaveAsView &&
-                                        saveAsNewView && ((0, jsx_runtime_1.jsx)("div", { onClick: () => handleSaveAsView({
+                                        saveAsNewView && (_jsx("div", { onClick: () => handleSaveAsView({
                                             globalInputSearch,
                                             searchQueries,
                                             uniqueSearch,
@@ -1308,10 +1269,10 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                                         }), style: {
                                             marginLeft: 6,
                                             cursor: "pointer",
-                                        }, title: "save", children: saveAsViewIcon ? saveAsViewIcon : (0, jsx_runtime_1.jsx)(md_1.MdSave, {}) })), hasCustomOperation && customOperation
+                                        }, title: "save", children: saveAsViewIcon ? saveAsViewIcon : _jsx(MdSave, {}) })), hasCustomOperation && customOperation
                                         ? customOperation
                                         : hasCustomOperation &&
-                                            resizable && ((0, jsx_runtime_1.jsx)("button", { style: {
+                                            resizable && (_jsx("button", { style: {
                                                 color: "#FFFFFF",
                                                 marginLeft: 6,
                                                 backgroundColor: JSON.stringify(gridColumns) === JSON.stringify(columns)
@@ -1323,31 +1284,31 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                                                 cursor: JSON.stringify(gridColumns) === JSON.stringify(columns)
                                                     ? "not-allowed"
                                                     : "",
-                                            }, disabled: JSON.stringify(gridColumns) === JSON.stringify(columns), onClick: () => updateGridColumns && updateGridColumns(gridColumns), children: "Save preview" }))] })] }), gridGroupBy && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                            }, disabled: JSON.stringify(gridColumns) === JSON.stringify(columns), onClick: () => updateGridColumns && updateGridColumns(gridColumns), children: "Save preview" }))] })] }), gridGroupBy && (_jsxs("div", { style: {
                             width: "100%",
                             flexWrap: "wrap",
                             display: "flex",
                             alignItems: "center",
                             margin: "0.5rem 0",
                             rowGap: "0.5rem",
-                        }, children: [(0, jsx_runtime_1.jsx)("div", { title: "Clear All Groups", onClick: () => {
+                        }, children: [_jsx("div", { title: "Clear All Groups", onClick: () => {
                                     // setChanged((prev) => [...prev, "groupBy"]);
                                     setGridGroupBy("");
-                                }, style: { cursor: "pointer", marginRight: "0.5rem" }, children: (0, jsx_runtime_1.jsx)(md_1.MdGroupOff, { size: 18 }) }), gridGroupBy.split(",").map((chip) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                }, style: { cursor: "pointer", marginRight: "0.5rem" }, children: _jsx(MdGroupOff, { size: 18 }) }), gridGroupBy.split(",").map((chip) => (_jsxs("div", { style: {
                                     display: "inline-flex",
                                     alignItems: "center",
                                     padding: "0.25rem",
                                     borderRadius: "0.25rem",
                                     margin: "0 0.25rem",
                                     backgroundColor: chipColor,
-                                }, children: [(0, jsx_runtime_1.jsx)("span", { children: chip }), (0, jsx_runtime_1.jsx)("span", { style: {
+                                }, children: [_jsx("span", { children: chip }), _jsx("span", { style: {
                                             display: "inline-block",
                                             cursor: "pointer",
                                             marginLeft: "0.5rem",
                                         }, onClick: () => setGridGroupBy((prev) => prev
                                             .split(",")
                                             .filter((item) => item !== chip)
-                                            .join(",")), children: "\u00D7" })] }, chip)))] }))] }), (0, jsx_runtime_1.jsx)("div", { id: "fixed-filters", style: {
+                                            .join(",")), children: "\u00D7" })] }, chip)))] }))] }), _jsx("div", { id: "fixed-filters", style: {
                     display: "flex",
                     alignItems: "center",
                     gap: "0.5rem",
@@ -1373,10 +1334,10 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                     });
                     options = [...new Set(options)];
                     if (!column.hidden) {
-                        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                        return (_jsx("div", { style: {
                                 position: "relative",
                                 width: "18rem",
-                            }, children: (0, jsx_runtime_1.jsx)(dropdown_1.default, { options: options.map((option) => ({
+                            }, children: _jsx(Dropdown, { options: options.map((option) => ({
                                     label: option,
                                     value: option,
                                 })), label: column.label, placeholder: "Select", selectedValues: selectedValues, onChange: (selected) => {
@@ -1404,7 +1365,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                                     : undefined, isClear: true, searchEnabled: true, dropdownListWidth: "max-content", className: "h-8 mt-2", isMultiple: column.fixedFilter === "multi-select" }) }, column.key));
                     }
                     return null;
-                }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                }) }), _jsxs("div", { style: {
                     display: "block",
                     border: gridBorder ? "1px solid #f0f0f0" : "none",
                     overflow: calculateVisible && gridGroupBy ? "visible" : "auto",
@@ -1412,7 +1373,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                     whiteSpace: "nowrap",
                     height: `calc(100% - ${removalHeight})`,
                     position: "relative",
-                }, onScroll: onScroll, ref: gridRef, children: [(0, jsx_runtime_1.jsx)(gridHeader_1.default, { columns: gridColumns, headerRef: headerRef, resizable: resizable, sortable: sortable, search: search, defaultSearchOperation: defaultSearchOperation, showMenu: showMenu, sortQueries: sortQueries, onSort: handleSort, bulkSelect: bulkSelect, cellStyle: cellStyle, widthMode: widthMode, allRowsSelected: allRowsSelected, someRowsSelected: someRowsSelected, toggleSelectAll: () => toggleSelectAll(paginate ? paginatedData : sortedData, allRowsSelected), onSearch: handleSearch, searchQueries: searchQueries, headerBackground: headerBackground, headerTopBorder: headerTopBorder, headerBottomBorder: headerBottomBorder, groupBy: gridGroupBy, setGroupBy: (value) => {
+                }, onScroll: onScroll, ref: gridRef, children: [_jsx(GridHeader, { columns: gridColumns, headerRef: headerRef, resizable: resizable, sortable: sortable, search: search, defaultSearchOperation: defaultSearchOperation, showMenu: showMenu, sortQueries: sortQueries, onSort: handleSort, bulkSelect: bulkSelect, cellStyle: cellStyle, widthMode: widthMode, allRowsSelected: allRowsSelected, someRowsSelected: someRowsSelected, toggleSelectAll: () => toggleSelectAll(paginate ? paginatedData : sortedData, allRowsSelected), onSearch: handleSearch, searchQueries: searchQueries, headerBackground: headerBackground, headerTopBorder: headerTopBorder, headerBottomBorder: headerBottomBorder, groupBy: gridGroupBy, setGroupBy: (value) => {
                             let _gridGroupBy = gridGroupBy;
                             _gridGroupBy = _gridGroupBy.split(",").includes(value)
                                 ? _gridGroupBy
@@ -1422,7 +1383,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                                 : [..._gridGroupBy.split(",").filter((item) => item), value].join(",");
                             setGridGroupBy(_gridGroupBy);
                             updateGroupBy && updateGroupBy(_gridGroupBy);
-                        }, headerDropdownIndex: headerDropdownIndex, updateGridColumns: updateGridColumns, setGridColumns: setGridColumns, widthUnits: widthUnits, gridData: filteredData, checkboxWrapper: checkboxWrapper, onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, hugColumnWidths: columnWidths, menuVisible: menuVisible, setMenuVisible: setMenuVisible, dropdownVisible: dropdownVisible, actionsKey: actionsKey, setDropdownVisible: setDropdownVisible, columnSearchOutside: columnSearchOutside, locale: locale, formatOptions: formatOptions }), hugLoading && ((0, jsx_runtime_1.jsx)("div", { style: {
+                        }, headerDropdownIndex: headerDropdownIndex, updateGridColumns: updateGridColumns, setGridColumns: setGridColumns, widthUnits: widthUnits, gridData: filteredData, checkboxWrapper: checkboxWrapper, onFilter: onFilter, setUniqueSearch: setUniqueSearch, uniqueSearch: uniqueSearch, hugColumnWidths: columnWidths, menuVisible: menuVisible, setMenuVisible: setMenuVisible, dropdownVisible: dropdownVisible, actionsKey: actionsKey, setDropdownVisible: setDropdownVisible, columnSearchOutside: columnSearchOutside, locale: locale, formatOptions: formatOptions }), hugLoading && (_jsx("div", { style: {
                             position: "sticky",
                             width: "100%",
                             height: `calc(100% - ${(_a = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight}px)`,
@@ -1435,38 +1396,38 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
                             alignItems: "center",
                             justifyContent: "center",
                             background: "#fff",
-                        }, children: (0, jsx_runtime_1.jsx)(loader_1.default, { size: 32 }) })), (0, jsx_runtime_1.jsx)("div", { id: "table-body", children: gridGroupBy !== "" ? ((0, jsx_runtime_1.jsx)(groupedGridDetails_1.default, { locale: locale, formatOptions: formatOptions, groupedData: groupedData, rowOpened: rowOpened, startIndex: startIndex, endIndex: endIndex, alternateRowColor: alternateRowColor, updateRowOpened: updateRowOpened, columnWidths: columnWidths, columnHeights: columnHeights, groupBy: groupBy, widthMode: widthMode, rowKey: rowKey, rowHeight: rowHeight, headerBackground: headerBackground, isSummarise: summariseAvailable, gridGroupBy: gridGroupBy, rowStyle: rowStyle, sortable: sortable, cellStyle: cellStyle, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, selectedRowStyle: selectedRowStyle, isLoading: isLoading, selectedRow: selectedRow, onRowClick: onRowClick, gridColumns: gridColumns, bulkSelect: bulkSelect, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, setColumnWidths: setColumnWidths, setColumnHeights: setColumnHeights, actionsKey: actionsKey })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(paginate ? paginatedData : sortedData).map((item, index) => {
+                        }, children: _jsx(Loader, { size: 32 }) })), _jsx("div", { id: "table-body", children: gridGroupBy !== "" ? (_jsx(GroupedGridDetails, { locale: locale, formatOptions: formatOptions, groupedData: groupedData, rowOpened: rowOpened, startIndex: startIndex, endIndex: endIndex, alternateRowColor: alternateRowColor, updateRowOpened: updateRowOpened, columnWidths: columnWidths, columnHeights: columnHeights, groupBy: groupBy, widthMode: widthMode, rowKey: rowKey, rowHeight: rowHeight, headerBackground: headerBackground, isSummarise: summariseAvailable, gridGroupBy: gridGroupBy, rowStyle: rowStyle, sortable: sortable, cellStyle: cellStyle, summariseKeys: summariseKeys, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, selectedRowStyle: selectedRowStyle, isLoading: isLoading, selectedRow: selectedRow, onRowClick: onRowClick, gridColumns: gridColumns, bulkSelect: bulkSelect, selectedRows: selectedRows, toggleRowSelection: toggleRowSelection, hasVerticalScroll: hasVerticalScroll, setColumnWidths: setColumnWidths, setColumnHeights: setColumnHeights, actionsKey: actionsKey })) : (_jsxs(_Fragment, { children: [(paginate ? paginatedData : sortedData).map((item, index) => {
                                     var _a, _b, _c, _d;
                                     if (paginate) {
-                                        return ((0, jsx_runtime_1.jsx)(gridRow_1.default, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === index ? selectedRowStyle : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions }, String((_b = (_a = item.id) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : index)));
+                                        return (_jsx(GridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === index ? selectedRowStyle : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions }, String((_b = (_a = item.id) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : index)));
                                     }
                                     else if (index >= startIndex && index <= endIndex) {
-                                        return ((0, jsx_runtime_1.jsx)(gridRow_1.default, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === index ? selectedRowStyle : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions }, String((_d = (_c = item.id) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : index)));
+                                        return (_jsx(GridRow, { item: item, index: index, rowStyle: Object.assign(Object.assign({}, rowStyle), (selectedRow === index ? selectedRowStyle : {})), handleDragStart: handleDragStart, handleDragOver: handleDragOver, handleDrop: handleDrop, draggable: draggable, cellStyle: cellStyle, rowHeight: rowHeight, alternateRowColor: alternateRowColor, bulkSelect: bulkSelect, selectedRows: selectedRows ? selectedRows : new Set([""]), ignoreRowSelect: ignoreRowSelect ? ignoreRowSelect : new Set([""]), toggleRowSelection: toggleRowSelection, columns: gridColumns, widthMode: widthMode, hasVerticalScroll: hasVerticalScroll, onRowClick: onRowClick, loading: isLoading, groupBy: gridGroupBy, rowKey: rowKey, rowIndex: rowIndex, columnIndex: columnIndex, hlBorderColor: hlBorderColor, hugColumnWidths: columnWidths, hugColumnHeights: columnHeights, expandedRow: expandedRow, isExpandable: isExpandable, checkboxWrapper: checkboxWrapper, locale: locale, formatOptions: formatOptions }, String((_d = (_c = item.id) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : index)));
                                     }
                                 }), extraRow && extraRow, (paginate ? paginatedData : sortedData).length === 0 &&
-                                    typeof extraRow === "undefined" && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    typeof extraRow === "undefined" && (_jsx("div", { style: {
                                         width: "100%",
                                         height: `calc(100% - ${(_d = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _d === void 0 ? void 0 : _d.clientHeight}px)`,
                                         display: "flex",
                                         alignItems: "center",
                                         padding: "1rem 0",
                                         justifyContent: "center",
-                                    }, children: "No Data available" }))] })) }), (rowCount || paginate || summariseAvailable) && ((0, jsx_runtime_1.jsx)("div", { id: "table-footer", style: {
+                                    }, children: "No Data available" }))] })) }), (rowCount || paginate || summariseAvailable) && (_jsx("div", { id: "table-footer", style: {
                             position: "sticky",
                             bottom: 0,
                             background: "var(--row-header-bg)",
                         }, children: summariseAvailable &&
                             filteredData.length > 0 &&
-                            gridGroupBy === "" && ((0, jsx_runtime_1.jsx)(SummariseDetails_1.default, { summariseKeys: summariseKeys, columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, actionsKey: actionsKey })) }))] }), paginate && gridGroupBy === "" && ((0, jsx_runtime_1.jsxs)("div", { id: "pagination", style: {
+                            gridGroupBy === "" && (_jsx(SummariseDetails, { summariseKeys: summariseKeys, columns: gridColumns, groupBy: gridGroupBy, sortable: sortable, cellStyle: cellStyle, columnWidths: columnWidths, widthMode: widthMode, summariseDetails: summariseDetails, activeCalculateColor: activeCalculateColor, gridRef: gridRef, setCalculatePosition: setCalculatePosition, calculatePosition: calculatePosition, calculatetextColor: calculatetextColor, setCalculateVisible: setCalculateVisible, calculateVisible: calculateVisible, summariseDisplay: summariseDisplay, recalculate: recalculate, actionsKey: actionsKey })) }))] }), paginate && gridGroupBy === "" && (_jsxs("div", { id: "pagination", style: {
                     display: "flex",
                     minHeight: "2rem",
                     alignItems: "center",
                     width: "100%",
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: [_jsxs("div", { style: {
                             textAlign: "left",
                             paddingLeft: 10,
                             paddingRight: 10,
                             fontSize: "inherit",
-                        }, children: ["Showing ", sortedData.length, " results", " ", paginate && ((0, jsx_runtime_1.jsxs)("span", { children: ["(", currentPage, " of ", totalPages, " pages)"] }))] }), (0, jsx_runtime_1.jsx)("div", { style: { marginLeft: "auto" }, children: (0, jsx_runtime_1.jsx)(pagination_1.default, { currentPage: currentPage, totalPages: totalPages, handleChangePage: handleChangePage, rowsPerPage: rowsPerPage, handleChangeRowsPerPage: handleChangeRowsPerPage, rowsPerPageOptions: rowsPerPageOptions }) })] }))] }));
+                        }, children: ["Showing ", sortedData.length, " results", " ", paginate && (_jsxs("span", { children: ["(", currentPage, " of ", totalPages, " pages)"] }))] }), _jsx("div", { style: { marginLeft: "auto" }, children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, handleChangePage: handleChangePage, rowsPerPage: rowsPerPage, handleChangeRowsPerPage: handleChangeRowsPerPage, rowsPerPageOptions: rowsPerPageOptions }) })] }))] }));
 };
-exports.default = Grid;
+export default Grid;