tp-react-elements 3.0.2 → 3.0.4

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.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 DateRange = {};
 
-export { DateRangePicker as __exports };
+export { DateRange as __exports };

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,31 @@ 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.
+     */
+    getRowSx?: (row: TData) => 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 +264,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, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;

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

@@ -273,7 +273,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, 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 —
@@ -653,6 +653,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.
@@ -726,7 +733,16 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         onPaginationChange: setPagination,
         onSortingChange: setSorting,
         onColumnFiltersChange: setColumnFilters,
-        onGlobalFilterChange: setGlobalFilter,
+        // MRT's own "clear search" (X) button inside the search field calls this
+        // with `undefined` (not ''), e.g. via its internal handleClear. Normalize
+        // here so `globalFilter` is never anything but a string — code elsewhere
+        // in this component (e.g. `isFiltered`) assumes that invariant.
+        onGlobalFilterChange: (updater) => {
+            setGlobalFilter((prev) => {
+                const next = typeof updater === 'function' ? updater(prev) : updater;
+                return next ?? '';
+            });
+        },
         onColumnPinningChange: (updater) => {
             setColumnPinning((prev) => {
                 const next = typeof updater === 'function' ? updater(prev) : updater;
@@ -850,6 +866,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/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.esm12.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/DateRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm4.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm6.js';
 import require$$0__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 require$$0__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 require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';

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

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

package/package.json

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