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

package/dist/cjs/inputs/MRT_EditCellTextField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_Cell, MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     cell: MRT_Cell<TData>;

package/dist/cjs/inputs/MRT_GlobalFilterTextField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     table: MRT_TableInstance<TData>;

package/dist/cjs/menus/MRT_FilterOptionMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_Header, MRT_InternalFilterOption, MRT_TableInstance } from '..';
 import { MRT_Localization } from '../localization';
 export declare const mrtFilterOptions: (localization: MRT_Localization) => MRT_InternalFilterOption[];

package/dist/cjs/menus/MRT_ShowHideColumnsMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     anchorEl: HTMLElement | null;

package/dist/cjs/table/MRT_Table.d.ts

@@ -1,7 +1,6 @@
-import { FC, RefObject } from 'react';
+import { FC } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
-    tableContainerRef: RefObject<HTMLDivElement>;
     table: MRT_TableInstance;
 }
 export declare const MRT_Table: FC<Props>;

package/dist/cjs/table/MRT_TableRoot.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { MaterialReactTableProps } from '..';
 export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => JSX.Element;

package/dist/esm/body/MRT_EditRowModal.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     open: boolean;

package/dist/esm/body/MRT_TableBody.d.ts

@@ -1,8 +1,7 @@
-import { FC, RefObject } from 'react';
+import { FC } from 'react';
 import type { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
-    tableContainerRef: RefObject<HTMLDivElement>;
 }
 export declare const MRT_TableBody: FC<Props>;
 export {};

package/dist/esm/buttons/MRT_ColumnPinningButtons.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_Column, MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     column: MRT_Column<TData>;

package/dist/esm/buttons/MRT_EditActionButtons.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     row: MRT_Row<TData>;

package/dist/esm/buttons/MRT_FullScreenToggleButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/esm/buttons/MRT_ShowHideColumnsButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/esm/buttons/MRT_ToggleDensePaddingButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/esm/buttons/MRT_ToggleFiltersButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/esm/buttons/MRT_ToggleGlobalFilterButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconButtonProps } from '@mui/material';
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> extends IconButtonProps {

package/dist/esm/inputs/MRT_EditCellTextField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MRT_Cell, MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     cell: MRT_Cell<TData>;

package/dist/esm/inputs/MRT_GlobalFilterTextField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MRT_TableInstance } from '..';
 interface Props<TData extends Record<string, any> = {}> {
     table: MRT_TableInstance<TData>;

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,7 +1071,7 @@ 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'
@@ -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)),
@@ -1440,7 +1446,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         setAnchorEl(event.currentTarget);
     };
     useEffect(() => {
-        setFilterValue('');
+        handleClear();
     }, [columnDef._filterFn]);
     if (columnDef.Filter) {
         return React.createElement(React.Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, table }));
@@ -1499,7 +1505,11 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 if (textFieldProps.inputRef) {
                     textFieldProps.inputRef = inputRef;
                 }
-            }, sx: (theme) => (Object.assign({ p: 0, minWidth: !filterChipLabel ? '120px' : 'auto', width: '100%', '&	.MuiSelect-icon': {
+            }, sx: (theme) => (Object.assign({ p: 0, minWidth: columnDef.filterVariant === 'range'
+                    ? '90px'
+                    : !filterChipLabel
+                        ? '120px'
+                        : 'auto', width: '100%', '&	.MuiSelect-icon': {
                     mr: '1.5rem',
                 } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
                 ? textFieldProps.sx(theme)
@@ -1690,7 +1700,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
         return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
     };
     const getTotalRight = () => {
-        return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150);
+        return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 180);
     };
     const handleDragEnter = (_e) => {
         if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
@@ -2155,8 +2165,8 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
         renderDetailPanel && !row.getIsGrouped() && (React.createElement(MRT_TableDetailPanel, { row: row, table: table }))));
 };
 
-const MRT_TableBody = ({ table, tableContainerRef }) => {
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, manualFiltering, manualSorting, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, } = table;
+const MRT_TableBody = ({ table }) => {
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, manualFiltering, manualSorting, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef }, } = table;
     const { globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
@@ -2297,7 +2307,7 @@ const MRT_TableFooter = ({ table }) => {
             : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }), getFooterGroups().map((footerGroup) => (React.createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table })))));
 };
 
-const MRT_Table = ({ tableContainerRef, table }) => {
+const MRT_Table = ({ table }) => {
     const { getState, options: { enableColumnResizing, enableRowVirtualization, enableStickyHeader, enableTableFooter, enableTableHead, muiTableProps, }, } = table;
     const { isFullScreen } = getState();
     const tableProps = muiTableProps instanceof Function
@@ -2307,7 +2317,7 @@ const MRT_Table = ({ tableContainerRef, table }) => {
             ? tableProps.sx(theme)
             : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
         enableTableHead && React.createElement(MRT_TableHead, { table: table }),
-        React.createElement(MRT_TableBody, { tableContainerRef: tableContainerRef, table: table }),
+        React.createElement(MRT_TableBody, { table: table }),
         enableTableFooter && React.createElement(MRT_TableFooter, { table: table })));
 };
 
@@ -2342,7 +2352,7 @@ const MRT_TableContainer = ({ table }) => {
             : tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx))), style: Object.assign({ maxHeight: isFullScreen
                 ? `calc(100vh - ${totalToolbarHeight}px)`
                 : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style) }),
-        React.createElement(MRT_Table, { tableContainerRef: tableContainerRef, table: table })));
+        React.createElement(MRT_Table, { table: table })));
 };
 
 const MRT_TablePaper = ({ table }) => {
@@ -2520,9 +2530,9 @@ const MRT_TableRoot = (props) => {
         props.tableInstanceRef.current = table;
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => setIsFullScreen(false), open: isFullScreen, transitionDuration: 400 },
+        React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
             React.createElement(MRT_TablePaper, { table: table })),
-        !isFullScreen && React.createElement(MRT_TablePaper, { table: table }),
+        !table.getState().isFullScreen && React.createElement(MRT_TablePaper, { table: table }),
         editingRow && props.editingMode === 'modal' && (React.createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));
 };