refactor(popover): extract rect clamping logic and add tests

Author: jsilll

src/popover/__tests__/positions.test.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import {
   calculatePosition,
+  clampRectStart,
   intersectRectangles,
   isCenterOutside,
   PRIORITY_MAPPING,
@@ -280,3 +281,48 @@ describe('isCenterOutside', () => {
     ).toBe(false);
   });
 });
+
+describe('clampRectStart', () => {
+  const parent = { insetInlineStart: 100, insetBlockStart: 100, inlineSize: 400, blockSize: 300 };
+
+  test('clamps insetInlineStart to parent start when track is before parent', () => {
+    const track = { insetInlineStart: 50, insetBlockStart: 200, inlineSize: 20, blockSize: 20 };
+    expect(clampRectStart(track, parent).insetInlineStart).toBe(100);
+  });
+
+  test('clamps insetBlockStart to parent start when track is above parent', () => {
+    const track = { insetInlineStart: 200, insetBlockStart: 50, inlineSize: 20, blockSize: 20 };
+    expect(clampRectStart(track, parent).insetBlockStart).toBe(100);
+  });
+
+  test('clamps insetInlineStart to parent end when track is past parent', () => {
+    const track = { insetInlineStart: 600, insetBlockStart: 200, inlineSize: 20, blockSize: 20 };
+    expect(clampRectStart(track, parent).insetInlineStart).toBe(500);
+  });
+
+  test('clamps insetBlockStart to parent end when track is below parent', () => {
+    const track = { insetInlineStart: 200, insetBlockStart: 500, inlineSize: 20, blockSize: 20 };
+    expect(clampRectStart(track, parent).insetBlockStart).toBe(400);
+  });
+
+  test('does not clamp when track is within parent bounds', () => {
+    const track = { insetInlineStart: 200, insetBlockStart: 250, inlineSize: 20, blockSize: 20 };
+    const result = clampRectStart(track, parent);
+    expect(result.insetInlineStart).toBe(200);
+    expect(result.insetBlockStart).toBe(250);
+  });
+
+  test('clamps both axes simultaneously', () => {
+    const track = { insetInlineStart: 10, insetBlockStart: 500, inlineSize: 20, blockSize: 20 };
+    const result = clampRectStart(track, parent);
+    expect(result.insetInlineStart).toBe(100);
+    expect(result.insetBlockStart).toBe(400);
+  });
+
+  test('preserves inlineSize and blockSize of the track', () => {
+    const track = { insetInlineStart: 50, insetBlockStart: 50, inlineSize: 20, blockSize: 30 };
+    const result = clampRectStart(track, parent);
+    expect(result.inlineSize).toBe(20);
+    expect(result.blockSize).toBe(30);
+  });
+});

src/popover/use-popover-position.ts

@@ -13,7 +13,13 @@ import {
   scrollRectangleIntoView,
 } from '../internal/utils/scrollable-containers';
 import { BoundingBox, InternalPosition, Offset, PopoverProps, Rect } from './interfaces';
-import { calculatePosition, getDimensions, getOffsetDimensions, isCenterOutside } from './utils/positions';
+import {
+  calculatePosition,
+  clampRectStart,
+  getDimensions,
+  getOffsetDimensions,
+  isCenterOutside,
+} from './utils/positions';
 
 export default function usePopoverPosition({
   popoverRef,
@@ -271,8 +277,5 @@ function getClampedTrackRect(track: HTMLElement | SVGElement, parentRef?: HTMLEl
   if (!parentRef) {
     return trackRect;
   }
-  const parentRect = getLogicalBoundingClientRect(parentRef);
-  trackRect.insetInlineStart = Math.max(trackRect.insetInlineStart, parentRect.insetInlineStart);
-  trackRect.insetBlockStart = Math.max(trackRect.insetBlockStart, parentRect.insetBlockStart);
-  return trackRect;
+  return clampRectStart(trackRect, getLogicalBoundingClientRect(parentRef));
 }

src/popover/utils/positions.ts

@@ -345,6 +345,16 @@ function isTopOrBottom(internalPosition: InternalPosition) {
   return ['top', 'bottom'].includes(internalPosition.split('-')[0]);
 }
 
+export function clampRectStart<T extends BoundingBox>(rect: T, parentRect: BoundingBox): T {
+  const parentInlineEnd = parentRect.insetInlineStart + parentRect.inlineSize;
+  const parentBlockEnd = parentRect.insetBlockStart + parentRect.blockSize;
+  return {
+    ...rect,
+    insetInlineStart: Math.max(parentRect.insetInlineStart, Math.min(rect.insetInlineStart, parentInlineEnd)),
+    insetBlockStart: Math.max(parentRect.insetBlockStart, Math.min(rect.insetBlockStart, parentBlockEnd)),
+  } as T;
+}
+
 export function isCenterOutside(child: Rect, parent: Rect) {
   const childCenter = child.insetBlockStart + child.blockSize / 2;
   const overflowsBlockStart = childCenter < parent.insetBlockStart;