@linzjs/step-ag-grid 21.1.1 → 21.1.3

package/package.json

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

package/src/components/GridNoRowsOverlay.tsx

@@ -1,7 +1,12 @@
 import { LuiStatusSpinner } from "@linzjs/lui";
+import { ForwardedRef, forwardRef } from "react";
 
-const GridLoadingOverlayComponent = (props: { headerRowHeight: number }) => (
+const GridLoadingOverlayComponentFr = (
+  props: { headerRowHeight: number },
+  externalRef: ForwardedRef<HTMLDivElement>,
+) => (
   <div
+    ref={externalRef}
     style={{
       left: 0,
       top: 0,
@@ -19,6 +24,8 @@ const GridLoadingOverlayComponent = (props: { headerRowHeight: number }) => (
   </div>
 );
 
+const GridLoadingOverlayComponent = forwardRef(GridLoadingOverlayComponentFr);
+
 export interface GridNoRowsOverlayProps {
   loading: boolean;
   rowCount: number | undefined | null;
@@ -28,10 +35,17 @@ export interface GridNoRowsOverlayProps {
   headerRowHeight: number;
 }
 
-export const GridNoRowsOverlay = (props: GridNoRowsOverlayProps) => {
-  if (props.loading) return <GridLoadingOverlayComponent headerRowHeight={props.headerRowHeight} />;
-  if (props.rowCount === 0) return <div>{props.noRowsOverlayText ?? "There are currently no rows"}</div>;
-  if (props.filteredRowCount === 0)
-    return <div>{props.noRowsMatchingOverlayText ?? "All rows have been filtered"}</div>;
-  return <span />;
+export const GridNoRowsOverlayFr = (props: GridNoRowsOverlayProps, externalRef: ForwardedRef<HTMLDivElement>) => {
+  if (props.loading) {
+    return <GridLoadingOverlayComponent ref={externalRef} headerRowHeight={props.headerRowHeight} />;
+  }
+  if (props.rowCount === 0) {
+    return <div ref={externalRef}>{props.noRowsOverlayText ?? "There are currently no rows"}</div>;
+  }
+  if (props.filteredRowCount === 0) {
+    return <div ref={externalRef}>{props.noRowsMatchingOverlayText ?? "All rows have been filtered"}</div>;
+  }
+  return <div ref={externalRef} />;
 };
+
+export const GridNoRowsOverlay = forwardRef(GridNoRowsOverlayFr);

package/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { GridBaseRow } from "../Grid";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormMultiSelect, GridFormMultiSelectProps } from "../gridForm/GridFormMultiSelect";
@@ -11,7 +12,7 @@ export const GridPopoutEditMultiSelect = <TData extends GridBaseRow, TValue = an
     editor: GridFormMultiSelect,
     ...props,
     editorParams: {
-      className: "GridMultiSelect-containerMedium",
       ...(props.editorParams as GridFormMultiSelectProps<TData>),
+      className: clsx("GridMultiSelect-containerMedium", props.editorParams?.className),
     },
   });

package/src/components/gridPopoverEdit/GridPopoutEditMultiSelectGrid.ts

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { GridBaseRow } from "../Grid";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormMultiSelectGrid, GridFormMultiSelectGridProps } from "../gridForm/GridFormMultiSelectGrid";
@@ -11,7 +12,7 @@ export const GridPopoutEditMultiSelectGrid = <TData extends GridBaseRow, TValue
     editor: GridFormMultiSelectGrid,
     ...props,
     editorParams: {
-      className: "GridMultiSelect-containerMedium",
       ...(props.editorParams as GridFormMultiSelectGridProps<TData>),
+      className: clsx("GridMultiSelect-containerMedium", props.editorParams?.className),
     },
   });

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { GridBaseRow } from "../Grid";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormDropDown, GridFormDropDownProps } from "../gridForm/GridFormDropDown";
@@ -11,8 +12,7 @@ export const GridPopoverEditDropDown = <TData extends GridBaseRow, TValue = any>
     editor: GridFormDropDown,
     ...props,
     editorParams: {
-      // Defaults to large size container
-      className: "GridPopoverEditDropDown-containerLarge",
       ...(props.editorParams as GridFormDropDownProps<TData>),
+      className: clsx("GridPopoverEditDropDown-containerLarge", props.editorParams?.className),
     },
   });