tp-react-elements 2.0.2 → 2.0.3

package/README.md

@@ -203,7 +203,9 @@ npm run storybook
 
 - **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
+- **Components → PaginatedGrid → Example Grid** — invoice grid demo using mock data (no API)
+
+**Global Search:** every `GenericPaginatedGrid` includes a built-in search icon in the top-right toolbar (next to Show/Hide Columns, Density, and Fullscreen) — no extra props needed. Click it to expand a free-text search that filters across all visible columns of the current batch. See **Docs → Paginated Grid → Global search**.
 
 **Example — compact embedded grid with smaller fonts:**
 

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

@@ -1,3 +1,3 @@
-var DateRangePicker = {};
+var DefinedRange = {};
 
-export { DateRangePicker as __exports };
+export { DefinedRange 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/FormComponents/Select/MultiSelect.d.ts

@@ -1,2 +1,12 @@
+/**
+ * `MultiSelect` is currently a stub placeholder pending activation.
+ *
+ * Use one of these fully-implemented alternatives instead:
+ * - `MultiSelectAutocomplete` (react-hook-form aware) — Docs → Multi Select Autocomplete
+ * - `MultiSelectField` (standalone) — Docs → Multi Select Field
+ * - `MultiSelectV1` (react-hook-form aware, used via FormRender `inputType: 'multiselect'`)
+ *
+ * See Docs → Multi Select (docs/multi-select.mdx) for status details.
+ */
 declare const MultiSelect: () => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

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

@@ -127,6 +127,16 @@ export interface DynamicFilterBarProps {
     filterChipFontSize?: number;
     filterChipMinHeight?: number;
     filterLabelFontSize?: number;
+    /**
+     * Current value of MRT's global filter (free-text search across every
+     * visible column). When provided together with `onGlobalFilterChange`, a
+     * search box is rendered next to "Manage Filters".
+     */
+    globalFilter?: string;
+    /** Called (debounced) as the user types in the global search box. */
+    onGlobalFilterChange?: (value: string) => void;
+    /** Placeholder text for the global search box. Default: "Search…". */
+    globalSearchPlaceholder?: string;
 }
-declare const DynamicFilterBar: ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters, uiDensity, filterChipFontSize, filterChipMinHeight, filterLabelFontSize, }: DynamicFilterBarProps) => import("react/jsx-runtime").JSX.Element;
-export default DynamicFilterBar;
+declare const _default: import("react").MemoExoticComponent<({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters, uiDensity, filterChipFontSize, filterChipMinHeight, filterLabelFontSize, globalFilter, onGlobalFilterChange, globalSearchPlaceholder, }: DynamicFilterBarProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -1,5 +1,5 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo, useState, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -9,7 +9,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
-import { Box, Typography, Tooltip, Button, Popover, TextField, Stack, InputAdornment, List, ListItemButton, ListItemText, Checkbox, Divider } from '@mui/material';
+import { TextField, InputAdornment, IconButton, Box, Typography, Tooltip, Button, Popover, Stack, List, ListItemButton, ListItemText, Checkbox, Divider } from '@mui/material';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import TuneIcon from '@mui/icons-material/Tune';
 import CloseIcon from '@mui/icons-material/Close';
@@ -281,6 +281,41 @@ const MultiSelectFilterChip = ({ label, selectedValues, options, onApply, onRemo
                                         } })] }, opt.value));
                         }) })] })] }));
 };
