@linzjs/step-ag-grid 2.1.2 → 2.2.0

package/dist/src/components/Grid.d.ts

@@ -16,6 +16,7 @@ export interface GridProps {
     columnDefs: GridOptions["columnDefs"];
     rowData: GridOptions["rowData"];
     noRowsOverlayText?: string;
+    postSortRows?: GridOptions["postSortRows"];
 }
 /**
  * Wrapper for AgGrid to add commonly used functionality.

package/dist/src/components/GridCell.d.ts

@@ -11,7 +11,7 @@ export declare const GridCellRenderer: (props: ICellRendererParams) => JSX.Eleme
 export interface ColDefT<RowType extends GridBaseRow> extends ColDef {
     _?: RowType;
 }
-export declare const GridCell: <RowType extends GridBaseRow, Props>(props: GenericCellColDef<RowType>, custom?: {
+export declare const GridCell: <RowType extends GridBaseRow, Props extends CellEditorCommon>(props: GenericCellColDef<RowType>, custom?: {
     multiEdit?: boolean | undefined;
     editor?: ((editorProps: Props) => JSX.Element) | undefined;
     editorParams?: Props | undefined;

package/dist/src/components/gridForm/GridFormEditBearing.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import "../../styles/GridFormEditBearing.scss";
 import { GridBaseRow } from "../Grid";
-import { CellEditorCommon } from "@components/GridCell";
+import { CellEditorCommon } from "../GridCell";
 export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends CellEditorCommon {
     placeHolder?: string;
     range?: (value: number | null) => string | null;

package/dist/src/components/gridForm/GridFormMessage.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { GridBaseRow } from "../Grid";
-import { CellEditorCommon, CellParams } from "@components/GridCell";
+import { CellEditorCommon, CellParams } from "../GridCell";
 export interface GridFormMessageProps<RowType extends GridBaseRow> extends CellEditorCommon {
     message: (cellParams: CellParams<RowType>) => Promise<string | JSX.Element> | string | JSX.Element;
 }

package/dist/src/components/gridForm/GridFormMultiSelect.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import "../../styles/GridFormMultiSelect.scss";
 import { GridBaseRow } from "../Grid";
-import { CellEditorCommon } from "@components/GridCell";
+import { CellEditorCommon } from "../GridCell";
 interface MultiFinalSelectOption<ValueType> {
     value: ValueType;
     label?: JSX.Element | string;

package/dist/src/components/gridForm/GridFormPopoutMenu.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { GridBaseRow } from "../Grid";
-import { CellEditorCommon } from "@components/GridCell";
+import { CellEditorCommon } from "../GridCell";
 export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
     options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
 }

package/dist/src/components/gridForm/GridFormTextArea.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { GridBaseRow } from "../Grid";
-import { CellEditorCommon } from "@components/GridCell";
+import { CellEditorCommon } from "../GridCell";
 export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends CellEditorCommon {
     placeholder?: string;
     required?: boolean;

package/dist/src/components/gridForm/GridFormTextInput.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { GridBaseRow } from "../Grid";
-import { CellEditorCommon } from "@components/GridCell";
+import { CellEditorCommon } from "../GridCell";
 export interface GridFormTextInputProps<RowType extends GridBaseRow> extends CellEditorCommon {
     placeholder?: string;
     units?: string;

package/dist/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.d.ts

@@ -1,5 +1,5 @@
 import { ColDefT, GenericCellEditorProps } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormMultiSelectProps } from "../gridForm/GridFormMultiSelect";
-import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 export declare const GridPopoutEditMultiSelect: <RowType extends GridBaseRow, ValueType>(colDef: GenericCellColDef<RowType>, props: GenericCellEditorProps<GridFormMultiSelectProps<RowType, ValueType>>) => ColDefT<RowType>;

package/dist/src/components/gridPopoverEdit/GridPopoverEditBearing.d.ts

@@ -1,7 +1,7 @@
 import { ColDefT, GenericCellEditorProps } from "../GridCell";
 import { GridFormEditBearingProps } from "../gridForm/GridFormEditBearing";
 import { GridBaseRow } from "../Grid";
-import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 export declare const GridPopoverEditBearingLike: <RowType extends GridBaseRow>(colDef: GenericCellColDef<RowType>, props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>) => ColDefT<RowType>;
 export declare const GridPopoverEditBearing: <RowType extends GridBaseRow>(colDef: GenericCellColDef<RowType>, props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>) => ColDefT<RowType>;
 export declare const GridPopoverEditBearingCorrection: <RowType extends GridBaseRow>(colDef: GenericCellColDef<RowType>, props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>) => ColDefT<RowType>;

package/dist/src/components/gridPopoverEdit/GridPopoverEditDropDown.d.ts

@@ -1,5 +1,5 @@
 import { ColDefT, GenericCellEditorProps } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormPopoutDropDownProps } from "../gridForm/GridFormDropDown";
-import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 export declare const GridPopoverEditDropDown: <RowType extends GridBaseRow, ValueType>(colDef: GenericCellColDef<RowType>, props: GenericCellEditorProps<GridFormPopoutDropDownProps<RowType, ValueType>>) => ColDefT<RowType>;

package/dist/src/components/gridPopoverEdit/GridPopoverMenu.d.ts

@@ -2,7 +2,7 @@ import "./GridPopoverMenu.scss";
 import { GridBaseRow } from "../Grid";
 import { ColDefT, GenericCellEditorProps } from "../GridCell";
 import { GridFormPopoutMenuProps } from "../gridForm/GridFormPopoutMenu";
-import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 /**
  * Popout burger menu
  */

