material-react-table 0.25.0 → 0.26.0

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

@@ -53,6 +53,7 @@ var MRT_DefaultLocalization_EN = {
   expand: 'Expand',
   expandAll: 'Expand all',
   filterBetween: 'Between',
+  filterBetweenInclusive: 'Between Inclusive',
   filterByColumn: 'Filter by {column}',
   filterContains: 'Contains',
   filterEmpty: 'Empty',
@@ -60,7 +61,9 @@ var MRT_DefaultLocalization_EN = {
   filterEquals: 'Equals',
   filterFuzzy: 'Fuzzy',
   filterGreaterThan: 'Greater Than',
+  filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
   filterLessThan: 'Less Than',
+  filterLessThanOrEqualTo: 'Less Than Or Equal To',
   filterMode: 'Filter Mode: {filterType}',
   filterNotEmpty: 'Not Empty',
   filterNotEquals: 'Not Equals',
@@ -226,11 +229,6 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   }))));
 };
 
-var commonMenuItemStyles = {
-  py: '6px',
-  my: 0,
-  alignItems: 'center'
-};
 var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   var _columnDef$enabledCol;
 
@@ -262,46 +260,72 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   var filterOptions = useMemo(function () {
     return [{
       option: 'fuzzy',
+      symbol: '≈',
       label: localization.filterFuzzy,
       divider: false
     }, {
       option: 'contains',
+      symbol: '[]',
       label: localization.filterContains,
       divider: false
     }, {
       option: 'startsWith',
+      symbol: 'a',
       label: localization.filterStartsWith,
       divider: false
     }, {
       option: 'endsWith',
+      symbol: 'z',
       label: localization.filterEndsWith,
       divider: true
     }, {
       option: 'equals',
+      symbol: '=',
       label: localization.filterEquals,
       divider: false
     }, {
       option: 'notEquals',
+      symbol: '≠',
       label: localization.filterNotEquals,
       divider: true
     }, {
       option: 'between',
+      symbol: '⇿',
       label: localization.filterBetween,
       divider: false
+    }, {
+      option: 'betweenInclusive',
+      symbol: '⬌',
+      label: localization.filterBetweenInclusive,
+      divider: true
     }, {
       option: 'greaterThan',
+      symbol: '>',
       label: localization.filterGreaterThan,
       divider: false
+    }, {
+      option: 'greaterThanOrEqualTo',
+      symbol: '≥',
+      label: localization.filterGreaterThanOrEqualTo,
+      divider: false
     }, {
       option: 'lessThan',
+      symbol: '<',
       label: localization.filterLessThan,
+      divider: false
+    }, {
+      option: 'lessThanOrEqualTo',
+      symbol: '≤',
+      label: localization.filterLessThanOrEqualTo,
       divider: true
     }, {
       option: 'empty',
+      symbol: '∅',
       label: localization.filterEmpty,
       divider: false
     }, {
       option: 'notEmpty',
+      symbol: '!∅',
       label: localization.filterNotEmpty,
       divider: false
     }].filter(function (filterType) {
@@ -349,7 +373,8 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   }, filterOptions.map(function (_ref4, index) {
     var option = _ref4.option,
         label = _ref4.label,
-        divider = _ref4.divider;
+        divider = _ref4.divider,
+        symbol = _ref4.symbol;
     return React.createElement(MenuItem, {
       divider: divider,
       key: index,
@@ -357,9 +382,20 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
         return handleSelectFilterType(option);
       },
       selected: option === filterOption,
-      sx: commonMenuItemStyles,
+      sx: {
+        py: '6px',
+        my: 0,
+        alignItems: 'center',
+        display: 'flex',
+        gap: '2ch'
+      },
       value: option
-    }, label);
+    }, React.createElement(Box, {
+      sx: {
+        fontSize: '1.25rem',
+        width: '2ch'
+      }
+    }, symbol), label);
   }));
 };
 
@@ -505,21 +541,37 @@ notEquals.autoRemove = function (val) {
 };
 
 var greaterThan = function greaterThan(row, id, filterValue) {
-  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) >= +filterValue : row.getValue(id).toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
+  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) > +filterValue : row.getValue(id).toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
 };
 
 greaterThan.autoRemove = function (val) {
   return !val;
 };
 
+var greaterThanOrEqualTo = function greaterThanOrEqualTo(row, id, filterValue) {
+  return equals(row, id, filterValue) || greaterThan(row, id, filterValue);
+};
+
+greaterThanOrEqualTo.autoRemove = function (val) {
+  return !val;
+};
+
 var lessThan = function lessThan(row, id, filterValue) {
-  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) <= +filterValue : row.getValue(id).toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
+  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) < +filterValue : row.getValue(id).toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
 };
 
 lessThan.autoRemove = function (val) {
   return !val;
 };
 
