@octanejs/base-ui 0.1.1 → 0.1.2

package/src/utils/floating/FloatingPortal.ts

@@ -0,0 +1,268 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/components/FloatingPortal.tsx (v1.6.0),
+// octane-adapted: forwardRef → ref-as-prop; hooks thread slots; `ReactDOM.createPortal` → octane
+// `createPortal`; native events. Renders a styleable portal-node div (`<div id data-base-ui-portal>`)
+// into the container + portals children into it; adds tab-order focus guards for non-modal popups.
+import {
+	createContext,
+	createElement,
+	createPortal,
+	useContext,
+	useState,
+	useRef,
+	useMemo,
+	useEffect,
+	useLayoutEffect,
+	useId,
+} from 'octane';
+import { isNode } from '@floating-ui/utils/dom';
+
+import { S, subSlot } from '../../internal';
+import { useStableCallback } from '../useStableCallback';
+import { addEventListener } from '../addEventListener';
+import { mergeCleanups } from '../mergeCleanups';
+import { EMPTY_OBJECT } from '../empty';
+import { useRenderElement } from '../useRenderElement';
+import { createAttribute } from './createAttribute';
+import { FocusGuard } from './FocusGuard';
+import {
+	enableFocusInside,
+	disableFocusInside,
+	getPreviousTabbable,
+	getNextTabbable,
+	isOutsideEvent,
+} from './tabbable';
+import { createChangeEventDetails, REASONS } from '../createChangeEventDetails';
+
+const ownerVisuallyHidden = {
+	clipPath: 'inset(50%)',
+	position: 'fixed',
+	top: 0,
+	left: 0,
+};
+
+type FocusManagerState = null | {
+	modal: boolean;
+	open: boolean;
+	onOpenChange: (open: boolean, data?: { reason?: string; event?: Event }) => void;
+	domReference: Element | null;
+	closeOnFocusOut: boolean;
+};
+
+interface PortalContextValue {
+	portalNode: HTMLElement | null;
+	setFocusManagerState: (v: FocusManagerState) => void;
+	beforeInsideRef: { current: HTMLSpanElement | null };
+	afterInsideRef: { current: HTMLSpanElement | null };
+	beforeOutsideRef: { current: HTMLSpanElement | null };
+	afterOutsideRef: { current: HTMLSpanElement | null };
+}
+
+const PortalContext = createContext<PortalContextValue | null>(null);
+
+export const usePortalContext = () => useContext(PortalContext);
+
+const attr = createAttribute('portal');
+
+export function useFloatingPortalNode(userProps: any, slot: symbol | undefined): any {
+	const { ref, container: containerProp, componentProps = EMPTY_OBJECT, elementProps } = userProps;
+
+	// Raw `useId` (no `base-ui-` prefix), matching Base UI's `@base-ui/utils/useId`.
+	const uniqueId = useId(subSlot(slot, 'id'));
+	const portalContext = usePortalContext();
+	const parentPortalNode = portalContext?.portalNode;
+
+	const [containerElement, setContainerElement] = useState<Element | null>(
+		null,
+		subSlot(slot, 'cel'),
+	);
+	const [portalNode, setPortalNode] = useState<HTMLElement | null>(null, subSlot(slot, 'pn'));
+	const setPortalNodeRef = useStableCallback(
+		(node: HTMLElement | null) => {
+			if (node !== null) {
+				setPortalNode(node);
+			}
+		},
+		subSlot(slot, 'pnr'),
+	);
+
+	const containerRef = useRef<Element | null>(null, subSlot(slot, 'cref'));
+
+	useLayoutEffect(
+		() => {
+			if (containerProp === null) {
+				if (containerRef.current) {
+					containerRef.current = null;
+					setPortalNode(null);
+					setContainerElement(null);
+				}
+				return;
+			}
+			if (uniqueId == null) {
+				return;
+			}
+			const resolvedContainer =
+				(containerProp && (isNode(containerProp) ? containerProp : containerProp.current)) ??
+				parentPortalNode ??
+				document.body;
+			if (resolvedContainer == null) {
+				if (containerRef.current) {
+					containerRef.current = null;
+					setPortalNode(null);
+					setContainerElement(null);
+				}
+				return;
+			}
+			if (containerRef.current !== resolvedContainer) {
+				containerRef.current = resolvedContainer;
+				setPortalNode(null);
+				setContainerElement(resolvedContainer);
+			}
+		},
+		[containerProp, parentPortalNode, uniqueId],
+		subSlot(slot, 'e:container'),
+	);
+
+	const portalElement = useRenderElement(
+		'div',
+		componentProps,
+		{
+			ref: [ref, setPortalNodeRef],
+			props: [{ id: uniqueId, [attr]: '' }, elementProps],
+		},
+		subSlot(slot, 're'),
+	);
+
+	const portalSubtree =
+		containerElement && portalElement ? createPortal(portalElement, containerElement) : null;
+
+	return { portalNode, portalSubtree };
+}
+
+export function FloatingPortal(componentProps: any): any {
+	const slot = S('FloatingPortal');
+	const { render, className, style, children, container, renderGuards, ref, ...elementProps } =
+		componentProps;
+
+	const { portalNode, portalSubtree } = useFloatingPortalNode(
+		{ container, ref, componentProps: { render, className, style }, elementProps },
+		subSlot(slot, 'node'),
+	);
+
+	const beforeOutsideRef = useRef<HTMLSpanElement | null>(null, subSlot(slot, 'bo'));
+	const afterOutsideRef = useRef<HTMLSpanElement | null>(null, subSlot(slot, 'ao'));
+	const beforeInsideRef = useRef<HTMLSpanElement | null>(null, subSlot(slot, 'bi'));
+	const afterInsideRef = useRef<HTMLSpanElement | null>(null, subSlot(slot, 'ai'));
+
+	const [focusManagerState, setFocusManagerState] = useState<FocusManagerState>(
+		null,
+		subSlot(slot, 'fms'),
+	);
+	const focusInsideDisabledRef = useRef(false, subSlot(slot, 'fid'));
+
+	const modal = focusManagerState?.modal;
+	const open = focusManagerState?.open;
+
+	const shouldRenderGuards =
+		typeof renderGuards === 'boolean'
+			? renderGuards
+			: !!focusManagerState && !focusManagerState.modal && focusManagerState.open && !!portalNode;
+
+	useEffect(
+		() => {
+			if (!portalNode || modal) {
+				return undefined;
+			}
+			function onFocus(event: FocusEvent) {
+				if (portalNode && event.relatedTarget && isOutsideEvent(event)) {
+					if (event.type === 'focusin') {
+						if (focusInsideDisabledRef.current) {
+							enableFocusInside(portalNode);
+							focusInsideDisabledRef.current = false;
+						}
+					} else {
+						disableFocusInside(portalNode);
+						focusInsideDisabledRef.current = true;
+					}
+				}
+			}
+			return mergeCleanups(
+				addEventListener(portalNode, 'focusin', onFocus as EventListener, true),
+				addEventListener(portalNode, 'focusout', onFocus as EventListener, true),
+			);
+		},
+		[portalNode, modal],
+		subSlot(slot, 'e:tab'),
+	);
+
+	useLayoutEffect(
+		() => {
+			if (!portalNode || open !== true || !focusInsideDisabledRef.current) {
+				return;
+			}
+			enableFocusInside(portalNode);
+			focusInsideDisabledRef.current = false;
+		},
+		[open, portalNode],
+		subSlot(slot, 'e:enable'),
+	);
+
+	const portalContextValue = useMemo(
+		() => ({
+			beforeOutsideRef,
+			afterOutsideRef,
+			beforeInsideRef,
+			afterInsideRef,
+			portalNode,
+			setFocusManagerState,
+		}),
+		[portalNode],
+		subSlot(slot, 'ctx'),
+	);
+
+	return [
+		portalSubtree,
+		createElement(PortalContext.Provider, {
+			value: portalContextValue,
+			children: [
+				shouldRenderGuards && portalNode
+					? createElement(FocusGuard, {
+							'data-type': 'outside',
+							ref: beforeOutsideRef,
+							onFocus(event: any) {
+								if (isOutsideEvent(event, portalNode)) {
+									beforeInsideRef.current?.focus();
+								} else {
+									const domReference = focusManagerState ? focusManagerState.domReference : null;
+									getPreviousTabbable(domReference)?.focus();
+								}
+							},
+						})
+					: null,
+				shouldRenderGuards && portalNode
+					? createElement('span', { 'aria-owns': portalNode.id, style: ownerVisuallyHidden })
+					: null,
+				portalNode ? createPortal(children, portalNode) : null,
+				shouldRenderGuards && portalNode
+					? createElement(FocusGuard, {
+							'data-type': 'outside',
+							ref: afterOutsideRef,
+							onFocus(event: any) {
+								if (isOutsideEvent(event, portalNode)) {
+									afterInsideRef.current?.focus();
+								} else {
+									const domReference = focusManagerState ? focusManagerState.domReference : null;
+									getNextTabbable(domReference)?.focus();
+									if (focusManagerState?.closeOnFocusOut) {
+										focusManagerState?.onOpenChange(
+											false,
+											createChangeEventDetails(REASONS.focusOut, event) as any,
+										);
+									}
+								}
+							},
+						})
+					: null,
+			],
+		}),
+	];
+}

