material-react-table 2.0.0-alpha.3 → 2.0.0-alpha.4

package/dist/cjs/index.js

@@ -51,7 +51,10 @@ var CircularProgress = require('@mui/material/CircularProgress');
 var Toolbar = require('@mui/material/Toolbar');
 var useMediaQuery = require('@mui/material/useMediaQuery');
 var LinearProgress = require('@mui/material/LinearProgress');
-var TablePagination = require('@mui/material/TablePagination');
+var InputLabel = require('@mui/material/InputLabel');
+var Pagination = require('@mui/material/Pagination');
+var PaginationItem = require('@mui/material/PaginationItem');
+var Select = require('@mui/material/Select');
 var Alert = require('@mui/material/Alert');
 var AlertTitle = require('@mui/material/AlertTitle');
 var Fade = require('@mui/material/Fade');
@@ -60,6 +63,8 @@ var Radio = require('@mui/material/Radio');
 var ArrowDownwardIcon = require('@mui/icons-material/ArrowDownward');
 var ArrowRightIcon = require('@mui/icons-material/ArrowRight');
 var CancelIcon = require('@mui/icons-material/Cancel');
+var ChevronLefIcon = require('@mui/icons-material/ChevronLeft');
+var ChevronRightIcon = require('@mui/icons-material/ChevronRight');
 var ClearAllIcon = require('@mui/icons-material/ClearAll');
 var CloseIcon = require('@mui/icons-material/Close');
 var DensityLargeIcon = require('@mui/icons-material/DensityLarge');
@@ -72,9 +77,11 @@ var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 var FilterAltIcon = require('@mui/icons-material/FilterAlt');
 var FilterListIcon = require('@mui/icons-material/FilterList');
 var FilterListOffIcon = require('@mui/icons-material/FilterListOff');
+var FirstPageIcon = require('@mui/icons-material/FirstPage');
 var FullscreenIcon = require('@mui/icons-material/Fullscreen');
 var FullscreenExitIcon = require('@mui/icons-material/FullscreenExit');
 var KeyboardDoubleArrowDownIcon = require('@mui/icons-material/KeyboardDoubleArrowDown');
+var LastPageIcon = require('@mui/icons-material/LastPage');
 var MoreHorizIcon = require('@mui/icons-material/MoreHoriz');
 var MoreVertIcon = require('@mui/icons-material/MoreVert');
 var PushPinIcon = require('@mui/icons-material/PushPin');
@@ -129,7 +136,10 @@ var CircularProgress__default = /*#__PURE__*/_interopDefaultLegacy(CircularProgr
 var Toolbar__default = /*#__PURE__*/_interopDefaultLegacy(Toolbar);
 var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);
 var LinearProgress__default = /*#__PURE__*/_interopDefaultLegacy(LinearProgress);
-var TablePagination__default = /*#__PURE__*/_interopDefaultLegacy(TablePagination);
+var InputLabel__default = /*#__PURE__*/_interopDefaultLegacy(InputLabel);
+var Pagination__default = /*#__PURE__*/_interopDefaultLegacy(Pagination);
+var PaginationItem__default = /*#__PURE__*/_interopDefaultLegacy(PaginationItem);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
 var AlertTitle__default = /*#__PURE__*/_interopDefaultLegacy(AlertTitle);
 var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade);
@@ -138,6 +148,8 @@ var Radio__default = /*#__PURE__*/_interopDefaultLegacy(Radio);
 var ArrowDownwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownwardIcon);
 var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
 var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
+var ChevronLefIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLefIcon);
+var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
 var ClearAllIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearAllIcon);
 var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
 var DensityLargeIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityLargeIcon);
@@ -150,9 +162,11 @@ var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon)
 var FilterAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltIcon);
 var FilterListIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListIcon);
 var FilterListOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListOffIcon);
+var FirstPageIcon__default = /*#__PURE__*/_interopDefaultLegacy(FirstPageIcon);
 var FullscreenIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenIcon);
 var FullscreenExitIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenExitIcon);
 var KeyboardDoubleArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardDoubleArrowDownIcon);
+var LastPageIcon__default = /*#__PURE__*/_interopDefaultLegacy(LastPageIcon);
 var MoreHorizIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizIcon);
 var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
 var PushPinIcon__default = /*#__PURE__*/_interopDefaultLegacy(PushPinIcon);
@@ -2312,41 +2326,40 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
         }, unmountOnExit: true, children: jsxRuntime.jsx(LinearProgress__default["default"], Object.assign({ "aria-busy": "true", "aria-label": "Loading", sx: { position: 'relative' } }, linearProgressProps)) }));
 };
 
+const defaultPageSizeOptions = [5, 10, 15, 20, 25, 30, 50, 100];
 const MRT_TablePagination = ({ position = 'bottom', table, }) => {
-    const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, localization, muiTablePaginationProps, rowCount, }, setPageIndex, setPageSize, } = table;
+    const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, icons: { ChevronLefIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiTablePaginationProps, paginationDisplayMode, rowCount, }, setPageIndex, setPageSize, } = table;
     const { pagination: { pageIndex = 0, pageSize = 10 }, showGlobalFilter, } = getState();
-    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
-    const showFirstLastPageButtons = totalRowCount / pageSize > 2;
-    const tablePaginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
+    const paginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
         table,
     });
