tp-react-elements 2.0.3 → 2.0.5

package/dist/components/PaginatedGrid/GenericPaginatedGrid.esm.js

@@ -1,6 +1,7 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo, useState, useRef, useLayoutEffect, useCallback } from 'react';
-import { useMaterialReactTable, MRT_ToggleGlobalFilterButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFullScreenButton, MaterialReactTable } from 'material-react-table';
+import * as XLSX from 'xlsx-js-style';
+import { MRT_ToggleGlobalFilterButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFullScreenButton, useMaterialReactTable, MaterialReactTable } from 'material-react-table';
 import { useQuery, keepPreviousData } from '@tanstack/react-query';
 import { Box, Tooltip, IconButton, GlobalStyles, Typography, Select, MenuItem, CircularProgress } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
@@ -52,6 +53,8 @@ const buildBodyGlobalStyles = (bodyFont) => ({
     '.tp-gpg-root .MuiTableBody-root .MuiTableCell-root': {
         fontSize: `${bodyFont} !important`,
         lineHeight: 1.35,
+        borderRight: '1px solid rgba(224,224,224,1)',
+        userSelect: 'text',
     },
 });
 const buildHeaderGlobalStyles = (headerMin, headerMax, headerFont, headerBgColor) => {
@@ -191,7 +194,7 @@ const OverlayLoader = ({ message }) => (jsxs(Box, { sx: {
         bgcolor: 'rgba(255,255,255,0.80)', backdropFilter: 'blur(2px)',
         zIndex: 10, gap: 1.5,
     }, children: [jsx(CircularProgress, { size: 50, thickness: 4 }), jsx(Typography, { variant: "body2", color: "text.secondary", fontWeight: 500, children: message })] }));
-const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoading, canPrev, canNext, onFirst, onPrev, onNext, onLast, onPageSizeChange, pageSizeOptions, density, }) => {
+const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoading, canPrev, canNext, onFirst, onPrev, onNext, onLast, onPageSizeChange, pageSizeOptions, density, gridId, }) => {
     const fs = density.footerFontSize;
     const selectH = density.footerMinHeight - 8;
     const startRow = totalRecords === 0 ? 0 : pageIndex * pageSize + 1;
@@ -203,7 +206,7 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
             bgcolor: 'background.paper', flexWrap: 'wrap',
             minHeight: density.footerMinHeight,
             flexShrink: 0,
-        }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.75 }, children: [jsx(Typography, { sx: { fontSize: fs }, color: "text.secondary", noWrap: true, children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), size: "small", variant: "outlined", sx: {
+        }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.75 }, children: [jsx(Typography, { sx: { fontSize: fs }, color: "text.secondary", noWrap: true, children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), inputProps: { id: `${gridId}_page_size_select` }, size: "small", variant: "outlined", sx: {
                             height: selectH, fontSize: fs - 1, minWidth: 72,
                             '.MuiSelect-select': { py: '2px !important' },
                             '.MuiOutlinedInput-notchedOutline': { borderColor: 'divider' },
@@ -211,23 +214,31 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
                     ? 'Loading…'
                     : totalRecords === 0
                         ? 'No records'
-                        : `${startRow.toLocaleString()}–${endRow.toLocaleString()} of ${totalRecords.toLocaleString()}` }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.25 }, children: [jsx(Tooltip, { title: "First page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onFirst, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(FirstPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Previous page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onPrev, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(ChevronLeftIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Typography, { fontWeight: 600, sx: {
+                        : `${startRow.toLocaleString()}–${endRow.toLocaleString()} of ${totalRecords.toLocaleString()}` }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.25 }, children: [jsx(Tooltip, { title: "First page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_first_page_icon`, size: "small", onClick: onFirst, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(FirstPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Previous page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_prev_page_icon`, size: "small", onClick: onPrev, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(ChevronLeftIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Typography, { fontWeight: 600, sx: {
                             mx: 0.5,
                             minWidth: density.footerMinHeight - 12,
                             height: density.footerMinHeight - 12,
                             display: 'flex', alignItems: 'center', justifyContent: 'center',
                             borderRadius: 1, border: '1px solid', borderColor: 'primary.main',
                             color: 'primary.main', bgcolor: 'rgba(25,118,210,0.07)', fontSize: fs - 1,
-                        }, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onNext, disabled: !canNext, sx: { p: 0.5 }, children: jsx(ChevronRightIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Last page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onLast, disabled: !canNext, sx: { p: 0.5 }, children: jsx(LastPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) })] })] }));
+                        }, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_next_page_icon`, size: "small", onClick: onNext, disabled: !canNext, sx: { p: 0.5 }, children: jsx(ChevronRightIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Last page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_last_page_icon`, size: "small", onClick: onLast, disabled: !canNext, sx: { p: 0.5 }, children: jsx(LastPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) })] })] }));
 };
 // ─── GenericPaginatedGrid ─────────────────────────────────────────────────────
