Update to upstream @floating-ui/dom@1.6.8

[github-actions]

Release
@floating-ui/dom@1.6.8

Diff for packages/dom

Diff

diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md
index 467beccd..eef3fce5 100644
--- a/packages/dom/CHANGELOG.md
+++ b/packages/dom/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @floating-ui/dom
 
+## 1.6.8
+
+### Patch Changes
+
+- Update dependencies: `@floating-ui/utils@0.2.5`
+
 ## 1.6.7
 
 ### Patch Changes
diff --git a/packages/dom/package.json b/packages/dom/package.json
index ab86c91a..f1baf026 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.8",
   "description": "Floating UI for the web",
   "publishConfig": {
     "access": "public"
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.8.