tp-react-elements 1.3.11 → 1.3.12

package/README.md

@@ -175,23 +175,41 @@ Refer to our Storybook documentation for detailed API documentation and examples
 npm run storybook
 ```
 
-- **Docs → Paginated Grid** — full API: grid height, header wrap (`headerMinHeight` / `headerMaxHeight`), `headerBgColor`, filters, troubleshooting
-- **Components → PaginatedGrid → Sample Grids** — mock grids (no API): header wrap test, compact layout, viewport fill
+- **Docs → Paginated Grid** — API reference plus **four copy-paste examples** (embedded panel, wrapped headers, typography, invoice filters)
+- **Components → PaginatedGrid → Sample Grids** — mock grids (no API): header wrap, compact layout, viewport fill
 - **Components → PaginatedGrid → Example Grid** — live invoice API demo
 
-Example header styling:
+**Example — compact embedded grid with smaller fonts:**
+
+```tsx
+<GenericPaginatedGrid
+  tableHeight="calc(100vh - 240px)"
+  autoFillViewport={false}
+  uiDensity="compact"
+  headerBgColor="#f5f5f5"
+  headerMaxHeight={64}
+  headerFontSize={11}
+  bodyFontSize={10}
+  {...gridProps}
+/>
+```
+
+**Example — wrapped header “Department / Business Unit”:**
 
 ```tsx
 <GenericPaginatedGrid
   headerBgColor="#e8eaf6"
   headerMinHeight="48px"
   headerMaxHeight="96px"
