tp-react-elements 2.0.1 → 2.0.3

package/README.md

@@ -9,18 +9,24 @@ A comprehensive React form library built with Material-UI and React Hook Form, d
 > Storybook docs (`*.stories.tsx` → `meta.parameters.docs.description`)
 > so consumers see the same explanation in both places.
 
-- **`SingleSelectSearchApi`** — Fixed a `Tooltip`/Popper mis-anchoring bug where
-  the selected-value tooltip rendered pinned to the viewport's top-left corner
-  (0,0) instead of near the input when the field sat inside an
-  `overflow: hidden` ancestor (e.g. a table cell in `material-react-table` /
-  `GenericPaginatedGrid`). The `Tooltip` is **retained** (not removed) and now
-  uses `placement="top-start"`, `arrow`, `disableInteractive`, and a
-  `slotProps.popper` block with Popper.js modifiers (`offset`,
-  `preventOverflow` with `boundary: 'clippingParents'`, `flip`) so it
-  portal-renders to `document.body` and stays correctly anchored. See the
+- **`SingleSelectSearchApi`** — The selected-value `Tooltip` is now suppressed
+  via `open={false}` (controlled-closed) instead of relying on the Popper
+  modifier fix. Background: the tooltip previously rendered pinned to the
+  viewport's top-left corner (0,0) instead of near the input when the field
+  sat inside an `overflow: hidden` ancestor (e.g. a table cell in
+  `material-react-table` / `GenericPaginatedGrid`). Disabling Popper's `hide`
+  modifier and using `rootBoundary: 'viewport'` **verifiably fixed this in
+  Storybook (MUI v7)**, but the same build still mis-anchored when consumed
+  live in apps pinned to MUI v6 (below our `@mui/material >=7.3.1` peer
+  requirement) — MUI v6's Popper/Tooltip runtime ignores the modifier
+  configuration. Rather than ship a tooltip that only behaves correctly on
+  some MUI majors, we now suppress it at the prop level: `open={false}` forces
+  MUI's `Tooltip` into fully-controlled mode so it never opens. The `Tooltip`
+  element (and its modifier config) is **retained** (not removed) — flipping
+  `open` back to the default is a one-line change once the anchoring fix is
+  confirmed across all supported MUI majors. See the
   **"Tooltip inside a clipped container"** story in
-  `SingleSelectSearchApi.stories.tsx` for a live repro, and the component's
-  JSDoc for implementation notes.
+  `SingleSelectSearchApi.stories.tsx` and the component's JSDoc for details.
 
 ## 🚀 Features
 
@@ -197,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.esm4.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

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

