tp-react-elements 3.0.0 → 3.0.2

package/dist/_virtual/index.esm13.js

@@ -1,3 +1,3 @@
-var Month = {};
+var DateInput = {};
 
-export { Month as __exports };
+export { DateInput as __exports };

package/dist/_virtual/index.esm14.js

@@ -1,3 +1,3 @@
-var DateInput = {};
+var Month = {};
 
-export { DateInput as __exports };
+export { Month as __exports };

package/dist/_virtual/index.esm4.js

@@ -1,3 +1,3 @@
-var DefinedRange = {};
+var DateRange = {};
 
-export { DefinedRange as __exports };
+export { DateRange as __exports };

package/dist/_virtual/index.esm5.js

@@ -1,3 +1,3 @@
-var DateRangePicker = {};
+var DefinedRange = {};
 
-export { DateRangePicker as __exports };
+export { DefinedRange as __exports };

package/dist/_virtual/index.esm6.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DateRangePicker = {};
 
-export { Calendar as __exports };
+export { DateRangePicker as __exports };

package/dist/_virtual/index.esm7.js

@@ -1,3 +1,3 @@
-var DateRange = {};
+var Calendar = {};
 
-export { DateRange as __exports };
+export { Calendar as __exports };

package/dist/components/DatePicker/index.d.ts

@@ -1,3 +1,4 @@
 export { default as DatepickerWrapperV2 } from '../FormComponents/DatePicker/DatepickerWrapperV2';
 export { default as Monthpickerrender } from '../FormComponents/DatePicker/Monthpickerrender';
+export { default as MonthPickerMultiRender } from '../FormComponents/DatePicker/MonthPickerMultiRender';
 export { default as YearPickerField } from '../FormComponents/YearPickerField/YearPickerField';

package/dist/components/DatePicker/index.esm.js

@@ -1,7 +1,8 @@
 import DatepickerWrapperV2 from '../FormComponents/DatePicker/DatepickerWrapperV2.esm.js';
 import Monthpickerrender from '../FormComponents/DatePicker/Monthpickerrender.esm.js';
+import MonthPickerMultiRender from '../FormComponents/DatePicker/MonthPickerMultiRender.esm.js';
 export { default as YearPickerField } from '../FormComponents/YearPickerField/YearPickerField.esm.js';
 
 
 
-export { DatepickerWrapperV2, Monthpickerrender };
+export { DatepickerWrapperV2, MonthPickerMultiRender, Monthpickerrender };

package/dist/components/Form/FormConstants.esm.js

@@ -282,6 +282,7 @@ const useFormValidatingContext = (formArray) => {
                 renderCustomError(field);
                 break;
             case 'monthpicker':
+            case 'monthpicker-multi':
                 initialValues[field.name] = null;
                 if (field.required && field.errorMessage) {
                     validationShape[field.name] = (validationShape[field.name] || Yup.string())

package/dist/components/Form/FormRender.esm.js

@@ -1,5 +1,13 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import require$$0__default, { lazy, Suspense } from 'react';
+import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
+import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
+import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
+import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
+import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
+import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
+import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
 import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
 import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
@@ -10,14 +18,6 @@ import DateRangePickerComponent from '../DateRangePicker/DateRangePicker.esm.js'
 import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js';
 import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
 import DatetimepickerWrapper from '../FormComponents/DatePicker/DatetimepickerWrapper.esm.js';
-import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
-import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
-import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
-import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
-import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
-import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
-import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
-import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
 
 // Lazy-loaded heavy components
 // const RichTextEditorWrapper = lazy(() =>
@@ -30,6 +30,7 @@ const FormRenderMultiFileUpload = lazy(() => import('../FileUpload/index.esm.js'
 const MultiFileWithPreview = lazy(() => import('../FileUpload/index.esm.js').then((m) => ({ default: m.MultiFileWithPreview })));
 const DatepickerWrapperV2 = lazy(() => import('../DatePicker/index.esm.js').then((m) => ({ default: m.DatepickerWrapperV2 })));
 const Monthpickerrender = lazy(() => import('../DatePicker/index.esm.js').then((m) => ({ default: m.Monthpickerrender })));
+const MonthPickerMultiRender = lazy(() => import('../DatePicker/index.esm.js').then((m) => ({ default: m.MonthPickerMultiRender })));
 const TimePickerFieldWrapper = lazy(() => import('../TimePicker/index.esm.js').then((m) => ({ default: m.TimePicker })));
 // Loading fallback component
 const LoadingFallback = () => jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
@@ -119,9 +120,12 @@ const RenderForm = (props) => {
         // Time picker
         case 'timepicker':
             return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(TimePickerFieldWrapper, { props: props, variant: variant }) }));
-        // Month picker
+        // Month picker (single month)
         case 'monthpicker':
             return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(Monthpickerrender, { props: props, variant: variant }) }));
