tp-react-elements 1.3.3 → 1.3.4

package/dist/_virtual/index.esm10.js

@@ -1,3 +1,3 @@
-var propTypes = {exports: {}};
+var accessibility = {};
 
-export { propTypes as __module };
+export { accessibility as __exports };

package/dist/_virtual/index.esm12.js

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

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

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

package/dist/_virtual/index.esm6.js

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

package/dist/_virtual/index.esm7.js

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

package/dist/_virtual/index.esm9.js

@@ -1,3 +1,3 @@
-var accessibility = {};
+var propTypes = {exports: {}};
 
-export { accessibility as __exports };
+export { propTypes as __module };

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

@@ -1,13 +1,5 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { lazy, Suspense } from 'react';
-import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
-import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
-import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
-import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
-import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
-import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
-import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
-import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
 import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
 import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
@@ -18,6 +10,14 @@ import DateRangePickerComponent from '../DateRangePicker/DateRangePicker.esm.js'
 import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js';
 import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
 import DatetimepickerWrapper from '../FormComponents/DatePicker/DatetimepickerWrapper.esm.js';
+import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
+import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
+import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
+import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
+import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
+import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
+import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
 
 // Lazy-loaded heavy components
 // const RichTextEditorWrapper = lazy(() =>

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

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

@@ -61,11 +61,11 @@ interface AvailableColumn {
     label: string;
     /**
      * Filter chip variant used in the "Column Filters" section of Manage Filters.
-     * Mirrors the `meta.filterType` declared on the column definition.
+     * Sourced from the `filterType` prop on the column's `TPColumnDef`.
      * Defaults to `'text'` when omitted.
      */
-    filterType?: 'text' | 'date' | 'searchableDropdown';
-    /** Options for the `'searchableDropdown'` chip variant. */
+    filterType?: 'text' | 'date' | 'select' | 'searchable-select' | 'number';
+    /** Options for `'select'` / `'searchable-select'` chip variants. */
     filterOptions?: {
         label: string;
         value: string;

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

@@ -22,6 +22,7 @@ import SearchIcon from '@mui/icons-material/Search';
 // that DatepickerWrapperV2 passes to onChangeFn
 dayjs.extend(customParseFormat);
 // ─── Type pill metadata ───────────────────────────────────────────────────────
+// Server-side filter pills (used in SERVER FILTERS section of Manage Filters)
 const TYPE_PILL = {
     dateRange: { label: 'Range', color: '#1565c0', bg: '#e3f2fd' },
     date: { label: 'Date', color: '#00695c', bg: '#e0f2f1' },
@@ -29,6 +30,14 @@ const TYPE_PILL = {
     dropdown: { label: 'Select', color: '#6a1b9a', bg: '#f3e5f5' },
     searchableDropdown: { label: 'Search', color: '#bf360c', bg: '#fbe9e7' },
 };
+// Column filter type pills (used in COLUMN FILTERS section of Manage Filters)
+const COLUMN_TYPE_PILL = {
+    text: { label: 'Text', color: '#2e7d32', bg: '#e8f5e9' },
+    date: { label: 'Date', color: '#00695c', bg: '#e0f2f1' },
+    select: { label: 'Select', color: '#bf360c', bg: '#fbe9e7' },
+    'searchable-select': { label: 'Search', color: '#bf360c', bg: '#fbe9e7' },
+    number: { label: 'Number', color: '#e65100', bg: '#fff3e0' },
+};
 // ─── Chip shared style ────────────────────────────────────────────────────────
 const chipSx = (active) => ({
     borderRadius: 5,
@@ -244,11 +253,8 @@ const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, o
                                     }) })] })), availableColumns.length > 0 && (jsxs(Fragment, { children: [jsx(Divider, { sx: { my: 1 } }), jsx(Typography, { variant: "caption", fontWeight: 700, color: "text.disabled", sx: { px: 2, pb: 0.5, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }, children: "Column Filters" }), jsx(List, { dense: true, disablePadding: true, sx: { maxHeight: 260, overflowY: 'auto' }, children: availableColumns.map((col) => {
                                         const selected = visibleIds.includes(col.id);
                                         // Pick the type pill based on the column's declared filter type
-                                        const pill = col.filterType === 'date'
-                                            ? TYPE_PILL.date
-                                            : col.filterType === 'searchableDropdown'
-                                                ? TYPE_PILL.searchableDropdown
-                                                : TYPE_PILL.text;
+                                        const pill = COLUMN_TYPE_PILL[col.filterType ?? 'text'] ??
+                                            COLUMN_TYPE_PILL.text;
                                         return (jsxs(ListItemButton, { onClick: () => onToggle(col.id), sx: { px: 2, py: 0.4 }, children: [jsx(Box, { component: "span", sx: {
                                                         mr: 1.25, flexShrink: 0,
                                                         fontSize: 10, fontWeight: 700,
@@ -313,7 +319,7 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
                 if (col.filterType === 'date') {
                     return (jsx(DatePickerChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id) }, id));
                 }
-                if (col.filterType === 'searchableDropdown') {
+                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) }, id));
                 }
                 // Default: free-text input

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

@@ -1,14 +1,21 @@
-import { type MRT_ColumnDef } from 'material-react-table';
+import type { TPColumnDef } from './types';
 import { type ServerFilterDef } from './DynamicFilterBar';
 export type { ServerFilterDef };
+export type { TPColumnDef } from './types';
 /** Shape that fetchPage must return. */
 export interface PagedResult<TData> {
     data: TData[];
     totalRecords: number;
 }
 export interface GenericPaginatedGridProps<TData extends object> {
-    /** MRT column definitions typed to your data shape. */
-    columns: MRT_ColumnDef<TData>[];
+    /**
+     * Column definitions. Use `TPColumnDef<TData>` (a superset of `MRT_ColumnDef`)
+     * to get top-level `filterType` and `options` support with no `meta` boilerplate.
+     *
+     * The grid automatically injects the right `filterFn` for each `filterType`,
+     * and wires up the correct chip in Manage Filters → Column Filters.
+     */
+    columns: TPColumnDef<TData>[];
     /**
      * Async function called on every page/filter change.
      * Receives the current flat filter map and the 0-based page index.

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

@@ -66,6 +66,34 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     });
     const rows = data?.data ?? [];
     const totalRecords = data?.totalRecords ?? 0;
+    // ── Strip custom props + auto-inject filterFn before passing to MRT ──────────
+    //
+    // `TPColumnDef` extends `MRT_ColumnDef` with `filterType` and `options`.
+    // MRT doesn't know these props, so we strip them here. We also inject the
+    // appropriate `filterFn` automatically so callers never have to write one.
+    const processedColumns = useMemo(() => {
+        return columns.map((col) => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { filterType, options, ...mrtCol } = col;
+            // Auto-inject filterFn only when the user hasn't already supplied one.
+            if (!mrtCol.filterFn && filterType) {
+                if (filterType === 'date') {
+                    // ISO date strings: "2026-05-05T00:00:00" → startsWith "2026-05-05"
+                    mrtCol.filterFn = (row, columnId, filterValue) => filterValue
+                        ? (row.getValue(columnId) ?? '').startsWith(filterValue)
+                        : true;
+                }
+                else if (filterType === 'select' || filterType === 'searchable-select') {
+                    // Exact-value match (avoids substring false positives)
+                    mrtCol.filterFn = (row, columnId, filterValue) => filterValue
+                        ? row.getValue(columnId) === filterValue
+                        : true;
+                }
+                // 'text' and 'number' use MRT's built-in client-side filtering
+            }
+            return mrtCol;
+        });
+    }, [columns]);
     // ── Derive column list for filter chip picker ──────────────────────────────
     //
     // A column is excluded from the "Column Filters" section of Manage Filters
@@ -73,7 +101,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     //   1. It has no accessorKey (computed / display columns).
     //   2. Its accessorKey is already handled by a server-side 'date' filter def.
     //   3. Its MRT `enableColumnFilter` prop is explicitly set to `false` —
-    //      this is the standard MRT opt-out flag for column-level filters.
+    //      use this for numeric/computed columns that don't need a filter chip.
     const availableColumns = useMemo(() => {
         const serverManagedColKeys = new Set(serverFilterDefs
             .filter((d) => d.type === 'date')
@@ -82,16 +110,14 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             .filter((c) => 'accessorKey' in c &&
             c.accessorKey &&
             !serverManagedColKeys.has(c.accessorKey) &&
-            // Honour the standard MRT opt-out flag: columns with
-            // enableColumnFilter: false should not appear in Manage Filters.
             c.enableColumnFilter !== false)
             .map((c) => ({
             id: c.accessorKey,
             label: c.header,
-            // Forward column-level filter type hints so DynamicFilterBar can render
-            // the right chip (text / date / searchableDropdown) for each column.
-            filterType: c.meta?.filterType,
-            filterOptions: c.meta?.filterOptions,
+            // Pass filterType directly from TPColumnDef (no meta unwrapping needed)
+            filterType: c.filterType,
+            // Map TPColumnDef.options → AvailableColumn.filterOptions
+            filterOptions: c.options,
         }));
     }, [columns, serverFilterDefs]);
     // ── Handlers ───────────────────────────────────────────────────────────────
@@ -127,7 +153,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         columnFilters.some((f) => f.value);
     // ── Table instance ─────────────────────────────────────────────────────────
     const table = useMaterialReactTable({
-        columns,
+        columns: processedColumns,
         data: rows,
         manualPagination: true,
         rowCount: totalRecords,

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

@@ -1,22 +1,3 @@
-import type { MRT_ColumnDef } from 'material-react-table';
+import type { TPColumnDef } from './types';
 import type { InvoiceDetail } from './types';
-import type { RowData } from '@tanstack/table-core';
-declare module '@tanstack/table-core' {
-    interface ColumnMeta<TData extends RowData, TValue> {
-        /**
-         * Which chip variant to render in the "Column Filters" section of
-         * Manage Filters.  Defaults to `'text'` when omitted.
-         *
-         *   'text'               → TextFilterChip   (free-text input)
-         *   'date'               → DatePickerChip   (MUI X calendar)
-         *   'searchableDropdown' → SearchableSelectChip (search + options list)
-         */
-        filterType?: 'text' | 'date' | 'searchableDropdown';
-        /** Option pairs for the `'searchableDropdown'` filter chip. */
-        filterOptions?: {
-            label: string;
-            value: string;
-        }[];
-    }
-}
-export declare const invoiceColumns: MRT_ColumnDef<InvoiceDetail>[];
+export declare const invoiceColumns: TPColumnDef<InvoiceDetail>[];

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

@@ -1,3 +1,64 @@
+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             |
+ *
+ * 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';
+/**
+ * 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.
+ *
+ * @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
+ *   {
+ *     accessorKey: 'status',
+ *     header: 'Status',
+ *     filterType: 'searchable-select',
+ *     options: [
+ *       { label: 'Active',   value: 'A' },
+ *       { label: 'Inactive', value: 'I' },
+ *     ],
+ *   },
+ *
+ *   // Hidden from Manage Filters (numeric column)
+ *   { accessorKey: 'qty', header: 'Qty', enableColumnFilter: false },
+ * ];
+ * ```
+ */
+export type TPColumnDef<TData extends object = object> = MRT_ColumnDef<TData> & {
+    /**
+     * 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).
+     */
+    options?: {
+        label: string;
+        value: string | number;
+        disable?: boolean;
+    }[];
+};
 export interface InvoiceDetail {
     Data_from: string;
     FINYEAR: string;

package/dist/node_modules/prop-types/index.esm.js

@@ -1,4 +1,4 @@
-import { __module as propTypes } from '../../_virtual/index.esm10.js';
+import { __module as propTypes } from '../../_virtual/index.esm9.js';
 import { __require as requireReactIs } from './node_modules/react-is/index.esm.js';
 import { __require as requireFactoryWithTypeCheckers } from './factoryWithTypeCheckers.esm.js';
 import { __require as requireFactoryWithThrowingShims } from './factoryWithThrowingShims.esm.js';

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

@@ -1,4 +1,4 @@
-import { __exports as accessibility } from '../../../../_virtual/index.esm9.js';
+import { __exports as accessibility } from '../../../../_virtual/index.esm10.js';
 import { __require as requirePropTypes } from '../../../prop-types/index.esm.js';
 
 var hasRequiredAccessibility;

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.esm7.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.esm12.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm13.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/DateRangePicker/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm7.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm6.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.esm6.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.esm13.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm12.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.3",
+  "version": "1.3.4",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",