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

github-actions · 2024-09-15T16:01:40Z

Release
@floating-ui/[email protected]

Diff for packages/dom

Diff

diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md
index 1693d28e..d1dc8e5b 100644
--- a/packages/dom/CHANGELOG.md
+++ b/packages/dom/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @floating-ui/dom
 
+## 1.6.11
+
+### Patch Changes
+
+- fix: handle html relative offset
+- Update dependencies: `@floating-ui/[email protected]`
+
 ## 1.6.10
 
 ### Patch Changes
diff --git a/packages/dom/package.json b/packages/dom/package.json
index 11d07b41..8b9fe03c 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@floating-ui/dom",
-  "version": "1.6.10",
+  "version": "1.6.11",
   "description": "Floating UI for the web",
   "publishConfig": {
     "access": "public"
diff --git a/packages/dom/src/platform/getOffsetParent.ts b/packages/dom/src/platform/getOffsetParent.ts
index b416389f..1c93a09f 100644
--- a/packages/dom/src/platform/getOffsetParent.ts
+++ b/packages/dom/src/platform/getOffsetParent.ts
@@ -1,6 +1,7 @@
 import {
   getComputedStyle,
   getContainingBlock,
+  getDocumentElement,
   getParentNode,
   getWindow,
   isContainingBlock,
@@ -29,7 +30,17 @@ function getTrueOffsetParent(
     return polyfill(element);
   }
 
-  return element.offsetParent;
+  let rawOffsetParent = element.offsetParent;
+
+  // Firefox returns the <html> element as the offsetParent if it's non-static,
+  // while Chrome and Safari return the <body> element. The <body> element must
+  // be used to perform the correct calculations even if the <html> element is
+  // non-static.
+  if (getDocumentElement(element) === rawOffsetParent) {
+    rawOffsetParent = rawOffsetParent.ownerDocument.body;
+  }
+
+  return rawOffsetParent;
 }
 
 // Gets the closest ancestor positioned element. Handles some edge cases,
diff --git a/packages/dom/src/utils/getRectRelativeToOffsetParent.ts b/packages/dom/src/utils/getRectRelativeToOffsetParent.ts
index b76d8ea3..6bd9c657 100644
--- a/packages/dom/src/utils/getRectRelativeToOffsetParent.ts
+++ b/packages/dom/src/utils/getRectRelativeToOffsetParent.ts
@@ -43,12 +43,27 @@ export function getRectRelativeToOffsetParent(
       offsets.x = offsetRect.x + offsetParent.clientLeft;
       offsets.y = offsetRect.y + offsetParent.clientTop;
     } else if (documentElement) {
+      // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
+      // Firefox with layout.scrollbar.side = 3 in about:config to test this.
       offsets.x = getWindowScrollBarX(documentElement);
     }
   }
 
-  const x = rect.left + scroll.scrollLeft - offsets.x;
-  const y = rect.top + scroll.scrollTop - offsets.y;
+  let htmlX = 0;
+  let htmlY = 0;
+
+  if (documentElement && !isOffsetParentAnElement && !isFixed) {
+    const htmlRect = documentElement.getBoundingClientRect();
+    htmlY = htmlRect.top + scroll.scrollTop;
+    htmlX =
+      htmlRect.left +
+      scroll.scrollLeft -
+      // RTL <body> scrollbar.
+      getWindowScrollBarX(documentElement, htmlRect);
+  }
+
+  const x = rect.left + scroll.scrollLeft - offsets.x - htmlX;
+  const y = rect.top + scroll.scrollTop - offsets.y - htmlY;
 
   return {
     x,
diff --git a/packages/dom/src/utils/getWindowScrollBarX.ts b/packages/dom/src/utils/getWindowScrollBarX.ts
index 28f2fe1c..583f77f8 100644
--- a/packages/dom/src/utils/getWindowScrollBarX.ts
+++ b/packages/dom/src/utils/getWindowScrollBarX.ts
@@ -3,11 +3,14 @@ import {getNodeScroll} from '@floating-ui/utils/dom';
 import {getDocumentElement} from '../platform/getDocumentElement';
 import {getBoundingClientRect} from './getBoundingClientRect';
 
-export function getWindowScrollBarX(element: Element): number {
-  // If <html> has a CSS width greater than the viewport, then this will be
-  // incorrect for RTL.
-  return (
-    getBoundingClientRect(getDocumentElement(element)).left +
-    getNodeScroll(element).scrollLeft
-  );
+// If <html> has a CSS width greater than the viewport, then this will be
+// incorrect for RTL.
+export function getWindowScrollBarX(element: Element, rect?: DOMRect): number {
+  const leftScroll = getNodeScroll(element).scrollLeft;
+
+  if (!rect) {
+    return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+  }
+
+  return rect.left + leftScroll;
 }
diff --git a/packages/dom/test/functional/relative.test.ts b/packages/dom/test/functional/relative.test.ts
index 62e923fc..dd59d822 100644
--- a/packages/dom/test/functional/relative.test.ts
+++ b/packages/dom/test/functional/relative.test.ts
@@ -12,4 +12,15 @@ import {click} from './utils/click';
       `${node}.png`,
     );
   });
