material-react-table 0.14.5 → 0.14.6

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

@@ -1,8 +1,8 @@
 import React, { useMemo, forwardRef, useState, useCallback, Fragment, 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 { createTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useTableInstance } from '@tanstack/react-table';
+import { sortingFns, createTable, filterFns, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useTableInstance } from '@tanstack/react-table';
 import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
-import { rankItem, rankings } from '@tanstack/match-sorter-utils';
+import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
 import { useDrop, useDrag, DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useVirtual } from 'react-virtual';
@@ -329,7 +329,7 @@ notEmpty.autoRemove = function (val) {
   return !val;
 };
 
-var defaultFilterFNs = {
+var MRT_FilterFns = {
   between: between,
   contains: contains,
   empty: empty,
@@ -616,7 +616,7 @@ var createDataColumn = function createDataColumn(table, column, currentFilterFns
   return (// @ts-ignore
     table.createDataColumn(column.id, _extends({
       filterFn: currentFilterFns[column.id] instanceof Function ? currentFilterFns[column.id] : // @ts-ignore
-      defaultFilterFNs[currentFilterFns[column.id]]
+      MRT_FilterFns[currentFilterFns[column.id]]
     }, column))
   );
 };
@@ -1539,19 +1539,22 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
   }, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
 };
 
-var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
+var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
+  var _localization$clearSe;
+
   var instance = _ref.instance;
   var getState = instance.getState,
       setGlobalFilter = instance.setGlobalFilter,
       _instance$options = instance.options,
+      enableGlobalFilterChangeMode = _instance$options.enableGlobalFilterChangeMode,
       _instance$options$ico = _instance$options.icons,
       SearchIcon = _instance$options$ico.SearchIcon,
       CloseIcon = _instance$options$ico.CloseIcon,
-      tableId = _instance$options.tableId,
       localization = _instance$options.localization,
       muiSearchTextFieldProps = _instance$options.muiSearchTextFieldProps,
       onGlobalFilterValueChanged = _instance$options.onGlobalFilterValueChanged,
-      onGlobalFilterValueChangedDebounced = _instance$options.onGlobalFilterValueChangedDebounced;
+      onGlobalFilterValueChangedDebounced = _instance$options.onGlobalFilterValueChangedDebounced,
+      tableId = _instance$options.tableId;
 
   var _getState = getState(),
       globalFilter = _getState.globalFilter,
@@ -1606,7 +1609,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
     value: searchValue != null ? searchValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: React.createElement(InputAdornment, {
+      startAdornment: enableGlobalFilterChangeMode ? React.createElement(InputAdornment, {
         position: "start"
       }, React.createElement(Tooltip, {
         arrow: true,
@@ -1619,16 +1622,18 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
           height: '1.75rem',
           width: '1.75rem'
         }
-      }, React.createElement(SearchIcon, null)))),
+      }, React.createElement(SearchIcon, null)))) : React.createElement(SearchIcon, null),
       endAdornment: React.createElement(InputAdornment, {
         position: "end"
-      }, React.createElement(IconButton, {
+      }, React.createElement(Tooltip, {
+        arrow: true,
+        title: (_localization$clearSe = localization.clearSearch) != null ? _localization$clearSe : ''
+      }, React.createElement("span", null, React.createElement(IconButton, {
         "aria-label": localization.clearSearch,
-        disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
+        disabled: !(searchValue != null && searchValue.length),
         onClick: handleClear,
-        size: "small",
-        title: localization.clearSearch
-      }, React.createElement(CloseIcon, null)))
+        size: "small"
+      }, React.createElement(CloseIcon, null)))))
     }
   }, textFieldProps)), React.createElement(MRT_FilterOptionMenu, {
     anchorEl: anchorEl,
@@ -1663,7 +1668,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
     MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
     MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
     instance: instance
-  })) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_SearchTextField, {
+  })) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_GlobalFilterTextField, {
     instance: instance
   }), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
     instance: instance
@@ -1889,13 +1894,13 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       top: 0,
       width: '100%'
     }
