tp-react-elements 1.3.6 → 1.3.8

package/dist/_virtual/index.esm4.js

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

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 DateRange = {};
+var DateRangePicker = {};
 
-export { DateRange as __exports };
+export { DateRangePicker as __exports };

package/dist/_virtual/index.esm7.js

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

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

@@ -5,9 +5,6 @@ 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';
@@ -18,6 +15,9 @@ 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,8 +1,5 @@
 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';
@@ -15,7 +12,6 @@ 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';
@@ -34,6 +30,10 @@ 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

@@ -266,14 +266,14 @@ const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, o
                         borderColor: 'divider', color: 'text.secondary',
                         px: 1.5, minHeight: 30,
                         '&:hover': { borderColor: 'primary.main', color: 'primary.main' },
-                    }, children: "Manage Filters" }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, width: 280, overflow: 'hidden' } }, children: [atLimit && (jsx(Box, { sx: {
+                    }, children: "Manage Filters" }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, width: 280 } }, children: [atLimit && (jsx(Box, { sx: {
                             px: 2, py: 0.75,
                             bgcolor: 'rgba(25,118,210,0.07)',
                             borderBottom: '1px solid rgba(25,118,210,0.2)',
                             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: { maxHeight: 360, overflowY: 'auto', 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 }, 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.d.ts

@@ -33,7 +33,13 @@ export interface GenericPaginatedGridProps<TData extends object> {
     batchSize?: number;
     /** CSV file name prefix. Default: "export". */
     exportFilename?: string;
-    /** max-height of the scrollable table body. Default: "60vh". */
+    /**
+     * Height of the entire grid component.
+     * When omitted (default) the grid auto-sizes to fill the remaining viewport
+     * height from its top position — the page never needs to scroll.
+     * Pass an explicit CSS value only when you need to override
+     * (e.g. "600px", "calc(100vh - 300px)").
+     */
     tableHeight?: string;
     /** Choices shown in the "Rows per page" footer dropdown. Default: [1 000, 5 000, 10 000]. */
     pageSizeOptions?: number[];

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useMemo } from 'react';
+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';
@@ -43,7 +43,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, children: jsx(ChevronRightIcon, { sx: { fontSize: 20 } }) }) }) }), jsx(Tooltip, { title: "Last page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onLast, disabled: !canNext, children: jsx(LastPageIcon, { sx: { fontSize: 20 } }) }) }) })] })] }));
 };
 // ─── GenericPaginatedGrid ─────────────────────────────────────────────────────
-function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', tableHeight = '60vh', pageSizeOptions = [1000, 5000, 10000], headerBgColor, maxVisibleFilters = 4, }) {
+function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', tableHeight, pageSizeOptions = [1000, 5000, 10000], headerBgColor, maxVisibleFilters = 4, }) {
     const defaultVisible = defaultVisibleFilterIds
         ?? (serverFilterDefs.length > 0 ? [serverFilterDefs[0].id] : []);
     // ── State ──────────────────────────────────────────────────────────────────
@@ -57,6 +57,35 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     const [columnFilters, setColumnFilters] = useState([]);
     const [globalFilter, setGlobalFilter] = useState('');
     const [columnPinning, setColumnPinning] = useState({});
+    // ── Viewport-fill: measure this component's top offset and derive height ──────
+    //
+    // When tableHeight is not provided, we measure how far the wrapper sits from
+    // the top of the viewport and set height = 100vh − topOffset − 8px (tiny
+    // bottom margin).  A ResizeObserver on <html> keeps the value in sync if the
+    // layout shifts (sidebar collapses, font loads, etc.).
+    //
+    // The MRT Paper + TableContainer flex chain distributes that height between
+    // the toolbar, sticky column headers, scrollable rows, and pagination footer —
+    // so the grid fills the window exactly and the page never needs to scroll.
+    const containerRef = useRef(null);
+    const [autoHeight, setAutoHeight] = useState('');
+    useLayoutEffect(() => {
+        if (tableHeight)
+            return; // explicit prop — skip auto calculation
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const update = () => {
+            const top = el.getBoundingClientRect().top;
+            setAutoHeight(`calc(100vh - ${Math.ceil(top) + 8}px)`);
+        };
+        update();
+        const ro = new ResizeObserver(update);
+        ro.observe(document.documentElement);
+        return () => ro.disconnect();
+    }, [tableHeight]);
+    // Resolved height: explicit prop › auto-calculated › safe fallback
+    const resolvedHeight = tableHeight || autoHeight || '60vh';
     // ── Data fetching ──────────────────────────────────────────────────────────
     const { data, isLoading, isError, isFetching, refetch } = useQuery({
         queryKey: [...queryKey, filterValues, pagination.pageIndex],
@@ -196,7 +225,24 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         enableHiding: true,
         enableStickyHeader: true,
         enableRowVirtualization: true,
-        muiTableContainerProps: { sx: { maxHeight: tableHeight } },
+        // 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.
+        muiTableContainerProps: {
+            sx: {
+                flex: '1 1 0',
+                minHeight: 0,
+            },
+        },
+        // Paper fills the wrapper Box height and acts as the flex column host for
+        // toolbar → table-container → pagination.
+        muiTablePaperProps: {
+            sx: {
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+            },
+        },
         muiTopToolbarProps: {
             sx: {
                 alignItems: 'center',
@@ -266,7 +312,12 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                     }, children: "Clear All" }))] })),
         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, { className: "tp-gpg-root", sx: { position: 'relative' }, children: [jsx(GlobalStyles, { styles: {
+    return (jsxs(Box, { ref: containerRef, className: "tp-gpg-root", sx: {
+            position: 'relative',
+            height: resolvedHeight,
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [jsx(GlobalStyles, { styles: {
                     'button[aria-label="Pin to right"]': { display: 'none' },
                     '.tp-gpg-root .MuiTableSortLabel-icon': { display: 'none !important' },
                     '.tp-gpg-root button[aria-label="Move"]': { display: 'none !important' },

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

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