@octanejs/resizable-panels 0.0.1

package/src/global/styles/sizeStyleToPixels.ts

@@ -0,0 +1,48 @@
+import { convertEmToPixels } from './convertEmToPixels';
+import { convertRemToPixels } from './convertRemToPixels';
+import { convertVhToPixels } from './convertVhToPixels';
+import { convertVwToPixels } from './convertVwToPixels';
+import { parseSizeAndUnit } from './parseSizeAndUnit';
+
+export function sizeStyleToPixels({
+	groupSize,
+	panelElement,
+	styleProp,
+}: {
+	groupSize: number;
+	panelElement: HTMLElement;
+	styleProp: number | string;
+}) {
+	let pixels: number | undefined = undefined;
+
+	const [size, unit] = parseSizeAndUnit(styleProp);
+
+	switch (unit) {
+		case '%': {
+			pixels = (size / 100) * groupSize;
+			break;
+		}
+		case 'px': {
+			pixels = size;
+			break;
+		}
+		case 'rem': {
+			pixels = convertRemToPixels(panelElement, size);
+			break;
+		}
+		case 'em': {
+			pixels = convertEmToPixels(panelElement, size);
+			break;
+		}
+		case 'vh': {
+			pixels = convertVhToPixels(size);
+			break;
+		}
+		case 'vw': {
+			pixels = convertVwToPixels(size);
+			break;
+		}
+	}
+
+	return pixels;
+}

package/src/global/utils/adjustLayoutByDelta.ts