package/dist/src/components/gridPopoverEdit/GridPopoverMessage.d.ts

@@ -1,5 +1,5 @@
 import { ColDefT, GenericCellEditorProps } from "../GridCell";
 import { GridFormMessageProps } from "../gridForm/GridFormMessage";
 import { GridBaseRow } from "../Grid";
-import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 export declare const GridPopoverMessage: <RowType extends GridBaseRow>(colDef: GenericCellColDef<RowType>, props: GenericCellEditorProps<GridFormMessageProps<RowType>>) => ColDefT<RowType>;

package/dist/src/components/gridPopoverEdit/GridPopoverTextArea.d.ts

@@ -1,5 +1,5 @@
 import { ColDefT, GenericCellEditorProps } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormTextAreaProps } from "../gridForm/GridFormTextArea";
-import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 export declare const GridPopoverTextArea: <RowType extends GridBaseRow>(colDef: GenericCellColDef<RowType>, params: GenericCellEditorProps<GridFormTextAreaProps<RowType>>) => ColDefT<RowType>;

package/dist/src/components/gridPopoverEdit/GridPopoverTextInput.d.ts

@@ -1,5 +1,5 @@
 import { ColDefT, GenericCellEditorProps } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormTextInputProps } from "../gridForm/GridFormTextInput";
-import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 export declare const GridPopoverTextInput: <RowType extends GridBaseRow>(colDef: GenericCellColDef<RowType>, params: GenericCellEditorProps<GridFormTextInputProps<RowType>>) => ColDefT<RowType>;

package/dist/src/components/gridRender/GridRenderGenericCell.d.ts

@@ -2,7 +2,7 @@
 import "../../styles/GridRenderGenericCell.scss";
 import { ICellRendererParams } from "ag-grid-community";
 import { GridBaseRow } from "../Grid";
-import { ColDefT } from "@components/GridCell";
+import { ColDefT } from "../GridCell";
 export interface RowICellRendererParams<RowType extends GridBaseRow> extends ICellRendererParams {
     data: RowType;
 }

