@octanejs/base-ui 0.1.49 → 0.1.51

package/src/utils/floating/safePolygon.ts

@@ -1,448 +0,0 @@
-// Ported verbatim from .base-ui/packages/react/src/floating-ui-react/safePolygon.ts (v1.6.0).
-// Builds the "safe" triangle between the cursor's exit point and the popup so the user can move
-// diagonally toward the popup without it closing under the pointer. Pure geometry plus a mousemove
-// handler; no React/octane API is involved, so this is a straight transcription.
-import { isElement } from '../dom';
-import { Timeout } from '../useTimeout';
-import { contains, getTarget } from './element';
-import { getNodeChildren } from './nodes';
-import type { HandleClose, HandleCloseOptions } from './useHoverShared';
-
-const CURSOR_SPEED_THRESHOLD = 0.1;
-const CURSOR_SPEED_THRESHOLD_SQUARED = CURSOR_SPEED_THRESHOLD * CURSOR_SPEED_THRESHOLD;
-const POLYGON_BUFFER = 0.5;
-
-interface Rect {
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-}
-
-type Side = 'top' | 'right' | 'bottom' | 'left';
-
-function hasIntersectingEdge(
-	pointX: number,
-	pointY: number,
-	xi: number,
-	yi: number,
-	xj: number,
-	yj: number,
-): boolean {
-	return yi >= pointY !== yj >= pointY && pointX <= ((xj - xi) * (pointY - yi)) / (yj - yi) + xi;
-}
-
-function isPointInQuadrilateral(
-	pointX: number,
-	pointY: number,
-	x1: number,
-	y1: number,
-	x2: number,
-	y2: number,
-	x3: number,
-	y3: number,
-	x4: number,
-	y4: number,
-): boolean {
-	let isInsideValue = false;
-
-	if (hasIntersectingEdge(pointX, pointY, x1, y1, x2, y2)) {
-		isInsideValue = !isInsideValue;
-	}
-	if (hasIntersectingEdge(pointX, pointY, x2, y2, x3, y3)) {
-		isInsideValue = !isInsideValue;
-	}
-	if (hasIntersectingEdge(pointX, pointY, x3, y3, x4, y4)) {
-		isInsideValue = !isInsideValue;
-	}
-	if (hasIntersectingEdge(pointX, pointY, x4, y4, x1, y1)) {
-		isInsideValue = !isInsideValue;
-	}
-
-	return isInsideValue;
-}
-
-function isInsideRect(pointX: number, pointY: number, rect: Rect): boolean {
-	return (
-		pointX >= rect.x &&
-		pointX <= rect.x + rect.width &&
-		pointY >= rect.y &&
-		pointY <= rect.y + rect.height
-	);
-}
-
-function isInsideAxisAlignedRect(
-	pointX: number,
-	pointY: number,
-	x1: number,
-	y1: number,
-	x2: number,
-	y2: number,
-): boolean {
-	const minX = Math.min(x1, x2);
-	const maxX = Math.max(x1, x2);
-	const minY = Math.min(y1, y2);
-	const maxY = Math.max(y1, y2);
-
-	return pointX >= minX && pointX <= maxX && pointY >= minY && pointY <= maxY;
-}
-
-export interface SafePolygonOptions extends HandleCloseOptions {}
-
-/**
- * Generates a safe polygon area that the user can traverse without closing the floating element
- * once leaving the reference element.
- */
-export function safePolygon(options: SafePolygonOptions = {}): HandleClose {
-	const { blockPointerEvents = false } = options;
-	const timeout = new Timeout();
-
-	const fn: HandleClose = ({ x, y, placement, elements, onClose, nodeId, tree }) => {
-		const side = placement?.split('-')[0] as Side | undefined;
-		let hasLanded = false;
-		let lastX: number | null = null;
-		let lastY: number | null = null;
-		let lastCursorTime = typeof performance !== 'undefined' ? performance.now() : 0;
-
-		function isCursorMovingSlowly(nextX: number, nextY: number): boolean {
-			const currentTime = performance.now();
-			const elapsedTime = currentTime - lastCursorTime;
-
-			if (lastX === null || lastY === null || elapsedTime === 0) {
-				lastX = nextX;
-				lastY = nextY;
-				lastCursorTime = currentTime;
-				return false;
-			}
-
-			const deltaX = nextX - lastX;
-			const deltaY = nextY - lastY;
-			const distanceSquared = deltaX * deltaX + deltaY * deltaY;
-			const thresholdSquared = elapsedTime * elapsedTime * CURSOR_SPEED_THRESHOLD_SQUARED;
-
-			lastX = nextX;
-			lastY = nextY;
-			lastCursorTime = currentTime;
-
-			return distanceSquared < thresholdSquared;
-		}
-
-		function close(): void {
-			timeout.clear();
-			onClose();
-		}
-
-		return function onMouseMove(event: MouseEvent): undefined {
-			timeout.clear();
-
-			const domReference = elements.domReference;
-			const floating = elements.floating;
-			if (!domReference || !floating || side == null || x == null || y == null) {
-				return undefined;
-			}
-
-			const { clientX, clientY } = event;
-			const target = getTarget(event) as Element | null;
-			const isLeave = event.type === 'mouseleave';
-			const isOverFloatingEl = contains(floating, target);
-			const isOverReferenceEl = contains(domReference, target);
-
-			if (isOverFloatingEl) {
-				hasLanded = true;
-				if (!isLeave) {
-					return undefined;
-				}
-			}
-
-			if (isOverReferenceEl) {
-				hasLanded = false;
-				if (!isLeave) {
-					hasLanded = true;
-					return undefined;
-				}
-			}
-
-			// Prevent an overlapping floating element from getting stuck in an open-close loop.
-			if (isLeave && isElement(event.relatedTarget) && contains(floating, event.relatedTarget)) {
-				return undefined;
-			}
-
-			function hasOpenChildNode(): boolean {
-				return Boolean(tree && getNodeChildren(tree.nodesRef.current, nodeId).length > 0);
-			}
-
-			function closeIfNoOpenChild(): void {
-				if (!hasOpenChildNode()) {
-					close();
-				}
-			}
-
-			// If any nested child is open, abort.
-			if (hasOpenChildNode()) {
-				return undefined;
-			}
-
-			const refRect = domReference.getBoundingClientRect();
-			const rect = floating.getBoundingClientRect();
-			const cursorLeaveFromRight = x > rect.right - rect.width / 2;
-			const cursorLeaveFromBottom = y > rect.bottom - rect.height / 2;
-			const isFloatingWider = rect.width > refRect.width;
-			const isFloatingTaller = rect.height > refRect.height;
-			const left = (isFloatingWider ? refRect : rect).left;
-			const right = (isFloatingWider ? refRect : rect).right;
-			const top = (isFloatingTaller ? refRect : rect).top;
-			const bottom = (isFloatingTaller ? refRect : rect).bottom;
-
-			// If the pointer is leaving from the opposite side, the "buffer" logic creates a point
-			// where the floating element remains open, but should be ignored. A constant of 1
-			// handles floating point rounding errors.
-			if (
-				(side === 'top' && y >= refRect.bottom - 1) ||
-				(side === 'bottom' && y <= refRect.top + 1) ||
-				(side === 'left' && x >= refRect.right - 1) ||
-				(side === 'right' && x <= refRect.left + 1)
-			) {
-				closeIfNoOpenChild();
-				return undefined;
-			}
-
-			// Ignore when the cursor is within the rectangular trough between the two elements.
-			// Since the triangle is created from the cursor point, which can start beyond the ref
-			// element's edge, traversing back and forth from the ref to the floating element can
-			// cause it to close. This ensures it always remains open in that case.
-			let isInsideTroughRect = false;
-
-			switch (side) {
-				case 'top':
-					isInsideTroughRect = isInsideAxisAlignedRect(
-						clientX,
-						clientY,
-						left,
-						refRect.top + 1,
-						right,
-						rect.bottom - 1,
-					);
-					break;
-				case 'bottom':
-					isInsideTroughRect = isInsideAxisAlignedRect(
-						clientX,
-						clientY,
-						left,
-						rect.top + 1,
-						right,
-						refRect.bottom - 1,
-					);
-					break;
-				case 'left':
-					isInsideTroughRect = isInsideAxisAlignedRect(
-						clientX,
-						clientY,
-						rect.right - 1,
-						bottom,
-						refRect.left + 1,
-						top,
-					);
-					break;
-				case 'right':
-					isInsideTroughRect = isInsideAxisAlignedRect(
-						clientX,
-						clientY,
-						refRect.right - 1,
-						bottom,
-						rect.left + 1,
-						top,
-					);
-					break;
-				default:
-			}
-
-			if (isInsideTroughRect) {
-				return undefined;
-			}
-
-			if (hasLanded && !isInsideRect(clientX, clientY, refRect)) {
-				closeIfNoOpenChild();
-				return undefined;
-			}
-
-			if (!isLeave && isCursorMovingSlowly(clientX, clientY)) {
-				closeIfNoOpenChild();
-				return undefined;
-			}
-
-			let isInsidePolygon = false;
-
-			switch (side) {
-				case 'top': {
-					const cursorXOffset = isFloatingWider ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
-					const cursorPointOneX = isFloatingWider
-						? x + cursorXOffset
-						: cursorLeaveFromRight
-							? x + cursorXOffset
-							: x - cursorXOffset;
-					const cursorPointTwoX = isFloatingWider
-						? x - cursorXOffset
-						: cursorLeaveFromRight
-							? x + cursorXOffset
-							: x - cursorXOffset;
-					const cursorPointY = y + POLYGON_BUFFER + 1;
-
-					const commonYLeft = cursorLeaveFromRight
-						? rect.bottom - POLYGON_BUFFER
-						: isFloatingWider
-							? rect.bottom - POLYGON_BUFFER
-							: rect.top;
-					const commonYRight = cursorLeaveFromRight
-						? isFloatingWider
-							? rect.bottom - POLYGON_BUFFER
-							: rect.top
-						: rect.bottom - POLYGON_BUFFER;
-
-					isInsidePolygon = isPointInQuadrilateral(
-						clientX,
-						clientY,
-						cursorPointOneX,
-						cursorPointY,
-						cursorPointTwoX,
-						cursorPointY,
-						rect.left,
-						commonYLeft,
-						rect.right,
-						commonYRight,
-					);
-					break;
-				}
-				case 'bottom': {
-					const cursorXOffset = isFloatingWider ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
-					const cursorPointOneX = isFloatingWider
-						? x + cursorXOffset
-						: cursorLeaveFromRight
-							? x + cursorXOffset
-							: x - cursorXOffset;
-					const cursorPointTwoX = isFloatingWider
-						? x - cursorXOffset
-						: cursorLeaveFromRight
-							? x + cursorXOffset
-							: x - cursorXOffset;
-					const cursorPointY = y - POLYGON_BUFFER;
-
-					const commonYLeft = cursorLeaveFromRight
-						? rect.top + POLYGON_BUFFER
-						: isFloatingWider
-							? rect.top + POLYGON_BUFFER
-							: rect.bottom;
-					const commonYRight = cursorLeaveFromRight
-						? isFloatingWider
-							? rect.top + POLYGON_BUFFER
-							: rect.bottom
-						: rect.top + POLYGON_BUFFER;
-
-					isInsidePolygon = isPointInQuadrilateral(
-						clientX,
-						clientY,
-						cursorPointOneX,
-						cursorPointY,
-						cursorPointTwoX,
-						cursorPointY,
-						rect.left,
-						commonYLeft,
-						rect.right,
-						commonYRight,
-					);
-					break;
-				}
-				case 'left': {
-					const cursorYOffset = isFloatingTaller ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
-					const cursorPointOneY = isFloatingTaller
-						? y + cursorYOffset
-						: cursorLeaveFromBottom
-							? y + cursorYOffset
-							: y - cursorYOffset;
-					const cursorPointTwoY = isFloatingTaller
-						? y - cursorYOffset
-						: cursorLeaveFromBottom
-							? y + cursorYOffset
-							: y - cursorYOffset;
-					const cursorPointX = x + POLYGON_BUFFER + 1;
-
-					const commonXTop = cursorLeaveFromBottom
-						? rect.right - POLYGON_BUFFER
-						: isFloatingTaller
-							? rect.right - POLYGON_BUFFER
-							: rect.left;
-					const commonXBottom = cursorLeaveFromBottom
-						? isFloatingTaller
-							? rect.right - POLYGON_BUFFER
-							: rect.left
-						: rect.right - POLYGON_BUFFER;
-
-					isInsidePolygon = isPointInQuadrilateral(
-						clientX,
-						clientY,
-						commonXTop,
-						rect.top,
-						commonXBottom,
-						rect.bottom,
-						cursorPointX,
-						cursorPointOneY,
-						cursorPointX,
-						cursorPointTwoY,
-					);
-					break;
-				}
-				case 'right': {
-					const cursorYOffset = isFloatingTaller ? POLYGON_BUFFER / 2 : POLYGON_BUFFER * 4;
-					const cursorPointOneY = isFloatingTaller
-						? y + cursorYOffset
-						: cursorLeaveFromBottom
-							? y + cursorYOffset
-							: y - cursorYOffset;
-					const cursorPointTwoY = isFloatingTaller
-						? y - cursorYOffset
-						: cursorLeaveFromBottom
-							? y + cursorYOffset
-							: y - cursorYOffset;
-					const cursorPointX = x - POLYGON_BUFFER;
-
-					const commonXTop = cursorLeaveFromBottom
-						? rect.left + POLYGON_BUFFER
-						: isFloatingTaller
-							? rect.left + POLYGON_BUFFER
-							: rect.right;
-					const commonXBottom = cursorLeaveFromBottom
-						? isFloatingTaller
-							? rect.left + POLYGON_BUFFER
-							: rect.right
-						: rect.left + POLYGON_BUFFER;
-
-					isInsidePolygon = isPointInQuadrilateral(
-						clientX,
-						clientY,
-						cursorPointX,
-						cursorPointOneY,
-						cursorPointX,
-						cursorPointTwoY,
-						commonXTop,
-						rect.top,
-						commonXBottom,
-						rect.bottom,
-					);
-					break;
-				}
-				default:
-			}
-
-			if (!isInsidePolygon) {
-				closeIfNoOpenChild();
-			} else if (!hasLanded) {
-				timeout.start(40, closeIfNoOpenChild);
-			}
-
-			return undefined;
-		};
-	};
-
-	fn.__options = { ...options, blockPointerEvents };
-
-	return fn;
-}