@@ -0,0 +1,339 @@
+import type { Layout } from '../../components/group/types';
+import type { PanelConstraints } from '../../components/panel/types';
+import { assert } from '../../utils/assert';
+import { isArrayEqual } from '../../utils/isArrayEqual';
+import { compareLayoutNumbers } from '../utils/compareLayoutNumbers';
+import { layoutNumbersEqual } from '../utils/layoutNumbersEqual';
+import { validatePanelSize } from '../utils/validatePanelSize';
+
+// All units must be in percentages; pixel values should be pre-converted
+export function adjustLayoutByDelta({
+	delta,
+	initialLayout: initialLayoutProp,
+	panelConstraints: panelConstraintsArray,
+	pivotIndices,
+	prevLayout: prevLayoutProp,
+	trigger,
+}: {
+	delta: number;
+	initialLayout: Layout;
+	panelConstraints: PanelConstraints[];
+	pivotIndices: number[];
+	prevLayout: Layout;
+	trigger?: 'imperative-api' | 'keyboard' | 'mouse-or-touch';
+}): Layout {
+	if (layoutNumbersEqual(delta, 0)) {
+		return initialLayoutProp;
+	}
+
+	const overrideDisabledPanels = trigger === 'imperative-api';
+
+	const initialLayout = Object.values(initialLayoutProp);
+	const prevLayout = Object.values(prevLayoutProp);
+	const nextLayout = [...initialLayout];
+
+	const [firstPivotIndex, secondPivotIndex] = pivotIndices;
+	assert(firstPivotIndex != null, 'Invalid first pivot index');
+	assert(secondPivotIndex != null, 'Invalid second pivot index');
+
+	let deltaApplied = 0;
+
+	// const DEBUG = [];
+	// DEBUG.push(`adjustLayoutByDelta()`);
+	// DEBUG.push(`  initialLayout: ${initialLayout.join(", ")}`);
+	// DEBUG.push(`  prevLayout: ${prevLayout.join(", ")}`);
+	// DEBUG.push(`  delta: ${delta}`);
+	// DEBUG.push(`  pivotIndices: ${pivotIndices.join(", ")}`);
+	// DEBUG.push(`  trigger: ${trigger}`);
+	// DEBUG.push("");
+
+	// A resizing panel affects the panels before or after it.
+	//
+	// A negative delta means the panel(s) immediately after the separator should grow/expand by decreasing its offset.
+	// Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
+	//
+	// A positive delta means the panel(s) immediately before the separator should "expand".
+	// This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the separator.
+
+	{
+		switch (trigger) {
+			case 'keyboard': {
+				// If this is a resize triggered by a keyboard event, our logic for expanding/collapsing is different.
+				// We no longer check the halfway threshold because this may prevent the panel from expanding at all.
+				{
+					// Check if we should expand a collapsed panel
+					const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+					const panelConstraints = panelConstraintsArray[index];
+					assert(panelConstraints, `Panel constraints not found for index ${index}`);
+
+					const { collapsedSize = 0, collapsible, minSize = 0 } = panelConstraints;
+
+					// DEBUG.push(`edge case check 1: ${index}`);
+					// DEBUG.push(`  -> collapsible? ${collapsible}`);
+					if (collapsible) {
+						const prevSize = initialLayout[index];
+						assert(prevSize != null, `Previous layout not found for panel index ${index}`);
+
+						if (layoutNumbersEqual(prevSize, collapsedSize)) {
+							const localDelta = minSize - prevSize;
+							// DEBUG.push(`  -> expand delta: ${localDelta}`);
+
+							if (compareLayoutNumbers(localDelta, Math.abs(delta)) > 0) {
+								delta = delta < 0 ? 0 - localDelta : localDelta;
+								// DEBUG.push(`  -> delta: ${delta}`);
+							}
+						}
+					}
+				}
+
+				{
+					// Check if we should collapse a panel at its minimum size
+					const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
+					const panelConstraints = panelConstraintsArray[index];
+					assert(panelConstraints, `No panel constraints found for index ${index}`);
+
+					const { collapsedSize = 0, collapsible, minSize = 0 } = panelConstraints;
+
+					// DEBUG.push(`edge case check 2: ${index}`);
+					// DEBUG.push(`  -> collapsible? ${collapsible}`);
+					if (collapsible) {
+						const prevSize = initialLayout[index];
+						assert(prevSize != null, `Previous layout not found for panel index ${index}`);
+
+						if (layoutNumbersEqual(prevSize, minSize)) {
+							const localDelta = prevSize - collapsedSize;
+							// DEBUG.push(`  -> expand delta: ${localDelta}`);
+
+							if (compareLayoutNumbers(localDelta, Math.abs(delta)) > 0) {
+								delta = delta < 0 ? 0 - localDelta : localDelta;
+								// DEBUG.push(`  -> delta: ${delta}`);
+							}
+						}
+					}
+				}
+				break;
+			}
+			default: {
+				// If we're starting from a collapsed state, dragging past the halfway point should cause the panel to expand
+				// This can happen for positive or negative drags, and panels on either side of the separator can be collapsible
+				// The easiest way to support this is to detect this scenario and pre-adjust the delta before applying the rest of the layout algorithm
+				// DEBUG.push(`edge case check 3: collapsible panels`);
+
+				const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+				const panelConstraints = panelConstraintsArray[index];
+				assert(panelConstraints, `Panel constraints not found for index ${index}`);
+
+				const prevSize = initialLayout[index];
+
+				const { collapsible, collapsedSize, minSize } = panelConstraints;
+				if (collapsible && compareLayoutNumbers(prevSize, minSize) < 0) {
+					// DEBUG.push(`  -> collapsible ${delta < 0 ? "2nd" : "1st"} panel`);
+					if (delta > 0) {
+						const gapSize = minSize - collapsedSize;
+						const halfwayDelta = gapSize / 2;
+						// DEBUG.push(`  -> halfway delta: ${halfwayDelta}`);
+						// DEBUG.push(`       collapsed: ${collapsedSize}`);
+						// DEBUG.push(`       min: ${minSize}`);
+
+						const nextSize = prevSize + delta;
+						if (compareLayoutNumbers(nextSize, minSize) < 0) {
+							// DEBUG.push("  -> adjusting delta");
+							// DEBUG.push(`       from: ${delta}`);
+							delta = compareLayoutNumbers(delta, halfwayDelta) <= 0 ? 0 : gapSize;
+							// DEBUG.push(`       to: ${delta}`);
+						}
+					} else {
+						const gapSize = minSize - collapsedSize;
+						const halfwayDelta = 100 - gapSize / 2;
+						// DEBUG.push(`  -> halfway delta: ${halfwayDelta}`);
+						// DEBUG.push(`       collapsed: ${100 - collapsedSize}`);
+						// DEBUG.push(`       min: ${100 - minSize}`);
+
+						const nextSize = prevSize - delta;
+						if (compareLayoutNumbers(nextSize, minSize) < 0) {
+							// DEBUG.push("  -> adjusting delta");
+							// DEBUG.push(`       from: ${delta}`);
+							delta = compareLayoutNumbers(100 + delta, halfwayDelta) > 0 ? 0 : -gapSize;
+							// DEBUG.push(`       to: ${delta}`);
+						}
+					}
+				}
+				break;
+			}
+		}
+		// DEBUG.push("");
+	}
+
+	{
+		// Pre-calculate max available delta in the opposite direction of our pivot.
+		// This will be the maximum amount we're allowed to expand/contract the panels in the primary direction.
+		// If this amount is less than the requested delta, adjust the requested delta.
+		// If this amount is greater than the requested delta, that's useful information too–
+		// as an expanding panel might change from collapsed to min size.
+
+		const increment = delta < 0 ? 1 : -1;
+
+		let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+		let maxAvailableDelta = 0;
+
+		// DEBUG.push("pre calc...");
+		while (true) {
+			const prevSize = initialLayout[index];
+			assert(prevSize != null, `Previous layout not found for panel index ${index}`);
+
+			const maxSafeSize = validatePanelSize({
+				overrideDisabledPanels,
+				panelConstraints: panelConstraintsArray[index],
+				prevSize,
+				size: 100,
+			});
+			const delta = maxSafeSize - prevSize;
+			// DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
+
+			maxAvailableDelta += delta;
+			index += increment;
+
+			if (index < 0 || index >= panelConstraintsArray.length) {
+				break;
+			}
+		}
+
+		// DEBUG.push(`  -> max available delta: ${maxAvailableDelta}`);
+		const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
+		delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
+		// DEBUG.push(`  -> adjusted delta: ${delta}`);
+		// DEBUG.push("");
+	}
+
+	{
+		// Delta added to a panel needs to be subtracted from other panels (within the constraints that those panels allow).
+
+		const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
+		let index = pivotIndex;
+		while (index >= 0 && index < panelConstraintsArray.length) {
+			const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
+
+			const prevSize = initialLayout[index];
+			assert(prevSize != null, `Previous layout not found for panel index ${index}`);
+
+			const unsafeSize = prevSize - deltaRemaining;
+			const safeSize = validatePanelSize({
+				overrideDisabledPanels,
+				panelConstraints: panelConstraintsArray[index],
+				prevSize,
+				size: unsafeSize,
+			});
+
+			if (!layoutNumbersEqual(prevSize, safeSize)) {
+				deltaApplied += prevSize - safeSize;
+
+				nextLayout[index] = safeSize;
+
+				if (
+					deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
+						numeric: true,
+					}) >= 0
+				) {
+					break;
+				}
+			}
+
+			if (delta < 0) {
+				index--;
+			} else {
+				index++;
+			}
+		}
+	}
+	// DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
+	// DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+	// DEBUG.push("");
+
+	// If we were unable to resize any of the panels panels, return the previous state.
+	// This will essentially bailout and ignore e.g. drags past a panel's boundaries
+	if (isArrayEqual(prevLayout, nextLayout)) {
+		// DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
+		// console.log(DEBUG.join("\n"));
+
+		return prevLayoutProp;
+	}
+
+	{
+		// Now distribute the applied delta to the panels in the other direction
+		const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+
+		const prevSize = initialLayout[pivotIndex];
+		assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
+
+		const unsafeSize = prevSize + deltaApplied;
+		const safeSize = validatePanelSize({
+			overrideDisabledPanels,
+			panelConstraints: panelConstraintsArray[pivotIndex],
+			prevSize,
+			size: unsafeSize,
+		});
+
+		// Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
+		nextLayout[pivotIndex] = safeSize;
+
+		// Edge case where expanding or contracting one panel caused another one to change collapsed state
+		if (!layoutNumbersEqual(safeSize, unsafeSize)) {
+			let deltaRemaining = unsafeSize - safeSize;
+
+			const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+			let index = pivotIndex;
+			while (index >= 0 && index < panelConstraintsArray.length) {
+				const prevSize = nextLayout[index];
+				assert(prevSize != null, `Previous layout not found for panel index ${index}`);
+
+				const unsafeSize = prevSize + deltaRemaining;
+				const safeSize = validatePanelSize({
+					overrideDisabledPanels,
+					panelConstraints: panelConstraintsArray[index],
+					prevSize,
+					size: unsafeSize,
+				});
+
+				if (!layoutNumbersEqual(prevSize, safeSize)) {
+					deltaRemaining -= safeSize - prevSize;
+
+					nextLayout[index] = safeSize;
+				}
+
+				if (layoutNumbersEqual(deltaRemaining, 0)) {
+					break;
+				}
+
+				if (delta > 0) {
+					index--;
+				} else {
+					index++;
+				}
+			}
+		}
+	}
+	// DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
+	// DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+	// DEBUG.push("");
+
+	const totalSize = Object.values(nextLayout).reduce((total, size) => size + total, 0);
+	// DEBUG.push(`total size: ${totalSize}`);
+
+	// If our new layout doesn't add up to 100%, that means the requested delta can't be applied
+	// In that case, fall back to our most recent valid layout
+	// Allow for a small rounding difference, else e.g. 3 panel layouts may never be considered valid
+	if (!layoutNumbersEqual(totalSize, 100, 0.1)) {
+		// DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
+		// console.log(DEBUG.join("\n"));
+
+		return prevLayoutProp;
+	}
+
+	const prevLayoutKeys = Object.keys(prevLayoutProp);
+
+	// console.log(DEBUG.join("\n"));
+	return nextLayout.reduce<Layout>((accumulated, current, index) => {
+		accumulated[prevLayoutKeys[index]] = current;
+		return accumulated;
+	}, {});
+}

