From 78248228aef52c943e8442fb405a1c0ffae9ede0 Mon Sep 17 00:00:00 2001
From: Matt Dawson <mdawson@linz.govt.nz>
Date: Thu, 27 Oct 2022 08:59:04 +1300
Subject: [PATCH 1/4] Exports

---
 index.ts                                      | 39 ++++++++++++++++++-
 src/components/Grid.tsx                       |  2 +-
 src/components/GridCell.tsx                   |  4 +-
 ...PostSortRowHook.ts => PostSortRowsHook.ts} |  0
 src/components/gridForm/GridFormTextArea.tsx  |  2 +-
 .../GridPopoutEditMultiSelect.ts              |  4 +-
 .../gridPopoverEdit/GridPopoverEditBearing.ts |  4 +-
 .../GridPopoverEditDropDown.ts                |  6 +--
 .../gridRender/GridRenderGenericCell.tsx      |  2 +-
 src/lui/{TextArea.tsx => TextAreaInput.tsx}   |  0
 .../GridPopoutEditDropDown.stories.tsx        | 10 ++---
 11 files changed, 54 insertions(+), 19 deletions(-)
 rename src/components/{PostSortRowHook.ts => PostSortRowsHook.ts} (100%)
 rename src/lui/{TextArea.tsx => TextAreaInput.tsx} (100%)

diff --git a/index.ts b/index.ts
index c3758dbc..5e06b829 100644
--- a/index.ts
+++ b/index.ts
@@ -1,5 +1,40 @@
-export type { GridBaseRow } from "./src/components/Grid";
-export { Grid } from "./src/components/Grid";
+export { UpdatingContext } from "./src/contexts/UpdatingContext";
 export { UpdatingContextProvider } from "./src/contexts/UpdatingContextProvider";
+export { GridContext } from "./src/contexts/GridContext";
 export { GridContextProvider } from "./src/contexts/GridContextProvider";
+
+export type { GridBaseRow } from "./src/components/Grid";
+export { Grid } from "./src/components/Grid";
 export { GridCell } from "./src/components/GridCell";
+export { GridIcon } from "./src/components/GridIcon";
+export { ComponentLoadingWrapper } from "./src/components/ComponentLoadingWrapper";
+export { GenericMultiEditCellClass } from "./src/components/GenericCellClass";
+export { GridLoadableCell } from "./src/components/GridLoadableCell";
+export { useGridPopoutHook } from "./src/components/GridPopoutHook";
+export { usePostSortRowsHook } from "./src/components/PostSortRowsHook";
+
+export { GridRendererGenericCell } from "./src/components/gridRender/GridRenderGenericCell";
+export { GridRenderPopoutMenuCell } from "./src/components/gridRender/GridRenderPopoutMenuCell";
+
+export { GridPopoutEditMultiSelect } from "./src/components/gridPopoverEdit/GridPopoutEditMultiSelect";
+export { GridPopoutMenu } from "./src/components/gridPopoverEdit/GridPopoutMenu";
+export { GridPopoverEditBearing } from "./src/components/gridPopoverEdit/GridPopoverEditBearing";
+export { GridPopoverEditDropDown } from "./src/components/gridPopoverEdit/GridPopoverEditDropDown";
+export { GridPopoverMessage} from "./src/components/gridPopoverEdit/GridPopoverMessage";
+
+export { GridHeaderSelect } from "./src/components/gridHeader/GridHeaderSelect";
+
+export { GridFormEditBearing } from "./src/components/gridForm/GridFormEditBearing";
+export { GridFormDropDown } from "./src/components/gridForm/GridFormDropDown";
+export { GridFormMessage } from "./src/components/gridForm/GridFormMessage";
+export { GridFormMultiSelect } from "./src/components/gridForm/GridFormMultiSelect";
+export { GridFormPopoutMenu } from "./src/components/gridForm/GridFormPopoutMenu";
+export { GridFormTextArea } from "./src/components/gridForm/GridFormTextArea";
+export { GridFormTextInput } from "./src/components/gridForm/GridFormTextInput";
+
+export { TextAreaInput } from "./src/lui/TextAreaInput";
+export { TextInputFormatted } from "./src/lui/TextInputFormatted";
+
+export * from "./src/utils/bearing";
+export * from "./src/utils/util";
+
diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index fd8cfe06..c573ffa6 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -9,7 +9,7 @@ import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-commun
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
 import { difference, last, xorBy } from "lodash-es";
 import { GridContext } from "../contexts/GridContext";