-function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity = 'default', uiDensityOptions, pageSizeOptions = [1000, 5000, 10000], showGlobalSearchByDefault = true, headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
+function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', gridId, tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity = 'default', uiDensityOptions, pageSizeOptions = [1000, 5000, 10000], showGlobalSearchByDefault = false, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
     const densityTokens = useMemo(() => ({ ...UI_DENSITY_PRESETS[uiDensity], ...uiDensityOptions }), [uiDensity, uiDensityOptions]);
+    const resolvedGridId = gridId ?? exportFilename;
     const resolvedHeaderMinHeight = toCssSize(headerMinHeight, uiDensity === 'compact' ? '34px' : '40px');
     const resolvedHeaderMaxHeight = toCssSize(headerMaxHeight, uiDensity === 'compact' ? '56px' : '72px');
     const resolvedHeaderFontSize = toCssSize(headerFontSize ?? densityTokens.headerFontSize, uiDensity === 'compact' ? '11px' : '12px');
     const resolvedBodyFontSize = toCssSize(bodyFontSize ?? densityTokens.bodyFontSize, uiDensity === 'compact' ? '11px' : '12px');
     const tableStyleOverrides = useMemo(() => ({
+        // Static rules folded in here so the whole object comes from one useMemo
+        // and GlobalStyles receives a stable reference unless these props change.
+        'button[aria-label="Pin to right"]': { display: 'none' },
+        '.tp-gpg-root .MuiTableSortLabel-icon': { display: 'none !important' },
+        '.tp-gpg-root button[aria-label="Move"]': { display: 'none !important' },
+        '.tp-gpg-root [data-column-id="mrt-row-spacer"]': { display: 'none !important' },
+        '.tp-gpg-root .Mui-TableHeadCell-ColumnSpacer': { display: 'none !important' },
         ...buildHeaderGlobalStyles(resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor),
         ...buildBodyGlobalStyles(resolvedBodyFontSize),
     }), [
@@ -408,22 +419,112 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         setPagination((p) => ({ ...p, pageIndex: 0 }));
     }, [defaultFilters, defaultVisible]);
     const handleExport = useCallback(() => {
-        const headers = columns.map((c) => c.header).join(',');
-        const csvRows = rows.map((row) => columns
-            .map((c) => {
-            const key = c.accessorKey ?? '';
-            const val = row[key] ?? '';
-            return `"${String(val).replace(/"/g, '""')}"`;
-        })
-            .join(','));
-        const blob = new Blob([[headers, ...csvRows].join('\n')], { type: 'text/csv' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `${exportFilename}-page${pagination.pageIndex + 1}.csv`;
-        a.click();
-        URL.revokeObjectURL(url);
-    }, [columns, rows, exportFilename, pagination.pageIndex]);
+        const dataCols = columns.filter((c) => 'accessorKey' in c && c.accessorKey);
+        // xlsx-js-style requires 8-char ARGB (AA + RRGGBB). Prepend full-opacity "FF".
+        const toArgb = (hex, fallback = 'FF1565C0') => hex?.startsWith('#') ? 'FF' + hex.slice(1).toUpperCase().padEnd(6, '0') : fallback;
+        const headerArgb = toArgb(exportHeaderBgColor ?? headerBgColor);
+        const textArgb = toArgb(exportHeaderTextColor, 'FFFFFFFF');
+        const headerRow = dataCols.map((c) => c.header ?? '');
+        const dataRows = rows.map((row) => dataCols.map((c) => String(row[c.accessorKey] ?? '')));
+        const ws = XLSX.utils.aoa_to_sheet([headerRow, ...dataRows]);
+        // Style header row
+        dataCols.forEach((_, colIdx) => {
+            const cellRef = XLSX.utils.encode_cell({ r: 0, c: colIdx });
+            if (ws[cellRef]) {
+                ws[cellRef].s = {
+                    fill: { patternType: 'solid', fgColor: { rgb: headerArgb } },
+                    font: { bold: true, color: { rgb: textArgb }, sz: 10 },
+                    alignment: { horizontal: 'center', vertical: 'center', wrapText: true },
+                    border: {
+                        bottom: { style: 'thin', color: { rgb: 'FFCCCCCC' } },
+                        right: { style: 'thin', color: { rgb: 'FFCCCCCC' } },
+                    },
+                };
+            }
+        });
+        // Auto-fit column widths — single O(n) pass accumulates max length per column
+        // instead of one reduce() per column (was O(n × cols)).
+        const colWidths = dataCols.map((c) => (c.header ?? '').length);
+        for (const row of rows) {
+            const r = row;
+            for (let ci = 0; ci < dataCols.length; ci++) {
+                const len = String(r[dataCols[ci].accessorKey] ?? '').length;
+                if (len > colWidths[ci])
+                    colWidths[ci] = len;
+            }
+        }
+        ws['!cols'] = colWidths.map((w) => ({ wch: Math.max(w, 8) + 2 }));
+        const wb = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(wb, ws, 'Data');
+        XLSX.writeFile(wb, `${exportFilename}-page${pagination.pageIndex + 1}.xlsx`);
+    }, [columns, rows, exportFilename, pagination.pageIndex, headerBgColor, exportHeaderBgColor, exportHeaderTextColor]);
+    // ── Memoized cell-prop builders ───────────────────────────────────────────
+    // These are functions passed to MRT per-cell. Without useCallback they get
+    // new references on every render, forcing MRT to rebuild every cell's sx.
+    const memoizedHeadCellProps = useCallback((params) => {
+        const { column, table } = params;
+        const colDef = column.columnDef.muiTableHeadCellProps;
+        const colResolved = typeof colDef === 'function' ? (colDef({ column, table }) ?? {}) : colDef ?? {};
+        const gridResolved = typeof gridHeadCellProps === 'function'
+            ? (gridHeadCellProps({ column, table }) ?? {})
+            : gridHeadCellProps ?? {};
+        const align = (colResolved.align ?? gridResolved.align ?? 'left');
+        const { sx: gridSx, align: _ga, ...gridRest } = gridResolved;
+        const { sx: colSx, align: _ca, ...colRest } = colResolved;
+        return {
+            ...gridRest,
+            ...colRest,
+            align,
+            sx: [
+                buildHeaderCellSx(align, resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor, headerMaxLines),
+                ...(gridSx ? [gridSx] : []),
+                ...(colSx ? [colSx] : []),
+            ],
+        };
+    }, [
+        resolvedHeaderMinHeight,
+        resolvedHeaderMaxHeight,
+        resolvedHeaderFontSize,
+        headerBgColor,
+        headerMaxLines,
+        gridHeadCellProps,
+    ]);
+    const memoizedBodyCellProps = useCallback((params) => {
+        const { cell, column, row, table } = params;
+        const colDef = column.columnDef.muiTableBodyCellProps;
+        const colResolved = typeof colDef === 'function' ? (colDef({ cell, column, row, table }) ?? {}) : colDef ?? {};
+        const gridResolved = typeof gridBodyCellProps === 'function'
+            ? (gridBodyCellProps({ cell, column, row, table }) ?? {})
+            : gridBodyCellProps ?? {};
+        const { sx: gridSx, ...gridRest } = gridResolved;
+        const { sx: colSx, ...colRest } = colResolved;
+        return {
+            ...gridRest,
+            ...colRest,
+            sx: [
+                {
+                    whiteSpace: 'nowrap',
+                    fontSize: resolvedBodyFontSize,
+                    lineHeight: 1.35,
+                    borderRight: '1px solid rgba(224,224,224,1)',
+                },
+                ...(gridSx ? [gridSx] : []),
+                ...(colSx ? [colSx] : []),
+            ],
+        };
+    }, [resolvedBodyFontSize, gridBodyCellProps]);
+    // ── Memoized toolbar render functions ─────────────────────────────────────
+    // Defined with useCallback so MRT receives stable references and does not
+    // re-render the toolbar on every isFetching / data update cycle.
+    const renderTopToolbarCustomActions = useCallback(() => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0, pr: 1, gap: 0.5 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexShrink: 0, gap: 0.25 }, children: [jsx(Tooltip, { title: "Clear filters & refresh", children: jsx("span", { children: jsx(IconButton, { id: `${resolvedGridId}_refresh_icon`, size: "small", onClick: () => { handleClearAll(); refetch(); }, disabled: isFetching, sx: { p: uiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(RefreshIcon, { sx: { fontSize: uiDensity === 'compact' ? 18 : 20 } }) }) }) }), jsx(Tooltip, { title: "Export batch as Excel (.xlsx)", children: jsx("span", { children: jsx(IconButton, { id: `${resolvedGridId}_export_icon`, size: "small", onClick: handleExport, disabled: rows.length === 0 || isFetching, sx: { p: uiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(FileDownloadIcon, { sx: { fontSize: uiDensity === 'compact' ? 18 : 20 } }) }) }) })] }), jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: jsx(DynamicFilterBar, { serverFilterDefs: serverFilterDefs, visibleFilterIds: visibleFilterIds, onToggleFilter: handleToggleFilter, filterValues: filterValues, onFilterValuesChange: handleFilterValuesChange, columnFilters: columnFilters, onColumnFilterChange: setColumnFilters, availableColumns: availableColumns, maxVisibleFilters: maxVisibleFilters, uiDensity: uiDensity, filterChipFontSize: densityTokens.filterChipFontSize, filterChipMinHeight: densityTokens.filterChipMinHeight, filterLabelFontSize: densityTokens.filterLabelFontSize, gridId: resolvedGridId }) })] })), [
+        resolvedGridId, isFetching, rows.length, uiDensity,
+        handleClearAll, refetch, handleExport,
+        serverFilterDefs, visibleFilterIds, handleToggleFilter,
+        filterValues, handleFilterValuesChange, columnFilters, setColumnFilters,
+        availableColumns, maxVisibleFilters, densityTokens, handleToggleFilter,
+    ]);
+    const renderToolbarInternalActions = useCallback(({ table: t }) => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [jsx(MRT_ToggleGlobalFilterButton, { table: t, id: `${resolvedGridId}_global_search_icon` }), jsx(MRT_ShowHideColumnsButton, { table: t, id: `${resolvedGridId}_columns_icon` }), jsx(MRT_ToggleDensePaddingButton, { table: t, id: `${resolvedGridId}_density_icon` }), jsx(MRT_ToggleFullScreenButton, { table: t, id: `${resolvedGridId}_fullscreen_icon` })] })), [resolvedGridId]);
+    const renderBottomToolbar = useCallback(({ table: t }) => (jsx(PaginationFooter, { pageIndex: t.getState().pagination.pageIndex, pageSize: t.getState().pagination.pageSize, totalRecords: totalRecords, isFetching: isFetching, isLoading: isLoading, canPrev: t.getCanPreviousPage() && !isFetching, canNext: t.getCanNextPage() && !isFetching, onFirst: () => t.firstPage(), onPrev: () => t.previousPage(), onNext: () => t.nextPage(), onLast: () => t.lastPage(), onPageSizeChange: (s) => t.setPageSize(s), pageSizeOptions: pageSizeOptions, density: densityTokens, gridId: resolvedGridId })), [totalRecords, isFetching, isLoading, pageSizeOptions, densityTokens, resolvedGridId]);
     // ── Table instance ─────────────────────────────────────────────────────────
     const table = useMaterialReactTable({
         columns: processedColumns,
@@ -580,71 +681,18 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                 ...(headerBgColor ? { backgroundColor: headerBgColor } : {}),
             },
         },
