material-react-table 0.30.2 → 0.31.0

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

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useCallback, Fragment, useRef, useLayoutEffect, useEffect } from 'react';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
-import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, useMediaQuery, Toolbar, lighten, alpha, ListItemText, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
+import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, alpha, useMediaQuery, Toolbar, lighten, ListItemText, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
@@ -49,6 +49,7 @@ var MRT_DefaultLocalization_EN = {
   clickToCopy: 'Click to copy',
   columnActions: 'Column Actions',
   copiedToClipboard: 'Copied to clipboard',
+  dropToGroupBy: 'Drop to group by {column}',
   edit: 'Edit',
   expand: 'Expand',
   expandAll: 'Expand all',
@@ -1928,6 +1929,48 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
   })));
 };
 
+var MRT_ToolbarDropZone = function MRT_ToolbarDropZone(_ref) {
+  var _currentDraggingColum, _currentDraggingColum2;
+
+  var table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      enableGrouping = _table$options.enableGrouping,
+      localization = _table$options.localization,
+      setCurrentHoveredColumn = table.setCurrentHoveredColumn;
+
+  var _getState = getState(),
+      currentDraggingColumn = _getState.currentDraggingColumn,
+      currentHoveredColumn = _getState.currentHoveredColumn;
+
+  var handleDragEnter = function handleDragEnter(_event) {
+    setCurrentHoveredColumn({
+      id: 'drop-zone'
+    });
+  };
+
+  return React.createElement(Fade, {
+    unmountOnExit: true,
+    mountOnEnter: true,
+    "in": !!enableGrouping && !!currentDraggingColumn
+  }, React.createElement(Box, {
+    sx: function sx(theme) {
+      return {
+        alignItems: 'center',
+        backgroundColor: alpha(theme.palette.info.main, (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
+        border: "dashed " + theme.palette.info.main + " 2px",
+        display: 'flex',
+        justifyContent: 'center',
+        height: 'calc(100% - 4px)',
+        position: 'absolute',
+        width: 'calc(100% - 4px)',
+        zIndex: 2
+      };
+    },
+    onDragEnter: handleDragEnter
+  }, React.createElement(Typography, null, localization.dropToGroupBy.replace('{column}', (_currentDraggingColum = currentDraggingColumn == null ? void 0 : (_currentDraggingColum2 = currentDraggingColumn.columnDef) == null ? void 0 : _currentDraggingColum2.header) != null ? _currentDraggingColum : ''))));
+};
+
 var commonToolbarStyles = function commonToolbarStyles(_ref) {
   var theme = _ref.theme;
   return {
@@ -1955,6 +1998,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       positionGlobalFilter = _table$options.positionGlobalFilter,
       positionPagination = _table$options.positionPagination,
       positionToolbarAlertBanner = _table$options.positionToolbarAlertBanner,
+      positionToolbarDropZone = _table$options.positionToolbarDropZone,
       renderToolbarTopCustomActions = _table$options.renderToolbarTopCustomActions,
       tableId = _table$options.tableId;
 
@@ -1982,6 +2026,8 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   }), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, {
     stackAlertBanner: stackAlertBanner,
     table: table
+  }), ['both', 'top'].includes(positionToolbarDropZone != null ? positionToolbarDropZone : '') && React.createElement(MRT_ToolbarDropZone, {
+    table: table
   }), React.createElement(Box, {
     sx: {
       alignItems: 'flex-start',
@@ -2019,6 +2065,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       muiTableToolbarBottomProps = _table$options.muiTableToolbarBottomProps,
       positionPagination = _table$options.positionPagination,
       positionToolbarAlertBanner = _table$options.positionToolbarAlertBanner,
+      positionToolbarDropZone = _table$options.positionToolbarDropZone,
       renderToolbarBottomCustomActions = _table$options.renderToolbarBottomCustomActions,
       tableId = _table$options.tableId;
 
@@ -2050,6 +2097,8 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
     table: table
   }), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
     table: table
+  }), ['both', 'bottom'].includes(positionToolbarDropZone != null ? positionToolbarDropZone : '') && React.createElement(MRT_ToolbarDropZone, {
+    table: table
   }), React.createElement(Box, {
     sx: {
       display: 'flex',
@@ -2526,7 +2575,9 @@ var MRT_TableHeadCellGrabHandle = function MRT_TableHeadCellGrabHandle(_ref) {
       targetColumn: currentHoveredColumn
     });
 
-    if (enableColumnOrdering && currentHoveredColumn && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) !== (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id)) {
+    if ((currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
+      column.toggleGrouping();
+    } else if (enableColumnOrdering && currentHoveredColumn && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) !== (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id)) {
       setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
     }
 
@@ -2663,6 +2714,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   };
 
   var handleDragEnter = function handleDragEnter(_e) {
+    if (enableGrouping && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
+      setCurrentHoveredColumn(null);
+    }
+
     if (enableColumnOrdering && currentDraggingColumn) {
       setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
     }
@@ -2997,6 +3052,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       enableClickToCopy = _table$options.enableClickToCopy,
       enableColumnOrdering = _table$options.enableColumnOrdering,
       enableEditing = _table$options.enableEditing,
+      enableGrouping = _table$options.enableGrouping,
       enablePagination = _table$options.enablePagination,
       enableRowNumbers = _table$options.enableRowNumbers,
       muiTableBodyCellProps = _table$options.muiTableBodyCellProps,
@@ -3063,6 +3119,10 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   };
 
   var handleDragEnter = function handleDragEnter(_e) {
+    if (enableGrouping && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
+      setCurrentHoveredColumn(null);
+    }
+
     if (enableColumnOrdering && currentDraggingColumn) {
       setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
     }
@@ -3723,14 +3783,14 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     getGroupedRowModel: getGroupedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    onColumnOrderChange: setColumnOrder
+    onColumnOrderChange: setColumnOrder,
+    getSubRows: function getSubRows(row) {
+      return row == null ? void 0 : row.subRows;
+    }
   }, props, {
     //@ts-ignore
     columns: columnDefs,
     data: data,
-    getSubRows: function getSubRows(row) {
-      return row == null ? void 0 : row.subRows;
-    },
     globalFilterFn: //@ts-ignore
     (_MRT_FilterFns$curren = MRT_FilterFns[currentGlobalFilterFn]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy,
     initialState: initialState,
@@ -3788,7 +3848,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -3868,6 +3928,8 @@ var MaterialReactTable = (function (_ref) {
       positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
       _ref$positionToolbarA = _ref.positionToolbarAlertBanner,
       positionToolbarAlertBanner = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
+      _ref$positionToolbarD = _ref.positionToolbarDropZone,
+      positionToolbarDropZone = _ref$positionToolbarD === void 0 ? 'top' : _ref$positionToolbarD,
       _ref$rowNumberMode = _ref.rowNumberMode,
       rowNumberMode = _ref$rowNumberMode === void 0 ? 'original' : _ref$rowNumberMode,
       _ref$selectAllMode = _ref.selectAllMode,
@@ -3913,6 +3975,7 @@ var MaterialReactTable = (function (_ref) {
     positionGlobalFilter: positionGlobalFilter,
     positionPagination: positionPagination,
     positionToolbarAlertBanner: positionToolbarAlertBanner,
+    positionToolbarDropZone: positionToolbarDropZone,
     rowNumberMode: rowNumberMode,
     selectAllMode: selectAllMode
   }, rest));