+const GlobalSearchInput = memo(({ value, onChange, chipStyle, placeholder = 'Search…' }) => {
+    const [draft, setDraft] = useState(value);
+    // Keep local draft in sync when the external value changes elsewhere
+    // (e.g. "Clear filters & refresh" resets globalFilter to '').
+    useEffect(() => {
+        setDraft(value);
+    }, [value]);
+    // Debounce: push to parent (and trigger MRT's global filter) 250ms after typing stops.
+    useEffect(() => {
+        if (draft === value)
+            return;
+        const handle = setTimeout(() => onChange(draft), 250);
+        return () => clearTimeout(handle);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [draft]);
+    const handleClear = () => {
+        setDraft('');
+        onChange('');
+    };
+    return (jsx(TextField, { value: draft, onChange: (e) => setDraft(e.target.value), placeholder: placeholder, size: "small", variant: "outlined", "aria-label": "Search all columns", InputProps: {
+            startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(SearchIcon, { sx: { fontSize: 16, color: 'text.disabled' } }) })),
+            endAdornment: draft ? (jsx(InputAdornment, { position: "end", children: jsx(IconButton, { size: "small", onClick: handleClear, "aria-label": "Clear search", sx: { p: 0.25 }, children: jsx(CloseIcon, { sx: { fontSize: '14px !important' } }) }) })) : undefined,
+        }, sx: {
+            minWidth: 160,
+            maxWidth: 220,
+            flexShrink: 0,
+            '& .MuiOutlinedInput-root': {
+                borderRadius: 5,
+                fontSize: chipStyle.fontSize,
+                height: chipStyle.minHeight,
+            },
+            '& .MuiOutlinedInput-input': { py: 0 },
+        } }));
+});
+GlobalSearchInput.displayName = 'GlobalSearchInput';
 const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, onToggle, maxVisible = 4, chipStyle, }) => {
     const [anchor, setAnchor] = useState(null);
     const atLimit = visibleIds.length >= maxVisible;
@@ -327,7 +362,7 @@ const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, o
                                                                 } }), selected && jsx(CheckIcon, { sx: { fontSize: 16, color: 'primary.main', flexShrink: 0 } })] }) }) }, col.id));
                                         }) })] }))] })] })] }));
 };
-const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters = 4, uiDensity = 'default', filterChipFontSize, filterChipMinHeight, filterLabelFontSize, }) => {
+const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters = 4, uiDensity = 'default', filterChipFontSize, filterChipMinHeight, filterLabelFontSize, globalFilter, onGlobalFilterChange, globalSearchPlaceholder, }) => {
     const chipStyle = {
         fontSize: filterChipFontSize ?? (uiDensity === 'compact' ? 11 : 12),
         minHeight: filterChipMinHeight ?? (uiDensity === 'compact' ? 26 : 30),
@@ -416,7 +451,8 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
                 }
                 // Default: free-text input
                 return (jsx(TextFilterChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), placeholder: `Filter by ${col.label}`, chipStyle: chipStyle }, id));
-            }), jsx(ManageFiltersButton, { serverFilterDefs: serverFilterDefs, visibleIds: visibleFilterIds, availableColumns: availableColumns, onToggle: onToggleFilter, maxVisible: maxVisibleFilters, chipStyle: chipStyle })] }));
+            }), jsx(ManageFiltersButton, { serverFilterDefs: serverFilterDefs, visibleIds: visibleFilterIds, availableColumns: availableColumns, onToggle: onToggleFilter, maxVisible: maxVisibleFilters, chipStyle: chipStyle }), onGlobalFilterChange && (jsx(GlobalSearchInput, { value: globalFilter ?? '', onChange: onGlobalFilterChange, chipStyle: chipStyle, placeholder: globalSearchPlaceholder }))] }));
 };
+var DynamicFilterBar$1 = memo(DynamicFilterBar);
 
-export { DynamicFilterBar as default };
+export { DynamicFilterBar$1 as default };

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

@@ -91,6 +91,13 @@ export interface GenericPaginatedGridProps<TData extends object> {
     uiDensityOptions?: GridUiDensityOptions;
     /** Choices shown in the "Rows per page" footer dropdown. Default: [1 000, 5 000, 10 000]. */
     pageSizeOptions?: number[];
+    /**
+     * Show the Global Search input expanded by default (instead of requiring a
+     * click on the search icon to reveal it). The icon remains in the top-right
+     * toolbar actions and can still be used to collapse/expand the input.
+     * Default: `true`.
+     */
+    showGlobalSearchByDefault?: boolean;
     /**
      * Background colour applied to every header cell.
      * Accepts any valid CSS colour string.
@@ -185,5 +192,5 @@ export interface GenericPaginatedGridProps<TData extends object> {
      */
     enableExpanding?: boolean;
 }
-declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, pageSizeOptions, headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding, }: 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, showGlobalSearchByDefault, headerBgColor, 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,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo, useState, useRef, useLayoutEffect } from 'react';
-import { useMaterialReactTable, MaterialReactTable } from 'material-react-table';
+import { useMemo, useState, useRef, useLayoutEffect, useCallback } from 'react';
+import { useMaterialReactTable, MRT_ToggleGlobalFilterButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFullScreenButton, 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 RefreshIcon from '@mui/icons-material/Refresh';
@@ -221,7 +221,7 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
                         }, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onNext, disabled: !canNext, sx: { p: 0.5 }, children: jsx(ChevronRightIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Last page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onLast, disabled: !canNext, sx: { p: 0.5 }, children: jsx(LastPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) })] })] }));
 };
 // ─── GenericPaginatedGrid ─────────────────────────────────────────────────────