package/src/utils/floating/FloatingRootStore.ts

@@ -0,0 +1,127 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/components/FloatingRootStore.ts
+// (v1.6.0). The Store-based root context every Base UI popup's floating interactions read
+// (`store.useState('open')`, `store.context.dataRef`, …) — Base UI's 1.6.0 replacement for
+// upstream `@floating-ui/react`'s emitter-only root context. Extends the octane-adapted
+// `ReactStore`; pure otherwise.
+import { createSelector } from '../store/createSelector';
+import { ReactStore } from '../store/ReactStore';
+import type { TransitionStatus } from '../useTransitionStatus';
+import type { PopupTriggerMap } from '../popups/popupTriggerMap';
+import { createEventEmitter } from './createEventEmitter';
+import { isClickLikeEvent } from './event';
+import type { FloatingEvents, ContextData, ReferenceType } from './types';
+
+interface BaseUIChangeEventDetails {
+	reason: string;
+	event: Event;
+	trigger?: Element | undefined;
+	[key: string]: any;
+}
+
+interface FloatingUIOpenChangeDetails {
+	open: boolean;
+	reason: string;
+	nativeEvent: Event | undefined;
+	nested: boolean;
+	triggerElement?: Element | undefined;
+}
+
+export interface FloatingRootState {
+	open: boolean;
+	transitionStatus: TransitionStatus | undefined;
+	domReferenceElement: Element | null;
+	referenceElement: ReferenceType | null;
+	floatingElement: HTMLElement | null;
+	positionReference: ReferenceType | null;
+	floatingId: string | undefined;
+}
+
+export interface FloatingRootStoreContext {
+	onOpenChange: ((open: boolean, eventDetails: BaseUIChangeEventDetails) => void) | undefined;
+	readonly dataRef: { current: ContextData };
+	readonly events: FloatingEvents;
+	nested: boolean;
+	readonly triggerElements: PopupTriggerMap;
+}
+
+const selectors = {
+	open: createSelector((state: FloatingRootState) => state.open),
+	transitionStatus: createSelector((state: FloatingRootState) => state.transitionStatus),
+	domReferenceElement: createSelector((state: FloatingRootState) => state.domReferenceElement),
+	referenceElement: createSelector(
+		(state: FloatingRootState) => state.positionReference ?? state.referenceElement,
+	),
+	floatingElement: createSelector((state: FloatingRootState) => state.floatingElement),
+	floatingId: createSelector((state: FloatingRootState) => state.floatingId),
+};
+
+interface FloatingRootStoreOptions {
+	open: boolean;
+	transitionStatus: TransitionStatus | undefined;
+	referenceElement: ReferenceType | null;
+	floatingElement: HTMLElement | null;
+	triggerElements: PopupTriggerMap;
+	floatingId: string | undefined;
+	syncOnly: boolean;
+	nested: boolean;
+	onOpenChange: ((open: boolean, eventDetails: BaseUIChangeEventDetails) => void) | undefined;
+}
+
+export class FloatingRootStore extends ReactStore<
+	Readonly<FloatingRootState>,
+	FloatingRootStoreContext,
+	typeof selectors
+> {
+	private readonly syncOnly: boolean;
+
+	constructor(options: FloatingRootStoreOptions) {
+		const { syncOnly, nested, onOpenChange, triggerElements, ...initialState } = options;
+
+		super(
+			{
+				...initialState,
+				positionReference: initialState.referenceElement,
+				domReferenceElement: initialState.referenceElement as Element | null,
+			},
+			{
+				onOpenChange,
+				dataRef: { current: {} },
+				events: createEventEmitter(),
+				nested,
+				triggerElements,
+			},
+			selectors,
+		);
+
+		this.syncOnly = syncOnly;
+	}
+
+	syncOpenEvent = (newOpen: boolean, event: Event | undefined) => {
+		if (!newOpen || !this.state.open || (event != null && isClickLikeEvent(event))) {
+			this.context.dataRef.current.openEvent = newOpen ? event : undefined;
+		}
+	};
+
+	dispatchOpenChange = (newOpen: boolean, eventDetails: BaseUIChangeEventDetails) => {
+		this.syncOpenEvent(newOpen, eventDetails.event);
+
+		const details: FloatingUIOpenChangeDetails = {
+			open: newOpen,
+			reason: eventDetails.reason,
+			nativeEvent: eventDetails.event,
+			nested: this.context.nested,
+			triggerElement: eventDetails.trigger,
+		};
+
+		this.context.events.emit('openchange', details);
+	};
+
+	setOpen = (newOpen: boolean, eventDetails: BaseUIChangeEventDetails) => {
+		if (this.syncOnly) {
+			this.context.onOpenChange?.(newOpen, eventDetails);
+			return;
+		}
+		this.dispatchOpenChange(newOpen, eventDetails);
+		this.context.onOpenChange?.(newOpen, eventDetails);
+	};
+}