+
+  test(`correctly positioned on bottom when ${node} is an offsetParent with an offset of -100px`, async ({
+    page,
+  }) => {
+    await page.goto('http://localhost:1234/relative');
+    await click(page, `[data-testid="relative-${node}"]`);
+    await click(page, `[data-testid="offset-100"]`);
+    expect(await page.locator('.container').screenshot()).toMatchSnapshot(
+      `${node}-offset-100.png`,
+    );
+  });
 });
diff --git a/packages/dom/test/functional/relative.test.ts-snapshots/body-offset-100-linux.png b/packages/dom/test/functional/relative.test.ts-snapshots/body-offset-100-linux.png
new file mode 100644
index 00000000..46352077
Binary files /dev/null and b/packages/dom/test/functional/relative.test.ts-snapshots/body-offset-100-linux.png differ
diff --git a/packages/dom/test/functional/relative.test.ts-snapshots/html-offset-100-linux.png b/packages/dom/test/functional/relative.test.ts-snapshots/html-offset-100-linux.png
new file mode 100644
index 00000000..46352077
Binary files /dev/null and b/packages/dom/test/functional/relative.test.ts-snapshots/html-offset-100-linux.png differ
diff --git a/packages/dom/test/functional/relative.test.ts-snapshots/null-offset-100-linux.png b/packages/dom/test/functional/relative.test.ts-snapshots/null-offset-100-linux.png
new file mode 100644
index 00000000..bece7bf7
Binary files /dev/null and b/packages/dom/test/functional/relative.test.ts-snapshots/null-offset-100-linux.png differ
diff --git a/packages/dom/test/functional/relative.test.ts-snapshots/offsetParent-offset-100-linux.png b/packages/dom/test/functional/relative.test.ts-snapshots/offsetParent-offset-100-linux.png
new file mode 100644
index 00000000..bece7bf7
Binary files /dev/null and b/packages/dom/test/functional/relative.test.ts-snapshots/offsetParent-offset-100-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts b/packages/dom/test/functional/size.test.ts
index 2a394069..a65a0cfa 100644
--- a/packages/dom/test/functional/size.test.ts
+++ b/packages/dom/test/functional/size.test.ts
@@ -2,6 +2,7 @@ import {expect, test} from '@playwright/test';
 
 import {allPlacements} from '../visual/utils/allPlacements';
 import {click} from './utils/click';
