@linzjs/step-ag-grid 1.4.1 → 1.4.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "1.4.1",
+  "version": "1.4.4",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",

package/src/components/GridPopoverHook.tsx

@@ -5,6 +5,7 @@ import { ControlledMenu } from "@szhsin/react-menu";
 import { GridFormProps } from "./GridCell";
 import { hasParentClass } from "@utils/util";
 import { GridBaseRow } from "./Grid";
+import { isEmpty } from "lodash-es";
 
 export const useGridPopoverHook = <RowType extends GridBaseRow>(
   props: GridFormProps<RowType>,
@@ -84,7 +85,7 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(
           {anchorRef.current && (
             <ControlledMenu
               state={isOpen ? "open" : "closed"}
-              portal={true}
+              portal={isEmpty(document.querySelectorAll(".PopoutWindowContainer"))}
               unmountOnClose={true}
               anchorRef={anchorRef}
               menuClassName={"lui-menu"}

package/src/components/gridForm/GridFormDropDown.tsx

@@ -182,7 +182,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
               <MenuDivider key={`$$divider_${index}`} />
             ) : filteredValues.includes(item.value) ? null : (
               <MenuItem
-                key={`${item.value}`}
+                key={`${props.field}-${index}`}
                 disabled={!!item.disabled}
                 title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
                 value={item.value}

package/src/components/gridForm/GridFormPopoutMenu.tsx

@@ -21,7 +21,7 @@ export interface MenuOption<RowType> {
   label: JSX.Element | string | MenuSeparatorType;
   action?: (selectedRows: RowType[]) => Promise<boolean>;
   disabled?: string | boolean;
-  multiEdit: boolean;
+  supportsMultiEdit: boolean;
 }
 
 /**
@@ -65,7 +65,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
   const selectedRowCount = props.selectedRows.length;
 
   const filteredOptions = options?.filter((menuOption) => {
-    return menuOption.label === MenuSeparator || selectedRowCount === 1 || menuOption.multiEdit;
+    return menuOption.label === MenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
   });
 
   const { popoverWrapper } = useGridPopoverHook(props);

package/src/stories/components/GridPopoutEditDropDown.stories.tsx

@@ -8,10 +8,12 @@ import { GridContextProvider } from "@contexts/GridContextProvider";
 import { Grid, GridProps } from "@components/Grid";
 import { useCallback, useMemo, useState } from "react";
 import {
+  FinalSelectOption,
   GridFormDropDown,
   GridFormPopoutDropDownProps,
   MenuSeparator,
   MenuSeparatorString,
+  SelectOption,
 } from "@components/gridForm/GridFormDropDown";
 import { ColDef } from "ag-grid-community";
 import { wait } from "@utils/util";
@@ -43,6 +45,12 @@ interface ITestRow {
   position: string | null;
   position2: string | null;
   position3: string | null;
+  position4: ICode | null;
+}
+
+interface ICode {
+  code: string;
+  desc: string;
 }
 
 const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
@@ -65,6 +73,14 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
     ].filter((v) => (filter != null ? v != null && v.toLowerCase().indexOf(filter) === 0 : true));
   }, []);
 
+  const optionsObjects = useMemo(
+    () => [
+      { code: "O1", desc: "Object One" },
+      { code: "O2", desc: "Object Two" },
+    ],
+    [],
+  );
+
   const columnDefs = useMemo(
     () =>
       [
@@ -148,6 +164,21 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
             options: [null, "Architect", "Developer", "Product Owner", "Scrum Master", "Tester", "(other)"],
           },
         }),
+        GridPopoverEditDropDown<ITestRow, ITestRow["position4"]>({
+          field: "position4",
+          initialWidth: 65,
+          maxWidth: 150,
+          headerName: "Filtered (object)",
+          valueGetter: (params) => params.data.position4?.desc,
+          cellEditorParams: {
+            multiEdit: true,
+            filtered: "local",
+            filterPlaceholder: "Filter this",
+            options: optionsObjects.map((o) => {
+              return { value: o, label: o.desc, disabled: false };
+            }),
+          },
+        }),
       ] as ColDef[],
     [optionsFn],
   );
@@ -155,8 +186,20 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
   const rowData = useMemo(
     () =>
       [
-        { id: 1000, position: "Tester", position2: "1", position3: "Tester" },
-        { id: 1001, position: "Developer", position2: "2", position3: "Developer" },
+        {
+          id: 1000,
+          position: "Tester",
+          position2: "1",
+          position3: "Tester",
+          position4: { code: "O1", desc: "Object One" },
+        },
+        {
+          id: 1001,
+          position: "Developer",
+          position2: "2",
+          position3: "Developer",
+          position4: { code: "O2", desc: "Object Two" },
+        },
       ] as ITestRow[],
     [],
   );

package/src/stories/components/GridReadOnly.stories.tsx

@@ -98,7 +98,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
                   await wait(1500);
                   return true;
                 },
-                multiEdit: false,
+                supportsMultiEdit: false,
               },
               {
                 label: "Multi-edit",
@@ -107,12 +107,12 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
                   await wait(1500);
                   return true;
                 },
-                multiEdit: true,
+                supportsMultiEdit: true,
               },
               {
                 label: "Disabled item",
                 disabled: "Disabled for test",
-                multiEdit: true,
+                supportsMultiEdit: true,
               },
             ];
           },

package/src/utils/bearing.ts

@@ -13,6 +13,9 @@ export const bearingCorrectionValueFormatter = (params: ValueFormatterParams): s
   if (value == null) {
     return "-";
   }
+  if (typeof value === "string") {
+    return convertDDToDMS(bearingNumberParser(value), true, true);
+  }
   return convertDDToDMS(value, true, true);
 };
 
@@ -47,11 +50,11 @@ export const convertDDToDMS = (dd: number | null, showPositiveSymbol = true, add
   if (dd === 0) addTrailingZeros = false;
 
   // toFixed rounds parts up greater than 60, which has to be corrected below
-  const [bearingWholeString, beringDecimalString] = dd.toFixed(5).split(".");
+  const [bearingWholeString, bearingDecimalString] = dd.toFixed(5).split(".");
 
   let bearingWhole = Math.abs(parseInt(bearingWholeString));
-  let minNumeric = parseInt(beringDecimalString?.substring(0, 2));
-  let secNumeric = parseInt(beringDecimalString?.substring(2, 4));
+  let minNumeric = parseInt(bearingDecimalString?.substring(0, 2));
+  let secNumeric = parseInt(bearingDecimalString?.substring(2, 4));
 
   // If the toFixed caused rounding beyond 60 minutes/seconds then apply the carry
   if (secNumeric >= 60) {
@@ -68,7 +71,7 @@ export const convertDDToDMS = (dd: number | null, showPositiveSymbol = true, add
 
   const minString = minNumeric.toString().padStart(2, "0");
   const secString = secNumeric.toString().padStart(2, "0");
-  const deciSecString = beringDecimalString?.substring(4, 5);
+  const deciSecString = bearingDecimalString?.substring(4, 5);
 
   let dmsString = `${showPositiveSymbol && dd > 0 ? "+" : ""}${dd < 0 ? "-" : ""}${bearingWhole}°`;
   if (addTrailingZeros || deciSecString != "0") {