package/src/utils/floating/tabbable.ts

@@ -1,260 +0,0 @@
-// Ported verbatim from .base-ui/packages/react/src/floating-ui-react/utils/tabbable.ts (v1.6.0).
-// The DOM tab-order walk the FocusManager + portal use (candidate collection, radio-group handling,
-// visibility/inert filtering, next/previous-tabbable, enable/disableFocusInside). Pure — only import
-// paths change; `React.FocusEvent` is a native FocusEvent in octane.
-import { getComputedStyle, getNodeName, isHTMLElement, isShadowRoot } from '@floating-ui/utils/dom';
-import { ownerDocument } from '../owner';
-import { activeElement, contains } from './element';
-import { isElementVisible } from './composite';
-
-export type FocusableElement = HTMLElement | SVGElement;
-
-const CANDIDATE_SELECTOR =
-	'a[href],button,input,select,textarea,summary,details,iframe,object,embed,[tabindex],[contenteditable]:not([contenteditable="false"]),audio[controls],video[controls]';
-
-function getParentElement(element: Element) {
-	const assignedSlot = (element as Element & { assignedSlot?: HTMLSlotElement | null | undefined })
-		.assignedSlot;
-	if (assignedSlot) {
-		return assignedSlot;
-	}
-	if (element.parentElement) {
-		return element.parentElement;
-	}
-	const rootNode = element.getRootNode();
-	return isShadowRoot(rootNode) ? rootNode.host : null;
-}
-
-function getDetailsSummary(details: Element) {
-	for (const child of Array.from(details.children)) {
-		if (getNodeName(child) === 'summary') {
-			return child;
-		}
-	}
-	return null;
-}
-
-function isWithinOpenDetailsSummary(element: Element, details: Element) {
-	const summary = getDetailsSummary(details);
-	return !!summary && (element === summary || contains(summary, element));
-}
-
-function isFocusableCandidate(element: Element | null): element is FocusableElement {
-	const nodeName = element ? getNodeName(element) : '';
-	return (
-		element != null &&
-		element.matches(CANDIDATE_SELECTOR) &&
-		(nodeName !== 'summary' ||
-			(element.parentElement != null &&
-				getNodeName(element.parentElement) === 'details' &&
-				getDetailsSummary(element.parentElement) === element)) &&
-		(nodeName !== 'details' || getDetailsSummary(element) == null) &&
-		(nodeName !== 'input' || (element as HTMLInputElement).type !== 'hidden')
-	);
-}
-
-function isFocusableElement(element: Element | null): element is FocusableElement {
-	if (!isFocusableCandidate(element) || !element.isConnected || element.matches(':disabled')) {
-		return false;
-	}
-	for (let current: Element | null = element; current; current = getParentElement(current)) {
-		const isAncestor = current !== element;
-		const isSlot = getNodeName(current) === 'slot';
-		if (current.hasAttribute('inert')) {
-			return false;
-		}
-		if (
-			(isAncestor &&
-				getNodeName(current) === 'details' &&
-				!(current as HTMLDetailsElement).open &&
-				!isWithinOpenDetailsSummary(element, current)) ||
-			current.hasAttribute('hidden') ||
-			(!isSlot && !isVisibleInTabbableTree(current, isAncestor))
-		) {
-			return false;
-		}
-	}
-	return true;
-}
-
-function isVisibleInTabbableTree(element: Element, isAncestor: boolean) {
-	const styles = getComputedStyle(element);
-	if (!isAncestor) {
-		return isElementVisible(element, styles);
-	}
-	return styles.display !== 'none';
-}
-
-function getTabIndex(element: FocusableElement) {
-	const tabIndex = element.tabIndex;
-	if (tabIndex < 0) {
-		const nodeName = getNodeName(element);
-		if (
-			nodeName === 'details' ||
-			nodeName === 'audio' ||
-			nodeName === 'video' ||
-			(isHTMLElement(element) && element.isContentEditable)
-		) {
-			return 0;
-		}
-	}
-	return tabIndex;
-}
-
-function getNamedRadioInput(element: FocusableElement) {
-	if (getNodeName(element) !== 'input') {
-		return null;
-	}
-	const input = element as HTMLInputElement;
-	return input.type === 'radio' && input.name !== '' ? input : null;
-}
-
-function isTabbableRadio(element: FocusableElement, candidates: FocusableElement[]) {
-	const input = getNamedRadioInput(element);
-	if (!input) {
-		return true;
-	}
-	const checkedRadio = candidates.find((candidate) => {
-		const radio = getNamedRadioInput(candidate);
-		return radio?.name === input.name && radio.form === input.form && radio.checked;
-	});
-	if (checkedRadio) {
-		return checkedRadio === input;
-	}
-	return (
-		candidates.find((candidate) => {
-			const radio = getNamedRadioInput(candidate);
-			return radio?.name === input.name && radio.form === input.form;
-		}) === input
-	);
-}
-
-function getComposedChildren(container: ParentNode): Element[] {
-	if (isHTMLElement(container) && getNodeName(container) === 'slot') {
-		const assignedElements = (container as unknown as HTMLSlotElement).assignedElements({
-			flatten: true,
-		});
-		if (assignedElements.length > 0) {
-			return assignedElements;
-		}
-	}
-	if (isHTMLElement(container) && (container as unknown as HTMLElement).shadowRoot) {
-		return Array.from((container as unknown as HTMLElement).shadowRoot!.children);
-	}
-	return Array.from(container.children);
-}
-
-function appendCandidates(container: ParentNode, list: FocusableElement[]) {
-	getComposedChildren(container).forEach((child) => {
-		if (isFocusableCandidate(child)) {
-			list.push(child);
-		}
-		appendCandidates(child, list);
-	});
-}
-
-function appendMatchingElements(container: ParentNode, selector: string, list: HTMLElement[]) {
-	getComposedChildren(container).forEach((child) => {
-		if (isHTMLElement(child) && child.matches(selector)) {
-			list.push(child);
-		}
-		appendMatchingElements(child, selector, list);
-	});
-}
-
-export function isTabbable(element: Element | null) {
-	return isFocusableElement(element) && getTabIndex(element) >= 0;
-}
-
-export function focusable(container: Element) {
-	const candidates: FocusableElement[] = [];
-	appendCandidates(container, candidates);
-	return candidates.filter(isFocusableElement);
-}
-
-export function tabbable(container: Element) {
-	const candidates = focusable(container);
-	return candidates.filter(
-		(element) => getTabIndex(element) >= 0 && isTabbableRadio(element, candidates),
-	);
-}
-
-function getTabbableIn(container: HTMLElement, dir: 1 | -1): FocusableElement | undefined {
-	const list = tabbable(container);
-	const len = list.length;
-	if (len === 0) {
-		return undefined;
-	}
-	const active = activeElement(ownerDocument(container)) as FocusableElement;
-	const index = list.indexOf(active);
-	const nextIndex = index === -1 ? (dir === 1 ? 0 : len - 1) : index + dir;
-	return list[nextIndex];
-}
-
-export function getNextTabbable(referenceElement: Element | null): FocusableElement | null {
-	return (
-		getTabbableIn(ownerDocument(referenceElement).body, 1) || (referenceElement as FocusableElement)
-	);
-}
-
-export function getPreviousTabbable(referenceElement: Element | null): FocusableElement | null {
-	return (
-		getTabbableIn(ownerDocument(referenceElement).body, -1) ||
-		(referenceElement as FocusableElement)
-	);
-}
-
-function getTabbableNearElement(referenceElement: Element | null, dir: 1 | -1) {
-	if (!referenceElement) {
-		return null;
-	}
-	const list = tabbable(ownerDocument(referenceElement).body);
-	const elementCount = list.length;
-	if (elementCount === 0) {
-		return null;
-	}
-	const index = list.indexOf(referenceElement as FocusableElement);
-	if (index === -1) {
-		return null;
-	}
-	const nextIndex = (index + dir + elementCount) % elementCount;
-	return list[nextIndex];
-}
-
-export function getTabbableAfterElement(referenceElement: Element | null): FocusableElement | null {
-	return getTabbableNearElement(referenceElement, 1);
-}
-
-export function getTabbableBeforeElement(
-	referenceElement: Element | null,
-): FocusableElement | null {
-	return getTabbableNearElement(referenceElement, -1);
-}
-
-export function isOutsideEvent(event: FocusEvent, container?: Element) {
-	const containerElement = container || (event.currentTarget as Element);
-	const relatedTarget = event.relatedTarget as HTMLElement | null;
-	return !relatedTarget || !contains(containerElement, relatedTarget);
-}
-
-export function disableFocusInside(container: HTMLElement) {
-	const tabbableElements = tabbable(container);
-	tabbableElements.forEach((element) => {
-		(element as HTMLElement).dataset.tabindex = element.getAttribute('tabindex') || '';
-		element.setAttribute('tabindex', '-1');
-	});
-}
-
-export function enableFocusInside(container: HTMLElement) {
-	const elements: HTMLElement[] = [];
-	appendMatchingElements(container, '[data-tabindex]', elements);
-	elements.forEach((element) => {
-		const tabindex = element.dataset.tabindex;
-		delete element.dataset.tabindex;
-		if (tabindex) {
-			element.setAttribute('tabindex', tabindex);
-		} else {
-			element.removeAttribute('tabindex');
-		}
-	});
-}