tp-react-elements 2.0.7 → 3.0.1

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

@@ -253,15 +253,28 @@ const MultiSelectFilterChip = ({ label, selectedValues, options, onApply, onRemo
     const [anchor, setAnchor] = useState(null);
     // Draft is only committed on Apply — prevents an API call per checkbox tick.
     const [draft, setDraft] = useState([]);
+    const [search, setSearch] = useState('');
     const active = selectedValues.length > 0;
     const openPopover = (e) => {
         setDraft(selectedValues); // always start from the committed state
+        setSearch(''); // always start with all options visible
         setAnchor(e.currentTarget);
     };
     const toggleDraft = (value) => setDraft((prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]);
-    const allSelected = draft.length === options.length && options.length > 0;
-    const someSelected = draft.length > 0 && !allSelected;
-    const toggleAll = () => setDraft(allSelected ? [] : options.map((o) => o.value));
+    // Case-insensitive filter — same pattern as SearchableSelectChip.
+    const filteredOptions = search
+        ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
+        : options;
+    // "All" reflects/toggles only the currently visible (filtered) options —
+    // degrades to the original whole-list behaviour when search is empty.
+    const allSelected = filteredOptions.length > 0 && filteredOptions.every((o) => draft.includes(o.value));
+    const someSelected = !allSelected && filteredOptions.some((o) => draft.includes(o.value));
+    const toggleAll = () => setDraft((prev) => {
+        const filteredValues = filteredOptions.map((o) => o.value);
+        return allSelected
+            ? prev.filter((v) => !filteredValues.includes(v))
+            : [...new Set([...prev, ...filteredValues])];
+    });
     const handleApply = () => {
         onApply(draft);
         setAnchor(null);
@@ -284,19 +297,22 @@ const MultiSelectFilterChip = ({ label, selectedValues, options, onApply, onRemo
                             px: 2, py: 0.75,
                             display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                             borderBottom: '1px solid', borderColor: 'divider',
-                        }, children: [jsx(Typography, { sx: { fontSize: 11, color: draft.length > 0 ? 'primary.main' : 'text.secondary', fontWeight: draft.length > 0 ? 600 : 400 }, children: draft.length > 0 ? `${draft.length} of ${options.length} selected` : 'Select options' }), draft.length > 0 && (jsx(Button, { size: "small", color: "inherit", sx: { fontSize: 11, py: 0, textTransform: 'none', minWidth: 'auto' }, onClick: () => setDraft([]), children: "Clear all" }))] }), jsxs(ListItemButton, { onClick: toggleAll, sx: { px: 1, py: 0.25 }, children: [jsx(Checkbox, { checked: allSelected, indeterminate: someSelected, size: "small", disableRipple: true, sx: { p: 0.5, mr: 0.5, '& .MuiSvgIcon-root': { fontSize: 16 } } }), jsx(ListItemText, { primary: "All", primaryTypographyProps: {
+                        }, children: [jsx(Typography, { sx: { fontSize: 11, color: draft.length > 0 ? 'primary.main' : 'text.secondary', fontWeight: draft.length > 0 ? 600 : 400 }, children: draft.length > 0 ? `${draft.length} of ${options.length} selected` : 'Select options' }), draft.length > 0 && (jsx(Button, { size: "small", color: "inherit", sx: { fontSize: 11, py: 0, textTransform: 'none', minWidth: 'auto' }, onClick: () => setDraft([]), children: "Clear all" }))] }), jsx(Box, { sx: { px: 1.5, pt: 1, pb: 0.5 }, children: jsx(TextField, { size: "small", fullWidth: true, autoFocus: true, placeholder: "Search\u2026", value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => { if (e.key === 'Escape')
+                                setAnchor(null); }, InputProps: {
+                                startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(SearchIcon, { sx: { fontSize: 16, color: 'text.disabled' } }) })),
+                            }, sx: { '& .MuiOutlinedInput-root': { borderRadius: 2, fontSize: 13 } } }) }), jsxs(ListItemButton, { onClick: toggleAll, sx: { px: 1, py: 0.25 }, children: [jsx(Checkbox, { checked: allSelected, indeterminate: someSelected, size: "small", disableRipple: true, sx: { p: 0.5, mr: 0.5, '& .MuiSvgIcon-root': { fontSize: 16 } } }), jsx(ListItemText, { primary: "All", primaryTypographyProps: {
                                     fontSize: 13,
                                     fontStyle: 'italic',
                                     color: allSelected || someSelected ? 'primary.main' : 'text.secondary',
                                     fontWeight: allSelected ? 600 : 400,
-                                } })] }), jsx(Divider, {}), jsx(List, { dense: true, disablePadding: true, sx: { maxHeight: 240, overflowY: 'auto', py: 0.5 }, children: options.map((opt) => {
+                                } })] }), jsx(Divider, {}), jsx(List, { dense: true, disablePadding: true, sx: { maxHeight: 240, overflowY: 'auto', py: 0.5 }, children: filteredOptions.length === 0 ? (jsx(Box, { sx: { px: 2, py: 1.5 }, children: jsxs(Typography, { variant: "caption", color: "text.disabled", children: ["No options match \"", search, "\""] }) })) : (filteredOptions.map((opt) => {
                             const checked = draft.includes(opt.value);
                             return (jsxs(ListItemButton, { onClick: () => toggleDraft(opt.value), sx: { px: 1, py: 0.25 }, children: [jsx(Checkbox, { checked: checked, size: "small", disableRipple: true, sx: { p: 0.5, mr: 0.5, '& .MuiSvgIcon-root': { fontSize: 16 } } }), jsx(ListItemText, { primary: opt.label, primaryTypographyProps: {
                                             fontSize: 13,
                                             color: checked ? 'primary.main' : 'text.primary',
                                             fontWeight: checked ? 600 : 400,
                                         } })] }, opt.value));
-                        }) }), jsx(Box, { sx: {
+                        })) }), jsx(Box, { sx: {
                             px: 1.5, py: 1,
                             display: 'flex', justifyContent: 'flex-end',
                             borderTop: '1px solid', borderColor: 'divider',
@@ -304,14 +320,19 @@ const MultiSelectFilterChip = ({ label, selectedValues, options, onApply, onRemo
 };
 // ─── MonthPickerChip ─────────────────────────────────────────────────────────
 //
-// Multi-month selection chip. Users navigate by year and tick individual months.
-// Draft changes are buffered locally; `onApply` is called once when Apply is
-// clicked (single API call per filter action).
+// By default a multi-month selection chip: users navigate by year and tick
+// individual months, draft changes are buffered locally, and `onApply` is
+// called once when Apply is clicked (single API call per filter action).
 //
-// Value format: comma-separated "YYYY-MM" strings, e.g. "2025-01,2025-03".
+// Pass `single` to restrict to one month at a time — clicking a month then
+// immediately applies + closes the popover instead of buffering, matching
+// the other single-value chips (e.g. DatePickerChip).
+//
+// Value format: comma-separated "YYYY-MM" strings, e.g. "2025-01,2025-03"
+// (or just "2025-01" when `single` is set).
 // ─────────────────────────────────────────────────────────────────────────────
 const MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-const MonthPickerChip = ({ label, value, onApply, onRemove, chipStyle, baseId }) => {
+const MonthPickerChip = ({ label, value, onApply, onRemove, chipStyle, baseId, single = false }) => {
     const parseYMs = (v) => v ? v.split(',').filter(Boolean) : [];
     const [anchor, setAnchor] = useState(null);
     const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
@@ -328,7 +349,18 @@ const MonthPickerChip = ({ label, value, onApply, onRemove, chipStyle, baseId })
         }
         setAnchor(e.currentTarget);
     };
-    const toggleMonth = (ym) => setDraft((prev) => prev.includes(ym) ? prev.filter((v) => v !== ym) : [...prev, ym]);
+    const toggleMonth = (ym) => {
+        if (single) {
+            // Clicking the already-selected month clears it; otherwise replace
+            // the selection and commit immediately (no Apply button in this mode).
+            const next = draft.includes(ym) ? [] : [ym];
+            setDraft(next);
+            onApply(next.join(','));
+            setAnchor(null);
+            return;
+        }
+        setDraft((prev) => prev.includes(ym) ? prev.filter((v) => v !== ym) : [...prev, ym]);
+    };
     const handleApply = () => {
         // Sort selected months chronologically before storing
         onApply([...draft].sort().join(','));
@@ -365,15 +397,15 @@ const MonthPickerChip = ({ label, value, onApply, onRemove, chipStyle, baseId })
                                     borderColor: isSelected ? 'primary.main' : 'divider',
                                     fontWeight: isSelected ? 700 : 400,
                                 }, children: mon }, ym));
-                        }) }), draft.length > 0 && (jsxs(Box, { sx: {
+                        }) }), !single && draft.length > 0 && (jsxs(Box, { sx: {
                             px: 2, py: 0.75,
                             display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                             borderTop: '1px solid', borderColor: 'divider',
-                        }, children: [jsxs(Typography, { sx: { fontSize: 11, color: 'primary.main', fontWeight: 600 }, children: [draft.length, " month", draft.length > 1 ? 's' : '', " selected"] }), jsx(Button, { size: "small", color: "inherit", sx: { fontSize: 11, py: 0, textTransform: 'none', minWidth: 'auto' }, onClick: () => setDraft([]), children: "Clear" })] })), jsx(Box, { sx: {
+                        }, children: [jsxs(Typography, { sx: { fontSize: 11, color: 'primary.main', fontWeight: 600 }, children: [draft.length, " month", draft.length > 1 ? 's' : '', " selected"] }), jsx(Button, { size: "small", color: "inherit", sx: { fontSize: 11, py: 0, textTransform: 'none', minWidth: 'auto' }, onClick: () => setDraft([]), children: "Clear" })] })), !single && (jsx(Box, { sx: {
                             px: 1.5, py: 1,
                             display: 'flex', justifyContent: 'flex-end',
                             borderTop: '1px solid', borderColor: 'divider',
-                        }, children: jsx(Button, { size: "small", variant: "contained", disableElevation: true, onClick: handleApply, children: "Apply" }) })] })] }));
+                        }, children: jsx(Button, { size: "small", variant: "contained", disableElevation: true, onClick: handleApply, children: "Apply" }) }))] })] }));
 };
 const GlobalSearchInput = memo(({ value, onChange, chipStyle, placeholder = 'Search…' }) => {
     const [draft, setDraft] = useState(value);
@@ -531,7 +563,7 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
                         }), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
                 }
                 if (def?.type === 'monthPicker') {
-                    return (jsx(MonthPickerChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+                    return (jsx(MonthPickerChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined, single: def.single }, id));
                 }
                 if (def?.type === 'date') {
                     return (jsx(DatePickerChip, { label: def.label, value: getColValue(def.columnKey), onApply: (v) => applyColFilter(def.columnKey, v), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));

package/dist/components/PaginatedGrid/GenericPaginatedGrid.d.ts

@@ -126,6 +126,13 @@ export interface GenericPaginatedGridProps<TData extends object> {
      * Default: `false`.
      */
     showGlobalSearchByDefault?: boolean;
+    /**
+     * Show the "Toggle density" icon (Show/Hide Columns row) in the top-right
+     * toolbar actions. Default: `false` (hidden) — the grid's own `uiDensity`
+     * prop already controls row/header density, so this MRT-native toggle is
+     * usually redundant.
+     */
+    showDensityToggle?: boolean;
     /**
      * Background colour applied to every header cell.
      * Accepts any valid CSS colour string.
@@ -232,5 +239,5 @@ export interface GenericPaginatedGridProps<TData extends object> {
      */
     enableExpanding?: boolean;
 }
-declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, gridId, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive, pageSizeOptions, showGlobalSearchByDefault, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, gridId, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive, pageSizeOptions, showGlobalSearchByDefault, showDensityToggle, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo, useState, useRef, useLayoutEffect, useCallback, useEffect } from 'react';
 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, Skeleton, CircularProgress } from '@mui/material';
+import { Box, Tooltip, IconButton, GlobalStyles, Typography, Select, MenuItem, Skeleton } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import FirstPageIcon from '@mui/icons-material/FirstPage';
@@ -12,6 +12,11 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import DynamicFilterBar from './DynamicFilterBar.esm.js';
 import { getXLSX } from '../../utils/Constants/xlsx-js-style.esm.js';
 
+// MRT's default overscan (rows rendered outside the visible viewport) is
+// modest; bumping it reduces blank-row flash during fast wheel-scrolling
+// through large virtualized batches. Static (no prop dependency), so it's
+// hoisted for a stable reference across renders.
+const ROW_VIRTUALIZER_OPTIONS = { overscan: 8 };
 const UI_DENSITY_PRESETS = {
     default: {
         footerMinHeight: 48,
@@ -186,19 +191,19 @@ const buildHeaderCellSx = (align, headerMin, headerMax, headerFont, headerBgColo
         },
     };
 };
-// ─── Internal: overlay loader ─────────────────────────────────────────────────
-const OverlayLoader = ({ message }) => (jsxs(Box, { sx: {
+// ─── Internal: skeleton loader ────────────────────────────────────────────────
+//
+// Used for BOTH loading states:
+//   - Initial load (isLoading, no data on screen yet)   → opaque background
+//   - Refetch with existing data (isFetching, page/filter/sort change)
+//     → translucent + blurred so the stale rows are still faintly visible
+//     underneath, matching the previous OverlayLoader's backdrop treatment
+//     but with skeleton rows instead of a generic spinner.
+const SkeletonOverlay = ({ columnCount, rowCount = 10, translucent = false, }) => (jsx(Box, { sx: {
         position: 'absolute', inset: 0,
         display: 'flex', flexDirection: 'column',
-        alignItems: 'center', justifyContent: 'center',
-        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 })] }));
-// ─── Internal: skeleton loader (initial load — no data on screen yet) ────────
-const SkeletonOverlay = ({ columnCount, rowCount = 10, }) => (jsx(Box, { sx: {
-        position: 'absolute', inset: 0,
-        display: 'flex', flexDirection: 'column',
-        bgcolor: 'background.paper',
+        bgcolor: translucent ? 'rgba(255,255,255,0.80)' : 'background.paper',
+        ...(translucent ? { backdropFilter: 'blur(2px)' } : {}),
         zIndex: 10, p: 1.5, gap: 1,
         overflow: 'hidden',
     }, children: Array.from({ length: rowCount }).map((_, rowIdx) => (jsx(Box, { sx: { display: 'flex', gap: 1.5 }, children: Array.from({ length: Math.max(columnCount, 1) }).map((_, colIdx) => (jsx(Skeleton, { variant: "rounded", height: 28, sx: { flex: 1, minWidth: 0 }, animation: "wave" }, colIdx))) }, rowIdx))) }));
@@ -257,7 +262,7 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
                         }, 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', gridId, tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive = false, pageSizeOptions = [1000, 5000, 10000], showGlobalSearchByDefault = false, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, 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, uiDensityOptions, responsiveBreakpoints, disableResponsive = false, pageSizeOptions = [1000, 5000, 10000], showGlobalSearchByDefault = false, showDensityToggle = false, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
     // ── Responsive tier detection ────────────────────────────────────────────────
     // Three tiers (desktop / tablet / mobile) drive auto density, a progressively
     // lower filter-chip cap, toolbar wrapping, and a stacked pagination footer —
@@ -393,14 +398,15 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     const totalRecords = data?.totalRecords ?? 0;
     // ── Strip custom props + auto-inject filterFn before passing to MRT ──────────
     //
-    // `TPColumnDef` extends `MRT_ColumnDef` with `filterType` and `options`.
-    // MRT doesn't know these props, so we strip them here. We also inject the
-    // appropriate `filterFn` automatically so callers never have to write one.
+    // `TPColumnDef` extends `MRT_ColumnDef` with `filterType`, `options`, and
+    // `getSearchText`. MRT doesn't know these props, so we strip them here. We
+    // also inject the appropriate `filterFn` automatically so callers never
+    // have to write one.
     const processedColumns = useMemo(() => {
         const allowGrow = layoutMode === 'grid' || layoutMode === 'semantic';
         return columns.map((col) => {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { filterType, options, ...mrtCol } = col;
+            const { filterType, options, getSearchText, ...mrtCol } = col;
             if (allowGrow && mrtCol.grow === undefined) {
                 mrtCol.grow = true;
             }
@@ -430,6 +436,41 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             return mrtCol;
         });
     }, [columns, layoutMode]);
+    // ── Global Search: match formatted `Cell` text, not just the raw value ───────
+    //
+    // MRT's built-in global filter always compares against `row.getValue(columnId)`
+    // (the raw accessor value) and never against what `Cell` renders. A column
+    // whose `Cell` formats/maps that value for display (dates, currency, status
+    // labels, …) is therefore unsearchable by the text a user actually sees —
+    // typing "01 Jul 2026" finds nothing because the raw value is really
+    // "2026-07-01T00:00:00". `getSearchText` on `TPColumnDef` lets a column opt
+    // in to being matched against its formatted representation instead.
+    const searchTextGetters = useMemo(() => {
+        const map = new Map();
+        columns.forEach((col) => {
+            const getSearchText = col.getSearchText;
+            if ('accessorKey' in col && col.accessorKey && typeof getSearchText === 'function') {
+                map.set(col.accessorKey, getSearchText);
+            }
+        });
+        return map;
+    }, [columns]);
+    const tpGlobalSearchFn = useCallback((row, columnId, filterValue) => {
+        const needle = String(filterValue ?? '').trim().toLowerCase();
+        if (!needle)
+            return true;
+        const getSearchText = searchTextGetters.get(columnId);
+        const value = getSearchText ? getSearchText(row.original) : row.getValue(columnId);
+        if (value === null || value === undefined)
+            return false;
+        return String(value).toLowerCase().includes(needle);
+    }, [searchTextGetters]);
+    // Stable references for the two table options below — recreating either
+    // per render would defeat the memoization on every other MRT callback
+    // (see docs/arch-performance.mdx: all function/object props passed into
+    // useMaterialReactTable must be memoized).
+    const tpFilterFns = useMemo(() => ({ tpGlobalSearch: tpGlobalSearchFn }), [tpGlobalSearchFn]);
+    const getColumnCanGlobalFilter = useCallback(() => true, []);
     // ── Derive column list for filter chip picker ──────────────────────────────
     //
     // A column is excluded from the "Column Filters" section of Manage Filters
@@ -596,7 +637,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         filterValues, handleFilterValuesChange, columnFilters, setColumnFilters,
         availableColumns, effectiveMaxVisibleFilters, 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 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` }), showDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: t, id: `${resolvedGridId}_density_icon` })), jsx(MRT_ToggleFullScreenButton, { table: t, id: `${resolvedGridId}_fullscreen_icon` })] })), [resolvedGridId, showDensityToggle]);
     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, isStacked: isMobileTier })), [totalRecords, isFetching, isLoading, pageSizeOptions, densityTokens, resolvedGridId, isMobileTier]);
     // ── Table instance ─────────────────────────────────────────────────────────
     const table = useMaterialReactTable({
@@ -676,11 +717,30 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         enableFilters: true,
         enableColumnFilters: false,
         enableGlobalFilter: true,
-        enableDensityToggle: true,
+        // Custom global filter (see `tpGlobalSearchFn` above) so columns with a
+        // formatting `Cell` are matched by their displayed text, not just the
+        // raw accessor value. Registered under `filterFns` and selected by name
+        // via `globalFilterFn` — MRT resolves `globalFilterFn` strings against
+        // this map rather than accepting a function directly.
+        filterFns: tpFilterFns,
+        globalFilterFn: 'tpGlobalSearch',
+        // MRT's default `getColumnCanGlobalFilter` only allows a column into
+        // Global Search when the very first fetched row's raw value happens to
+        // be a `string`/`number` — a null/undefined first row silently drops
+        // that column from search entirely. Our filterFn already handles
+        // null/undefined per-row, so allow every column (columns can still opt
+        // out individually via `enableGlobalFilter: false`).
+        getColumnCanGlobalFilter,
+        enableDensityToggle: showDensityToggle,
         enableFullScreenToggle: true,
         enableHiding: true,
         enableStickyHeader: true,
         enableRowVirtualization: true,
+        // A larger overscan renders more off-screen rows up front, reducing the
+        // brief blank-row flash that can appear when scrolling quickly through
+        // a large in-memory batch (rows are already fetched — virtualization
+        // only governs what's mounted to the DOM at any given moment).
+        rowVirtualizerOptions: ROW_VIRTUALIZER_OPTIONS,
         initialState: {
             density: densityTokens.mrtDensity,
             showGlobalFilter: showGlobalSearchByDefault,
@@ -774,7 +834,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             display: 'flex',
             flexDirection: 'column',
             overflow: 'hidden',
-        }, children: [jsx(GlobalStyles, { styles: tableStyleOverrides }), isLoading && jsx(SkeletonOverlay, { columnCount: processedColumns.length }), !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(SkeletonOverlay, { columnCount: processedColumns.length }), !isLoading && isFetching && (jsx(SkeletonOverlay, { columnCount: processedColumns.length, translucent: true })), 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/PaginatedGrid/types.d.ts

@@ -75,6 +75,31 @@ export type TPColumnDef<TData extends object = object, TValue = any> = MRT_Colum
      * ```
      */
     defaultVisible?: boolean;
+    /**
+     * Text/number the Global Search box should match against for this column.
+     *
+     * MRT's built-in Global Search always matches the raw accessor value
+     * (`row.getValue(columnId)`) — **never** what `Cell` renders. So a column
+     * whose `Cell` formats or maps the raw value for display (dates, currency,
+     * status labels, etc.) becomes unsearchable by the text a user actually
+     * sees on screen: typing the formatted text finds nothing because it's
+     * being compared against the untouched raw value underneath.
+     *
+     * Set `getSearchText` to the same formatted representation `Cell` renders,
+     * and `GenericPaginatedGrid` will match Global Search against it instead:
+     *
+     * ```ts
+     * {
+     *   accessorKey: 'InvoiceDate',
+     *   Cell: ({ cell }) => formatDate(cell.getValue<string>()),
+     *   getSearchText: (row) => formatDate(row.InvoiceDate), // "01 Jul 2026" now matches
+     * }
+     * ```
+     *
+     * Omit when `Cell` is absent or simply displays the raw value unchanged —
+     * the raw accessor value is matched by default in that case.
+     */
+    getSearchText?: (row: TData) => string | number | null | undefined;
 };
 export interface InvoiceDetail {
     Data_from: string;

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

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box, TextField, FormControlLabel, Tooltip } from '@mui/material';
+import { Tooltip, Box, TextField, FormControlLabel } from '@mui/material';
 import Checkbox from '@mui/material/Checkbox';
 import FormControl from '@mui/material/FormControl';
 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, useCallback } from 'react';
