@popmenu/table 0.92.0 → 0.94.0

package/build/components/Table/TableProps.d.ts

@@ -42,4 +42,6 @@ export interface TableProps<T = unknown> {
     Empty?: () => JSX.Element;
     /** A string used to construct ids and tags used throughout the table for tagging inner elements. ie: data-tour-id. */
     idBase?: string;
+    /** Controls which filter should be used for the application, automatic or manual. */
+    stageFilterSelections?: boolean;
 }

package/build/components/TableContext/index.d.ts

@@ -1,3 +1,16 @@
 /// <reference types="react" />
-import { Table } from '@tanstack/react-table';
-export declare const TableContext: import("react").Context<Table<any>>;
+import { ColumnFilter, Table } from '@tanstack/react-table';
+export declare type StagedColumnFilter = {
+    update: (columnId: string, value: string | Array<string>) => void;
+    get: (columnId: string) => string | Array<string> | undefined;
+    clear: () => void;
+    delete: (columnFilter: ColumnFilter) => void;
+    exist: () => boolean;
+};
+declare type TabelContextValue = {
+    table: Table<any>;
+    stagedColumnFilters: StagedColumnFilter;
+    stageFilterSelections: boolean | undefined;
+};
+export declare const TableContext: import("react").Context<TabelContextValue>;
+export {};

package/build/hooks/index.d.ts

@@ -1 +1,2 @@
 export { useColumnFilters } from './useColumnFilters';
+export { useStagedColumnFilters } from './useStagedColumnFilters';

package/build/hooks/useStagedColumnFilters.d.ts

@@ -0,0 +1,8 @@
+import { ColumnFilter } from '@tanstack/react-table';
+export declare const useStagedColumnFilters: () => {
+    update: (columnId: string, value: string | Array<string>) => void;
+    get: (columnId: string) => string | string[] | undefined;
+    clear: () => void;
+    delete: (columnFilter: ColumnFilter) => void;
+    exist: () => boolean;
+};

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';
@@ -771,7 +771,7 @@ Link$1.defaultProps = {
 };
 Link$1.displayName = 'Link';
 
-var useStyles$8 = makeStyles(function (_a) {
+var useStyles$4$2 = makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -785,7 +785,7 @@ var useStyles$8 = makeStyles(function (_a) {
 });
 var Paper$1 = forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest$2(props, ["legacyStyles"]);
-    var classes = useStyles$8(props);
+    var classes = useStyles$4$2(props);
     return React__default.createElement(Paper$2, __assign$2({}, ref, { classes: __assign$2({}, (legacyStyles && classes)) }, restProps));
 });
 Paper$1.displayName = 'Paper';
@@ -938,6 +938,45 @@ makeStyles(function (theme) { return ({
     },
 }); });
 
+makeStyles(function () { return ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gridGap: 16,
+    },
+}); });
+
+var FollowerAuthenticationDialogContext$1 = createContext(null);
+FollowerAuthenticationDialogContext$1.Provider;
+
+makeStyles(function () { return ({
+    form: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+        gridGap: 16,
+    },
+}); });
+
+makeStyles(function () { return ({
+    main: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gridGap: 16,
+    },
+}); });
+
+makeStyles(function () { return ({
+    root: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+    },
+}); });
+
 var useTableRowStyles = makeStyles(function (theme) { return ({
     root: function () { return ({
         '&:nth-child(even)': {
@@ -1000,7 +1039,7 @@ var TableBody = function (props) {
     return React__default.createElement("tbody", __assign$3({}, restProps), children);
 };
 
-var useStyles$7 = makeStyles(function (_a) {
+var useStyles$6 = makeStyles(function (_a) {
     var typography = _a.typography;
     return ({
         root: function (_a) {
@@ -1031,7 +1070,15 @@ var TableFooter = function (props) {
     return (React__default.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "end", paddingTop: 3, paddingBottom: 4 }, props.children));
 };
 
-var useStyles$6 = makeStyles(function (theme) { return ({
+var useStyles$5 = 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,55 +1124,55 @@ var useStyles$6 = makeStyles(function (theme) { return ({
     },
 }); });
 
-var _path$2o;
+var _path$2p;
 
-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 _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$5o({
+  return /*#__PURE__*/React.createElement("svg", _extends$5p({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$2o || (_path$2o = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2p || (_path$2p = /*#__PURE__*/React.createElement("path", {
     d: "M4 6l4 4 4-4",
     stroke: "currentColor"
   })));
 }
 
-var _path$2n;
+var _path$2o;
 
-function _extends$5n() { _extends$5n = 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$5n.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$5n({
+  return /*#__PURE__*/React.createElement("svg", _extends$5o({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$2n || (_path$2n = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2o || (_path$2o = /*#__PURE__*/React.createElement("path", {
     d: "M12 10L8 6l-4 4",
     stroke: "currentColor"
   })));
 }
 
-var _path$2e;
+var _path$2f;
 
-function _extends$57() { _extends$57 = 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$57.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$57({
+  return /*#__PURE__*/React.createElement("svg", _extends$58({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$2e || (_path$2e = /*#__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"
   })));
@@ -1219,30 +1266,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 +1308,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 +1329,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 +1349,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 +1447,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;
 };
 
 /*! *****************************************************************************
@@ -2018,7 +2072,7 @@ Link.defaultProps = {
 };
 Link.displayName = 'Link';
 
-var useStyles$5 = makeStyles(function (_a) {
+var useStyles$4$1 = makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -2032,7 +2086,7 @@ var useStyles$5 = makeStyles(function (_a) {
 });
 var Paper = forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles$5(props);
+    var classes = useStyles$4$1(props);
     return React__default.createElement(Paper$2, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
 });
 Paper.displayName = 'Paper';
@@ -2185,6 +2239,45 @@ makeStyles(function (theme) { return ({
     },
 }); });
 
+makeStyles(function () { return ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gridGap: 16,
+    },
+}); });
+
+var FollowerAuthenticationDialogContext = createContext(null);
+FollowerAuthenticationDialogContext.Provider;
+
+makeStyles(function () { return ({
+    form: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+        gridGap: 16,
+    },
+}); });
+
+makeStyles(function () { return ({
+    main: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gridGap: 16,
+    },
+}); });
+
+makeStyles(function () { return ({
+    root: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+    },
+}); });
+
 var _g$2B;
 
 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); }
@@ -3199,6 +3292,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$5();
+    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,8 +4188,8 @@ 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 classes = useStyles$7(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, stageFilterSelections = props.stageFilterSelections;
+    var classes = useStyles$6(props);
     var rootRef = useRef(null);
     // Prepare Empty State
     var isEmpty = data.length === 0;
@@ -4061,6 +4216,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 +4226,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 +4236,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()))); }))); })),