-    const handleChangeRowsPerPage = (event) => {
-        setPageSize(+event.target.value);
-    };
-    return (jsxRuntime.jsx(TablePagination__default["default"], Object.assign({ component: "div", count: totalRowCount, getItemAriaLabel: (type) => type === 'first'
-            ? localization.goToFirstPage
-            : type === 'last'
-                ? localization.goToLastPage
-                : type === 'next'
-                    ? localization.goToNextPage
-                    : localization.goToPreviousPage, labelDisplayedRows: ({ count, from, to }) => `${from}-${to} ${localization.of} ${count}`, labelRowsPerPage: localization.rowsPerPage, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: Math.max(Math.min(pageIndex, Math.ceil(totalRowCount / pageSize) - 1), 0), rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { SelectProps: Object.assign({ MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } }, sx: { m: '0 1rem 0 1ch' } }, tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.SelectProps), sx: (theme) => (Object.assign({ '& . MuiTablePagination-select': {
-                m: '0 1px',
-            }, '& .MuiTablePagination-actions': {
-                m: '0 1px',
-            }, '& .MuiTablePagination-displayedRows': {
-                m: '0 1px',
-            }, '& .MuiTablePagination-selectLabel': {
-                m: '0 -1px',
-            }, '& .MuiTablePagination-toolbar': {
-                alignItems: 'center',
-                display: 'flex',
-            }, '&. MuiInputBase-root': {
-                m: '0 1px',
-            }, mt: position === 'top' &&
+    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
+    const numberOfPages = Math.ceil(totalRowCount / pageSize);
+    const showFirstLastPageButtons = numberOfPages > 2;
+    const showFirstButton = showFirstLastPageButtons && (paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.showFirstButton) !== false;
+    const showLastButton = showFirstLastPageButtons && (paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.showLastButton) !== false;
+    const firstRowIndex = pageIndex * pageSize;
+    const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
+    return (jsxRuntime.jsxs(Box__default["default"], { sx: {
+            alignItems: 'center',
+            display: 'flex',
+            gap: '8px',
+            justifyContent: 'space-between',
+            mt: position === 'top' &&
                 enableToolbarInternalActions &&
                 !showGlobalFilter
-                ? '3.5rem'
-                : undefined, position: 'relative', zIndex: 2 }, parseFromValuesOrFunc(tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx, theme))) })));
+                ? '3rem'
+                : undefined,
+            position: 'relative',
+            px: '4px',
+            py: '12px',
+            zIndex: 2,
+        }, children: [(paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.showRowsPerPage) !== false && (jsxRuntime.jsxs(Box__default["default"], { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsxRuntime.jsx(InputLabel__default["default"], { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsxRuntime.jsx(Select__default["default"], { id: "mrt-rows-per-page", label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { '&::before': { border: 'none' }, mb: 0 }, value: pageSize, variant: "standard", children: defaultPageSizeOptions.map((value) => (jsxRuntime.jsx(MenuItem__default["default"], { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsxRuntime.jsx(Pagination__default["default"], Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsxRuntime.jsx(PaginationItem__default["default"], Object.assign({ slots: {
+                        first: FirstPageIcon,
+                        last: LastPageIcon,
+                        next: ChevronRightIcon,
+                        previous: ChevronLefIcon,
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, paginationProps))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { mb: "0", mx: "8px", variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsxRuntime.jsx(FirstPageIcon, {}) })), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsxRuntime.jsx(ChevronLefIcon, {}) }), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, {}) }), showLastButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsxRuntime.jsx(LastPageIcon, {}) }))] })] })) : null] }));
 };
 
 const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
@@ -2994,8 +3007,9 @@ const useMRT_DisplayColumns = ({ columnOrder, creatingRow, grouping, tableOption
 };
 
 const useMRT_Effects = (table) => {
-    const { getState, options: { enablePagination, rowCount }, } = table;
-    const { globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
+    const { getIsSomeRowsPinned, getState, options: { enablePagination, enableRowPinning, rowCount }, } = table;
+    const { density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
+    const rerender = react.useReducer(() => ({}), {})[1];
     const isMounted = react.useRef(false);
     const initialBodyHeight = react.useRef();
     const previousTop = react.useRef();
@@ -3051,6 +3065,13 @@ const useMRT_Effects = (table) => {
             table.setSorting(() => appliedSort.current || []);
         }
     }, [globalFilter]);
+    react.useEffect(() => {
+        if (enableRowPinning && getIsSomeRowsPinned()) {
+            setTimeout(() => {
+                rerender();
+            }, 150);
+        }
+    }, [density]);
 };
 
 const useMRT_TableInstance = (tableOptions) => {
@@ -3319,6 +3340,8 @@ const MRT_Default_Icons = {
     ArrowDownwardIcon: ArrowDownwardIcon__default["default"],
     ArrowRightIcon: ArrowRightIcon__default["default"],
     CancelIcon: CancelIcon__default["default"],
+    ChevronLefIcon: ChevronLefIcon__default["default"],
+    ChevronRightIcon: ChevronRightIcon__default["default"],
     ClearAllIcon: ClearAllIcon__default["default"],
     CloseIcon: CloseIcon__default["default"],
     DensityLargeIcon: DensityLargeIcon__default["default"],
@@ -3331,9 +3354,11 @@ const MRT_Default_Icons = {
     FilterAltIcon: FilterAltIcon__default["default"],
     FilterListIcon: FilterListIcon__default["default"],
     FilterListOffIcon: FilterListOffIcon__default["default"],
+    FirstPageIcon: FirstPageIcon__default["default"],
     FullscreenExitIcon: FullscreenExitIcon__default["default"],
     FullscreenIcon: FullscreenIcon__default["default"],
     KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDownIcon__default["default"],
+    LastPageIcon: LastPageIcon__default["default"],
     MoreHorizIcon: MoreHorizIcon__default["default"],
     MoreVertIcon: MoreVertIcon__default["default"],
     PushPinIcon: PushPinIcon__default["default"],