Update to upstream @floating-ui/[email protected]

[github-actions]

Release
@floating-ui/[email protected]

Diff for packages/dom

Diff

diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md
index 467beccd..1817c05e 100644
--- a/packages/dom/CHANGELOG.md
+++ b/packages/dom/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @floating-ui/dom
 
+## 1.6.9
+
+### Patch Changes
+
+- fix: test if `frameElement` is readable to avoid errors in Safari and MSEdge with cross-origin iframes
+- Update dependencies: `@floating-ui/[email protected]`
+
+## 1.6.8
+
+### Patch Changes
+
+- Update dependencies: `@floating-ui/[email protected]`
+
 ## 1.6.7
 
 ### Patch Changes
diff --git a/packages/dom/package.json b/packages/dom/package.json
index ab86c91a..cc036068 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@floating-ui/dom",
-  "version": "1.6.7",
+  "version": "1.6.9",
   "description": "Floating UI for the web",
   "publishConfig": {
     "access": "public"
diff --git a/packages/dom/src/utils/getBoundingClientRect.ts b/packages/dom/src/utils/getBoundingClientRect.ts
index 45e8602a..b2c34fcb 100644
--- a/packages/dom/src/utils/getBoundingClientRect.ts
+++ b/packages/dom/src/utils/getBoundingClientRect.ts
@@ -8,6 +8,7 @@ import {isElement} from '../platform/isElement';
 import {getVisualOffsets, shouldAddVisualOffsets} from './getVisualOffsets';
 import {unwrapElement} from './unwrapElement';
 import type {VirtualElement} from '../types';
+import { getFrameElement } from '@floating-ui/utils/dom';
 
 export function getBoundingClientRect(
   element: Element | VirtualElement,
@@ -50,7 +51,7 @@ export function getBoundingClientRect(
         : offsetParent;
 
     let currentWin = win;
-    let currentIFrame = currentWin.frameElement;
+    let currentIFrame = getFrameElement(currentWin);
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
@@ -72,7 +73,7 @@ export function getBoundingClientRect(
       y += top;
 
       currentWin = getWindow(currentIFrame);
-      currentIFrame = currentWin.frameElement;
+      currentIFrame = getFrameElement(currentWin);
     }
   }
 
diff --git a/packages/dom/test/functional/top-layer.test.ts b/packages/dom/test/functional/top-layer.test.ts
index 077bcebb..152a842c 100644
--- a/packages/dom/test/functional/top-layer.test.ts
+++ b/packages/dom/test/functional/top-layer.test.ts
@@ -245,3 +245,14 @@ test('fixed inside dialog with outer containing block', async ({page}) => {
     `top-layer.dialog.outer.png`,
   );
 });
+
+test('top layer containing block with inner floating element', async ({
+  page,
+}) => {
+  await page.goto('http://localhost:1234/top-layer');
+  await click(page, '[data-testid="inner-true"]');
+
+  expect(await page.locator('#inner-dialog').screenshot()).toMatchSnapshot(
+    `top-layer.dialog.inner.png`,
+  );
+});
diff --git a/packages/dom/test/functional/top-layer.test.ts-snapshots/top-layer-dialog-inner-linux.png b/packages/dom/test/functional/top-layer.test.ts-snapshots/top-layer-dialog-inner-linux.png
new file mode 100644
index 00000000..a2c09099
Binary files /dev/null and b/packages/dom/test/functional/top-layer.test.ts-snapshots/top-layer-dialog-inner-linux.png differ
diff --git a/packages/dom/test/visual/spec/TopLayer.tsx b/packages/dom/test/visual/spec/TopLayer.tsx
index 28b4e26b..bb407c4a 100644
--- a/packages/dom/test/visual/spec/TopLayer.tsx
+++ b/packages/dom/test/visual/spec/TopLayer.tsx
@@ -30,16 +30,40 @@ function OuterTopLayer() {
   }, []);
 
   return (
-    <>
-      <div style={{containerType: 'inline-size'}}>
-        <dialog id="outer-dialog" ref={handleDialogRef}>
-          <button ref={refs.setReference}>My button</button>
-          <div ref={refs.setFloating} style={floatingStyles}>
-            My tooltip
-          </div>
-        </dialog>
+    <div style={{containerType: 'inline-size'}}>
+      <dialog id="outer-dialog" ref={handleDialogRef}>
+        <button ref={refs.setReference}>My button</button>
+        <div ref={refs.setFloating} style={floatingStyles}>
+          My tooltip
+        </div>
+      </dialog>
+    </div>
+  );
+}
+
+function InnerTopLayer() {
+  const {refs, floatingStyles} = useFloating({
+    strategy: 'fixed',
+    whileElementsMounted: autoUpdate,
+  });
+
+  const handleDialogRef = useCallback((node: HTMLDialogElement | null) => {
+    if (node) {
+      node.showModal();
+    }
+  }, []);
+
+  return (
+    <dialog
+      id="inner-dialog"
+      ref={handleDialogRef}
+      style={{containerType: 'inline-size', width: 300, height: 300}}
+    >
+      <button ref={refs.setReference}>My button</button>
+      <div ref={refs.setFloating} style={floatingStyles}>
+        My tooltip
       </div>
-    </>
+    </dialog>
   );
 }
 
@@ -174,6 +198,7 @@ export function TopLayer() {
   const [layoutStyles, setLayoutStyles] = useState(true);
   const [strategy, setStrategy] = useState<'absolute' | 'fixed'>('fixed');
   const [outer, setOuter] = useState(false);
+  const [inner, setInner] = useState(false);
 
   const {refs, floatingStyles, x, y} = useFloating({
     strategy,
@@ -222,6 +247,7 @@ export function TopLayer() {
         Top Layer
       </h1>
       {outer && <OuterTopLayer />}
+      {inner && <InnerTopLayer />}
       <Stack {...stackProps}>
         <div
           className={classes}
@@ -406,6 +432,22 @@ export function TopLayer() {
           </button>
         ))}
       </Controls>
+
+      <h2>inner</h2>
+      <Controls>
+        {BOOLS.map((bool) => (
+          <button
+            key={String(bool)}
+            data-testid={`inner-${bool}`}
+            onClick={() => setInner(bool)}
+            style={{
+              backgroundColor: bool === inner ? 'black' : '',
+            }}
+          >
+            {String(bool)}
+          </button>
+        ))}
+      </Controls>
     </>
   );
 }

Full diff
1.6.7...1.6.9.