@linzjs/step-ag-grid 1.4.0 → 1.4.2

package/package.json

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

package/src/components/Grid.tsx

@@ -24,8 +24,9 @@ export interface GridProps {
   quickFilter?: boolean;
   quickFilterPlaceholder?: string;
   quickFilterValue?: string;
-  externalSelectedItems: any[];
-  setExternalSelectedItems: (items: any[]) => void;
+  domLayout?: GridOptions["domLayout"];
+  externalSelectedItems?: any[];
+  setExternalSelectedItems?: (items: any[]) => void;
   onGridReady?: GridOptions["onGridReady"];
   defaultColDef: GridOptions["defaultColDef"];
   columnDefs: GridOptions["columnDefs"];
@@ -59,16 +60,21 @@ export const Grid = (params: GridProps): JSX.Element => {
   /**
    * Ensure external selected items list is in sync with panel.
    */
-  const synchroniseExternalStateToGridSelection = ({ api }: SelectionChangedEvent) => {
-    const selectedRows = api.getSelectedRows();
-    // We don't want to update selected Items if it hasn't changed to prevent excess renders
-    if (
-      params.externalSelectedItems.length != selectedRows.length ||
-      isNotEmpty(xorBy(selectedRows, params.externalSelectedItems, (row) => row.id))
-    ) {
-      params.setExternalSelectedItems([...selectedRows]);
-    }
-  };
+  const synchroniseExternalStateToGridSelection = useCallback(
+    ({ api }: SelectionChangedEvent) => {
+      if (!params.externalSelectedItems || !params.setExternalSelectedItems) return;
+
+      const selectedRows = api.getSelectedRows();
+      // We don't want to update selected Items if it hasn't changed to prevent excess renders
+      if (
+        params.externalSelectedItems.length != selectedRows.length ||
+        isNotEmpty(xorBy(selectedRows, params.externalSelectedItems, (row) => row.id))
+      ) {
+        params.setExternalSelectedItems([...selectedRows]);
+      }
+    },
+    [params],
+  );
 
   /**
    * Synchronise externally selected items to grid.
@@ -76,6 +82,7 @@ export const Grid = (params: GridProps): JSX.Element => {
    */
   const synchroniseExternallySelectedItemsToGrid = useCallback(() => {
     if (!gridReady()) return;
+    if (!params.externalSelectedItems) return;
 
     const selectedIds = params.externalSelectedItems.map((row) => row.id) as number[];
     const lastNewId = last(difference(selectedIds, lastSelectedIds.current));
@@ -253,6 +260,7 @@ export const Grid = (params: GridProps): JSX.Element => {
         onCellDoubleClicked={onCellDoubleClick}
         onCellEditingStarted={refreshSelectedRows}
         onCellEditingStopped={onCellEditingStopped}
+        domLayout={params.domLayout}
         columnDefs={columnDefs}
         rowData={params.rowData}
         noRowsOverlayComponent={noRowsOverlayComponent}

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/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/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,
               },
             ];
           },