package/src/utils/floating/FloatingTree.ts

@@ -0,0 +1,70 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/components/FloatingTree.tsx (v1.6.0),
+// octane-adapted: `React.createContext` → octane `createContext`; components return octane elements
+// via `createElement`; hooks thread an explicit slot (`useId` → `useBaseUiId`, `useRefWithInit` →
+// the binding's). Provides parent/child popup relationships (nested dismiss, nested hover) when
+// popups aren't DOM-nested.
+import { createContext, createElement, useContext, useMemo } from 'octane';
+
+import { S, subSlot } from '../../internal';
+import { useBaseUiId } from '../useBaseUiId';
+import { useRefWithInit } from '../useRefWithInit';
+import { useLayoutEffect } from 'octane';
+import { FloatingTreeStore } from './FloatingTreeStore';
+import type { FloatingNodeType, FloatingTreeType } from './types';
+
+const FloatingNodeContext = createContext<FloatingNodeType | null>(null);
+const FloatingTreeContext = createContext<FloatingTreeType | null>(null);
+
+export const useFloatingParentNodeId = (): string | null =>
+	useContext(FloatingNodeContext)?.id || null;
+
+export const useFloatingTree = (externalTree?: FloatingTreeStore): FloatingTreeType | null => {
+	const contextTree = useContext(FloatingTreeContext) as FloatingTreeType | null;
+	return externalTree ?? contextTree;
+};
+
+export function useFloatingNodeId(
+	externalTree: FloatingTreeStore | undefined,
+	slot: symbol | undefined,
+): string | undefined {
+	const id = useBaseUiId(undefined, subSlot(slot, 'id'));
+	const tree = useFloatingTree(externalTree);
+	const parentId = useFloatingParentNodeId();
+
+	useLayoutEffect(
+		() => {
+			if (!id) {
+				return undefined;
+			}
+			const node = { id, parentId };
+			tree?.addNode(node);
+			return () => {
+				tree?.removeNode(node);
+			};
+		},
+		[tree, id, parentId],
+		subSlot(slot, 'e'),
+	);
+
+	return id;
+}
+
+export function FloatingNode(props: { children?: any; id: string | undefined }): any {
+	const slot = S('FloatingNode');
+	const { children, id } = props;
+	const parentId = useFloatingParentNodeId();
+	const value = useMemo(() => ({ id, parentId }), [id, parentId], subSlot(slot, 'v'));
+	return createElement(FloatingNodeContext.Provider, { value, children });
+}
+
+export function FloatingTree(props: { children?: any; externalTree?: FloatingTreeStore }): any {
+	const slot = S('FloatingTree');
+	const { children, externalTree } = props;
+	const tree = useRefWithInit<FloatingTreeStore>(
+		() => externalTree ?? new FloatingTreeStore(),
+		subSlot(slot, 'tree'),
+	).current;
+	return createElement(FloatingTreeContext.Provider, { value: tree, children });
+}
+
+export { FloatingTreeStore };