-  }, enableGlobalFilter && positionGlobalFilter === 'left' && React.createElement(MRT_SearchTextField, {
+  }, enableGlobalFilter && positionGlobalFilter === 'left' && React.createElement(MRT_GlobalFilterTextField, {
     instance: instance
   }), (_renderToolbarTopCust = renderToolbarTopCustomActions == null ? void 0 : renderToolbarTopCustomActions({
     instance: instance
   })) != null ? _renderToolbarTopCust : React.createElement("span", null), enableToolbarInternalActions ? React.createElement(MRT_ToolbarInternalButtons, {
     instance: instance
-  }) : enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_SearchTextField, {
+  }) : enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_GlobalFilterTextField, {
     instance: instance
   })), enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
     instance: instance,
@@ -1972,13 +1977,14 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterB, _columnDef$enabledCol, _allowedColumnFilterO, _localization$filterM, _localization$, _allowedColumnFilterO2, _localization$clearFi, _columnDef$filterSele;
+  var _localization$filterB, _columnDef$enabledCol, _allowedColumnFilterO, _localization$filterM, _localization$, _localization$clearFi, _columnDef$filterSele;
 
   var header = _ref.header,
       inputIndex = _ref.inputIndex,
       instance = _ref.instance;
   var getState = instance.getState,
       _instance$options = instance.options,
+      enableColumnFilterChangeMode = _instance$options.enableColumnFilterChangeMode,
       enabledColumnFilterOptions = _instance$options.enabledColumnFilterOptions,
       _instance$options$ico = _instance$options.icons,
       FilterListIcon = _instance$options$ico.FilterListIcon,
@@ -2104,6 +2110,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))] : '';
   var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
   var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
+  var allowColumnChangeMode = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false;
   return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
     fullWidth: true,
     id: filterId,
@@ -2115,7 +2122,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       },
       title: filterPlaceholder
     },
-    helperText: !inputIndex && (allowedColumnFilterOptions === undefined || ((_allowedColumnFilterO = allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.length) != null ? _allowedColumnFilterO : 0) > 0) ? React.createElement("label", {
+    helperText: allowColumnChangeMode && !inputIndex && (allowedColumnFilterOptions === undefined || ((_allowedColumnFilterO = allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.length) != null ? _allowedColumnFilterO : 0) > 0) ? React.createElement("label", {
       htmlFor: filterId
     }, filterFn instanceof Function ? (_localization$filterM = localization.filterMode.replace('{filterType}', // @ts-ignore
     (_localization$ = localization["filter" + (filterFn.name.charAt(0).toUpperCase() + filterFn.name.slice(1))]) != null ? _localization$ : '')) != null ? _localization$filterM : '' : localization.filterMode.replace('{filterType}', // @ts-ignore
@@ -2127,7 +2134,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
         whiteSpace: 'nowrap'
       }
     },
-    label: isSelectFilter && !filterValue ? filterPlaceholder : undefined,
     margin: "none",
     placeholder: filterChipLabel || isSelectFilter ? undefined : filterPlaceholder,
     onChange: handleChange,
@@ -2138,7 +2144,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     value: filterValue != null ? filterValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || ((_allowedColumnFilterO2 = allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.length) != null ? _allowedColumnFilterO2 : 0) > 0) && React.createElement(InputAdornment, {
+      startAdornment: allowColumnChangeMode && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length)) ? React.createElement(InputAdornment, {
         position: "start"
       }, React.createElement(Tooltip, {
         arrow: true,
@@ -2154,7 +2160,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       }, React.createElement(FilterListIcon, null)))), filterChipLabel && React.createElement(Chip, {
         onDelete: handleClearFilterChip,
         label: filterChipLabel
-      })),
+      })) : React.createElement(FilterListIcon, null),
       endAdornment: !filterChipLabel && React.createElement(InputAdornment, {
         position: "end"
       }, React.createElement(Tooltip, {
@@ -2179,7 +2185,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       p: 0,
       minWidth: !filterChipLabel ? '8rem' : 'auto',
       width: 'calc(100% + 0.5rem)',
-      mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
       '&	.MuiSelect-icon': {
         mr: '1.5rem'
       }
@@ -3301,6 +3306,21 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   })));
 };
 
