@popmenu/table 0.92.0 → 0.93.0

package/build/index.js

@@ -1081,6 +1081,14 @@ var TableFooter = function (props) {
 };
 
 var useStyles$6 = core.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,
     },
@@ -1126,55 +1134,55 @@ var useStyles$6 = core.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__namespace.createElement("svg", _extends$5o({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$2p || (_path$2p = /*#__PURE__*/React__namespace.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__namespace.createElement("svg", _extends$5n({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$2o || (_path$2o = /*#__PURE__*/React__namespace.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__namespace.createElement("svg", _extends$57({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$2f || (_path$2f = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M11.333 6L8 2.667 4.667 6m6.666 4L8 13.334 4.667 10",
     stroke: "currentColor"
   })));
@@ -1268,30 +1276,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 = React.useContext(TableContext);
-    var _d = useFilterPanelContext().anchorState, setAnchorEl = _d[1];
+    var _d = React.useContext(TableContext), table = _d.table, stagedColumnFilters = _d.stagedColumnFilters, stageFilterSelections = _d.stageFilterSelections;
     var _e = React.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;
         }
@@ -1304,12 +1318,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);
             }
         }
@@ -1317,7 +1339,7 @@ var SelectFilter = function (props) {
     return (React__default['default'].createElement(core.Box, { className: classes.selectContainer },
         React__default['default'].createElement(core.FormControl, { variant: "outlined", fullWidth: true },
             React__default['default'].createElement(core.InputLabel, { id: "select-filter-label-" + filterName }, filterName || 'filter'),
-            React__default['default'].createElement(core.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['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['default'].createElement(core.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['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: {
@@ -1337,7 +1359,7 @@ var SelectFilter = function (props) {
 };
 
 var ToggleFilter = function (props) {
-    var table = React.useContext(TableContext);
+    var table = React.useContext(TableContext).table;
     var columnId = props.columnId;
     var column = table.getColumn(columnId);
     var meta = column.columnDef.meta;
@@ -1435,44 +1457,37 @@ function makeFormatSelectedFilterText(table) {
     };
 }
 
-var Panel = function (props) {
-    var anchorEl = props.anchorEl, onClose = props.onClose;
-    var classes = useStyles$6();
-    var table = React.useContext(TableContext);
-    var paperRef = React.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 = React.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['default'].createElement(core.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['default'].createElement(Paper$1, { className: classes.filterPopoverContents, elevation: 2 },
-            React__default['default'].createElement(core.Box, __assign$3({}, { ref: paperRef }, { padding: 3 }),
-                React__default['default'].createElement(Typography$1, { className: classes.menuTitle }, "Filter By"),
-                columnFilters.map(function (columnFilter, i) { return (React__default['default'].createElement(FilterControl, __assign$3({}, columnFilter, { key: i }))); })))));
+    return filterState;
 };
 
 /*! *****************************************************************************
@@ -3248,6 +3263,68 @@ createTheme__default['default'](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__default['default'](adminDarkOptions);
 
+var Panel = function (props) {
+    var anchorEl = props.anchorEl, onClose = props.onClose;
+    var classes = useStyles$6();
+    var _a = React.useContext(TableContext), table = _a.table, stagedColumnFilters = _a.stagedColumnFilters, stageFilterSelections = _a.stageFilterSelections;
+    var paperRef = React.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['default'].createElement(core.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['default'].createElement(Paper$1, { className: classes.filterPopoverContents, elevation: 2 },
+            React__default['default'].createElement(core.Box, __assign$3({}, { ref: paperRef }, { padding: 3 }),
+                React__default['default'].createElement(Typography$1, { className: classes.menuTitle }, "Filter By"),
+                columnFilters.map(function (columnFilter, i) { return (React__default['default'].createElement(FilterControl, __assign$3({}, columnFilter, { key: i }))); })),
+            stageFilterSelections && (React__default['default'].createElement(core.Box, { className: classes.buttonBox },
+                React__default['default'].createElement(Button, { variant: "secondary", onClick: handleCancelClick }, "Cancel"),
+                React__default['default'].createElement(Button, { onClick: handleApplyClick }, "Apply"))))));
+};
+
 var useStyles$3 = core.makeStyles({
     root: {
         justifySelf: 'end',
@@ -4082,7 +4159,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 = React.useRef(null);
     // Prepare Empty State
@@ -4110,6 +4187,8 @@ var Table = function (props) {
     // Init table instance
     var table = reactTable.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: reactTable.getCoreRowModel(), getSortedRowModel: reactTable.getSortedRowModel(), getFilteredRowModel: reactTable.getFilteredRowModel() }, (paginated && { getPaginationRowModel: reactTable.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);
@@ -4118,7 +4197,7 @@ var Table = function (props) {
     var showGlobalSearch = Boolean(searchable || isControlledGlobalFilter);
     var showColumnFilter = Boolean(hasColumnFilters);
     var showControls = Boolean(showTitle || showGlobalSearch || showColumnFilter);
-    return (React__default['default'].createElement(TableContext.Provider, { value: table },
+    return (React__default['default'].createElement(TableContext.Provider, { value: { table: table, stagedColumnFilters: stagedColumnFilters, stageFilterSelections: stageFilterSelections } },
         React__default['default'].createElement(core.Box, __assign$3({ className: classes.root }, { ref: rootRef }, { "data-table-element": "root" }, (table.getPageCount() > 1 && {
             minHeight: getTableMinHeight(rootRef, table.getState().pagination.pageSize),
         })),
@@ -4128,8 +4207,18 @@ var Table = function (props) {
                     showGlobalSearch && (React__default['default'].createElement(GlobalFilter, __assign$3({}, GlobalFilterProps, { value: table.getState().globalFilter, setValue: table.setGlobalFilter }))),
                     showColumnFilter && React__default['default'].createElement(FilterPanel, null)),
                 React__default['default'].createElement(core.Box, { display: "flex", flexWrap: "wrap", gridGap: 8 },
-                    selectedColumnFilters.map(function (selectedColumnFilter, i) { return (React__default['default'].createElement(ColumnFilterChip, { key: "selected-column-filter-chip-" + i, columnFilter: selectedColumnFilter, label: formatSelectedFilterText(selectedColumnFilter), onClick: deselectColumnFilter })); }),
-                    selectedColumnFilters.length >= 1 && React__default['default'].createElement(ColumnFilterResetButton, { onClick: function () { return resetColumnFilters(); } })))),
+                    selectedColumnFilters.map(function (selectedColumnFilter, i) { return (React__default['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['default'].createElement(ColumnFilterResetButton, { onClick: function () {
+                            if (stageFilterSelections) {
+                                stagedColumnFilters.clear();
+                            }
+                            resetColumnFilters();
+                        } }))))),
             React__default['default'].createElement(core.Box, { className: classes.tableContainer, flexGrow: loading || isEmpty ? 0 : 1 },
                 React__default['default'].createElement("table", { className: classes.table },
                     React__default['default'].createElement(TableHeader, null, table.getHeaderGroups().map(function (headerGroup) { return (React__default['default'].createElement(TableHeaderRow, { key: headerGroup.id }, headerGroup.headers.map(function (header) { return (React__default['default'].createElement(TableHeaderCell, { key: header.id, context: header.getContext() }, reactTable.flexRender(header.column.columnDef.header, header.getContext()))); }))); })),