package/dist/src/contexts/GridContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { GridApi } from "ag-grid-community";
-import { GridBaseRow } from "@components/Grid";
+import { GridBaseRow } from "../components/Grid";
 export interface GridContextType {
     gridReady: () => boolean;
     setGridApi: (gridApi: GridApi | undefined) => void;

package/dist/src/index.d.ts

@@ -1,31 +1,32 @@
-export * from "@react-menu3";
+export * from "./react-menu3/index";
 export * from "./react-menu3/types";
-export * from "@contexts/GridUpdatingContext";
-export * from "@contexts/GridUpdatingContextProvider";
-export * from "@contexts/GridContext";
-export * from "@contexts/GridContextProvider";
-export type { GridBaseRow } from "@components/Grid";
-export { Grid } from "@components/Grid";
-export * from "@components/GridCell";
-export { GridIcon } from "@components/GridIcon";
-export { ComponentLoadingWrapper } from "@components/ComponentLoadingWrapper";
-export { GenericMultiEditCellClass } from "@components/GenericCellClass";
-export { GridLoadableCell } from "@components/GridLoadableCell";
-export { useGridPopoverHook } from "@components/GridPopoverHook";
-export { usePostSortRowsHook } from "@components/PostSortRowsHook";
-export { GridRendererGenericCell } from "@components/gridRender/GridRenderGenericCell";
-export { GridRenderPopoutMenuCell } from "@components/gridRender/GridRenderPopoutMenuCell";
-export { GridPopoutEditMultiSelect } from "@components/gridPopoverEdit/GridPopoutEditMultiSelect";
-export { GridPopoverMenu } from "@components/gridPopoverEdit/GridPopoverMenu";
-export { GridPopoverEditBearing } from "@components/gridPopoverEdit/GridPopoverEditBearing";
-export { GridPopoverEditBearingCorrection } from "@components/gridPopoverEdit/GridPopoverEditBearing";
-export { GridPopoverEditDropDown } from "@components/gridPopoverEdit/GridPopoverEditDropDown";
-export { GridPopoverMessage } from "@components/gridPopoverEdit/GridPopoverMessage";
-export { GridPopoverTextArea } from "@components/gridPopoverEdit/GridPopoverTextArea";
-export { GridPopoverTextInput } from "@components/gridPopoverEdit/GridPopoverTextInput";
-export { GridHeaderSelect } from "@components/gridHeader/GridHeaderSelect";
+export * from "./contexts/GridUpdatingContext";
+export * from "./contexts/GridUpdatingContextProvider";
+export * from "./contexts/GridContext";
+export * from "./contexts/GridContextProvider";
+export type { GridBaseRow } from "./components/Grid";
+export { Grid } from "./components/Grid";
+export * from "./components/GridCell";
+export { GridIcon } from "./components/GridIcon";
+export { ComponentLoadingWrapper } from "./components/ComponentLoadingWrapper";
+export { GenericMultiEditCellClass } from "./components/GenericCellClass";
+export { GridLoadableCell } from "./components/GridLoadableCell";
+export { useGridPopoverHook } from "./components/GridPopoverHook";
+export { usePostSortRowsHook } from "./components/PostSortRowsHook";
+export * from "./components/gridRender/GridRenderGenericCell";
+export { GridRenderPopoutMenuCell } from "./components/gridRender/GridRenderPopoutMenuCell";
+export { GridPopoutEditMultiSelect } from "./components/gridPopoverEdit/GridPopoutEditMultiSelect";
+export { GridPopoverMenu } from "./components/gridPopoverEdit/GridPopoverMenu";
+export { GridPopoverEditBearing } from "./components/gridPopoverEdit/GridPopoverEditBearing";
+export { GridPopoverEditBearingCorrection } from "./components/gridPopoverEdit/GridPopoverEditBearing";
+export { GridPopoverEditDropDown } from "./components/gridPopoverEdit/GridPopoverEditDropDown";
+export { GridPopoverMessage } from "./components/gridPopoverEdit/GridPopoverMessage";
+export { GridPopoverTextArea } from "./components/gridPopoverEdit/GridPopoverTextArea";
+export { GridPopoverTextInput } from "./components/gridPopoverEdit/GridPopoverTextInput";
+export { GridHeaderSelect } from "./components/gridHeader/GridHeaderSelect";
 export { TextAreaInput } from "./lui/TextAreaInput";
 export { TextInputFormatted } from "./lui/TextInputFormatted";
-export { GridSubComponentTextArea } from "@components/GridSubComponentTextArea";
-export * from "@utils/bearing";
-export * from "@utils/util";
+export { GridSubComponentTextArea } from "./components/GridSubComponentTextArea";
+export * from "./lui/ActionButton";
+export * from "./utils/bearing";
+export * from "./utils/util";

package/dist/src/lui/ActionButton.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import "./ActionButton.scss";
+import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+export interface ActionButtonProps {
+    icon: IconName;
+    name: string;
+    inProgressName?: string;
+    title?: string;
+    dataTestId?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "ns";
+    className?: string;
+    onClick?: () => void;
+    inProgress?: boolean;
+}
+export declare const ActionButton: ({ icon, name, inProgressName, dataTestId, inProgress, className, title, onClick, size, }: ActionButtonProps) => JSX.Element;

package/dist/src/lui/reactUtils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Track previous values of states.
+ *
+ * @param value Value to track.
+ */
+export declare const usePrevious: <T extends unknown>(value: T) => T | undefined;

package/dist/src/lui/reactUtils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lui/stateDeferredHook.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Defers state change up to a minimum time since last state change.
+ */
+export declare const useStateDeferred: <T extends unknown>(initialValue: T) => [T, (v: T) => void, (v: T, w: number) => void];

package/dist/src/lui/timeoutHook.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Cancels timeouts on scope being destroyed.
+ *
+ * This could almost be a debounce, but debounce tracks by function reference, this tracks by hook reference.
+ * This could have been implemented using debounce if the callers function was wrapped in useCallback,
+ * but there's no way to enforce that, so  it would lead to bugs.
+ */
+export declare const useTimeoutHook: () => (fn: () => void, waitTimeMs: number) => void;

package/dist/src/lui/timeoutHook.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -3,7 +3,7 @@ import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
 import { findIndex, isEmpty, castArray, remove, flatten, delay, sortBy, last, difference, xorBy, fromPairs } from 'lodash-es';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { AgGridReact } from 'ag-grid-react';
-import { LuiMiniSpinner, LuiIcon, LuiCheckboxInput } from '@linzjs/lui';
+import { LuiMiniSpinner, LuiIcon, LuiCheckboxInput, LuiButton } from '@linzjs/lui';
 
 // Generate className following BEM methodology: http://getbem.com/naming/
 // Modifier value can be one of the following types: boolean, string, undefined
@@ -2216,7 +2216,11 @@ var usePostSortRowsHook = function (_a) {
         var restorePreviousSortColumnState = function () { return columnApi.applyColumnState({ state: previousColSort.current }); };
         var hasNewRows = function () { return nodes.some(function (row) { return previousRowSortIndex[row.data.id] == null; }); };
         var sortIsStale = function () {
-            return !hasNewRows() && nodes.some(function (row, index) { var _a; return ![null, index].includes((_a = previousRowSortIndex[row.data.id]) !== null && _a !== void 0 ? _a : null); });
+            // If there are new rows we want to them to be at the bottom of the grid, so we treat it as sort not stale
+            if (hasNewRows())
+                return false;
+            // Otherwise check if the stored sort index matches the new sort index
+            return nodes.some(function (node, index) { return previousRowSortIndex[node.data.id] != index; });
         };
         var sortNodesByPreviousSort = function () {
             return nodes.sort(function (a, b) {
@@ -2272,6 +2276,7 @@ var usePostSortRowsHook = function (_a) {
                 if (!sortWasStale.current) {
                     // backup sort state, so we can restore it when sort is clicked on a stale column
                     previousColSort.current = copyCurrentSortSettings();
+                    backupSortOrder();
                     sortWasStale.current = true;
                     setStaleGrid(true);
                 }
@@ -2321,12 +2326,12 @@ var GridHeaderSelect = function (_a) {
  * Wrapper for AgGrid to add commonly used functionality.
  */
 var Grid = function (params) {
-    var _a;
-    var _b = useContext(GridContext), gridReady = _b.gridReady, setGridApi = _b.setGridApi, setQuickFilter = _b.setQuickFilter, ensureRowVisible = _b.ensureRowVisible, selectRowsById = _b.selectRowsById, ensureSelectedRowIsVisible = _b.ensureSelectedRowIsVisible, sizeColumnsToFit = _b.sizeColumnsToFit;
+    var _a, _b;
+    var _c = useContext(GridContext), gridReady = _c.gridReady, setGridApi = _c.setGridApi, setQuickFilter = _c.setQuickFilter, ensureRowVisible = _c.ensureRowVisible, selectRowsById = _c.selectRowsById, ensureSelectedRowIsVisible = _c.ensureSelectedRowIsVisible, sizeColumnsToFit = _c.sizeColumnsToFit;
     var checkUpdating = useContext(GridUpdatingContext).checkUpdating;
-    var _c = useState(""), internalQuickFilter = _c[0], setInternalQuickFilter = _c[1];
+    var _d = useState(""), internalQuickFilter = _d[0], setInternalQuickFilter = _d[1];
     var lastSelectedIds = useRef([]);
-    var _d = useState(false), staleGrid = _d[0], setStaleGrid = _d[1];
+    var _e = useState(false), staleGrid = _e[0], setStaleGrid = _e[1];
     var postSortRows = usePostSortRowsHook({ setStaleGrid: setStaleGrid });
     /**
      * AgGrid checkbox select does not pass clicks within cell but not on the checkbox to checkbox.
@@ -2470,7 +2475,7 @@ var Grid = function (params) {
     }, [columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length, sizeColumnsToFit]);
     return (jsxs("div", __assign({ "data-testid": params.dataTestId, className: clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale") }, { children: [params.quickFilter && (jsx("div", __assign({ className: "Grid-quickFilter" }, { children: jsx("input", { "aria-label": "Search", className: "lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox", type: "text", placeholder: (_a = params.quickFilterPlaceholder) !== null && _a !== void 0 ? _a : "Search...", value: internalQuickFilter, onChange: function (event) {
                         setInternalQuickFilter(event.target.value);
-                    } }) }))), jsx(AgGridReact, { getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyDown: onCellKeyDown, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection })] })));
+                    } }) }))), jsx(AgGridReact, { getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyDown: onCellKeyDown, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_b = params.postSortRows) !== null && _b !== void 0 ? _b : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection })] })));
 };
 
 var GenericMultiEditCellClass = function (props) {
@@ -2513,11 +2518,11 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$6 = ".AgGridGenericCellRenderer-icon{margin-right:4px}.AgGridGenericCellRenderer-ic_infoIcon{fill:#3a7cdf;margin-right:4px}.AgGridGenericCellRenderer-ic_warningIcon{fill:#ea6a2e;margin-right:4px}";
-styleInject(css_248z$6);
+var css_248z$7 = ".AgGridGenericCellRenderer-icon{margin-right:4px}.AgGridGenericCellRenderer-ic_infoIcon{fill:#3a7cdf;margin-right:4px}.AgGridGenericCellRenderer-ic_warningIcon{fill:#ea6a2e;margin-right:4px}";
+styleInject(css_248z$7);
 
-var css_248z$5 = ".GridLoadableCell-container{align-items:center;display:flex}";
-styleInject(css_248z$5);
+var css_248z$6 = ".GridLoadableCell-container{align-items:center;display:flex}";
+styleInject(css_248z$6);
 
 var GridLoadableCell = function (props) {
     if (props.isLoading) {
@@ -2612,7 +2617,7 @@ var GridCellRenderer = function (props) {
     return ((_a = colDef === null || colDef === void 0 ? void 0 : colDef.cellRendererParams) === null || _a === void 0 ? void 0 : _a.originalCellRenderer) ? (jsx(GridLoadableCell, __assign({ isLoading: checkUpdating((_c = (_b = colDef.field) !== null && _b !== void 0 ? _b : colDef.colId) !== null && _c !== void 0 ? _c : "", props.data.id) }, { children: jsxs(Fragment$1, { children: [typeof warningText === "string" && jsx(GridIcon, { icon: "ic_warning", title: warningText }), typeof infoText === "string" && jsx(GridIcon, { icon: "ic_info", title: infoText }), jsx(colDef.cellRendererParams.originalCellRenderer, __assign({}, props))] }) }))) : (jsx(GridRendererGenericCell, __assign({}, props)));
 };
 /*
- * For editing a text area.
+ * All cells should use this
  */
 var GridCell = function (props, custom) {
     var _a;
@@ -2648,7 +2653,7 @@ var GenericCellEditorComponent3 = function (props) {
     var multiEdit = (_a = cellEditorParams === null || cellEditorParams === void 0 ? void 0 : cellEditorParams.multiEdit) !== null && _a !== void 0 ? _a : false;
     // TODO don't need all these props in context
     setProps(props, multiEdit);
-    return (jsxs(Fragment$1, { children: [jsx("div", { children: colDef.cellRenderer ? jsx(colDef.cellRenderer, __assign({}, props)) : props.value }), (props === null || props === void 0 ? void 0 : props.editor) && jsx(props.editor, __assign({}, cellEditorParams, propsRef.current))] }));
+    return (jsxs(Fragment$1, { children: [jsx(colDef.cellRenderer, __assign({}, props)), (props === null || props === void 0 ? void 0 : props.editor) && jsx(props.editor, __assign({}, cellEditorParams, propsRef.current))] }));
 };
 
 /**
@@ -2739,11 +2744,11 @@ var GridRenderPopoutMenuCell = function (props) {
     return (jsx(GridLoadableCell, __assign({ isLoading: isLoading, className: disabled ? "GridPopoutMenu-burgerDisabled" : "GridPopoutMenu-burger" }, { children: jsx(LuiIcon, { name: "ic_more_vert", alt: "More actions", size: "md" }) })));
 };
 
-var css_248z$4 = ".GridMultiSelect-containerSmall .GridFormMultiSelect-options{max-height:130px;overflow-y:auto}.GridMultiSelect-containerMedium .GridFormMultiSelect-options{max-height:190px;overflow-y:auto}.GridMultiSelect-containerLarge .GridFormMultiSelect-options{max-height:320px;overflow-y:auto}.GridMultiSelect-containerUnlimited .GridFormMultiSelect-options{overflow-y:auto}";
-styleInject(css_248z$4);
+var css_248z$5 = ".GridMultiSelect-containerSmall .GridFormMultiSelect-options{max-height:130px;overflow-y:auto}.GridMultiSelect-containerMedium .GridFormMultiSelect-options{max-height:190px;overflow-y:auto}.GridMultiSelect-containerLarge .GridFormMultiSelect-options{max-height:320px;overflow-y:auto}.GridMultiSelect-containerUnlimited .GridFormMultiSelect-options{overflow-y:auto}";
+styleInject(css_248z$5);
 
-var css_248z$3 = ".GridPopoverEditDropDown-containerSmall .GridFormDropDown-options{max-height:120px;overflow-y:auto}.GridPopoverEditDropDown-containerMedium .GridFormDropDown-options{max-height:200px;overflow-y:auto}.GridPopoverEditDropDown-containerLarge .GridFormDropDown-options{max-height:400px;overflow-y:auto}.GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options{overflow-y:auto}";
-styleInject(css_248z$3);
+var css_248z$4 = ".GridPopoverEditDropDown-containerSmall .GridFormDropDown-options{max-height:120px;overflow-y:auto}.GridPopoverEditDropDown-containerMedium .GridFormDropDown-options{max-height:200px;overflow-y:auto}.GridPopoverEditDropDown-containerLarge .GridFormDropDown-options{max-height:400px;overflow-y:auto}.GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options{overflow-y:auto}";
+styleInject(css_248z$4);
 
 /* global setTimeout, clearTimeout */
 
@@ -3112,11 +3117,11 @@ var GridFormMultiSelect = function (props) {
 };
 
 var GridPopoutEditMultiSelect = function (colDef, props) {
-    return GridCell(__assign({ initialWidth: 65, maxWidth: 150, cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined }, colDef), __assign(__assign({ editor: GridFormMultiSelect }, props), { editorParams: __assign({ className: "GridMultiSelect-containerMedium" }, props.editorParams) }));
+    return GridCell(__assign({ initialWidth: 65, maxWidth: 150 }, colDef), __assign(__assign({ editor: GridFormMultiSelect }, props), { editorParams: __assign({ className: "GridMultiSelect-containerMedium" }, props.editorParams) }));
 };
 
-var css_248z$2 = ".GridPopoutMenu-burger{cursor:pointer}.GridPopoutMenu-burger svg{fill:#007198}.GridPopoutMenu-burgerDisabled svg{fill:#989189}";
-styleInject(css_248z$2);
+var css_248z$3 = ".GridPopoutMenu-burger{cursor:pointer}.GridPopoutMenu-burger svg{fill:#007198}.GridPopoutMenu-burgerDisabled svg{fill:#989189}";
+styleInject(css_248z$3);
 
 /** Menu configuration types **/
 var PopoutMenuSeparator = Object.freeze({ __isMenuSeparator__: true });
@@ -3279,11 +3284,11 @@ var convertDDToDMS = function (dd, showPositiveSymbol, addTrailingZeros) {
     return dmsString;
 };
 
-var css_248z$1 = ".GridFormEditBearing-input{width:320px}";
-styleInject(css_248z$1);
+var css_248z$2 = ".GridFormEditBearing-input{width:320px}";
+styleInject(css_248z$2);
 
-var css_248z = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#beb9b4;line-height:48px;position:absolute;right:14px;top:0}";
-styleInject(css_248z);
+var css_248z$1 = ".LuiTextInput{margin-bottom:0}.LuiTextInput-formatted{color:#beb9b4;line-height:48px;position:absolute;right:14px;top:0}";
+styleInject(css_248z$1);
 
 var TextInputFormatted = function (props) {
     return (jsxs("div", __assign({ className: clsx("LuiTextInput Grid-popoverContainer", props.error && "hasError", props.warning && "hasWarning", props.className) }, { children: [jsxs("span", __assign({ className: "LuiTextInput-inputWrapper" }, { children: [jsx("input", __assign({ type: "text", className: "LuiTextInput-input", min: "0", value: props.value, onChange: props.onChange }, props.inputProps)), jsx("span", __assign({ className: "LuiTextInput-formatted" }, { children: props.formatted }))] })), props.error && (jsxs("span", __assign({ className: "LuiTextInput-error" }, { children: [jsx(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }), props.error] }))), props.warning && (jsxs("span", __assign({ className: "LuiTextInput-warning" }, { children: [jsx(LuiIcon, { alt: "warning", name: "ic_warning", className: "LuiTextInput-warning-icon", size: "sm", status: "warning" }), props.warning] })))] })));
@@ -3336,7 +3341,7 @@ var GridFormEditBearing = function (_props) {
 };
 
 var GridPopoverEditBearingLike = function (colDef, props) {
-    return GridCell(__assign({ initialWidth: 65, maxWidth: 150, valueFormatter: bearingValueFormatter, cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined }, colDef), __assign({ editor: GridFormEditBearing }, props));
+    return GridCell(__assign({ initialWidth: 65, maxWidth: 150, valueFormatter: bearingValueFormatter }, colDef), __assign({ editor: GridFormEditBearing }, props));
 };
 var GridPopoverEditBearing = function (colDef, props) {
     return GridPopoverEditBearingLike(__assign({ valueFormatter: bearingValueFormatter }, colDef), {
@@ -3368,7 +3373,7 @@ var GridPopoverEditBearingCorrection = function (colDef, props) {
 };
 
 var GridPopoverEditDropDown = function (colDef, props) {
-    return GridCell(__assign({ initialWidth: 65, maxWidth: 150, cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined }, colDef), __assign(__assign({ editor: GridFormDropDown }, props), { editorParams: __assign({ 
+    return GridCell(__assign({ initialWidth: 65, maxWidth: 150 }, colDef), __assign(__assign({ editor: GridFormDropDown }, props), { editorParams: __assign({ 
             // Defaults to medium size container
             className: "GridPopoverEditDropDown-containerMedium" }, props.editorParams) }));
 };
@@ -3585,5 +3590,96 @@ var GridSubComponentTextArea = function (props) {
     return (jsx("div", __assign({ className: "FreeTextInput LuiDeprecatedForms" }, { children: jsx("textarea", { autoFocus: true, maxLength: 10000, spellCheck: true, className: "free-text-input", onChange: function (e) { return setValue(e.target.value); }, defaultValue: value }) })));
 };
 
-export { ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericCellEditorComponent, GenericMultiEditCellClass, Grid, GridCell, GridCellRenderer, GridContext, GridContextProvider, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, GridSubComponentTextArea, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuItem, MenuRadioGroup, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
+var css_248z = ".ActionButton{align-items:center;display:flex}.ActionButton .LuiIcon{margin:0 4px!important}.ActionButton-minimalArea{position:relative}.ActionButton-minimalAreaDisplay{position:absolute}.ActionButton-minimalAreaExpand{visibility:hidden}.ActionButton-inProgress{background-color:#e2f3f7!important;color:#007198!important;cursor:progress}.ActionButton-inProgress svg *{fill:#0000!important}";
+styleInject(css_248z);
+
+/**
+ * Track previous values of states.
+ *
+ * @param value Value to track.
+ */
+var usePrevious = function (value) {
+    var ref = useRef();
+    useEffect(function () {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+};
+
+/**
+ * Cancels timeouts on scope being destroyed.
+ *
+ * This could almost be a debounce, but debounce tracks by function reference, this tracks by hook reference.
+ * This could have been implemented using debounce if the callers function was wrapped in useCallback,
+ * but there's no way to enforce that, so  it would lead to bugs.
+ */
+var useTimeoutHook = function () {
+    var timeout = useRef();
+    /**
+     * Clear any pending timeouts.
+     */
+    var clearTimeouts = function () {
+        if (timeout.current) {
+            var tc = timeout.current;
+            timeout.current = undefined;
+            clearTimeout(tc);
+        }
+    };
+    /**
+     * Call this when your action has completed.
+     */
+    var invoke = useCallback(function (fn, waitTimeMs) {
+        clearTimeouts();
+        timeout.current = setTimeout(fn, waitTimeMs);
+    }, []);
+    /**
+     * Clear timeout on loss of scope.
+     */
+    useEffect(function () {
+        return function () { return clearTimeouts(); };
+    }, []);
+    return invoke;
+};
+
+/**
+ * Defers state change up to a minimum time since last state change.
+ */
+var useStateDeferred = function (initialValue) {
+    var startTime = useRef(0);
+    var timeoutHook = useTimeoutHook();
+    var _a = useState(initialValue), value = _a[0], _setValue = _a[1];
+    var setValue = useCallback(function (newValue) {
+        startTime.current = Date.now();
+        _setValue(newValue);
+    }, []);
+    var setValueDeferred = useCallback(function (newValue, minimumWaitTimeMs) {
+        var waitTimeMs = Math.max(minimumWaitTimeMs - (Date.now() - startTime.current), 0);
+        timeoutHook(function () { return _setValue(newValue); }, waitTimeMs);
+    }, [timeoutHook]);
+    return [value, setValue, setValueDeferred];
+};
+
+// Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
+var minimumInProgressTimeMs = 950;
+var ActionButton = function (_a) {
+    var _b;
+    var _c;
+    var icon = _a.icon, name = _a.name, inProgressName = _a.inProgressName, dataTestId = _a.dataTestId, inProgress = _a.inProgress, className = _a.className, title = _a.title, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? "sm" : _d;
+    var lastInProgress = usePrevious(inProgress !== null && inProgress !== void 0 ? inProgress : false);
+    var _e = useStateDeferred(!!inProgress), localInProgress = _e[0], setLocalInProgress = _e[1], setLocalInProgressDeferred = _e[2];
+    useEffect(function () {
+        if (inProgress == lastInProgress)
+            return;
+        inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
+    }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
+    return (jsxs(LuiButton, __assign({ "data-testid": dataTestId, type: "button", level: "tertiary", title: title !== null && title !== void 0 ? title : name, "aria-label": name, className: clsx("lui-button-icon", "ActionButton", className, localInProgress && "ActionButton-inProgress"), size: "lg", onClick: onClick, disabled: localInProgress }, { children: [localInProgress ? (jsx(LuiMiniSpinner, { size: 16, divProps: (_b = {
+                        "data-testid": "loading-spinner",
+                        style: { padding: 0, margin: 0, paddingRight: 8 },
+                        role: "status"
+                    },
+                    _b["aria-label"] = "Loading",
+                    _b) })) : (jsx(LuiIcon, { name: icon, alt: name, size: size })), jsxs("span", __assign({ className: "ActionButton-minimalArea" }, { children: [jsx("span", __assign({ className: "ActionButton-minimalAreaDisplay" }, { children: (_c = (localInProgress ? inProgressName : name)) !== null && _c !== void 0 ? _c : name })), jsx("span", __assign({ className: "ActionButton-minimalAreaExpand" }, { children: name }))] }))] })));
+};
+
+export { ActionButton, ComponentLoadingWrapper, ControlledMenu, FocusableItem, GenericCellEditorComponent, GenericMultiEditCellClass, Grid, GridCell, GridCellRenderer, GridContext, GridContextProvider, GridHeaderSelect, GridIcon, GridLoadableCell, GridPopoutEditMultiSelect, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridRendererGenericCell, GridSubComponentTextArea, GridUpdatingContext, GridUpdatingContextProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuItem, MenuRadioGroup, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionValueFormatter, bearingNumberParser, bearingStringValidator, bearingValueFormatter, convertDDToDMS, hasParentClass, isFloat, isNotEmpty, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait };
 //# sourceMappingURL=step-ag-grid.esm.js.map