+        // Month picker (multiple months)
+        case 'monthpicker-multi':
+            return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(MonthPickerMultiRender, { props: props, variant: variant }) }));
         // Multi-select dropdown
         case 'multiselect':
             return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(MultiSelectV1, { props: props, variant: variant }) }));

package/dist/components/FormComponents/DatePicker/MonthPickerMultiRender.d.ts

@@ -0,0 +1,6 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+declare const MonthPickerMultiRender: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MonthPickerMultiRender;

package/dist/components/FormComponents/DatePicker/MonthPickerMultiRender.esm.js

@@ -0,0 +1,117 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback } from 'react';
+import { FormControl, Box, TextField, InputAdornment, Popover, IconButton, Typography, Button } from '@mui/material';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { useWatch } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const parseMY = (s) => {
+    const m = /^(\d{2})\/(\d{4})$/.exec(s.trim());
+    return m ? [Number(m[1]), Number(m[2])] : null; // [month, year]
+};
+const toKey = (month, year) => year * 100 + month; // sortable comparable int
+const toMY = (month, year) => `${String(month).padStart(2, '0')}/${year}`;
+const parseValue = (value) => value ? value.split(',').map((s) => s.trim()).filter(Boolean) : [];
+const MonthPickerMultiRender = ({ props, variant, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
+    const [draft, setDraft] = useState([]);
+    const value = useWatch({ control: props.control, name: props.item.name });
+    const committed = useMemo(() => parseValue(value), [value]);
+    const isError = !!props.errors?.[props.item.name];
+    const minKey = useMemo(() => {
+        const parsed = props.item.minDate ? parseMY(props.item.minDate) : null;
+        return parsed ? toKey(parsed[0], parsed[1]) : null;
+    }, [props.item.minDate]);
+    const maxKey = useMemo(() => {
+        const parsed = props.item.maxDate ? parseMY(props.item.maxDate) : null;
+        return parsed ? toKey(parsed[0], parsed[1]) : null;
+    }, [props.item.maxDate]);
+    const handleOpen = useCallback((e) => {
+        if (props.item.disable)
+            return;
+        const committedNow = parseValue(value);
+        setDraft(committedNow);
+        if (committedNow.length > 0) {
+            const years = committedNow.map((s) => Number(s.split('/')[1]));
+            setViewYear(Math.min(...years));
+        }
+        setAnchorEl(e.currentTarget);
+    }, [props.item.disable, value]);
+    const handleClose = useCallback(() => setAnchorEl(null), []);
+    const toggleMonth = useCallback((my) => {
+        setDraft((prev) => (prev.includes(my) ? prev.filter((v) => v !== my) : [...prev, my]));
+    }, []);
+    const handleApply = useCallback(() => {
+        const sorted = [...draft].sort((a, b) => {
+            const [am, ay] = a.split('/').map(Number);
+            const [bm, by] = b.split('/').map(Number);
+            return toKey(am, ay) - toKey(bm, by);
+        });
+        const next = sorted.join(',');
+        props.setValue(props.item.name, next);
+        props.item.onChangeFn && props.item.onChangeFn(next);
+        props.clearErrors && props.clearErrors(props.item.name);
+        setAnchorEl(null);
+    }, [draft, props]);
+    const displayValue = useMemo(() => {
+        if (committed.length === 0)
+            return '';
+        if (committed.length <= 3) {
+            return committed
+                .map((my) => {
+                const [m, y] = my.split('/').map(Number);
+                return `${MONTH_LABELS[m - 1]} ${y}`;
+            })
+                .join(', ');
+        }
+        return `${committed.length} months selected`;
+    }, [committed]);
+    const muiLabel = variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '';
+    return (jsxs(FormControl, { fullWidth: true, sx: { position: 'relative' }, disabled: props.item.disable, children: [renderLabel(variant, props), jsx(Box, { onClick: handleOpen, sx: { cursor: props.item.disable ? 'default' : 'pointer' }, children: jsx(TextField, { fullWidth: true, value: displayValue, label: muiLabel, placeholder: props.item.placeholder || 'Select month(s)…', error: isError, size: "small", InputProps: {
+                        readOnly: true,
+                        endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(CalendarTodayIcon, { sx: { fontSize: 15, color: 'text.disabled' } }) })),
+                        sx: { cursor: 'inherit' },
+                    }, inputProps: {
+                        'aria-labelledby': `${props.item.name}-label`,
+                        'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                        'aria-required': props.item.required ? true : undefined,
+                        style: { cursor: 'inherit' },
+                    }, sx: {
+                        '& .MuiFormLabel-root': { top: -10 },
+                        '& .MuiInputLabel-shrink': { top: 0 },
+                    } }) }), jsxs(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.5, borderRadius: 2, boxShadow: 6, width: 280 } }, children: [jsxs(Box, { sx: {
+                            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                            px: 1.5, py: 0.75,
+                            borderBottom: '1px solid', borderColor: 'divider',
+                        }, children: [jsx(IconButton, { size: "small", onClick: () => setViewYear((y) => y - 1), children: jsx(ChevronLeftIcon, { sx: { fontSize: 18 } }) }), jsx(Typography, { fontWeight: 600, sx: { fontSize: 14, userSelect: 'none' }, children: viewYear }), jsx(IconButton, { size: "small", onClick: () => setViewYear((y) => y + 1), children: jsx(ChevronRightIcon, { sx: { fontSize: 18 } }) })] }), jsx(Box, { sx: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0.75, p: 1.5 }, children: MONTH_LABELS.map((mon, idx) => {
+                            const monthNum = idx + 1;
+                            const my = toMY(monthNum, viewYear);
+                            const key = toKey(monthNum, viewYear);
+                            const outOfRange = (minKey !== null && key < minKey) || (maxKey !== null && key > maxKey);
+                            const isSelected = draft.includes(my);
+                            return (jsx(Button, { variant: isSelected ? 'contained' : 'outlined', size: "small", disableElevation: true, disabled: outOfRange, onClick: () => toggleMonth(my), sx: {
+                                    fontSize: 12,
+                                    textTransform: 'none',
+                                    borderRadius: 2,
+                                    py: 0.75,
+                                    borderColor: isSelected ? 'primary.main' : 'divider',
+                                    fontWeight: isSelected ? 700 : 400,
+                                }, children: mon }, my));
+                        }) }), 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: {
+                            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" }) })] }), jsx(FormBottomField, { ...props })] }, props.item.name));
+};
+
+export { MonthPickerMultiRender as default };

package/dist/components/FormComponents/index.esm.js

@@ -1,25 +1,42 @@
+export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
+export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
+export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
+export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
+export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
+export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
 export { default as SingleSelect } from './Select/SingleSelect.esm.js';
 export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
 export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
 export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
 export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
 export { default as SearchableSelect } from './Select/SearchableSelect.esm.js';
-export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
-export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
-export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
 export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
-export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
-export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
-export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
 export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
+export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
+export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@mui/material';
+import '@mui/icons-material/CalendarToday';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import 'react-hook-form';
+export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
+export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
 export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
 export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
-export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
-export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
+import '@mui/icons-material/Visibility';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/NavigateBefore';
+import '@mui/icons-material/NavigateNext';
+import '@mui/icons-material/Delete';
+import '@mui/icons-material/UploadFile';
+import '@mui/icons-material/PictureAsPdf';
+import '@mui/icons-material/TableChart';
+import '@mui/icons-material/Description';
+export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
 export { default as HelperText } from './HelperText/HelperText.esm.js';
-export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
-export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
 export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
 export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
-export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
-export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';

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

@@ -98,10 +98,11 @@ export type ServerFilterDef = {
     defaultVisible?: boolean;
 } | {
     /**
-     * Month-picker chip — lets users select **one or more months** across years.
-     * Selected months are stored as a comma-separated string of `"YYYY-MM"` values
-     * in `filterValues[filterKey]` (e.g. `"2025-01,2025-03"`).
-     * Split on `","` in your `fetchPage` handler to build the server query.
+     * Month-picker chip — by default lets users select **one or more months**
+     * across years. Selected months are stored as a comma-separated string of
+     * `"YYYY-MM"` values in `filterValues[filterKey]` (e.g. `"2025-01,2025-03"`,
+     * or just `"2025-01"` when `single: true`). Split on `","` in your
+     * `fetchPage` handler to build the server query.
      */
     type: 'monthPicker';
     id: string;
@@ -109,6 +110,13 @@ export type ServerFilterDef = {
     filterKey: string;
     /** Show this chip in the filter bar on first render. Default: `false`. */
     defaultVisible?: boolean;
+    /**
+     * Restrict selection to a single month instead of the default
+     * multi-select behaviour. Clicking a month immediately applies and
+     * closes the popover (no Apply button), matching other single-value
+     * chips like the date picker. Default: `false` (multi-select).
+     */
+    single?: boolean;
 };
 interface AvailableColumn {
     id: string;

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.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, Menu, MenuItem, GlobalStyles, Typography, Select, 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,
@@ -120,6 +125,19 @@ const buildHeaderGlobalStyles = (headerMin, headerMax, headerFont, headerBgColor
             width: '100% !important',
             fontSize: `${headerFont} !important`,
         },
+        // Column resize handle: MRT's own default sx wins over the equivalent
+        // rule in buildHeaderCellSx (same CSS specificity, applied later in the
+        // emotion cache), leaving the drag hotspot a short ~24px strip centered
+        // in a much taller header cell — most of the column border is then
+        // unresponsive to drag. GlobalStyles + !important guarantees this wins.
+        '.tp-gpg-root .MuiTableHead-root .Mui-TableHeadCell-ResizeHandle-Wrapper': {
+            height: '100% !important',
+            top: '0 !important',
+        },
+        '.tp-gpg-root .MuiTableHead-root .Mui-TableHeadCell-ResizeHandle-Divider': {
+            height: '100% !important',
+            borderRight: 'none !important',
+        },
     };
 };
 /** Per-cell sx merged into MRT (via muiTableHeadCellProps). */
@@ -151,8 +169,6 @@ const buildHeaderCellSx = (align, headerMin, headerMax, headerFont, headerBgColo
         borderBottom: '2px solid rgba(0,0,0,0.15)',
         '& button[aria-label="Move"]': { display: 'none !important' },
         '& .MuiTableSortLabel-icon': { display: 'none !important' },
-        '& .Mui-TableHeadCell-ResizeHandle-Wrapper': { height: '100%', top: 0 },
-        '& .Mui-TableHeadCell-ResizeHandle-Divider': { borderRight: 'none' },
         '& .Mui-TableHeadCell-Content': {
             alignItems: 'center',
             justifyContent: flexJustify,
@@ -186,19 +202,19 @@ const buildHeaderCellSx = (align, headerMin, headerMax, headerFont, headerBgColo
         },
     };
 };
-// ─── Internal: overlay loader ─────────────────────────────────────────────────
-const OverlayLoader = ({ message }) => (jsxs(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: {
+// ─── 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',
-        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))) }));
@@ -353,6 +369,18 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     const [columnFilters, setColumnFilters] = useState([]);
     const [globalFilter, setGlobalFilter] = useState('');
     const [columnPinning, setColumnPinning] = useState({});
