@popmenu/table 0.91.0 → 0.93.0

package/build/index.es.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { createElement, forwardRef, createContext, useContext, useState, useRef, isValidElement } from 'react';
-import { makeStyles, Link as Link$2, Paper as Paper$2, Typography as Typography$2, Box, FormControl, InputLabel, Select, FormControlLabel as FormControlLabel$1, Switch as Switch$2, TextField, Popover, ButtonBase, InputAdornment, useTheme as useTheme$1 } from '@material-ui/core';
+import { makeStyles, Link as Link$2, Paper as Paper$2, Typography as Typography$2, Box, FormControl, InputLabel, Select, FormControlLabel as FormControlLabel$1, Switch as Switch$2, TextField, ButtonBase, Popover, InputAdornment, useTheme as useTheme$1 } from '@material-ui/core';
 import { Pagination } from '@material-ui/lab';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
 import CommonAlert from '@material-ui/lab/Alert';
@@ -139,19 +139,19 @@ function __rest$2(s, e) {
     return t;
 }
 
-var _g$1o$1;
+var _g$2B$1;
 
-function _extends$2t$1() { _extends$2t$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2t$1.apply(this, arguments); }
+function _extends$4J$1() { _extends$4J$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4J$1.apply(this, arguments); }
 
 function SvgCheckCircle$1(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2t$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$4J$1({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1o$1 || (_g$1o$1 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$2B$1 || (_g$2B$1 = /*#__PURE__*/React.createElement("g", {
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M14.667 7.387V8a6.667 6.667 0 11-3.954-6.093"
@@ -160,24 +160,24 @@ function SvgCheckCircle$1(props) {
   }))));
 }
 
-var _g$1m, _defs$J;
+var _g$2y, _defs$1C;
 
-function _extends$2q() { _extends$2q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2q.apply(this, arguments); }
+function _extends$4F() { _extends$4F = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4F.apply(this, arguments); }
 
 function SvgXCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2q({
+  return /*#__PURE__*/React.createElement("svg", _extends$4F({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1m || (_g$1m = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$2y || (_g$2y = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#x-circle_svg__clip0_8_6136)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM10 6l-4 4m0-4l4 4"
-  }))), _defs$J || (_defs$J = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$1C || (_defs$1C = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "x-circle_svg__clip0_8_6136"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -185,24 +185,24 @@ function SvgXCircle(props) {
   })))));
 }
 
-var _g$1d$1, _defs$D$1;
+var _g$2l$1, _defs$1s$1;
 
-function _extends$2e$1() { _extends$2e$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2e$1.apply(this, arguments); }
+function _extends$4l$1() { _extends$4l$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4l$1.apply(this, arguments); }
 
 function SvgInfo$1(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2e$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$4l$1({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1d$1 || (_g$1d$1 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$2l$1 || (_g$2l$1 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#info_svg__clip0_8_5377)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-4V8m0-2.667h.007"
-  }))), _defs$D$1 || (_defs$D$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$1s$1 || (_defs$1s$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "info_svg__clip0_8_5377"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -210,42 +210,42 @@ function SvgInfo$1(props) {
   })))));
 }
 
-var _path$N$1;
+var _path$1D$1;
 
-function _extends$1N$1() { _extends$1N$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1N$1.apply(this, arguments); }
+function _extends$3G$1() { _extends$3G$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3G$1.apply(this, arguments); }
 
 function SvgUser$1(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1N$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$3G$1({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$N$1 || (_path$N$1 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1D$1 || (_path$1D$1 = /*#__PURE__*/React.createElement("path", {
     d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z",
     stroke: "currentColor"
   })));
 }
 
-var _g$Z$1, _defs$u$1;
+var _g$1$$1, _defs$1e$1;
 
-function _extends$1J$1() { _extends$1J$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1J$1.apply(this, arguments); }
+function _extends$3v$1() { _extends$3v$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3v$1.apply(this, arguments); }
 
 function SvgError$1(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1J$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$3v$1({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$Z$1 || (_g$Z$1 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$1$$1 || (_g$1$$1 = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#error_svg__clip0_8_5411)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M5.24 1.333h5.52l3.907 3.907v5.52l-3.907 3.907H5.24L1.333 10.76V5.24L5.24 1.333zm2.76 4V8m0 2.666h.008"
-  }))), _defs$u$1 || (_defs$u$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$1e$1 || (_defs$1e$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "error_svg__clip0_8_5411"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -253,19 +253,19 @@ function SvgError$1(props) {
   })))));
 }
 