package/src/global/utils/adjustLayoutForSeparator.ts

@@ -0,0 +1,54 @@
+import { assert } from '../../utils/assert';
+import { getMountedGroupState, updateMountedGroup } from '../mutable-state/groups';
+import { adjustLayoutByDelta } from './adjustLayoutByDelta';
+import { findSeparatorGroup } from './findSeparatorGroup';
+import { getImperativeGroupMethods } from './getImperativeGroupMethods';
+import { layoutsEqual } from './layoutsEqual';
+import { validatePanelGroupLayout } from './validatePanelGroupLayout';
+
+export function adjustLayoutForSeparator(separatorElement: HTMLElement, delta: number) {
+	const group = findSeparatorGroup(separatorElement);
+	const groupState = getMountedGroupState(group.id, true);
+
+	const separator = group.separators.find((current) => current.element === separatorElement);
+	assert(separator, 'Matching separator not found');
+
+	const panels = groupState.separatorToPanels.get(separator);
+	assert(panels, 'Matching panels not found');
+
+	const pivotIndices = panels.map((panel) => group.panels.indexOf(panel));
+
+	const groupAPI = getImperativeGroupMethods({ groupId: group.id });
+	const prevLayout = groupAPI.getLayout();
+
+	const unsafeLayout = adjustLayoutByDelta({
+		delta,
+		initialLayout: prevLayout,
+		panelConstraints: groupState.derivedPanelConstraints,
+		pivotIndices,
+		prevLayout,
+		trigger: 'keyboard',
+	});
+	const nextLayout = validatePanelGroupLayout({
+		layout: unsafeLayout,
+		panelConstraints: groupState.derivedPanelConstraints,
+	});
+
+	if (!layoutsEqual(prevLayout, nextLayout)) {
+		updateMountedGroup(
+			group,
+			{
+				defaultLayoutDeferred: groupState.defaultLayoutDeferred,
+				derivedPanelConstraints: groupState.derivedPanelConstraints,
+				groupSize: groupState.groupSize,
+				layout: nextLayout,
+				separatorToPanels: groupState.separatorToPanels,
+			},
+			// Keyboard resizes (arrow keys, Home/End, Enter collapse/expand) originate
+			// from a real DOM event on the separator, so they are user interactions
+			// just like pointer drags. This function is only reached from
+			// onDocumentKeyDown. See #716.
+			{ isUserInteraction: true },
+		);
+	}
+}