-        muiTableHeadCellProps: (params) => {
-            const { column, table } = params;
-            // ── Resolve column-level props ────────────────────────────────────────
-            const colDef = column.columnDef.muiTableHeadCellProps;
-            const colResolved = typeof colDef === 'function' ? (colDef({ column, table }) ?? {}) : colDef ?? {};
-            // ── Resolve grid-level props ──────────────────────────────────────────
-            const gridResolved = typeof gridHeadCellProps === 'function'
-                ? (gridHeadCellProps({ column, table }) ?? {})
-                : gridHeadCellProps ?? {};
-            // Column align overrides grid align; default 'left'
-            const align = (colResolved.align ?? gridResolved.align ?? 'left');
-            const { sx: gridSx, align: _ga, ...gridRest } = gridResolved;
-            const { sx: colSx, align: _ca, ...colRest } = colResolved;
-            return {
-                ...gridRest, // grid-level props (className, etc.)
-                ...colRest, // column-level overrides
-                align,
-                sx: [
-                    buildHeaderCellSx(align, resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor, headerMaxLines),
-                    ...(gridSx ? [gridSx] : []),
-                    ...(colSx ? [colSx] : []),
-                ],
-            };
-        },
-        muiTableBodyCellProps: (params) => {
-            const { cell, column, row, table } = params;
-            // ── Resolve column-level props ────────────────────────────────────────
-            const colDef = column.columnDef.muiTableBodyCellProps;
-            const colResolved = typeof colDef === 'function' ? (colDef({ cell, column, row, table }) ?? {}) : colDef ?? {};
-            // ── Resolve grid-level props ──────────────────────────────────────────
-            const gridResolved = typeof gridBodyCellProps === 'function'
-                ? (gridBodyCellProps({ cell, column, row, table }) ?? {})
-                : gridBodyCellProps ?? {};
-            const { sx: gridSx, ...gridRest } = gridResolved;
-            const { sx: colSx, ...colRest } = colResolved;
-            return {
-                ...gridRest, // grid-level props (title, className, etc.)
-                ...colRest, // column-level overrides (align, etc.)
-                sx: [
-                    // 1. base styles — always applied
-                    {
-                        whiteSpace: 'nowrap',
-                        fontSize: resolvedBodyFontSize,
-                        lineHeight: 1.35,
-                        borderRight: '1px solid rgba(224,224,224,1)',
-                    },
-                    // 2. grid-level sx additions
-                    ...(gridSx ? [gridSx] : []),
-                    // 3. column-level sx overrides (minWidth, maxWidth, textAlign, etc.)
-                    ...(colSx ? [colSx] : []),
-                ],
-            };
-        },
+        muiTableHeadCellProps: memoizedHeadCellProps,
+        muiTableBodyCellProps: memoizedBodyCellProps,
         muiToolbarAlertBannerProps: isError
             ? { color: 'error', children: 'Failed to load data. Please try again.' }
             : undefined,
