@linzjs/step-ag-grid 8.1.0 → 8.2.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/GridCell.tsx

@@ -29,8 +29,8 @@ export const GridCellRenderer = (props: ICellRendererParams) => {
   return (
     <GridLoadableCell isLoading={checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id)}>
       <>
-        {typeof warningText === "string" && <GridIcon icon={"ic_warning"} title={warningText} />}
-        {typeof infoText === "string" && <GridIcon icon={"ic_info"} title={infoText} />}
+        {typeof warningText === "string" && <GridIcon icon={"ic_warning_outline"} title={warningText} />}
+        {typeof infoText === "string" && <GridIcon icon={"ic_info_outline"} title={infoText} />}
         <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
           {colDef?.cellRendererParams?.originalCellRenderer ? (
             <colDef.cellRendererParams.originalCellRenderer {...props} />

package/src/components/gridForm/GridFormDropDown.tsx

@@ -36,7 +36,7 @@ export const MenuHeaderItem = (title: string) => {
 
 export type SelectOption = null | string | FinalSelectOption;
 
-export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow> extends CellEditorCommon {
+export interface GridFormDropDownProps<RowType extends GridBaseRow> extends CellEditorCommon {
   // This overrides CellEditorCommon to provide some common class options
   className?:
     | "GridPopoverEditDropDown-containerSmall"
@@ -63,7 +63,7 @@ const fieldToString = (field: any) => {
   return typeof field == "symbol" ? field.toString() : `${field}`;
 };
 
-export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPopoutDropDownProps<RowType>) => {
+export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDropDownProps<RowType>) => {
   const { selectedRows, field, data } = useGridPopoverContext<RowType>();
 
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
@@ -215,7 +215,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
                   className={"LuiTextInput-input"}
                   ref={ref}
                   type="text"
-                  placeholder={props.filterPlaceholder ?? "Placeholder"}
+                  placeholder={props.filterPlaceholder ?? "Filter..."}
                   data-testid={"filteredMenu-free-text-input"}
                   defaultValue={filter}
                   data-allowtabtosave={true}
@@ -237,7 +237,11 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
       <ComponentLoadingWrapper loading={!options} className={"GridFormDropDown-options"}>
         <>
           {options && (isEmpty(options) || (filteredValues && isEmpty(filteredValues))) && (
-            <MenuItem key={`${fieldToString(field)}-empty`} className={"GridPopoverEditDropDown-noOptions"}>
+            <MenuItem
+              key={`${fieldToString(field)}-empty`}
+              className={"GridPopoverEditDropDown-noOptions"}
+              disabled={true}
+            >
               {props.noOptionsMessage ?? "No Options"}
             </MenuItem>
           )}

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -56,7 +56,7 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
   });
 
   return popoverWrapper(
-    <div className={"GridFormEditBearing-input Grid-popoverContainer"}>
+    <div className={"GridFormEditBearing-input"}>
       <TextInputFormatted
         value={defaultValue}
         onChange={(e) => {

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -52,6 +52,7 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow> extends C
   filtered?: boolean;
   filterPlaceholder?: string;
   filterHelpText?: string | ((filter: string, options: MultiSelectOption[]) => string | undefined);
+  noOptionsMessage?: string;
   onSelectFilter?: (props: { filter: string; options: MultiSelectOption[] }) => void;
   onSave?: (props: { selectedRows: RowType[]; selectedOptions: MultiSelectOption[] }) => Promise<boolean>;
   headers?: GridFormMultiSelectGroup[];
@@ -117,7 +118,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow>(props: GridForm
   const headerGroups = useMemo(() => {
     if (!options) return undefined;
     const result = groupBy(
-      options.filter((o) => textMatch(o.label, filter) && o.value),
+      options.filter((o) => textMatch(o.label, filter) && o.value != null),
       "filter",
     );
     // remove leading/trailing/duplicate dividers
@@ -163,8 +164,12 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow>(props: GridForm
               filterPlaceholder={props.filterPlaceholder}
             />
           )}
-
-          {headerGroups && (
+          {headerGroups && (isEmpty(headerGroups) || !toPairs(headerGroups).some(([_, options]) => !isEmpty(options))) && (
+            <MenuItem key={"noOptions"} className={"GridMultiSelect-noOptions"} disabled={true}>
+              {props.noOptionsMessage ?? "No Options"}
+            </MenuItem>
+          )}
+          {headerGroups && !isEmpty(headerGroups) && (
             <div className={"GridFormMultiSelect-options"}>
               {headers.map((header, index) => {
                 const subOptions = headerGroups[`${header.filter}`];
@@ -307,7 +312,7 @@ const FilterInput = (props: {
             <input
               className={"LuiTextInput-input"}
               type="text"
-              placeholder={filterPlaceholder ?? "Placeholder"}
+              placeholder={filterPlaceholder ?? "Filter..."}
               data-testid={"filteredMenu-free-text-input"}
               value={filter}
               data-disableenterautosave={true}
@@ -328,9 +333,6 @@ const FilterInput = (props: {
         )}
       </FocusableItem>
       <MenuDivider key={`$$divider_filter`} />
-      {headerGroups && !toPairs(headerGroups).some(([_, options]) => !isEmpty(options)) && (
-        <div className={"szh-menu__item GridPopoverEditDropDown-noOptions"}>No Options</div>
-      )}
     </>
   );
 };
@@ -365,7 +367,7 @@ const MenuRadioItem = (props: {
         value={`${item.value}`}
         label={
           <>
-            {item.warning && <GridIcon icon={"ic_warning"} title={item.warning} />}
+            {item.warning && <GridIcon icon={"ic_warning_outline"} title={item.warning} />}
             {item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
           </>
         }

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -1,4 +1,9 @@
-import { bearingCorrectionValueFormatter, bearingValueFormatter } from "../../utils/bearing";
+import {
+  bearingCorrectionRangeValidator,
+  bearingCorrectionValueFormatter,
+  bearingRangeValidator,
+  bearingValueFormatter,
+} from "../../utils/bearing";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormEditBearing, GridFormEditBearingProps } from "../gridForm/GridFormEditBearing";
 import { GridBaseRow } from "../Grid";
@@ -27,12 +32,7 @@ const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
 export const GridPopoverEditBearingEditorParams = {
   placeHolder: "Enter bearing",
   formatValue: bearingValueFormatter,
-  range: (value: number | null) => {
-    if (value === null) return "Bearing is required";
-    if (value >= 360) return "Bearing must be less than 360 degrees";
-    if (value < 0) return "Bearing must not be negative";
-    return null;
-  },
+  range: bearingRangeValidator,
 };
 
 export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
@@ -50,12 +50,7 @@ export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
 export const GridPopoverEditBearingCorrectionEditorParams = {
   placeHolder: "Enter bearing correction",
   formatValue: bearingCorrectionValueFormatter,
-  range: (value: number | null) => {
-    if (value === null) return "Bearing correction is required";
-    if (value >= 360) return "Bearing correction must be less than 360 degrees";
-    if (value <= -180) return "Bearing correction must be greater then -180 degrees";
-    return null;
-  },
+  range: bearingCorrectionRangeValidator,
 };
 
 export const GridPopoverEditBearingCorrection = <RowType extends GridBaseRow>(

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -1,11 +1,11 @@
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
-import { GridFormDropDown, GridFormPopoutDropDownProps } from "../gridForm/GridFormDropDown";
+import { GridFormDropDown, GridFormDropDownProps } from "../gridForm/GridFormDropDown";
 import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
 
 export const GridPopoverEditDropDown = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
-  props: GenericCellEditorProps<GridFormPopoutDropDownProps<RowType>>,
+  props: GenericCellEditorProps<GridFormDropDownProps<RowType>>,
 ): ColDefT<RowType> =>
   GridCell(colDef, {
     editor: GridFormDropDown,
@@ -13,6 +13,6 @@ export const GridPopoverEditDropDown = <RowType extends GridBaseRow>(
     editorParams: {
       // Defaults to large size container
       className: "GridPopoverEditDropDown-containerLarge",
-      ...(props.editorParams as GridFormPopoutDropDownProps<RowType>),
+      ...(props.editorParams as GridFormDropDownProps<RowType>),
     },
   });

package/src/react-menu3/styles/_var.scss

@@ -2,7 +2,7 @@
 
 $color: #212529;
 $color-dark: #cad1d8;
-$color-disabled: #aaa;
+$color-disabled: #989189;
 $color-disabled-dark: #666;
 
 $header-color: #888;

package/src/stories/grid/gridForm/GridFormDropDown.stories.tsx

@@ -2,11 +2,7 @@ import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import {
-  GridFormDropDown,
-  GridFormPopoutDropDownProps,
-  MenuHeaderItem,
-} from "../../../components/gridForm/GridFormDropDown";
+import { GridFormDropDown, GridFormDropDownProps, MenuHeaderItem } from "../../../components/gridForm/GridFormDropDown";
 import { GridContextProvider } from "../../../contexts/GridContextProvider";
 import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
 import { useRef } from "react";
@@ -19,7 +15,7 @@ export default {
 } as ComponentMeta<typeof GridFormDropDown>;
 
 const Template: ComponentStory<typeof GridFormDropDown> = (props) => {
-  const configs: [string, GridFormPopoutDropDownProps<GridBaseRow>, string?][] = [
+  const configs: [string, GridFormDropDownProps<GridBaseRow>, string?][] = [
     ["No options", { options: [] }],
     ["Custom no options", { options: [], noOptionsMessage: "Custom no options" }],
     [

package/src/stories/grid/gridForm/GridFormEditBearing.stories.tsx

@@ -2,7 +2,7 @@ import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridFormEditBearing } from "../../../components/gridForm/GridFormEditBearing";
+import { GridFormEditBearing, GridFormEditBearingProps } from "../../../components/gridForm/GridFormEditBearing";
 import { GridContextProvider } from "../../../contexts/GridContextProvider";
 import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
 import { useRef } from "react";
@@ -15,14 +15,11 @@ export default {
 } as ComponentMeta<typeof GridFormEditBearing>;
 
 const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
-  const values = [
-    ["Null value", null],
-    ["Minimum value", 0],
-    ["Maximum value", 359.59599],
-    ["5dp value", 1.23456],
-    ["Invalid 6dp value", 1.234567],
-    ["Invalid exceeds max value", 360],
-    ["Invalid exceeds min value", -0.00001],
+  const values: [string, GridFormEditBearingProps<any>, number | null][] = [
+    ["Null value", {}, null],
+    ["Custom placeholder", { placeHolder: "Custom placeholder" }, null],
+    ["Valid value", {}, 90],
+    ["With error", {}, 1.234567],
   ];
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const anchorRefs = values.map(() => useRef<HTMLHeadingElement>(null));
@@ -37,11 +34,11 @@ const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
               value={
                 {
                   anchorRef: anchorRefs[index],
-                  value: value[1],
+                  value: value[2],
                 } as any as GridPopoverContextType<any>
               }
             >
-              <GridFormEditBearing {...props} {...GridPopoverEditBearingEditorParams} />
+              <GridFormEditBearing {...props} {...GridPopoverEditBearingEditorParams} {...value[1]} />
             </GridPopoverContext.Provider>
           </>
         ))}
@@ -51,4 +48,3 @@ const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
 };
 
 export const GridFormEditBearing_ = Template.bind({});
-GridFormEditBearing_.args = {};

package/src/stories/grid/gridForm/GridFormEditBearingCorrection.stories.tsx

@@ -2,7 +2,7 @@ import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridFormEditBearing } from "../../../components/gridForm/GridFormEditBearing";
+import { GridFormEditBearing, GridFormEditBearingProps } from "../../../components/gridForm/GridFormEditBearing";
 import { GridContextProvider } from "../../../contexts/GridContextProvider";
 import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
 import { useRef } from "react";
@@ -15,14 +15,11 @@ export default {
 } as ComponentMeta<typeof GridFormEditBearing>;
 
 const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
-  const values = [
-    ["Null value", null],
-    ["Minimum value", -179.59599],
-    ["Maximum value", 359.59599],
-    ["5dp value", 1.23456],
-    ["Invalid 6dp value", 1.234567],
-    ["Invalid exceeds max value", 360],
-    ["Invalid exceeds min value", -180],
+  const values: [string, GridFormEditBearingProps<any>, number | null][] = [
+    ["Null value", {}, null],
+    ["Custom placeholder", { placeHolder: "Custom placeholder" }, null],
+    ["Valid value", {}, -10],
+    ["With error", {}, 360],
   ];
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const anchorRefs = values.map(() => useRef<HTMLHeadingElement>(null));
@@ -37,11 +34,11 @@ const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
               value={
                 {
                   anchorRef: anchorRefs[index],
-                  value: value[1],
+                  value: value[2],
                 } as any as GridPopoverContextType<any>
               }
             >
-              <GridFormEditBearing {...props} {...GridPopoverEditBearingCorrectionEditorParams} />
+              <GridFormEditBearing {...props} {...GridPopoverEditBearingCorrectionEditorParams} {...value[1]} />
             </GridPopoverContext.Provider>
           </>
         ))}
@@ -51,4 +48,3 @@ const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
 };
 
 export const GridFormEditBearingCorrection_ = Template.bind({});
-GridFormEditBearingCorrection_.args = {};

package/src/stories/grid/gridForm/GridFormMessage.stories.tsx

@@ -29,4 +29,3 @@ const Template: ComponentStory<typeof GridFormMessage> = (props) => {
 };
 
 export const GridFormMessage_ = Template.bind({});
-GridFormMessage_.args = {};

package/src/stories/grid/gridForm/GridFormMultiSelect.stories.tsx

@@ -0,0 +1,70 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridFormMultiSelect, GridFormMultiSelectProps } from "../../../components/gridForm/GridFormMultiSelect";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { GridBaseRow } from "../../../components/Grid";
+
+export default {
+  title: "GridForm / Testing",
+  component: GridFormMultiSelect,
+  args: {},
+} as ComponentMeta<typeof GridFormMultiSelect>;
+
+const Template: ComponentStory<typeof GridFormMultiSelect> = (props) => {
+  const configs: [string, GridFormMultiSelectProps<GridBaseRow>, string?][] = [
+    ["No options", { options: [] }],
+    ["Custom no options", { options: [], noOptionsMessage: "Custom no options" }],
+    [
+      "With options",
+      {
+        options: [
+          { label: "One", value: 0 },
+          { label: "Two", value: 1 },
+        ],
+      },
+    ],
+    [
+      "With filter",
+      {
+        filtered: true,
+        options: [
+          { label: "One", value: 0 },
+          { label: "With warning", value: 1, warning: "Test warning" },
+          { label: "Three", value: 2 },
+        ],
+      },
+    ],
+  ];
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const anchorRefs = configs.map(() => useRef<HTMLHeadingElement>(null));
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        {configs.map((config, index) => (
+          <div key={`${index}`}>
+            <h6 ref={anchorRefs[index]}>{config[0]}</h6>
+            <GridPopoverContext.Provider
+              value={
+                {
+                  anchorRef: anchorRefs[index],
+                  data: { value: config[2] },
+                  value: config[2],
+                  field: "value",
+                } as any as GridPopoverContextType<any>
+              }
+            >
+              <GridFormMultiSelect {...props} {...config[1]} />
+            </GridPopoverContext.Provider>
+          </div>
+        ))}
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormMultiSelect_ = Template.bind({});

package/src/stories/grid/gridForm/GridFormTextArea.stories.tsx

@@ -0,0 +1,44 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridFormTextArea, GridFormTextAreaProps } from "../../../components/gridForm/GridFormTextArea";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { GridBaseRow } from "../../../components/Grid";
+
+export default {
+  title: "GridForm / Testing",
+  component: GridFormTextArea,
+  args: {},
+} as ComponentMeta<typeof GridFormTextArea>;
+
+const Template: ComponentStory<typeof GridFormTextArea> = (props) => {
+  const configs: [string, GridFormTextAreaProps<GridBaseRow>, string?][] = [
+    ["Text area", {}],
+    ["Text area with text", {}, "Some text"],
+    ["Text area with error & placeholder", { required: true, placeholder: "Custom placeholder" }],
+  ];
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const anchorRefs = configs.map(() => useRef<HTMLHeadingElement>(null));
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        {configs.map((config, index) => (
+          <>
+            <h6 ref={anchorRefs[index]}>{config[0]}</h6>
+            <GridPopoverContext.Provider
+              value={{ anchorRef: anchorRefs[index], value: config[2] } as any as GridPopoverContextType<any>}
+            >
+              <GridFormTextArea {...props} {...config[1]} />
+            </GridPopoverContext.Provider>
+          </>
+        ))}
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormTextArea_ = Template.bind({});

package/src/stories/grid/gridForm/GridFormTextInput.stories.tsx

@@ -0,0 +1,44 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridFormTextInput, GridFormTextInputProps } from "../../../components/gridForm/GridFormTextInput";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { GridBaseRow } from "../../../components/Grid";
+
+export default {
+  title: "GridForm / Testing",
+  component: GridFormTextInput,
+  args: {},
+} as ComponentMeta<typeof GridFormTextInput>;
+
+const Template: ComponentStory<typeof GridFormTextInput> = (props) => {
+  const configs: [string, GridFormTextInputProps<GridBaseRow>, string?][] = [
+    ["Text input", {}],
+    ["Text input with text", {}, "Some text"],
+    ["Text input with error & placeholder", { required: true, placeholder: "Custom placeholder" }],
+  ];
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const anchorRefs = configs.map(() => useRef<HTMLHeadingElement>(null));
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        {configs.map((config, index) => (
+          <>
+            <h6 ref={anchorRefs[index]}>{config[0]}</h6>
+            <GridPopoverContext.Provider
+              value={{ anchorRef: anchorRefs[index], value: config[2] } as any as GridPopoverContextType<any>}
+            >
+              <GridFormTextInput {...props} {...config[1]} />
+            </GridPopoverContext.Provider>
+          </>
+        ))}
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormTextInput_ = Template.bind({});

package/src/styles/Grid.scss

@@ -32,7 +32,7 @@
 }
 
 .Grid-popoverContainer {
-  padding: 4px 8px;
+  padding: 0.375rem 0.75rem;
 }
 
 .ag-cell .GridCell-editableIcon {

package/src/styles/GridFormMultiSelect.scss

@@ -16,3 +16,7 @@
 .GridMultiSelect-containerUnlimited .GridFormMultiSelect-options {
   overflow-y: auto;
 }
+
+.GridMultiSelect-noOptions {
+  justify-content: center;
+}

package/src/styles/GridIcon.scss

@@ -9,11 +9,21 @@
   fill: colors.$info;
 }
 
+.AgGridGenericCellRenderer-ic_info_outlineIcon {
+  margin-right: 4px;
+  fill: colors.$info;
+}
+
 .AgGridGenericCellRenderer-ic_warningIcon {
   margin-right: 4px;
   fill: colors.$warning;
 }
 
+.AgGridGenericCellRenderer-ic_warning_outlineIcon {
+  margin-right: 4px;
+  fill: colors.$warning;
+}
+
 .GridIcon-disabled {
   fill: colors.$silver !important;
 }

package/src/styles/lui-overrides.scss

@@ -23,7 +23,7 @@
 
   .szh-menu__item,
   .szh-menu__header {
-    padding: 0.375rem 1.5rem;
+    padding: 0.375rem 0.75rem;
   }
 
   .LuiCheckboxInput {

package/src/styles/react-menu-customisations.scss

@@ -9,13 +9,13 @@
 .step-ag-grid-react-menu.szh-menu {
   z-index: 900;
   color: colors.$base-type-color;
-  @include fonts.font-light();
+  @include fonts.font-regular();
 
   div,
   a[role="menuitem"] {
     text-decoration: none;
     color: colors.$base-type-color;
-    @include fonts.font-light();
+    @include fonts.font-regular();
   }
 
   li[role="menuitem"]:hover {

package/src/utils/bearing.test.ts

@@ -1,7 +1,12 @@
-import { convertDDToDMS } from "./bearing";
+import {
+  bearingCorrectionRangeValidator,
+  bearingRangeValidator,
+  bearingStringValidator,
+  convertDDToDMS,
+} from "./bearing";
 
-describe("convertDDToDMS", () => {
-  test("converts decimal-ish degrees to DMS", () => {
+describe("bearing", () => {
+  test("convertDDToDMS converts decimal-ish degrees to DMS", () => {
     expect(convertDDToDMS(-0.001, false, false)).toBe("-0° 00' 10\"");
     expect(convertDDToDMS(-10.001, false, false)).toBe("-10° 00' 10\"");
     expect(convertDDToDMS(-370.001, false, false)).toBe("-10° 00' 10\"");
@@ -27,4 +32,42 @@ describe("convertDDToDMS", () => {
     expect(convertDDToDMS(300.1, false, false)).toBe("300° 10'");
     expect(convertDDToDMS(0, false)).toBe("0° 00'");
   });
+
+  test("bearingStringValidator", () => {
+    const tests: [string, string | null][] = [
+      ["", null],
+      ["1", null],
+      ["1.2345", null],
+      ["-1.2345", null],
+      ["360.2345", null],
+      ["-360.2345", null],
+      ["1.2e6", "Bearing must be a number in D.MMSSS format"],
+      ["0.60000", "Bearing must be a number in D.MMSSS format"],
+      ["0.00600", "Bearing must be a number in D.MMSSS format"],
+      ["0.123456", "Bearing has a maximum of 5 decimal places"],
+    ];
+
+    tests.forEach((test, i) => {
+      expect(bearingStringValidator(test[0]), `Test ${i}: "${test[0]}" should return "${test[1]}"`).toBe(test[1]);
+    });
+
+    // calls custom invalid
+    const fn = jest.fn();
+    bearingStringValidator("1.2", fn);
+    expect(fn).toHaveBeenCalledWith(1.2);
+  });
+
+  test("bearingRangeValidator", () => {
+    expect(bearingRangeValidator(0)).toBeNull();
+    expect(bearingRangeValidator(359.595999)).toBeNull();
+    expect(bearingRangeValidator(-0.00001)).toBe("Bearing must not be negative");
+    expect(bearingRangeValidator(360)).toBe("Bearing must be less than 360 degrees");
+  });
+
+  test("bearingCorrectionRangeValidator", () => {
+    expect(bearingCorrectionRangeValidator(-179.59999)).toBeNull();
+    expect(bearingCorrectionRangeValidator(359.59999)).toBeNull();
+    expect(bearingCorrectionRangeValidator(-180)).toBe("Bearing correction must be greater then -180 degrees");
+    expect(bearingCorrectionRangeValidator(360)).toBe("Bearing correction must be less than 360 degrees");
+  });
 });

package/src/utils/bearing.ts

@@ -81,3 +81,17 @@ export const convertDDToDMS = (dd: number | null, showPositiveSymbol = true, add
 
   return dmsString;
 };
+
+export const bearingRangeValidator = (value: number | null) => {
+  if (value === null) return "Bearing is required";
+  if (value >= 360) return "Bearing must be less than 360 degrees";
+  if (value < 0) return "Bearing must not be negative";
+  return null;
+};
+
+export const bearingCorrectionRangeValidator = (value: number | null) => {
+  if (value === null) return "Bearing correction is required";
+  if (value >= 360) return "Bearing correction must be less than 360 degrees";
+  if (value <= -180) return "Bearing correction must be greater then -180 degrees";
+  return null;
+};