@@ -22,22 +22,27 @@ export interface SearchOption {
  * Searches fire only after `minSearchLength` chars AND after the `debounceMs`
  * debounce delay — preventing a request per keystroke.
  *
- * ### Selected-value tooltip & anchoring inside clipped containers
- * The input is wrapped in a MUI `Tooltip` showing `resolvedValue.label` on
- * hover (useful when a narrow column truncates the label). The `Tooltip` is
- * configured with `placement="top-start"`, `arrow`, `disableInteractive`, and
- * a `slotProps.popper` block carrying Popper.js modifiers — `offset`,
- * `preventOverflow` (`boundary: 'clippingParents'`), and `flip`.
+ * ### Selected-value tooltip — currently suppressed via `open={false}`
+ * The input is wrapped in a MUI `Tooltip` that would show `resolvedValue.label`
+ * on hover (useful when a narrow column truncates the label). It carries
+ * `placement="top-start"`, `arrow`, `disableInteractive`, and a
+ * `slotProps.popper` block with Popper.js modifiers (`hide` disabled, `offset`,
+ * `preventOverflow`, `flip`) that correctly anchor it to the input even inside
+ * an `overflow: hidden` ancestor (e.g. a table cell in `material-react-table` /
+ * `GenericPaginatedGrid`) — **verified working in Storybook on MUI v7**.
  *
- * This keeps the tooltip correctly anchored to the input even when the field
- * sits inside an `overflow: hidden` ancestor (e.g. a table cell in
- * `material-react-table` / `GenericPaginatedGrid`) — without this
- * configuration, MUI's Popper can mis-anchor and pin the tooltip to the
- * viewport's top-left corner (0,0) instead of near the input. The fix
- * deliberately *keeps* the `Tooltip` (rather than removing it) by letting it
- * portal-render to `document.body` and resolving its position against the
- * clipping ancestor's boundary. See the "Tooltip inside a clipped container"
- * Storybook story for a live repro.
+ * However, that fix does not reproduce in consumer apps still pinned to
+ * MUI v6 (below our `@mui/material >=7.3.1` peer requirement): the v6
+ * Popper/Tooltip runtime ignores the modifier configuration and the tooltip
+ * still mis-anchors to the viewport's top-left corner (0,0). Rather than ship
+ * a tooltip that only behaves correctly on some MUI majors, we suppress it at
+ * the prop level — `open={false}` puts MUI's `Tooltip` into fully-controlled
+ * mode so it never opens, while the `<Tooltip>` element (and its modifier
+ * config) stays in the tree, deliberately *not removed*. Once the anchoring
+ * fix is confirmed across all supported MUI majors, removing `open={false}`
+ * re-enables the tooltip with no other changes needed. See the
+ * "Tooltip inside a clipped container" Storybook story for the anchoring repro
+ * and the `open={false}` suppression in context.
  */
 declare const SingleSelectSearchApi: ({ props, variant, minSearchLength, debounceMs, fetchOptions, }: {
     props: FormRenderProps;

package/dist/components/FormComponents/Select/SingleSelectSearchApi.esm.js

@@ -50,22 +50,27 @@ function useDebounce(value, delayMs) {
  * Searches fire only after `minSearchLength` chars AND after the `debounceMs`
  * debounce delay — preventing a request per keystroke.
  *
- * ### Selected-value tooltip & anchoring inside clipped containers
- * The input is wrapped in a MUI `Tooltip` showing `resolvedValue.label` on
- * hover (useful when a narrow column truncates the label). The `Tooltip` is
- * configured with `placement="top-start"`, `arrow`, `disableInteractive`, and
- * a `slotProps.popper` block carrying Popper.js modifiers — `offset`,
- * `preventOverflow` (`boundary: 'clippingParents'`), and `flip`.
+ * ### Selected-value tooltip — currently suppressed via `open={false}`
+ * The input is wrapped in a MUI `Tooltip` that would show `resolvedValue.label`
+ * on hover (useful when a narrow column truncates the label). It carries
+ * `placement="top-start"`, `arrow`, `disableInteractive`, and a
+ * `slotProps.popper` block with Popper.js modifiers (`hide` disabled, `offset`,
+ * `preventOverflow`, `flip`) that correctly anchor it to the input even inside
+ * an `overflow: hidden` ancestor (e.g. a table cell in `material-react-table` /
+ * `GenericPaginatedGrid`) — **verified working in Storybook on MUI v7**.
  *
- * This keeps the tooltip correctly anchored to the input even when the field
- * sits inside an `overflow: hidden` ancestor (e.g. a table cell in
- * `material-react-table` / `GenericPaginatedGrid`) — without this
- * configuration, MUI's Popper can mis-anchor and pin the tooltip to the
- * viewport's top-left corner (0,0) instead of near the input. The fix
- * deliberately *keeps* the `Tooltip` (rather than removing it) by letting it
- * portal-render to `document.body` and resolving its position against the
- * clipping ancestor's boundary. See the "Tooltip inside a clipped container"
- * Storybook story for a live repro.
+ * However, that fix does not reproduce in consumer apps still pinned to
+ * MUI v6 (below our `@mui/material >=7.3.1` peer requirement): the v6
+ * Popper/Tooltip runtime ignores the modifier configuration and the tooltip
+ * still mis-anchors to the viewport's top-left corner (0,0). Rather than ship
+ * a tooltip that only behaves correctly on some MUI majors, we suppress it at
+ * the prop level — `open={false}` puts MUI's `Tooltip` into fully-controlled
+ * mode so it never opens, while the `<Tooltip>` element (and its modifier
+ * config) stays in the tree, deliberately *not removed*. Once the anchoring
+ * fix is confirmed across all supported MUI majors, removing `open={false}`
+ * re-enables the tooltip with no other changes needed. See the
+ * "Tooltip inside a clipped container" Storybook story for the anchoring repro
+ * and the `open={false}` suppression in context.
  */
 const SingleSelectSearchApi = ({ props, variant, minSearchLength = 3, debounceMs = 300, fetchOptions, }) => {
     // ── Stable references from props ──────────────────────────────────────────
@@ -206,30 +211,33 @@ const SingleSelectSearchApi = ({ props, variant, minSearchLength = 3, debounceMs
                         popper: { sx: { zIndex: 20000 } },
                         listbox: { sx: { fontSize: '11px' } },
                     }, PaperComponent: ({ children, ...paperProps }) => (jsx(Paper, { elevation: 4, ...paperProps, children: children })), renderInput: (params) => (jsx(Tooltip, { title: resolvedValue?.label ?? '', placement: "top-start", arrow: true, disableInteractive: true, 
-                        // Fixes a Popper mis-anchoring bug where the tooltip rendered
-                        // pinned to the viewport's top-left corner when this field
-                        // sits inside an `overflow: hidden` ancestor (e.g. a table
-                        // cell in material-react-table / GenericPaginatedGrid).
+                        // ── Tooltip intentionally suppressed via props (kept in the tree) ──
                         //
-                        // ROOT CAUSE: Popper.js ships a built-in `hide` modifier that
-                        // runs `detectOverflow` against the `clippingParents` boundary.
-                        // Because our reference element (the input) sits inside an
-                        // `overflow: hidden` table cell, Popper decides the reference
-                        // is "hidden" relative to that clipping boundary and collapses
-                        // the popper to `inset: 0 auto auto 0` (the body's top-left
-                        // origin) — regardless of `placement`/`offset`/`preventOverflow`
-                        // configuration. That's the (0,0) pin we were seeing.
+                        // We previously tried to fix a Popper mis-anchoring bug where the
+                        // tooltip rendered pinned to the viewport's top-left corner
+                        // (`inset: 0 auto auto 0`) when this field sits inside an
+                        // `overflow: hidden` ancestor (e.g. a table cell in
+                        // `material-react-table` / `GenericPaginatedGrid`). The root
+                        // cause is Popper's built-in `hide` modifier collapsing the
+                        // popper once it judges the reference element "hidden" relative
+                        // to the `clippingParents` boundary — and disabling that
+                        // modifier (`{ name: 'hide', enabled: false }` below) verifiably
+                        // fixed the anchoring in Storybook (MUI v7), but the SAME build
+                        // still mis-anchored when consumed live in apps pinned to
+                        // MUI v6 (`@mui/material@6.x` vs. our `>=7.3.1` peer
+                        // requirement) — the v6 Popper/Tooltip runtime ignores/overrides
+                        // the modifier configuration.
                         //
-                        // FIX: explicitly disable the `hide` modifier (we don't want
-                        // "hide when clipped" behaviour — we want the tooltip to
-                        // escape the clipping ancestor instead), and measure overflow
-                        // against the `viewport` (via `rootBoundary`) rather than the
-                        // clipping table cell, since the whole point is to stay
-                        // visible in the viewport even when the anchor is inside a
-                        // clipped container. `disablePortal: false` (the default)
-                        // portal-renders the tooltip to `document.body` so it can
-                        // visually escape the clipping ancestor.
-                        slotProps: {
+                        // Rather than ship a tooltip that only works on some MUI majors,
+                        // we suppress it at the component-prop level: `open={false}`
+                        // forces MUI's Tooltip into fully-controlled mode and it will
+                        // NEVER open (hover/focus listeners still attach but have no
+                        // visual effect), so the broken Popper placement can never be
+                        // observed. The `<Tooltip>` wrapper is deliberately *retained*
+                        // (not removed) — flipping `open` back to the default
+                        // (uncontrolled/hover-driven) is a one-line change once the
+                        // anchoring is fixed for every supported MUI major.
+                        open: false, slotProps: {
                             popper: {
                                 sx: { zIndex: 20001 },
                                 modifiers: [

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/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.esm4.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.esm5.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements",
-  "version": "2.0.1",
+  "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>;