+var fuzzy$1 = function fuzzy(rowA, rowB, columnId) {
+  var dir = 0;
+
+  if (rowA.columnFiltersMeta[columnId]) {
+    dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
+  } // Provide a fallback for when the item ranks are equal
+
+
+  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir;
+};
+
+var MRT_SortingFns = {
+  fuzzy: fuzzy$1
+};
+
 var MRT_TableRoot = function MRT_TableRoot(props) {
   var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
 
@@ -3389,8 +3409,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   var table = useMemo(function () {
     return (// @ts-ignore
       createTable().setOptions({
-        //@ts-ignore
-        filterFns: defaultFilterFNs,
+        filterFns: _extends({}, filterFns, MRT_FilterFns, props.filterFns),
         getCoreRowModel: getCoreRowModel(),
         getExpandedRowModel: getExpandedRowModel(),
         getFacetedRowModel: getFacetedRowModel(),
@@ -3398,10 +3417,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         getGroupedRowModel: getGroupedRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
-        getSubRows: function getSubRows(row) {
-          return row == null ? void 0 : row.subRows;
-        },
-        tableId: tableId
+        sortingFns: _extends({}, sortingFns, MRT_SortingFns, props.sortingFns)
       })
     );
   }, []);
@@ -3498,6 +3514,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     //@ts-ignore
     columns: columns,
     data: data,
+    getSubRows: function getSubRows(row) {
+      return row == null ? void 0 : row.subRows;
+    },
     //@ts-ignore
     globalFilterFn: currentGlobalFilterFn,
     initialState: initialState,
@@ -3511,7 +3530,8 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       isFullScreen: isFullScreen,
       showFilters: showFilters,
       showGlobalFilter: showGlobalFilter
-    }, props.state)
+    }, props.state),
+    tableId: tableId
   })), {
     setCurrentEditingCell: (_props$onCurrentEditi = props.onCurrentEditingCellChange) != null ? _props$onCurrentEditi : setCurrentEditingCell,
     setCurrentEditingRow: (_props$onCurrentEditi2 = props.onCurrentEditingRowChange) != null ? _props$onCurrentEditi2 : setCurrentEditingRow,
@@ -3563,7 +3583,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -3579,8 +3599,10 @@ var MaterialReactTable = (function (_ref) {
       editingMode = _ref$editingMode === void 0 ? 'row' : _ref$editingMode,
       _ref$enableColumnActi = _ref.enableColumnActions,
       enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
-      _ref$enableColumnFilt = _ref.enableColumnFilters,
-      enableColumnFilters = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
+      _ref$enableColumnFilt = _ref.enableColumnFilterChangeMode,
+      enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
+      _ref$enableColumnFilt2 = _ref.enableColumnFilters,
+      enableColumnFilters = _ref$enableColumnFilt2 === void 0 ? true : _ref$enableColumnFilt2,
       _ref$enableColumnOrde = _ref.enableColumnOrdering,
       enableColumnOrdering = _ref$enableColumnOrde === void 0 ? false : _ref$enableColumnOrde,
       _ref$enableColumnResi = _ref.enableColumnResizing,
@@ -3595,6 +3617,8 @@ var MaterialReactTable = (function (_ref) {
       enableFullScreenToggle = _ref$enableFullScreen === void 0 ? true : _ref$enableFullScreen,
       _ref$enableGlobalFilt = _ref.enableGlobalFilter,
       enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? true : _ref$enableGlobalFilt,
+      _ref$enableGlobalFilt2 = _ref.enableGlobalFilterChangeMode,
+      enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ? true : _ref$enableGlobalFilt2,
       _ref$enableGrouping = _ref.enableGrouping,
       enableGrouping = _ref$enableGrouping === void 0 ? false : _ref$enableGrouping,
       _ref$enableHiding = _ref.enableHiding,
@@ -3647,6 +3671,7 @@ var MaterialReactTable = (function (_ref) {
     defaultColumn: defaultColumn,
     editingMode: editingMode,
     enableColumnActions: enableColumnActions,
+    enableColumnFilterChangeMode: enableColumnFilterChangeMode,
     enableColumnFilters: enableColumnFilters,
     enableColumnOrdering: enableColumnOrdering,
     enableColumnResizing: enableColumnResizing,
@@ -3655,6 +3680,7 @@ var MaterialReactTable = (function (_ref) {
     enableFilters: enableFilters,
     enableFullScreenToggle: enableFullScreenToggle,
     enableGlobalFilter: enableGlobalFilter,
+    enableGlobalFilterChangeMode: enableGlobalFilterChangeMode,
     enableGrouping: enableGrouping,
     enableHiding: enableHiding,
     enableMultiRowSelection: enableMultiRowSelection,