tp-react-elements 3.0.3 → 3.0.5

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

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

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.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

@@ -2,6 +2,12 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import require$$0__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';
@@ -12,12 +18,6 @@ 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 FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.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,3 +1,8 @@
+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';
@@ -6,20 +11,32 @@ export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
 export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
 export { default as SearchableSelect } from './Select/SearchableSelect.esm.js';
 export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
 export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
+export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@mui/material';
+import '@mui/icons-material/CalendarToday';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import 'react-hook-form';
 export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
-export { default as 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';
+import 'dayjs';
+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';
-export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
-export { default as FormTextField } from './FormTextField/FormTextField.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 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,5 +1,5 @@
 import type { TPColumnDef } from './types';
-import { type TableCellProps } from '@mui/material';
+import { type SxProps, type TableCellProps, type Theme } from '@mui/material';
 import { type ServerFilterDef } from './DynamicFilterBar';
 export type { ServerFilterDef };
 export type { TPColumnDef } from './types';
@@ -217,6 +217,73 @@ export interface GenericPaginatedGridProps<TData extends object> {
         column: any;
         table: any;
     }) => TableCellProps);
+    /**
+     * Per-row conditional styling — e.g. highlighting a row's background based
+     * on a status field. Called once per row with that row's **original data**
+     * (not the MRT `row` wrapper), so the condition logic reads naturally:
+     *
+     * ```tsx
+     * const STATUS_COLORS: Record<string, string> = {
+     *   Pending: '#ffe0b2',      // orange
+     *   Acknowledged: '#fff9c4', // yellow
+     *   Completed: '#bbdefb',    // blue
+     *   Released: '#c8e6c9',     // green
+     *   Overdue: '#f8bbd0',      // pink
+     * };
+     *
+     * <GenericPaginatedGrid
+     *   getRowSx={(row) => ({ backgroundColor: STATUS_COLORS[row.status] })}
+     *   // ...
+     * />
+     * ```
+     *
+     * Return `undefined` (or omit a case) for rows that shouldn't be
+     * highlighted. Combines safely with row hover/selection styling — this
+     * only sets the base background, `sx` arrays layer on top.
+     *
+     * The same `backgroundColor` (a plain hex string, as in the example above)
+     * is also applied as a cell fill in the **Excel export**, so downloaded
+     * rows carry the same highlight seen on screen. A `color` (text colour) in
+     * the same object is likewise carried over as the exported cell's font
+     * colour — note that `color` only affects the Excel export; on screen,
+     * MUI's table cells already set their own text colour per cell, so a
+     * row-level `color` here has no visible effect in the grid itself (only
+     * `backgroundColor` is visible on screen). A theme-function `sx` (e.g.
+     * `(theme) => ({...})`) can't be resolved for the export without a live
+     * theme, so only plain `{ backgroundColor: '#RRGGBB', color: '#RRGGBB' }`
+     * objects (or arrays of them) are reflected there.
+     */
+    getRowSx?: (row: TData) => SxProps<Theme> | undefined;
+    /**
+     * Per-column conditional header styling — e.g. drawing attention to a
+     * specific column's header with its own background/text colour. Called
+     * once per header cell with that column's `id` (its `accessorKey`) and
+     * resolved `header` label:
+     *
+     * ```tsx
+     * <GenericPaginatedGrid
+     *   getHeaderSx={(col) =>
+     *     col.id === 'priority' ? { backgroundColor: '#c62828', color: '#ffffff' } : undefined
+     *   }
+     *   // ...
+     * />
+     * ```
+     *
+     * Return `undefined` (or omit a case) for columns whose header should use
+     * the grid's normal `headerBgColor` styling. Merged on top of
+     * `headerBgColor`/column-level `muiTableHeadCellProps`, so it only needs to
+     * describe the override, not the whole header cell style.
+     *
+     * The same `backgroundColor`/`color` (plain hex strings) are also applied
+     * to that column's header cell in the **Excel export**, overriding
+     * `exportHeaderBgColor`/`exportHeaderTextColor` for just that column. Same
+     * theme-function limitation as `getRowSx` — only plain colour objects are
+     * reflected in the export.
+     */
+    getHeaderSx?: (column: {
+        id: string;
+        header: string;
+    }) => SxProps<Theme> | undefined;
     /**
      * Optional render function for expanded row detail panels.
      * When provided, enables row expansion and renders custom content for each expanded row.
@@ -239,5 +306,5 @@ export interface GenericPaginatedGridProps<TData extends object> {
      */
     enableExpanding?: boolean;
 }
-declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, gridId, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive, pageSizeOptions, showGlobalSearchByDefault, showDensityToggle, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, gridId, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive, pageSizeOptions, showGlobalSearchByDefault, showDensityToggle, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, getRowSx, getHeaderSx, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;

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

@@ -50,6 +50,34 @@ const toCssSize = (value, fallback) => {
         return fallback;
     return typeof value === 'number' ? `${value}px` : value;
 };
+/**
+ * Pulls `backgroundColor`/`bgcolor` and `color` out of an `SxProps` value
+ * returned by `getRowSx`/`getHeaderSx`, for reuse in the Excel export
+ * (matching the on-screen highlight). Only plain objects/arrays of plain
+ * objects are supported — a theme-function `sx` (e.g. `(theme) => ({...})`)
+ * can't be resolved without a live theme, so it's skipped (export proceeds
+ * with no override for that cell, exactly as if the callback had returned
+ * `undefined`).
+ */
+const extractSxColors = (sx) => {
+    const items = Array.isArray(sx) ? sx : [sx];
+    let background;
+    let text;
+    for (const item of items) {
+        if (item && typeof item === 'object') {
+            const obj = item;
+            if (typeof obj.backgroundColor === 'string')
+                background = obj.backgroundColor;
+            else if (typeof obj.bgcolor === 'string')
+                background = obj.bgcolor;
+            if (typeof obj.color === 'string')
+                text = obj.color;
+        }
+    }
+    return { background, text };
+};
+/** Converts a `#RRGGBB` hex string to the 8-char ARGB xlsx-js-style expects. Returns `undefined` for anything else. */
+const hexToArgb = (hex) => hex?.startsWith('#') ? 'FF' + hex.slice(1).toUpperCase().padEnd(6, '0') : undefined;
 /**
  * Header overrides applied via GlobalStyles (literal prop values).
  * MRT sets `backgroundColor: 'inherit'` and fixed density padding — must use !important.
@@ -141,7 +169,7 @@ const buildHeaderGlobalStyles = (headerMin, headerMax, headerFont, headerBgColor
     };
 };
 /** Per-cell sx merged into MRT (via muiTableHeadCellProps). */
