tp-react-elements 3.0.1 → 3.0.2

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

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

package/dist/components/Form/FormRender.esm.js

@@ -1,6 +1,13 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import require$$0__default, { lazy, Suspense } from 'react';
+import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
 import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
+import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
+import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
+import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
+import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
+import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
 import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
 import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
@@ -11,13 +18,6 @@ import DateRangePickerComponent from '../DateRangePicker/DateRangePicker.esm.js'
 import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js';
 import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
 import DatetimepickerWrapper from '../FormComponents/DatePicker/DatetimepickerWrapper.esm.js';
-import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
-import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
-import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
-import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
-import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
-import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
-import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
 
 // Lazy-loaded heavy components
 // const RichTextEditorWrapper = lazy(() =>

package/dist/components/FormComponents/index.esm.js

@@ -1,3 +1,9 @@
+export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
+export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
+export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
+export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
+export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
+export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
 export { default as SingleSelect } from './Select/SingleSelect.esm.js';
 export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
 export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
@@ -5,6 +11,7 @@ export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
 export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
 export { default as SearchableSelect } from './Select/SearchableSelect.esm.js';
 export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
 export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
 export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
 import 'react/jsx-runtime';
@@ -17,17 +24,19 @@ import 'react-hook-form';
 export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
 export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
-export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
-export { default as HelperText } from './HelperText/HelperText.esm.js';
-export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
-export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
-export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
-export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
+export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
 export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
 export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
-export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
-export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
-export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
+import '@mui/icons-material/Visibility';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/NavigateBefore';
+import '@mui/icons-material/NavigateNext';
+import '@mui/icons-material/Delete';
+import '@mui/icons-material/UploadFile';
+import '@mui/icons-material/PictureAsPdf';
+import '@mui/icons-material/TableChart';
+import '@mui/icons-material/Description';
+export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
+export { default as HelperText } from './HelperText/HelperText.esm.js';
 export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
 export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
-export { default as TimePicker } from './TimePicker/TimePicker.esm.js';

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

@@ -2,7 +2,7 @@ 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, Skeleton } from '@mui/material';
+import { Box, Tooltip, IconButton, Menu, MenuItem, GlobalStyles, Typography, Select, Skeleton } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import FirstPageIcon from '@mui/icons-material/FirstPage';
@@ -125,6 +125,19 @@ const buildHeaderGlobalStyles = (headerMin, headerMax, headerFont, headerBgColor
             width: '100% !important',
             fontSize: `${headerFont} !important`,
         },
+        // Column resize handle: MRT's own default sx wins over the equivalent
+        // rule in buildHeaderCellSx (same CSS specificity, applied later in the
+        // emotion cache), leaving the drag hotspot a short ~24px strip centered
+        // in a much taller header cell — most of the column border is then
+        // unresponsive to drag. GlobalStyles + !important guarantees this wins.
+        '.tp-gpg-root .MuiTableHead-root .Mui-TableHeadCell-ResizeHandle-Wrapper': {
+            height: '100% !important',
+            top: '0 !important',
+        },
+        '.tp-gpg-root .MuiTableHead-root .Mui-TableHeadCell-ResizeHandle-Divider': {
+            height: '100% !important',
+            borderRight: 'none !important',
+        },
     };
 };
 /** Per-cell sx merged into MRT (via muiTableHeadCellProps). */
@@ -156,8 +169,6 @@ const buildHeaderCellSx = (align, headerMin, headerMax, headerFont, headerBgColo
         borderBottom: '2px solid rgba(0,0,0,0.15)',
         '& button[aria-label="Move"]': { display: 'none !important' },
         '& .MuiTableSortLabel-icon': { display: 'none !important' },
-        '& .Mui-TableHeadCell-ResizeHandle-Wrapper': { height: '100%', top: 0 },
-        '& .Mui-TableHeadCell-ResizeHandle-Divider': { borderRight: 'none' },
         '& .Mui-TableHeadCell-Content': {
             alignItems: 'center',
             justifyContent: flexJustify,
@@ -358,6 +369,18 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     const [columnFilters, setColumnFilters] = useState([]);
     const [globalFilter, setGlobalFilter] = useState('');
     const [columnPinning, setColumnPinning] = useState({});
+    const [exportMenuAnchor, setExportMenuAnchor] = useState(null);
+    // Whether any column filter or Global Search is currently narrowing what's
+    // displayed. When true, Export offers a choice (filtered vs. complete);
+    // when false there's nothing to choose between, so it downloads directly.
+    const isFiltered = columnFilters.length > 0 || globalFilter.trim() !== '';
+    // Always points at the latest MRT table instance (assigned right after
+    // useMaterialReactTable below) so handleExport — defined earlier in this
+    // component body — can read the CURRENT filtered row model at click time
+    // without needing `table` in its own dependency array (which would create
+    // a circular reference, since `table`'s own options include the toolbar
+    // renderer that uses handleExport).
+    const tableRef = useRef(null);
     // ── Viewport-fill height (mount + resize only — never on scroll) ─────────────
     //
     // Previously a scroll listener recalculated height as the grid moved within the
@@ -524,17 +547,24 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         setGlobalFilter('');
         setPagination((p) => ({ ...p, pageIndex: 0 }));
     }, [defaultFilters, defaultVisible]);