+import * as require$$0 from 'react';
+import { useState, useMemo, useCallback } from 'react';
 
 const ITEM_HEIGHT = 36;
 const ITEM_PADDING_TOP = 2;
@@ -16,29 +16,26 @@ const extractValuesToArray = (inputString) => {
     return trimmedArray;
 };
 function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false, optionFontSize = '13px', donotEnableMultiselectOrder = false }) {
-    const [personName, setPersonName] = React.useState(value ? extractValuesToArray(value) : []);
+    const [personName, setPersonName] = require$$0.useState(value ? extractValuesToArray(value) : []);
     const [searchText, setSearchText] = useState('');
     const [selectAll, setSelectAll] = useState(false);
-    const textfieldRef = React.useRef(null);
-    const containerRef = React.useRef(null);
+    const textfieldRef = require$$0.useRef(null);
+    const containerRef = require$$0.useRef(null);
     const fieldValue = value;
-    const [savedSortValue, setSavedSortValue] = React.useState(fieldValue);
-    const sortedOptions = React.useMemo(() => {
+    const [savedSortValue, setSavedSortValue] = require$$0.useState(fieldValue);
+    const sortedOptions = require$$0.useMemo(() => {
         const selectedArray = savedSortValue ? savedSortValue.split(',') : [];
         const selectedItems = options.filter((opt) => selectedArray.includes(String(opt.value)));
         const unselectedItems = options.filter((opt) => !selectedArray.includes(String(opt.value)));
         return [...selectedItems, ...unselectedItems];
     }, [options, savedSortValue]);
-    const [filterOptions, setFilterOptions] = useState(sortedOptions);
-    React.useEffect(() => {
-        if (searchText !== '') {
-            setFilterOptions(sortedOptions.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
-        }
-        else {
-            setFilterOptions(sortedOptions);
-        }
-    }, [sortedOptions, searchText]);
-    React.useEffect(() => {
+    // Derived directly from sortedOptions/searchText — previously a
+    // useState+useEffect pair that duplicated this computation and forced an
+    // extra render pass every time either dependency changed.
+    const filterOptions = useMemo(() => searchText !== ''
+        ? sortedOptions.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase()))
+        : sortedOptions, [sortedOptions, searchText]);
+    require$$0.useEffect(() => {
         const values = fieldValue ? fieldValue.split(',').filter(Boolean) : [];
         const filterIdStrings = filterOptions.map((item) => String(item.value));
         if (values.length === 0 || filterOptions.length === 0) {
@@ -57,8 +54,9 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
         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(' , ');
+    const selectedOptions = useMemo(() => options.filter((item) => fieldValue?.split(',').some((value) => value === item.value)), [options, fieldValue]);
+    const selectedValues = useMemo(() => selectedOptions.map((item) => item.label).join(' , '), [selectedOptions]);
+    const renderSelectedValue = useCallback(() => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length > 3 ? `${selectedOptions.length} Selected` : selectedValues }) })), [selectedOptions, selectedValues]);
     return (jsx(Box, { children: jsx(FormControl, { fullWidth: true, ref: containerRef, sx: {
                 '& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy': {
                     top: '-10px',
@@ -81,7 +79,7 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
                     if (!donotEnableMultiselectOrder) {
                         setSavedSortValue(fieldValue);
                     }
-                }, renderValue: () => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length > 3 ? `${selectedOptions.length} Selected` : selectedValues }) })), MenuProps: {
+                }, renderValue: renderSelectedValue, MenuProps: {
                     PaperProps: {
                         style: {
                             maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,

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

@@ -1,5 +1,5 @@
 import { __exports as Calendar } from '../../../../../_virtual/index.esm7.js';
-import React__default from 'react';
+import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';
 import { __require as requireMonth } from '../Month/index.esm.js';
@@ -23,7 +23,7 @@ function requireCalendar () {
 	  value: true
 	});
 	Calendar.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _DayCell = requireDayCell();
 	var _Month = _interopRequireDefault(requireMonth());

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

@@ -1,5 +1,5 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm14.js';
-import React__default from 'react';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm13.js';
+import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';
 import { __require as requireDateFns } from '../../../../date-fns/index.esm.js';
@@ -14,7 +14,7 @@ function requireDateInput () {
 	  value: true
 	});
 	DateInput.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _classnames = _interopRequireDefault(requireClassnames());
 	var _dateFns = /*@__PURE__*/ requireDateFns();

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

@@ -1,5 +1,5 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm6.js';
-import React__default from 'react';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm4.js';
+import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireCalendar } from '../Calendar/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';
@@ -18,7 +18,7 @@ function requireDateRange () {
 	  value: true
 	});
 	DateRange.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _Calendar = _interopRequireDefault(requireCalendar());
 	var _DayCell = requireDayCell();

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

@@ -1,5 +1,5 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm4.js';
-import React__default from 'react';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm5.js';
+import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';
 import { __require as requireDefinedRange } from '../DefinedRange/index.esm.js';
@@ -17,7 +17,7 @@ function requireDateRangePicker () {
 	  value: true
 	});
 	DateRangePicker.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _DateRange = _interopRequireDefault(requireDateRange());
 	var _DefinedRange = _interopRequireDefault(requireDefinedRange());

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

@@ -1,5 +1,5 @@
-import { __exports as DayCell } from '../../../../../_virtual/index.esm12.js';
-import React__default from 'react';
+import { __exports as DayCell } from '../../../../../_virtual/index.esm11.js';
+import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';
 import { __require as requireDateFns } from '../../../../date-fns/index.esm.js';
@@ -14,7 +14,7 @@ function requireDayCell () {
 	  value: true
 	});
 	DayCell.rangeShape = DayCell.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _classnames = _interopRequireDefault(requireClassnames());
 	var _dateFns = /*@__PURE__*/ requireDateFns();

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

