tp-react-elements 1.3.11 → 1.3.13

package/README.md

@@ -175,23 +175,41 @@ Refer to our Storybook documentation for detailed API documentation and examples
 npm run storybook
 ```
 
-- **Docs → Paginated Grid** — full API: grid height, header wrap (`headerMinHeight` / `headerMaxHeight`), `headerBgColor`, filters, troubleshooting
-- **Components → PaginatedGrid → Sample Grids** — mock grids (no API): header wrap test, compact layout, viewport fill
+- **Docs → Paginated Grid** — API reference plus **four copy-paste examples** (embedded panel, wrapped headers, typography, invoice filters)
+- **Components → PaginatedGrid → Sample Grids** — mock grids (no API): header wrap, compact layout, viewport fill
 - **Components → PaginatedGrid → Example Grid** — live invoice API demo
 
-Example header styling:
+**Example — compact embedded grid with smaller fonts:**
+
+```tsx
+<GenericPaginatedGrid
+  tableHeight="calc(100vh - 240px)"
+  autoFillViewport={false}
+  uiDensity="compact"
+  headerBgColor="#f5f5f5"
+  headerMaxHeight={64}
+  headerFontSize={11}
+  bodyFontSize={10}
+  {...gridProps}
+/>
+```
+
+**Example — wrapped header “Department / Business Unit”:**
 
 ```tsx
 <GenericPaginatedGrid
   headerBgColor="#e8eaf6"
   headerMinHeight="48px"
   headerMaxHeight="96px"