package/src/global/utils/calculateDefaultLayout.ts

@@ -0,0 +1,37 @@
+import type { Layout } from '../../components/group/types';
+import type { PanelConstraints } from '../../components/panel/types';
+import { formatLayoutNumber } from './formatLayoutNumber';
+
+export function calculateDefaultLayout(derivedPanelConstraints: PanelConstraints[]): Layout {
+	let explicitCount = 0;
+	let total = 0;
+
+	const layout: Layout = {};
+
+	for (const current of derivedPanelConstraints) {
+		if (current.defaultSize !== undefined) {
+			explicitCount++;
+
+			const size = formatLayoutNumber(current.defaultSize);
+
+			total += size;
+			layout[current.panelId] = size;
+		} else {
+			// @ts-expect-error Add panel keys in order to simplify traversal elsewhere; we'll fill them in in the loop below
+			layout[current.panelId] = undefined;
+		}
+	}
+
+	const remainingPanelCount = derivedPanelConstraints.length - explicitCount;
+	if (remainingPanelCount !== 0) {
+		const size = formatLayoutNumber((100 - total) / remainingPanelCount);
+
+		for (const current of derivedPanelConstraints) {
+			if (current.defaultSize === undefined) {
+				layout[current.panelId] = size;
+			}
+		}
+	}
+
+	return layout;
+}

