@octanejs/base-ui 0.1.50 → 0.1.52

package/src/utils/floating/FloatingPortal.ts

@@ -1,280 +0,0 @@
-// 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,
-	Fragment,
-	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'),
-	);
-
-	// Octane reconciles an ARRAY child as a keyed list, so every entry below carries a stable key.
-	// The slots are positional and fixed, so literal keys are correct here.
-	return [
-		createElement(Fragment, { key: 'portal-subtree', children: portalSubtree }),
-		createElement(PortalContext.Provider, {
-			key: 'portal-context',
-			value: portalContextValue,
-			children: [
-				shouldRenderGuards && portalNode
-					? createElement(FocusGuard, {
-							key: 'guard-before',
-							'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', {
-							key: 'aria-owns',
-							'aria-owns': portalNode.id,
-							style: ownerVisuallyHidden,
-						})
-					: null,
-				portalNode
-					? createElement(Fragment, { key: 'portal', children: createPortal(children, portalNode) })
-					: null,
-				shouldRenderGuards && portalNode
-					? createElement(FocusGuard, {
-							key: 'guard-after',
-							'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

@@ -1,127 +0,0 @@
-// 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

@@ -1,70 +0,0 @@
-// 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

@@ -1,22 +0,0 @@
-// 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

@@ -1,34 +0,0 @@
-// 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

@@ -1,20 +0,0 @@
-// 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

@@ -1,8 +0,0 @@
-// 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

@@ -1,4 +0,0 @@
-// 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

@@ -1,20 +0,0 @@
-// 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

@@ -1,88 +0,0 @@
-// 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 { isElement, isHTMLElement } from '../dom';
-import type { PopupTriggerMap } from '../popups/popupTriggerMap';
-import { TYPEABLE_SELECTOR, FOCUSABLE_ATTRIBUTE } from './constants';
-
-import { contains } from '../contains';
-
-export { getTarget } from '../composite/list-utils';
-export { contains };
-
-// Whether the target sits on (or inside) one of this popup's triggers, and that trigger is not
-// marked disabled. Hover uses it to keep a popup open while the cursor crosses between triggers.
-export function isTargetInsideEnabledTrigger(
-	target: EventTarget | null,
-	triggerElements: PopupTriggerMap,
-): boolean {
-	if (!isElement(target)) {
-		return false;
-	}
-	const targetElement = target as Element;
-	if (triggerElements.hasElement(targetElement)) {
-		return !targetElement.hasAttribute('data-trigger-disabled');
-	}
-	for (const [, trigger] of triggerElements.entries()) {
-		if (contains(trigger, targetElement)) {
-			return !trigger.hasAttribute('data-trigger-disabled');
-		}
-	}
-	return false;
-}
-
-// Whether the element (or an ancestor) is something the user can interact with directly — used to
-// decide whether a pointerdown inside a popup counts as a click-like open.
-export function isInteractiveElement(element: Element | null): boolean {
-	return (
-		element?.closest(
-			`button,a[href],[role="button"],select,[tabindex]:not([tabindex="-1"]),${TYPEABLE_SELECTOR}`,
-		) != null
-	);
-}
-
-// 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');
-}