+    const [exportMenuAnchor, setExportMenuAnchor] = useState(null);
+    // Whether any column filter or Global Search is currently narrowing what's
+    // displayed. When true, Export offers a choice (filtered vs. complete);
+    // when false there's nothing to choose between, so it downloads directly.
+    const isFiltered = columnFilters.length > 0 || globalFilter.trim() !== '';
+    // Always points at the latest MRT table instance (assigned right after
+    // useMaterialReactTable below) so handleExport — defined earlier in this
+    // component body — can read the CURRENT filtered row model at click time
+    // without needing `table` in its own dependency array (which would create
+    // a circular reference, since `table`'s own options include the toolbar
+    // renderer that uses handleExport).
+    const tableRef = useRef(null);
     // ── Viewport-fill height (mount + resize only — never on scroll) ─────────────
     //
     // Previously a scroll listener recalculated height as the grid moved within the
@@ -519,17 +547,24 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         setGlobalFilter('');
         setPagination((p) => ({ ...p, pageIndex: 0 }));
     }, [defaultFilters, defaultVisible]);
-    const handleExport = useCallback(async () => {
+    const handleExport = useCallback(async (scope = 'all') => {
         // Loaded on demand (and cached) so the xlsx-js-style library is excluded
         // from the initial bundle for consumers who never click Export.
         const XLSX = await getXLSX();
+        // "filtered" = exactly what's currently displayed (column filters + global
+        // search applied) — sourced from MRT's own row model so it can never drift
+        // from what the user sees. "all" = every row in the current fetched batch,
+        // ignoring column filters/global search (unchanged pre-existing behavior).
+        const exportRows = scope === 'filtered' && tableRef.current
+            ? tableRef.current.getFilteredRowModel().rows.map((r) => r.original)
+            : rows;
         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 dataRows = exportRows.map((row) => dataCols.map((c) => String(row[c.accessorKey] ?? '')));
         const ws = XLSX.utils.aoa_to_sheet([headerRow, ...dataRows]);
         // Style header row
         dataCols.forEach((_, colIdx) => {
@@ -549,7 +584,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         // 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) {
+        for (const row of exportRows) {
             const r = row;
             for (let ci = 0; ci < dataCols.length; ci++) {
                 const len = String(r[dataCols[ci].accessorKey] ?? '').length;
@@ -560,7 +595,8 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         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`);
+        const suffix = scope === 'filtered' ? '-filtered' : '';
+        XLSX.writeFile(wb, `${exportFilename}${suffix}-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
@@ -625,9 +661,11 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             alignItems: 'center',
             flexWrap: isNarrow ? 'wrap' : 'nowrap',
             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: resolvedUiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(RefreshIcon, { sx: { fontSize: resolvedUiDensity === '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: resolvedUiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(FileDownloadIcon, { sx: { fontSize: resolvedUiDensity === 'compact' ? 18 : 20 } }) }) }) })] }), jsx(Box, { sx: { flex: 1, minWidth: isNarrow ? '100%' : 0 }, children: jsx(DynamicFilterBar, { serverFilterDefs: serverFilterDefs, visibleFilterIds: visibleFilterIds, onToggleFilter: handleToggleFilter, filterValues: filterValues, onFilterValuesChange: handleFilterValuesChange, columnFilters: columnFilters, onColumnFilterChange: setColumnFilters, availableColumns: availableColumns, maxVisibleFilters: effectiveMaxVisibleFilters, uiDensity: resolvedUiDensity, filterChipFontSize: densityTokens.filterChipFontSize, filterChipMinHeight: densityTokens.filterChipMinHeight, filterLabelFontSize: densityTokens.filterLabelFontSize, gridId: resolvedGridId }) })] })), [
+        }, 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: resolvedUiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(RefreshIcon, { sx: { fontSize: resolvedUiDensity === 'compact' ? 18 : 20 } }) }) }) }), jsx(Tooltip, { title: isFiltered
+                            ? 'Export as Excel (.xlsx) — choose filtered or complete data'
+                            : 'Export as Excel (.xlsx)', children: jsx("span", { children: jsx(IconButton, { id: `${resolvedGridId}_export_icon`, size: "small", onClick: (e) => isFiltered ? setExportMenuAnchor(e.currentTarget) : handleExport('all'), disabled: rows.length === 0 || isFetching, sx: { p: resolvedUiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(FileDownloadIcon, { sx: { fontSize: resolvedUiDensity === 'compact' ? 18 : 20 } }) }) }) }), jsxs(Menu, { id: `${resolvedGridId}_export_menu`, anchorEl: exportMenuAnchor, open: Boolean(exportMenuAnchor), onClose: () => setExportMenuAnchor(null), children: [jsxs(MenuItem, { id: `${resolvedGridId}_export_filtered_option`, onClick: () => { setExportMenuAnchor(null); handleExport('filtered'); }, children: ["Filtered data (", (tableRef.current?.getFilteredRowModel().rows.length ?? rows.length).toLocaleString(), " rows)"] }), jsxs(MenuItem, { id: `${resolvedGridId}_export_all_option`, onClick: () => { setExportMenuAnchor(null); handleExport('all'); }, children: ["Complete data (", rows.length.toLocaleString(), " rows)"] })] })] }), jsx(Box, { sx: { flex: 1, minWidth: isNarrow ? '100%' : 0 }, children: jsx(DynamicFilterBar, { serverFilterDefs: serverFilterDefs, visibleFilterIds: visibleFilterIds, onToggleFilter: handleToggleFilter, filterValues: filterValues, onFilterValuesChange: handleFilterValuesChange, columnFilters: columnFilters, onColumnFilterChange: setColumnFilters, availableColumns: availableColumns, maxVisibleFilters: effectiveMaxVisibleFilters, uiDensity: resolvedUiDensity, filterChipFontSize: densityTokens.filterChipFontSize, filterChipMinHeight: densityTokens.filterChipMinHeight, filterLabelFontSize: densityTokens.filterLabelFontSize, gridId: resolvedGridId }) })] })), [
         resolvedGridId, isFetching, rows.length, resolvedUiDensity, isNarrow,
-        handleClearAll, refetch, handleExport,
+        handleClearAll, refetch, handleExport, isFiltered, exportMenuAnchor,
         serverFilterDefs, visibleFilterIds, handleToggleFilter,
         filterValues, handleFilterValuesChange, columnFilters, setColumnFilters,
         availableColumns, effectiveMaxVisibleFilters, densityTokens, handleToggleFilter,
@@ -731,6 +769,11 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         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,
@@ -816,6 +859,9 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         renderToolbarInternalActions,
         renderBottomToolbar,
     });
+    // Keep the latest table instance available to handleExport (see tableRef
+    // declaration above) without adding `table` to its dependency array.
+    tableRef.current = table;
     return (jsxs(Box, { ref: containerRef, id: resolvedGridId, className: "tp-gpg-root", sx: {
             position: 'relative',
             height: resolvedHeight,
@@ -824,7 +870,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/node_modules/react-date-range/dist/components/Calendar/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm6.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm7.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';

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 require$$0__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.esm7.js';
+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';

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.esm6.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';

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

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm4.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.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';

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 require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/dist/utils/Interface/FormInterface.d.ts

@@ -11,7 +11,7 @@ export interface TextFieldInputProps {
 export interface FormSectionPropsItem {
     name: string;
     label: string;
-    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'single-select-search' | 'datepicker' | 'datetimepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'searchable-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | 'input-select' | 'date-range-picker' | 'multiselect-table' | '';
+    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'single-select-search' | 'datepicker' | 'datetimepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'searchable-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'monthpicker-multi' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | 'input-select' | 'date-range-picker' | 'multiselect-table' | '';
     options?: OptionsProps[];
     required?: boolean;
     errorMessage?: string;

package/package.json

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