tp-react-elements 3.0.0 → 3.0.1

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.esm6.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DefinedRange = {};
 
-export { Calendar as __exports };
+export { DefinedRange 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,6 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import require$$0__default, { lazy, Suspense } from 'react';
+import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.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';
@@ -13,7 +14,6 @@ import DatetimepickerWrapper from '../FormComponents/DatePicker/DatetimepickerWr
 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';
@@ -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

@@ -4,11 +4,22 @@ export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi
 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 FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.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';
-export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
-export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+import 'dayjs';
+export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
 export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
+export { default as HelperText } from './HelperText/HelperText.esm.js';
+export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.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';
@@ -16,10 +27,7 @@ export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUplo
 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';
-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, 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))) }));
@@ -731,6 +736,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,
@@ -824,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/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/DefinedRange/index.esm.js

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

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.1",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",