tp-react-elements 1.3.8 → 1.3.10

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm7.js

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

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

@@ -5,6 +5,9 @@ import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxG
 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';
@@ -15,9 +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 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,5 +1,8 @@
 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';
@@ -12,6 +15,7 @@ export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.j
 export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
 export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
 export { default as YearPickerField } from './YearPickerField/YearPickerField.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';
 import 'react/jsx-runtime';
@@ -30,10 +34,6 @@ 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 FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
-export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
 export { default as HelperText } from './HelperText/HelperText.esm.js';
-export { default as PasswordField } from './PasswordField/PasswordField.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/DynamicFilterBar.esm.js

@@ -273,7 +273,7 @@ const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, o
                             display: 'flex',
                             alignItems: 'center',
                             gap: 0.75,
-                        }, children: jsxs(Typography, { sx: { fontSize: 11, color: 'primary.main', fontWeight: 600, lineHeight: 1.4 }, children: [visibleIds.length, "/", maxVisible, " filters active \u2014 remove one to add another"] }) })), jsxs(Box, { sx: { py: 1 }, children: [serverFilterDefs.length > 0 && (jsxs(Fragment, { children: [jsx(Typography, { variant: "caption", fontWeight: 700, color: "text.disabled", sx: { px: 2, pb: 0.5, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }, children: "Server Filters" }), jsx(List, { dense: true, disablePadding: true, children: serverFilterDefs.map((def) => {
+                        }, children: jsxs(Typography, { sx: { fontSize: 11, color: 'primary.main', fontWeight: 600, lineHeight: 1.4 }, children: [visibleIds.length, "/", maxVisible, " filters active \u2014 remove one to add another"] }) })), jsxs(Box, { sx: { py: 1, maxHeight: 360, overflowY: 'auto' }, children: [serverFilterDefs.length > 0 && (jsxs(Fragment, { children: [jsx(Typography, { variant: "caption", fontWeight: 700, color: "text.disabled", sx: { px: 2, pb: 0.5, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }, children: "Server Filters" }), jsx(List, { dense: true, disablePadding: true, children: serverFilterDefs.map((def) => {
                                             const selected = visibleIds.includes(def.id);
                                             const blocked = atLimit && !selected; // at cap and not yet shown → disabled
                                             const pill = TYPE_PILL[def.type];

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

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useRef, useLayoutEffect, useMemo } from 'react';
 import { useMaterialReactTable, MaterialReactTable } from 'material-react-table';
 import { useQuery, keepPreviousData } from '@tanstack/react-query';
-import { Box, Tooltip, IconButton, Button, GlobalStyles, Typography, Select, MenuItem, CircularProgress } from '@mui/material';
+import { Box, Tooltip, IconButton, GlobalStyles, Typography, Select, MenuItem, 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';
@@ -77,12 +77,35 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             return;
         const update = () => {
             const top = el.getBoundingClientRect().top;
-            setAutoHeight(`calc(100vh - ${Math.ceil(top) + 8}px)`);
+            // CSS max() guarantees a minimum visible height (300px) when the grid
+            // starts below the fold or when little viewport space remains — both
+            // cases produce a negative/tiny calc() that would otherwise collapse
+            // the grid to zero height.
+            setAutoHeight(`max(300px, calc(100vh - ${Math.ceil(top) + 8}px))`);
         };
         update();
+        // Re-measure on any document resize (window resize, sidebar toggle, etc.)
         const ro = new ResizeObserver(update);
         ro.observe(document.documentElement);
-        return () => ro.disconnect();
+        // Re-measure when the scroll container scrolls — the grid's
+        // viewport-relative top offset shifts with scroll position, so the
+        // height must be recalculated to fill the remaining visible space.
+        const findScrollParent = (node) => {
+            let p = node.parentElement;
+            while (p && p !== document.documentElement) {
+                const { overflow, overflowY } = window.getComputedStyle(p);
+                if (/auto|scroll/.test(overflow) || /auto|scroll/.test(overflowY))
+                    return p;
+                p = p.parentElement;
+            }
+            return window;
+        };
+        const scrollParent = findScrollParent(el);
+        scrollParent.addEventListener('scroll', update, { passive: true });
+        return () => {
+            ro.disconnect();
+            scrollParent.removeEventListener('scroll', update);
+        };
     }, [tableHeight]);
     // Resolved height: explicit prop › auto-calculated › safe fallback
     const resolvedHeight = tableHeight || autoHeight || '60vh';
@@ -184,8 +207,6 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         a.click();
         URL.revokeObjectURL(url);
     };
-    const hasAnyValue = Object.values(filterValues).some(Boolean) ||
-        columnFilters.some((f) => f.value);
     // ── Table instance ─────────────────────────────────────────────────────────
     const table = useMaterialReactTable({
         columns: processedColumns,
@@ -226,12 +247,12 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         enableStickyHeader: true,
         enableRowVirtualization: true,
         // The container fills whatever height is left after the top toolbar and
-        // pagination footer.  min-height: 0 is required so the flex child can
-        // shrink below its natural content height and scroll its rows instead.
+        // pagination footer.  minHeight ensures a visible body even when there are
+        // no records; flex: '1 1 0' lets it grow to fill the remaining space.
         muiTableContainerProps: {
             sx: {
                 flex: '1 1 0',
-                minHeight: 0,
+                minHeight: '150px',
             },
         },
         // Paper fills the wrapper Box height and acts as the flex column host for
@@ -301,15 +322,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         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: "Refresh current batch", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: () => refetch(), disabled: isFetching, children: jsx(RefreshIcon, { fontSize: "small" }) }) }) }), jsx(Tooltip, { title: "Export batch as CSV", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: handleExport, disabled: rows.length === 0 || isFetching, children: jsx(FileDownloadIcon, { fontSize: "small" }) }) }) })] }), 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 }) }), hasAnyValue && (jsx(Button, { size: "small", onClick: handleClearAll, sx: {
-                        flexShrink: 0,
-                        textTransform: 'none',
-                        fontSize: 12,
-                        color: 'error.main',
-                        minWidth: 'auto',
-                        px: 1,
-                        '&:hover': { bgcolor: 'rgba(211,47,47,0.06)' },
-                    }, children: "Clear All" }))] })),
+        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, children: jsx(RefreshIcon, { fontSize: "small" }) }) }) }), jsx(Tooltip, { title: "Export batch as CSV", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: handleExport, disabled: rows.length === 0 || isFetching, children: jsx(FileDownloadIcon, { fontSize: "small" }) }) }) })] }), 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 }) })] })),
         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 })),
     });
     return (jsxs(Box, { ref: containerRef, className: "tp-gpg-root", sx: {

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

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

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

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

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm4.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": "1.3.8",
+  "version": "1.3.10",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",