-    const handleExport = useCallback(async () => {
+    const handleExport = useCallback(async (scope = 'all') => {
         // 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();
+        // "filtered" = exactly what's currently displayed (column filters + global
+        // search applied) — sourced from MRT's own row model so it can never drift
+        // from what the user sees. "all" = every row in the current fetched batch,
+        // ignoring column filters/global search (unchanged pre-existing behavior).
+        const exportRows = scope === 'filtered' && tableRef.current
+            ? tableRef.current.getFilteredRowModel().rows.map((r) => r.original)
+            : rows;
         const dataCols = columns.filter((c) => 'accessorKey' in c && c.accessorKey);
         // xlsx-js-style requires 8-char ARGB (AA + RRGGBB). Prepend full-opacity "FF".
         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 dataRows = exportRows.map((row) => dataCols.map((c) => String(row[c.accessorKey] ?? '')));
         const ws = XLSX.utils.aoa_to_sheet([headerRow, ...dataRows]);
         // Style header row
         dataCols.forEach((_, colIdx) => {
@@ -554,7 +584,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         // 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) {
+        for (const row of exportRows) {
             const r = row;
             for (let ci = 0; ci < dataCols.length; ci++) {
                 const len = String(r[dataCols[ci].accessorKey] ?? '').length;
@@ -565,7 +595,8 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         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`);
+        const suffix = scope === 'filtered' ? '-filtered' : '';
+        XLSX.writeFile(wb, `${exportFilename}${suffix}-page${pagination.pageIndex + 1}.xlsx`);
     }, [columns, rows, exportFilename, pagination.pageIndex, headerBgColor, exportHeaderBgColor, exportHeaderTextColor]);
     // ── Memoized cell-prop builders ───────────────────────────────────────────
     // These are functions passed to MRT per-cell. Without useCallback they get
@@ -630,9 +661,11 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             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 }) })] })), [
+        }, 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: isFiltered
+                            ? 'Export as Excel (.xlsx) — choose filtered or complete data'
+                            : 'Export as Excel (.xlsx)', children: jsx("span", { children: jsx(IconButton, { id: `${resolvedGridId}_export_icon`, size: "small", onClick: (e) => isFiltered ? setExportMenuAnchor(e.currentTarget) : handleExport('all'), disabled: rows.length === 0 || isFetching, sx: { p: resolvedUiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(FileDownloadIcon, { sx: { fontSize: resolvedUiDensity === 'compact' ? 18 : 20 } }) }) }) }), jsxs(Menu, { id: `${resolvedGridId}_export_menu`, anchorEl: exportMenuAnchor, open: Boolean(exportMenuAnchor), onClose: () => setExportMenuAnchor(null), children: [jsxs(MenuItem, { id: `${resolvedGridId}_export_filtered_option`, onClick: () => { setExportMenuAnchor(null); handleExport('filtered'); }, children: ["Filtered data (", (tableRef.current?.getFilteredRowModel().rows.length ?? rows.length).toLocaleString(), " rows)"] }), jsxs(MenuItem, { id: `${resolvedGridId}_export_all_option`, onClick: () => { setExportMenuAnchor(null); handleExport('all'); }, children: ["Complete data (", rows.length.toLocaleString(), " rows)"] })] })] }), 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,
+        handleClearAll, refetch, handleExport, isFiltered, exportMenuAnchor,
         serverFilterDefs, visibleFilterIds, handleToggleFilter,
         filterValues, handleFilterValuesChange, columnFilters, setColumnFilters,
         availableColumns, effectiveMaxVisibleFilters, densityTokens, handleToggleFilter,
@@ -826,6 +859,9 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         renderToolbarInternalActions,
         renderBottomToolbar,
     });
+    // Keep the latest table instance available to handleExport (see tableRef
+    // declaration above) without adding `table` to its dependency array.
+    tableRef.current = table;
     return (jsxs(Box, { ref: containerRef, id: resolvedGridId, className: "tp-gpg-root", sx: {
             position: 'relative',
             height: resolvedHeight,

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

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm5.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm6.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';

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

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';

package/package.json

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