@linzjs/step-ag-grid 2.1.2 → 2.2.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "keywords": [
     "aggrid",
     "ag-grid",
@@ -13,7 +13,7 @@
     "react-component"
   ],
   "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "typings": "dist/src/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",
   "files": [
     "dist",
@@ -91,9 +91,10 @@
     "@storybook/react": "6.5.13",
     "@storybook/test-runner": "^0.9.0",
     "@storybook/testing-library": "^0.0.13",
+    "@testing-library/dom": "^8.19.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^13.5.0",
     "@types/debounce-promise": "^3.1.5",
     "@types/jest": "^29.2.2",
     "@types/lodash-es": "^4.17.6",
@@ -105,6 +106,7 @@
     "babel-jest": "^29.2.2",
     "babel-preset-react-app": "^10.0.1",
     "chromatic": "^6.11.4",
+    "conventional-changelog-conventionalcommits": "^5.0.0",
     "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",

package/src/components/Grid.tsx

@@ -5,11 +5,11 @@ import { CellClickedEvent, ColDef } from "ag-grid-community";
 import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
 import { difference, last, xorBy } from "lodash-es";
-import { GridContext } from "@contexts/GridContext";
+import { GridContext } from "../contexts/GridContext";
 import { usePostSortRowsHook } from "./PostSortRowsHook";
-import { isNotEmpty } from "@utils/util";
+import { isNotEmpty } from "../utils/util";
 import { GridHeaderSelect } from "./gridHeader/GridHeaderSelect";
-import { GridUpdatingContext } from "@contexts/GridUpdatingContext";
+import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
 
 export interface GridBaseRow {
   id: string | number;
@@ -28,6 +28,7 @@ export interface GridProps {
   columnDefs: GridOptions["columnDefs"];
   rowData: GridOptions["rowData"];
   noRowsOverlayText?: string;
+  postSortRows?: GridOptions["postSortRows"];
 }
 
 /**
@@ -264,7 +265,7 @@ export const Grid = (params: GridProps): JSX.Element => {
         noRowsOverlayComponent={noRowsOverlayComponent}
         onGridReady={onGridReady}
         onSortChanged={ensureSelectedRowIsVisible}
-        postSortRows={postSortRows}
+        postSortRows={params.postSortRows ?? postSortRows}
         onSelectionChanged={synchroniseExternalStateToGridSelection}
       />
     </div>

package/src/components/GridCell.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useContext } from "react";
 import { GridBaseRow } from "./Grid";
-import { GridUpdatingContext } from "@contexts/GridUpdatingContext";
+import { GridUpdatingContext } from "../contexts/GridUpdatingContext";
 import { GenericMultiEditCellClass } from "./GenericCellClass";
 import {
   GenericCellColDef,
@@ -9,10 +9,10 @@ import {
 } from "./gridRender/GridRenderGenericCell";
 import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
 import { GridLoadableCell } from "./GridLoadableCell";
-import { GridIcon } from "@components/GridIcon";
+import { GridIcon } from "../components/GridIcon";
 import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
-import { GridPopoverContext } from "@contexts/GridPopoverContext";
-import { GridPopoverContextProvider } from "@contexts/GridPopoverContextProvider";
+import { GridPopoverContext } from "../contexts/GridPopoverContext";
+import { GridPopoverContextProvider } from "../contexts/GridPopoverContextProvider";
 
 export interface GenericCellEditorProps<E> {
   multiEdit?: boolean;
@@ -49,9 +49,9 @@ export interface ColDefT<RowType extends GridBaseRow> extends ColDef {
 }
 
 /*
- * For editing a text area.
+ * All cells should use this
  */
-export const GridCell = <RowType extends GridBaseRow, Props>(
+export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCommon>(
   props: GenericCellColDef<RowType>,
   custom?: {
     multiEdit?: boolean;
@@ -120,7 +120,7 @@ const GenericCellEditorComponent3 = (props: ICellEditorParams & { editor: (props
 
   return (
     <>
-      <div>{colDef.cellRenderer ? <colDef.cellRenderer {...props} /> : props.value}</div>
+      {<colDef.cellRenderer {...props} />}
       {props?.editor && <props.editor {...cellEditorParams} {...propsRef.current} />}
     </>
   );

package/src/components/GridPopoverHook.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import { GridContext } from "@contexts/GridContext";
+import { GridContext } from "../contexts/GridContext";
 import { GridBaseRow } from "./Grid";
-import { ControlledMenu } from "@react-menu3";
-import { GridPopoverContext } from "@contexts/GridPopoverContext";
+import { ControlledMenu } from "../react-menu3";
+import { GridPopoverContext } from "../contexts/GridPopoverContext";
 
 export interface GridPopoverHookProps<RowType> {
   className: string | undefined;

package/src/components/PostSortRowsHook.ts

@@ -53,8 +53,13 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
 
       const hasNewRows = () => nodes.some((row) => previousRowSortIndex[row.data.id] == null);
 
-      const sortIsStale = () =>
-        !hasNewRows() && nodes.some((row, index) => ![null, index].includes(previousRowSortIndex[row.data.id] ?? null));
+      const sortIsStale = () => {
+        // 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((node, index) => previousRowSortIndex[node.data.id] != index);
+      };
 
       const sortNodesByPreviousSort = () =>
         nodes.sort(
@@ -115,6 +120,7 @@ export const usePostSortRowsHook = ({ setStaleGrid }: PostSortRowsHookProps) =>
           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);
           }

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,10 +1,10 @@
 import "../../styles/GridFormDropDown.scss";
 
-import { MenuItem, MenuDivider, FocusableItem, MenuHeader } from "@react-menu3";
+import { MenuItem, MenuDivider, FocusableItem, MenuHeader } from "../../react-menu3";
 import { useCallback, useContext, useEffect, useRef, useState, KeyboardEvent } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { GridContext } from "@contexts/GridContext";
+import { GridContext } from "../../contexts/GridContext";
 import { delay } from "lodash-es";
 import debounce from "debounce-promise";
 import { CellEditorCommon, CellParams } from "../GridCell";

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -3,9 +3,9 @@ import "../../styles/GridFormEditBearing.scss";
 import { useCallback, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
-import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "@utils/bearing";
+import { bearingNumberParser, bearingStringValidator, convertDDToDMS } from "../../utils/bearing";
 import { useGridPopoverHook } from "../GridPopoverHook";
-import { CellEditorCommon, CellParams } from "@components/GridCell";
+import { CellEditorCommon, CellParams } from "../GridCell";
 
 export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeHolder?: string;

package/src/components/gridForm/GridFormMessage.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { GridBaseRow } from "../Grid";
 import { useGridPopoverHook } from "../GridPopoverHook";
-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/src/components/gridForm/GridFormMultiSelect.tsx

@@ -1,14 +1,14 @@
 import "../../styles/GridFormMultiSelect.scss";
 
-import { MenuItem, MenuDivider, FocusableItem } from "@react-menu3";
+import { MenuItem, MenuDivider, FocusableItem } from "../../react-menu3";
 import { useCallback, useEffect, useRef, useState, KeyboardEvent } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { delay, fromPairs } from "lodash-es";
 import { LuiCheckboxInput } from "@linzjs/lui";
 import { useGridPopoverHook } from "../GridPopoverHook";
-import { MenuSeparatorString } from "@components/gridForm/GridFormDropDown";
-import { CellEditorCommon, CellParams } from "@components/GridCell";
+import { MenuSeparatorString } from "./GridFormDropDown";
+import { CellEditorCommon, CellParams } from "../GridCell";
 import { ClickEvent } from "../../react-menu3/types";
 
 interface MultiFinalSelectOption<ValueType> {

package/src/components/gridForm/GridFormPopoutMenu.tsx

@@ -1,10 +1,10 @@
 import { GridBaseRow } from "../Grid";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import { GridContext } from "@contexts/GridContext";
+import { GridContext } from "../../contexts/GridContext";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
-import { MenuDivider, MenuItem } from "@react-menu3";
+import { MenuDivider, MenuItem } from "../../react-menu3";
 import { useGridPopoverHook } from "../GridPopoverHook";
-import { CellEditorCommon, CellParams } from "@components/GridCell";
+import { CellEditorCommon, CellParams } from "../GridCell";
 
 export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
   options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;

package/src/components/gridForm/GridFormTextArea.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 import { TextAreaInput } from "../../lui/TextAreaInput";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
-import { CellEditorCommon, CellParams } from "@components/GridCell";
+import { CellEditorCommon, CellParams } from "../GridCell";
 
 export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeholder?: string;

package/src/components/gridForm/GridFormTextInput.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
-import { CellEditorCommon, CellParams } from "@components/GridCell";
+import { CellEditorCommon, CellParams } from "../GridCell";
 
 export interface GridFormTextInputProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeholder?: string;

package/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts

@@ -1,8 +1,7 @@
-import { GenericMultiEditCellClass } from "../GenericCellClass";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormMultiSelect, GridFormMultiSelectProps } from "../gridForm/GridFormMultiSelect";
-import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 
 export const GridPopoutEditMultiSelect = <RowType extends GridBaseRow, ValueType>(
   colDef: GenericCellColDef<RowType>,
@@ -12,7 +11,6 @@ export const GridPopoutEditMultiSelect = <RowType extends GridBaseRow, ValueType
     {
       initialWidth: 65,
       maxWidth: 150,
-      cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined,
       ...colDef,
     },
     {

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -1,9 +1,8 @@
-import { GenericMultiEditCellClass } from "../GenericCellClass";
-import { bearingCorrectionValueFormatter, bearingValueFormatter } from "@utils/bearing";
+import { bearingCorrectionValueFormatter, bearingValueFormatter } from "../../utils/bearing";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormEditBearing, GridFormEditBearingProps } from "../gridForm/GridFormEditBearing";
 import { GridBaseRow } from "../Grid";
-import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 
 export const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
@@ -14,7 +13,6 @@ export const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
       initialWidth: 65,
       maxWidth: 150,
       valueFormatter: bearingValueFormatter,
-      cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined,
       ...colDef,
     },
     {

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -1,8 +1,7 @@
-import { GenericMultiEditCellClass } from "../GenericCellClass";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormDropDown, GridFormPopoutDropDownProps } from "../gridForm/GridFormDropDown";
-import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
+import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 
 export const GridPopoverEditDropDown = <RowType extends GridBaseRow, ValueType>(
   colDef: GenericCellColDef<RowType>,
@@ -12,7 +11,6 @@ export const GridPopoverEditDropDown = <RowType extends GridBaseRow, ValueType>(
     {
       initialWidth: 65,
       maxWidth: 150,
-      cellClass: props.multiEdit ? GenericMultiEditCellClass : undefined,
       ...colDef,
     },
     {

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

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

package/src/components/gridPopoverEdit/GridPopoverMessage.ts

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

package/src/components/gridPopoverEdit/GridPopoverTextArea.ts

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

package/src/components/gridPopoverEdit/GridPopoverTextInput.ts

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

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -1,13 +1,13 @@
 import "../../styles/GridRenderGenericCell.scss";
 
 import { useContext } from "react";
-import { GridUpdatingContext } from "@contexts/GridUpdatingContext";
+import { GridUpdatingContext } from "../../contexts/GridUpdatingContext";
 import { GridLoadableCell } from "../GridLoadableCell";
 import { GridIcon } from "../GridIcon";
 import { ColDef, ICellRendererParams } from "ag-grid-community";
 import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridBaseRow } from "../Grid";
-import { ColDefT } from "@components/GridCell";
+import { ColDefT } from "../GridCell";
 
 export interface RowICellRendererParams<RowType extends GridBaseRow> extends ICellRendererParams {
   data: RowType;

package/src/components/gridRender/GridRenderPopoutMenuCell.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { ColDef, ICellRendererParams } from "ag-grid-community";
-import { GridUpdatingContext } from "@contexts/GridUpdatingContext";
+import { GridUpdatingContext } from "../../contexts/GridUpdatingContext";
 import { GridLoadableCell } from "../GridLoadableCell";
 import { LuiIcon } from "@linzjs/lui";
 import { Column } from "ag-grid-community/dist/lib/entities/column";

package/src/contexts/GridContext.tsx

@@ -1,6 +1,6 @@
 import { createContext } from "react";
 import { GridApi } from "ag-grid-community";
-import { GridBaseRow } from "@components/Grid";
+import { GridBaseRow } from "../components/Grid";
 
 export interface GridContextType {
   gridReady: () => boolean;

package/src/contexts/GridContextProvider.tsx

@@ -2,9 +2,9 @@ import { ReactElement, ReactNode, useContext, useRef } from "react";
 import { GridApi, RowNode } from "ag-grid-community";
 import { GridContext } from "./GridContext";
 import { delay, difference, isEmpty, last, sortBy } from "lodash-es";
-import { isNotEmpty } from "@utils/util";
+import { isNotEmpty } from "../utils/util";
 import { GridUpdatingContext } from "./GridUpdatingContext";
-import { GridBaseRow } from "@components/Grid";
+import { GridBaseRow } from "../components/Grid";
 
 interface GridContextProps {
   children: ReactNode;

package/src/contexts/GridPopoverContextProvider.tsx

@@ -1,9 +1,9 @@
 import { ReactNode, RefObject, useCallback, useContext, useRef, useState } from "react";
 import { GridPopoverContext, PropsType } from "./GridPopoverContext";
 import { ICellEditorParams } from "ag-grid-community";
-import { GridContext } from "@contexts/GridContext";
+import { GridContext } from "./GridContext";
 import { sortBy } from "lodash-es";
-import { GridBaseRow } from "@components/Grid";
+import { GridBaseRow } from "../components/Grid";
 
 interface GridPopoverContextProps {
   children: ReactNode;

package/src/index.ts

@@ -1,38 +1,40 @@
-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 { GridSubComponentTextArea } from "./components/GridSubComponentTextArea";
+
+export * from "./lui/ActionButton";
 
-export * from "@utils/bearing";
-export * from "@utils/util";
+export * from "./utils/bearing";
+export * from "./utils/util";

package/src/lui/ActionButton.scss

@@ -0,0 +1,32 @@
+@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
+
+.ActionButton {
+  display: flex;
+  align-items: center;
+}
+
+.ActionButton .LuiIcon {
+  margin: 0 4px !important;
+}
+
+.ActionButton-minimalArea {
+  position: relative;
+}
+
+.ActionButton-minimalAreaDisplay {
+  position: absolute;
+}
+
+.ActionButton-minimalAreaExpand {
+  visibility: hidden;
+}
+
+.ActionButton-inProgress {
+  cursor: progress;
+  color: #007198 !important;
+  background-color: colors.$polar !important;
+
+  svg * {
+    fill: transparent !important;
+  }
+}

package/src/lui/ActionButton.tsx

@@ -0,0 +1,76 @@
+import "./ActionButton.scss";
+
+import clsx from "clsx";
+import { useEffect } from "react";
+import { LuiButton, LuiIcon, LuiMiniSpinner } from "@linzjs/lui";
+import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+import { usePrevious } from "./reactUtils";
+import { useStateDeferred } from "./stateDeferredHook";
+
+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;
+}
+
+// Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
+const minimumInProgressTimeMs = 950;
+
+export const ActionButton = ({
+  icon,
+  name,
+  inProgressName,
+  dataTestId,
+  inProgress,
+  className,
+  title,
+  onClick,
+  size = "sm",
+}: ActionButtonProps): JSX.Element => {
+  const lastInProgress = usePrevious(inProgress ?? false);
+  const [localInProgress, setLocalInProgress, setLocalInProgressDeferred] = useStateDeferred<boolean>(!!inProgress);
+
+  useEffect(() => {
+    if (inProgress == lastInProgress) return;
+    inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
+  }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
+
+  return (
+    <LuiButton
+      data-testid={dataTestId}
+      type={"button"}
+      level={"tertiary"}
+      title={title ?? name}
+      aria-label={name}
+      className={clsx("lui-button-icon", "ActionButton", className, localInProgress && "ActionButton-inProgress")}
+      size={"lg"}
+      onClick={onClick}
+      disabled={localInProgress}
+    >
+      {localInProgress ? (
+        <LuiMiniSpinner
+          size={16}
+          divProps={{
+            "data-testid": "loading-spinner",
+            style: { padding: 0, margin: 0, paddingRight: 8 },
+            role: "status",
+            ["aria-label"]: "Loading",
+          }}
+        />
+      ) : (
+        <LuiIcon name={icon} alt={name} size={size} />
+      )}
+      <span className={"ActionButton-minimalArea"}>
+        <span className={"ActionButton-minimalAreaDisplay"}>{(localInProgress ? inProgressName : name) ?? name}</span>
+        {/* This makes sure the button expands to fill maximum length text at all times */}
+        <span className={"ActionButton-minimalAreaExpand"}>{name}</span>
+      </span>
+    </LuiButton>
+  );
+};

package/src/lui/reactUtils.test.tsx

@@ -0,0 +1,47 @@
+import { usePrevious } from "./reactUtils";
+import { useEffect, useState } from "react";
+import { act, render } from "@testing-library/react";
+import { screen } from "@testing-library/dom";
+
+interface WrapperProps {
+  value: boolean;
+}
+
+let extPrevious: boolean | undefined = undefined;
+
+const UsePreviousWrapper = ({ value }: WrapperProps): JSX.Element => {
+  const previous = usePrevious<boolean>(value);
+  useEffect(() => {
+    extPrevious = previous;
+  }, [previous]);
+
+  return <div />;
+};
+
+const TestComponent = (): JSX.Element => {
+  const [value, setValue] = useState(false);
+
+  const toggleValue = () => setValue((value) => !value);
+
+  return (
+    <>
+      <button onClick={toggleValue}>Change value</button>
+      <UsePreviousWrapper value={value} />
+    </>
+  );
+};
+
+describe("usePrevious", () => {
+  test("usePrevious", async () => {
+    render(<TestComponent />);
+    const button = await screen.findByText("Change value");
+
+    expect(extPrevious).toBeUndefined();
+
+    act(() => button.click());
+    expect(extPrevious).toBe(false);
+
+    act(() => button.click());
+    expect(extPrevious).toBe(true);
+  });
+});