@linzjs/step-ag-grid 8.0.0 → 8.2.0

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

@@ -1,60 +1,105 @@
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
-// Force react-menu not to render static inline not absolute
-import "./reactMenuTest.scss";
 
 import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
-import { GridFormDropDown, 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";
+import { GridBaseRow } from "../../../components/Grid";
 
 export default {
-  title: "GridForm / Samples",
+  title: "GridForm / Testing",
   component: GridFormDropDown,
   args: {},
 } as ComponentMeta<typeof GridFormDropDown>;
 
 const Template: ComponentStory<typeof GridFormDropDown> = (props) => {
-  const anchorRef1 = useRef<HTMLHeadingElement>(null);
-  const anchorRef2 = useRef<HTMLHeadingElement>(null);
-  const anchorRef3 = useRef<HTMLHeadingElement>(null);
+  const configs: [string, GridFormDropDownProps<GridBaseRow>, string?][] = [
+    ["No options", { options: [] }],
+    ["Custom no options", { options: [], noOptionsMessage: "Custom no options" }],
+    [
+      "Enabled and disabled",
+      {
+        options: [
+          { label: "Enabled", value: 1 },
+          { label: "Disabled", value: 0, disabled: true },
+        ],
+      },
+    ],
+    [
+      "Headers",
+      {
+        options: [
+          MenuHeaderItem("Header 1"),
+          { label: "Option 1", value: 1 },
+          MenuHeaderItem("Header 2"),
+          { label: "Option 2", value: 2 },
+        ],
+      },
+    ],
+    [
+      "Filter",
+      {
+        filtered: "local",
+        options: [
+          MenuHeaderItem("Header 1"),
+          { label: "Option 1", value: 1 },
+          MenuHeaderItem("Header 2"),
+          { label: "Option 2", value: 2 },
+        ],
+      },
+    ],
+    [
+      "Filter custom placeholder",
+      {
+        filtered: "local",
+        filterPlaceholder: "Custom placeholder",
+        filterHelpText: "Filter help text",
+        options: [MenuHeaderItem("Header 1"), { label: "Option 1", value: 1 }],
+      },
+    ],
+    [
+      "Filter help text and default filter text",
+      {
+        filtered: "local",
+        filterHelpText: "Filter help text",
+        filterDefaultValue: "filter",
+        options: [
+          MenuHeaderItem("Header 1"),
+          { label: "Filter match", value: 1 },
+          MenuHeaderItem("ERROR! this header should not be visible"),
+          { label: "ERROR! this option should not be visible", 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>
-        <h6 ref={anchorRef1}>No options</h6>
-        <GridPopoverContext.Provider value={{ anchorRef: anchorRef1 } as any as GridPopoverContextType<any>}>
-          <GridFormDropDown {...props} options={[]} />
-        </GridPopoverContext.Provider>
-
-        <h6 ref={anchorRef2}>Enabled and disabled</h6>
-        <GridPopoverContext.Provider value={{ anchorRef: anchorRef2 } as any as GridPopoverContextType<any>}>
-          <GridFormDropDown
-            {...props}
-            options={[
-              { label: "Enabled", value: 1 },
-              { label: "Disabled", value: 0, disabled: true },
-            ]}
-          />
-        </GridPopoverContext.Provider>
-
-        <h6 ref={anchorRef3}>Headers</h6>
-        <GridPopoverContext.Provider value={{ anchorRef: anchorRef3 } as any as GridPopoverContextType<any>}>
-          <GridFormDropDown
-            {...props}
-            options={[
-              MenuHeaderItem("Header 1"),
-              { label: "Option 1", value: 1 },
-              MenuHeaderItem("Header 2"),
-              { label: "Option 2", value: 2 },
-            ]}
-          />
-        </GridPopoverContext.Provider>
+        {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>
+              }
+            >
+              <GridFormDropDown {...props} {...config[1]} />
+            </GridPopoverContext.Provider>
+          </div>
+        ))}
       </GridContextProvider>
     </div>
   );
 };
 
 export const GridFormDropDown_ = Template.bind({});
-GridFormDropDown_.args = { options: [] };

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

@@ -1,30 +1,25 @@
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
-// Force react-menu not to render static inline not absolute
-import "./reactMenuTest.scss";
 
 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";
 import { GridPopoverEditBearingEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
 
 export default {
-  title: "GridForm / Samples",
+  title: "GridForm / Testing",
   component: GridFormEditBearing,
   args: {},
 } 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));
@@ -39,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>
           </>
         ))}
@@ -53,4 +48,3 @@ const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
 };
 
 export const GridFormEditBearing_ = Template.bind({});
-GridFormEditBearing_.args = {};

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

@@ -1,30 +1,25 @@
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
-// Force react-menu not to render static inline not absolute
-import "./reactMenuTest.scss";
 
 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";
 import { GridPopoverEditBearingCorrectionEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
 
 export default {
-  title: "GridForm / Samples",
+  title: "GridForm / Testing",
   component: GridFormEditBearing,
   args: {},
 } 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));
@@ -39,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>
           </>
         ))}
@@ -53,4 +48,3 @@ const Template: ComponentStory<typeof GridFormEditBearing> = (props) => {
 };
 
 export const GridFormEditBearingCorrection_ = Template.bind({});
-GridFormEditBearingCorrection_.args = {};

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

@@ -0,0 +1,31 @@
+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 { GridFormMessage } from "../../../components/gridForm/GridFormMessage";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+
+export default {
+  title: "GridForm / Testing",
+  component: GridFormMessage,
+  args: {},
+} as ComponentMeta<typeof GridFormMessage>;
+
+const Template: ComponentStory<typeof GridFormMessage> = (props) => {
+  const anchorRef1 = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        <h6 ref={anchorRef1}>Standard Message</h6>
+        <GridPopoverContext.Provider value={{ anchorRef: anchorRef1 } as any as GridPopoverContextType<any>}>
+          <GridFormMessage {...props} message={() => <span>This is a message</span>} />
+        </GridPopoverContext.Provider>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormMessage_ = Template.bind({});

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/GridFormPopoverMenu.stories.tsx

@@ -0,0 +1,55 @@
+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 { useRef } from "react";
+import {
+  GridFormPopoverMenu,
+  GridFormPopoverMenuProps,
+  PopoutMenuSeparator,
+} from "../../../components/gridForm/GridFormPopoverMenu";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { GridBaseRow } from "../../../components/Grid";
+
+export default {
+  title: "GridForm / Testing",
+  component: GridFormPopoverMenu,
+  args: {},
+} as ComponentMeta<typeof GridFormPopoverMenu>;
+
+const Template: ComponentStory<typeof GridFormPopoverMenu> = (props) => {
+  const configs: [string, GridFormPopoverMenuProps<GridBaseRow>][] = [
+    ["No options", { options: async () => [] }],
+    [
+      "Enabled/disabled/hidden and divider",
+      {
+        options: async () => [
+          { label: "Enabled", value: 1 },
+          PopoutMenuSeparator,
+          { label: "Disabled", value: 0, disabled: true },
+          { label: "ERROR! this should be hidden", value: 3, hidden: true },
+        ],
+      },
+    ],
+  ];
+  // 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] } as any as GridPopoverContextType<any>}>
+              <GridFormPopoverMenu {...props} {...config[1]} />
+            </GridPopoverContext.Provider>
+          </>
+        ))}
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormPopoverMenu_ = 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;
+};

package/src/stories/grid/gridForm/reactMenuTest.scss

@@ -1,3 +0,0 @@
-.react-menu-inline-test .szh-menu-container, .react-menu-inline-test .szh-menu {
-  position: static !important;
-}