@popmenu/table 0.47.0 → 0.47.3

package/build/components/Table/TableProps.d.ts

@@ -1,3 +1,4 @@
+import { TextFieldProps } from '@material-ui/core';
 import { Column, ColumnFiltersState, PaginationState } from '@tanstack/react-table';
 import { Dispatch, SetStateAction } from 'react';
 export interface ColumnFilter {
@@ -21,6 +22,8 @@ export interface TableProps<T = unknown> {
     paginationState?: [PaginationState, Dispatch<SetStateAction<PaginationState>>];
     /** GlobalFiltering state. Expects the result of a React useState hook. Used only for manual filtering. */
     globalFilterState?: [string, Dispatch<SetStateAction<string>>];
+    /** Props applied to the TextField for global filtering. */
+    GlobalFilterProps?: TextFieldProps;
     /** Filtering state. Expects the result of a React useState hook. Used only for manual filtering. */
     filterState?: [ColumnFiltersState, Dispatch<SetStateAction<Array<ColumnFilter>>>];
     /** Filtering state. Expects the result of a React useState hook. Used only for manual filtering. */

package/build/index.es.js

@@ -963,7 +963,6 @@ var getTableMinHeight = function (rootRef, pageSize) {
     var defaultBodyRowHeight = 56;
     var defaultHeaderRowHeight = 57;
     var defaultFooterHeight = 88;
-    var borderOffset = 1;
     var minHeight = defaultBodyRowHeight * pageSize + defaultHeaderRowHeight + defaultFooterHeight;
     if (rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) {
         var rootTableNode = rootRef.current;
@@ -971,9 +970,8 @@ var getTableMinHeight = function (rootRef, pageSize) {
         var bodyRowNode = rootTableNode.querySelector("[data-table-element=\"body-row\"]");
         if (headerRowNode && bodyRowNode) {
             var headerRowHeight = headerRowNode.getBoundingClientRect().height;
-            var firstBodyRowHeight = bodyRowNode.getBoundingClientRect().height;
-            var restBodyRowHeight = firstBodyRowHeight - borderOffset;
-            minHeight = headerRowHeight + firstBodyRowHeight + restBodyRowHeight * (pageSize - 1) + defaultFooterHeight;
+            var bodyRowHeight = bodyRowNode.getBoundingClientRect().height;
+            minHeight = headerRowHeight + bodyRowHeight * pageSize + defaultFooterHeight;
         }
     }
     return minHeight;
@@ -3128,16 +3126,14 @@ var useStyles$1 = makeStyles({
 
 var GlobalFilter = function (props) {
     var value = props.value, setValue = props.setValue, restProps = __rest$3(props, ["value", "setValue"]);
-    var onChange = restProps.onChange, InputProps = restProps.InputProps, cleanRestProps = __rest$3(restProps, ["onChange", "InputProps"]);
     var classes = useStyles$1();
     var handleChange = function (e) {
         setValue(e.target.value);
-        if (onChange) {
-            onChange(e);
-        }
     };
-    return (React__default.createElement(TextField, __assign$3({ className: classes.root, variant: "outlined", value: value, onChange: handleChange, InputProps: __assign$3({ startAdornment: (React__default.createElement(InputAdornment, { position: "start" },
-                React__default.createElement(Icon$1, { icon: SvgSearch }))) }, InputProps) }, cleanRestProps)));
+    return (React__default.createElement(TextField, __assign$3({ className: classes.root, variant: "outlined", value: value, onChange: handleChange, InputProps: {
+            startAdornment: (React__default.createElement(InputAdornment, { position: "start" },
+                React__default.createElement(Icon$1, { icon: SvgSearch }))),
+        } }, restProps)));
 };
 
 var TableHeaderRow = function (props) {
@@ -3220,7 +3216,7 @@ var defaultTableProps = {
     searchable: false,
 };
 var Table = function (props) {
-    var data = props.data, columns = props.columns, loading = props.loading, searchable = props.searchable, sortable = props.sortable, externalFilterState = props.filterState, externalGlobalFilterState = props.globalFilterState, externalPaginationState = props.paginationState, externalVisibilityState = props.visibilityState, pageCount = props.pageCount, Empty = props.Empty;
+    var data = props.data, columns = props.columns, loading = props.loading, searchable = props.searchable, sortable = props.sortable, externalFilterState = props.filterState, externalGlobalFilterState = props.globalFilterState, externalPaginationState = props.paginationState, externalVisibilityState = props.visibilityState, pageCount = props.pageCount, GlobalFilterProps = props.GlobalFilterProps, Empty = props.Empty;
     var classes = useStyles$6(props);
     var rootRef = useRef(null);
     // Prepare Empty State
@@ -3250,15 +3246,18 @@ var Table = function (props) {
         var pageIndex = pageNumber - 1;
         table.setPageIndex(pageIndex);
     };
+    var showControls = searchable || isControlledGlobalFilter || hasColumnFilters;
     return (React__default.createElement(TableContext.Provider, { value: table },
-        React__default.createElement(Box, __assign$3({ className: classes.root }, { ref: rootRef }, { "data-table-element": "root", minHeight: getTableMinHeight(rootRef, table.getState().pagination.pageSize) }),
-            React__default.createElement(Box, null,
+        React__default.createElement(Box, __assign$3({ className: classes.root }, { ref: rootRef }, { "data-table-element": "root" }, (table.getPageCount() > 1 && {
+            minHeight: getTableMinHeight(rootRef, table.getState().pagination.pageSize),
+        })),
+            showControls && (React__default.createElement(Box, null,
                 React__default.createElement(Box, { display: "grid", gridAutoFlow: "column", marginBottom: 3 },
-                    (searchable || isControlledGlobalFilter) && (React__default.createElement(GlobalFilter, { value: table.getState().globalFilter, setValue: table.setGlobalFilter })),
+                    (searchable || isControlledGlobalFilter) && (React__default.createElement(GlobalFilter, __assign$3({}, GlobalFilterProps, { value: table.getState().globalFilter, setValue: table.setGlobalFilter }))),
                     hasColumnFilters && React__default.createElement(FilterPanel, null)),
                 React__default.createElement(Box, { display: "flex", flexWrap: "wrap", gridGap: 8 },
                     selectedColumnFilters.map(function (selectedColumnFilter, i) { return (React__default.createElement(ColumnFilterChip, { key: "selected-column-filter-chip-" + i, columnFilter: selectedColumnFilter, label: formatSelectedFilterText(selectedColumnFilter), onClick: deselectColumnFilter })); }),
-                    selectedColumnFilters.length >= 1 && React__default.createElement(ColumnFilterResetButton, { onClick: function () { return resetColumnFilters(); } }))),
+                    selectedColumnFilters.length >= 1 && React__default.createElement(ColumnFilterResetButton, { onClick: function () { return resetColumnFilters(); } })))),
             React__default.createElement(Box, { className: classes.tableContainer, flexGrow: loading || isEmpty ? 0 : 1 },
                 React__default.createElement("table", { className: classes.table },
                     React__default.createElement(TableHeader, null, table.getHeaderGroups().map(function (headerGroup) { return (React__default.createElement(TableHeaderRow, { key: headerGroup.id }, headerGroup.headers.map(function (header) { return (React__default.createElement(TableHeaderCell, { key: header.id, context: header.getContext() }, flexRender(header.column.columnDef.header, header.getContext()))); }))); })),