@linzjs/step-ag-grid 7.19.6 → 8.1.0

package/src/lui/ActionButton.tsx

@@ -21,6 +21,7 @@ export interface ActionButtonProps {
   onClick: () => Promise<void> | void;
   level?: LuiButtonProps["level"];
   style?: CSSProperties;
+  disabled?: boolean;
 }
 
 // Kept this less than one second, so I don't have issues with waitFor as it defaults to 1s
@@ -30,6 +31,7 @@ export const ActionButton = ({
   icon,
   name,
   inProgressName,
+  disabled,
   dataTestId,
   style,
   className,
@@ -83,7 +85,7 @@ export const ActionButton = ({
           setInProgress(false);
         }
       }}
-      disabled={localInProgress}
+      disabled={localInProgress || disabled}
     >
       {iconPosition === "right" && buttonText}
       {localInProgress ? (

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/react-menu3/styles/index.scss

@@ -71,3 +71,7 @@
     text-transform: uppercase;
   }
 }
+
+.react-menu-inline-test .szh-menu-container, .react-menu-inline-test .szh-menu {
+  position: static !important;
+}

package/src/stories/components/ActionButton.stories.tsx

@@ -39,6 +39,17 @@ const ActionButtonTemplate: ComponentStory<typeof ActionButton> = () => {
         className={"ActionButton-fill"}
         style={{ maxWidth: 160 }}
       />
+      <br />
+      <ActionButton
+        icon={"ic_arrow_forward_right"}
+        name={"Disabled"}
+        onClick={performAction}
+        iconPosition={"right"}
+        level={"secondary"}
+        className={"ActionButton-fill"}
+        style={{ maxWidth: 160 }}
+        disabled={true}
+      />
     </>
   );
 };

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,109 @@
+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 { 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: GridFormDropDown,
+  args: {},
+} as ComponentMeta<typeof GridFormDropDown>;
+
+const Template: ComponentStory<typeof GridFormDropDown> = (props) => {
+  const configs: [string, GridFormPopoutDropDownProps<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>
+        {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({});

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

@@ -0,0 +1,54 @@
+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 { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { GridPopoverEditBearingEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
+
+export default {
+  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],
+  ];
+  // 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 = {};

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

@@ -0,0 +1,54 @@
+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 { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { GridPopoverEditBearingCorrectionEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
+
+export default {
+  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],
+  ];
+  // 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} {...GridPopoverEditBearingCorrectionEditorParams} />
+            </GridPopoverContext.Provider>
+          </>
+        ))}
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormEditBearingCorrection_ = Template.bind({});
+GridFormEditBearingCorrection_.args = {};

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

@@ -0,0 +1,32 @@
+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({});
+GridFormMessage_.args = {};

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/utils/bearing.ts

@@ -1,22 +1,20 @@
-import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
-
-export const bearingValueFormatter = (params: ValueFormatterParams): string => {
-  const value = typeof params.value == "string" ? parseFloat(params.value) : params.value;
-  if (value == null) {
+export const bearingValueFormatter = (value: any): string => {
+  const safeValue = typeof value == "string" ? parseFloat(value) : value;
+  if (safeValue == null) {
     return "–";
   }
-  return convertDDToDMS(value, false, false);
+  return convertDDToDMS(safeValue, false, false);
 };
 
-export const bearingCorrectionValueFormatter = (params: ValueFormatterParams): string => {
-  const value = params.value;
-  if (value == null) {
+export const bearingCorrectionValueFormatter = (value: any): string => {
+  const safeValue = value;
+  if (safeValue == null) {
     return "–";
   }
-  if (typeof value === "string") {
-    return convertDDToDMS(bearingNumberParser(value), true, true);
+  if (typeof safeValue === "string") {
+    return convertDDToDMS(bearingNumberParser(safeValue), true, true);
   }
-  return convertDDToDMS(value, true, true);
+  return convertDDToDMS(safeValue, true, true);
 };
 
 export const bearingNumberParser = (value: string): number | null => {