tp-react-elements 1.3.12 → 1.3.14

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

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

package/dist/_virtual/index.esm7.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DateRange = {};
 
-export { Calendar 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.esm.js

@@ -315,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;

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,56 +2,53 @@ 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
- * or custom `filterFn` — the grid handles both automatically.
+ * `TValue` (second generic) is passed straight through to
+ * `MRT_ColumnDef<TData, TValue>` and **defaults to `any`** so that
+ * `cell.getValue()` returns `any` inside `Cell`, `muiTableBodyCellProps`,
+ * and all other MRT callbacks — exactly as you'd expect from a plain
+ * `MRT_ColumnDef` column.  Set `TValue` explicitly only when you want
+ * strict return-type checking on `cell.getValue()`.
  *
- * @example
  * ```ts
- * import type { TPColumnDef } from './types';
- *
- * const columns: TPColumnDef<MyRow>[] = [
- *   // Date picker chip
- *   { accessorKey: 'invoiceDate', header: 'Invoice Date', filterType: 'date' },
- *
- *   // Searchable option list chip
+ * // Default — cell.getValue() is `any` (no cast needed)
+ * const cols: TPColumnDef<MyRow>[] = [
  *   {
- *     accessorKey: 'status',
- *     header: 'Status',
- *     filterType: 'searchable-select',
- *     options: [
- *       { label: 'Active',   value: 'A' },
- *       { label: 'Inactive', value: 'I' },
- *     ],
+ *     accessorKey: 'name',
+ *     muiTableBodyCellProps: ({ cell }) => ({ title: cell.getValue(), className: 'body_cell' }),
  *   },
- *
- *   // Hidden from Manage Filters (numeric column)
- *   { accessorKey: 'qty', header: 'Qty', enableColumnFilter: false },
  * ];
+ *
+ * // Strict — cell.getValue() is `number`
+ * const strictCol: TPColumnDef<MyRow, number> = {
+ *   accessorKey: 'qty',
+ *   Cell: ({ cell }) => <b>{cell.getValue().toFixed(2)}</b>,
+ * };
  * ```
  */
-export type TPColumnDef<TData extends object = object> = MRT_ColumnDef<TData> & {
+export type TPColumnDef<TData extends object = object, TValue = any> = MRT_ColumnDef<TData, TValue> & {
     /**
      * Which filter chip to show in Manage Filters → Column Filters.
      * Omit (or set to `'text'`) for a plain text-input chip.
      */
     filterType?: ColumnFilterType;
     /**
-     * Option pairs for `'select'` and `'searchable-select'` filter types.
-     * Each entry needs `label` (display text) and `value` (filter value sent).
+     * Option pairs for `'select'`, `'searchable-select'`, and `'multi-select'`
+     * filter types. Each entry needs `label` (display text) and `value` (filter
+     * value sent to the server / used for client-side matching).
      */
     options?: {
         label: string;

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

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

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

package/package.json

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