tp-react-elements 2.0.4 → 2.0.7

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { memo, useState, useEffect } from 'react';
+import { memo, useState, useEffect, useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -410,21 +410,21 @@ const GlobalSearchInput = memo(({ value, onChange, chipStyle, placeholder = 'Sea
         } }));
 });
 GlobalSearchInput.displayName = 'GlobalSearchInput';
+// ─── PillBox — module-level so ManageFiltersButton never creates a new type ───
+const PillBox = ({ bg, color, label }) => (jsx(Box, { component: "span", sx: {
+        mr: 1.25, flexShrink: 0,
+        fontSize: 10, fontWeight: 700,
+        px: 0.75, py: '2px',
+        borderRadius: '4px',
+        bgcolor: bg,
+        color,
+        textTransform: 'uppercase',
+        letterSpacing: 0.4,
+        lineHeight: 1.6,
+    }, children: label }));
 const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, onToggle, maxVisible = 4, chipStyle, gridId, }) => {
     const [anchor, setAnchor] = useState(null);
     const atLimit = visibleIds.length >= maxVisible;
-    // Shared pill box renderer
-    const PillBox = ({ bg, color, label }) => (jsx(Box, { component: "span", sx: {
-            mr: 1.25, flexShrink: 0,
-            fontSize: 10, fontWeight: 700,
-            px: 0.75, py: '2px',
-            borderRadius: '4px',
-            bgcolor: bg,
-            color,
-            textTransform: 'uppercase',
-            letterSpacing: 0.4,
-            lineHeight: 1.6,
-        }, children: label }));
     return (jsxs(Fragment, { children: [jsx(Tooltip, { title: "Add or remove filter chips", children: jsx(Button, { id: gridId ? `${gridId}_manage_filters_icon` : undefined, size: "small", variant: "outlined", startIcon: jsx(TuneIcon, { sx: { fontSize: 14 } }), onClick: (e) => setAnchor(e.currentTarget), sx: {
                         borderRadius: 5, textTransform: 'none', fontSize: chipStyle.fontSize,
                         borderColor: 'divider', color: 'text.secondary',
@@ -464,20 +464,24 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
     const labelFontSize = filterLabelFontSize ?? (uiDensity === 'compact' ? 11 : 12);
     // ── Single-value column filter helpers ──────────────────────────────────────
     const getColValue = (id) => columnFilters.find((f) => f.id === id)?.value ?? '';
-    const applyColFilter = (id, value) => {
-        const rest = columnFilters.filter((f) => f.id !== id);
-        onColumnFilterChange(value ? [...rest, { id, value }] : rest);
-    };
+    const applyColFilter = useCallback((id, value) => {
+        onColumnFilterChange((prev) => {
+            const rest = prev.filter((f) => f.id !== id);
+            return value ? [...rest, { id, value }] : rest;
+        });
+    }, [onColumnFilterChange]);
     // ── Multi-value column filter helpers ────────────────────────────────────────
     const getColValues = (id) => {
         const val = columnFilters.find((f) => f.id === id)?.value;
         return Array.isArray(val) ? val : [];
     };
-    const applyColMultiFilter = (id, values) => {
-        const rest = columnFilters.filter((f) => f.id !== id);
-        onColumnFilterChange(values.length > 0 ? [...rest, { id, value: values }] : rest);
-    };
-    const removeFilter = (id) => {
+    const applyColMultiFilter = useCallback((id, values) => {
+        onColumnFilterChange((prev) => {
+            const rest = prev.filter((f) => f.id !== id);
+            return values.length > 0 ? [...rest, { id, value: values }] : rest;
+        });
+    }, [onColumnFilterChange]);
+    const removeFilter = useCallback((id) => {
         const def = serverFilterDefs.find((d) => d.id === id);
         if (def?.type === 'dateRange') {
             onFilterValuesChange({ ...filterValues, [def.fromKey]: '', [def.toKey]: '' });
@@ -493,7 +497,6 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
             applyColFilter(def.columnKey, '');
         }
         else {
-            // Column filter — multi-select stores string[], others store string
             const colDef = availableColumns.find((c) => c.id === id);
             if (colDef?.filterType === 'multi-select') {
                 applyColMultiFilter(id, []);
@@ -503,7 +506,7 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
             }
         }
         onToggleFilter(id);
-    };
+    }, [filterValues, serverFilterDefs, availableColumns, onFilterValuesChange, onToggleFilter, applyColFilter, applyColMultiFilter]);
     return (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 0.75 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.4, mr: 0.25 }, children: [jsx(FilterListIcon, { sx: { fontSize: labelFontSize + 3, color: 'text.disabled' } }), jsx(Typography, { sx: { fontSize: labelFontSize }, color: "text.secondary", fontWeight: 500, noWrap: true, children: "Filter by:" })] }), visibleFilterIds.map((id) => {
                 const def = serverFilterDefs.find((d) => d.id === id);
                 if (def?.type === 'dateRange') {

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

@@ -91,10 +91,32 @@ export interface GenericPaginatedGridProps<TData extends object> {
      * Use `grid-no-grow` only when you need fixed column widths with horizontal scroll.
      */
     layoutMode?: 'grid' | 'semantic' | 'grid-no-grow';
-    /** Compact toolbar, filter chips, and footer. Default: `default`. */
+    /**
+     * Compact toolbar, filter chips, and footer.
+     * When omitted, the grid auto-selects `compact` at the `tablet`/`mobile`
+     * responsive tiers and `default` at `desktop`. Pass explicitly to opt out
+     * of that auto-switch.
+     */
     uiDensity?: GridUiDensity;
     /** Override individual sizes from the `uiDensity` preset. */
     uiDensityOptions?: GridUiDensityOptions;
+    /**
+     * Viewport-width cutoffs (px) for the three responsive tiers:
+     * `desktop` (above `tablet`), `tablet` (between `mobile` and `tablet`),
+     * and `mobile` (at/below `mobile`). Each tier gets progressively tighter
+     * defaults — density, filter-chip cap, toolbar wrap, footer layout.
+     * Default: `{ tablet: 1024, mobile: 640 }`.
+     */
+    responsiveBreakpoints?: {
+        tablet?: number;
+        mobile?: number;
+    };
+    /**
+     * Opt out of all automatic responsive-tier adjustments (density, filter
+     * cap, toolbar wrap, footer layout) — the grid always behaves as `desktop`.
+     * Default: `false`.
+     */
+    disableResponsive?: boolean;
     /** Choices shown in the "Rows per page" footer dropdown. Default: [1 000, 5 000, 10 000]. */
     pageSizeOptions?: number[];
     /**
@@ -109,6 +131,18 @@ export interface GenericPaginatedGridProps<TData extends object> {
      * Accepts any valid CSS colour string.
      */
     headerBgColor?: string;
+    /**
+     * Background colour for the Excel export header row.
+     * Accepts a hex colour string (`#RRGGBB`).
+     * Falls back to `headerBgColor` when omitted, then to the default blue `#1565C0`.
+     */
+    exportHeaderBgColor?: string;
+    /**
+     * Text colour for the Excel export header row.
+     * Accepts a hex colour string (`#RRGGBB`).
+     * Defaults to white (`#FFFFFF`) when omitted.
+     */
+    exportHeaderTextColor?: string;
     /**
      * Minimum height of every header cell (CSS length or px number).
      * Default: `40px` (`34px` when `uiDensity="compact"`).
@@ -198,5 +232,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, pageSizeOptions, showGlobalSearchByDefault, headerBgColor, 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, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;

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

@@ -1,9 +1,8 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo, useState, useRef, useLayoutEffect, useCallback } from 'react';
-import * as XLSX from 'xlsx-js-style';
-import { useMaterialReactTable, MRT_ToggleGlobalFilterButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFullScreenButton, MaterialReactTable } from 'material-react-table';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useState, useRef, useLayoutEffect, useCallback, useEffect } from 'react';
+import { MRT_ToggleGlobalFilterButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFullScreenButton, useMaterialReactTable, MaterialReactTable } from 'material-react-table';
 import { useQuery, keepPreviousData } from '@tanstack/react-query';
-import { Box, Tooltip, IconButton, GlobalStyles, Typography, Select, MenuItem, CircularProgress } from '@mui/material';
+import { Box, Tooltip, IconButton, GlobalStyles, Typography, Select, MenuItem, Skeleton, CircularProgress } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import FirstPageIcon from '@mui/icons-material/FirstPage';
@@ -11,6 +10,7 @@ import LastPageIcon from '@mui/icons-material/LastPage';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import DynamicFilterBar from './DynamicFilterBar.esm.js';
+import { getXLSX } from '../../utils/Constants/xlsx-js-style.esm.js';
 
 const UI_DENSITY_PRESETS = {
     default: {
@@ -194,27 +194,60 @@ const OverlayLoader = ({ message }) => (jsxs(Box, { sx: {
         bgcolor: 'rgba(255,255,255,0.80)', backdropFilter: 'blur(2px)',
         zIndex: 10, gap: 1.5,
     }, children: [jsx(CircularProgress, { size: 50, thickness: 4 }), jsx(Typography, { variant: "body2", color: "text.secondary", fontWeight: 500, children: message })] }));
-const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoading, canPrev, canNext, onFirst, onPrev, onNext, onLast, onPageSizeChange, pageSizeOptions, density, gridId, }) => {
+// ─── Internal: skeleton loader (initial load — no data on screen yet) ────────
+const SkeletonOverlay = ({ columnCount, rowCount = 10, }) => (jsx(Box, { sx: {
+        position: 'absolute', inset: 0,
+        display: 'flex', flexDirection: 'column',
+        bgcolor: 'background.paper',
+        zIndex: 10, p: 1.5, gap: 1,
+        overflow: 'hidden',
+    }, children: Array.from({ length: rowCount }).map((_, rowIdx) => (jsx(Box, { sx: { display: 'flex', gap: 1.5 }, children: Array.from({ length: Math.max(columnCount, 1) }).map((_, colIdx) => (jsx(Skeleton, { variant: "rounded", height: 28, sx: { flex: 1, minWidth: 0 }, animation: "wave" }, colIdx))) }, rowIdx))) }));
+const useResponsiveTier = (tabletBreakpoint, mobileBreakpoint, enabled) => {
+    const [tier, setTier] = useState('desktop');
+    useEffect(() => {
+        if (!enabled || typeof window === 'undefined') {
+            setTier('desktop');
+            return;
+        }
+        const mqlTablet = window.matchMedia(`(max-width: ${tabletBreakpoint}px)`);
+        const mqlMobile = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);
+        const update = () => {
+            setTier(mqlMobile.matches ? 'mobile' : mqlTablet.matches ? 'tablet' : 'desktop');
+        };
+        update();
+        mqlTablet.addEventListener('change', update);
+        mqlMobile.addEventListener('change', update);
+        return () => {
+            mqlTablet.removeEventListener('change', update);
+            mqlMobile.removeEventListener('change', update);
+        };
+    }, [tabletBreakpoint, mobileBreakpoint, enabled]);
+    return enabled ? tier : 'desktop';
+};
+const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoading, canPrev, canNext, onFirst, onPrev, onNext, onLast, onPageSizeChange, pageSizeOptions, density, gridId, isStacked, }) => {
     const fs = density.footerFontSize;
     const selectH = density.footerMinHeight - 8;
     const startRow = totalRecords === 0 ? 0 : pageIndex * pageSize + 1;
     const endRow = Math.min((pageIndex + 1) * pageSize, totalRecords);
     return (jsxs(Box, { sx: {
-            display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
+            display: 'flex',
+            flexDirection: isStacked ? 'column' : 'row',
+            alignItems: isStacked ? 'stretch' : 'center',
+            justifyContent: isStacked ? 'center' : 'flex-end',
             gap: { xs: 1, md: 2 }, px: 1.5, py: density.footerPaddingY,
             borderTop: '1px solid', borderColor: 'divider',
             bgcolor: 'background.paper', flexWrap: 'wrap',
             minHeight: density.footerMinHeight,
             flexShrink: 0,
-        }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.75 }, children: [jsx(Typography, { sx: { fontSize: fs }, color: "text.secondary", noWrap: true, children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), inputProps: { id: `${gridId}_page_size_select` }, size: "small", variant: "outlined", sx: {
+        }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: isStacked ? 'center' : 'flex-start', gap: 0.75 }, children: [jsx(Typography, { sx: { fontSize: fs }, color: "text.secondary", noWrap: true, children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), inputProps: { id: `${gridId}_page_size_select` }, size: "small", variant: "outlined", sx: {
                             height: selectH, fontSize: fs - 1, minWidth: 72,
                             '.MuiSelect-select': { py: '2px !important' },
                             '.MuiOutlinedInput-notchedOutline': { borderColor: 'divider' },
-                        }, children: pageSizeOptions.map((opt) => (jsx(MenuItem, { value: opt, sx: { fontSize: fs - 1 }, children: opt.toLocaleString() }, opt))) })] }), jsx(Typography, { sx: { fontSize: fs }, color: "text.secondary", noWrap: true, children: isLoading || (isFetching && totalRecords === 0)
+                        }, children: pageSizeOptions.map((opt) => (jsx(MenuItem, { value: opt, sx: { fontSize: fs - 1 }, children: opt.toLocaleString() }, opt))) })] }), jsx(Typography, { sx: { fontSize: fs, textAlign: isStacked ? 'center' : 'left' }, color: "text.secondary", noWrap: true, children: isLoading || (isFetching && totalRecords === 0)
                     ? 'Loading…'
                     : totalRecords === 0
                         ? 'No records'
-                        : `${startRow.toLocaleString()}–${endRow.toLocaleString()} of ${totalRecords.toLocaleString()}` }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.25 }, children: [jsx(Tooltip, { title: "First page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_first_page_icon`, size: "small", onClick: onFirst, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(FirstPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Previous page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_prev_page_icon`, size: "small", onClick: onPrev, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(ChevronLeftIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Typography, { fontWeight: 600, sx: {
+                        : `${startRow.toLocaleString()}–${endRow.toLocaleString()} of ${totalRecords.toLocaleString()}` }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: isStacked ? 'center' : 'flex-start', gap: 0.25 }, children: [jsx(Tooltip, { title: "First page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_first_page_icon`, size: "small", onClick: onFirst, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(FirstPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Previous page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_prev_page_icon`, size: "small", onClick: onPrev, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(ChevronLeftIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Typography, { fontWeight: 600, sx: {
                             mx: 0.5,
                             minWidth: density.footerMinHeight - 12,
                             height: density.footerMinHeight - 12,
@@ -224,14 +257,48 @@ 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 = 'default', uiDensityOptions, pageSizeOptions = [1000, 5000, 10000], showGlobalSearchByDefault = false, headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
-    const densityTokens = useMemo(() => ({ ...UI_DENSITY_PRESETS[uiDensity], ...uiDensityOptions }), [uiDensity, uiDensityOptions]);
+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, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, 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 —
+    // unless the consumer opts out via `disableResponsive` or pins `uiDensity`
+    // explicitly (density only).
+    const tier = useResponsiveTier(responsiveBreakpoints?.tablet ?? 1024, responsiveBreakpoints?.mobile ?? 640, !disableResponsive);
+    const isNarrow = tier !== 'desktop'; // tablet or mobile — density, toolbar wrap
+    const isMobileTier = tier === 'mobile'; // mobile only — footer stacking, tightest chip cap
+    const resolvedUiDensity = uiDensity ?? (isNarrow ? 'compact' : 'default');
+    const effectiveMaxVisibleFilters = disableResponsive
+        ? maxVisibleFilters
+        : tier === 'mobile'
+            ? Math.min(maxVisibleFilters, 2)
+            : tier === 'tablet'
+                ? Math.min(maxVisibleFilters, 3)
+                : maxVisibleFilters;
+    const densityTokens = useMemo(() => ({ ...UI_DENSITY_PRESETS[resolvedUiDensity], ...uiDensityOptions }), [resolvedUiDensity, uiDensityOptions]);
     const resolvedGridId = gridId ?? exportFilename;
-    const resolvedHeaderMinHeight = toCssSize(headerMinHeight, uiDensity === 'compact' ? '34px' : '40px');
-    const resolvedHeaderMaxHeight = toCssSize(headerMaxHeight, uiDensity === 'compact' ? '56px' : '72px');
-    const resolvedHeaderFontSize = toCssSize(headerFontSize ?? densityTokens.headerFontSize, uiDensity === 'compact' ? '11px' : '12px');
-    const resolvedBodyFontSize = toCssSize(bodyFontSize ?? densityTokens.bodyFontSize, uiDensity === 'compact' ? '11px' : '12px');
+    const resolvedHeaderMinHeight = toCssSize(headerMinHeight, resolvedUiDensity === 'compact' ? '34px' : '40px');
+    const resolvedHeaderMaxHeight = toCssSize(headerMaxHeight, resolvedUiDensity === 'compact' ? '56px' : '72px');
+    const resolvedHeaderFontSize = toCssSize(headerFontSize ?? densityTokens.headerFontSize, resolvedUiDensity === 'compact' ? '11px' : '12px');
+    const resolvedBodyFontSize = toCssSize(bodyFontSize ?? densityTokens.bodyFontSize, resolvedUiDensity === 'compact' ? '11px' : '12px');
     const tableStyleOverrides = useMemo(() => ({
+        // Static rules folded in here so the whole object comes from one useMemo
+        // and GlobalStyles receives a stable reference unless these props change.
+        'button[aria-label="Pin to right"]': { display: 'none' },
+        '.tp-gpg-root .MuiTableSortLabel-icon': { display: 'none !important' },
+        '.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' },
+        // Visible horizontal scrollbar — touch devices (iOS) hide scrollbars by
+        // default, leaving no affordance that a horizontally-overflowing table
+        // (common on narrow viewports) can be scrolled.
+        '.tp-gpg-root .MuiTableContainer-root::-webkit-scrollbar': {
+            height: 6,
+            width: 6,
+        },
+        '.tp-gpg-root .MuiTableContainer-root::-webkit-scrollbar-thumb': {
+            backgroundColor: 'rgba(0,0,0,0.25)',
+            borderRadius: 4,
+        },
         ...buildHeaderGlobalStyles(resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor),
         ...buildBodyGlobalStyles(resolvedBodyFontSize),
     }), [
@@ -400,10 +467,15 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     const handleToggleFilter = useCallback((id) => setVisibleFilterIds((prev) => {
         if (prev.includes(id))
             return prev.filter((v) => v !== id); // always allow remove
-        if (prev.length >= maxVisibleFilters)
+        if (prev.length >= effectiveMaxVisibleFilters)
             return prev; // cap reached — ignore add
         return [...prev, id];
-    }), [maxVisibleFilters]);
+    }), [effectiveMaxVisibleFilters]);
+    // Trim already-visible chips down to the new cap when the viewport narrows
+    // (e.g. resizing from desktop to mobile with 4 chips already shown).
+    useEffect(() => {
+        setVisibleFilterIds((prev) => prev.length > effectiveMaxVisibleFilters ? prev.slice(0, effectiveMaxVisibleFilters) : prev);
+    }, [effectiveMaxVisibleFilters]);
     const handleClearAll = useCallback(() => {
         setFilterValues(defaultFilters);
         setColumnFilters([]);
@@ -411,12 +483,15 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         setGlobalFilter('');
         setPagination((p) => ({ ...p, pageIndex: 0 }));
     }, [defaultFilters, defaultVisible]);
-    const handleExport = useCallback(() => {
+    const handleExport = useCallback(async () => {
+        // Loaded on demand (and cached) so the xlsx-js-style library is excluded
+        // from the initial bundle for consumers who never click Export.
+        const XLSX = await getXLSX();
         const dataCols = columns.filter((c) => 'accessorKey' in c && c.accessorKey);
         // xlsx-js-style requires 8-char ARGB (AA + RRGGBB). Prepend full-opacity "FF".
-        const headerArgb = headerBgColor?.startsWith('#')
-            ? 'FF' + headerBgColor.slice(1).toUpperCase().padEnd(6, '0')
-            : 'FF1565C0';
+        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 headerRow = dataCols.map((c) => c.header ?? '');
         const dataRows = rows.map((row) => dataCols.map((c) => String(row[c.accessorKey] ?? '')));
         const ws = XLSX.utils.aoa_to_sheet([headerRow, ...dataRows]);
@@ -426,7 +501,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             if (ws[cellRef]) {
                 ws[cellRef].s = {
                     fill: { patternType: 'solid', fgColor: { rgb: headerArgb } },
-                    font: { bold: true, color: { rgb: 'FFFFFFFF' }, sz: 10 },
+                    font: { bold: true, color: { rgb: textArgb }, sz: 10 },
                     alignment: { horizontal: 'center', vertical: 'center', wrapText: true },
                     border: {
                         bottom: { style: 'thin', color: { rgb: 'FFCCCCCC' } },
@@ -435,19 +510,94 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                 };
             }
         });
-        // Auto-fit column widths based on header + data content length
-        ws['!cols'] = dataCols.map((c) => {
-            const headerLen = (c.header ?? '').length;
-            const maxDataLen = rows.reduce((max, row) => {
-                const val = String(row[c.accessorKey] ?? '');
-                return Math.max(max, val.length);
-            }, 0);
-            return { wch: Math.max(headerLen, maxDataLen, 8) + 2 };
-        });
+        // 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);
+        for (const row of rows) {
+            const r = row;
+            for (let ci = 0; ci < dataCols.length; ci++) {
+                const len = String(r[dataCols[ci].accessorKey] ?? '').length;
+                if (len > colWidths[ci])
+                    colWidths[ci] = len;
+            }
+        }
+        ws['!cols'] = colWidths.map((w) => ({ wch: Math.max(w, 8) + 2 }));
         const wb = XLSX.utils.book_new();
         XLSX.utils.book_append_sheet(wb, ws, 'Data');
         XLSX.writeFile(wb, `${exportFilename}-page${pagination.pageIndex + 1}.xlsx`);
-    }, [columns, rows, exportFilename, pagination.pageIndex, headerBgColor]);
+    }, [columns, rows, exportFilename, pagination.pageIndex, headerBgColor, exportHeaderBgColor, exportHeaderTextColor]);
+    // ── 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.
+    const memoizedHeadCellProps = useCallback((params) => {
+        const { column, table } = params;
+        const colDef = column.columnDef.muiTableHeadCellProps;
+        const colResolved = typeof colDef === 'function' ? (colDef({ column, table }) ?? {}) : colDef ?? {};
+        const gridResolved = typeof gridHeadCellProps === 'function'
+            ? (gridHeadCellProps({ column, table }) ?? {})
+            : gridHeadCellProps ?? {};
+        const align = (colResolved.align ?? gridResolved.align ?? 'left');
+        const { sx: gridSx, align: _ga, ...gridRest } = gridResolved;
+        const { sx: colSx, align: _ca, ...colRest } = colResolved;
+        return {
+            ...gridRest,
+            ...colRest,
+            align,
+            sx: [
+                buildHeaderCellSx(align, resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor, headerMaxLines),
+                ...(gridSx ? [gridSx] : []),
+                ...(colSx ? [colSx] : []),
+            ],
+        };
+    }, [
+        resolvedHeaderMinHeight,
+        resolvedHeaderMaxHeight,
+        resolvedHeaderFontSize,
+        headerBgColor,
+        headerMaxLines,
+        gridHeadCellProps,
+    ]);
+    const memoizedBodyCellProps = useCallback((params) => {
+        const { cell, column, row, table } = params;
+        const colDef = column.columnDef.muiTableBodyCellProps;
+        const colResolved = typeof colDef === 'function' ? (colDef({ cell, column, row, table }) ?? {}) : colDef ?? {};
+        const gridResolved = typeof gridBodyCellProps === 'function'
+            ? (gridBodyCellProps({ cell, column, row, table }) ?? {})
+            : gridBodyCellProps ?? {};
+        const { sx: gridSx, ...gridRest } = gridResolved;
+        const { sx: colSx, ...colRest } = colResolved;
+        return {
+            ...gridRest,
+            ...colRest,
+            sx: [
+                {
+                    whiteSpace: 'nowrap',
+                    fontSize: resolvedBodyFontSize,
+                    lineHeight: 1.35,
+                    borderRight: '1px solid rgba(224,224,224,1)',
+                },
+                ...(gridSx ? [gridSx] : []),
+                ...(colSx ? [colSx] : []),
+            ],
+        };
+    }, [resolvedBodyFontSize, gridBodyCellProps]);
+    // ── 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.
+    const renderTopToolbarCustomActions = useCallback(() => (jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: isNarrow ? 'wrap' : 'nowrap',
+            flex: 1, minWidth: 0, pr: 1, gap: 0.5,
+        }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexShrink: 0, gap: 0.25 }, children: [jsx(Tooltip, { title: "Clear filters & refresh", children: jsx("span", { children: jsx(IconButton, { id: `${resolvedGridId}_refresh_icon`, size: "small", onClick: () => { handleClearAll(); refetch(); }, disabled: isFetching, sx: { p: resolvedUiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(RefreshIcon, { sx: { fontSize: resolvedUiDensity === 'compact' ? 18 : 20 } }) }) }) }), jsx(Tooltip, { title: "Export batch as Excel (.xlsx)", children: jsx("span", { children: jsx(IconButton, { id: `${resolvedGridId}_export_icon`, size: "small", onClick: handleExport, disabled: rows.length === 0 || isFetching, sx: { p: resolvedUiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(FileDownloadIcon, { sx: { fontSize: resolvedUiDensity === 'compact' ? 18 : 20 } }) }) }) })] }), jsx(Box, { sx: { flex: 1, minWidth: isNarrow ? '100%' : 0 }, children: jsx(DynamicFilterBar, { serverFilterDefs: serverFilterDefs, visibleFilterIds: visibleFilterIds, onToggleFilter: handleToggleFilter, filterValues: filterValues, onFilterValuesChange: handleFilterValuesChange, columnFilters: columnFilters, onColumnFilterChange: setColumnFilters, availableColumns: availableColumns, maxVisibleFilters: effectiveMaxVisibleFilters, uiDensity: resolvedUiDensity, filterChipFontSize: densityTokens.filterChipFontSize, filterChipMinHeight: densityTokens.filterChipMinHeight, filterLabelFontSize: densityTokens.filterLabelFontSize, gridId: resolvedGridId }) })] })), [
+        resolvedGridId, isFetching, rows.length, resolvedUiDensity, isNarrow,
+        handleClearAll, refetch, handleExport,
+        serverFilterDefs, visibleFilterIds, handleToggleFilter,
+        filterValues, handleFilterValuesChange, columnFilters, setColumnFilters,
+        availableColumns, effectiveMaxVisibleFilters, densityTokens, handleToggleFilter,
+    ]);
+    const renderToolbarInternalActions = useCallback(({ table: t }) => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [jsx(MRT_ToggleGlobalFilterButton, { table: t, id: `${resolvedGridId}_global_search_icon` }), jsx(MRT_ShowHideColumnsButton, { table: t, id: `${resolvedGridId}_columns_icon` }), jsx(MRT_ToggleDensePaddingButton, { table: t, id: `${resolvedGridId}_density_icon` }), jsx(MRT_ToggleFullScreenButton, { table: t, id: `${resolvedGridId}_fullscreen_icon` })] })), [resolvedGridId]);
+    const renderBottomToolbar = useCallback(({ table: t }) => (jsx(PaginationFooter, { pageIndex: t.getState().pagination.pageIndex, pageSize: t.getState().pagination.pageSize, totalRecords: totalRecords, isFetching: isFetching, isLoading: isLoading, canPrev: t.getCanPreviousPage() && !isFetching, canNext: t.getCanNextPage() && !isFetching, onFirst: () => t.firstPage(), onPrev: () => t.previousPage(), onNext: () => t.nextPage(), onLast: () => t.lastPage(), onPageSizeChange: (s) => t.setPageSize(s), pageSizeOptions: pageSizeOptions, density: densityTokens, gridId: resolvedGridId, isStacked: isMobileTier })), [totalRecords, isFetching, isLoading, pageSizeOptions, densityTokens, resolvedGridId, isMobileTier]);
     // ── Table instance ─────────────────────────────────────────────────────────
     const table = useMaterialReactTable({
         columns: processedColumns,
@@ -544,6 +694,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                 minHeight: 0,
                 maxHeight: '100%',
                 overflow: 'auto',
+                WebkitOverflowScrolling: 'touch',
             },
         },
         muiTablePaperProps: {
@@ -559,10 +710,10 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         muiTopToolbarProps: {
             sx: {
                 alignItems: 'center',
-                flexWrap: 'nowrap',
+                flexWrap: isNarrow ? 'wrap' : 'nowrap',
                 minHeight: densityTokens.filterChipMinHeight + 12,
-                py: uiDensity === 'compact' ? 0.25 : 0.5,
-                '& .MuiIconButton-root': { p: uiDensity === 'compact' ? 0.35 : 0.5 },
+                py: resolvedUiDensity === 'compact' ? 0.25 : 0.5,
+                '& .MuiIconButton-root': { p: resolvedUiDensity === 'compact' ? 0.35 : 0.5 },
                 '& .MuiIconButton-root svg': { fontSize: densityTokens.toolbarIconFontSize === 'small' ? 18 : 20 },
             },
         },
@@ -573,7 +724,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             size: 'small',
             variant: 'outlined',
             sx: {
-                minWidth: uiDensity === 'compact' ? 160 : 200,
+                minWidth: resolvedUiDensity === 'compact' ? 160 : 200,
                 '& .MuiOutlinedInput-root': {
                     height: densityTokens.filterChipMinHeight,
                     fontSize: densityTokens.filterChipFontSize,
@@ -604,69 +755,16 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                 ...(headerBgColor ? { backgroundColor: headerBgColor } : {}),
             },
         },
-        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: (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] : []),
-                ],
-            };
-        },
+        muiTableHeadCellProps: memoizedHeadCellProps,
+        muiTableBodyCellProps: memoizedBodyCellProps,
         muiToolbarAlertBannerProps: isError
             ? { color: 'error', children: 'Failed to load data. Please try again.' }
             : undefined,
-        renderTopToolbarCustomActions: () => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0, pr: 1, gap: 0.5 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexShrink: 0, gap: 0.25 }, children: [jsx(Tooltip, { title: "Clear filters & refresh", children: jsx("span", { children: jsx(IconButton, { id: `${resolvedGridId}_refresh_icon`, size: "small", onClick: () => { handleClearAll(); refetch(); }, disabled: isFetching, sx: { p: uiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(RefreshIcon, { sx: { fontSize: uiDensity === 'compact' ? 18 : 20 } }) }) }) }), jsx(Tooltip, { title: "Export batch as Excel (.xlsx)", children: jsx("span", { children: jsx(IconButton, { id: `${resolvedGridId}_export_icon`, size: "small", onClick: handleExport, disabled: rows.length === 0 || isFetching, sx: { p: uiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(FileDownloadIcon, { sx: { fontSize: uiDensity === 'compact' ? 18 : 20 } }) }) }) })] }), jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: jsx(DynamicFilterBar, { serverFilterDefs: serverFilterDefs, visibleFilterIds: visibleFilterIds, onToggleFilter: handleToggleFilter, filterValues: filterValues, onFilterValuesChange: handleFilterValuesChange, columnFilters: columnFilters, onColumnFilterChange: setColumnFilters, availableColumns: availableColumns, maxVisibleFilters: maxVisibleFilters, uiDensity: uiDensity, filterChipFontSize: densityTokens.filterChipFontSize, filterChipMinHeight: densityTokens.filterChipMinHeight, filterLabelFontSize: densityTokens.filterLabelFontSize, gridId: resolvedGridId }) })] })),
-        // Single global search control: MRT's built-in search icon/input in the
-        // top-right toolbar actions. The inline search box next to "Manage
-        // Filters" is intentionally not rendered (see renderTopToolbarCustomActions)
-        // to avoid showing two search controls.
-        renderToolbarInternalActions: ({ table: t }) => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [jsx(MRT_ToggleGlobalFilterButton, { table: t, id: `${resolvedGridId}_global_search_icon` }), jsx(MRT_ShowHideColumnsButton, { table: t, id: `${resolvedGridId}_columns_icon` }), jsx(MRT_ToggleDensePaddingButton, { table: t, id: `${resolvedGridId}_density_icon` }), jsx(MRT_ToggleFullScreenButton, { table: t, id: `${resolvedGridId}_fullscreen_icon` })] })),
-        renderBottomToolbar: ({ table: t }) => (jsx(PaginationFooter, { pageIndex: t.getState().pagination.pageIndex, pageSize: t.getState().pagination.pageSize, totalRecords: totalRecords, isFetching: isFetching, isLoading: isLoading, canPrev: t.getCanPreviousPage() && !isFetching, canNext: t.getCanNextPage() && !isFetching, onFirst: () => t.firstPage(), onPrev: () => t.previousPage(), onNext: () => t.nextPage(), onLast: () => t.lastPage(), onPageSizeChange: (s) => t.setPageSize(s), pageSizeOptions: pageSizeOptions, density: densityTokens, gridId: resolvedGridId })),
+        // Memoized via useCallback above — stable references prevent MRT from
+        // re-rendering the toolbar on every isFetching / data update cycle.
+        renderTopToolbarCustomActions,
+        renderToolbarInternalActions,
+        renderBottomToolbar,
     });
     return (jsxs(Box, { ref: containerRef, id: resolvedGridId, className: "tp-gpg-root", sx: {
             position: 'relative',
@@ -676,14 +774,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             display: 'flex',
             flexDirection: 'column',
             overflow: 'hidden',
-        }, children: [jsx(GlobalStyles, { styles: {
-                    'button[aria-label="Pin to right"]': { display: 'none' },
-                    '.tp-gpg-root .MuiTableSortLabel-icon': { display: 'none !important' },
-                    '.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' },
-                    ...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 }) })] }));
+        }, children: [jsx(GlobalStyles, { styles: tableStyleOverrides }), isLoading && jsx(SkeletonOverlay, { columnCount: processedColumns.length }), !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 }) })] }));
 }
 
 export { GenericPaginatedGrid as default };

package/dist/components/SelectField/MultiSelectFieldComponent.esm.js

@@ -6,7 +6,7 @@ import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 import * as React from 'react';
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 
 const ITEM_HEIGHT = 36;
 const ITEM_PADDING_TOP = 2;
@@ -52,11 +52,11 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
             setSelectAll(false);
         }
     }, [filterOptions, fieldValue]);
-    const handleChange = (event) => {
+    const handleChange = useCallback((event) => {
         const { target: { value }, } = event;
         setPersonName(typeof value === 'string' ? value?.split(',') : value);
         onChangeFn((typeof value === 'string' ? value?.split(',') : value).join(','));
-    };
+    }, [onChangeFn]);
     const selectedOptions = options.filter((item) => fieldValue?.split(',').some((value) => value === item.value));
     const selectedValues = selectedOptions.map((item) => item.label).join(' , ');
     return (jsx(Box, { children: jsx(FormControl, { fullWidth: true, ref: containerRef, sx: {