+import {resize} from './utils/resize';
 import {scroll} from './utils/scroll';
 
 allPlacements.forEach((placement) => {
@@ -96,7 +97,8 @@ test('center aligned placements can fill the whole viewport along the crossAxis
   page,
 }) => {
   await page.goto('http://localhost:1234/size');
-  await click(page, `[data-testid="flipshift-true"]`);
+  await click(page, `[data-testid="flip-true"]`);
+  await click(page, `[data-testid="shift-before"]`);
 
   await scroll(page, {x: 325, y: 605});
 
@@ -107,10 +109,44 @@ test('center aligned placements can fill the whole viewport along the crossAxis
 
 test('edge aligned placements can fill the whole viewport along the crossAxis with shift', async ({
   page,
+}) => {
+  await page.goto('http://localhost:1234/size');
+  await click(page, `[data-testid="placement-bottom-start"]`);
+  await click(page, `[data-testid="shift-before"]`);
+
+  await scroll(page, {x: 620});
+
+  expect(await page.locator('.container').screenshot()).toMatchSnapshot(
+    `edge-aligned-shift-left-start.png`,
+  );
+
+  await resize(page, {width: 420});
+
+  expect(await page.locator('.container').screenshot()).toMatchSnapshot(
+    `edge-aligned-shift-left-end.png`,
+  );
+
+  await resize(page, {width: 300});
+  await scroll(page, {x: 395});
+
+  expect(await page.locator('.container').screenshot()).toMatchSnapshot(
+    `edge-aligned-shift-right-start.png`,
+  );
+
+  await resize(page, {width: 400});
+
+  expect(await page.locator('.container').screenshot()).toMatchSnapshot(
+    `edge-aligned-shift-right-end.png`,
+  );
+});
+
+test('edge aligned placements can fill the whole viewport on one side along the crossAxis when shift is after', async ({
+  page,
 }) => {
   await page.goto('http://localhost:1234/size');
   await click(page, `[data-testid="placement-right-start"]`);
-  await click(page, `[data-testid="flipshift-true"]`);
+  await click(page, `[data-testid="flip-true"]`);
+  await click(page, `[data-testid="shift-after"]`);
 
   await scroll(page, {x: 600, y: 800});
 
@@ -160,3 +196,27 @@ test('edge aligned placements can fill the whole viewport along the crossAxis wi
     `left-start-shift.png`,
   );
 });
+
+test('can fill the whole viewport along the main axis with shift.crossAxis', async ({
+  page,
+}) => {
+  await page.goto('http://localhost:1234/size');
+  await click(page, `[data-testid="shift-before"]`);
+  await click(page, `[data-testid="shift.crossAxis-true"]`);
+
+  expect(await page.locator('.container').screenshot()).toMatchSnapshot(
+    `shift-crossAxis-whole.png`,
+  );
+
+  await resize(page, {height: 170});
+
+  expect(await page.locator('.container').screenshot()).toMatchSnapshot(
+    `shift-crossAxis-top-start.png`,
+  );
+
+  await resize(page, {height: 300});
+
+  expect(await page.locator('.container').screenshot()).toMatchSnapshot(
+    `shift-crossAxis-top-end.png`,
+  );
+});
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/bottom-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/bottom-end-linux.png
index 0c836ef6..abcd89ac 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/bottom-end-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/bottom-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/bottom-end-rtl-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/bottom-end-rtl-linux.png
index 3272ed66..f3313143 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/bottom-end-rtl-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/bottom-end-rtl-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/bottom-left-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/bottom-left-end-linux.png
index 7588dbf4..bd9edcfb 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/bottom-left-end-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/bottom-left-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/bottom-left-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/bottom-left-start-linux.png
index f5072fa9..4a2ba9a8 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/bottom-left-start-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/bottom-left-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/bottom-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/bottom-linux.png
index 863f6e7b..98df91ef 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/bottom-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/bottom-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/bottom-right-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/bottom-right-end-linux.png
index 637273db..754e46e6 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/bottom-right-end-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/bottom-right-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/bottom-right-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/bottom-right-start-linux.png
index 6ddf39bd..d39baca5 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/bottom-right-start-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/bottom-right-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/bottom-rtl-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/bottom-rtl-linux.png
index ef6a2ff2..f22d95a6 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/bottom-rtl-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/bottom-rtl-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/bottom-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/bottom-start-linux.png
index ef811404..56bc9e49 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/bottom-start-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/bottom-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/bottom-start-rtl-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/bottom-start-rtl-linux.png
index 5a1a58ed..af69d131 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/bottom-start-rtl-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/bottom-start-rtl-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/center-aligned-shift-bottom-whole-width-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/center-aligned-shift-bottom-whole-width-linux.png
index b7224462..1e2e82e7 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/center-aligned-shift-bottom-whole-width-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/center-aligned-shift-bottom-whole-width-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/edge-aligned-shift-left-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/edge-aligned-shift-left-end-linux.png
new file mode 100644
index 00000000..3626f2d6
Binary files /dev/null and b/packages/dom/test/functional/size.test.ts-snapshots/edge-aligned-shift-left-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/edge-aligned-shift-left-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/edge-aligned-shift-left-start-linux.png
new file mode 100644
index 00000000..d77a9423
Binary files /dev/null and b/packages/dom/test/functional/size.test.ts-snapshots/edge-aligned-shift-left-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/edge-aligned-shift-right-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/edge-aligned-shift-right-end-linux.png
new file mode 100644
index 00000000..9747732b
Binary files /dev/null and b/packages/dom/test/functional/size.test.ts-snapshots/edge-aligned-shift-right-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/edge-aligned-shift-right-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/edge-aligned-shift-right-start-linux.png
new file mode 100644
index 00000000..0b06965c
Binary files /dev/null and b/packages/dom/test/functional/size.test.ts-snapshots/edge-aligned-shift-right-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/left-bottom-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/left-bottom-end-linux.png
index ea9ca32d..63fb1ffb 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/left-bottom-end-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/left-bottom-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/left-bottom-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/left-bottom-start-linux.png
index a359afc4..386cbd50 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/left-bottom-start-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/left-bottom-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/left-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/left-end-linux.png
index da5e4af0..3d14afe3 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/left-end-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/left-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/left-end-rtl-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/left-end-rtl-linux.png
index 299ebb96..749237aa 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/left-end-rtl-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/left-end-rtl-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/left-end-shift-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/left-end-shift-linux.png
index ffdde1fb..39dc45ed 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/left-end-shift-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/left-end-shift-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/left-end-shift-whole-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/left-end-shift-whole-linux.png
index 5e89ba39..353386d5 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/left-end-shift-whole-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/left-end-shift-whole-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/left-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/left-linux.png
index 24bbc31a..81f5735d 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/left-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/left-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/left-rtl-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/left-rtl-linux.png
index d21ac9f6..40638916 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/left-rtl-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/left-rtl-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/left-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/left-start-linux.png
index c3096ca3..009d3b7a 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/left-start-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/left-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/left-start-rtl-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/left-start-rtl-linux.png
index d18d6030..25cb4b1a 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/left-start-rtl-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/left-start-rtl-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/left-start-shift-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/left-start-shift-linux.png
index 6bc0c8e4..7497a60c 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/left-start-shift-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/left-start-shift-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/left-start-shift-whole-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/left-start-shift-whole-linux.png
index 10cbd992..e1906ea1 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/left-start-shift-whole-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/left-start-shift-whole-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/left-top-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/left-top-end-linux.png
index d5f2d4ca..a6555680 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/left-top-end-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/left-top-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/left-top-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/left-top-start-linux.png
index 4cb7e1b1..e67d066c 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/left-top-start-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/left-top-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/right-bottom-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/right-bottom-end-linux.png
index 774de436..3db395ce 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/right-bottom-end-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/right-bottom-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/right-bottom-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/right-bottom-start-linux.png
index e6f13a96..c5b9eb0c 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/right-bottom-start-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/right-bottom-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/right-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/right-end-linux.png
index 53365e28..0424f893 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/right-end-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/right-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/right-end-rtl-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/right-end-rtl-linux.png
index e5b99858..7238ca9e 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/right-end-rtl-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/right-end-rtl-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/right-end-shift-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/right-end-shift-linux.png
index f383e3c9..e4e15839 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/right-end-shift-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/right-end-shift-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/right-end-shift-whole-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/right-end-shift-whole-linux.png
index 5d7df44e..03777f65 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/right-end-shift-whole-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/right-end-shift-whole-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/right-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/right-linux.png
index 70a8a4cf..604db157 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/right-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/right-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/right-rtl-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/right-rtl-linux.png
index 9295fcb7..f3deb419 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/right-rtl-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/right-rtl-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/right-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/right-start-linux.png
index c3999060..ae682f65 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/right-start-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/right-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/right-start-rtl-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/right-start-rtl-linux.png
index 5a854e7a..a9f725cc 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/right-start-rtl-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/right-start-rtl-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/right-start-shift-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/right-start-shift-linux.png
index 69f4ba74..1cd6f748 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/right-start-shift-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/right-start-shift-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/right-start-shift-whole-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/right-start-shift-whole-linux.png
index 14d35e5d..aef82199 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/right-start-shift-whole-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/right-start-shift-whole-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/right-top-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/right-top-end-linux.png
index 4e65c036..dc5af495 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/right-top-end-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/right-top-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/right-top-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/right-top-start-linux.png
index c5b7cc80..5e273c17 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/right-top-start-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/right-top-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/shift-crossAxis-top-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/shift-crossAxis-top-end-linux.png
new file mode 100644
index 00000000..7561c4d5
Binary files /dev/null and b/packages/dom/test/functional/size.test.ts-snapshots/shift-crossAxis-top-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/shift-crossAxis-top-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/shift-crossAxis-top-start-linux.png
new file mode 100644
index 00000000..2075a0d3
Binary files /dev/null and b/packages/dom/test/functional/size.test.ts-snapshots/shift-crossAxis-top-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/shift-crossAxis-whole-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/shift-crossAxis-whole-linux.png
new file mode 100644
index 00000000..31b08b6c
Binary files /dev/null and b/packages/dom/test/functional/size.test.ts-snapshots/shift-crossAxis-whole-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/top-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/top-end-linux.png
index d7192181..207be0d4 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/top-end-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/top-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/top-end-rtl-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/top-end-rtl-linux.png
index 5d9ced5e..7c2d680b 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/top-end-rtl-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/top-end-rtl-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/top-left-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/top-left-end-linux.png
index 174846b8..7a21ef26 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/top-left-end-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/top-left-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/top-left-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/top-left-start-linux.png
index 3943128e..3d86e271 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/top-left-start-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/top-left-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/top-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/top-linux.png
index c5303b0c..cc807b4e 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/top-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/top-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/top-right-end-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/top-right-end-linux.png
index 31855531..5cc23d09 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/top-right-end-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/top-right-end-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/top-right-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/top-right-start-linux.png
index 8a942e74..85cb81cf 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/top-right-start-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/top-right-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/top-rtl-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/top-rtl-linux.png
index 7e471829..6d6a58bb 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/top-rtl-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/top-rtl-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/top-start-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/top-start-linux.png
index 1fe4e8f1..eb18b6ef 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/top-start-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/top-start-linux.png differ
diff --git a/packages/dom/test/functional/size.test.ts-snapshots/top-start-rtl-linux.png b/packages/dom/test/functional/size.test.ts-snapshots/top-start-rtl-linux.png
index ed1393db..39815add 100644
Binary files a/packages/dom/test/functional/size.test.ts-snapshots/top-start-rtl-linux.png and b/packages/dom/test/functional/size.test.ts-snapshots/top-start-rtl-linux.png differ
diff --git a/packages/dom/test/functional/transform.test.ts-snapshots/html-linux.png b/packages/dom/test/functional/transform.test.ts-snapshots/html-linux.png
index 23d424b4..3c68add5 100644
Binary files a/packages/dom/test/functional/transform.test.ts-snapshots/html-linux.png and b/packages/dom/test/functional/transform.test.ts-snapshots/html-linux.png differ
diff --git a/packages/dom/test/functional/utils/resize.ts b/packages/dom/test/functional/utils/resize.ts
new file mode 100644
index 00000000..8983ee63
--- /dev/null
+++ b/packages/dom/test/functional/utils/resize.ts
@@ -0,0 +1,26 @@
+import type {Dimensions} from '@floating-ui/core';
+
+/**
+ * Resizes an element to the provided dimensions.
+ */
+export async function resize(
+  page: any,
+  resizeDimensions: Partial<Dimensions>,
+  selector = '.resize',
+) {
+  await page.waitForSelector(selector);
+  return await page.evaluate(
+    ({width, height, selector}: Partial<Dimensions> & {selector: string}) => {
+      const resize = document.querySelector(selector);
+      if (resize && resize instanceof HTMLElement) {
+        if (width != null) {
+          resize.style.width = `${width}px`;
+        }
+        if (height != null) {
+          resize.style.height = `${height}px`;
+        }
+      }
+    },
+    {...resizeDimensions, selector},
+  );
+}
diff --git a/packages/dom/test/visual/index.css b/packages/dom/test/visual/index.css
index e910b9a4..cdcc5cfc 100644
--- a/packages/dom/test/visual/index.css
+++ b/packages/dom/test/visual/index.css
@@ -196,6 +196,14 @@ main {
   display: none;
 }
 
+.resize {
+  resize: both;
+  max-height: 480px;
+  max-width: 480px;
+  min-height: 120px;
+  min-width: 120px;
+}
+
 .prose {
   font-size: 1.125rem;
   color: #555;
diff --git a/packages/dom/test/visual/spec/Relative.tsx b/packages/dom/test/visual/spec/Relative.tsx
index ac51e551..e2db1fd8 100644
--- a/packages/dom/test/visual/spec/Relative.tsx
+++ b/packages/dom/test/visual/spec/Relative.tsx
@@ -8,6 +8,7 @@ export const NODES: Node[] = [null, 'html', 'body', 'offsetParent'];
 
 export function Relative() {
   const [node, setNode] = useState<Node>(null);
+  const [offset, setOffset] = useState(0);
   const {x, y, refs, strategy, update} = useFloating();
 
   useLayoutEffect(() => {
@@ -21,10 +22,12 @@ export function Relative() {
         element = document.body;
         break;
       default:
+        element = document.querySelector('.container');
     }
 
     if (element) {
       element.style.position = 'relative';
+      element.style.top = `${-offset}px`;
     }
 
     update();
@@ -32,9 +35,10 @@ export function Relative() {
     return () => {
       if (element) {
         element.style.position = '';
+        element.style.top = '';
       }
     };
-  }, [node, update]);
+  }, [node, offset, update]);
 
   return (
     <>
@@ -63,6 +67,7 @@ export function Relative() {
         </div>
       </div>
 
+      <h2>Node</h2>
       <Controls>
         {NODES.map((localNode) => (
           <button
@@ -77,6 +82,22 @@ export function Relative() {
           </button>
         ))}
       </Controls>
+
+      <h2>Offset</h2>
+      <Controls>
+        {[0, 100].map((localOffset) => (
+          <button
+            key={localOffset}
+            data-testid={`offset-${localOffset}`}
+            onClick={() => setOffset(localOffset)}
+            style={{
+              backgroundColor: offset === localOffset ? 'black' : '',
+            }}
+          >
+            {localOffset}
+          </button>
+        ))}
+      </Controls>
     </>
   );
 }
diff --git a/packages/dom/test/visual/spec/Size.tsx b/packages/dom/test/visual/spec/Size.tsx
index 75880d6f..f5645bbc 100644
--- a/packages/dom/test/visual/spec/Size.tsx
+++ b/packages/dom/test/visual/spec/Size.tsx
@@ -2,6 +2,7 @@ import type {Placement} from '@floating-ui/core';
 import {
   autoUpdate,
   flip,
+  limitShift,
   shift,
   size,
   useFloating,
@@ -10,21 +11,34 @@ import {useState} from 'react';
 
 import {allPlacements} from '../utils/allPlacements';
 import {Controls} from '../utils/Controls';
+import {useResize} from '../utils/useResize';
 import {useScroll} from '../utils/useScroll';
 
+type ShiftOrder = 'none' | 'before' | 'after';
+const SHIFT_ORDERS: ShiftOrder[] = ['none', 'before', 'after'];
+
 export function Size() {
   const [rtl, setRtl] = useState(false);
   const [placement, setPlacement] = useState<Placement>('bottom');
-  const [addFlipShift, setAddFlipShift] = useState(false);
+  const [addFlip, setAddFlip] = useState(false);
+  const [addShift, setAddShift] = useState<ShiftOrder>('none');
+  const [shiftCrossAxis, setShiftCrossAxis] = useState(false);
+  const [shiftLimiter, setShiftLimiter] = useState(false);
 
   const hasEdgeAlignment = placement.includes('-');
 
+  const shiftOptions = {
+    padding: 10,
+    crossAxis: shiftCrossAxis,
+    limiter: shiftLimiter ? limitShift({offset: 50}) : undefined,
+  };
+
   const {x, y, strategy, update, refs} = useFloating({
     placement,
     whileElementsMounted: autoUpdate,
     middleware: [
-      addFlipShift && flip({padding: 10}),
-      addFlipShift && !hasEdgeAlignment && shift({padding: 10}),
+      addFlip && flip({padding: 10}),
+      addShift === 'before' && shift(shiftOptions),
       size({
         apply({availableHeight, availableWidth, elements}) {
           Object.assign(elements.floating.style, {
@@ -34,11 +48,12 @@ export function Size() {
         },
         padding: 10,
       }),
-      addFlipShift && hasEdgeAlignment && shift({padding: 10}),
+      addShift === 'after' && shift(shiftOptions),
     ],
   });
 
   const {scrollRef, indicator} = useScroll({refs, update, rtl});
+  useResize(scrollRef, update);
 
   return (
     <>
@@ -46,7 +61,7 @@ export function Size() {
       <p></p>
       <div className="container" style={{direction: rtl ? 'rtl' : 'ltr'}}>
         <div
-          className="scroll"
+          className="scroll resize"
           data-x
           style={{position: 'relative'}}
           ref={scrollRef}
@@ -64,8 +79,13 @@ export function Size() {
               left: x ?? '',
               width: 400,
               height: 300,
-              ...(addFlipShift && {
-                width: 600,
+              ...(addShift !== 'none' && {
+                width:
+                  addShift === 'before' && shiftCrossAxis
+                    ? 100
+                    : addShift === 'before' && hasEdgeAlignment
+                      ? 360
+                      : 600,
                 height: 600,
               }),
             }}
@@ -107,21 +127,73 @@ export function Size() {
         ))}
       </Controls>
 
-      <h2>Add flip and shift</h2>
+      <h2>Add flip</h2>
       <Controls>
         {[true, false].map((bool) => (
           <button
             key={String(bool)}
-            data-testid={`flipshift-${bool}`}
-            onClick={() => setAddFlipShift(bool)}
+            data-testid={`flip-${bool}`}
+            onClick={() => setAddFlip(bool)}
             style={{
-              backgroundColor: addFlipShift === bool ? 'black' : '',
+              backgroundColor: addFlip === bool ? 'black' : '',
             }}
           >
             {String(bool)}
           </button>
         ))}
       </Controls>
+
+      <h2>Add shift</h2>
+      <Controls>
+        {SHIFT_ORDERS.map((str) => (
+          <button
+            key={str}
+            data-testid={`shift-${str}`}
+            onClick={() => setAddShift(str)}
+            style={{
+              backgroundColor: addShift === str ? 'black' : '',
+            }}
+          >
+            {str}
+          </button>
+        ))}
+      </Controls>
+
+      {addShift !== 'none' && (
+        <>
+          <h3>shift.crossAxis</h3>
+          <Controls>
+            {[true, false].map((bool) => (
+              <button
+                key={String(bool)}
+                data-testid={`shift.crossAxis-${bool}`}
+                onClick={() => setShiftCrossAxis(bool)}
+                style={{
+                  backgroundColor: shiftCrossAxis === bool ? 'black' : '',
+                }}
+              >
+                {String(bool)}
+              </button>
+            ))}
+          </Controls>
+
+          <h3>shift.limiter</h3>
+          <Controls>
+            {[true, false].map((bool) => (
+              <button
+                key={String(bool)}
+                data-testid={`shift.limiter-${bool}`}
+                onClick={() => setShiftLimiter(bool)}
+                style={{
+                  backgroundColor: shiftLimiter === bool ? 'black' : '',
+                }}
+              >
+                {String(bool)}
+              </button>
+            ))}
+          </Controls>
+        </>
+      )}
     </>
   );
 }
diff --git a/packages/dom/test/visual/utils/useResize.ts b/packages/dom/test/visual/utils/useResize.ts
new file mode 100644
index 00000000..cceed7b2
--- /dev/null
+++ b/packages/dom/test/visual/utils/useResize.ts
@@ -0,0 +1,28 @@
+import type {MutableRefObject} from 'react';
+import {useEffect, useRef} from 'react';
+
+export const useResize = (
+  ref: MutableRefObject<Element | null>,
+  callback: ResizeObserverCallback,
+) => {
+  const callbackRef = useRef<ResizeObserverCallback | null>(null);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  useEffect(() => {
+    let cleanup;
+    if (typeof ResizeObserver === 'function') {
+      const el = ref.current;
+      const observer = new ResizeObserver(
+        (entries, observer) => callbackRef.current?.(entries, observer),
+      );
+      el && observer.observe(el);
+      cleanup = () => {
+        el && observer.unobserve(el);
+      };
+    }
+    return cleanup;
+  }, [ref, callback]);
+};

Full diff
1.6.10...1.6.11.

DanielleHuisman force-pushed the upstream/dom-1.6.11 branch 3 times, most recently from 3626928 to 5c9c1db Compare September 17, 2024 18:56

github-actions bot and others added 3 commits September 23, 2024 13:18

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

10f010f

Fix handling HTML relative offset

60be9b0

Fill viewport along an axis if shift is enabled on that axis

33aeff5

DanielleHuisman force-pushed the upstream/dom-1.6.11 branch from 5c9c1db to 33aeff5 Compare September 23, 2024 11:18

DanielleHuisman marked this pull request as ready for review September 23, 2024 11:23

DanielleHuisman merged commit e85287f into main Sep 23, 2024
2 of 3 checks passed

DanielleHuisman deleted the upstream/dom-1.6.11 branch September 23, 2024 11:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

github-actions bot commented Sep 15, 2024

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

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

Conversation

github-actions bot commented Sep 15, 2024