package/src/global/utils/calculateSeparatorAriaValues.ts

@@ -0,0 +1,67 @@
+import type { Layout } from '../../components/group/types';
+import type { PanelConstraints } from '../../components/panel/types';
+import { adjustLayoutByDelta } from './adjustLayoutByDelta';
+import { validatePanelGroupLayout } from './validatePanelGroupLayout';
+
+export function calculateSeparatorAriaValues({
+	layout,
+	panelConstraints,
+	panelId,
+	panelIndex,
+}: {
+	layout: Layout;
+	panelConstraints: PanelConstraints[];
+	panelId: string;
+	panelIndex: number;
+}): {
+	valueControls: string | undefined;
+	valueMax: number | undefined;
+	valueMin: number | undefined;
+	valueNow: number | undefined;
+} {
+	let valueMax: number | undefined = undefined;
+	let valueMin: number | undefined = undefined;
+
+	const panelSize = layout[panelId];
+
+	const constraints = panelConstraints.find((current) => current.panelId === panelId);
+	if (constraints) {
+		const maxSize = constraints.maxSize;
+		const minSize = constraints.collapsible ? constraints.collapsedSize : constraints.minSize;
+
+		const pivotIndices = [panelIndex, panelIndex + 1];
+
+		const minSizeLayout = validatePanelGroupLayout({
+			layout: adjustLayoutByDelta({
+				delta: minSize - panelSize,
+				initialLayout: layout,
+				panelConstraints,
+				pivotIndices,
+				prevLayout: layout,
+			}),
+			panelConstraints,
+		});
+
+		valueMin = minSizeLayout[panelId];
+
+		const maxSizeLayout = validatePanelGroupLayout({
+			layout: adjustLayoutByDelta({
+				delta: maxSize - panelSize,
+				initialLayout: layout,
+				panelConstraints,
+				pivotIndices,
+				prevLayout: layout,
+			}),
+			panelConstraints,
+		});
+
+		valueMax = maxSizeLayout[panelId];
+	}
+
+	return {
+		valueControls: panelId,
+		valueMax,
+		valueMin,
+		valueNow: panelSize,
+	};
+}

package/src/global/utils/compareLayoutNumbers.ts

@@ -0,0 +1,9 @@
+import { layoutNumbersEqual } from './layoutNumbersEqual';
+
+export function compareLayoutNumbers(actual: number, expected: number) {
+	if (layoutNumbersEqual(actual, expected)) {
+		return 0;
+	} else {
+		return actual > expected ? 1 : -1;
+	}
+}

