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 458f9c56..fee98593 100644
--- a/packages/dom/CHANGELOG.md
+++ b/packages/dom/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @floating-ui/dom
 
+## 1.6.6
+
+### Patch Changes
+
+- fix(getContainingBlock): detect top layer elements
+- fix(types): add optional `getClientRects()` method to `VirtualElement`
+- chore: fix internal deps
+- refactor: improve types and internal codebase consistency. All documented types are now exported.
+- Update dependencies: `@floating-ui/[email protected]`
+
 ## 1.6.5
 
 ### Patch Changes
diff --git a/packages/dom/package.json b/packages/dom/package.json
index 590b4967..01c1f9c4 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@floating-ui/dom",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "Floating UI for the web",
   "publishConfig": {
     "access": "public"
@@ -58,7 +58,7 @@
   ],
   "dependencies": {
     "@floating-ui/core": "^1.0.0",
-    "@floating-ui/utils": "^0.2.0"
+    "@floating-ui/utils": "workspace:^"
   },
   "devDependencies": {
     "@types/react": "^18.2.46",
diff --git a/packages/dom/src/autoUpdate.ts b/packages/dom/src/autoUpdate.ts
index 8d04015d..45681398 100644
--- a/packages/dom/src/autoUpdate.ts
+++ b/packages/dom/src/autoUpdate.ts
@@ -5,41 +5,37 @@ import type {FloatingElement, ReferenceElement} from './types';
 import {getBoundingClientRect} from './utils/getBoundingClientRect';
 import {unwrapElement} from './utils/unwrapElement';
 
-export type AutoUpdateOptions = Partial<{
+export interface AutoUpdateOptions {
   /**
    * Whether to update the position when an overflow ancestor is scrolled.
    * @default true
    */
-  ancestorScroll: boolean;
-
+  ancestorScroll?: boolean;
   /**
    * Whether to update the position when an overflow ancestor is resized. This
    * uses the native `resize` event.
    * @default true
    */
-  ancestorResize: boolean;
-
+  ancestorResize?: boolean;
   /**
    * Whether to update the position when either the reference or floating
    * elements resized. This uses a `ResizeObserver`.
    * @default true
    */
-  elementResize: boolean;
-
+  elementResize?: boolean;
   /**
    * Whether to update the position when the reference relocated on the screen
    * due to layout shift.
    * @default true
    */
-  layoutShift: boolean;
-
+  layoutShift?: boolean;
   /**
    * Whether to update on every animation frame if necessary. Only use if you
    * need to update the position in response to an animation using transforms.
    * @default false
    */
-  animationFrame: boolean;
-}>;
+  animationFrame?: boolean;
+}
 
 // https://samthor.au/2021/observing-dom/
 function observeMove(element: Element, onMove: () => void) {
diff --git a/packages/dom/src/index.ts b/packages/dom/src/index.ts
index a79c72d6..b027cd20 100644
--- a/packages/dom/src/index.ts
+++ b/packages/dom/src/index.ts
@@ -77,6 +77,7 @@ export type {
   ElementRects,
   InlineOptions,
   Length,
+  LimitShiftOptions,
   MiddlewareData,
   MiddlewareReturn,
   Padding,
@@ -87,4 +88,6 @@ export type {
   SideObject,
   Strategy,
 } from '@floating-ui/core';
+// This export exists only for backwards compatibility. It will be removed in
+// the next major version.
 export {getOverflowAncestors} from '@floating-ui/utils/dom';
diff --git a/packages/dom/src/platform/convertOffsetParentRelativeRectToViewportRelativeRect.ts b/packages/dom/src/platform/convertOffsetParentRelativeRectToViewportRelativeRect.ts
index 559682f9..938268f2 100644
--- a/packages/dom/src/platform/convertOffsetParentRelativeRectToViewportRelativeRect.ts
+++ b/packages/dom/src/platform/convertOffsetParentRelativeRectToViewportRelativeRect.ts
@@ -6,11 +6,11 @@ import {
   getNodeScroll,
   isHTMLElement,
   isOverflowElement,
+  isTopLayer,
 } from '@floating-ui/utils/dom';
 
 import {getBoundingClientRect} from '../utils/getBoundingClientRect';
 import {getScale} from './getScale';
-import {isTopLayer} from '../utils/isTopLayer';
 
 export function convertOffsetParentRelativeRectToViewportRelativeRect({
   elements,
diff --git a/packages/dom/src/platform/getClippingRect.ts b/packages/dom/src/platform/getClippingRect.ts
index d7251d33..8627c4e5 100644
--- a/packages/dom/src/platform/getClippingRect.ts
+++ b/packages/dom/src/platform/getClippingRect.ts
@@ -17,6 +17,7 @@ import {
   isHTMLElement,
   isLastTraversableNode,
   isOverflowElement,
+  isTopLayer,
 } from '@floating-ui/utils/dom';
 
 import type {Platform, ReferenceElement} from '../types';
@@ -26,7 +27,6 @@ import {getViewportRect} from '../utils/getViewportRect';
 import {getVisualOffsets} from '../utils/getVisualOffsets';
 import {getScale} from './getScale';
 import {isElement} from './isElement';
-import {isTopLayer} from '../utils/isTopLayer';
 
 type PlatformWithCache = Platform & {
   _c: Map<ReferenceElement, Element[]>;
diff --git a/packages/dom/src/platform/getOffsetParent.ts b/packages/dom/src/platform/getOffsetParent.ts
index 0d766e57..b416389f 100644
--- a/packages/dom/src/platform/getOffsetParent.ts
+++ b/packages/dom/src/platform/getOffsetParent.ts
@@ -8,8 +8,8 @@ import {
   isHTMLElement,
   isLastTraversableNode,
   isTableElement,
+  isTopLayer,
 } from '@floating-ui/utils/dom';
-import {isTopLayer} from '../utils/isTopLayer';
 import {isStaticPositioned} from '../utils/isStaticPositioned';
 
 type Polyfill = (element: HTMLElement) => Element | null;
diff --git a/packages/dom/src/types.ts b/packages/dom/src/types.ts
index 7fd64ee7..f405fef6 100644
--- a/packages/dom/src/types.ts
+++ b/packages/dom/src/types.ts
@@ -127,6 +127,7 @@ export type ComputePositionConfig = Prettify<
  */
 export interface VirtualElement {
   getBoundingClientRect(): ClientRectObject;
+  getClientRects?(): Array<ClientRectObject> | DOMRectList;
   contextElement?: Element;
 }
 
diff --git a/packages/dom/src/utils/getBoundingClientRect.ts b/packages/dom/src/utils/getBoundingClientRect.ts
index 1b02acb2..45e8602a 100644
--- a/packages/dom/src/utils/getBoundingClientRect.ts
+++ b/packages/dom/src/utils/getBoundingClientRect.ts
@@ -1,4 +1,4 @@
-import type {ClientRectObject, VirtualElement} from '@floating-ui/core';
+import type {ClientRectObject} from '@floating-ui/core';
 import {rectToClientRect} from '@floating-ui/core';
 import {createCoords} from '@floating-ui/utils';
 import {getComputedStyle, getWindow} from '@floating-ui/utils/dom';
@@ -7,6 +7,7 @@ import {getScale} from '../platform/getScale';
 import {isElement} from '../platform/isElement';
 import {getVisualOffsets, shouldAddVisualOffsets} from './getVisualOffsets';
 import {unwrapElement} from './unwrapElement';
+import type {VirtualElement} from '../types';
 
 export function getBoundingClientRect(
   element: Element | VirtualElement,
diff --git a/packages/dom/src/utils/getRectRelativeToOffsetParent.ts b/packages/dom/src/utils/getRectRelativeToOffsetParent.ts
index 626a37b6..b76d8ea3 100644
--- a/packages/dom/src/utils/getRectRelativeToOffsetParent.ts
+++ b/packages/dom/src/utils/getRectRelativeToOffsetParent.ts
@@ -1,4 +1,4 @@
-import type {Rect, Strategy, VirtualElement} from '@floating-ui/core';
+import type {Rect, Strategy} from '@floating-ui/core';
 import {createCoords} from '@floating-ui/utils';
 import {
   getNodeName,
@@ -7,6 +7,7 @@ import {
   isOverflowElement,
 } from '@floating-ui/utils/dom';
 
+import type {VirtualElement} from '../types';
 import {getDocumentElement} from '../platform/getDocumentElement';
 import {getBoundingClientRect} from './getBoundingClientRect';
 import {getWindowScrollBarX} from './getWindowScrollBarX';
diff --git a/packages/dom/src/utils/isTopLayer.ts b/packages/dom/src/utils/isTopLayer.ts
deleted file mode 100644
index 104a5e86..00000000
--- a/packages/dom/src/utils/isTopLayer.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-const topLayerSelectors = [':popover-open', ':modal'] as const;
-
-export function isTopLayer(element: Element): boolean {
-  return topLayerSelectors.some((selector) => {
-    try {
-      return element.matches(selector);
-    } catch (e) {
-      return false;
-    }
-  });
-}
diff --git a/packages/dom/test/functional/top-layer.test.ts b/packages/dom/test/functional/top-layer.test.ts
index 44699431..077bcebb 100644
--- a/packages/dom/test/functional/top-layer.test.ts
+++ b/packages/dom/test/functional/top-layer.test.ts
@@ -236,3 +236,12 @@ import {click} from './utils/click';
     );
   });
 });
+
+test('fixed inside dialog with outer containing block', async ({page}) => {
+  await page.goto('http://localhost:1234/top-layer');
+  await click(page, '[data-testid="outer-true"]');
+
+  expect(await page.locator('#outer-dialog').screenshot()).toMatchSnapshot(
+    `top-layer.dialog.outer.png`,
+  );
+});
diff --git a/packages/dom/test/functional/top-layer.test.ts-snapshots/top-layer-dialog-outer-linux.png b/packages/dom/test/functional/top-layer.test.ts-snapshots/top-layer-dialog-outer-linux.png
new file mode 100644
index 00000000..e5e60cac
Binary files /dev/null and b/packages/dom/test/functional/top-layer.test.ts-snapshots/top-layer-dialog-outer-linux.png differ
diff --git a/packages/dom/test/visual/spec/TopLayer.tsx b/packages/dom/test/visual/spec/TopLayer.tsx
index f08027cb..28b4e26b 100644
--- a/packages/dom/test/visual/spec/TopLayer.tsx
+++ b/packages/dom/test/visual/spec/TopLayer.tsx
@@ -1,5 +1,5 @@
 import {useFloating, autoUpdate, flip} from '@floating-ui/react-dom';
-import {useState} from 'react';
+import {useState, useCallback} from 'react';
 
 import {Controls} from '../utils/Controls';
 
@@ -17,6 +17,32 @@ type Props = {
   strategy: 'absolute' | 'fixed';
 };
 
+function OuterTopLayer() {
+  const {refs, floatingStyles} = useFloating({
+    strategy: 'fixed',
+    whileElementsMounted: autoUpdate,
+  });
+
+  const handleDialogRef = useCallback((node: HTMLDialogElement | null) => {
+    if (node) {
+      node.showModal();
+    }
+  }, []);
+
+  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>
+    </>
+  );
+}
+
 function NotStacked({children}: Props) {
   return children;
 }
@@ -147,6 +173,7 @@ export function TopLayer() {
   const [withMargin, setWithMargin] = useState(false);
   const [layoutStyles, setLayoutStyles] = useState(true);
   const [strategy, setStrategy] = useState<'absolute' | 'fixed'>('fixed');
+  const [outer, setOuter] = useState(false);
 
   const {refs, floatingStyles, x, y} = useFloating({
     strategy,
@@ -194,6 +221,7 @@ export function TopLayer() {
       >
         Top Layer
       </h1>
+      {outer && <OuterTopLayer />}
       <Stack {...stackProps}>
         <div
           className={classes}
@@ -362,6 +390,22 @@ export function TopLayer() {
           </button>
         ))}
       </Controls>
+
+      <h2>outer</h2>
+      <Controls>
+        {BOOLS.map((bool) => (
+          <button
+            key={String(bool)}
+            data-testid={`outer-${bool}`}
+            onClick={() => setOuter(bool)}
+            style={{
+              backgroundColor: bool === outer ? 'black' : '',
+            }}
+          >
+            {String(bool)}
+          </button>
+        ))}
+      </Controls>
     </>
   );
 }
diff --git a/packages/dom/test/visual/utils/useScroll.tsx b/packages/dom/test/visual/utils/useScroll.tsx
index 9810a8c6..4a2466fc 100644
--- a/packages/dom/test/visual/utils/useScroll.tsx
+++ b/packages/dom/test/visual/utils/useScroll.tsx
@@ -1,5 +1,9 @@
-import type {VirtualElement} from '@floating-ui/core';
-import {getOverflowAncestors, shift, useFloating} from '@floating-ui/react-dom';
+import {
+  getOverflowAncestors,
+  shift,
+  useFloating,
+  type VirtualElement,
+} from '@floating-ui/react-dom';
 import type {MutableRefObject} from 'react';
 import {useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {flushSync} from 'react-dom';

Full diff
1.6.5...1.6.6.