-  tableHeight="calc(100vh - 200px)"
-  autoFillViewport={false}
+  headerFontSize={12}
+  bodyFontSize={12}
+  layoutMode="grid"
   {...gridProps}
 />
 ```
 
+Full examples: Storybook **Docs → Paginated Grid → Examples**.
+
 ## 🏗️ Best Practices for Code Structure and Organization
 
 ### Component Organization

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.esm14.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 Calendar = {};
+var DateRange = {};
 
-export { Calendar as __exports };
+export { DateRange as __exports };

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

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

package/dist/_virtual/index.esm7.js

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

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

@@ -19,6 +19,10 @@ export interface GridUiDensityOptions {
     filterChipMinHeight?: number;
     filterLabelFontSize?: number;
     toolbarIconFontSize?: number | string;
+    /** Header column title font size (px number). */
+    headerFontSize?: number;
+    /** Body cell data font size (px number). */
+    bodyFontSize?: number;
     /** MRT built-in toolbar control density (show/hide columns, density toggle, etc.). */
     mrtDensity?: 'comfortable' | 'compact' | 'spacious';
 }
@@ -102,6 +106,16 @@ export interface GenericPaginatedGridProps<TData extends object> {
      * Omit to allow text to use the full `headerMaxHeight` (recommended for tall headers).
      */
     headerMaxLines?: number;
+    /**
+     * Font size for header column titles (CSS length or px number).
+     * Default: `12px` (`11px` when `uiDensity="compact"`). Overridden by `uiDensityOptions.headerFontSize`.
+     */
+    headerFontSize?: string | number;
+    /**
+     * Font size for body/data cells (CSS length or px number).
+     * Default: `12px` (`11px` compact). Overridden by `uiDensityOptions.bodyFontSize`.
+     */
+    bodyFontSize?: string | number;
     /**
      * Maximum number of filter chips that can be visible at once.
      * Prevents the filter bar from wrapping to a second row on typical screens.
@@ -109,5 +123,5 @@ export interface GenericPaginatedGridProps<TData extends object> {
      */
     maxVisibleFilters?: number;
 }
-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, 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, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;

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

@@ -21,6 +21,8 @@ const UI_DENSITY_PRESETS = {
         filterChipMinHeight: 30,
         filterLabelFontSize: 12,
         toolbarIconFontSize: 'small',
+        headerFontSize: 12,
+        bodyFontSize: 12,
         mrtDensity: 'comfortable',
     },
     compact: {
@@ -32,6 +34,8 @@ const UI_DENSITY_PRESETS = {
         filterChipMinHeight: 26,
         filterLabelFontSize: 11,
         toolbarIconFontSize: 'inherit',
+        headerFontSize: 11,
+        bodyFontSize: 11,
         mrtDensity: 'compact',
     },
 };
@@ -44,7 +48,13 @@ const toCssSize = (value, fallback) => {
  * Header overrides applied via GlobalStyles (literal prop values).
  * MRT sets `backgroundColor: 'inherit'` and fixed density padding — must use !important.
  */
-const buildHeaderGlobalStyles = (headerMin, headerMax, headerBgColor) => {
+const buildBodyGlobalStyles = (bodyFont) => ({
+    '.tp-gpg-root .MuiTableBody-root .MuiTableCell-root': {
+        fontSize: `${bodyFont} !important`,
+        lineHeight: 1.35,
+    },
+});
+const buildHeaderGlobalStyles = (headerMin, headerMax, headerFont, headerBgColor) => {
     const headCell = {
         height: `${headerMax} !important`,
         minHeight: `${headerMin} !important`,
@@ -69,7 +79,10 @@ const buildHeaderGlobalStyles = (headerMin, headerMax, headerBgColor) => {
             alignItems: 'stretch !important',
             ...(headerBgColor ? { backgroundColor: headerBgColor } : {}),
         },
-        '.tp-gpg-root .MuiTableHead-root .MuiTableCell-head': headCell,
+        '.tp-gpg-root .MuiTableHead-root .MuiTableCell-head': {
+            ...headCell,
+            fontSize: `${headerFont} !important`,
+        },
         '.tp-gpg-root .MuiTableHead-root .Mui-TableHeadCell-Content': {
             height: '100% !important',
             width: '100% !important',
@@ -92,6 +105,7 @@ const buildHeaderGlobalStyles = (headerMin, headerMax, headerBgColor) => {
             overflowWrap: 'anywhere !important',
             width: '100% !important',
             maxWidth: '100% !important',
+            fontSize: `${headerFont} !important`,
             display: 'block !important',
             WebkitLineClamp: 'unset !important',
             WebkitBoxOrient: 'unset !important',
@@ -101,11 +115,12 @@ const buildHeaderGlobalStyles = (headerMin, headerMax, headerBgColor) => {
             wordBreak: 'break-word !important',
             overflowWrap: 'anywhere !important',
             width: '100% !important',
+            fontSize: `${headerFont} !important`,
         },
     };
 };
 /** Per-cell sx merged into MRT (via muiTableHeadCellProps). */
-const buildHeaderCellSx = (align, headerMin, headerMax, headerBgColor, headerMaxLines) => {
+const buildHeaderCellSx = (align, headerMin, headerMax, headerFont, headerBgColor, headerMaxLines) => {
     const textAlign = align;
     const flexJustify = align === 'right' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start';
     const wrapperClamp = headerMaxLines != null && headerMaxLines > 0
@@ -127,6 +142,7 @@ const buildHeaderCellSx = (align, headerMin, headerMax, headerBgColor, headerMax
         height: `${headerMax} !important`,
         minHeight: `${headerMin} !important`,
         maxHeight: `${headerMax} !important`,
+        fontSize: headerFont,
         boxSizing: 'border-box',
         borderRight: '1px solid rgba(224,224,224,1)',
         borderBottom: '2px solid rgba(0,0,0,0.15)',
@@ -153,6 +169,7 @@ const buildHeaderCellSx = (align, headerMin, headerMax, headerBgColor, headerMax
             wordBreak: 'break-word',
             overflowWrap: 'anywhere',
             lineHeight: 1.25,
+            fontSize: headerFont,
             width: '100%',
             textAlign,
             ...wrapperClamp,
@@ -160,6 +177,7 @@ const buildHeaderCellSx = (align, headerMin, headerMax, headerBgColor, headerMax
         '& .MuiTableSortLabel-root': {
             whiteSpace: 'normal',
             wordBreak: 'break-word',
+            fontSize: headerFont,
             width: '100%',
             margin: 0,
         },
@@ -203,11 +221,22 @@ 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, 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, }) {
     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');
-    const headerGlobalStyleOverrides = useMemo(() => buildHeaderGlobalStyles(resolvedHeaderMinHeight, resolvedHeaderMaxHeight, headerBgColor), [resolvedHeaderMinHeight, resolvedHeaderMaxHeight, headerBgColor]);
+    const resolvedHeaderFontSize = toCssSize(headerFontSize ?? densityTokens.headerFontSize, uiDensity === 'compact' ? '11px' : '12px');
+    const resolvedBodyFontSize = toCssSize(bodyFontSize ?? densityTokens.bodyFontSize, uiDensity === 'compact' ? '11px' : '12px');
+    const tableStyleOverrides = useMemo(() => ({
+        ...buildHeaderGlobalStyles(resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor),
+        ...buildBodyGlobalStyles(resolvedBodyFontSize),
+    }), [
+        resolvedHeaderMinHeight,
+        resolvedHeaderMaxHeight,
+        resolvedHeaderFontSize,
+        resolvedBodyFontSize,
+        headerBgColor,
+    ]);
     const defaultVisible = defaultVisibleFilterIds
         ?? (serverFilterDefs.length > 0 ? [serverFilterDefs[0].id] : []);
     // ── State ──────────────────────────────────────────────────────────────────
@@ -474,16 +503,32 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             return {
                 align,
                 sx: [
-                    buildHeaderCellSx(align, resolvedHeaderMinHeight, resolvedHeaderMaxHeight, headerBgColor, headerMaxLines),
+                    buildHeaderCellSx(align, resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor, headerMaxLines),
                     ...(colSx ? [colSx] : []),
                 ],
             };
         },
-        muiTableBodyCellProps: {
-            sx: {
-                whiteSpace: 'nowrap',
-                borderRight: '1px solid rgba(224,224,224,1)',
-            },
+        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;
+            }
+            return {
+                sx: [
+                    {
+                        whiteSpace: 'nowrap',
+                        fontSize: resolvedBodyFontSize,
+                        lineHeight: 1.35,
+                        borderRight: '1px solid rgba(224,224,224,1)',
+                    },
+                    ...(colSx ? [colSx] : []),
+                ],
+            };
         },
         muiToolbarAlertBannerProps: isError
             ? { color: 'error', children: 'Failed to load data. Please try again.' }
@@ -505,7 +550,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                     '.tp-gpg-root button[aria-label="Move"]': { display: 'none !important' },
                     '.tp-gpg-root [data-column-id="mrt-row-spacer"]': { display: 'none !important' },
                     '.tp-gpg-root .Mui-TableHeadCell-ColumnSpacer': { display: 'none !important' },
-                    ...headerGlobalStyleOverrides,
+                    ...tableStyleOverrides,
                 } }), isLoading && jsx(OverlayLoader, { message: "Loading data\u2026" }), !isLoading && isFetching && jsx(OverlayLoader, { message: "Updating data\u2026" }), jsx(Box, { sx: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: jsx(MaterialReactTable, { table: table }) })] }));
 }
 

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

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

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm14.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.esm14.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.11",
+  "version": "1.3.12",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",