package/src/global/utils/completeActivePointerResize.ts

@@ -0,0 +1,37 @@
+import { updateCursorStyle } from '../cursor/updateCursorStyle.ts';
+import { getMountedGroupState, updateMountedGroup } from '../mutable-state/groups.ts';
+import { getInteractionState, updateInteractionState } from '../mutable-state/interactions.ts';
+
+export function completeActivePointerResize(document: Document) {
+	const interactionState = getInteractionState();
+
+	let match = false;
+
+	switch (interactionState.state) {
+		case 'active': {
+			updateInteractionState({
+				cursorFlags: 0,
+				state: 'inactive',
+			});
+
+			if (interactionState.hitRegions.length > 0) {
+				updateCursorStyle(document);
+
+				match = true;
+
+				// Dispatch one more "change" event after the interaction state has been reset.
+				// Groups use this as a signal to call onLayoutChanged.
+				// This is the canonical user-pointer-up site, so flag the dispatch with
+				// isUserInteraction: true. See #716.
+				interactionState.hitRegions.forEach((hitRegion) => {
+					const groupState = getMountedGroupState(hitRegion.group.id, true);
+					updateMountedGroup(hitRegion.group, groupState, {
+						isUserInteraction: true,
+					});
+				});
+			}
+		}
+	}
+
+	return match;
+}

package/src/global/utils/doRectsIntersect.ts

@@ -0,0 +1,5 @@
+import type { Rect } from '../../types';
+
+export function doRectsIntersect(a: Rect, b: Rect): boolean {
+	return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+}

package/src/global/utils/findClosestHitRegion.ts

@@ -0,0 +1,43 @@
+import type { Orientation } from '../../components/group/types';
+import type { Point } from '../../types';
+import type { HitRegion } from '../dom/calculateHitRegions';
+import { getDistanceBetweenPointAndRect } from './getDistanceBetweenPointAndRect';
+
+export function findClosestHitRegion(
+	orientation: Orientation,
+	hitRegions: HitRegion[],
+	point: Point,
+) {
+	let closestHitRegion: HitRegion | undefined = undefined;
+	let minDistance = {
+		x: Infinity,
+		y: Infinity,
+	};
+
+	for (const hitRegion of hitRegions) {
+		const data = getDistanceBetweenPointAndRect(point, hitRegion.rect);
+		switch (orientation) {
+			case 'horizontal': {
+				if (data.x <= minDistance.x) {
+					closestHitRegion = hitRegion;
+					minDistance = data;
+				}
+				break;
+			}
+			case 'vertical': {
+				if (data.y <= minDistance.y) {
+					closestHitRegion = hitRegion;
+					minDistance = data;
+				}
+				break;
+			}
+		}
+	}
+
+	return closestHitRegion
+		? {
+				distance: minDistance,
+				hitRegion: closestHitRegion,
+			}
+		: undefined;
+}

package/src/global/utils/findClosestRect.ts

@@ -0,0 +1,36 @@
+import type { Orientation } from '../../components/group/types';
+import { assert } from '../../utils/assert';
+import { getDistanceBetweenPointAndRect } from './getDistanceBetweenPointAndRect';
+
+export function findClosestRect({
+	orientation,
+	rects,
+	targetRect,
+}: {
+	orientation: Orientation;
+	rects: DOMRectReadOnly[];
+	targetRect: DOMRectReadOnly;
+}): DOMRectReadOnly {
+	const centerPoint = {
+		x: targetRect.x + targetRect.width / 2,
+		y: targetRect.y + targetRect.height / 2,
+	};
+
+	let closestRect: DOMRectReadOnly | undefined = undefined;
+	let minDistance = Number.MAX_VALUE;
+
+	for (const rect of rects) {
+		const { x, y } = getDistanceBetweenPointAndRect(centerPoint, rect);
+
+		const distance = orientation === 'horizontal' ? x : y;
+
+		if (distance < minDistance) {
+			minDistance = distance;
+			closestRect = rect;
+		}
+	}
+
+	assert(closestRect, 'No rect found');
+
+	return closestRect;
+}