-import { usePostSortRowsHook } from "./PostSortRowHook";
+import { usePostSortRowsHook } from "./PostSortRowsHook";
 import { isNotEmpty } from "../utils/util";
 import { GridHeaderSelect } from "./gridHeader/GridHeaderSelect";
 import { UpdatingContext } from "../contexts/UpdatingContext";
diff --git a/src/components/GridCell.tsx b/src/components/GridCell.tsx
index 41858c1b..9ae5d1c3 100644
--- a/src/components/GridCell.tsx
+++ b/src/components/GridCell.tsx
@@ -2,7 +2,7 @@ import { useCallback, useContext, useMemo, useState } from "react";
 import { GridBaseRow } from "./Grid";
 import { GridContext } from "../contexts/GridContext";
 import { GenericMultiEditCellClass } from "./GenericCellClass";
-import { GenericCellRendererParams, GridGenericCellRendererComponent } from "./gridRender/GridRenderGenericCell";
+import { GenericCellRendererParams, GridRendererGenericCell } from "./gridRender/GridRenderGenericCell";
 import { ColDef, ICellEditorParams } from "ag-grid-community";
 
 export interface GridFormProps<RowType extends GridBaseRow> {
@@ -35,7 +35,7 @@ export const GridCell = <RowType extends GridBaseRow, FormProps extends GenericC
   props: GenericCellEditorColDef<RowType, FormProps>,
 ): ColDef => {
   return {
-    cellRenderer: props.cellRenderer ?? GridGenericCellRendererComponent,
+    cellRenderer: props.cellRenderer ?? GridRendererGenericCell,
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
     ...(props.cellEditorParams && {
diff --git a/src/components/PostSortRowHook.ts b/src/components/PostSortRowsHook.ts
similarity index 100%
rename from src/components/PostSortRowHook.ts
rename to src/components/PostSortRowsHook.ts
diff --git a/src/components/gridForm/GridFormTextArea.tsx b/src/components/gridForm/GridFormTextArea.tsx
index fba2084b..01469a4a 100644
--- a/src/components/gridForm/GridFormTextArea.tsx
+++ b/src/components/gridForm/GridFormTextArea.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
-import { TextAreaInput } from "../../lui/TextArea";
+import { TextAreaInput } from "../../lui/TextAreaInput";
 import { useGridPopoutHook } from "../GridPopoutHook";
 import { GridBaseRow } from "../Grid";
 
diff --git a/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts b/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts
index 092e8292..9ee385f1 100644
--- a/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts
+++ b/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts
@@ -1,5 +1,5 @@
 import { GenericMultiEditCellClass } from "../GenericCellClass";
-import { GenericCellColDef, GridGenericCellRendererComponent } from "../gridRender/GridRenderGenericCell";
+import { GenericCellColDef, GridRendererGenericCell } from "../gridRender/GridRenderGenericCell";
 import { GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormMultiSelect, GridFormMultiSelectProps } from "../gridForm/GridFormMultiSelect";
@@ -10,7 +10,7 @@ export const GridPopoutEditMultiSelect = <RowType extends GridBaseRow, ValueType
   GridCell<RowType, GridFormMultiSelectProps<RowType, ValueType>>({
     initialWidth: 65,
     maxWidth: 150,
-    cellRenderer: GridGenericCellRendererComponent,
+    cellRenderer: GridRendererGenericCell,
     cellClass: colDef.cellEditor?.multiEdit ? GenericMultiEditCellClass : undefined,
     ...colDef,
     ...(colDef?.cellEditorParams && {
diff --git a/src/components/gridPopoverEdit/GridPopoverEditBearing.ts b/src/components/gridPopoverEdit/GridPopoverEditBearing.ts
index da2f4d3c..3873405a 100644
--- a/src/components/gridPopoverEdit/GridPopoverEditBearing.ts
+++ b/src/components/gridPopoverEdit/GridPopoverEditBearing.ts
@@ -1,5 +1,5 @@
 import { GenericMultiEditCellClass } from "../GenericCellClass";
-import { GenericCellColDef, GridGenericCellRendererComponent } from "../gridRender/GridRenderGenericCell";
+import { GenericCellColDef, GridRendererGenericCell } from "../gridRender/GridRenderGenericCell";
 import { bearingValueFormatter } from "../../utils/bearing";
 import { GridCell } from "../GridCell";
 import { GridFormEditBearing, GridFormEditBearingProps } from "../gridForm/GridFormEditBearing";
@@ -12,7 +12,7 @@ export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
     initialWidth: 65,
     maxWidth: 150,
     valueFormatter: bearingValueFormatter,
-    cellRenderer: GridGenericCellRendererComponent,
+    cellRenderer: GridRendererGenericCell,
     cellClass: colDef.cellEditorParams?.multiEdit ? GenericMultiEditCellClass : undefined,
     ...colDef,
     ...(colDef?.cellEditorParams && {
diff --git a/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts b/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts
index 792651ba..b69dbca4 100644
--- a/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts
+++ b/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts
@@ -1,16 +1,16 @@
 import { GenericMultiEditCellClass } from "../GenericCellClass";
-import { GenericCellColDef, GridGenericCellRendererComponent } from "../gridRender/GridRenderGenericCell";
+import { GenericCellColDef, GridRendererGenericCell } from "../gridRender/GridRenderGenericCell";
 import { GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormDropDown, GridFormPopoutDropDownProps } from "../gridForm/GridFormDropDown";
 
-export const GridPopoutEditDropDown = <RowType extends GridBaseRow, ValueType>(
+export const GridPopoverEditDropDown = <RowType extends GridBaseRow, ValueType>(
   colDef: GenericCellColDef<RowType, GridFormPopoutDropDownProps<RowType, ValueType>>,
 ) =>
   GridCell<RowType, GridFormPopoutDropDownProps<RowType, ValueType>>({
     initialWidth: 65,
     maxWidth: 150,
-    cellRenderer: GridGenericCellRendererComponent,
+    cellRenderer: GridRendererGenericCell,
     cellClass: colDef.cellEditor?.multiEdit ? GenericMultiEditCellClass : undefined,
     ...colDef,
     ...(colDef?.cellEditorParams && {
diff --git a/src/components/gridRender/GridRenderGenericCell.tsx b/src/components/gridRender/GridRenderGenericCell.tsx
index 3612e79a..bb464f35 100644
--- a/src/components/gridRender/GridRenderGenericCell.tsx
+++ b/src/components/gridRender/GridRenderGenericCell.tsx
@@ -20,7 +20,7 @@ export interface GenericCellRendererParams {
   info?: (props: ICellRendererParams) => string | boolean | undefined;
 }
 
-export const GridGenericCellRendererComponent = (props: ICellRendererParams): JSX.Element => {
+export const GridRendererGenericCell = (props: ICellRendererParams): JSX.Element => {
   const { checkUpdating } = useContext(UpdatingContext);
 
   const cellRendererParams = props.colDef?.cellRendererParams as GenericCellRendererParams | undefined;
diff --git a/src/lui/TextArea.tsx b/src/lui/TextAreaInput.tsx
similarity index 100%
rename from src/lui/TextArea.tsx
rename to src/lui/TextAreaInput.tsx
diff --git a/src/stories/components/GridPopoutEditDropDown.stories.tsx b/src/stories/components/GridPopoutEditDropDown.stories.tsx
index d2549b8c..e3239e4a 100644
--- a/src/stories/components/GridPopoutEditDropDown.stories.tsx
+++ b/src/stories/components/GridPopoutEditDropDown.stories.tsx
@@ -16,7 +16,7 @@ import { UpdatingContextProvider } from "../../contexts/UpdatingContextProvider"
 import { ColDef } from "ag-grid-community";
 import { wait } from "../../utils/util";
 import { GridCell } from "../../components/GridCell";
-import { GridPopoutEditDropDown } from "../../components/gridPopoverEdit/GridPopoverEditDropDown";
+import { GridPopoverEditDropDown } from "../../components/gridPopoverEdit/GridPopoverEditDropDown";
 
 export default {
   title: "Components / Grids",
@@ -85,7 +85,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
             multiEdit: false,
           },
         }),
-        GridPopoutEditDropDown<ITestRow, ITestRow["position2"]>({
+        GridPopoverEditDropDown<ITestRow, ITestRow["position2"]>({
           field: "position2",
           maxWidth: 100,
           headerName: "Multi-edit",
@@ -102,7 +102,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
             ],
           },
         }),
-        GridPopoutEditDropDown<ITestRow, ITestRow["position3"]>({
+        GridPopoverEditDropDown<ITestRow, ITestRow["position3"]>({
           field: "position3",
           initialWidth: 65,
           maxWidth: 150,
@@ -116,7 +116,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
             },
           },
         }),
-        GridPopoutEditDropDown<ITestRow, ITestRow["position"]>({
+        GridPopoverEditDropDown<ITestRow, ITestRow["position"]>({
           field: "position",
           initialWidth: 65,
           maxWidth: 150,
@@ -135,7 +135,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
             multiEdit: false,
           },
         }),
-        GridPopoutEditDropDown<ITestRow, ITestRow["position3"]>({
+        GridPopoverEditDropDown<ITestRow, ITestRow["position3"]>({
           field: "position3",
           initialWidth: 65,
           maxWidth: 150,

From 58def226f335394dde8b03ca7d540c5a2b64df52 Mon Sep 17 00:00:00 2001
From: Matt Dawson <mdawson@linz.govt.nz>
Date: Thu, 27 Oct 2022 09:40:02 +1300
Subject: [PATCH 2/4] Forced return values, popout styling, exports

---
 index.ts                                      |  3 +-
 rollup.config.ts                              | 34 ++++++-------
 src/components/Grid.scss                      |  8 +++
 src/components/GridPopoutHook.tsx             |  1 +
 src/components/gridForm/GridFormMessage.tsx   |  4 +-
 .../gridForm/GridFormMultiSelect.tsx          |  4 +-
 .../gridForm/GridFormPopoutMenu.tsx           |  4 +-
 src/components/gridForm/GridFormTextArea.tsx  |  1 +
 src/components/gridForm/GridFormTextInput.tsx |  1 +
 src/lui/TextAreaInput.tsx                     |  4 +-
 src/lui/TextInputFormatted.tsx                | 13 +++--
 src/utils/bearing.ts                          |  5 +-
 tsconfig.json                                 | 49 +++++++++++--------
 13 files changed, 79 insertions(+), 52 deletions(-)

diff --git a/index.ts b/index.ts
index 5e06b829..eb120038 100644
--- a/index.ts
+++ b/index.ts
@@ -20,7 +20,7 @@ export { GridPopoutEditMultiSelect } from "./src/components/gridPopoverEdit/Grid
 export { GridPopoutMenu } from "./src/components/gridPopoverEdit/GridPopoutMenu";
 export { GridPopoverEditBearing } from "./src/components/gridPopoverEdit/GridPopoverEditBearing";
 export { GridPopoverEditDropDown } from "./src/components/gridPopoverEdit/GridPopoverEditDropDown";
-export { GridPopoverMessage} from "./src/components/gridPopoverEdit/GridPopoverMessage";
+export { GridPopoverMessage } from "./src/components/gridPopoverEdit/GridPopoverMessage";
 
 export { GridHeaderSelect } from "./src/components/gridHeader/GridHeaderSelect";
 
@@ -37,4 +37,3 @@ export { TextInputFormatted } from "./src/lui/TextInputFormatted";
 
 export * from "./src/utils/bearing";
 export * from "./src/utils/util";
-
diff --git a/rollup.config.ts b/rollup.config.ts
index 501f3ca5..381fcbf6 100644
--- a/rollup.config.ts
+++ b/rollup.config.ts
@@ -1,28 +1,28 @@
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import typescript from 'rollup-plugin-typescript2';
-import postcss from 'rollup-plugin-postcss';
-import copy from 'rollup-plugin-copy';
-import json from '@rollup/plugin-json';
+// @ts-ignore
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "rollup-plugin-typescript2";
+import postcss from "rollup-plugin-postcss";
+import copy from "rollup-plugin-copy";
+import json from "@rollup/plugin-json";
 
-const packageJson = require('./package.json');
-const outputDir = 'dist';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const packageJson = require("./package.json");
+const outputDir = "dist";
 
 export default {
-  input: 'index.ts',
-  external: [
-    'ag-grid-community',
-  ],
+  input: "index.ts",
+  external: ["ag-grid-community"],
   output: [
     {
       file: packageJson.main,
-      format: 'cjs',
+      format: "cjs",
       sourcemap: true,
     },
     {
       file: packageJson.module,
-      format: 'esm',
+      format: "esm",
       sourcemap: true,
     },
   ],
@@ -36,11 +36,11 @@ export default {
     copy({
       targets: [
         {
-          src: 'src/scss',
+          src: "src/scss",
           dest: `${outputDir}`,
         },
         {
-          src: 'src/assets',
+          src: "src/assets",
           dest: `${outputDir}`,
         },
       ],
diff --git a/src/components/Grid.scss b/src/components/Grid.scss
index d4fcef6e..2f920020 100644
--- a/src/components/Grid.scss
+++ b/src/components/Grid.scss
@@ -28,3 +28,11 @@
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+
+.Grid-popoverContainer {
+  padding: 8px 12px;
+}
+
+.Grid-popoverContainerList {
+  padding: 4px 4px;
+}
diff --git a/src/components/GridPopoutHook.tsx b/src/components/GridPopoutHook.tsx
index 3f478900..f9af3cf0 100644
--- a/src/components/GridPopoutHook.tsx
+++ b/src/components/GridPopoutHook.tsx
@@ -72,6 +72,7 @@ export const useGridPopoutHook = <RowType extends GridBaseRow>(
         document.removeEventListener("click", handleScreenMouseEvent, true);
       };
     }
+    return () => {};
   }, [handleScreenMouseDown, handleScreenMouseEvent, isOpen]);
 
   const popoutWrapper = useCallback(
diff --git a/src/components/gridForm/GridFormMessage.tsx b/src/components/gridForm/GridFormMessage.tsx
index 825101c7..4ed83a75 100644
--- a/src/components/gridForm/GridFormMessage.tsx
+++ b/src/components/gridForm/GridFormMessage.tsx
@@ -26,7 +26,9 @@ export const GridFormMessage = <RowType extends GridBaseRow>(props: GridFormProp
 
   return popoutWrapper(
     <ComponentLoadingWrapper loading={message === null}>
-      <div style={{ maxWidth: 400, padding: 16 }}>{message}</div>
+      <div style={{ maxWidth: 400 }} className={"Grid-popoverContainer"}>
+        {message}
+      </div>
     </ComponentLoadingWrapper>,
   );
 };
diff --git a/src/components/gridForm/GridFormMultiSelect.tsx b/src/components/gridForm/GridFormMultiSelect.tsx
index 80730eb6..eb27c4a5 100644
--- a/src/components/gridForm/GridFormMultiSelect.tsx
+++ b/src/components/gridForm/GridFormMultiSelect.tsx
@@ -107,7 +107,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
 
   return popoutWrapper(
     <ComponentLoadingWrapper loading={!options}>
-      <>
+      <div className={"Grid-popoverContainerList"}>
         {options && formProps.filtered && (
           <>
             <FocusableItem className={"filter-item"}>
@@ -174,7 +174,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
             </>
           ),
         )}
-      </>
+      </div>
     </ComponentLoadingWrapper>,
   );
 };
diff --git a/src/components/gridForm/GridFormPopoutMenu.tsx b/src/components/gridForm/GridFormPopoutMenu.tsx
index 92efbacd..b84ea317 100644
--- a/src/components/gridForm/GridFormPopoutMenu.tsx
+++ b/src/components/gridForm/GridFormPopoutMenu.tsx
@@ -70,7 +70,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
   const { popoutWrapper } = useGridPopoutHook(props);
   return popoutWrapper(
     <ComponentLoadingWrapper loading={!filteredOptions}>
-      <>
+      <div className={"Grid-popoverContainerList"}>
         {options?.map((item, index) =>
           item.label === MenuSeparator ? (
             <MenuDivider key={`$$divider_${index}`} />
@@ -84,7 +84,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
             </MenuItem>
           ),
         )}
-      </>
+      </div>
     </ComponentLoadingWrapper>,
   );
 };
diff --git a/src/components/gridForm/GridFormTextArea.tsx b/src/components/gridForm/GridFormTextArea.tsx
index 01469a4a..46f22758 100644
--- a/src/components/gridForm/GridFormTextArea.tsx
+++ b/src/components/gridForm/GridFormTextArea.tsx
@@ -23,6 +23,7 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormPro
     if (formProps.maxlength && value.length > formProps.maxlength) {
       return `Text must be no longer than ${formProps.maxlength} characters`;
     }
+    return null;
   }, [formProps.maxlength, formProps.required, value.length]);
 
   const save = useCallback(
diff --git a/src/components/gridForm/GridFormTextInput.tsx b/src/components/gridForm/GridFormTextInput.tsx
index 86b30d1c..03b5602e 100644
--- a/src/components/gridForm/GridFormTextInput.tsx
+++ b/src/components/gridForm/GridFormTextInput.tsx
@@ -23,6 +23,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormPr
     if (formProps.maxlength && value.length > formProps.maxlength) {
       return `Text must be no longer than ${formProps.maxlength} characters`;
     }
+    return null;
   }, [formProps.maxlength, formProps.required, value.length]);
 
   const save = useCallback(
diff --git a/src/lui/TextAreaInput.tsx b/src/lui/TextAreaInput.tsx
index 29b9cbdd..342893fe 100644
--- a/src/lui/TextAreaInput.tsx
+++ b/src/lui/TextAreaInput.tsx
@@ -14,7 +14,7 @@ export interface LuiTextAreaInputProps {
   inputProps?: InputHTMLAttributes<HTMLTextAreaElement>;
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
   value: string;
-  error?: string | boolean;
+  error?: string | boolean | null;
 }
 
 export const TextAreaInput = (props: LuiTextAreaInputProps) => {
@@ -23,7 +23,7 @@ export const TextAreaInput = (props: LuiTextAreaInputProps) => {
   return (
     <div
       className={clsx(
-        "LuiTextAreaInput",
+        "LuiTextAreaInput Grid-popoverContainer",
         props.inputProps?.disabled ? "isDisabled" : "",
         props?.error ? "hasError" : "",
       )}
diff --git a/src/lui/TextInputFormatted.tsx b/src/lui/TextInputFormatted.tsx
index b7905f83..93b86ee4 100644
--- a/src/lui/TextInputFormatted.tsx
+++ b/src/lui/TextInputFormatted.tsx
@@ -8,8 +8,8 @@ import { LuiIcon } from "@linzjs/lui";
 export interface LuiTextInputProps {
   onChange?: ChangeEventHandler<HTMLInputElement>;
   inputProps?: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-  error?: string;
-  warning?: string;
+  error?: string | boolean | null;
+  warning?: string | boolean | null;
 
   className?: string;
   value: string;
@@ -21,7 +21,14 @@ export interface LuiTextInputProps {
 
 export const TextInputFormatted = (props: LuiTextInputProps): JSX.Element => {
   return (
-    <div className={clsx("LuiTextInput", props.error && "hasError", props.warning && "hasWarning", props.className)}>
+    <div
+      className={clsx(
+        "LuiTextInput Grid-popoverContainer",
+        props.error && "hasError",
+        props.warning && "hasWarning",
+        props.className,
+      )}
+    >
       <span className="LuiTextInput-inputWrapper">
         <input
           type={"text"}
diff --git a/src/utils/bearing.ts b/src/utils/bearing.ts
index 8f6c3bf7..3ae3559a 100644
--- a/src/utils/bearing.ts
+++ b/src/utils/bearing.ts
@@ -14,9 +14,9 @@ export const bearingNumberParser = (value: string): number | null => {
 };
 
 const validMaskForDmsBearing = /^(\d+)?(\.([0-5](\d([0-5](\d(\d+)?)?)?)?)?)?$/;
-export const bearingStringValidator = (value: string): string | undefined => {
+export const bearingStringValidator = (value: string): string | null => {
   value = value.trim();
-  if (value === "") return undefined;
+  if (value === "") return null;
   const match = value.match(validMaskForDmsBearing);
   if (!match) return "Bearing must be a positive number in D.MMSSS format";
   const decimalPart = match[3];
@@ -26,6 +26,7 @@ export const bearingStringValidator = (value: string): string | undefined => {
 
   const bearing = parseFloat(value);
   if (bearing >= 360) return "Bearing must be between 0 and 360 inclusive";
+  return null;
 };
 
 // Decimal-ish degrees to Degrees Minutes Seconds converter
diff --git a/tsconfig.json b/tsconfig.json
index cfbc0ede..696fb3e1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,27 +1,34 @@
 {
+  // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
+  "include": ["src", "types", "./index.ts"],
   "compilerOptions": {
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": "./",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
     "module": "esnext",
-    "moduleResolution": "node",
-    "noEmit": true,
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    // output .d.ts declaration files for consumers
+    "declaration": true,
+    // output .js.map sourcemap files for consumers
+    "sourceMap": true,
+    // match output dir to input dir. e.g. dist/index instead of dist/src/index
+    "rootDir": ".",
+    // stricter type-checking for stronger correctness. Recommended by TS
+    "strict": true,
+    // linter checks for common issues
+    "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "resolveJsonModule": true,
+    // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    // use Node's module resolution algorithm, instead of the legacy TS one
+    "moduleResolution": "node",
+    // transpile JSX to React.createElement
+    "jsx": "react-jsx",
+    // interop between ESM and CJS modules. Recommended by TS
+    "esModuleInterop": true,
+    // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
     "skipLibCheck": true,
-    "strict": true,
-    "target": "es5"
-  },
-  "include": [
-    "src"
-  ]
+    // error out if import and file system have a casing mismatch. Recommended by TS
+    "forceConsistentCasingInFileNames": true,
+    "declarationDir":"./declaration",
+  }
 }

From 8b7140e7eeeb7a7037755ce713606a639d43a7dd Mon Sep 17 00:00:00 2001
From: Matt Dawson <mdawson@linz.govt.nz>
Date: Thu, 27 Oct 2022 09:48:28 +1300
Subject: [PATCH 3/4] Bearing formatting

---
 src/components/Grid.scss                        | 2 +-
 src/components/gridForm/GridFormEditBearing.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Grid.scss b/src/components/Grid.scss
index 2f920020..3ce032b4 100644
--- a/src/components/Grid.scss
+++ b/src/components/Grid.scss
@@ -30,7 +30,7 @@
 }
 
 .Grid-popoverContainer {
-  padding: 8px 12px;
+  padding: 4px 8px;
 }
 
 .Grid-popoverContainerList {
diff --git a/src/components/gridForm/GridFormEditBearing.tsx b/src/components/gridForm/GridFormEditBearing.tsx
index 4841d69c..7745f0e6 100644
--- a/src/components/gridForm/GridFormEditBearing.tsx
+++ b/src/components/gridForm/GridFormEditBearing.tsx
@@ -41,7 +41,7 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
   const { popoutWrapper, triggerSave } = useGridPopoutHook(props, save);
 
   return popoutWrapper(
-    <div className={"GridFormEditBearing-input"}>
+    <div className={"GridFormEditBearing-input Grid-popoverContainer"}>
       <TextInputFormatted
         value={value ?? ""}
         onChange={(e) => {

From ea1f6d1da493e2751e04c905c15e287441952690 Mon Sep 17 00:00:00 2001
From: Matt Dawson <mdawson@linz.govt.nz>
Date: Thu, 27 Oct 2022 09:57:24 +1300
Subject: [PATCH 4/4] Styling

---
 src/stories/components/FormTest.scss |  8 +++++++-
 src/stories/components/FormTest.tsx  | 14 ++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/stories/components/FormTest.scss b/src/stories/components/FormTest.scss
index 8a354aeb..c1282018 100644
--- a/src/stories/components/FormTest.scss
+++ b/src/stories/components/FormTest.scss
@@ -1,4 +1,10 @@
 
-.FormTest .LuiTextInput-input {
+.FormTest {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 12px;
+}
+
+.FormTest-textInput {
   width: 100px;
 }
\ No newline at end of file
diff --git a/src/stories/components/FormTest.tsx b/src/stories/components/FormTest.tsx
index 99d31511..8f8364c7 100644
--- a/src/stories/components/FormTest.tsx
+++ b/src/stories/components/FormTest.tsx
@@ -36,10 +36,16 @@ export const FormTest = <RowType extends GridBaseRow>(props: GridFormProps<RowTy
   const { popoutWrapper } = useGridPopoutHook(props, save);
 
   return popoutWrapper(
-    <div style={{ display: "flex", flexDirection: "row" }} className={"FormTest"}>
-      <LuiTextInput label={"Name type"} value={nameType} onChange={(e) => setNameType(e.target.value)} />
-      <LuiTextInput label={"Number"} value={numba} onChange={(e) => setNumba(e.target.value)} />
-      <LuiTextInput label={"Plan"} value={plan} onChange={(e) => setPlan(e.target.value)} />
+    <div style={{ display: "flex", flexDirection: "row" }} className={"FormTest Grid-popoverContainer"}>
+      <div className={"FormTest-textInput"}>
+        <LuiTextInput label={"Name type"} value={nameType} onChange={(e) => setNameType(e.target.value)} />
+      </div>
+      <div className={"FormTest-textInput"}>
+        <LuiTextInput label={"Number"} value={numba} onChange={(e) => setNumba(e.target.value)} />
+      </div>
+      <div className={"FormTest-textInput"}>
+        <LuiTextInput label={"Plan"} value={plan} onChange={(e) => setPlan(e.target.value)} />
+      </div>
     </div>,
   );
 };