-        renderTopToolbarCustomActions: () => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0, pr: 1, gap: 0.5 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexShrink: 0, gap: 0.25 }, children: [jsx(Tooltip, { title: "Clear filters & refresh", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: () => { handleClearAll(); refetch(); }, disabled: isFetching, sx: { p: uiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(RefreshIcon, { sx: { fontSize: uiDensity === 'compact' ? 18 : 20 } }) }) }) }), jsx(Tooltip, { title: "Export batch as CSV", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: handleExport, disabled: rows.length === 0 || isFetching, sx: { p: uiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(FileDownloadIcon, { sx: { fontSize: uiDensity === 'compact' ? 18 : 20 } }) }) }) })] }), jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: jsx(DynamicFilterBar, { serverFilterDefs: serverFilterDefs, visibleFilterIds: visibleFilterIds, onToggleFilter: handleToggleFilter, filterValues: filterValues, onFilterValuesChange: handleFilterValuesChange, columnFilters: columnFilters, onColumnFilterChange: setColumnFilters, availableColumns: availableColumns, maxVisibleFilters: maxVisibleFilters, uiDensity: uiDensity, filterChipFontSize: densityTokens.filterChipFontSize, filterChipMinHeight: densityTokens.filterChipMinHeight, filterLabelFontSize: densityTokens.filterLabelFontSize }) })] })),
-        // Single global search control: MRT's built-in search icon/input in the
-        // top-right toolbar actions. The inline search box next to "Manage
-        // Filters" is intentionally not rendered (see renderTopToolbarCustomActions)
-        // to avoid showing two search controls.
-        renderToolbarInternalActions: ({ table: t }) => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [jsx(MRT_ToggleGlobalFilterButton, { table: t }), jsx(MRT_ShowHideColumnsButton, { table: t }), jsx(MRT_ToggleDensePaddingButton, { table: t }), jsx(MRT_ToggleFullScreenButton, { table: t })] })),
-        renderBottomToolbar: ({ table: t }) => (jsx(PaginationFooter, { pageIndex: t.getState().pagination.pageIndex, pageSize: t.getState().pagination.pageSize, totalRecords: totalRecords, isFetching: isFetching, isLoading: isLoading, canPrev: t.getCanPreviousPage() && !isFetching, canNext: t.getCanNextPage() && !isFetching, onFirst: () => t.firstPage(), onPrev: () => t.previousPage(), onNext: () => t.nextPage(), onLast: () => t.lastPage(), onPageSizeChange: (s) => t.setPageSize(s), pageSizeOptions: pageSizeOptions, density: densityTokens })),
+        // Memoized via useCallback above — stable references prevent MRT from
+        // re-rendering the toolbar on every isFetching / data update cycle.
+        renderTopToolbarCustomActions,
+        renderToolbarInternalActions,
+        renderBottomToolbar,
     });