package/src/utils/floating/FloatingTreeStore.ts

@@ -0,0 +1,22 @@
+// Ported verbatim from .base-ui/packages/react/src/floating-ui-react/components/FloatingTreeStore.ts.
+// Backing store for `FloatingTree` — a flat list of nodes + an event bus for parent/child popup
+// communication (nested dismiss, nested hover). Pure.
+import type { FloatingNodeType, FloatingEvents } from './types';
+import { createEventEmitter } from './createEventEmitter';
+
+export class FloatingTreeStore {
+	readonly nodesRef: { current: Array<FloatingNodeType> } = { current: [] };
+
+	readonly events: FloatingEvents = createEventEmitter();
+
+	addNode(node: FloatingNodeType) {
+		this.nodesRef.current.push(node);
+	}
+
+	removeNode(node: FloatingNodeType) {
+		const index = this.nodesRef.current.findIndex((n) => n === node);
+		if (index !== -1) {
+			this.nodesRef.current.splice(index, 1);
+		}
+	}
+}

package/src/utils/floating/FocusGuard.ts

@@ -0,0 +1,34 @@
+// Ported from .base-ui/packages/react/src/utils/FocusGuard.tsx. A visually-hidden, tabbable `<span>`
+// the focus manager + portal place around the popup to catch tab-out. octane: `createElement`,
+// ref-as-prop; `role="button"` only under VoiceOver+WebKit (inert in jsdom).
+import { createElement, useState, useLayoutEffect } from 'octane';
+
+import { S, subSlot } from '../../internal';
+import { platform } from '../platform';
+import { visuallyHidden } from '../visuallyHidden';
+
+export function FocusGuard(props: any): any {
+	const slot = S('FocusGuard');
+	const { ref, ...rest } = props;
+	const [role, setRole] = useState<'button' | undefined>(undefined, subSlot(slot, 'role'));
+
+	useLayoutEffect(
+		() => {
+			if (platform.screenReader.voiceOver && platform.engine.webkit) {
+				setRole('button');
+			}
+		},
+		[],
+		subSlot(slot, 'e'),
+	);
+
+	return createElement('span', {
+		...rest,
+		ref,
+		style: visuallyHidden,
+		'aria-hidden': role ? undefined : true,
+		tabIndex: 0,
+		role,
+		['data-base-ui-focus-guard']: '',
+	});
+}

package/src/utils/floating/composite.ts

@@ -0,0 +1,20 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/utils/composite.ts — the visibility
+// helpers the tabbable walk needs.
+import { getComputedStyle } from '@floating-ui/utils/dom';
+
+export function isHiddenByStyles(styles: CSSStyleDeclaration): boolean {
+	return styles.visibility === 'hidden' || styles.visibility === 'collapse';
+}
+
+export function isElementVisible(
+	element: Element | null,
+	styles: CSSStyleDeclaration | null = element ? getComputedStyle(element) : null,
+): boolean {
+	if (!element || !element.isConnected || !styles || isHiddenByStyles(styles)) {
+		return false;
+	}
+	if (typeof (element as any).checkVisibility === 'function') {
+		return (element as any).checkVisibility();
+	}
+	return styles.display !== 'none' && styles.display !== 'contents';
+}

package/src/utils/floating/constants.ts

@@ -0,0 +1,8 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/utils/constants.ts. Marks a popup as
+// programmatically focusable (the focus manager + composite navigation look for it).
+export const FOCUSABLE_ATTRIBUTE = 'data-base-ui-focusable';
+export const CLICK_TRIGGER_IDENTIFIER = 'data-base-ui-click-trigger';
+
+export const TYPEABLE_SELECTOR =
+	"input:not([type='hidden']):not([disabled])," +
+	"[contenteditable]:not([contenteditable='false']),textarea:not([disabled])";

package/src/utils/floating/createAttribute.ts

@@ -0,0 +1,4 @@
+// Ported verbatim from .base-ui/packages/react/src/floating-ui-react/utils/createAttribute.ts.
+export function createAttribute(name: string): string {
+	return `data-base-ui-${name}`;
+}

package/src/utils/floating/createEventEmitter.ts

@@ -0,0 +1,20 @@
+// Ported verbatim from .base-ui/packages/react/src/floating-ui-react/utils/createEventEmitter.ts.
+import type { FloatingEvents } from './types';
+
+export function createEventEmitter(): FloatingEvents {
+	const map = new Map<string, Set<(data: any) => void>>();
+	return {
+		emit(event: string, data: any) {
+			map.get(event)?.forEach((listener) => listener(data));
+		},
+		on(event: string, listener: (data: any) => void) {
+			if (!map.has(event)) {
+				map.set(event, new Set());
+			}
+			map.get(event)!.add(listener);
+		},
+		off(event: string, listener: (data: any) => void) {
+			map.get(event)?.delete(listener);
+		},
+	};
+}

package/src/utils/floating/element.ts

@@ -0,0 +1,54 @@
+// Ported from .base-ui/packages/react/src/floating-ui-react/utils/element.ts (v1.6.0) — the subset
+// used so far. `getTarget` is reused from the composite list utils.
+import { isHTMLElement } from '../dom';
+import { TYPEABLE_SELECTOR, FOCUSABLE_ATTRIBUTE } from './constants';
+
+export { getTarget } from '../composite/list-utils';
+export { contains } from '../contains';
+
+// Ported from .base-ui/…/internals/shadowDom.ts — the deepest active element across shadow roots.
+export function activeElement(doc: Document): Element | null {
+	let element = doc.activeElement;
+	while (element?.shadowRoot?.activeElement != null) {
+		element = element.shadowRoot.activeElement;
+	}
+	return element;
+}
+
+export function isTypeableElement(element: unknown): boolean {
+	return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
+}
+
+export function isTypeableCombobox(element: Element | null): boolean {
+	if (!element) {
+		return false;
+	}
+	return element.getAttribute('role') === 'combobox' && isTypeableElement(element);
+}
+
+// The floating element may be a positioning wrapper; focus is managed on the child carrying the
+// focusable marker (or the element itself).
+export function getFloatingFocusElement(
+	floatingElement: HTMLElement | null | undefined,
+): HTMLElement | null {
+	if (!floatingElement) {
+		return null;
+	}
+	return floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE)
+		? floatingElement
+		: (floatingElement.querySelector<HTMLElement>(`[${FOCUSABLE_ATTRIBUTE}]`) ?? floatingElement);
+}
+
+export function isEventTargetWithin(event: Event, node: Node | null | undefined): boolean {
+	if (node == null) {
+		return false;
+	}
+	if ('composedPath' in event) {
+		return event.composedPath().includes(node);
+	}
+	return (event as Event).target != null && node.contains((event as Event).target as Node);
+}
+
+export function isRootElement(element: Element): boolean {
+	return element.matches('html,body');
+}

package/src/utils/floating/enqueueFocus.ts

@@ -0,0 +1,38 @@
+// Ported verbatim from .base-ui/packages/react/src/floating-ui-react/utils/enqueueFocus.ts.
+// Focuses an element on the next frame (or synchronously), superseding any pending focus.
+import { NOOP } from '../empty';
+import type { FocusableElement } from './tabbable';
+
+interface Options {
+	preventScroll?: boolean | undefined;
+	sync?: boolean | undefined;
+	shouldFocus?: (() => boolean) | undefined;
+}
+
+let rafId = 0;
+export function enqueueFocus(el: FocusableElement | null, options: Options = {}): () => void {
+	const { preventScroll = false, sync = false, shouldFocus } = options;
+
+	cancelAnimationFrame(rafId);
+
+	function exec() {
+		if (shouldFocus && !shouldFocus()) {
+			return;
+		}
+		el?.focus({ preventScroll });
+	}
+
+	if (sync) {
+		exec();
+		return NOOP;
+	}
+
+	const currentRafId = requestAnimationFrame(exec);
+	rafId = currentRafId;
+	return () => {
+		if (rafId === currentRafId) {
+			cancelAnimationFrame(currentRafId);
+			rafId = 0;
+		}
+	};
+}