-var _path$K$1;
+var _path$1u$1;
 
-function _extends$1I$1() { _extends$1I$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1I$1.apply(this, arguments); }
+function _extends$3u$1() { _extends$3u$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3u$1.apply(this, arguments); }
 
 function SvgWarning$1(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1I$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$3u$1({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$K$1 || (_path$K$1 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1u$1 || (_path$1u$1 = /*#__PURE__*/React.createElement("path", {
     d: "M6.86 2.573L1.213 12a1.334 1.334 0 001.14 2h11.294a1.332 1.332 0 001.14-2L9.14 2.573a1.333 1.333 0 00-2.28 0v0zM8 6v2.667m0 2.667h.007",
     stroke: "currentColor"
   })));
@@ -1032,6 +1032,14 @@ var TableFooter = function (props) {
 };
 
 var useStyles$6 = makeStyles(function (theme) { return ({
+    buttonBox: {
+        '& > :last-child': {
+            marginLeft: theme.spacing(2),
+        },
+        display: 'flex',
+        justifyContent: 'flex-end',
+        padding: "0px " + theme.spacing(3) + "px " + theme.spacing(3) + "px " + theme.spacing(3) + "px",
+    },
     buttonLabel: {
         fontWeight: 400,
     },
@@ -1077,109 +1085,109 @@ var useStyles$6 = makeStyles(function (theme) { return ({
     },
 }); });
 
-var _path$1g;
+var _path$2p;
 
-function _extends$2O() { _extends$2O = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2O.apply(this, arguments); }
+function _extends$5p() { _extends$5p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5p.apply(this, arguments); }
 
 function SvgChevronDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2O({
+  return /*#__PURE__*/React.createElement("svg", _extends$5p({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$1g || (_path$1g = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2p || (_path$2p = /*#__PURE__*/React.createElement("path", {
     d: "M4 6l4 4 4-4",
     stroke: "currentColor"
   })));
 }
 
-var _path$1f;
+var _path$2o;
 
-function _extends$2N() { _extends$2N = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2N.apply(this, arguments); }
+function _extends$5o() { _extends$5o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5o.apply(this, arguments); }
 
 function SvgChevronUp(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2N({
+  return /*#__PURE__*/React.createElement("svg", _extends$5o({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$1f || (_path$1f = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2o || (_path$2o = /*#__PURE__*/React.createElement("path", {
     d: "M12 10L8 6l-4 4",
     stroke: "currentColor"
   })));
 }
 
-var _path$19;
+var _path$2f;
 
-function _extends$2C() { _extends$2C = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2C.apply(this, arguments); }
+function _extends$58() { _extends$58 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$58.apply(this, arguments); }
 
 function SvgSort(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2C({
+  return /*#__PURE__*/React.createElement("svg", _extends$58({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$19 || (_path$19 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2f || (_path$2f = /*#__PURE__*/React.createElement("path", {
     d: "M11.333 6L8 2.667 4.667 6m6.666 4L8 13.334 4.667 10",
     stroke: "currentColor"
   })));
 }
 
-var _path$11;
+var _path$22;
 
-function _extends$2k() { _extends$2k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2k.apply(this, arguments); }
+function _extends$4t() { _extends$4t = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4t.apply(this, arguments); }
 
 function SvgFilter(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2k({
+  return /*#__PURE__*/React.createElement("svg", _extends$4t({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$11 || (_path$11 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$22 || (_path$22 = /*#__PURE__*/React.createElement("path", {
     d: "M14.667 2H1.333l5.334 6.307v4.36L9.333 14V8.307L14.667 2z",
     stroke: "currentColor"
   })));
 }
 
-var _path$V;
+var _path$1P;
 
-function _extends$23() { _extends$23 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$23.apply(this, arguments); }
+function _extends$44() { _extends$44 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$44.apply(this, arguments); }
 
 function SvgMore(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$23({
+  return /*#__PURE__*/React.createElement("svg", _extends$44({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$V || (_path$V = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1P || (_path$1P = /*#__PURE__*/React.createElement("path", {
     d: "M8 8.667a.667.667 0 100-1.334.667.667 0 000 1.334zM8 4a.667.667 0 100-1.334A.667.667 0 008 4zm0 9.333A.667.667 0 108 12a.667.667 0 000 1.333z",
     stroke: "currentColor"
   })));
 }
 
-var _path$R;
+var _path$1J;
 
-function _extends$1Z() { _extends$1Z = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1Z.apply(this, arguments); }
+function _extends$3W() { _extends$3W = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3W.apply(this, arguments); }
 
 function SvgSearch(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1Z({
+  return /*#__PURE__*/React.createElement("svg", _extends$3W({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$R || (_path$R = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1J || (_path$1J = /*#__PURE__*/React.createElement("path", {
     d: "M7.333 12.667A5.333 5.333 0 107.333 2a5.333 5.333 0 000 10.667zM14 14l-2.9-2.9",
     stroke: "currentColor"
   })));
@@ -1219,30 +1227,36 @@ var SelectFilter = function (props) {
     var _a, _b, _c;
     var options = props.options, columnId = props.columnId, multiple = props.multiple;
     var classes = useStyles$4();
-    var table = useContext(TableContext);
-    var _d = useFilterPanelContext().anchorState, setAnchorEl = _d[1];
+    var _d = useContext(TableContext), table = _d.table, stagedColumnFilters = _d.stagedColumnFilters, stageFilterSelections = _d.stageFilterSelections;
     var _e = useState(false), open = _e[0], setOpen = _e[1];
+    var _f = useFilterPanelContext().anchorState, setAnchorEl = _f[1];
     var column = table.getColumn(columnId);
     var meta = column.columnDef.meta;
     var filterName = (_a = meta === null || meta === void 0 ? void 0 : meta.filter) === null || _a === void 0 ? void 0 : _a.name;
-    var value = column.getFilterValue();
+    var value = '';
+    if (stageFilterSelections) {
+        value = stagedColumnFilters.get(columnId);
+    }
+    else {
+        value = column.getFilterValue();
+    }
     var fallbackValue = multiple ? [] : '';
     var filteredOptions = options.map(function (option) {
         if (Array.isArray(value)) {
             if (value.includes(option.value)) {
-                return __assign$3(__assign$3({}, option), { hide: true });
+                return __assign$3(__assign$3({}, option), { hide: !stageFilterSelections });
             }
         }
         if (typeof value === 'string' || typeof value === 'number') {
             if (value === option.value) {
-                return __assign$3(__assign$3({}, option), { hide: true });
+                return __assign$3(__assign$3({}, option), { hide: !stageFilterSelections });
             }
         }
         return __assign$3(__assign$3({}, option), { hide: false });
     });
     var filteredOptionsCount = filteredOptions.filter(function (option) { return !(option === null || option === void 0 ? void 0 : option.hide); }).length;
     var renderedValue = '';
-    if (value && filteredOptions && filteredOptionsCount > 0) {
+    if (!stageFilterSelections && value && filteredOptions && filteredOptionsCount > 0) {
         if (typeof value === 'string' || typeof value === 'number') {
             renderedValue = (_c = (_b = filteredOptions.find(function (option) { return option.value === value; })) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : filterName;
         }
@@ -1255,12 +1269,20 @@ var SelectFilter = function (props) {
     }
     var handleChange = function (event) {
         event.stopPropagation();
-        column.setFilterValue(event.target.value);
-        setAnchorEl(null);
+        if (stageFilterSelections) {
+            stagedColumnFilters.update(columnId, event.target.value);
+        }
+        else {
+            column.setFilterValue(event.target.value);
+            setAnchorEl(null);
+        }
     };
     var handleItemClick = function () {
         if (multiple) {
-            if (filteredOptionsCount === 1) {
+            if (!stageFilterSelections && filteredOptionsCount === 1) {
+                setOpen(false);
+            }
+            else {
                 setOpen(false);
             }
         }
@@ -1268,7 +1290,7 @@ var SelectFilter = function (props) {
     return (React__default.createElement(Box, { className: classes.selectContainer },
         React__default.createElement(FormControl, { variant: "outlined", fullWidth: true },
             React__default.createElement(InputLabel, { id: "select-filter-label-" + filterName }, filterName || 'filter'),
-            React__default.createElement(Select, { variant: "outlined", open: open, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, value: value || fallbackValue, displayEmpty: true, multiple: multiple, renderValue: function () { return React__default.createElement(Typography$1, null, renderedValue); }, label: filterName || 'filter', labelId: "select-filter-label-" + filterName, disabled: !filteredOptionsCount, IconComponent: SvgChevronDown, onChange: handleChange, fullWidth: true, classes: {
+            React__default.createElement(Select, { variant: "outlined", open: open, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, value: value || fallbackValue, displayEmpty: true, multiple: multiple, renderValue: stageFilterSelections ? undefined : function () { return React__default.createElement(Typography$1, null, renderedValue); }, label: filterName || 'filter', labelId: "select-filter-label-" + filterName, disabled: !filteredOptionsCount, IconComponent: SvgChevronDown, onChange: handleChange, fullWidth: true, classes: {
                     root: classes.selectRoot,
                     icon: classes.icon,
                 }, MenuProps: {
@@ -1288,7 +1310,7 @@ var SelectFilter = function (props) {
 };
 
 var ToggleFilter = function (props) {
-    var table = useContext(TableContext);
+    var table = useContext(TableContext).table;
     var columnId = props.columnId;
     var column = table.getColumn(columnId);
     var meta = column.columnDef.meta;
@@ -1386,44 +1408,37 @@ function makeFormatSelectedFilterText(table) {
     };
 }
 
-var Panel = function (props) {
-    var anchorEl = props.anchorEl, onClose = props.onClose;
-    var classes = useStyles$6();
-    var table = useContext(TableContext);
-    var paperRef = useRef(null);
-    var columnFilters = useColumnFilters(table).columnFilters;
-    var handleClick = function (e) {
-        var _a;
-        var rect = (_a = paperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (rect) {
-            var buffer = 10;
-            var mouseX = e.nativeEvent.x;
-            var mouseY = e.nativeEvent.y;
-            var xHit = rect.x - buffer < mouseX && mouseX < rect.x + rect.width + buffer;
-            var yHit = rect.y - buffer < mouseY && mouseY < rect.y + rect.height + buffer;
-            if (!xHit || !yHit) {
-                onClose();
+var useStagedColumnFilters = function () {
+    var _a = useState(new Map()), columnInputValues = _a[0], setColumnInputValues = _a[1];
+    var filterState = {
+        update: function (columnId, value) {
+            return setColumnInputValues(columnInputValues.set(columnId, value));
+        },
+        get: function (columnId) { return columnInputValues.get(columnId); },
+        clear: function () {
+            columnInputValues.clear();
+            setColumnInputValues(columnInputValues);
+        },
+        delete: function (columnFilter) {
+            var values = columnInputValues.get(columnFilter.id);
+            if (values && Array.isArray(values)) {
+                var valueIndex = values.indexOf(columnFilter.value);
+                values.splice(valueIndex, 1);
+                if (values.length > 0) {
+                    columnInputValues.set(columnFilter.id, values);
+                }
+                else {
+                    columnInputValues.clear();
+                }
             }
-        }
+            else {
+                columnInputValues.delete(columnFilter.id);
+            }
+            setColumnInputValues(columnInputValues);
+        },
+        exist: function () { return columnInputValues.size > 0; },
     };
-    var open = Boolean(anchorEl);
-    return (React__default.createElement(Popover, { onClick: handleClick, anchorEl: anchorEl, anchorOrigin: {
-            vertical: 'bottom',
-            horizontal: 'right',
-        }, className: classes.filterPopover, onClose: onClose, open: open, PaperProps: {
-            style: {
-                backgroundColor: 'transparent',
-                boxShadow: 'none',
-                borderRadius: 0,
-            },
-        }, transformOrigin: {
-            vertical: 'top',
-            horizontal: 'right',
-        } },
-        React__default.createElement(Paper$1, { className: classes.filterPopoverContents, elevation: 2 },
-            React__default.createElement(Box, __assign$3({}, { ref: paperRef }, { padding: 3 }),
-                React__default.createElement(Typography$1, { className: classes.menuTitle }, "Filter By"),
-                columnFilters.map(function (columnFilter, i) { return (React__default.createElement(FilterControl, __assign$3({}, columnFilter, { key: i }))); })))));
+    return filterState;
 };
 
 /*! *****************************************************************************
@@ -1502,19 +1517,19 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$N;
+var _path$1D;
 
-function _extends$1N() { _extends$1N = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1N.apply(this, arguments); }
+function _extends$3G() { _extends$3G = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3G.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1N({
+  return /*#__PURE__*/React.createElement("svg", _extends$3G({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$N || (_path$N = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1D || (_path$1D = /*#__PURE__*/React.createElement("path", {
     d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z",
     stroke: "currentColor"
   })));
@@ -2185,19 +2200,19 @@ makeStyles(function (theme) { return ({
     },
 }); });
 
-var _g$1o;
+var _g$2B;
 
-function _extends$2t() { _extends$2t = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2t.apply(this, arguments); }
+function _extends$4J() { _extends$4J = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4J.apply(this, arguments); }
 
 function SvgCheckCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2t({
+  return /*#__PURE__*/React.createElement("svg", _extends$4J({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1o || (_g$1o = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$2B || (_g$2B = /*#__PURE__*/React.createElement("g", {
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M14.667 7.387V8a6.667 6.667 0 11-3.954-6.093"
@@ -2206,44 +2221,44 @@ function SvgCheckCircle(props) {
   }))));
 }
 
-var _path$13;
+var _path$26;
 
-function _extends$2r() { _extends$2r = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2r.apply(this, arguments); }
+function _extends$4G() { _extends$4G = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4G.apply(this, arguments); }
 
 function SvgX(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2r({
+  return /*#__PURE__*/React.createElement("svg", _extends$4G({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$26 || (_path$26 = /*#__PURE__*/React.createElement("path", {
     d: "M12 4l-8 8m0-8l8 8",
     stroke: "currentColor"
   })));
 }
 
-var _g$1g, _defs$E;
+var _g$2o, _defs$1t;
 
-function _extends$2h() { _extends$2h = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2h.apply(this, arguments); }
+function _extends$4o() { _extends$4o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4o.apply(this, arguments); }
 
 function SvgHelp(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2h({
+  return /*#__PURE__*/React.createElement("svg", _extends$4o({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1g || (_g$1g = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$2o || (_g$2o = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#help_svg__clip0_8_5446)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M6.06 6a2 2 0 013.887.667c0 1.333-2 2-2 2M8 11.334h.007"
-  }))), _defs$E || (_defs$E = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$1t || (_defs$1t = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "help_svg__clip0_8_5446"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -2251,24 +2266,24 @@ function SvgHelp(props) {
   })))));
 }
 
-var _g$1d, _defs$D;
+var _g$2l, _defs$1s;
 
-function _extends$2e() { _extends$2e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2e.apply(this, arguments); }
+function _extends$4l() { _extends$4l = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4l.apply(this, arguments); }
 
 function SvgInfo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2e({
+  return /*#__PURE__*/React.createElement("svg", _extends$4l({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1d || (_g$1d = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$2l || (_g$2l = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#info_svg__clip0_8_5377)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-4V8m0-2.667h.007"
-  }))), _defs$D || (_defs$D = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$1s || (_defs$1s = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "info_svg__clip0_8_5377"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -2276,24 +2291,24 @@ function SvgInfo(props) {
   })))));
 }
 
-var _g$Z, _defs$u;
+var _g$1$, _defs$1e;
 
-function _extends$1J() { _extends$1J = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1J.apply(this, arguments); }
+function _extends$3v() { _extends$3v = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3v.apply(this, arguments); }
 
 function SvgError(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1J({
+  return /*#__PURE__*/React.createElement("svg", _extends$3v({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$Z || (_g$Z = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$1$ || (_g$1$ = /*#__PURE__*/React.createElement("g", {
     clipPath: "url(#error_svg__clip0_8_5411)",
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M5.24 1.333h5.52l3.907 3.907v5.52l-3.907 3.907H5.24L1.333 10.76V5.24L5.24 1.333zm2.76 4V8m0 2.666h.008"
-  }))), _defs$u || (_defs$u = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs$1e || (_defs$1e = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "error_svg__clip0_8_5411"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
@@ -2301,19 +2316,19 @@ function SvgError(props) {
   })))));
 }
 
-var _path$K;
+var _path$1u;
 
-function _extends$1I() { _extends$1I = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1I.apply(this, arguments); }
+function _extends$3u() { _extends$3u = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3u.apply(this, arguments); }
 
 function SvgWarning(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1I({
+  return /*#__PURE__*/React.createElement("svg", _extends$3u({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1u || (_path$1u = /*#__PURE__*/React.createElement("path", {
     d: "M6.86 2.573L1.213 12a1.334 1.334 0 001.14 2h11.294a1.332 1.332 0 001.14-2L9.14 2.573a1.333 1.333 0 00-2.28 0v0zM8 6v2.667m0 2.667h.007",
     stroke: "currentColor"
   })));
@@ -3199,6 +3214,68 @@ createTheme(adminLightOptions);
 var adminDarkOptions = __assign$1(__assign$1(__assign$1(__assign$1({ themeName: 'Admin Dark', palette: __assign$1(__assign$1(__assign$1({}, basePalette), adminDarkPalette), dataVizPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography, overrides: overrides }, adminDarkPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
 createTheme(adminDarkOptions);
 
+var Panel = function (props) {
+    var anchorEl = props.anchorEl, onClose = props.onClose;
+    var classes = useStyles$6();
+    var _a = useContext(TableContext), table = _a.table, stagedColumnFilters = _a.stagedColumnFilters, stageFilterSelections = _a.stageFilterSelections;
+    var paperRef = useRef(null);
+    var _b = useColumnFilters(table), columnFilters = _b.columnFilters, resetColumnFilters = _b.resetColumnFilters;
+    var handleClick = function (e) {
+        var _a;
+        var rect = (_a = paperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            var buffer = 10;
+            var mouseX = e.nativeEvent.x;
+            var mouseY = e.nativeEvent.y;
+            var xHit = rect.x - buffer < mouseX && mouseX < rect.x + rect.width + buffer;
+            var yHit = rect.y - buffer < mouseY && mouseY < rect.y + rect.height + buffer;
+            if (!xHit || !yHit) {
+                onClose();
+            }
+        }
+    };
+    var handleApplyClick = function () {
+        if (stagedColumnFilters.exist()) {
+            columnFilters.forEach(function (columnFilter) {
+                var columnInputValue = stagedColumnFilters.get(columnFilter.columnId);
+                if (columnInputValue) {
+                    var column = table.getColumn(columnFilter.columnId);
+                    column.setFilterValue(columnInputValue);
+                }
+            });
+        }
+        else {
+            resetColumnFilters();
+        }
+        onClose();
+    };
+    var handleCancelClick = function () {
+        stagedColumnFilters.clear();
+        onClose();
+    };
+    var open = Boolean(anchorEl);
+    return (React__default.createElement(Popover, { onClick: handleClick, anchorEl: anchorEl, anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'right',
+        }, className: classes.filterPopover, onClose: onClose, open: open, PaperProps: {
+            style: {
+                backgroundColor: 'transparent',
+                boxShadow: 'none',
+                borderRadius: 0,
+            },
+        }, transformOrigin: {
+            vertical: 'top',
+            horizontal: 'right',
+        } },
+        React__default.createElement(Paper$1, { className: classes.filterPopoverContents, elevation: 2 },
+            React__default.createElement(Box, __assign$3({}, { ref: paperRef }, { padding: 3 }),
+                React__default.createElement(Typography$1, { className: classes.menuTitle }, "Filter By"),
+                columnFilters.map(function (columnFilter, i) { return (React__default.createElement(FilterControl, __assign$3({}, columnFilter, { key: i }))); })),
+            stageFilterSelections && (React__default.createElement(Box, { className: classes.buttonBox },
+                React__default.createElement(Button, { variant: "secondary", onClick: handleCancelClick }, "Cancel"),
+                React__default.createElement(Button, { onClick: handleApplyClick }, "Apply"))))));
+};
+
 var useStyles$3 = makeStyles({
     root: {
         justifySelf: 'end',
@@ -4033,7 +4110,7 @@ var defaultTableProps = {
     searchable: false,
 };
 var Table = function (props) {
-    var title = props.title, data = props.data, columns = props.columns, enableSortingRemoval = props.enableSortingRemoval, loading = props.loading, searchable = props.searchable, sortable = props.sortable, externalFilterState = props.filterState, externalGlobalFilterState = props.globalFilterState, externalPaginationState = props.paginationState, externalSortingState = props.sortingState, externalVisibilityState = props.visibilityState, paginated = props.paginated, pageCount = props.pageCount, GlobalFilterProps = props.GlobalFilterProps, Empty = props.Empty, idBase = props.idBase;
+    var title = props.title, data = props.data, columns = props.columns, enableSortingRemoval = props.enableSortingRemoval, loading = props.loading, searchable = props.searchable, sortable = props.sortable, externalFilterState = props.filterState, externalGlobalFilterState = props.globalFilterState, externalPaginationState = props.paginationState, externalSortingState = props.sortingState, externalVisibilityState = props.visibilityState, paginated = props.paginated, pageCount = props.pageCount, GlobalFilterProps = props.GlobalFilterProps, Empty = props.Empty, idBase = props.idBase, stageFilterSelections = props.stageFilterSelections;
     var classes = useStyles$7(props);
     var rootRef = useRef(null);
     // Prepare Empty State
@@ -4061,6 +4138,8 @@ var Table = function (props) {
     // Init table instance
     var table = useReactTable(__assign$3(__assign$3(__assign$3(__assign$3(__assign$3(__assign$3({ data: data, columns: columns, state: __assign$3(__assign$3(__assign$3(__assign$3(__assign$3({}, (isControlledPagination && { pagination: pagination })), (isControlledGlobalFilter && { globalFilter: globalFilter })), (isControlledColumnFilters && { columnFilters: columnFilters })), (isControlledColumnVisibility && { columnVisibility: columnVisibility })), (isControlledColumnSort && { sorting: sorting })), enableSorting: sortable, enableSortingRemoval: enableSortingRemoval, globalFilterFn: coercedValueIncludesString, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel() }, (paginated && { getPaginationRowModel: getPaginationRowModel() })), (isControlledPagination && controlledPaginationOptions)), (isControlledGlobalFilter && controlledGlobalFilterOptions)), (isControlledColumnFilters && controlledColumnFiltersOptions)), (isControlledColumnSort && controlledColumnSortOptions)), { meta: { idBase: idBase } }));
     var _f = useColumnFilters(table), selectedColumnFilters = _f.selectedColumnFilters, hasColumnFilters = _f.hasColumnFilters, deselectColumnFilter = _f.deselectColumnFilter, formatSelectedFilterText = _f.formatSelectedFilterText, resetColumnFilters = _f.resetColumnFilters;
+    // stagedColumnFilters is only used when stageFilterSelections is enabled
+    var stagedColumnFilters = useStagedColumnFilters();
     var handlePagination = function (_e, pageNumber) {
         var pageIndex = pageNumber - 1;
         table.setPageIndex(pageIndex);
@@ -4069,7 +4148,7 @@ var Table = function (props) {
     var showGlobalSearch = Boolean(searchable || isControlledGlobalFilter);
     var showColumnFilter = Boolean(hasColumnFilters);
     var showControls = Boolean(showTitle || showGlobalSearch || showColumnFilter);
-    return (React__default.createElement(TableContext.Provider, { value: table },
+    return (React__default.createElement(TableContext.Provider, { value: { table: table, stagedColumnFilters: stagedColumnFilters, stageFilterSelections: stageFilterSelections } },
         React__default.createElement(Box, __assign$3({ className: classes.root }, { ref: rootRef }, { "data-table-element": "root" }, (table.getPageCount() > 1 && {
             minHeight: getTableMinHeight(rootRef, table.getState().pagination.pageSize),
         })),
@@ -4079,8 +4158,18 @@ var Table = function (props) {
                     showGlobalSearch && (React__default.createElement(GlobalFilter, __assign$3({}, GlobalFilterProps, { value: table.getState().globalFilter, setValue: table.setGlobalFilter }))),
                     showColumnFilter && React__default.createElement(FilterPanel, null)),
                 React__default.createElement(Box, { display: "flex", flexWrap: "wrap", gridGap: 8 },
-                    selectedColumnFilters.map(function (selectedColumnFilter, i) { return (React__default.createElement(ColumnFilterChip, { key: "selected-column-filter-chip-" + i, columnFilter: selectedColumnFilter, label: formatSelectedFilterText(selectedColumnFilter), onClick: deselectColumnFilter })); }),
-                    selectedColumnFilters.length >= 1 && React__default.createElement(ColumnFilterResetButton, { onClick: function () { return resetColumnFilters(); } })))),
+                    selectedColumnFilters.map(function (selectedColumnFilter, i) { return (React__default.createElement(ColumnFilterChip, { key: "selected-column-filter-chip-" + i, columnFilter: selectedColumnFilter, label: formatSelectedFilterText(selectedColumnFilter), onClick: function (columnFilter) {
+                            if (stageFilterSelections) {
+                                stagedColumnFilters.delete(columnFilter);
+                            }
+                            deselectColumnFilter(columnFilter);
+                        } })); }),
+                    selectedColumnFilters.length >= 1 && (React__default.createElement(ColumnFilterResetButton, { onClick: function () {
+                            if (stageFilterSelections) {
+                                stagedColumnFilters.clear();
+                            }
+                            resetColumnFilters();
+                        } }))))),
             React__default.createElement(Box, { className: classes.tableContainer, flexGrow: loading || isEmpty ? 0 : 1 },
                 React__default.createElement("table", { className: classes.table },
                     React__default.createElement(TableHeader, null, table.getHeaderGroups().map(function (headerGroup) { return (React__default.createElement(TableHeaderRow, { key: headerGroup.id }, headerGroup.headers.map(function (header) { return (React__default.createElement(TableHeaderCell, { key: header.id, context: header.getContext() }, flexRender(header.column.columnDef.header, header.getContext()))); }))); })),