-    return (jsxs(Box, { ref: containerRef, className: "tp-gpg-root", sx: {
+    return (jsxs(Box, { ref: containerRef, id: resolvedGridId, className: "tp-gpg-root", sx: {
             position: 'relative',
             height: resolvedHeight,
             minHeight: tableMinHeight,
@@ -652,14 +700,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             display: 'flex',
             flexDirection: 'column',
             overflow: 'hidden',
-        }, children: [jsx(GlobalStyles, { styles: {
-                    'button[aria-label="Pin to right"]': { display: 'none' },
-                    '.tp-gpg-root .MuiTableSortLabel-icon': { display: 'none !important' },
-                    '.tp-gpg-root button[aria-label="Move"]': { display: 'none !important' },
-                    '.tp-gpg-root [data-column-id="mrt-row-spacer"]': { display: 'none !important' },
-                    '.tp-gpg-root .Mui-TableHeadCell-ColumnSpacer': { display: 'none !important' },
-                    ...tableStyleOverrides,
-                } }), isLoading && jsx(OverlayLoader, { message: "Loading data\u2026" }), !isLoading && isFetching && jsx(OverlayLoader, { message: "Updating data\u2026" }), jsx(Box, { sx: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: jsx(MaterialReactTable, { table: table }) })] }));
+        }, children: [jsx(GlobalStyles, { styles: tableStyleOverrides }), isLoading && jsx(OverlayLoader, { message: "Loading data\u2026" }), !isLoading && isFetching && jsx(OverlayLoader, { message: "Updating data\u2026" }), jsx(Box, { sx: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: jsx(MaterialReactTable, { table: table }) })] }));
 }
 
 export { GenericPaginatedGrid as default };

package/dist/components/SelectField/MultiSelectFieldComponent.esm.js

@@ -6,7 +6,7 @@ import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 import * as React from 'react';
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 
 const ITEM_HEIGHT = 36;
 const ITEM_PADDING_TOP = 2;
@@ -52,11 +52,11 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
             setSelectAll(false);
         }
     }, [filterOptions, fieldValue]);
-    const handleChange = (event) => {
+    const handleChange = useCallback((event) => {
         const { target: { value }, } = event;
         setPersonName(typeof value === 'string' ? value?.split(',') : value);
         onChangeFn((typeof value === 'string' ? value?.split(',') : value).join(','));
-    };
+    }, [onChangeFn]);
     const selectedOptions = options.filter((item) => fieldValue?.split(',').some((value) => value === item.value));
     const selectedValues = selectedOptions.map((item) => item.label).join(' , ');
     return (jsx(Box, { children: jsx(FormControl, { fullWidth: true, ref: containerRef, sx: {

package/dist/components/SessionTimeOut/SessionTimeOut.esm.js

@@ -1,62 +1,61 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { useIdleTimer } from 'react-idle-timer';
 import ConfirmationDialog from '../ModalField/ConfirmationDialog.esm.js';
 
 const secondsToMMSS = (totalSeconds) => {
     const minutes = Math.floor(totalSeconds / 60);
     const seconds = Math.floor(totalSeconds % 60);
-    const formattedMinutes = String(minutes).padStart(2, '0');
-    const formattedSeconds = String(seconds).padStart(2, '0');
-    return `${formattedMinutes}:${formattedSeconds}`;
+    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
 };
 const promptBeforeValue = 120000;
 const SessionTimeOut = ({ sessionTime, handleSubmitSession, onSessionExpire, handleSessionCancel, SubmitButtonName = 'Submit', }) => {
     const [openConfirmModal, setOpenConfirmModal] = useState(false);
-    const expiryDetails = sessionTime;
-    const providedTimestamp = new Date(expiryDetails).getTime();
+    const providedTimestamp = new Date(sessionTime).getTime();
     const currentTimestamp = new Date().getTime();
-    const remainingTime = providedTimestamp - currentTimestamp;
-    const timeout = remainingTime;
+    const timeout = providedTimestamp - currentTimestamp;
     const promptBeforeIdle = Math.min(promptBeforeValue, timeout - 1000);
     const [, setRemainingTimeInSeconds] = useState(Math.ceil(timeout / 1000));
     const [formattedRemainingTime, setFormattedRemainingTime] = useState(secondsToMMSS(Math.ceil(timeout / 1000)));
-    const onIdle = () => {
-        if (sessionTime) {
+    const onIdle = useCallback(() => {
+        if (sessionTime)
             onSessionExpire();
-        }
-    };
-    const handleSubmit = () => {
-        handleSubmitSession();
-        setOpenConfirmModal(false);
-    };
-    const handleCancel = () => {
-        handleSessionCancel();
-        setOpenConfirmModal(false);
-    };
-    const onPrompt = () => {
+    }, [sessionTime, onSessionExpire]);
+    const onPrompt = useCallback(() => {
         setOpenConfirmModal(true);
-    };
+    }, []);
     const { getRemainingTime } = useIdleTimer({
         onIdle,
         onPrompt,
         promptBeforeIdle,
         timeout,
-        throttle: 1000, // Adjust throttle to reduce delays
+        throttle: 1000,
     });
+    // Keep a ref to getRemainingTime so the interval effect never needs it
+    // as a reactive dependency — react-idle-timer guarantees it is stable,
+    // but ESLint cannot verify that, which previously caused a spurious
+    // re-subscription on every render.
+    const getRemainingTimeRef = useRef(getRemainingTime);
+    getRemainingTimeRef.current = getRemainingTime;
     useEffect(() => {
         const interval = setInterval(() => {
-            const remainingSeconds = Math.ceil(getRemainingTime() / 1000);
-            setRemainingTimeInSeconds(promptBeforeIdle !== promptBeforeValue ? remainingSeconds : 0);
-            const formattedTime = secondsToMMSS(remainingSeconds);
-            setFormattedRemainingTime(promptBeforeIdle !== promptBeforeValue ? formattedTime : '00:00');
-        }, 1000); // Adjust interval to 1000 ms
-        return () => {
-            clearInterval(interval);
-        };
-    }, [promptBeforeIdle, getRemainingTime]);
+            const remainingSeconds = Math.ceil(getRemainingTimeRef.current() / 1000);
+            const show = promptBeforeIdle !== promptBeforeValue;
+            setRemainingTimeInSeconds(show ? remainingSeconds : 0);
+            setFormattedRemainingTime(show ? secondsToMMSS(remainingSeconds) : '00:00');
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [promptBeforeIdle]); // getRemainingTime intentionally omitted — stable ref used instead
+    const handleSubmit = useCallback(() => {
+        handleSubmitSession();
+        setOpenConfirmModal(false);
+    }, [handleSubmitSession]);
+    const handleCancel = useCallback(() => {
+        handleSessionCancel();
+        setOpenConfirmModal(false);
+    }, [handleSessionCancel]);
     const sessionMessage = `Your session will expire in ${formattedRemainingTime} seconds. Do you want to extend the session?`;
-    return (jsx(Fragment, { children: jsx(ConfirmationDialog, { openConfirmDialog: openConfirmModal, handleCancel: handleCancel, onClickSubmit: handleSubmit, text: sessionMessage, Submit: SubmitButtonName }) }));
+    return (jsx(ConfirmationDialog, { openConfirmDialog: openConfirmModal, handleCancel: handleCancel, onClickSubmit: handleSubmit, text: sessionMessage, Submit: SubmitButtonName }));
 };
 
 export { SessionTimeOut as default };

package/dist/node_modules/react-date-range/dist/components/DateInput/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm14.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm13.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm4.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm6.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireCalendar } from '../Calendar/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRangePicker/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm5.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm4.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DayCell/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DayCell } from '../../../../../_virtual/index.esm11.js';
+import { __exports as DayCell } from '../../../../../_virtual/index.esm12.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DefinedRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';

package/dist/node_modules/react-date-range/dist/components/InputRangeField/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm12.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm11.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 

package/dist/node_modules/react-date-range/dist/components/Month/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Month } from '../../../../../_virtual/index.esm13.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm14.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",