@@ -1,5 +1,5 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.js';
-import React__default from 'react';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
+import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';
 import { __require as requireDefaultRanges } from '../../defaultRanges.esm.js';
@@ -17,7 +17,7 @@ function requireDefinedRange () {
 	  value: true
 	});
 	DefinedRange.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _styles = _interopRequireDefault(requireStyles());
 	var _defaultRanges = requireDefaultRanges();

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

@@ -1,5 +1,5 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm11.js';
-import React__default from 'react';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm12.js';
+import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 
 var hasRequiredInputRangeField;
@@ -12,7 +12,7 @@ function requireInputRangeField () {
 	  value: true
 	});
 	InputRangeField.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 	function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }

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

@@ -1,5 +1,5 @@
-import { __exports as Month } from '../../../../../_virtual/index.esm13.js';
-import React__default from 'react';
+import { __exports as Month } from '../../../../../_virtual/index.esm14.js';
+import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';
 import { __require as requireDateFns } from '../../../../date-fns/index.esm.js';
@@ -15,7 +15,7 @@ function requireMonth () {
 	  value: true
 	});
 	Month.default = void 0;
-	var _react = _interopRequireWildcard(React__default);
+	var _react = _interopRequireWildcard(require$$0__default);
 	var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
 	var _DayCell = _interopRequireWildcard(requireDayCell());
 	var _dateFns = /*@__PURE__*/ requireDateFns();

package/dist/node_modules/react-list/react-list.esm.js

@@ -1,5 +1,5 @@
 import { __exports as reactList } from '../../_virtual/react-list.esm.js';
-import React__default from 'react';
+import require$$0__default from 'react';
 import require$$1 from 'react/jsx-runtime';
 
 var hasRequiredReactList;
@@ -10,7 +10,7 @@ function requireReactList () {
 	(function (exports$1) {
 		(function (global, factory) {
 		  {
-		    factory(exports$1, React__default, require$$1);
+		    factory(exports$1, require$$0__default, require$$1);
 		  }
 		})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : reactList, function (_exports, _react, _jsxRuntime) {