-  tableHeight="calc(100vh - 200px)"
-  autoFillViewport={false}
+  headerFontSize={12}
+  bodyFontSize={12}
+  layoutMode="grid"
   {...gridProps}
 />
 ```
 
+Full examples: Storybook **Docs → Paginated Grid → Examples**.
+
 ## 🏗️ Best Practices for Code Structure and Organization
 
 ### Component Organization

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

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

package/dist/_virtual/index.esm7.js

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

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

@@ -10,6 +10,11 @@ import type { MRT_ColumnFiltersState } from 'material-react-table';
  *                          quickly filter long option lists. Same `filterKey` / `options`
  *                          shape as `dropdown`.
  * - `date`               — single date-picker chip. Applied client-side via MRT `columnFilters`.
+ * - `multiSelect`        — checkbox list that allows picking multiple values at once.
+ *                          Selected values are joined as a comma-separated string in
+ *                          `filterValues[filterKey]` (e.g. `"Pending,Shipped"`).
+ *                          Your `fetchPage` function should split on `","` to build the
+ *                          correct server query.
  */
 export type ServerFilterDef = {
     type: 'dateRange';
@@ -55,6 +60,21 @@ export type ServerFilterDef = {
     id: string;
     label: string;
     columnKey: string;
+} | {
+    /**
+     * Multi-select checkbox chip — users can pick **multiple** values at once.
+     * Selected values are stored as a comma-separated string in
+     * `filterValues[filterKey]` (e.g. `"Pending,Shipped,Delivered"`).
+     * Split on `","` in your `fetchPage` handler to build the server query.
+     */
+    type: 'multiSelect';
+    id: string;
+    label: string;
+    filterKey: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
 };
 interface AvailableColumn {
     id: string;
@@ -64,7 +84,7 @@ interface AvailableColumn {
      * Sourced from the `filterType` prop on the column's `TPColumnDef`.
      * Defaults to `'text'` when omitted.
      */
-    filterType?: 'text' | 'date' | 'select' | 'searchable-select' | 'number';
+    filterType?: 'text' | 'date' | 'select' | 'searchable-select' | 'number' | 'multi-select';
     /** Options for `'select'` / `'searchable-select'` chip variants. */
     filterOptions?: {
         label: string;

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

@@ -9,7 +9,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
-import { Box, Typography, Tooltip, Button, Popover, TextField, Stack, InputAdornment, List, ListItemButton, ListItemText, Divider } from '@mui/material';
+import { Box, Typography, Tooltip, Button, Popover, TextField, Stack, InputAdornment, List, ListItemButton, ListItemText, Checkbox, Divider } from '@mui/material';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import TuneIcon from '@mui/icons-material/Tune';
 import CloseIcon from '@mui/icons-material/Close';
@@ -29,6 +29,7 @@ const TYPE_PILL = {
     text: { label: 'Text', color: '#2e7d32', bg: '#e8f5e9' },
     dropdown: { label: 'Select', color: '#6a1b9a', bg: '#f3e5f5' },
     searchableDropdown: { label: 'Search', color: '#bf360c', bg: '#fbe9e7' },
+    multiSelect: { label: 'Multi', color: '#0277bd', bg: '#e1f5fe' },
 };
 // Column filter type pills (used in COLUMN FILTERS section of Manage Filters)
 const COLUMN_TYPE_PILL = {
@@ -37,6 +38,7 @@ const COLUMN_TYPE_PILL = {
     select: { label: 'Select', color: '#bf360c', bg: '#fbe9e7' },
     'searchable-select': { label: 'Search', color: '#bf360c', bg: '#fbe9e7' },
     number: { label: 'Number', color: '#e65100', bg: '#fff3e0' },
+    'multi-select': { label: 'Multi', color: '#0277bd', bg: '#e1f5fe' },
 };
 const chipSx = (active, opts) => ({
     borderRadius: 5,
@@ -244,6 +246,41 @@ const SearchableSelectChip = ({ label, value, options, onApply, onRemove, placeh
                                             } }), isSelected && (jsx(CheckIcon, { sx: { fontSize: 15, color: 'primary.main', flexShrink: 0 } }))] }, opt.value));
                             }))] })] })] }));
 };
+const MultiSelectFilterChip = ({ label, selectedValues, options, onApply, onRemove, chipStyle, }) => {
+    const [anchor, setAnchor] = useState(null);
+    const active = selectedValues.length > 0;
+    const toggle = (value) => {
+        const next = selectedValues.includes(value)
+            ? selectedValues.filter((v) => v !== value)
+            : [...selectedValues, value];
+        onApply(next);
+    };
+    const chipText = (() => {
+        if (!active)
+            return label;
+        if (selectedValues.length === 1) {
+            const found = options.find((o) => o.value === selectedValues[0]);
+            return `${label}: ${found?.label ?? selectedValues[0]}`;
+        }
+        if (selectedValues.length === 2) {
+            const names = selectedValues.map((v) => options.find((o) => o.value === v)?.label ?? v);
+            return `${label}: ${names.join(', ')}`;
+        }
+        return `${label}: ${selectedValues.length} selected`;
+    })();
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: (e) => setAnchor(e.currentTarget), startIcon: jsx(FilterListIcon, { sx: { fontSize: '14px !important', mr: -0.25 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, width: 260 } }, children: [active && (jsxs(Box, { sx: {
+                            px: 2, py: 0.75,
+                            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                            borderBottom: '1px solid', borderColor: 'divider',
+                        }, children: [jsxs(Typography, { sx: { fontSize: 11, color: 'primary.main', fontWeight: 600 }, children: [selectedValues.length, " selected"] }), jsx(Button, { size: "small", color: "inherit", sx: { fontSize: 11, py: 0, textTransform: 'none', minWidth: 'auto' }, onClick: () => onApply([]), children: "Clear all" })] })), jsx(List, { dense: true, disablePadding: true, sx: { maxHeight: 300, overflowY: 'auto', py: 0.5 }, children: options.map((opt) => {
+                            const checked = selectedValues.includes(opt.value);
+                            return (jsxs(ListItemButton, { onClick: () => toggle(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));
+                        }) })] })] }));
+};
 const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, onToggle, maxVisible = 4, chipStyle, }) => {
     const [anchor, setAnchor] = useState(null);
     const atLimit = visibleIds.length >= maxVisible;
@@ -296,11 +333,21 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
         minHeight: filterChipMinHeight ?? (uiDensity === 'compact' ? 26 : 30),
     };
     const labelFontSize = filterLabelFontSize ?? (uiDensity === 'compact' ? 11 : 12);
+    // ── Single-value column filter helpers ──────────────────────────────────────
     const getColValue = (id) => columnFilters.find((f) => f.id === id)?.value ?? '';
     const applyColFilter = (id, value) => {
         const rest = columnFilters.filter((f) => f.id !== id);
         onColumnFilterChange(value ? [...rest, { id, value }] : rest);
     };
+    // ── Multi-value column filter helpers ────────────────────────────────────────
+    const getColValues = (id) => {
+        const val = columnFilters.find((f) => f.id === id)?.value;
+        return Array.isArray(val) ? val : [];
+    };
+    const applyColMultiFilter = (id, values) => {
+        const rest = columnFilters.filter((f) => f.id !== id);
+        onColumnFilterChange(values.length > 0 ? [...rest, { id, value: values }] : rest);
+    };
     const removeFilter = (id) => {
         const def = serverFilterDefs.find((d) => d.id === id);
         if (def?.type === 'dateRange') {
@@ -308,14 +355,22 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
         }
         else if (def?.type === 'text' ||
             def?.type === 'dropdown' ||
-            def?.type === 'searchableDropdown') {
+            def?.type === 'searchableDropdown' ||
+            def?.type === 'multiSelect') {
             onFilterValuesChange({ ...filterValues, [def.filterKey]: '' });
         }
         else if (def?.type === 'date') {
             applyColFilter(def.columnKey, '');
         }
         else {
-            applyColFilter(id, '');
+            // Column filter — multi-select stores string[], others store string
+            const colDef = availableColumns.find((c) => c.id === id);
+            if (colDef?.filterType === 'multi-select') {
+                applyColMultiFilter(id, []);
+            }
+            else {
+                applyColFilter(id, '');
+            }
         }
         onToggleFilter(id);
     };
@@ -333,6 +388,16 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
                 if (def?.type === 'searchableDropdown') {
                     return (jsx(SearchableSelectChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), placeholder: def.placeholder ?? 'Search…', chipStyle: chipStyle }, id));
                 }
+                if (def?.type === 'multiSelect') {
+                    // filterValues[key] stores comma-separated values: "Pending,Shipped"
+                    const selected = (filterValues[def.filterKey] ?? '')
+                        .split(',')
+                        .filter(Boolean);
+                    return (jsx(MultiSelectFilterChip, { label: def.label, selectedValues: selected, options: def.options, onApply: (vals) => onFilterValuesChange({
+                            ...filterValues,
+                            [def.filterKey]: vals.join(','),
+                        }), onRemove: () => removeFilter(id), chipStyle: chipStyle }, 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 }, id));
                 }
@@ -346,6 +411,9 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
                 if (col.filterType === 'select' || col.filterType === 'searchable-select') {
                     return (jsx(SearchableSelectChip, { label: col.label, value: getColValue(id), options: col.filterOptions ?? [], onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), chipStyle: chipStyle }, id));
                 }
+                if (col.filterType === 'multi-select') {
+                    return (jsx(MultiSelectFilterChip, { label: col.label, selectedValues: getColValues(id), options: col.filterOptions ?? [], onApply: (vals) => applyColMultiFilter(id, vals), onRemove: () => removeFilter(id), chipStyle: chipStyle }, id));
+                }
                 // Default: free-text input
                 return (jsx(TextFilterChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), placeholder: `Filter by ${col.label}`, chipStyle: chipStyle }, id));
             }), jsx(ManageFiltersButton, { serverFilterDefs: serverFilterDefs, visibleIds: visibleFilterIds, availableColumns: availableColumns, onToggle: onToggleFilter, maxVisible: maxVisibleFilters, chipStyle: chipStyle })] }));

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

@@ -19,6 +19,10 @@ export interface GridUiDensityOptions {
     filterChipMinHeight?: number;
     filterLabelFontSize?: number;
     toolbarIconFontSize?: number | string;
+    /** Header column title font size (px number). */
+    headerFontSize?: number;
+    /** Body cell data font size (px number). */
+    bodyFontSize?: number;
     /** MRT built-in toolbar control density (show/hide columns, density toggle, etc.). */
     mrtDensity?: 'comfortable' | 'compact' | 'spacious';
 }
@@ -102,6 +106,16 @@ export interface GenericPaginatedGridProps<TData extends object> {
      * Omit to allow text to use the full `headerMaxHeight` (recommended for tall headers).
      */
     headerMaxLines?: number;
+    /**
+     * Font size for header column titles (CSS length or px number).
+     * Default: `12px` (`11px` when `uiDensity="compact"`). Overridden by `uiDensityOptions.headerFontSize`.
+     */
+    headerFontSize?: string | number;
+    /**
+     * Font size for body/data cells (CSS length or px number).
+     * Default: `12px` (`11px` compact). Overridden by `uiDensityOptions.bodyFontSize`.
+     */
+    bodyFontSize?: string | number;
     /**
      * Maximum number of filter chips that can be visible at once.
      * Prevents the filter bar from wrapping to a second row on typical screens.
@@ -109,5 +123,5 @@ export interface GenericPaginatedGridProps<TData extends object> {
      */
     maxVisibleFilters?: number;
 }
-declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, pageSizeOptions, headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, maxVisibleFilters, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, pageSizeOptions, headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;

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

@@ -21,6 +21,8 @@ const UI_DENSITY_PRESETS = {
         filterChipMinHeight: 30,
         filterLabelFontSize: 12,
         toolbarIconFontSize: 'small',
+        headerFontSize: 12,
+        bodyFontSize: 12,
         mrtDensity: 'comfortable',
     },
     compact: {
@@ -32,6 +34,8 @@ const UI_DENSITY_PRESETS = {
         filterChipMinHeight: 26,
         filterLabelFontSize: 11,
         toolbarIconFontSize: 'inherit',
+        headerFontSize: 11,
+        bodyFontSize: 11,
         mrtDensity: 'compact',
     },
 };
@@ -44,7 +48,13 @@ const toCssSize = (value, fallback) => {
  * Header overrides applied via GlobalStyles (literal prop values).
  * MRT sets `backgroundColor: 'inherit'` and fixed density padding — must use !important.
  */
-const buildHeaderGlobalStyles = (headerMin, headerMax, headerBgColor) => {
+const buildBodyGlobalStyles = (bodyFont) => ({
+    '.tp-gpg-root .MuiTableBody-root .MuiTableCell-root': {
+        fontSize: `${bodyFont} !important`,
+        lineHeight: 1.35,
+    },
+});
+const buildHeaderGlobalStyles = (headerMin, headerMax, headerFont, headerBgColor) => {
     const headCell = {
         height: `${headerMax} !important`,
         minHeight: `${headerMin} !important`,
@@ -69,7 +79,10 @@ const buildHeaderGlobalStyles = (headerMin, headerMax, headerBgColor) => {
             alignItems: 'stretch !important',
             ...(headerBgColor ? { backgroundColor: headerBgColor } : {}),
         },
-        '.tp-gpg-root .MuiTableHead-root .MuiTableCell-head': headCell,
+        '.tp-gpg-root .MuiTableHead-root .MuiTableCell-head': {
+            ...headCell,
+            fontSize: `${headerFont} !important`,
+        },
         '.tp-gpg-root .MuiTableHead-root .Mui-TableHeadCell-Content': {
             height: '100% !important',
             width: '100% !important',
@@ -92,6 +105,7 @@ const buildHeaderGlobalStyles = (headerMin, headerMax, headerBgColor) => {
             overflowWrap: 'anywhere !important',
             width: '100% !important',
             maxWidth: '100% !important',
+            fontSize: `${headerFont} !important`,
             display: 'block !important',
             WebkitLineClamp: 'unset !important',
             WebkitBoxOrient: 'unset !important',
@@ -101,11 +115,12 @@ const buildHeaderGlobalStyles = (headerMin, headerMax, headerBgColor) => {
             wordBreak: 'break-word !important',
             overflowWrap: 'anywhere !important',
             width: '100% !important',
+            fontSize: `${headerFont} !important`,
         },
     };
 };
 /** Per-cell sx merged into MRT (via muiTableHeadCellProps). */
-const buildHeaderCellSx = (align, headerMin, headerMax, headerBgColor, headerMaxLines) => {
+const buildHeaderCellSx = (align, headerMin, headerMax, headerFont, headerBgColor, headerMaxLines) => {
     const textAlign = align;
     const flexJustify = align === 'right' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start';
     const wrapperClamp = headerMaxLines != null && headerMaxLines > 0
@@ -127,6 +142,7 @@ const buildHeaderCellSx = (align, headerMin, headerMax, headerBgColor, headerMax
         height: `${headerMax} !important`,
         minHeight: `${headerMin} !important`,
         maxHeight: `${headerMax} !important`,
+        fontSize: headerFont,
         boxSizing: 'border-box',
         borderRight: '1px solid rgba(224,224,224,1)',
         borderBottom: '2px solid rgba(0,0,0,0.15)',
@@ -153,6 +169,7 @@ const buildHeaderCellSx = (align, headerMin, headerMax, headerBgColor, headerMax
             wordBreak: 'break-word',
             overflowWrap: 'anywhere',
             lineHeight: 1.25,
+            fontSize: headerFont,
             width: '100%',
             textAlign,
             ...wrapperClamp,
@@ -160,6 +177,7 @@ const buildHeaderCellSx = (align, headerMin, headerMax, headerBgColor, headerMax
         '& .MuiTableSortLabel-root': {
             whiteSpace: 'normal',
             wordBreak: 'break-word',
+            fontSize: headerFont,
             width: '100%',
             margin: 0,
         },
@@ -203,11 +221,22 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
                         }, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onNext, disabled: !canNext, sx: { p: 0.5 }, children: jsx(ChevronRightIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Last page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onLast, disabled: !canNext, sx: { p: 0.5 }, children: jsx(LastPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) })] })] }));
 };
 // ─── GenericPaginatedGrid ─────────────────────────────────────────────────────
-function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity = 'default', uiDensityOptions, pageSizeOptions = [1000, 5000, 10000], headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, maxVisibleFilters = 4, }) {
+function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity = 'default', uiDensityOptions, pageSizeOptions = [1000, 5000, 10000], headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, }) {
     const densityTokens = useMemo(() => ({ ...UI_DENSITY_PRESETS[uiDensity], ...uiDensityOptions }), [uiDensity, uiDensityOptions]);
     const resolvedHeaderMinHeight = toCssSize(headerMinHeight, uiDensity === 'compact' ? '34px' : '40px');
     const resolvedHeaderMaxHeight = toCssSize(headerMaxHeight, uiDensity === 'compact' ? '56px' : '72px');
-    const headerGlobalStyleOverrides = useMemo(() => buildHeaderGlobalStyles(resolvedHeaderMinHeight, resolvedHeaderMaxHeight, headerBgColor), [resolvedHeaderMinHeight, resolvedHeaderMaxHeight, headerBgColor]);
+    const resolvedHeaderFontSize = toCssSize(headerFontSize ?? densityTokens.headerFontSize, uiDensity === 'compact' ? '11px' : '12px');
+    const resolvedBodyFontSize = toCssSize(bodyFontSize ?? densityTokens.bodyFontSize, uiDensity === 'compact' ? '11px' : '12px');
+    const tableStyleOverrides = useMemo(() => ({
+        ...buildHeaderGlobalStyles(resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor),
+        ...buildBodyGlobalStyles(resolvedBodyFontSize),
+    }), [
+        resolvedHeaderMinHeight,
+        resolvedHeaderMaxHeight,
+        resolvedHeaderFontSize,
+        resolvedBodyFontSize,
+        headerBgColor,
+    ]);
     const defaultVisible = defaultVisibleFilterIds
         ?? (serverFilterDefs.length > 0 ? [serverFilterDefs[0].id] : []);
     // ── State ──────────────────────────────────────────────────────────────────
@@ -286,6 +315,13 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                         ? row.getValue(columnId) === filterValue
                         : true;
                 }
+                else if (filterType === 'multi-select') {
+                    // Inclusion check: pass when the cell value is one of the selected values.
+                    // filterValue is string[] (stored directly in MRT columnFilters).
+                    mrtCol.filterFn = (row, columnId, filterValue) => !filterValue || filterValue.length === 0
+                        ? true
+                        : filterValue.includes(row.getValue(columnId) ?? '');
+                }
                 // 'text' and 'number' use MRT's built-in client-side filtering
             }
             return mrtCol;
@@ -474,16 +510,32 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             return {
                 align,
                 sx: [
-                    buildHeaderCellSx(align, resolvedHeaderMinHeight, resolvedHeaderMaxHeight, headerBgColor, headerMaxLines),
+                    buildHeaderCellSx(align, resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor, headerMaxLines),
                     ...(colSx ? [colSx] : []),
                 ],
             };
         },
-        muiTableBodyCellProps: {
-            sx: {
-                whiteSpace: 'nowrap',
-                borderRight: '1px solid rgba(224,224,224,1)',
-            },
+        muiTableBodyCellProps: ({ column }) => {
+            const colProps = column.columnDef.muiTableBodyCellProps;
+            let colSx;
+            if (typeof colProps === 'function') {
+                const resolved = colProps({ column });
+                colSx = resolved?.sx;
+            }
+            else if (colProps) {
+                colSx = colProps.sx;
+            }
+            return {
+                sx: [
+                    {
+                        whiteSpace: 'nowrap',
+                        fontSize: resolvedBodyFontSize,
+                        lineHeight: 1.35,
+                        borderRight: '1px solid rgba(224,224,224,1)',
+                    },
+                    ...(colSx ? [colSx] : []),
+                ],
+            };
         },
         muiToolbarAlertBannerProps: isError
             ? { color: 'error', children: 'Failed to load data. Please try again.' }
@@ -505,7 +557,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                     '.tp-gpg-root button[aria-label="Move"]': { display: 'none !important' },
                     '.tp-gpg-root [data-column-id="mrt-row-spacer"]': { display: 'none !important' },
                     '.tp-gpg-root .Mui-TableHeadCell-ColumnSpacer': { display: 'none !important' },
-                    ...headerGlobalStyleOverrides,
+                    ...tableStyleOverrides,
                 } }), isLoading && jsx(OverlayLoader, { message: "Loading data\u2026" }), !isLoading && isFetching && jsx(OverlayLoader, { message: "Updating data\u2026" }), jsx(Box, { sx: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: jsx(MaterialReactTable, { table: table }) })] }));
 }
 

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

@@ -31,3 +31,24 @@ export declare const productColumns: TPColumnDef<ProductRow>[];
 export declare const productFilterDefs: ServerFilterDef[];
 export declare const productDefaultFilters: Record<string, string>;
 export declare function fetchProductPage(filters: Record<string, string>, pageIndex: number, pageSize?: number): Promise<PagedResult<ProductRow>>;
+export interface OrderRow {
+    orderId: string;
+    customer: string;
+    category: string;
+    status: string;
+    priority: string;
+    amount: number;
+    qty: number;
+    orderDate: string;
+}
+export declare const orderColumns: TPColumnDef<OrderRow>[];
+/**
+ * Server filter definitions for the Orders demo grid.
+ *
+ * `multiSelect` chips for Status and Category send comma-separated values
+ * in `filterValues` (e.g. `status: "Pending,Shipped"`).
+ * `fetchOrderPage` splits on `","` to apply the server-side filter.
+ */
+export declare const orderFilterDefs: ServerFilterDef[];
+export declare const orderDefaultFilters: Record<string, string>;
+export declare function fetchOrderPage(filters: Record<string, string>, pageIndex: number, pageSize?: number): Promise<PagedResult<OrderRow>>;

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

@@ -2,18 +2,19 @@ import type { MRT_ColumnDef } from 'material-react-table';
 /**
  * Filter chip variant shown in Manage Filters → Column Filters.
  *
- *  | Value               | Chip rendered             |
- *  |---------------------|---------------------------|
- *  | `'text'`            | Free-text input (default) |
- *  | `'date'`            | Calendar date picker      |
- *  | `'select'`          | Searchable option list    |
- *  | `'searchable-select'` | Searchable option list  |
- *  | `'number'`          | Numeric input             |
+ *  | Value               | Chip rendered                                        |
+ *  |---------------------|------------------------------------------------------|
+ *  | `'text'`            | Free-text input (default)                            |
+ *  | `'date'`            | Calendar date picker                                 |
+ *  | `'select'`          | Searchable single-select option list                 |
+ *  | `'searchable-select'` | Searchable single-select option list               |
+ *  | `'number'`          | Numeric input                                        |
+ *  | `'multi-select'`    | Checkbox list — pick many values, filters client-side|
  *
  * Set `enableColumnFilter: false` to hide the column from Manage Filters
  * entirely (e.g. for computed or numeric columns that don't need filtering).
  */
-export type ColumnFilterType = 'text' | 'date' | 'select' | 'searchable-select' | 'number';
+export type ColumnFilterType = 'text' | 'date' | 'select' | 'searchable-select' | 'number' | 'multi-select';
 /**
  * Drop-in replacement for `MRT_ColumnDef` that adds top-level
  * `filterType` and `options` so you never have to write `meta` blocks
@@ -27,7 +28,7 @@ export type ColumnFilterType = 'text' | 'date' | 'select' | 'searchable-select'
  *   // Date picker chip
  *   { accessorKey: 'invoiceDate', header: 'Invoice Date', filterType: 'date' },
  *
- *   // Searchable option list chip
+ *   // Searchable single-select chip
  *   {
  *     accessorKey: 'status',
  *     header: 'Status',
@@ -38,6 +39,18 @@ export type ColumnFilterType = 'text' | 'date' | 'select' | 'searchable-select'
  *     ],
  *   },
  *
+ *   // Multi-select checkbox chip — pick many values, client-side
+ *   {
+ *     accessorKey: 'priority',
+ *     header: 'Priority',
+ *     filterType: 'multi-select',
+ *     options: [
+ *       { label: 'Low',    value: 'Low'    },
+ *       { label: 'Medium', value: 'Medium' },
+ *       { label: 'High',   value: 'High'   },
+ *     ],
+ *   },
+ *
  *   // Hidden from Manage Filters (numeric column)
  *   { accessorKey: 'qty', header: 'Qty', enableColumnFilter: false },
  * ];

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

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

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

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

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

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

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

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

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

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

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

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

package/package.json

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