ResizeObserver: Use contentBoxSize

src/hooks/useGridDimensions.ts

@@ -7,8 +7,8 @@ export function useGridDimensions(): [
   height: number
 ] {
   const gridRef = useRef<HTMLDivElement>(null);
-  const [gridWidth, setGridWidth] = useState(1);
-  const [gridHeight, setGridHeight] = useState(1);
+  const [inlineSize, setInlineSize] = useState(1);
+  const [blockSize, setBlockSize] = useState(1);
 
   useLayoutEffect(() => {
     const { ResizeObserver } = window;
@@ -17,26 +17,35 @@ export function useGridDimensions(): [
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (ResizeObserver == null) return;
 
-    function saveDimensions() {
-      // Get dimensions without scrollbars.
-      // The dimensions given by the callback entries in Firefox do not substract the scrollbar sizes.
-      // https://bugzilla.mozilla.org/show_bug.cgi?id=1733042
-      const { clientWidth, clientHeight } = gridRef.current!;
+    const { clientWidth, clientHeight, offsetWidth, offsetHeight } = gridRef.current!;
+    const { width, height } = gridRef.current!.getBoundingClientRect();
+    const initialWidth = width - offsetWidth + clientWidth;
+    const initialHeight = height - offsetHeight + clientHeight;
+
+    setInlineSize(handleDevicePixelRatio(initialWidth));
+    setBlockSize(initialHeight);
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      const size = entries[0].contentBoxSize[0];
       // TODO: remove once fixed upstream
       // we reduce width by 1px here to avoid layout issues in Chrome
       // https://bugs.chromium.org/p/chromium/issues/detail?id=1206298
-      setGridWidth(clientWidth - (devicePixelRatio % 1 === 0 ? 0 : 1));
-      setGridHeight(clientHeight);
-    }
-
-    saveDimensions();
-    const resizeObserver = new ResizeObserver(saveDimensions);
+      setInlineSize(handleDevicePixelRatio(size.inlineSize));
+      setBlockSize(size.blockSize);
+    });
     resizeObserver.observe(gridRef.current!);
 
     return () => {
       resizeObserver.disconnect();
     };
   }, []);
 
-  return [gridRef, gridWidth, gridHeight];
+  return [gridRef, inlineSize, blockSize];
+}
+
+// TODO: remove once fixed upstream
+// we reduce width by 1px here to avoid layout issues in Chrome
+// https://bugs.chromium.org/p/chromium/issues/detail?id=1206298
+function handleDevicePixelRatio(size: number) {
+  return size - (devicePixelRatio % 1 === 0 ? 0 : 1);
 }

test/setup.ts

@@ -9,7 +9,9 @@ if (typeof window !== 'undefined') {
     }
 
     observe() {
-      this.callback([], this);
+      // patch inlineSize/blockSize to pretend we're rendering DataGrid at 1920p/1080p
+      // @ts-expect-error
+      this.callback([{ contentBoxSize: [{ inlineSize: 1920, blockSize: 1080 }] }], this);
     }
 
     unobserve() {}