material-react-table 0.41.0 → 1.0.0-beta.0

package/dist/esm/material-react-table.esm.js

@@ -1022,7 +1022,7 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
     const textFieldProps = muiSearchTextFieldProps instanceof Function
         ? muiSearchTextFieldProps({ table })
         : muiSearchTextFieldProps;
-    return (React.createElement(Collapse, { in: showGlobalFilter, orientation: "horizontal" },
+    return (React.createElement(Collapse, { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true },
         React.createElement(TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
                 startAdornment: enableGlobalFilterModes ? (React.createElement(InputAdornment, { position: "start" },
                     React.createElement(Tooltip, { arrow: true, title: localization.changeSearchMode },
@@ -1071,11 +1071,11 @@ const MRT_TablePagination = ({ table, position }) => {
     return (React.createElement(TablePagination, Object.assign({ SelectProps: {
             sx: { m: '0 1rem 0 1ch' },
             MenuProps: { MenuListProps: { disablePadding: true } },
-        }, component: "div", count: totalRowCount, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: pageIndex, rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { sx: (theme) => (Object.assign({ m: '0 0.5rem', mt: position === 'top' &&
+        }, component: "div", count: totalRowCount, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: pageIndex, rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { sx: (theme) => (Object.assign({ mt: position === 'top' &&
                 enableToolbarInternalActions &&
                 !showGlobalFilter
                 ? '3.5rem'
-                : undefined, position: 'relative', zIndex: 2 }, ((tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx) instanceof Function
+                : '-0.25rem', position: 'relative', zIndex: 2 }, ((tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx) instanceof Function
             ? tablePaginationProps.sx(theme)
             : tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx))) })));
 };
@@ -1183,7 +1183,7 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
 
 const MRT_ToolbarInternalButtons = ({ table }) => {
     var _a;
-    const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, positionGlobalFilter, renderToolbarInternalActions, }, } = table;
+    const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, initialState, renderToolbarInternalActions, }, } = table;
     return (React.createElement(Box, { sx: {
             alignItems: 'center',
             display: 'flex',
@@ -1191,8 +1191,9 @@ const MRT_ToolbarInternalButtons = ({ table }) => {
         } }, (_a = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
         table,
     })) !== null && _a !== void 0 ? _a : (React.createElement(React.Fragment, null,
-        enableGlobalFilter && positionGlobalFilter === 'right' && (React.createElement(MRT_GlobalFilterTextField, { table: table })),
-        enableFilters && enableGlobalFilter && (React.createElement(MRT_ToggleGlobalFilterButton, { table: table })),
+        enableFilters &&
+            enableGlobalFilter &&
+            !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (React.createElement(MRT_ToggleGlobalFilterButton, { table: table })),
         enableFilters && enableColumnFilters && (React.createElement(MRT_ToggleFiltersButton, { table: table })),
         (enableHiding || enableColumnOrdering || enablePinning) && (React.createElement(MRT_ShowHideColumnsButton, { table: table })),
         enableDensityToggle && (React.createElement(MRT_ToggleDensePaddingButton, { table: table })),
@@ -1266,7 +1267,9 @@ const MRT_TopToolbar = ({ table }) => {
                 width: '100%',
             } },
             enableGlobalFilter && positionGlobalFilter === 'left' && (React.createElement(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : React.createElement("span", null),
-            enableToolbarInternalActions ? (React.createElement(MRT_ToolbarInternalButtons, { table: table })) : (enableGlobalFilter &&
+            enableToolbarInternalActions ? (React.createElement(Box, { sx: { display: 'flex', flexWrap: 'wrap' } },
+                enableGlobalFilter && positionGlobalFilter === 'right' && (React.createElement(MRT_GlobalFilterTextField, { table: table })),
+                React.createElement(MRT_ToolbarInternalButtons, { table: table }))) : (enableGlobalFilter &&
                 positionGlobalFilter === 'right' && (React.createElement(MRT_GlobalFilterTextField, { table: table })))),
         enablePagination &&
             ['top', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (React.createElement(MRT_TablePagination, { table: table, position: "top" })),
@@ -1294,8 +1297,11 @@ const MRT_BottomToolbar = ({ table }) => {
         positionToolbarAlertBanner === 'bottom' && (React.createElement(MRT_ToolbarAlertBanner, { table: table })),
         ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React.createElement(MRT_ToolbarDropZone, { table: table })),
         React.createElement(Box, { sx: {
+                alignItems: 'flex-start',
+                boxSizing: 'border-box',
                 display: 'flex',
                 justifyContent: 'space-between',
+                p: '0.5rem',
                 width: '100%',
             } },
             renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (React.createElement("span", null)),