@linzjs/step-ag-grid 7.19.5 → 8.0.0

package/package.json

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

package/src/components/Grid.tsx

@@ -27,7 +27,7 @@ export interface GridProps {
   externalSelectedItems?: any[];
   setExternalSelectedItems?: (items: any[]) => void;
   defaultColDef?: GridOptions["defaultColDef"];
-  columnDefs: GridOptions["columnDefs"];
+  columnDefs: ColDef[];
   rowData: GridOptions["rowData"];
   noRowsOverlayText?: string;
   postSortRows?: GridOptions["postSortRows"];
@@ -168,8 +168,8 @@ export const Grid = (params: GridProps): JSX.Element => {
     synchroniseExternallySelectedItemsToGrid();
   }, [synchroniseExternallySelectedItemsToGrid]);
 
-  const columnDefs = useMemo((): GridOptions["columnDefs"] => {
-    const adjustColDefs = (params.columnDefs as ColDef[]).map((colDef) => {
+  const columnDefs = useMemo((): ColDef[] => {
+    const adjustColDefs = params.columnDefs.map((colDef) => {
       return {
         ...colDef,
         editable: params.readOnly ? false : params.defaultColDef?.editable ?? colDef.editable,

package/src/components/gridForm/GridFormEditBearing.tsx

@@ -7,13 +7,14 @@ import { CellEditorCommon } from "../GridCell";
 import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridFormEditBearingProps<RowType extends GridBaseRow> extends CellEditorCommon {
+  formatValue?: (value: any) => string;
   placeHolder?: string;
   range?: (value: number | null) => string | null;
-  onSave?: (selectedRows: RowType[], value: number | null) => Promise<boolean>;
+  onSave?: (props: { selectedRows: RowType[]; value: number | null }) => Promise<boolean>;
 }
 
 export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridFormEditBearingProps<RowType>) => {
-  const { field, value: initialValue, formatValue } = useGridPopoverContext<RowType>();
+  const { field, value: initialValue } = useGridPopoverContext<RowType>();
 
   // This clears out any scientific precision
   const defaultValue = useMemo(
@@ -34,7 +35,7 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
       }
 
       if (props.onSave) {
-        return await props.onSave(selectedRows, parsedValue);
+        return await props.onSave({ selectedRows, value: parsedValue });
       } else {
         if (field == null) {
           console.error("field is not defined in ColDef");
@@ -63,7 +64,11 @@ export const GridFormEditBearing = <RowType extends GridBaseRow>(props: GridForm
         }}
         autoFocus={true}
         placeholder={props.placeHolder}
-        formatted={bearingStringValidator(value, props.range) ? "?" : formatValue(bearingNumberParser(value))}
+        formatted={
+          bearingStringValidator(value, props.range) || !props.formatValue
+            ? "?"
+            : props.formatValue(bearingNumberParser(value))
+        }
         error={bearingStringValidator(value, props.range)}
         helpText={"Press enter or tab to save"}
       />

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -52,8 +52,8 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow> extends C
   filtered?: boolean;
   filterPlaceholder?: string;
   filterHelpText?: string | ((filter: string, options: MultiSelectOption[]) => string | undefined);
-  onSelectFilter?: (filter: string, options: MultiSelectOption[]) => void;
-  onSave?: (selectedRows: RowType[], selectedOptions: MultiSelectOption[]) => Promise<boolean>;
+  onSelectFilter?: (props: { filter: string; options: MultiSelectOption[] }) => void;
+  onSave?: (props: { selectedRows: RowType[]; selectedOptions: MultiSelectOption[] }) => Promise<boolean>;
   headers?: GridFormMultiSelectGroup[];
   options: MultiSelectOption[] | ((selectedRows: RowType[]) => Promise<MultiSelectOption[]> | MultiSelectOption[]);
   invalid?: (selectedRows: RowType[], selectedOptions: MultiSelectOption[]) => boolean;
@@ -90,10 +90,10 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow>(props: GridForm
       // Any changes to save?
       if (initialValues === JSON.stringify(options)) return true;
 
-      return props.onSave(
+      return props.onSave({
         selectedRows,
-        options.filter((o) => o.checked),
-      );
+        selectedOptions: options.filter((o) => o.checked),
+      });
     },
     [initialValues, options, props],
   );
@@ -203,7 +203,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow>(props: GridForm
 const FilterInput = (props: {
   options: MultiSelectOption[];
   setOptions: (options: MultiSelectOption[]) => void;
-  onSelectFilter?: (filter: string, options: MultiSelectOption[]) => void;
+  onSelectFilter?: (props: { filter: string; options: MultiSelectOption[] }) => void;
   filter: string;
   setFilter: Dispatch<SetStateAction<string>>;
   headerGroups: HeaderGroupType;
@@ -259,7 +259,7 @@ const FilterInput = (props: {
     }
 
     const preFilterOptions = JSON.stringify(options);
-    onSelectFilter(filterTrimmed, options);
+    onSelectFilter({ filter: filterTrimmed, options });
     // Detect if options list changed and update
     if (preFilterOptions === JSON.stringify(options)) return;
 

package/src/components/gridForm/GridFormPopoverMenu.tsx

@@ -10,7 +10,7 @@ import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 
 export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends CellEditorCommon {
   options: (selectedRows: RowType[]) => Promise<MenuOption<RowType>[]>;
-  defaultAction?: (selectedRows: RowType[], menuOption: SelectedMenuOptionResult<RowType>) => Promise<void>;
+  defaultAction?: (props: { selectedRows: RowType[]; menuOption: SelectedMenuOptionResult<RowType> }) => Promise<void>;
 }
 
 /** Menu configuration types **/
@@ -26,7 +26,7 @@ export interface SelectedMenuOptionResult<RowType extends GridBaseRow> extends M
 
 export interface MenuOption<RowType extends GridBaseRow> {
   label: JSX.Element | string | MenuSeparatorType;
-  action?: (selectedRows: RowType[], menuOption: SelectedMenuOptionResult<RowType>) => Promise<void>;
+  action?: (props: { selectedRows: RowType[]; menuOption: SelectedMenuOptionResult<RowType> }) => Promise<void>;
   disabled?: string | boolean;
   hidden?: boolean;
   subComponent?: (props: any) => JSX.Element;
@@ -47,9 +47,9 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
   const [subSelectedValue, setSubSelectedValue] = useState<any>();
 
   const defaultAction = useCallback(
-    async (selectedRows: RowType[], menuOption: SelectedMenuOptionResult<RowType>) => {
-      if (props.defaultAction) await props.defaultAction(selectedRows, menuOption);
-      else console.error(`No action specified for ${menuOption.label} menu options`);
+    async (params: { selectedRows: RowType[]; menuOption: SelectedMenuOptionResult<RowType> }) => {
+      if (props.defaultAction) await props.defaultAction(params);
+      else console.error(`No action specified for ${params.menuOption.label} menu options`);
     },
     [props],
   );
@@ -77,8 +77,10 @@ export const GridFormPopoverMenu = <RowType extends GridBaseRow>(props: GridForm
 
   const actionClick = useCallback(
     async (menuOption: MenuOption<RowType>) => {
-      const result = { ...menuOption, subValue: subSelectedValue };
-      await (menuOption.action ?? defaultAction)(selectedRows, result);
+      await (menuOption.action ?? defaultAction)({
+        selectedRows,
+        menuOption: { ...menuOption, subValue: subSelectedValue },
+      });
       return true;
     },
     [defaultAction, selectedRows, subSelectedValue],

package/src/components/gridForm/GridFormTextArea.tsx

@@ -11,7 +11,7 @@ export interface GridFormTextAreaProps<RowType extends GridBaseRow>
     CellEditorCommon {
   placeholder?: string;
   width?: string | number;
-  onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
+  onSave?: (props: { selectedRows: RowType[]; value: string }) => Promise<boolean>;
   helpText?: string;
 }
 
@@ -34,7 +34,7 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(props: GridFormTex
       if (initValue === trimmedValue) return true;
 
       if (props.onSave) {
-        return await props.onSave(selectedRows, trimmedValue);
+        return await props.onSave({ selectedRows, value: trimmedValue });
       }
 
       selectedRows.forEach((row) => (row[field] = trimmedValue as any));

package/src/components/gridForm/GridFormTextInput.tsx

@@ -12,7 +12,7 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow>
   placeholder?: string;
   units?: string;
   width?: string | number;
-  onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
+  onSave?: (props: { selectedRows: RowType[]; value: string }) => Promise<boolean>;
   helpText?: string;
 }
 
@@ -35,7 +35,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
       if (initValue === trimmedValue) return true;
 
       if (props.onSave) {
-        return await props.onSave(selectedRows, trimmedValue);
+        return await props.onSave({ selectedRows, value: trimmedValue });
       }
 
       selectedRows.forEach((row) => (row[field] = trimmedValue as any));
@@ -50,16 +50,13 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormTe
   });
 
   return popoverWrapper(
-    <div
-      style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }}
-      className={"FormTest subComponent"}
-    >
+    <div style={{ display: "flex", flexDirection: "row" }} className={"FormTest subComponent"}>
       <TextInputFormatted
         value={value}
         onChange={(e) => setValue(e.target.value)}
         error={invalid()}
         formatted={props.units}
-        style={{ width: "100%" }}
+        style={{ width: props.width ?? 240 }}
         placeholder={props.placeholder}
         helpText={helpText}
       />

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -3,15 +3,19 @@ import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormEditBearing, GridFormEditBearingProps } from "../gridForm/GridFormEditBearing";
 import { GridBaseRow } from "../Grid";
 import { GenericCellColDef } from "../gridRender/GridRenderGenericCell";
+import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 
-export const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
+const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
-  props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
+  props: GenericCellEditorProps<GridFormEditBearingProps<RowType>> & {
+    editorParams: { formatValue: (value: any) => any };
+  },
 ): ColDefT<RowType> =>
   GridCell(
     {
       initialWidth: 65,
       maxWidth: 150,
+      valueFormatter: (params: ValueFormatterParams) => props.editorParams?.formatValue(params.value) ?? "",
       ...colDef,
     },
     {
@@ -20,44 +24,48 @@ export 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;
+  },
+};
+
 export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
 ): ColDefT<RowType> =>
-  GridPopoverEditBearingLike(
-    { valueFormatter: bearingValueFormatter, ...colDef },
-    {
-      multiEdit: !!props.multiEdit,
-      editorParams: {
-        placeHolder: "Enter bearing correction",
-        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 < 0) return "Bearing correction must not be negative";
-          return null;
-        },
-        ...props.editorParams,
-      },
+  GridPopoverEditBearingLike(colDef, {
+    multiEdit: !!props.multiEdit,
+    editorParams: {
+      ...GridPopoverEditBearingEditorParams,
+      ...props.editorParams,
     },
-  );
+  });
+
+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;
+  },
+};
 
 export const GridPopoverEditBearingCorrection = <RowType extends GridBaseRow>(
   colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
 ): ColDefT<RowType> =>
-  GridPopoverEditBearingLike(
-    { valueFormatter: bearingCorrectionValueFormatter, ...colDef },
-    {
-      multiEdit: !!props.multiEdit,
-      editorParams: {
-        placeHolder: "Enter bearing correction",
-        range: (value: number | null) => {
-          if (value === null) return "Bearing is required";
-          if (value >= 360) return "Bearing must be less than 360 degrees";
-          if (value <= -180) return "Bearing must be greater then -180 degrees";
-          return null;
-        },
-        ...props.editorParams,
-      },
+  GridPopoverEditBearingLike(colDef, {
+    multiEdit: !!props.multiEdit,
+    editorParams: {
+      ...GridPopoverEditBearingCorrectionEditorParams,
+      ...props.editorParams,
     },
-  );
+  });

package/src/react-menu3/components/ControlledMenu.tsx

@@ -346,7 +346,11 @@ export const ControlledMenuFr = (
   );
 
   if (portal === true && anchorRef?.current != null) {
-    portal = { target: anchorRef.current.ownerDocument.body } as PortalFieldType;
+    if (hasParentClass("react-menu-inline-test", anchorRef.current)) {
+      portal = false;
+    } else {
+      portal = { target: anchorRef.current.ownerDocument.body } as PortalFieldType;
+    }
   }
 
   if (portal) {

package/src/stories/grid/GridNonEditableRow.stories.tsx

@@ -100,7 +100,7 @@ const GridNonEditableRowTemplate: ComponentStory<typeof Grid> = (props: GridProp
               return [
                 {
                   label: "Single edit only",
-                  action: async (selectedRows) => {
+                  action: async ({ selectedRows }) => {
                     alert(`Single-edit: ${selectedRows.map((r) => r.id)} rowId(s) selected`);
                     await wait(1500);
                   },
@@ -108,7 +108,7 @@ const GridNonEditableRowTemplate: ComponentStory<typeof Grid> = (props: GridProp
                 },
                 {
                   label: "Multi-edit",
-                  action: async (selectedRows) => {
+                  action: async ({ selectedRows }) => {
                     alert(`Multi-edit: ${selectedRows.map((r) => r.id)} rowId(s) selected`);
                     await wait(1500);
                   },
@@ -123,9 +123,9 @@ const GridNonEditableRowTemplate: ComponentStory<typeof Grid> = (props: GridProp
                 },
                 {
                   label: "Other (TextInput)",
-                  action: async (_, menuOptionResult) => {
+                  action: async ({ menuOption }) => {
                     // eslint-disable-next-line no-console
-                    console.log(`Sub selected value was ${JSON.stringify(menuOptionResult.subValue)}`);
+                    console.log(`Sub selected value was ${JSON.stringify(menuOption.subValue)}`);
                     await wait(500);
                   },
                   subComponent: () => (
@@ -134,9 +134,9 @@ const GridNonEditableRowTemplate: ComponentStory<typeof Grid> = (props: GridProp
                 },
                 {
                   label: "Other (TextArea)",
-                  action: async (_, menuOptionResult) => {
+                  action: async ({ menuOption }) => {
                     // eslint-disable-next-line no-console
-                    console.log(`Sub selected value was ${JSON.stringify(menuOptionResult.subValue)}`);
+                    console.log(`Sub selected value was ${JSON.stringify(menuOption.subValue)}`);
                     await wait(500);
                   },
                   subComponent: () => (

package/src/stories/grid/GridPopoutBearing.stories.tsx

@@ -72,7 +72,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         },
         {
           editorParams: {
-            onSave: async (selectedRows, value: ITestRow["bearing"]) => {
+            onSave: async ({ selectedRows, value }) => {
               await wait(1000);
               selectedRows.forEach((row) => (row["bearing"] = value));
               return true;

package/src/stories/grid/GridPopoutEditGenericTextArea.stories.tsx

@@ -72,7 +72,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
               if (value === "never") return "The value 'never' is not allowed";
               return null;
             },
-            onSave: async (selectedRows, value) => {
+            onSave: async ({ selectedRows, value }) => {
               await wait(1000);
               selectedRows.forEach((selectedRow) => (selectedRow["name"] = value));
               return true;
@@ -87,7 +87,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
           maxWidth: 140,
           valueFormatter: (params) => {
             const v = params.data.distance;
-            return v != null ? `${v}${params.colDef.cellEditorParams.units}` : v;
+            return v != null ? `${v}${params.colDef.cellEditorParams.units}` : "–";
           },
         },
         {
@@ -100,7 +100,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
               if (value.length && !isFloat(value)) return "Value must be a number";
               return null;
             },
-            onSave: async (selectedRows, value) => {
+            onSave: async ({ selectedRows, value }) => {
               await wait(1000);
               selectedRows.forEach(
                 (selectedRow) => (selectedRow["distance"] = value.length ? parseFloat(value) : null),
@@ -126,7 +126,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
               if (value === "never") return "The value 'never' is not allowed";
               return null;
             },
-            onSave: async (selectedRows, value) => {
+            onSave: async ({ selectedRows, value }) => {
               await wait(1000);
               selectedRows.forEach((selectedRow) => (selectedRow["plan"] = value));
               return true;
@@ -170,7 +170,7 @@ const GridPopoutEditGenericTemplate: ComponentStory<typeof Grid> = (props: GridP
             options: async (_) => [
               {
                 label: "Delete",
-                action: async (selectedRows) => {
+                action: async ({ selectedRows }) => {
                   await wait(1500);
                   setRowData(rowData.filter((data) => !selectedRows.some((row) => row.id == data.id)));
                 },

package/src/stories/grid/GridPopoutEditMultiSelect.stories.tsx

@@ -96,7 +96,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
                 subComponent: () => <GridFormSubComponentTextArea required={true} maxLength={5} defaultValue={""} />,
               },
             ],
-            onSave: async (selectedRows, selectedOptions) => {
+            onSave: async ({ selectedRows, selectedOptions }) => {
               // eslint-disable-next-line no-console
               console.log("multiSelect result", { selectedRows, selectedOptions });
 
@@ -129,7 +129,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
               isEmpty(filter) || options.find((o) => o.label && o.label.toLowerCase() === filter.toLowerCase())
                 ? undefined
                 : "Press enter to add free text",
-            onSelectFilter: async (filter, options) => {
+            onSelectFilter: async ({ filter, options }) => {
               if (isEmpty(filter) || options.find((o) => o.label && o.label.toLowerCase() === filter.toLowerCase()))
                 return;
               options.push({ value: filter, label: filter, filter: "freeText", checked: true });
@@ -159,7 +159,7 @@ const GridEditMultiSelectTemplate: ComponentStory<typeof Grid> = (props: GridPro
               );
               return r;
             },
-            onSave: async (selectedRows, selectedOptions) => {
+            onSave: async ({ selectedRows, selectedOptions }) => {
               // eslint-disable-next-line no-console
               console.log("multiSelect result", { selectedRows, selectedOptions });
 

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -126,7 +126,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
               return [
                 {
                   label: "Single edit only",
-                  action: async (selectedRows) => {
+                  action: async ({ selectedRows }) => {
                     alert(`Single-edit: ${selectedRows.map((r) => r.id)} rowId(s) selected`);
                     await wait(1500);
                   },
@@ -134,7 +134,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
                 },
                 {
                   label: "Multi-edit",
-                  action: async (selectedRows) => {
+                  action: async ({ selectedRows }) => {
                     alert(`Multi-edit: ${selectedRows.map((r) => r.id)} rowId(s) selected`);
                     await wait(1500);
                   },
@@ -149,9 +149,9 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
                 },
                 {
                   label: "Other (TextInput)",
-                  action: async (_, menuOptionResult) => {
+                  action: async ({ menuOption }) => {
                     // eslint-disable-next-line no-console
-                    console.log(`Sub selected value was ${JSON.stringify(menuOptionResult.subValue)}`);
+                    console.log(`Sub selected value was ${JSON.stringify(menuOption.subValue)}`);
                     await wait(500);
                   },
                   subComponent: () => (
@@ -160,9 +160,9 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
                 },
                 {
                   label: "Other (TextArea)",
-                  action: async (_, menuOptionResult) => {
+                  action: async ({ menuOption }) => {
                     // eslint-disable-next-line no-console
-                    console.log(`Sub selected value was ${JSON.stringify(menuOptionResult.subValue)}`);
+                    console.log(`Sub selected value was ${JSON.stringify(menuOption.subValue)}`);
                     await wait(500);
                   },
                   subComponent: () => (

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

@@ -0,0 +1,60 @@
+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 { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+
+export default {
+  title: "GridForm / Samples",
+  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);
+
+  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>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormDropDown_ = Template.bind({});
+GridFormDropDown_.args = { options: [] };

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

@@ -0,0 +1,56 @@
+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 { 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",
+  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],
+  ];
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const anchorRefs = values.map(() => useRef<HTMLHeadingElement>(null));
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        {values.map((value, index) => (
+          <>
+            <h6 ref={anchorRefs[index]}>{value[0]}</h6>
+            <GridPopoverContext.Provider
+              value={
+                {
+                  anchorRef: anchorRefs[index],
+                  value: value[1],
+                } as any as GridPopoverContextType<any>
+              }
+            >
+              <GridFormEditBearing {...props} {...GridPopoverEditBearingEditorParams} />
+            </GridPopoverContext.Provider>
+          </>
+        ))}
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormEditBearing_ = Template.bind({});
+GridFormEditBearing_.args = {};