refactor: enhance createElementBounds utility with transform accumulation

- Refactored the createElementBounds utility to utilize the new getAccumulatedTransform function, improving the handling of element transformations.
- Updated the import statements to include additional transformation utilities for better modularity and clarity.

Author: aidenybai

packages/react-grab/src/utils/create-element-bounds.ts

@@ -1,10 +1,50 @@
 import type { OverlayBounds } from "../types.js";
-import { stripTranslateFromTransformString } from "./strip-translate-from-transform.js";
+import {
+  stripTranslateFromMatrix,
+  stripTranslateFromTransformString,
+} from "./strip-translate-from-transform.js";
+
+const MAX_ANCESTOR_DEPTH = 6;
+const EARLY_BAIL_DEPTH = 3;
+
+const getAccumulatedTransform = (
+  element: Element,
+  selfTransform: string,
+): string => {
+  const hasSelfTransform = selfTransform && selfTransform !== "none";
+
+  let accumulated: DOMMatrix | null = null;
+  let current = element.parentElement;
+  let depth = 0;
+
+  while (current && current !== document.documentElement && depth < MAX_ANCESTOR_DEPTH) {
+    const t = window.getComputedStyle(current).transform;
+    if (t && t !== "none") {
+      accumulated = accumulated
+        ? new DOMMatrix(t).multiply(accumulated)
+        : new DOMMatrix(t);
+    } else if (!hasSelfTransform && !accumulated && depth >= EARLY_BAIL_DEPTH) {
+      return "none";
+    }
+    current = current.parentElement;
+    depth++;
+  }
+
+  if (!accumulated) {
+    return hasSelfTransform ? stripTranslateFromTransformString(selfTransform) : "none";
+  }
+
+  if (hasSelfTransform) {
+    accumulated = accumulated.multiply(new DOMMatrix(selfTransform));
+  }
+
+  return stripTranslateFromMatrix(accumulated);
+};
 
 export const createElementBounds = (element: Element): OverlayBounds => {
   const rect = element.getBoundingClientRect();
   const style = window.getComputedStyle(element);
-  const transform = stripTranslateFromTransformString(style.transform);
+  const transform = getAccumulatedTransform(element, style.transform);
 
   if (transform !== "none" && element instanceof HTMLElement) {
     const ow = element.offsetWidth;

packages/react-grab/src/utils/strip-translate-from-transform.ts

@@ -93,6 +93,30 @@ export const stripTranslateFromTransformString = (transform: string): string =>
   return "none";
 };
 
+/**
+ * Strips translation from a DOMMatrix, returning a CSS matrix string.
+ */
+export const stripTranslateFromMatrix = (matrix: DOMMatrix): string => {
+  if (matrix.isIdentity) return "none";
+
+  if (matrix.is2D) {
+    if (isIdentityMatrix2d(matrix.a, matrix.b, matrix.c, matrix.d)) return "none";
+    return `matrix(${matrix.a}, ${matrix.b}, ${matrix.c}, ${matrix.d}, 0, 0)`;
+  }
+
+  const m = matrix;
+  if (
+    m.m11 === 1 && m.m12 === 0 && m.m13 === 0 && m.m14 === 0 &&
+    m.m21 === 0 && m.m22 === 1 && m.m23 === 0 && m.m24 === 0 &&
+    m.m31 === 0 && m.m32 === 0 && m.m33 === 1 && m.m34 === 0 &&
+    m.m44 === 1
+  ) {
+    return "none";
+  }
+
+  return `matrix3d(${m.m11}, ${m.m12}, ${m.m13}, ${m.m14}, ${m.m21}, ${m.m22}, ${m.m23}, ${m.m24}, ${m.m31}, ${m.m32}, ${m.m33}, ${m.m34}, 0, 0, 0, ${m.m44})`;
+};
+
 /**
  * Strips translation components from a CSS transform while preserving other transformations.
  *