+var lessThanOrEqualTo = function lessThanOrEqualTo(row, id, filterValue) {
+  return equals(row, id, filterValue) || lessThan(row, id, filterValue);
+};
+
+lessThanOrEqualTo.autoRemove = function (val) {
+  return !val;
+};
+
 var between = function between(row, id, filterValues) {
   return (['', undefined].includes(filterValues[0]) || greaterThan(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ['', undefined].includes(filterValues[1]) || lessThan(row, id, filterValues[1]));
 };
@@ -528,6 +580,14 @@ between.autoRemove = function (val) {
   return !val;
 };
 
+var betweenInclusive = function betweenInclusive(row, id, filterValues) {
+  return (['', undefined].includes(filterValues[0]) || greaterThanOrEqualTo(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ['', undefined].includes(filterValues[1]) || lessThanOrEqualTo(row, id, filterValues[1]));
+};
+
+betweenInclusive.autoRemove = function (val) {
+  return !val;
+};
+
 var empty = function empty(row, id, _filterValue) {
   return !row.getValue(id).toString().trim();
 };
@@ -546,13 +606,16 @@ notEmpty.autoRemove = function (val) {
 
 var MRT_FilterFns = /*#__PURE__*/_extends({}, filterFns, {
   between: between,
+  betweenInclusive: betweenInclusive,
   contains: contains,
   empty: empty,
   endsWith: endsWith,
   equals: equals,
   fuzzy: fuzzy,
   greaterThan: greaterThan,
+  greaterThanOrEqualTo: greaterThanOrEqualTo,
   lessThan: lessThan,
+  lessThanOrEqualTo: lessThanOrEqualTo,
   notEmpty: notEmpty,
   notEquals: notEquals,
   startsWith: startsWith
@@ -904,7 +967,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   }));
 };
 
-var commonMenuItemStyles$1 = {
+var commonMenuItemStyles = {
   py: '6px',
   my: 0,
   justifyContent: 'space-between',
@@ -1048,14 +1111,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     disabled: !column.getIsSorted(),
     key: 0,
     onClick: handleClearSort,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React.createElement(Box, {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(ClearAllIcon, null)), localization.clearSort)), React.createElement(MenuItem, {
     disabled: column.getIsSorted() === 'asc',
     key: 1,
     onClick: handleSortAsc,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React.createElement(Box, {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(columnDef.header)))), React.createElement(MenuItem, {
@@ -1063,7 +1126,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     key: 2,
     disabled: column.getIsSorted() === 'desc',
     onClick: handleSortDesc,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React.createElement(Box, {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, {
@@ -1074,14 +1137,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     disabled: !column.getFilterValue(),
     key: 0,
     onClick: handleClearFilter,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React.createElement(Box, {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(FilterListOffIcon, null)), localization.clearFilter)), React.createElement(MenuItem, {
     divider: enableGrouping || enableHiding,
     key: 1,
     onClick: handleFilterByColumn,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React.createElement(Box, {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header))), showFilterModeSubMenu && React.createElement(IconButton, {
@@ -1102,7 +1165,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     divider: enablePinning,
     key: 0,
     onClick: handleGroupByColumn,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React.createElement(Box, {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(columnDef.header))))], enablePinning && column.getCanPin() && [React.createElement(MenuItem, {
@@ -1111,7 +1174,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     onClick: function onClick() {
       return handlePinColumn('left');
     },
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React.createElement(Box, {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(PushPinIcon, {
@@ -1124,7 +1187,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     onClick: function onClick() {
       return handlePinColumn('right');
     },
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React.createElement(Box, {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(PushPinIcon, {
@@ -1138,21 +1201,21 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     onClick: function onClick() {
       return handlePinColumn(false);
     },
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React.createElement(Box, {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && column.getCanResize() && [React.createElement(MenuItem, {
     disabled: !columnSizing[column.id],
     key: 0,
     onClick: handleResetColumnSize,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React.createElement(Box, {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(RestartAltIcon, null)), localization.resetColumnSize))], enableHiding && [React.createElement(MenuItem, {
     disabled: columnDef.enableHiding === false,
     key: 0,
     onClick: handleHideColumn,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React.createElement(Box, {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(columnDef.header)))), React.createElement(MenuItem, {
@@ -1161,7 +1224,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     }).length,
     key: 1,
     onClick: handleShowAllColumns,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React.createElement(Box, {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(columnDef.header))), React.createElement(IconButton, {
@@ -1207,7 +1270,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     }
   }, enableEditing && React.createElement(MenuItem, {
     onClick: handleEdit,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React.createElement(Box, {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(EditIcon, null)), localization.edit)), renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems({