@octanejs/base-ui 0.1.1 → 0.1.2

package/src/utils/floating/event.ts

@@ -0,0 +1,53 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/utils/event.ts (v1.6.0) — the subset
+// used so far. octane events are native, so these operate on native events directly.
+import { platform } from '../platform';
+
+export function isClickLikeEvent(event: Event): boolean {
+	const type = event.type;
+	return type === 'click' || type === 'mousedown' || type === 'keydown' || type === 'keyup';
+}
+
+export function isMouseLikePointerType(pointerType: string | undefined, strict?: boolean): boolean {
+	const values: Array<string | undefined> = ['mouse', 'pen'];
+	if (!strict) {
+		values.push('', undefined);
+	}
+	return values.includes(pointerType);
+}
+
+// octane events are native, so this is effectively always false for handler `event`s (a native
+// event has no `.nativeEvent`) — ported for faithfulness so `isReactEvent(e) ? e.nativeEvent : e`
+// resolves to the native event.
+export function isReactEvent(event: any): boolean {
+	return event != null && 'nativeEvent' in event;
+}
+
+export function isVirtualClick(event: MouseEvent | PointerEvent): boolean {
+	if ((event as PointerEvent).pointerType === '' && event.isTrusted) {
+		return true;
+	}
+	if (platform.os.android && (event as PointerEvent).pointerType) {
+		return event.type === 'click' && event.buttons === 1;
+	}
+	return event.detail === 0 && !(event as PointerEvent).pointerType;
+}
+
+export function isVirtualPointerEvent(event: PointerEvent): boolean {
+	if (platform.env.jsdom) {
+		return false;
+	}
+	return (
+		(!platform.os.android && event.width === 0 && event.height === 0) ||
+		(platform.os.android &&
+			event.width === 1 &&
+			event.height === 1 &&
+			event.pressure === 0 &&
+			event.detail === 0 &&
+			event.pointerType === 'mouse') ||
+		(event.width < 1 &&
+			event.height < 1 &&
+			event.pressure === 0 &&
+			event.detail === 0 &&
+			event.pointerType === 'touch')
+	);
+}

package/src/utils/floating/getEmptyRootContext.ts

@@ -0,0 +1,19 @@
+// Ported verbatim from .base-ui/packages/react/src/floating-ui-react/utils/getEmptyRootContext.ts.
+// The inert root context a popup store starts with before its real one is created.
+import { PopupTriggerMap } from '../popups/popupTriggerMap';
+import { FloatingRootStore } from './FloatingRootStore';
+import type { FloatingRootContext } from './types';
+
+export function getEmptyRootContext(): FloatingRootContext {
+	return new FloatingRootStore({
+		open: false,
+		transitionStatus: undefined,
+		floatingElement: null,
+		referenceElement: null,
+		triggerElements: new PopupTriggerMap(),
+		floatingId: undefined,
+		syncOnly: false,
+		nested: false,
+		onOpenChange: undefined,
+	});
+}

package/src/utils/floating/markOthers.ts

@@ -0,0 +1,197 @@
+// Ported verbatim from .base-ui/packages/react/src/floating-ui-react/utils/markOthers.ts (v1.6.0).
+// Ref-counted `aria-hidden`/`inert` + `data-base-ui-inert` marker application to everything outside
+// the modal popup (an aria-hidden fork). Pure DOM — only import paths change.
+import { getNodeName, isShadowRoot } from '@floating-ui/utils/dom';
+import { ownerDocument } from '../owner';
+
+type Undo = () => void;
+
+interface MarkOthersOptions {
+	ariaHidden?: boolean | undefined;
+	inert?: boolean | undefined;
+	mark?: boolean | undefined;
+}
+
+const counters = {
+	inert: new WeakMap<Element, number>(),
+	'aria-hidden': new WeakMap<Element, number>(),
+};
+
+const markerName = 'data-base-ui-inert';
+type ControlAttribute = keyof typeof counters;
+
+const uncontrolledElementsSets: Record<ControlAttribute, WeakSet<Element>> = {
+	inert: new WeakSet<Element>(),
+	'aria-hidden': new WeakSet<Element>(),
+};
+let markerCounterMap = new WeakMap<Element, number>();
+let lockCount = 0;
+
+function getUncontrolledElementsSet(controlAttribute: ControlAttribute) {
+	return uncontrolledElementsSets[controlAttribute];
+}
+
+function unwrapHost(node: Node | null): Element | null {
+	if (!node) {
+		return null;
+	}
+	return isShadowRoot(node) ? node.host : unwrapHost(node.parentNode);
+}
+
+const correctElements = (parent: HTMLElement, targets: Element[]): Element[] =>
+	targets
+		.map((target) => {
+			if (parent.contains(target)) {
+				return target;
+			}
+			const correctedTarget = unwrapHost(target);
+			if (correctedTarget && parent.contains(correctedTarget)) {
+				return correctedTarget;
+			}
+			return null;
+		})
+		.filter((x): x is Element => x != null);
+
+const buildKeepSet = (targets: Element[]): Set<Node> => {
+	const keep = new Set<Node>();
+	targets.forEach((target) => {
+		let node: Node | null = target;
+		while (node && !keep.has(node)) {
+			keep.add(node);
+			node = node.parentNode;
+		}
+	});
+	return keep;
+};
+
+const collectOutsideElements = (
+	root: HTMLElement,
+	keepElements: Set<Node>,
+	stopElements: Set<Node>,
+): Element[] => {
+	const outside: Element[] = [];
+	const walk = (parent: Element | null) => {
+		if (!parent || stopElements.has(parent)) {
+			return;
+		}
+		Array.from(parent.children).forEach((node: Element) => {
+			if (getNodeName(node) === 'script') {
+				return;
+			}
+			if (keepElements.has(node)) {
+				walk(node);
+			} else {
+				outside.push(node);
+			}
+		});
+	};
+	walk(root);
+	return outside;
+};
+
+function applyAttributeToOthers(
+	uncorrectedAvoidElements: Element[],
+	body: HTMLElement,
+	ariaHidden: boolean,
+	inert: boolean,
+	{ mark = true }: MarkOthersOptions,
+): Undo {
+	let controlAttribute: ControlAttribute | null = null;
+	if (inert) {
+		controlAttribute = 'inert';
+	} else if (ariaHidden) {
+		controlAttribute = 'aria-hidden';
+	}
+
+	let counterMap: WeakMap<Element, number> | null = null;
+	let uncontrolledElementsSet: WeakSet<Element> | null = null;
+	const avoidElements = correctElements(body, uncorrectedAvoidElements);
+	const markerTargets = mark
+		? collectOutsideElements(body, buildKeepSet(avoidElements), new Set<Node>(avoidElements))
+		: [];
+	const hiddenElements: Element[] = [];
+	const markedElements: Element[] = [];
+
+	if (controlAttribute) {
+		const map = counters[controlAttribute];
+		const currentUncontrolledElementsSet = getUncontrolledElementsSet(controlAttribute);
+		uncontrolledElementsSet = currentUncontrolledElementsSet;
+		counterMap = map;
+		const ariaLiveElements = correctElements(
+			body,
+			Array.from(body.querySelectorAll('[aria-live]')),
+		);
+		const controlElements = avoidElements.concat(ariaLiveElements);
+		const controlTargets = collectOutsideElements(
+			body,
+			buildKeepSet(controlElements),
+			new Set<Node>(controlElements),
+		);
+
+		controlTargets.forEach((node) => {
+			const attribute = node.getAttribute(controlAttribute!);
+			const alreadyHidden = attribute !== null && attribute !== 'false';
+			const counterValue = (map.get(node) || 0) + 1;
+			map.set(node, counterValue);
+			hiddenElements.push(node);
+			if (counterValue === 1 && alreadyHidden) {
+				currentUncontrolledElementsSet.add(node);
+			}
+			if (!alreadyHidden) {
+				node.setAttribute(controlAttribute!, controlAttribute === 'inert' ? '' : 'true');
+			}
+		});
+	}
+
+	if (mark) {
+		markerTargets.forEach((node) => {
+			const markerValue = (markerCounterMap.get(node) || 0) + 1;
+			markerCounterMap.set(node, markerValue);
+			markedElements.push(node);
+			if (markerValue === 1) {
+				node.setAttribute(markerName, '');
+			}
+		});
+	}
+
+	lockCount += 1;
+
+	return () => {
+		if (counterMap) {
+			hiddenElements.forEach((element) => {
+				const currentCounterValue = counterMap!.get(element) || 0;
+				const counterValue = currentCounterValue - 1;
+				counterMap!.set(element, counterValue);
+				if (!counterValue) {
+					if (!uncontrolledElementsSet?.has(element) && controlAttribute) {
+						element.removeAttribute(controlAttribute);
+					}
+					uncontrolledElementsSet?.delete(element);
+				}
+			});
+		}
+		if (mark) {
+			markedElements.forEach((element) => {
+				const markerValue = (markerCounterMap.get(element) || 0) - 1;
+				markerCounterMap.set(element, markerValue);
+				if (!markerValue) {
+					element.removeAttribute(markerName);
+				}
+			});
+		}
+		lockCount -= 1;
+		if (!lockCount) {
+			counters.inert = new WeakMap();
+			counters['aria-hidden'] = new WeakMap();
+			uncontrolledElementsSets.inert = new WeakSet();
+			uncontrolledElementsSets['aria-hidden'] = new WeakSet();
+			markerCounterMap = new WeakMap();
+		}
+	};
+}
+
+export function markOthers(avoidElements: Element[], options: MarkOthersOptions = {}): Undo {
+	const { ariaHidden = false, inert = false, mark = true } = options;
+	const body = ownerDocument(avoidElements[0]).body;
+	return applyAttributeToOthers(avoidElements, body, ariaHidden, inert, { mark });
+}

package/src/utils/floating/nodes.ts

@@ -0,0 +1,31 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/utils/nodes.ts (the subset used).
+// Walks the FloatingTree's flat node list to collect a node's (optionally open) descendants.
+import type { FloatingNodeType } from './types';
+
+export function getNodeChildren(
+	nodes: Array<FloatingNodeType>,
+	id: string | undefined,
+	onlyOpenChildren = true,
+): Array<FloatingNodeType> {
+	const directChildren = nodes.filter((node) => node.parentId === id);
+	return directChildren.flatMap((child) => [
+		...(!onlyOpenChildren || child.context?.open ? [child] : []),
+		...getNodeChildren(nodes, child.id, onlyOpenChildren),
+	]);
+}
+
+export function getNodeAncestors(
+	nodes: Array<FloatingNodeType>,
+	id: string | undefined,
+): Array<FloatingNodeType> {
+	let allAncestors: Array<FloatingNodeType> = [];
+	let currentParentId = nodes.find((node) => node.id === id)?.parentId;
+	while (currentParentId) {
+		const currentNode = nodes.find((node) => node.id === currentParentId);
+		currentParentId = currentNode?.parentId;
+		if (currentNode) {
+			allAncestors = allAncestors.concat(currentNode);
+		}
+	}
+	return allAncestors;
+}

package/src/utils/floating/tabbable.ts

@@ -0,0 +1,260 @@
+// 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');
+		}
+	});
+}

package/src/utils/floating/types.ts

@@ -0,0 +1,57 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/types.ts (v1.6.0) — the subset the
+// Base UI overlays use. `FloatingRootContext` IS the store (`FloatingRootStore`); a `FloatingContext`
+// wraps it with the positioning data. Interaction hooks return `ElementProps` prop bags.
+import type { FloatingRootStore } from './FloatingRootStore';
+import type { FloatingTreeStore } from './FloatingTreeStore';
+
+export type FloatingTreeType = FloatingTreeStore;
+
+export interface VirtualElement {
+	getBoundingClientRect(): DOMRect;
+	contextElement?: Element;
+}
+
+export type ReferenceType = Element | VirtualElement;
+
+export interface FloatingEvents {
+	emit(event: string, data?: any): void;
+	on(event: string, listener: (data: any) => void): void;
+	off(event: string, listener: (data: any) => void): void;
+}
+
+export interface ContextData {
+	openEvent?: Event;
+	[key: string]: any;
+}
+
+export type FloatingRootContext = FloatingRootStore;
+
+export interface FloatingContext {
+	rootStore: FloatingRootContext;
+	open: boolean;
+	onOpenChange: (open: boolean, eventDetails: any) => void;
+	nodeId: string | undefined;
+	dataRef: { current: ContextData };
+	events: FloatingEvents;
+	elements: {
+		reference: ReferenceType | null;
+		floating: HTMLElement | null;
+		domReference: Element | null;
+	};
+	refs: { setPositionReference(node: ReferenceType | null): void };
+	[key: string]: any;
+}
+
+export interface FloatingNodeType {
+	id: string | undefined;
+	parentId: string | null;
+	context?: FloatingContext | undefined;
+}
+
+export interface ElementProps {
+	reference?: Record<string, any>;
+	floating?: Record<string, any>;
+	item?: Record<string, any> | ((props: any) => Record<string, any>);
+	// Base UI's store-connected interaction hooks also expose the trigger prop bag.
+	trigger?: Record<string, any>;
+}