material-react-table 1.5.1 → 1.5.3

package/dist/cjs/index.js

@@ -9,7 +9,6 @@ var matchSorterUtils = require('@tanstack/match-sorter-utils');
 var ArrowDownwardIcon = require('@mui/icons-material/ArrowDownward');
 var ArrowRightIcon = require('@mui/icons-material/ArrowRight');
 var CancelIcon = require('@mui/icons-material/Cancel');
-var CheckBoxIcon = require('@mui/icons-material/CheckBox');
 var ClearAllIcon = require('@mui/icons-material/ClearAll');
 var CloseIcon = require('@mui/icons-material/Close');
 var DensityLargeIcon = require('@mui/icons-material/DensityLarge');
@@ -21,7 +20,6 @@ var EditIcon = require('@mui/icons-material/Edit');
 var ExpandLessIcon = require('@mui/icons-material/ExpandLess');
 var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 var FilterAltIcon = require('@mui/icons-material/FilterAlt');
-var FilterAltOffIcon = require('@mui/icons-material/FilterAltOff');
 var FilterListIcon = require('@mui/icons-material/FilterList');
 var FilterListOffIcon = require('@mui/icons-material/FilterListOff');
 var FullscreenExitIcon = require('@mui/icons-material/FullscreenExit');
@@ -86,7 +84,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ArrowDownwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownwardIcon);
 var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
 var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
-var CheckBoxIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckBoxIcon);
 var ClearAllIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearAllIcon);
 var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
 var DensityLargeIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityLargeIcon);
@@ -98,7 +95,6 @@ var EditIcon__default = /*#__PURE__*/_interopDefaultLegacy(EditIcon);
 var ExpandLessIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandLessIcon);
 var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
 var FilterAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltIcon);
-var FilterAltOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltOffIcon);
 var FilterListIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListIcon);
 var FilterListOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListOffIcon);
 var FullscreenExitIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenExitIcon);
@@ -450,7 +446,6 @@ const MRT_Default_Icons = {
     ArrowDownwardIcon: ArrowDownwardIcon__default["default"],
     ArrowRightIcon: ArrowRightIcon__default["default"],
     CancelIcon: CancelIcon__default["default"],
-    CheckBoxIcon: CheckBoxIcon__default["default"],
     ClearAllIcon: ClearAllIcon__default["default"],
     CloseIcon: CloseIcon__default["default"],
     DensityLargeIcon: DensityLargeIcon__default["default"],
@@ -462,7 +457,6 @@ const MRT_Default_Icons = {
     ExpandLessIcon: ExpandLessIcon__default["default"],
     ExpandMoreIcon: ExpandMoreIcon__default["default"],
     FilterAltIcon: FilterAltIcon__default["default"],
-    FilterAltOffIcon: FilterAltOffIcon__default["default"],
     FilterListIcon: FilterListIcon__default["default"],
     FilterListOffIcon: FilterListOffIcon__default["default"],
     FullscreenExitIcon: FullscreenExitIcon__default["default"],
@@ -1321,7 +1315,7 @@ const MRT_ShowHideColumnsButton = (_a) => {
         React__default["default"].createElement(Tooltip__default["default"], { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns },
             React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined }),
                 React__default["default"].createElement(ViewColumnIcon, null))),
