tp-react-elements 1.3.13 → 1.3.15

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm7.js

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

package/dist/components/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/GenericPaginatedGrid.d.ts

@@ -1,4 +1,5 @@
 import type { TPColumnDef } from './types';
+import { type TableCellProps } from '@mui/material';
 import { type ServerFilterDef } from './DynamicFilterBar';
 export type { ServerFilterDef };
 export type { TPColumnDef } from './types';
@@ -122,6 +123,42 @@ export interface GenericPaginatedGridProps<TData extends object> {
      * Default: 4.
      */
     maxVisibleFilters?: number;
+    /**
+     * Grid-level body cell props — applied to **every** data cell and merged with
+     * any column-level `muiTableBodyCellProps` (column takes precedence for non-sx
+     * props; `sx` objects are combined as a MUI sx array so neither is lost).
+     *
+     * Use this to set `title`, `className`, padding, etc. once at the grid level
+     * instead of repeating the same props on every column:
+     *
+     * ```tsx
+     * muiTableBodyCellProps={({ cell }) => ({
+     *   title: cell.getValue(),   // hover tooltip on every cell
+     *   className: 'body_cell',
+     * })}
+     * ```
+     *
+     * Individual columns can still add layout-only overrides (e.g. `align: 'right'`
+     * for numeric columns) without losing the global `title`/`className`.
+     */
+    muiTableBodyCellProps?: TableCellProps | ((params: {
+        cell: any;
+        column: any;
+        row: any;
+        table: any;
+    }) => TableCellProps);
+    /**
+     * Grid-level head cell props — applied to **every** header cell and merged
+     * with any column-level `muiTableHeadCellProps` (column takes precedence).
+     *
+     * ```tsx
+     * muiTableHeadCellProps={{ className: 'Header_cell' }}
+     * ```
+     */
+    muiTableHeadCellProps?: TableCellProps | ((params: {
+        column: any;
+        table: any;
+    }) => TableCellProps);
 }
-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;
+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, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;

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

@@ -221,7 +221,7 @@ 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, headerFontSize, bodyFontSize, 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, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, }) {
     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');
@@ -494,45 +494,55 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                 ...(headerBgColor ? { backgroundColor: headerBgColor } : {}),
             },
         },
-        muiTableHeadCellProps: ({ column }) => {
-            const colProps = column.columnDef.muiTableHeadCellProps;
-            let align = 'left';
-            let colSx;
-            if (typeof colProps === 'function') {
-                const resolved = colProps({ column });
-                align = resolved?.align ?? 'left';
-                colSx = resolved?.sx;
-            }
-            else if (colProps) {
-                align = colProps.align ?? 'left';
-                colSx = colProps.sx;
-            }
+        muiTableHeadCellProps: (params) => {
+            const { column, table } = params;
+            // ── Resolve column-level props ────────────────────────────────────────
+            const colDef = column.columnDef.muiTableHeadCellProps;
+            const colResolved = typeof colDef === 'function' ? (colDef({ column, table }) ?? {}) : colDef ?? {};
+            // ── Resolve grid-level props ──────────────────────────────────────────
+            const gridResolved = typeof gridHeadCellProps === 'function'
+                ? (gridHeadCellProps({ column, table }) ?? {})
+                : gridHeadCellProps ?? {};
+            // Column align overrides grid align; default 'left'
+            const align = (colResolved.align ?? gridResolved.align ?? 'left');
+            const { sx: gridSx, align: _ga, ...gridRest } = gridResolved;
+            const { sx: colSx, align: _ca, ...colRest } = colResolved;
             return {
+                ...gridRest, // grid-level props (className, etc.)
+                ...colRest, // column-level overrides
                 align,
                 sx: [
                     buildHeaderCellSx(align, resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor, headerMaxLines),
+                    ...(gridSx ? [gridSx] : []),
                     ...(colSx ? [colSx] : []),
                 ],
             };
         },
-        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;
-            }
+        muiTableBodyCellProps: (params) => {
+            const { cell, column, row, table } = params;
+            // ── Resolve column-level props ────────────────────────────────────────
+            const colDef = column.columnDef.muiTableBodyCellProps;
+            const colResolved = typeof colDef === 'function' ? (colDef({ cell, column, row, table }) ?? {}) : colDef ?? {};
+            // ── Resolve grid-level props ──────────────────────────────────────────
+            const gridResolved = typeof gridBodyCellProps === 'function'
+                ? (gridBodyCellProps({ cell, column, row, table }) ?? {})
+                : gridBodyCellProps ?? {};
+            const { sx: gridSx, ...gridRest } = gridResolved;
+            const { sx: colSx, ...colRest } = colResolved;
             return {
+                ...gridRest, // grid-level props (title, className, etc.)
+                ...colRest, // column-level overrides (align, etc.)
                 sx: [
+                    // 1. base styles — always applied
                     {
                         whiteSpace: 'nowrap',
                         fontSize: resolvedBodyFontSize,
                         lineHeight: 1.35,
                         borderRight: '1px solid rgba(224,224,224,1)',
                     },
+                    // 2. grid-level sx additions
+                    ...(gridSx ? [gridSx] : []),
+                    // 3. column-level sx overrides (minWidth, maxWidth, textAlign, etc.)
                     ...(colSx ? [colSx] : []),
                 ],
             };

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

@@ -16,55 +16,39 @@ import type { MRT_ColumnDef } from 'material-react-table';
  */
 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 single-select 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' }),
  *   },
- *
- *   // 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 },
  * ];
+ *
+ * // 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.esm5.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/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 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.esm4.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/InputRangeField/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm13.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm12.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.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.esm12.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.13",
+  "version": "1.3.15",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",