@linzjs/step-ag-grid 21.1.0 → 21.1.2

package/package.json

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

package/src/components/Grid.tsx

@@ -165,6 +165,8 @@ export const Grid = ({
   const hasSetContentSizeEmpty = useRef(false);
   const needsAutoSize = useRef(true);
 
+  const lastFullResize = useRef<number>();
+
   const setInitialContentSize = useCallback(() => {
     if (!gridDivRef.current?.clientWidth || rowData == null) {
       // Don't resize grids if they are offscreen as it doesn't work.
@@ -193,8 +195,13 @@ export const Grid = ({
         }
       } else if (gridRendered === "rows-visible") {
         if (!hasSetContentSize.current) {
-          hasSetContentSize.current = true;
-          params.onContentSize?.(result);
+          if (lastFullResize.current === result.width) {
+            hasSetContentSize.current = true;
+            params.onContentSize?.(result);
+          } else {
+            needsAutoSize.current = true;
+          }
+          lastFullResize.current = result.width;
         }
       } else {
         // It should be impossible to get here

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);