-        React__default["default"].createElement(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table })));
+        anchorEl && (React__default["default"].createElement(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table }))));
 };
 
 const MRT_ToggleDensePaddingButton = (_a) => {
@@ -1387,15 +1381,21 @@ const MRT_ToolbarInternalButtons = ({ table, }) => {
 
 const MRT_ToolbarDropZone = ({ table, }) => {
     var _a, _b;
-    const { getState, options: { enableGrouping, localization }, setHoveredColumn, } = table;
-    const { draggingColumn, hoveredColumn, grouping } = getState();
+    const { getState, options: { enableGrouping, localization }, setHoveredColumn, setShowToolbarDropZone, } = table;
+    const { draggingColumn, hoveredColumn, grouping, showToolbarDropZone } = getState();
     const handleDragEnter = (_event) => {
         setHoveredColumn({ id: 'drop-zone' });
     };
-    return (React__default["default"].createElement(Fade__default["default"], { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping &&
-            !!draggingColumn &&
-            !grouping.includes(draggingColumn.id) },
-        React__default["default"].createElement(Box__default["default"], { sx: (theme) => ({
+    React.useEffect(() => {
+        var _a;
+        if (((_a = table.options.state) === null || _a === void 0 ? void 0 : _a.showToolbarDropZone) !== undefined) {
+            setShowToolbarDropZone(!!enableGrouping &&
+                !!draggingColumn &&
+                !grouping.includes(draggingColumn.id));
+        }
+    }, [enableGrouping, draggingColumn, grouping]);
+    return (React__default["default"].createElement(Fade__default["default"], { in: showToolbarDropZone },
+        React__default["default"].createElement(Box__default["default"], { className: "Mui-ToolbarDropZone", sx: (theme) => ({
                 alignItems: 'center',
                 backgroundColor: styles.alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
                 border: `dashed ${theme.palette.info.main} 2px`,
@@ -1632,7 +1632,10 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     const handleClearEmptyFilterChip = () => {
         setFilterValue('');
         column.setFilterValue(undefined);
-        setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: 'fuzzy' })));
+        setColumnFilterFns((prev) => {
+            var _a, _b, _c;
+            return (Object.assign(Object.assign({}, prev), { [header.id]: (_c = (_b = (_a = columnDef.columnFilterModeOptions) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : columnFilterModeOptions === null || columnFilterModeOptions === void 0 ? void 0 : columnFilterModeOptions[0]) !== null && _c !== void 0 ? _c : 'fuzzy' }));
+        });
     };
     const handleFilterMenuOpen = (event) => {
         setAnchorEl(event.currentTarget);
@@ -2757,7 +2760,7 @@ const MRT_EditRowModal = ({ open, row, table, }) => {
 };
 
 const MRT_TableRoot = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
     const bottomToolbarRef = React.useRef(null);
     const editInputRefs = React.useRef({});
     const filterInputRefs = React.useRef({});
@@ -2796,6 +2799,7 @@ const MRT_TableRoot = (props) => {
     const [showAlertBanner, setShowAlertBanner] = React.useState((_o = (_m = props.initialState) === null || _m === void 0 ? void 0 : _m.showAlertBanner) !== null && _o !== void 0 ? _o : false);
     const [showColumnFilters, setShowFilters] = React.useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
     const [showGlobalFilter, setShowGlobalFilter] = React.useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
+    const [showToolbarDropZone, setShowToolbarDropZone] = React.useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _r !== void 0 ? _r : false);
     const displayColumns = React.useMemo(() => {
         var _a, _b, _c, _d, _e;
         return [
@@ -2846,7 +2850,7 @@ const MRT_TableRoot = (props) => {
         columnFilterFns,
         displayColumns,
         props.columns,
-        (_r = props.state) === null || _r === void 0 ? void 0 : _r.columnFilterFns,
+        (_s = props.state) === null || _s === void 0 ? void 0 : _s.columnFilterFns,
     ]);
     const data = React.useMemo(() => {
         var _a, _b, _c, _d, _e;
@@ -2860,11 +2864,11 @@ const MRT_TableRoot = (props) => {
                 [getColumnId(col)]: null,
             }))))
             : props.data;
-    }, [props.data, (_s = props.state) === null || _s === void 0 ? void 0 : _s.isLoading, (_t = props.state) === null || _t === void 0 ? void 0 : _t.showSkeletons]);
+    }, [props.data, (_t = props.state) === null || _t === void 0 ? void 0 : _t.isLoading, (_u = props.state) === null || _u === void 0 ? void 0 : _u.showSkeletons]);
     //@ts-ignore
     const table = Object.assign(Object.assign({}, reactTable.useReactTable(Object.assign(Object.assign({ getCoreRowModel: reactTable.getCoreRowModel(), getExpandedRowModel: reactTable.getExpandedRowModel(), getFacetedRowModel: reactTable.getFacetedRowModel(), getFilteredRowModel: reactTable.getFilteredRowModel(), getGroupedRowModel: reactTable.getGroupedRowModel(), getPaginationRowModel: reactTable.getPaginationRowModel(), getSortedRowModel: reactTable.getSortedRowModel(), onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
         //@ts-ignore
-        columns: columnDefs, data, globalFilterFn: (_v = (_u = props.filterFns) === null || _u === void 0 ? void 0 : _u[globalFilterFn]) !== null && _v !== void 0 ? _v : (_w = props.filterFns) === null || _w === void 0 ? void 0 : _w.fuzzy, initialState, state: Object.assign({ columnFilterFns,
+        columns: columnDefs, data, globalFilterFn: (_w = (_v = props.filterFns) === null || _v === void 0 ? void 0 : _v[globalFilterFn]) !== null && _w !== void 0 ? _w : (_x = props.filterFns) === null || _x === void 0 ? void 0 : _x.fuzzy, initialState, state: Object.assign({ columnFilterFns,
             columnOrder,
             density,
             draggingColumn,
@@ -2878,7 +2882,8 @@ const MRT_TableRoot = (props) => {
             isFullScreen,
             showAlertBanner,
             showColumnFilters,
-            showGlobalFilter }, props.state) }))), { refs: {
+            showGlobalFilter,
+            showToolbarDropZone }, props.state) }))), { refs: {
             bottomToolbarRef,
             editInputRefs,
             filterInputRefs,
@@ -2887,7 +2892,7 @@ const MRT_TableRoot = (props) => {
             tableHeadCellRefs,
             tablePaperRef,
             topToolbarRef,
-        }, setColumnFilterFns: (_x = props.onColumnFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns, setDensity: (_y = props.onDensityChange) !== null && _y !== void 0 ? _y : setDensity, setDraggingColumn: (_z = props.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn, setDraggingRow: (_0 = props.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow, setEditingCell: (_1 = props.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell, setEditingRow: (_2 = props.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow, setGlobalFilterFn: (_3 = props.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn, setHoveredColumn: (_4 = props.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn, setHoveredRow: (_5 = props.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow, setIsFullScreen: (_6 = props.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen, setShowAlertBanner: (_7 = props.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner, setShowFilters: (_8 = props.onShowFiltersChange) !== null && _8 !== void 0 ? _8 : setShowFilters, setShowGlobalFilter: (_9 = props.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter });
+        }, setColumnFilterFns: (_y = props.onColumnFilterFnsChange) !== null && _y !== void 0 ? _y : setColumnFilterFns, setDensity: (_z = props.onDensityChange) !== null && _z !== void 0 ? _z : setDensity, setDraggingColumn: (_0 = props.onDraggingColumnChange) !== null && _0 !== void 0 ? _0 : setDraggingColumn, setDraggingRow: (_1 = props.onDraggingRowChange) !== null && _1 !== void 0 ? _1 : setDraggingRow, setEditingCell: (_2 = props.onEditingCellChange) !== null && _2 !== void 0 ? _2 : setEditingCell, setEditingRow: (_3 = props.onEditingRowChange) !== null && _3 !== void 0 ? _3 : setEditingRow, setGlobalFilterFn: (_4 = props.onGlobalFilterFnChange) !== null && _4 !== void 0 ? _4 : setGlobalFilterFn, setHoveredColumn: (_5 = props.onHoveredColumnChange) !== null && _5 !== void 0 ? _5 : setHoveredColumn, setHoveredRow: (_6 = props.onHoveredRowChange) !== null && _6 !== void 0 ? _6 : setHoveredRow, setIsFullScreen: (_7 = props.onIsFullScreenChange) !== null && _7 !== void 0 ? _7 : setIsFullScreen, setShowAlertBanner: (_8 = props.onShowAlertBannerChange) !== null && _8 !== void 0 ? _8 : setShowAlertBanner, setShowFilters: (_9 = props.onShowFiltersChange) !== null && _9 !== void 0 ? _9 : setShowFilters, setShowGlobalFilter: (_10 = props.onShowGlobalFilterChange) !== null && _10 !== void 0 ? _10 : setShowGlobalFilter, setShowToolbarDropZone: (_11 = props.onShowToolbarDropZoneChange) !== null && _11 !== void 0 ? _11 : setShowToolbarDropZone });
     if (props.tableInstanceRef) {
         props.tableInstanceRef.current = table;
     }