-function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity = 'default', uiDensityOptions, pageSizeOptions = [1000, 5000, 10000], headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
+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], showGlobalSearchByDefault = true, 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]);
     const resolvedHeaderMinHeight = toCssSize(headerMinHeight, uiDensity === 'compact' ? '34px' : '40px');
     const resolvedHeaderMaxHeight = toCssSize(headerMaxHeight, uiDensity === 'compact' ? '56px' : '72px');
@@ -241,7 +241,11 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     //  1. explicit defaultVisibleFilterIds prop (override)
     //  2. server filters + column filters that have defaultVisible: true
     //  3. first server filter only (original fallback)
-    const defaultVisible = defaultVisibleFilterIds
+    //
+    // Memoized so identity stays stable across re-renders (e.g. while
+    // `isFetching` toggles) — used as a `useCallback` dependency below and as
+    // the reset target for "Clear All".
+    const defaultVisible = useMemo(() => defaultVisibleFilterIds
         ?? (() => {
             // Server-side chips with defaultVisible: true
             const markedServer = serverFilterDefs
@@ -266,7 +270,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             return marked.length > 0
                 ? marked
                 : serverFilterDefs.length > 0 ? [serverFilterDefs[0].id] : [];
-        })();
+        })(), [defaultVisibleFilterIds, serverFilterDefs, columns]);
     // ── State ──────────────────────────────────────────────────────────────────
     const [filterValues, setFilterValues] = useState(defaultFilters);
     const [visibleFilterIds, setVisibleFilterIds] = useState(defaultVisible);
@@ -382,24 +386,28 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         }));
     }, [columns, serverFilterDefs]);
     // ── Handlers ───────────────────────────────────────────────────────────────