-const buildHeaderCellSx = (align, headerMin, headerMax, headerFont, headerBgColor, headerMaxLines) => {
+const buildHeaderCellSx = (align, headerMin, headerMax, headerFont, headerBgColor, headerMaxLines, headerTextColor) => {
     const textAlign = align;
     const flexJustify = align === 'right' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start';
     const wrapperClamp = headerMaxLines != null && headerMaxLines > 0
@@ -160,6 +188,7 @@ const buildHeaderCellSx = (align, headerMin, headerMax, headerFont, headerBgColo
         ...(headerBgColor
             ? { backgroundColor: `${headerBgColor} !important`, backgroundImage: 'none' }
             : {}),
+        ...(headerTextColor ? { color: `${headerTextColor} !important` } : {}),
         height: `${headerMax} !important`,
         minHeight: `${headerMin} !important`,
         maxHeight: `${headerMax} !important`,
@@ -273,7 +302,7 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
                         }, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_next_page_icon`, 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, { id: `${gridId}_last_page_icon`, 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', gridId, tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive = false, pageSizeOptions = [1000, 5000, 10000], showGlobalSearchByDefault = false, showDensityToggle = false, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
+function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', gridId, tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive = false, pageSizeOptions = [1000, 5000, 10000], showGlobalSearchByDefault = false, showDensityToggle = false, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, getRowSx, getHeaderSx, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
     // ── Responsive tier detection ────────────────────────────────────────────────
     // Three tiers (desktop / tablet / mobile) drive auto density, a progressively
     // lower filter-chip cap, toolbar wrapping, and a stacked pagination footer —
@@ -559,20 +588,24 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             ? tableRef.current.getFilteredRowModel().rows.map((r) => r.original)
             : rows;
         const dataCols = columns.filter((c) => 'accessorKey' in c && c.accessorKey);
-        // xlsx-js-style requires 8-char ARGB (AA + RRGGBB). Prepend full-opacity "FF".
-        const toArgb = (hex, fallback = 'FF1565C0') => hex?.startsWith('#') ? 'FF' + hex.slice(1).toUpperCase().padEnd(6, '0') : fallback;
-        const headerArgb = toArgb(exportHeaderBgColor ?? headerBgColor);
-        const textArgb = toArgb(exportHeaderTextColor, 'FFFFFFFF');
+        const headerArgb = hexToArgb(exportHeaderBgColor ?? headerBgColor) ?? 'FF1565C0';
+        const textArgb = hexToArgb(exportHeaderTextColor) ?? 'FFFFFFFF';
         const headerRow = dataCols.map((c) => c.header ?? '');
         const dataRows = exportRows.map((row) => dataCols.map((c) => String(row[c.accessorKey] ?? '')));
         const ws = XLSX.utils.aoa_to_sheet([headerRow, ...dataRows]);
-        // Style header row
-        dataCols.forEach((_, colIdx) => {
+        // Style header row — `getHeaderSx` (per-column) overrides the grid-wide
+        // headerArgb/textArgb defaults for just that column, when it returns one.
+        dataCols.forEach((c, colIdx) => {
             const cellRef = XLSX.utils.encode_cell({ r: 0, c: colIdx });
             if (ws[cellRef]) {
+                const condSx = getHeaderSx?.({
+                    id: c.accessorKey,
+                    header: c.header ?? '',
+                });
+                const { background: condBg, text: condText } = extractSxColors(condSx);
                 ws[cellRef].s = {
-                    fill: { patternType: 'solid', fgColor: { rgb: headerArgb } },
-                    font: { bold: true, color: { rgb: textArgb }, sz: 10 },
+                    fill: { patternType: 'solid', fgColor: { rgb: hexToArgb(condBg) ?? headerArgb } },
+                    font: { bold: true, color: { rgb: hexToArgb(condText) ?? textArgb }, sz: 10 },
                     alignment: { horizontal: 'center', vertical: 'center', wrapText: true },
                     border: {
                         bottom: { style: 'thin', color: { rgb: 'FFCCCCCC' } },
@@ -581,6 +614,29 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                 };
             }
         });
+        // Apply each row's on-screen `getRowSx` highlight to the exported cells too.
+        // Unlike the header (which always has a colour), a row may resolve to no
+        // colour at all — skip whichever of background/text isn't set, rather
+        // than falling back to anything.
+        if (getRowSx) {
+            exportRows.forEach((row, rowIdx) => {
+                const { background: bgColor, text: textColor } = extractSxColors(getRowSx(row));
+                const bgArgb = hexToArgb(bgColor);
+                const fontArgb = hexToArgb(textColor);
+                if (!bgArgb && !fontArgb)
+                    return;
+                dataCols.forEach((_, colIdx) => {
+                    const cellRef = XLSX.utils.encode_cell({ r: rowIdx + 1, c: colIdx }); // +1: row 0 is the header
+                    if (ws[cellRef]) {
+                        ws[cellRef].s = {
+                            ...ws[cellRef].s,
+                            ...(bgArgb ? { fill: { patternType: 'solid', fgColor: { rgb: bgArgb } } } : {}),
+                            ...(fontArgb ? { font: { ...ws[cellRef].s?.font, color: { rgb: fontArgb } } } : {}),
+                        };
+                    }
+                });
+            });
+        }
         // Auto-fit column widths — single O(n) pass accumulates max length per column
         // instead of one reduce() per column (was O(n × cols)).
         const colWidths = dataCols.map((c) => (c.header ?? '').length);
@@ -597,7 +653,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         XLSX.utils.book_append_sheet(wb, ws, 'Data');
         const suffix = scope === 'filtered' ? '-filtered' : '';
         XLSX.writeFile(wb, `${exportFilename}${suffix}-page${pagination.pageIndex + 1}.xlsx`);
-    }, [columns, rows, exportFilename, pagination.pageIndex, headerBgColor, exportHeaderBgColor, exportHeaderTextColor]);
+    }, [columns, rows, exportFilename, pagination.pageIndex, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, getRowSx, getHeaderSx]);
     // ── Memoized cell-prop builders ───────────────────────────────────────────
     // These are functions passed to MRT per-cell. Without useCallback they get
     // new references on every render, forcing MRT to rebuild every cell's sx.
@@ -611,15 +667,31 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         const align = (colResolved.align ?? gridResolved.align ?? 'left');
         const { sx: gridSx, align: _ga, ...gridRest } = gridResolved;
         const { sx: colSx, align: _ca, ...colRest } = colResolved;
+        const headerCondSx = getHeaderSx?.({
+            id: column.id,
+            header: column.columnDef.header ?? '',
+        });
+        const { background: headerCondBg, text: headerCondText } = extractSxColors(headerCondSx);
         return {
             ...gridRest,
             ...colRest,
             align,
-            sx: [
-                buildHeaderCellSx(align, resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor, headerMaxLines),
-                ...(gridSx ? [gridSx] : []),
-                ...(colSx ? [colSx] : []),
-            ],
+            // NOTE: MRT reads this `sx` via `parseFromValuesOrFunc(tableCellProps?.sx, theme)`
+            // internally (see material-react-table's `getCommonMRTCellStyles`), which only
+            // special-cases *functions* — an array (MUI's own normal multi-entry `sx` form)
+            // is returned as-is and then spread by numeric index, silently discarding every
+            // style in it. A single theme-aware function is the only form MRT actually merges
+            // in at this integration point, so all layers are combined manually below instead
+            // of relying on array-based sx composition.
+            sx: (theme) => {
+                const resolve = (s) => (typeof s === 'function' ? s(theme) : s) ?? {};
+                return {
+                    ...buildHeaderCellSx(align, resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerCondBg ?? headerBgColor, headerMaxLines, headerCondText),
+                    ...resolve(gridSx),
+                    ...resolve(colSx),
+                    ...resolve(headerCondSx),
+                };
+            },
         };
     }, [
         resolvedHeaderMinHeight,
@@ -628,6 +700,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         headerBgColor,
         headerMaxLines,
         gridHeadCellProps,
+        getHeaderSx,
     ]);
     const memoizedBodyCellProps = useCallback((params) => {
         const { cell, column, row, table } = params;
@@ -653,6 +726,13 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             ],
         };
     }, [resolvedBodyFontSize, gridBodyCellProps]);
+    // Row-level conditional highlighting (see `getRowSx` prop doc). Only wired
+    // up when the consumer actually supplies it, so grids that don't use this
+    // feature pay zero extra cost (MRT falls back to no muiTableBodyRowProps).
+    const memoizedBodyRowProps = useCallback(({ row }) => {
+        const sx = getRowSx?.(row.original);
+        return sx ? { sx } : {};
+    }, [getRowSx]);
     // ── Memoized toolbar render functions ─────────────────────────────────────
     // Defined with useCallback so MRT receives stable references and does not
     // re-render the toolbar on every isFetching / data update cycle.
@@ -859,6 +939,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         },
         muiTableHeadCellProps: memoizedHeadCellProps,
         muiTableBodyCellProps: memoizedBodyCellProps,
+        muiTableBodyRowProps: memoizedBodyRowProps,
         muiToolbarAlertBannerProps: isError
             ? { color: 'error', children: 'Failed to load data. Please try again.' }
             : undefined,

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/DateInput/index.esm.js

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

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

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

package/package.json

@@ -1,211 +1,211 @@
-{
-  "name": "tp-react-elements",
-  "version": "3.0.3",
-  "private": false,
-  "type": "module",
-  "description": "React form components library built with React Hook Form and Yup",
-  "main": "dist/index.esm.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.esm.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./form": {
-      "import": "./dist/components/Form/index.esm.js",
-      "types": "./dist/components/Form/index.d.ts"
-    },
-    "./utils": {
-      "import": "./dist/utils/index.esm.js",
-      "types": "./dist/utils/index.d.ts"
-    },
-    "./validation": {
-      "import": "./dist/validation/index.esm.js",
-      "types": "./dist/validation/index.d.ts"
-    },
-    "./components/*": {
-      "import": "./dist/components/*/index.esm.js",
-      "types": "./dist/components/*/index.d.ts"
-    },
-    "./theme": {
-      "import": "./dist/theme/index.esm.js",
-      "types": "./dist/theme/index.d.ts"
-    },
-    "./package.json": "./package.json"
-  },
-  "bin": {
-    "install-tp-form-deps": "./scripts/install-deps.js"
-  },
-  "files": [
-    "dist",
-    "scripts"
-  ],
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "preview": "vite preview",
-    "clean": "rimraf dist dist-dev",
-    "type-check": "tsc --noEmit",
-    "build:types": "tsc --project tsconfig.build.json --emitDeclarationOnly && tsc-alias -p tsconfig.build.json && echo \"✅ TypeScript declaration files generated successfully!\"",
-    "build:types:qa": "tsc --project tsconfig.build.qa.json --emitDeclarationOnly && tsc-alias -p tsconfig.build.qa.json && echo \"✅ QA declaration files (with maps) generated!\"",
-    "build:esm": "npm run clean && rollup -c rollup.config.js",
-    "build:lib": "npm run clean && rollup -c rollup.config.js && npm run build:types && echo \"✅ Complete library build finished! ESM build completed successfully!\"",
-    "build:lib:qa": "npm run clean && rollup -c rollup.config.js && npm run build:types:qa && echo \"✅ QA build finished (includes .d.ts.map)\"",
-    "analyze": "npm run clean && cross-env BUNDLE_ANALYZE=true rollup -c rollup.config.js",
-    "analyze:dev": "cross-env ANALYZE_BUNDLE=true vite build",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest --coverage",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:fix": "eslint . --ext ts,tsx --fix",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,md,json}\"",
-    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,scss,md,json}\"",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "version:patch": "npm version patch",
-    "version:minor": "npm version minor",
-    "version:major": "npm version major",
-    "publish:prepare": "npm run build:lib && npm run type-check",
-    "publish:npm": "npm publish",
-    "publish:beta": "npm publish --tag beta",
-    "publish:patch": "npm version patch --no-git-tag-version && npm publish",
-    "publish:minor": "npm version minor --no-git-tag-version && npm publish",
-    "publish:major": "npm version major --no-git-tag-version && npm publish",
-    "publish:auto": "npm run publish:prepare && npm publish",
-    "install-peers": "install-tp-form-deps",
-    "package-build": "rollup -c --bundleConfigAsCjs",
-    "prepublishOnly": "npm run build:lib"
-  },
-  "peerDependencies": {
-    "@emotion/react": ">=11.14.0 <13.0.0",
-    "@emotion/styled": ">=11.14.1 <13.0.0",
-    "@hookform/error-message": ">=2.0.1 <3.0.0",
-    "@hookform/resolvers": ">=5.2.1 <6.0.0",
-    "@mui/icons-material": ">=7.3.1 <8.0.0",
-    "@mui/material": ">=7.3.1 <8.0.0",
-    "@mui/x-date-pickers": ">=8.10.2 <9.0.0",
-    "@tanstack/react-query": ">=5.0.0 <6.0.0",
-    "crypto-js": ">=4.2.0 <5.0.0",
-    "dayjs": ">=1.11.13 <2.0.0",
-    "file-saver": ">=2.0.5 <3.0.0",
-    "jodit": ">=4.6.2 <5.0.0",
-    "jodit-react": ">=5.2.19 <6.0.0",
-    "material-react-table": ">=3.0.0 <4.0.0",
-    "react": ">=18 <20",
-    "react-dom": ">=18 <20",
-    "react-hook-form": ">=7.62.0 <8.0.0",
-    "react-idle-timer": ">=5.7.2 <6.0.0",
-    "xlsx-js-style": ">=1.2.0 <2.0.0",
-    "yup": ">=1.7.0 <2.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@tanstack/react-query": {
-      "optional": true
-    },
-    "react-idle-timer": {
-      "optional": true
-    },
-    "jodit": {
-      "optional": true
-    },
-    "jodit-react": {
-      "optional": true
-    },
-    "material-react-table": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@hookform/error-message": "^2.0.1",
-    "@hookform/resolvers": "^5.2.1",
-    "@mui/icons-material": "^7.3.1",
-    "@mui/material": "^7.3.1",
-    "@mui/x-date-pickers": "^8.10.2",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-typescript": "^12.1.4",
-    "@storybook/addon-docs": "^10.4.2",
-    "@storybook/addon-links": "^10.4.2",
-    "@storybook/react-vite": "^10.4.2",
-    "@tanstack/react-query": "^5.100.14",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/crypto-js": "^4.2.2",
-    "@types/file-saver": "^2.0.7",
-    "@types/node": "^22.11.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.8.0",
-    "@typescript-eslint/parser": "^8.8.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^3.0.0",
-    "@vitest/ui": "^3.0.0",
-    "cross-env": "^10.0.0",
-    "crypto-js": "^4.2.0",
-    "dayjs": "^1.11.13",
-    "eslint": "^9.12.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.37.1",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.12",
-    "eslint-plugin-storybook": "10.4.2",
-    "file-saver": "^2.0.5",
-    "glob": "^10.4.5",
-    "jodit": "^4.6.2",
-    "jodit-react": "^5.2.19",
-    "jsdom": "^25.0.0",
-    "material-react-table": "^3.2.1",
-    "prettier": "^3.6.2",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-hook-form": "^7.62.0",
-    "react-idle-timer": "^5.7.2",
-    "rimraf": "^5.0.7",
-    "rollup": "^4.22.4",
-    "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-bundle-size": "^1.0.3",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "sass-embedded": "^1.90.0",
-    "storybook": "^10.4.2",
-    "tsc-alias": "^1.8.16",
-    "typescript": "^5.5.4",
-    "vite": "^6.0.0",
-    "vitest": "^3.0.0",
-    "xlsx-js-style": "^1.2.0",
-    "yup": "^1.7.0"
-  },
-  "keywords": [
-    "react",
-    "forms",
-    "components",
-    "react-hook-form",
-    "yup",
-    "typescript"
-  ],
-  "author": "Mohammad Asheesh",
-  "contributors": [
-    "Karthik Mayandi",
-    "Other Dev"
-  ],
-  "license": "MIT",
-  "engines": {
-    "node": ">=18.17.0 || >=20.11.0",
-    "npm": ">=10.9.0"
-  },
-  "dependencies": {
-    "@types/react-date-range": "^1.4.10",
-    "axios": "^1.13.2",
-    "date-fns": "^4.1.0",
-    "react-date-range": "^2.0.1"
-  }
-}
+{
+  "name": "tp-react-elements",
+  "version": "3.0.5",
+  "private": false,
+  "type": "module",
+  "description": "React form components library built with React Hook Form and Yup",
+  "main": "dist/index.esm.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./form": {
+      "import": "./dist/components/Form/index.esm.js",
+      "types": "./dist/components/Form/index.d.ts"
+    },
+    "./utils": {
+      "import": "./dist/utils/index.esm.js",
+      "types": "./dist/utils/index.d.ts"
+    },
+    "./validation": {
+      "import": "./dist/validation/index.esm.js",
+      "types": "./dist/validation/index.d.ts"
+    },
+    "./components/*": {
+      "import": "./dist/components/*/index.esm.js",
+      "types": "./dist/components/*/index.d.ts"
+    },
+    "./theme": {
+      "import": "./dist/theme/index.esm.js",
+      "types": "./dist/theme/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "install-tp-form-deps": "./scripts/install-deps.js"
+  },
+  "files": [
+    "dist",
+    "scripts"
+  ],
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "preview": "vite preview",
+    "clean": "rimraf dist dist-dev",
+    "type-check": "tsc --noEmit",
+    "build:types": "tsc --project tsconfig.build.json --emitDeclarationOnly && tsc-alias -p tsconfig.build.json && echo \"✅ TypeScript declaration files generated successfully!\"",
+    "build:types:qa": "tsc --project tsconfig.build.qa.json --emitDeclarationOnly && tsc-alias -p tsconfig.build.qa.json && echo \"✅ QA declaration files (with maps) generated!\"",
+    "build:esm": "npm run clean && rollup -c rollup.config.js",
+    "build:lib": "npm run clean && rollup -c rollup.config.js && npm run build:types && echo \"✅ Complete library build finished! ESM build completed successfully!\"",
+    "build:lib:qa": "npm run clean && rollup -c rollup.config.js && npm run build:types:qa && echo \"✅ QA build finished (includes .d.ts.map)\"",
+    "analyze": "npm run clean && cross-env BUNDLE_ANALYZE=true rollup -c rollup.config.js",
+    "analyze:dev": "cross-env ANALYZE_BUNDLE=true vite build",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint . --ext ts,tsx --fix",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,md,json}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,css,scss,md,json}\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "version:patch": "npm version patch",
+    "version:minor": "npm version minor",
+    "version:major": "npm version major",
+    "publish:prepare": "npm run build:lib && npm run type-check",
+    "publish:npm": "npm publish",
+    "publish:beta": "npm publish --tag beta",
+    "publish:patch": "npm version patch --no-git-tag-version && npm publish",
+    "publish:minor": "npm version minor --no-git-tag-version && npm publish",
+    "publish:major": "npm version major --no-git-tag-version && npm publish",
+    "publish:auto": "npm run publish:prepare && npm publish",
+    "install-peers": "install-tp-form-deps",
+    "package-build": "rollup -c --bundleConfigAsCjs",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "peerDependencies": {
+    "@emotion/react": ">=11.14.0 <13.0.0",
+    "@emotion/styled": ">=11.14.1 <13.0.0",
+    "@hookform/error-message": ">=2.0.1 <3.0.0",
+    "@hookform/resolvers": ">=5.2.1 <6.0.0",
+    "@mui/icons-material": ">=7.3.1 <8.0.0",
+    "@mui/material": ">=7.3.1 <8.0.0",
+    "@mui/x-date-pickers": ">=8.10.2 <9.0.0",
+    "@tanstack/react-query": ">=5.0.0 <6.0.0",
+    "crypto-js": ">=4.2.0 <5.0.0",
+    "dayjs": ">=1.11.13 <2.0.0",
+    "file-saver": ">=2.0.5 <3.0.0",
+    "jodit": ">=4.6.2 <5.0.0",
+    "jodit-react": ">=5.2.19 <6.0.0",
+    "material-react-table": ">=3.0.0 <4.0.0",
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20",
+    "react-hook-form": ">=7.62.0 <8.0.0",
+    "react-idle-timer": ">=5.7.2 <6.0.0",
+    "xlsx-js-style": ">=1.2.0 <2.0.0",
+    "yup": ">=1.7.0 <2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "react-idle-timer": {
+      "optional": true
+    },
+    "jodit": {
+      "optional": true
+    },
+    "jodit-react": {
+      "optional": true
+    },
+    "material-react-table": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@hookform/error-message": "^2.0.1",
+    "@hookform/resolvers": "^5.2.1",
+    "@mui/icons-material": "^7.3.1",
+    "@mui/material": "^7.3.1",
+    "@mui/x-date-pickers": "^8.10.2",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@storybook/addon-docs": "^10.4.2",
+    "@storybook/addon-links": "^10.4.2",
+    "@storybook/react-vite": "^10.4.2",
+    "@tanstack/react-query": "^5.100.14",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/crypto-js": "^4.2.2",
+    "@types/file-saver": "^2.0.7",
+    "@types/node": "^22.11.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.8.0",
+    "@typescript-eslint/parser": "^8.8.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^3.0.0",
+    "@vitest/ui": "^3.0.0",
+    "cross-env": "^10.0.0",
+    "crypto-js": "^4.2.0",
+    "dayjs": "^1.11.13",
+    "eslint": "^9.12.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "eslint-plugin-storybook": "10.4.2",
+    "file-saver": "^2.0.5",
+    "glob": "^10.4.5",
+    "jodit": "^4.6.2",
+    "jodit-react": "^5.2.19",
+    "jsdom": "^25.0.0",
+    "material-react-table": "^3.2.1",
+    "prettier": "^3.6.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-hook-form": "^7.62.0",
+    "react-idle-timer": "^5.7.2",
+    "rimraf": "^5.0.7",
+    "rollup": "^4.22.4",
+    "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-bundle-size": "^1.0.3",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "sass-embedded": "^1.90.0",
+    "storybook": "^10.4.2",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.5.4",
+    "vite": "^6.0.0",
+    "vitest": "^3.0.0",
+    "xlsx-js-style": "^1.2.0",
+    "yup": "^1.7.0"
+  },
+  "keywords": [
+    "react",
+    "forms",
+    "components",
+    "react-hook-form",
+    "yup",
+    "typescript"
+  ],
+  "author": "Mohammad Asheesh",
+  "contributors": [
+    "Karthik Mayandi",
+    "Other Dev"
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.17.0 || >=20.11.0",
+    "npm": ">=10.9.0"
+  },
+  "dependencies": {
+    "@types/react-date-range": "^1.4.10",
+    "axios": "^1.13.2",
+    "date-fns": "^4.1.0",
+    "react-date-range": "^2.0.1"
+  }
+}