@linzjs/step-ag-grid 13.0.0 → 13.1.0

package/dist/step-ag-grid.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { LuiMiniSpinner, LuiIcon, LuiButtonGroup, LuiButton, LuiCheckboxInput } from '@linzjs/lui';
+import { LuiMiniSpinner, LuiIcon, LuiButton, LuiCheckboxInput, LuiButtonGroup } from '@linzjs/lui';
 import { AgGridReact } from 'ag-grid-react';
-import { negate, isEmpty, xorBy, last, difference, sortBy, findIndex, debounce, partition, omit, pick, groupBy, fromPairs, toPairs, delay, defer as defer$1, remove, castArray, flatten, isEqual } from 'lodash-es';
+import { negate, isEmpty, xorBy, last, difference, sortBy, findIndex, debounce, partition, omit, pick, groupBy, fromPairs, toPairs, delay, defer as defer$1, compact, remove, castArray, flatten, isEqual } from 'lodash-es';
 import * as React from 'react';
 import { createContext, useContext, useRef, useCallback, useState, useEffect, useMemo, forwardRef, useLayoutEffect, memo, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
 import ReactDOM, { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
@@ -129,12 +129,20 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
 
 var GridContext = createContext({
     gridReady: false,
+    getColumns: function () {
+        console.error("no context provider for getColumns");
+        return [];
+    },
+    invisibleColumnIds: [],
+    setInvisibleColumnIds: function () {
+        console.error("no context provider for setInvisibleColumnIds");
+    },
     prePopupOps: function () {
         console.error("no context provider for prePopupOps");
     },
     externallySelectedItemsAreInSync: false,
-    setGridApi: function () {
-        console.error("no context provider for setGridApi");
+    setApis: function () {
+        console.error("no context provider for setApis");
     },
     setQuickFilter: function () {
         console.error("no context provider for setQuickFilter");
@@ -146,10 +154,18 @@ var GridContext = createContext({
         console.error("no context provider for getSelectedRows");
         return [];
     },
+    getFilteredSelectedRows: function () {
+        console.error("no context provider for getFilteredSelectedRows");
+        return [];
+    },
     getSelectedRowIds: function () {
         console.error("no context provider for getSelectedRowIds");
         return [];
     },
+    getFilteredSelectedRowIds: function () {
+        console.error("no context provider for getFilteredSelectedRowIds");
+        return [];
+    },
     selectRowsDiff: function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             console.error("no context provider for selectRowsDiff");
@@ -481,7 +497,7 @@ var GridHeaderSelect = function (_a) {
  */
 var Grid = function (params) {
     var _a, _b, _c, _d;
-    var _e = useContext(GridContext), gridReady = _e.gridReady, setGridApi = _e.setGridApi, prePopupOps = _e.prePopupOps, ensureRowVisible = _e.ensureRowVisible, selectRowsById = _e.selectRowsById, focusByRowById = _e.focusByRowById, ensureSelectedRowIsVisible = _e.ensureSelectedRowIsVisible, sizeColumnsToFit = _e.sizeColumnsToFit, externallySelectedItemsAreInSync = _e.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _e.setExternallySelectedItemsAreInSync, isExternalFilterPresent = _e.isExternalFilterPresent, doesExternalFilterPass = _e.doesExternalFilterPass;
+    var _e = useContext(GridContext), gridReady = _e.gridReady, setApis = _e.setApis, prePopupOps = _e.prePopupOps, ensureRowVisible = _e.ensureRowVisible, selectRowsById = _e.selectRowsById, focusByRowById = _e.focusByRowById, ensureSelectedRowIsVisible = _e.ensureSelectedRowIsVisible, sizeColumnsToFit = _e.sizeColumnsToFit, externallySelectedItemsAreInSync = _e.externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync = _e.setExternallySelectedItemsAreInSync, isExternalFilterPresent = _e.isExternalFilterPresent, doesExternalFilterPass = _e.doesExternalFilterPass;
     var checkUpdating = useContext(GridUpdatingContext).checkUpdating;
     var lastSelectedIds = useRef([]);
     var _f = useState(false), staleGrid = _f[0], setStaleGrid = _f[1];
@@ -624,15 +640,19 @@ var Grid = function (params) {
         clickSelectorCheckboxWhenContainingCellClicked,
     ]);
     var onGridReady = useCallback(function (event) {
-        setGridApi(event.api);
+        setApis(event.api, event.columnApi, params["data-testid"]);
         synchroniseExternallySelectedItemsToGrid();
-    }, [setGridApi, synchroniseExternallySelectedItemsToGrid]);
+    }, [setApis, synchroniseExternallySelectedItemsToGrid]);
     var noRowsOverlayComponent = useCallback(function (event) {
-        var _a, _b;
+        var _a, _b, _c;
         var hasData = ((_b = (_a = params.rowData) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
         var hasFilteredData = event.api.getDisplayedRowCount() > 0;
-        return (jsx("span", { children: !hasData ? "There are currently no rows" : !hasFilteredData ? "All rows have been filtered" : "" }));
-    }, [(_b = params.rowData) === null || _b === void 0 ? void 0 : _b.length]);
+        return (jsx("span", { children: !hasData
+                ? (_c = params.noRowsOverlayText) !== null && _c !== void 0 ? _c : "There are currently no rows"
+                : !hasFilteredData
+                    ? "All rows have been filtered"
+                    : "" }));
+    }, [params.noRowsOverlayText, (_b = params.rowData) === null || _b === void 0 ? void 0 : _b.length]);
     var onModelUpdated = useCallback(function (event) {
         event.api.getDisplayedRowCount() === 0 ? event.api.showNoRowsOverlay() : event.api.hideOverlay();
     }, []);
@@ -719,7 +739,7 @@ var useGridPopoverContext = function () {
 var GridPopoverContextProvider = function (_a) {
     var _b, _c, _d;
     var props = _a.props, children = _a.children;
-    var _e = useContext(GridContext), getSelectedRows = _e.getSelectedRows, updatingCells = _e.updatingCells;
+    var _e = useContext(GridContext), getFilteredSelectedRows = _e.getFilteredSelectedRows, updatingCells = _e.updatingCells;
     var anchorRef = useRef(props.eGridCell);
     var hasSaved = useRef(false);
     var _f = useState(false), saving = _f[0], setSaving = _f[1];
@@ -727,7 +747,9 @@ var GridPopoverContextProvider = function (_a) {
     var cellEditorParams = colDef.cellEditorParams;
     var multiEdit = (_b = cellEditorParams === null || cellEditorParams === void 0 ? void 0 : cellEditorParams.multiEdit) !== null && _b !== void 0 ? _b : false;
     // Then item that is clicked on will always be first in the list
-    var selectedRows = useMemo(function () { return (multiEdit ? sortBy(getSelectedRows(), function (row) { return row.id !== props.data.id; }) : [props.data]); }, [getSelectedRows, multiEdit, props.data]);
+    var selectedRows = useMemo(function () {
+        return multiEdit ? sortBy(getFilteredSelectedRows(), function (row) { return row.id !== props.data.id; }) : [props.data];
+    }, [getFilteredSelectedRows, multiEdit, props.data]);
     var field = (_d = (_c = props.colDef) === null || _c === void 0 ? void 0 : _c.field) !== null && _d !== void 0 ? _d : "";
     var updateValue = useCallback(function (saveFn, tabDirection) { return __awaiter(void 0, void 0, void 0, function () {
         var _a;
@@ -892,201 +914,11 @@ var GridCellMultiEditor = function (props, cellEditorSelector) {
         } }, props), { cellRenderer: GridCellRenderer, cellRendererParams: __assign({ originalCellRenderer: props.cellRenderer }, props.cellRendererParams) });
 };
 
-var useGridFilter = function (filter) {
-    var _a = useContext(GridContext), addExternalFilter = _a.addExternalFilter, removeExternalFilter = _a.removeExternalFilter;
-    useEffect(function () {
-        var thisFilter = filter;
-        thisFilter && addExternalFilter(thisFilter);
-        return function () {
-            thisFilter && removeExternalFilter(thisFilter);
-        };
-    }, [addExternalFilter, filter, removeExternalFilter]);
-};
-
-var GridFilterButtons = function (_a) {
-    var _b;
-    var className = _a.className, luiButtonProps = _a.luiButtonProps, options = _a.options;
-    // Select defaultSelected option, otherwise first option.  If no options select none.
-    var _c = useState((_b = options.find(function (option) { return option.defaultSelected; })) !== null && _b !== void 0 ? _b : options[0]), selectedOption = _c[0], setSelectedOption = _c[1];
-    var filter = useMemo(function () { return selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.filter; }, [selectedOption]);
-    useGridFilter(filter);
-    return (jsx("div", __assign({ className: clsx("lui-margin-top-xxs lui-margin-bottom-xxs", className) }, { children: jsx(LuiButtonGroup, { children: options.map(function (option, index) { return (jsx(LuiButton, __assign({}, luiButtonProps, { className: clsx("lui-button lui-button-secondary", (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) === option.label && "lui-button-active", luiButtonProps === null || luiButtonProps === void 0 ? void 0 : luiButtonProps.className), onClick: function () { return setSelectedOption(option); } }, { children: option.label }), "".concat(index))); }) }) })));
-};
-
-var GridFilterQuick = function (_a) {
-    var quickFilterPlaceholder = _a.quickFilterPlaceholder, defaultValue = _a.defaultValue;
-    var setQuickFilter = useContext(GridContext).setQuickFilter;
-    var _b = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ""), quickFilterValue = _b[0], setQuickFilterValue = _b[1];
-    useEffect(function () {
-        setQuickFilter(quickFilterValue);
-    }, [quickFilterValue, setQuickFilter]);
-    return (jsx("input", { "aria-label": "Search", className: "lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox", type: "text", placeholder: quickFilterPlaceholder !== null && quickFilterPlaceholder !== void 0 ? quickFilterPlaceholder : "Search...", value: quickFilterValue, onChange: function (event) {
-            setQuickFilterValue(event.target.value);
-        } }));
-};
-
-var GridFilters = function (_a) {
-    var children = _a.children;
-    return jsx("div", __assign({ className: "Grid-container-filters" }, { children: children }));
-};
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function getAugmentedNamespace(n) {
-  if (n.__esModule) return n;
-  var f = n.default;
-	if (typeof f == "function") {
-		var a = function a () {
-			if (this instanceof a) {
-				var args = [null];
-				args.push.apply(args, arguments);
-				var Ctor = Function.bind.apply(f, args);
-				return new Ctor();
-			}
-			return f.apply(this, arguments);
-		};
-		a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
-/* global setTimeout, clearTimeout */
-
-var dist$1 = function debounce(fn) {
-  var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
-  var lastCallAt = void 0;
-  var deferred = void 0;
-  var timer = void 0;
-  var pendingArgs = [];
-  return function debounced() {
-    var currentWait = getWait(wait);
-    var currentTime = new Date().getTime();
-
-    var isCold = !lastCallAt || currentTime - lastCallAt > currentWait;
-
-    lastCallAt = currentTime;
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    if (isCold && options.leading) {
-      return options.accumulate ? Promise.resolve(fn.call(this, [args])).then(function (result) {
-        return result[0];
-      }) : Promise.resolve(fn.call.apply(fn, [this].concat(args)));
-    }
-
-    if (deferred) {
-      clearTimeout(timer);
-    } else {
-      deferred = defer();
-    }
-
-    pendingArgs.push(args);
-    timer = setTimeout(flush.bind(this), currentWait);
-
-    if (options.accumulate) {
-      var argsIndex = pendingArgs.length - 1;
-      return deferred.promise.then(function (results) {
-        return results[argsIndex];
-      });
-    }
-
-    return deferred.promise;
-  };
-
-  function flush() {
-    var thisDeferred = deferred;
-    clearTimeout(timer);
-
-    Promise.resolve(options.accumulate ? fn.call(this, pendingArgs) : fn.apply(this, pendingArgs[pendingArgs.length - 1])).then(thisDeferred.resolve, thisDeferred.reject);
-
-    pendingArgs = [];
-    deferred = null;
-  }
-};
-
-function getWait(wait) {
-  return typeof wait === 'function' ? wait() : wait;
-}
-
-function defer() {
-  var deferred = {};
-  deferred.promise = new Promise(function (resolve, reject) {
-    deferred.resolve = resolve;
-    deferred.reject = reject;
-  });
-  return deferred;
-}
-
-var GridSubComponentContext = createContext({
-    value: "GridSubComponentContext value no context",
-    data: {},
-    setValue: function () {
-        console.error("GridSubComponentContext setValue no context");
-    },
-    setValid: function () {
-        console.error("GridSubComponentContext setValid no context");
-    },
-    triggerSave: function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            console.error("GridSubComponentContext triggerSave no context");
-            return [2 /*return*/];
-        });
-    }); },
-    context: null
+var GridFilterHeaderIconButton = forwardRef(function columnsButton(_a, ref) {
+    var icon = _a.icon, title = _a.title, onClick = _a.onClick, buttonProps = _a.buttonProps, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "md" : _c;
+    return (jsx(LuiButton, __assign({}, buttonProps, { type: "button", level: "tertiary", className: "GridFilterHeaderIconButton lui-button-icon-only", ref: ref, "aria-label": title, title: title, onClick: onClick, disabled: disabled }, { children: jsx(LuiIcon, { name: icon, alt: "Menu", size: size }) })));
 });
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$2 = ".helpText{color:#6b6966;font-size:.75rem;font-weight:400}";
-styleInject(css_248z$2);
-
-var FormError = function (props) {
-    return (jsxs(Fragment, { children: [props.error && (jsx("span", __assign({ className: "LuiTextInput-error", style: { paddingLeft: 0 } }, { children: props.error }))), props.helpText && !props.error && jsx("span", __assign({ className: "helpText" }, { children: props.helpText }))] }));
-};
-
 // Generate className following BEM methodology: http://getbem.com/naming/
 // Modifier value can be one of the following types: boolean, string, undefined
 var useBEM = function (_a) {
@@ -2919,6 +2751,288 @@ var MenuRadioGroupFr = function (_a, externalRef) {
 };
 var MenuRadioGroup = forwardRef(MenuRadioGroupFr);
 
+var GridFilterColumnsToggle = function (_a) {
+    var _b = _a.saveState, saveState = _b === void 0 ? true : _b;
+    var _c = useState(false), loaded = _c[0], setLoaded = _c[1];
+    var _d = useContext(GridContext), getColumns = _d.getColumns, invisibleColumnIds = _d.invisibleColumnIds, setInvisibleColumnIds = _d.setInvisibleColumnIds;
+    var columnStorageKey = useMemo(function () {
+        return isEmpty(getColumns())
+            ? null // Grid hasn't been initialised yet
+            : "stepAgGrid_invisibleColumnIds_" +
+                getColumns()
+                    .map(function (col) { return col.colId || ""; })
+                    .join("_");
+    }, [getColumns]);
+    // Load state on start
+    useEffect(function () {
+        if (!columnStorageKey || loaded)
+            return;
+        if (saveState) {
+            try {
+                var stored = window.localStorage.getItem(columnStorageKey);
+                var invisibleIds = JSON.parse(stored !== null && stored !== void 0 ? stored : "[]");
+                if (!Array.isArray(invisibleIds)) {
+                    console.error("stored invisible ids not an array: ".concat(stored));
+                }
+                else if (!invisibleIds.every(function (id) { return typeof id === "string"; })) {
+                    console.error("stored invisible ids not strings: ".concat(stored));
+                }
+                else {
+                    invisibleIds && setInvisibleColumnIds(invisibleIds);
+                }
+            }
+            catch (ex) {
+                console.error(ex);
+            }
+            setLoaded(true);
+        }
+    }, [columnStorageKey, loaded, saveState, setInvisibleColumnIds]);
+    // Save state on column visibility change
+    useEffect(function () {
+        loaded &&
+            columnStorageKey &&
+            saveState &&
+            window.localStorage.setItem(columnStorageKey, JSON.stringify(invisibleColumnIds));
+    }, [columnStorageKey, invisibleColumnIds, loaded, saveState]);
+    var toggleColumn = useCallback(function (colId) {
+        if (!colId)
+            return;
+        setInvisibleColumnIds(invisibleColumnIds.includes(colId)
+            ? invisibleColumnIds.filter(function (id) { return id !== colId; })
+            : __spreadArray(__spreadArray([], invisibleColumnIds, true), [colId], false));
+    }, [invisibleColumnIds, setInvisibleColumnIds]);
+    var resetColumns = function () {
+        setInvisibleColumnIds([]);
+    };
+    var numericRegExp = /^\d+$/;
+    var isNonManageableColumn = function (col) {
+        return col.lockVisible || col.colId == null || numericRegExp.test(col.colId);
+    };
+    return (jsxs(Menu, __assign({ menuButton: jsx(GridFilterHeaderIconButton, { icon: "ic_columns", title: "Column visibility" }), menuClassName: "step-ag-grid-react-menu", portal: true, unmountOnClose: true }, { children: [jsx("div", __assign({ className: "GridFilterColumnsToggle-container" }, { children: getColumns()
+                    .filter(function (col) { return !!col.headerName; })
+                    .map(function (col) {
+                    var _a, _b;
+                    return (jsx(MenuItem, __assign({ disabled: col.lockVisible, onClick: function (e) {
+                            // Global react-menu MenuItem handler handles tabs
+                            if (e.key !== "Tab") {
+                                e.keepOpen = true;
+                                if (e.key !== "Enter") {
+                                    toggleColumn(col.colId);
+                                }
+                            }
+                        } }, { children: jsx(LuiCheckboxInput, { isChecked: !invisibleColumnIds.includes((_a = col.colId) !== null && _a !== void 0 ? _a : ""), value: "".concat(col.colId), label: (_b = col.headerName) !== null && _b !== void 0 ? _b : "", isDisabled: isNonManageableColumn(col), inputProps: {
+                                onClick: function (e) {
+                                    // Click is handled by MenuItem onClick so keyboard events work
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                }
+                            }, onChange: function () {
+                                /*Do nothing, change handled by menuItem*/
+                            } }) }), col.colId));
+                }) })), jsx(MenuDivider, {}, "$$divider_reset_columns"), jsxs(MenuItem, __assign({ onClick: function (e) {
+                    // Global react-menu MenuItem handler handles tabs
+                    if (e.key !== "Tab") {
+                        e.keepOpen = e.key !== "Enter";
+                        resetColumns();
+                    }
+                } }, { children: [jsx(LuiIcon, { name: "ic_regenerate", alt: "Reset columns", size: "md", className: "MenuItem-icon" }), "Reset columns"] }), "$$reset_columns")] })));
+};
+
+var useGridFilter = function (filter) {
+    var _a = useContext(GridContext), addExternalFilter = _a.addExternalFilter, removeExternalFilter = _a.removeExternalFilter;
+    useEffect(function () {
+        var thisFilter = filter;
+        thisFilter && addExternalFilter(thisFilter);
+        return function () {
+            thisFilter && removeExternalFilter(thisFilter);
+        };
+    }, [addExternalFilter, filter, removeExternalFilter]);
+};
+
+var GridFilterButtons = function (_a) {
+    var _b;
+    var className = _a.className, luiButtonProps = _a.luiButtonProps, options = _a.options;
+    // Select defaultSelected option, otherwise first option.  If no options select none.
+    var _c = useState((_b = options.find(function (option) { return option.defaultSelected; })) !== null && _b !== void 0 ? _b : options[0]), selectedOption = _c[0], setSelectedOption = _c[1];
+    var filter = useMemo(function () { return selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.filter; }, [selectedOption]);
+    useGridFilter(filter);
+    return (jsx("div", __assign({ className: clsx(className, "flex-col-center") }, { children: jsx(LuiButtonGroup, { children: options.map(function (option, index) { return (jsx(LuiButton, __assign({}, luiButtonProps, { className: clsx("lui-button lui-button-secondary", (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) === option.label && "lui-button-active", luiButtonProps === null || luiButtonProps === void 0 ? void 0 : luiButtonProps.className), onClick: function () { return setSelectedOption(option); } }, { children: option.label }), "".concat(index))); }) }) })));
+};
+
+var GridFilterQuick = function (_a) {
+    var quickFilterPlaceholder = _a.quickFilterPlaceholder, defaultValue = _a.defaultValue;
+    var setQuickFilter = useContext(GridContext).setQuickFilter;
+    var _b = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ""), quickFilterValue = _b[0], setQuickFilterValue = _b[1];
+    useEffect(function () {
+        setQuickFilter(quickFilterValue);
+    }, [quickFilterValue, setQuickFilter]);
+    return (jsx("input", { "aria-label": "Search", className: "Grid-quickFilterBox", type: "text", placeholder: quickFilterPlaceholder !== null && quickFilterPlaceholder !== void 0 ? quickFilterPlaceholder : "Search...", value: quickFilterValue, onChange: function (event) {
+            setQuickFilterValue(event.target.value);
+        } }));
+};
+
+var GridFilters = function (_a) {
+    var children = _a.children;
+    return jsx("div", __assign({ className: "Grid-container-filters" }, { children: children }));
+};
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+				var args = [null];
+				args.push.apply(args, arguments);
+				var Ctor = Function.bind.apply(f, args);
+				return new Ctor();
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+/* global setTimeout, clearTimeout */
+
+var dist$1 = function debounce(fn) {
+  var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+  var lastCallAt = void 0;
+  var deferred = void 0;
+  var timer = void 0;
+  var pendingArgs = [];
+  return function debounced() {
+    var currentWait = getWait(wait);
+    var currentTime = new Date().getTime();
+
+    var isCold = !lastCallAt || currentTime - lastCallAt > currentWait;
+
+    lastCallAt = currentTime;
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    if (isCold && options.leading) {
+      return options.accumulate ? Promise.resolve(fn.call(this, [args])).then(function (result) {
+        return result[0];
+      }) : Promise.resolve(fn.call.apply(fn, [this].concat(args)));
+    }
+
+    if (deferred) {
+      clearTimeout(timer);
+    } else {
+      deferred = defer();
+    }
+
+    pendingArgs.push(args);
+    timer = setTimeout(flush.bind(this), currentWait);
+
+    if (options.accumulate) {
+      var argsIndex = pendingArgs.length - 1;
+      return deferred.promise.then(function (results) {
+        return results[argsIndex];
+      });
+    }
+
+    return deferred.promise;
+  };
+
+  function flush() {
+    var thisDeferred = deferred;
+    clearTimeout(timer);
+
+    Promise.resolve(options.accumulate ? fn.call(this, pendingArgs) : fn.apply(this, pendingArgs[pendingArgs.length - 1])).then(thisDeferred.resolve, thisDeferred.reject);
+
+    pendingArgs = [];
+    deferred = null;
+  }
+};
+
+function getWait(wait) {
+  return typeof wait === 'function' ? wait() : wait;
+}
+
+function defer() {
+  var deferred = {};
+  deferred.promise = new Promise(function (resolve, reject) {
+    deferred.resolve = resolve;
+    deferred.reject = reject;
+  });
+  return deferred;
+}
+
+var GridSubComponentContext = createContext({
+    value: "GridSubComponentContext value no context",
+    data: {},
+    setValue: function () {
+        console.error("GridSubComponentContext setValue no context");
+    },
+    setValid: function () {
+        console.error("GridSubComponentContext setValid no context");
+    },
+    triggerSave: function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            console.error("GridSubComponentContext triggerSave no context");
+            return [2 /*return*/];
+        });
+    }); },
+    context: null
+});
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$2 = ".helpText{color:#6b6966;font-size:.75rem;font-weight:400}";
+styleInject(css_248z$2);
+
+var FormError = function (props) {
+    return (jsxs(Fragment, { children: [props.error && (jsx("span", __assign({ className: "LuiTextInput-error", style: { paddingLeft: 0 } }, { children: props.error }))), props.helpText && !props.error && jsx("span", __assign({ className: "helpText" }, { children: props.helpText }))] }));
+};
+
 function escapeStringRegexp(string) {
 	if (typeof string !== 'string') {
 		throw new TypeError('Expected a string');
@@ -4204,12 +4318,15 @@ var GridWrapper = function (_a) {
  */
 var GridContextProvider = function (props) {
     var modifyUpdating = useContext(GridUpdatingContext).modifyUpdating;
-    var _a = useState(), gridApi = _a[0], _setGridApi = _a[1];
-    var _b = useState(false), gridReady = _b[0], setGridReady = _b[1];
-    var _c = useState(""), quickFilter = _c[0], setQuickFilter = _c[1];
+    var _a = useState(), gridApi = _a[0], setGridApi = _a[1];
+    var _b = useState(), columnApi = _b[0], setColumnApi = _b[1];
+    var _c = useState(false), gridReady = _c[0], setGridReady = _c[1];
+    var _d = useState(""), quickFilter = _d[0], setQuickFilter = _d[1];
+    var _e = useState([]), invisibleColumnIds = _e[0], setInvisibleColumnIds = _e[1];
+    var testId = useRef();
     var idsBeforeUpdate = useRef([]);
     var prePopupFocusedCell = useRef();
-    var _d = useState(false), externallySelectedItemsAreInSync = _d[0], setExternallySelectedItemsAreInSync = _d[1];
+    var _f = useState(false), externallySelectedItemsAreInSync = _f[0], setExternallySelectedItemsAreInSync = _f[1];
     var externalFilters = useRef([]);
     /**
      * Set quick filter directly on grid, based on previously save quickFilter state.
@@ -4217,14 +4334,6 @@ var GridContextProvider = function (props) {
     useEffect(function () {
         gridApi === null || gridApi === void 0 ? void 0 : gridApi.setQuickFilter(quickFilter);
     }, [gridApi, quickFilter]);
-    /**
-     * Set the grid api when the grid is ready.
-     */
-    var setGridApi = useCallback(function (gridApi) {
-        _setGridApi(gridApi);
-        gridApi === null || gridApi === void 0 ? void 0 : gridApi.setQuickFilter(quickFilter);
-        setGridReady(!!gridApi);
-    }, [quickFilter]);
     /**
      * Wraps things that require gridApi in common handling, for when gridApi not present.
      *
@@ -4237,6 +4346,46 @@ var GridContextProvider = function (props) {
         }
         return gridApi ? hasApiFn(gridApi) : noApiFn();
     }, [gridApi]);
+    /**
+     * Scroll row into view by Id.
+     *
+     * @param id Id to scroll into view
+     * @return true if row is found, else false
+     */
+    var ensureRowVisible = useCallback(function (id) {
+        return gridApiOp(function (gridApi) {
+            var node = gridApi.getRowNode("".concat(id));
+            if (!node)
+                return false;
+            gridApi.ensureNodeVisible(node);
+            return true;
+        });
+    }, [gridApiOp]);
+    /**
+     * Set the grid api when the grid is ready.
+     */
+    var setApis = useCallback(function (gridApi, columnApi, dataTestId) {
+        testId.current = dataTestId;
+        setGridApi(gridApi);
+        setColumnApi(columnApi);
+        gridApi === null || gridApi === void 0 ? void 0 : gridApi.setQuickFilter(quickFilter);
+        setGridReady(!!gridApi);
+    }, [quickFilter]);
+    /**
+     * Expose scrollRowIntoView for playwright tests.
+     */
+    useEffect(function () {
+        var globalSupport = window.__stepAgGrid || (window.__stepAgGrid = { grids: {} });
+        if (testId.current) {
+            globalSupport.grids[testId.current] = {
+                scrollRowIntoViewById: function (rowId) {
+                    if (!ensureRowVisible(rowId)) {
+                        throw "scrollRowIntoView failed on grid '".concat(testId.current, "' as row with id: '").concat(rowId, "' was not found");
+                    }
+                }
+            };
+        }
+    }, [ensureRowVisible]);
     /**
      * Before a popup record the currently focused cell.
      */
@@ -4390,19 +4539,21 @@ var GridContextProvider = function (props) {
     var getSelectedRows = useCallback(function () {
         return gridApiOp(function (gridApi) { return gridApi.getSelectedRows(); }, function () { return []; });
     }, [gridApiOp]);
+    var getFilteredSelectedRows = useCallback(function () {
+        return gridApiOp(function (gridApi) {
+            var rowData = [];
+            gridApi.forEachNodeAfterFilter(function (node) {
+                if (node.isSelected())
+                    rowData.push(node.data);
+            });
+            return rowData;
+        });
+    }, [gridApiOp]);
     var getSelectedRowIds = useCallback(function () { return getSelectedRows().map(function (row) { return row.id; }); }, [getSelectedRows]);
+    var getFilteredSelectedRowIds = useCallback(function () { return getFilteredSelectedRows().map(function (row) { return row.id; }); }, [getFilteredSelectedRows]);
     var editingCells = useCallback(function () {
         return gridApiOp(function (gridApi) { return isNotEmpty(gridApi.getEditingCells()); }, function () { return false; });
     }, [gridApiOp]);
-    var ensureRowVisible = useCallback(function (id) {
-        return gridApiOp(function (gridApi) {
-            var node = gridApi.getRowNode("".concat(id));
-            if (!node)
-                return false;
-            gridApi.ensureNodeVisible(node);
-            return true;
-        });
-    }, [gridApiOp]);
     /**
      * Scroll last selected row into view on grid sort change
      */
@@ -4541,10 +4692,24 @@ var GridContextProvider = function (props) {
     var doesExternalFilterPass = function (node) {
         return externalFilters.current.every(function (filter) { return filter(node.data, node); });
     };
+    var getColumns = useCallback(function () { var _a; return (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.getColumnDefs()) !== null && _a !== void 0 ? _a : []; }, [gridApi]);
+    useEffect(function () {
+        if (columnApi) {
+            // show all columns that aren't invisible
+            columnApi.setColumnsVisible(compact(getColumns()
+                .filter(function (col) { return !col.lockVisible && col.colId && !invisibleColumnIds.includes(col.colId); })
+                .map(function (col) { return col.colId; })), true);
+            // hide all invisible columns
+            columnApi.setColumnsVisible(invisibleColumnIds, false);
+        }
+    }, [invisibleColumnIds, columnApi, getColumns]);
     return (jsx(GridContext.Provider, __assign({ value: {
+            getColumns: getColumns,
+            invisibleColumnIds: invisibleColumnIds,
+            setInvisibleColumnIds: setInvisibleColumnIds,
             gridReady: gridReady,
             prePopupOps: prePopupOps,
-            setGridApi: setGridApi,
+            setApis: setApis,
             setQuickFilter: setQuickFilter,
             selectRowsById: selectRowsById,
             selectRowsDiff: selectRowsDiff,
@@ -4554,7 +4719,9 @@ var GridContextProvider = function (props) {
             flashRowsDiff: flashRowsDiff,
             focusByRowById: focusByRowById,
             getSelectedRows: getSelectedRows,
+            getFilteredSelectedRows: getFilteredSelectedRows,
             getSelectedRowIds: getSelectedRowIds,
+            getFilteredSelectedRowIds: getFilteredSelectedRowIds,
             editingCells: editingCells,
             ensureRowVisible: ensureRowVisible,
             ensureSelectedRowIsVisible: ensureSelectedRowIsVisible,
@@ -24836,5 +25003,5 @@ var clickActionButton = function (text, container) { return __awaiter(void 0, vo
     });
 }); };
 
-export { ActionButton, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridCell, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridFilterButtons, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditBearingCorrectionEditorParams, GridPopoverEditBearingEditorParams, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, GridWrapper, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, clickActionButton, clickMenuOption, clickMultiSelectOption, closeMenu, closePopover, convertDDToDMS, countRows, deselectRow, editCell, findActionButton, findCell, findCellContains, findMenuOption, findMultiSelectOption, findOpenPopover, findParentWithClass, findRow, fnOrVar, generateFilterGetter, getMultiSelectOptions, hasParentClass, isCellReadOnly, isFloat, isNotEmpty, openAndClickMenuOption, openAndFindMenuOption, queryMenuOption, queryRow, selectCell, selectRow, stringByteLengthIsInvalid, suppressCellKeyboardEvents, typeInputByLabel, typeInputByPlaceholder, typeOnlyInput, typeOtherInput, typeOtherTextArea, useDeferredPromise, useGenerateOrDefaultId, useGridContext, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, validateMenuOptions, wait$2 as wait };
+export { ActionButton, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridCell, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridFilterButtons, GridFilterColumnsToggle, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditBearingCorrectionEditorParams, GridPopoverEditBearingEditorParams, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, GridWrapper, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, clickActionButton, clickMenuOption, clickMultiSelectOption, closeMenu, closePopover, convertDDToDMS, countRows, deselectRow, editCell, findActionButton, findCell, findCellContains, findMenuOption, findMultiSelectOption, findOpenPopover, findParentWithClass, findRow, fnOrVar, generateFilterGetter, getMultiSelectOptions, hasParentClass, isCellReadOnly, isFloat, isNotEmpty, openAndClickMenuOption, openAndFindMenuOption, queryMenuOption, queryRow, selectCell, selectRow, stringByteLengthIsInvalid, suppressCellKeyboardEvents, typeInputByLabel, typeInputByPlaceholder, typeOnlyInput, typeOtherInput, typeOtherTextArea, useDeferredPromise, useGenerateOrDefaultId, useGridContext, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, validateMenuOptions, wait$2 as wait };
 //# sourceMappingURL=step-ag-grid.esm.js.map