-    const handleFilterValuesChange = (newValues) => {
+    // Wrapped in useCallback so stable references can be passed down to the
+    // memoized DynamicFilterBar/chip components without forcing re-renders on
+    // every parent render (e.g. while `isFetching` toggles).
+    const handleFilterValuesChange = useCallback((newValues) => {
         setFilterValues(newValues);
         setPagination((p) => ({ ...p, pageIndex: 0 }));
-    };
-    const handleToggleFilter = (id) => setVisibleFilterIds((prev) => {
+    }, []);
+    const handleToggleFilter = useCallback((id) => setVisibleFilterIds((prev) => {
         if (prev.includes(id))
             return prev.filter((v) => v !== id); // always allow remove
         if (prev.length >= maxVisibleFilters)
             return prev; // cap reached — ignore add
         return [...prev, id];
-    });
-    const handleClearAll = () => {
+    }), [maxVisibleFilters]);
+    const handleClearAll = useCallback(() => {
         setFilterValues(defaultFilters);
         setColumnFilters([]);
         setVisibleFilterIds(defaultVisible);
+        setGlobalFilter('');
         setPagination((p) => ({ ...p, pageIndex: 0 }));
-    };
-    const handleExport = () => {
+    }, [defaultFilters, defaultVisible]);
+    const handleExport = useCallback(() => {
         const headers = columns.map((c) => c.header).join(',');
         const csvRows = rows.map((row) => columns
             .map((c) => {
@@ -415,7 +423,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         a.download = `${exportFilename}-page${pagination.pageIndex + 1}.csv`;
         a.click();
         URL.revokeObjectURL(url);
-    };
+    }, [columns, rows, exportFilename, pagination.pageIndex]);
     // ── Table instance ─────────────────────────────────────────────────────────
     const table = useMaterialReactTable({
         columns: processedColumns,
@@ -484,7 +492,15 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         columnResizeMode: 'onChange',
         enableExpanding,
         renderDetailPanel,
-        enableFilters: false,
+        // Note: `enableFilters` is the master switch for column AND global
+        // filtering. Keep it enabled so the Global Search box (which relies on
+        // `getCanGlobalFilter()`) actually filters rows. MRT's native per-column
+        // filter inputs are hidden separately via `enableColumnFilters: false` —
+        // column-level filtering still works because DynamicFilterBar's chips
+        // operate on `columnFilters` state directly (column.getFilterFn() is
+        // used regardless of this flag).
+        enableFilters: true,
+        enableColumnFilters: false,
         enableGlobalFilter: true,
         enableDensityToggle: true,
         enableFullScreenToggle: true,
@@ -493,6 +509,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         enableRowVirtualization: true,
         initialState: {
             density: densityTokens.mrtDensity,
+            showGlobalFilter: showGlobalSearchByDefault,
         },
         muiTableProps: {
             sx: { width: '100%' },
@@ -525,6 +542,27 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                 '& .MuiIconButton-root svg': { fontSize: densityTokens.toolbarIconFontSize === 'small' ? 18 : 20 },
             },
         },
+        // Align the Global Search field's icon/size with the other toolbar
+        // icons (Show/Hide Columns, Density, Fullscreen) so it blends in
+        // instead of appearing oversized.
+        muiSearchTextFieldProps: {
+            size: 'small',
+            variant: 'outlined',
+            sx: {
+                minWidth: uiDensity === 'compact' ? 160 : 200,
+                '& .MuiOutlinedInput-root': {
+                    height: densityTokens.filterChipMinHeight,
+                    fontSize: densityTokens.filterChipFontSize,
+                },
+                // The leading search icon is rendered as a plain <SearchIcon />
+                // direct child of the input (not inside an IconButton), so size it
+                // to match the other top-toolbar action icons. The trailing clear
+                // (×) icon is inside an IconButton/InputAdornment.
+                '& .MuiOutlinedInput-root > .MuiSvgIcon-root, & .MuiInputAdornment-root .MuiSvgIcon-root': {
+                    fontSize: densityTokens.toolbarIconFontSize === 'small' ? 18 : 20,
+                },
+            },
+        },
         muiTableHeadProps: {
             sx: {
                 position: 'sticky',
@@ -599,6 +637,11 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             ? { 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, { 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 CSV", children: jsx("span", { children: jsx(IconButton, { 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 }) })] })),
+        // 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 }), jsx(MRT_ShowHideColumnsButton, { table: t }), jsx(MRT_ToggleDensePaddingButton, { table: t }), jsx(MRT_ToggleFullScreenButton, { table: t })] })),
         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 })),
     });
     return (jsxs(Box, { ref: containerRef, className: "tp-gpg-root", sx: {

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

@@ -1,7 +1,7 @@
 /**
  * Mock data + fetch adapters for Storybook sample grids (no API required).
  */
-import type { TPColumnDef } from './types';
+import type { TPColumnDef, InvoiceDetail } from './types';
 import type { PagedResult } from './GenericPaginatedGrid';
 import type { ServerFilterDef } from './DynamicFilterBar';
 export interface EmployeeRow {
@@ -54,6 +54,14 @@ export declare const orderColumns: TPColumnDef<OrderRow>[];
 export declare const orderFilterDefs: ServerFilterDef[];
 export declare const orderDefaultFilters: Record<string, string>;
 export declare function fetchOrderPage(filters: Record<string, string>, pageIndex: number, pageSize?: number): Promise<PagedResult<OrderRow>>;
+/**
+ * Mock `fetchPage` adapter for `InvoiceGrid` — pure in-memory data, no API
+ * calls. Filters the `ALL_INVOICES` array using the same filter keys
+ * (`FromDate`, `ToDate`, `Division`, `Customer`, `DC`, `ProductCode`) that the
+ * server filter chips already produce, so `InvoiceGrid.tsx` and its Storybook
+ * stories work unchanged.
+ */
+export declare function fetchInvoicePage(filters: Record<string, string>, pageIndex: number, pageSize?: number): Promise<PagedResult<InvoiceDetail>>;
 export interface OrderLineItem {
     itemId: number;
     productCode: string;

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

@@ -107,20 +107,3 @@ export interface InvoiceDetail {
     changeddate: string;
     SHIP_TO_PARTY: string;
 }
-export interface InvoiceRequest {
-    FromDate: string;
-    ToDate: string;
-    Division: string;
-    Customer: string;
-    DC: string;
-    ProductCode: string;
-    PageNumber: number;
-}
-export interface InvoiceApiResponse {
-    PageNumber: number;
-    PageSize: number;
-    TotalRecords: number;
-    TotalPages: number;
-    HasNextPage: boolean;
-    Data: InvoiceDetail[];
-}

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

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm5.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm7.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

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

@@ -1,4 +1,4 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm13.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm14.js';
 import React__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/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 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.esm6.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.esm13.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/package.json

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

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

@@ -1,2 +0,0 @@
-import type { InvoiceRequest, InvoiceApiResponse } from './types';
-export declare const fetchInvoiceDetails: (request: InvoiceRequest) => Promise<InvoiceApiResponse>;