@octanejs/aria 0.0.1

package/src/utils/focusWithoutScrolling.ts

@@ -0,0 +1,83 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/focusWithoutScrolling.ts).
+
+import type { FocusableElement } from '@react-types/shared';
+
+// This is a polyfill for element.focus({preventScroll: true});
+// Currently necessary for Safari and old Edge:
+// https://caniuse.com/#feat=mdn-api_htmlelement_focus_preventscroll_option
+// See https://bugs.webkit.org/show_bug.cgi?id=178583
+//
+
+// Original licensing for the following methods can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/calvellido/focus-options-polyfill
+
+interface ScrollableElement {
+	element: HTMLElement;
+	scrollTop: number;
+	scrollLeft: number;
+}
+
+export function focusWithoutScrolling(element: FocusableElement): void {
+	if (supportsPreventScroll()) {
+		element.focus({ preventScroll: true });
+	} else {
+		let scrollableElements = getScrollableElements(element);
+		element.focus();
+		restoreScrollPosition(scrollableElements);
+	}
+}
+
+let supportsPreventScrollCached: boolean | null = null;
+function supportsPreventScroll() {
+	if (supportsPreventScrollCached == null) {
+		supportsPreventScrollCached = false;
+		try {
+			let focusElem = document.createElement('div');
+			focusElem.focus({
+				get preventScroll() {
+					supportsPreventScrollCached = true;
+					return true;
+				},
+			});
+		} catch {
+			// Ignore
+		}
+	}
+
+	return supportsPreventScrollCached;
+}
+
+function getScrollableElements(element: FocusableElement): ScrollableElement[] {
+	let parent = element.parentNode;
+	let scrollableElements: ScrollableElement[] = [];
+	let rootScrollingElement = document.scrollingElement || document.documentElement;
+
+	while (parent instanceof HTMLElement && parent !== rootScrollingElement) {
+		if (parent.offsetHeight < parent.scrollHeight || parent.offsetWidth < parent.scrollWidth) {
+			scrollableElements.push({
+				element: parent,
+				scrollTop: parent.scrollTop,
+				scrollLeft: parent.scrollLeft,
+			});
+		}
+		parent = parent.parentNode;
+	}
+
+	if (rootScrollingElement instanceof HTMLElement) {
+		scrollableElements.push({
+			element: rootScrollingElement,
+			scrollTop: rootScrollingElement.scrollTop,
+			scrollLeft: rootScrollingElement.scrollLeft,
+		});
+	}
+
+	return scrollableElements;
+}
+
+function restoreScrollPosition(scrollableElements: ScrollableElement[]) {
+	for (let { element, scrollTop, scrollLeft } of scrollableElements) {
+		element.scrollTop = scrollTop;
+		element.scrollLeft = scrollLeft;
+	}
+}

package/src/utils/getNonce.ts

@@ -0,0 +1,53 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/getNonce.ts).
+// octane adaptation: the `globalThis.__webpack_nonce__` read goes through the NonceWindow cast
+// (TS's `globalThis` has no index signature).
+
+import { getOwnerWindow } from './domHelpers';
+
+type NonceWindow = Window &
+	typeof globalThis & {
+		__webpack_nonce__?: string;
+	};
+
+function getWebpackNonce(doc?: Document): string | undefined {
+	let ownerWindow = doc?.defaultView as NonceWindow | null | undefined;
+	return (
+		ownerWindow?.__webpack_nonce__ || (globalThis as NonceWindow).__webpack_nonce__ || undefined
+	);
+}
+
+let nonceCache = new WeakMap<Document, string>();
+
+/** Reset the cached nonce value. Exported for testing only. */
+export function resetNonceCache(): void {
+	nonceCache = new WeakMap();
+}
+
+/**
+ * Returns the CSP nonce, if configured via a `<meta property="csp-nonce">` tag or
+ * `__webpack_nonce__`. This allows dynamically injected `<style>` elements to work with Content
+ * Security Policy.
+ */
+export function getNonce(doc?: Document): string | undefined {
+	let d = doc ?? (typeof document !== 'undefined' ? document : undefined);
+	if (!d) {
+		return getWebpackNonce(d);
+	}
+
+	if (nonceCache.has(d)) {
+		return nonceCache.get(d);
+	}
+
+	let meta = d.querySelector('meta[property="csp-nonce"]');
+	let nonce =
+		(meta &&
+			meta instanceof getOwnerWindow(meta).HTMLMetaElement &&
+			(meta.nonce || meta.content)) ||
+		getWebpackNonce(d) ||
+		undefined;
+
+	if (nonce !== undefined) {
+		nonceCache.set(d, nonce);
+	}
+	return nonce;
+}

package/src/utils/isElementVisible.ts

@@ -0,0 +1,66 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/isElementVisible.ts).
+
+import { getOwnerWindow } from './domHelpers';
+
+const supportsCheckVisibility =
+	typeof Element !== 'undefined' && 'checkVisibility' in Element.prototype;
+
+function isStyleVisible(element: Element) {
+	const windowObject = getOwnerWindow(element);
+	if (
+		!(element instanceof windowObject.HTMLElement) &&
+		!(element instanceof windowObject.SVGElement)
+	) {
+		return false;
+	}
+
+	let { display, visibility } = element.style;
+
+	let isVisible = display !== 'none' && visibility !== 'hidden' && visibility !== 'collapse';
+
+	if (isVisible) {
+		const { getComputedStyle } = getOwnerWindow(element);
+		let { display: computedDisplay, visibility: computedVisibility } = getComputedStyle(element);
+
+		isVisible =
+			computedDisplay !== 'none' &&
+			computedVisibility !== 'hidden' &&
+			computedVisibility !== 'collapse';
+	}
+
+	return isVisible;
+}
+
+function isAttributeVisible(element: Element, childElement?: Element) {
+	return (
+		!element.hasAttribute('hidden') &&
+		// Ignore HiddenSelect when tree walking.
+		!element.hasAttribute('data-react-aria-prevent-focus') &&
+		(element.nodeName === 'DETAILS' && childElement && childElement.nodeName !== 'SUMMARY'
+			? element.hasAttribute('open')
+			: true)
+	);
+}
+
+/**
+ * Adapted from https://github.com/testing-library/jest-dom and
+ * https://github.com/vuejs/vue-test-utils-next/.
+ * Licensed under the MIT License.
+ *
+ * @param element - Element to evaluate for display or visibility.
+ */
+export function isElementVisible(element: Element, childElement?: Element): boolean {
+	if (supportsCheckVisibility) {
+		return (
+			element.checkVisibility({ visibilityProperty: true }) &&
+			!element.closest('[data-react-aria-prevent-focus]')
+		);
+	}
+
+	return (
+		element.nodeName !== '#comment' &&
+		isStyleVisible(element) &&
+		isAttributeVisible(element, childElement) &&
+		(!element.parentElement || isElementVisible(element.parentElement, element))
+	);
+}

package/src/utils/isFocusable.ts

@@ -0,0 +1,57 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/isFocusable.ts).
+
+import { getOwnerWindow } from './domHelpers';
+import { isElementVisible } from './isElementVisible';
+
+const focusableElements = [
+	'input:not([disabled]):not([type=hidden])',
+	'select:not([disabled])',
+	'textarea:not([disabled])',
+	'button:not([disabled])',
+	'a[href]',
+	'area[href]',
+	'summary',
+	'iframe',
+	'object',
+	'embed',
+	'audio[controls]',
+	'video[controls]',
+	'[contenteditable]:not([contenteditable^="false"])',
+	'permission',
+];
+
+const FOCUSABLE_ELEMENT_SELECTOR =
+	focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';
+
+focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
+const TABBABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
+
+export function isFocusable(
+	element: Element,
+	options?: { skipVisibilityCheck?: boolean },
+): boolean {
+	return (
+		element.matches(FOCUSABLE_ELEMENT_SELECTOR) &&
+		!isInert(element) &&
+		(options?.skipVisibilityCheck || isElementVisible(element))
+	);
+}
+
+export function isTabbable(element: Element): boolean {
+	return (
+		element.matches(TABBABLE_ELEMENT_SELECTOR) && isElementVisible(element) && !isInert(element)
+	);
+}
+
+function isInert(element: Element): boolean {
+	let node: Element | null = element;
+	while (node != null) {
+		if (node instanceof getOwnerWindow(node).HTMLElement && node.inert) {
+			return true;
+		}
+
+		node = node.parentElement;
+	}
+
+	return false;
+}

package/src/utils/isScrollable.ts

@@ -0,0 +1,21 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/isScrollable.ts).
+
+export function isScrollable(node: Element | null, checkForOverflow?: boolean): boolean {
+	if (!node) {
+		return false;
+	}
+	let style = window.getComputedStyle(node);
+	let root = document.scrollingElement || document.documentElement;
+	let isScrollable = /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+
+	// Root element has `visible` overflow by default, but is scrollable nonetheless.
+	if (node === root && style.overflow !== 'hidden') {
+		isScrollable = true;
+	}
+
+	if (isScrollable && checkForOverflow) {
+		isScrollable = node.scrollHeight !== node.clientHeight || node.scrollWidth !== node.clientWidth;
+	}
+
+	return isScrollable;
+}

package/src/utils/isVirtualEvent.ts

@@ -0,0 +1,47 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/isVirtualEvent.ts).
+
+import { isAndroid } from './platform';
+
+// Original licensing for the following method can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/facebook/react/blob/3c713d513195a53788b3f8bb4b70279d68b15bcc/packages/react-interactions/events/src/dom/shared/index.js#L74-L87
+
+// Keyboards, Assistive Technologies, and element.click() all produce a "virtual"
+// click event. This is a method of inferring such clicks. Every browser except
+// IE 11 only sets a zero value of "detail" for click events that are "virtual".
+// However, IE 11 uses a zero value for all click events. For IE 11 we rely on
+// the quirk that it produces click events that are of type PointerEvent, and
+// where only the "virtual" click lacks a pointerType field.
+
+export function isVirtualClick(event: MouseEvent | PointerEvent): boolean {
+	// JAWS/NVDA with Firefox.
+	if ((event as PointerEvent).pointerType === '' && event.isTrusted) {
+		return true;
+	}
+
+	// Android TalkBack's detail value varies depending on the event listener providing the event so we have specific logic here instead
+	// If pointerType is defined, event is from a click listener. For events from mousedown listener, detail === 0 is a sufficient check
+	// to detect TalkBack virtual clicks.
+	if (isAndroid() && (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 the pointer size is zero, then we assume it's from a screen reader.
+	// Android TalkBack double tap will sometimes return a event with width and height of 1
+	// and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
+	// Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
+	// instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216. event.pointerType === 'mouse' is to distingush
+	// Talkback double tap from Windows Firefox touch screen press
+	return (
+		(!isAndroid() && event.width === 0 && event.height === 0) ||
+		(event.width === 1 &&
+			event.height === 1 &&
+			event.pressure === 0 &&
+			event.detail === 0 &&
+			event.pointerType === 'mouse')
+	);
+}

package/src/utils/mergeProps.ts

@@ -0,0 +1,76 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/mergeProps.ts).
+// Event handlers here are octane's NATIVE delegated `onXxx` props — chaining semantics are
+// identical. `className` composition stays clsx (upstream contract); octane's own
+// class/className normalization then applies at the element, which agrees byte-for-byte
+// for the string results clsx produces.
+import clsx from 'clsx';
+
+import { chain } from './chain';
+import { mergeIds } from './useId';
+import { mergeRefs } from './mergeRefs';
+
+interface Props {
+	[key: string]: any;
+}
+
+type PropsArg = Props | null | undefined;
+
+// taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379
+type TupleTypes<T> = { [P in keyof T]: T[P] } extends { [key: number]: infer V }
+	? NullToObject<V>
+	: never;
+type NullToObject<T> = T extends null | undefined ? {} : T;
+
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void
+	? I
+	: never;
+
+/**
+ * Merges multiple props objects together. Event handlers are chained,
+ * classNames are combined, ids are deduplicated, and refs are merged.
+ * For all other props, the last prop object overrides all previous ones.
+ *
+ * @param args - Multiple sets of props to merge together.
+ */
+export function mergeProps<T extends PropsArg[]>(...args: T): UnionToIntersection<TupleTypes<T>> {
+	// Start with a base clone of the first argument. This is a lot faster than starting
+	// with an empty object and adding properties as we go.
+	let result: Props = { ...args[0] };
+	for (let i = 1; i < args.length; i++) {
+		let props = args[i];
+		for (let key in props) {
+			let a = result[key];
+			let b = props[key];
+
+			// Chain events
+			if (
+				typeof a === 'function' &&
+				typeof b === 'function' &&
+				// This is a lot faster than a regex.
+				key[0] === 'o' &&
+				key[1] === 'n' &&
+				key.charCodeAt(2) >= /* 'A' */ 65 &&
+				key.charCodeAt(2) <= /* 'Z' */ 90
+			) {
+				result[key] = chain(a, b);
+
+				// Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
+			} else if (
+				(key === 'className' || key === 'UNSAFE_className') &&
+				typeof a === 'string' &&
+				typeof b === 'string'
+			) {
+				result[key] = clsx(a, b);
+			} else if (key === 'id' && a && b) {
+				result.id = mergeIds(a, b);
+			} else if (key === 'ref' && a && b) {
+				result.ref = mergeRefs(a, b);
+				// Override others
+			} else {
+				result[key] = b !== undefined ? b : a;
+			}
+		}
+	}
+
+	return result as UnionToIntersection<TupleTypes<T>>;
+}

package/src/utils/mergeRefs.ts

@@ -0,0 +1,48 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/mergeRefs.ts).
+// React's `Ref` type becomes a local structural type — octane refs are the same shapes
+// (callback ref with optional cleanup, or object ref), passed as ordinary props.
+
+export type MergableRef<T> =
+	| ((value: T | null) => void | (() => void))
+	| { current: T | null }
+	| null
+	| undefined;
+
+/**
+ * Merges multiple refs into one. Works with either callback or object refs.
+ */
+export function mergeRefs<T>(...refs: Array<MergableRef<T>>): MergableRef<T> {
+	if (refs.length === 1 && refs[0]) {
+		return refs[0];
+	}
+
+	return (value: T | null) => {
+		let hasCleanup = false;
+
+		const cleanups = refs.map((ref) => {
+			const cleanup = setRef(ref, value);
+			hasCleanup ||= typeof cleanup == 'function';
+			return cleanup;
+		});
+
+		if (hasCleanup) {
+			return () => {
+				cleanups.forEach((cleanup, i) => {
+					if (typeof cleanup === 'function') {
+						cleanup();
+					} else {
+						setRef(refs[i], null);
+					}
+				});
+			};
+		}
+	};
+}
+
+function setRef<T>(ref: MergableRef<T>, value: T | null): void | (() => void) {
+	if (typeof ref === 'function') {
+		return ref(value);
+	} else if (ref != null) {
+		ref.current = value;
+	}
+}

package/src/utils/openLink.ts

@@ -0,0 +1,231 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/openLink.tsx).
+// octane adaptations: JSX → createElement; native events, so `handleLinkClick` takes a DOM
+// MouseEvent and `e.isDefaultPrevented()` → `e.defaultPrevented`; React's DOMAttributes type
+// (a synthetic-event prop bag) is a local structural stand-in for the returned data-* records.
+
+import type { Href, LinkDOMProps, RouterOptions } from '@react-types/shared';
+import { createContext, createElement, useContext, useMemo } from 'octane';
+
+import { S, splitSlot } from '../internal';
+import { focusWithoutScrolling } from './focusWithoutScrolling';
+import { isFirefox, isIPad, isMac, isWebKit } from './platform';
+
+type DOMAttributes<T = Element> = Record<string, any>;
+
+interface Router {
+	isNative: boolean;
+	open: (
+		target: Element,
+		modifiers: Modifiers,
+		href: Href,
+		routerOptions: RouterOptions | undefined,
+	) => void;
+	useHref: (href: Href) => string;
+}
+
+const RouterContext = createContext<Router>({
+	isNative: true,
+	open: openSyntheticLink,
+	useHref: (href) => href,
+});
+
+interface RouterProviderProps {
+	navigate: (path: Href, routerOptions: RouterOptions | undefined) => void;
+	useHref?: (href: Href) => string;
+	children: any;
+}
+
+/**
+ * A RouterProvider accepts a `navigate` function from a framework or client side router,
+ * and provides it to all nested React Aria links to enable client side navigation.
+ */
+export function RouterProvider(props: RouterProviderProps): any {
+	let { children, navigate, useHref } = props;
+
+	let ctx = useMemo(
+		() => ({
+			isNative: false,
+			open: (
+				target: Element,
+				modifiers: Modifiers,
+				href: Href,
+				routerOptions: RouterOptions | undefined,
+			) => {
+				getSyntheticLink(target, (link) => {
+					if (shouldClientNavigate(link, modifiers)) {
+						navigate(href, routerOptions);
+					} else {
+						openLink(link, modifiers);
+					}
+				});
+			},
+			useHref: useHref || ((href) => href),
+		}),
+		[navigate, useHref],
+		S('RouterProvider:ctx'),
+	);
+
+	return createElement(RouterContext.Provider, { value: ctx, children });
+}
+
+export function useRouter(): Router {
+	return useContext(RouterContext);
+}
+
+interface Modifiers {
+	metaKey?: boolean;
+	ctrlKey?: boolean;
+	altKey?: boolean;
+	shiftKey?: boolean;
+}
+
+export function shouldClientNavigate(link: HTMLAnchorElement, modifiers: Modifiers): boolean {
+	// Use getAttribute here instead of link.target. Firefox will default link.target to "_parent" when inside an iframe.
+	let target = link.getAttribute('target');
+	return (
+		(!target || target === '_self') &&
+		link.origin === location.origin &&
+		!link.hasAttribute('download') &&
+		!modifiers.metaKey && // open in new tab (mac)
+		!modifiers.ctrlKey && // open in new tab (windows)
+		!modifiers.altKey && // download
+		!modifiers.shiftKey
+	);
+}
+
+export function openLink(target: HTMLAnchorElement, modifiers: Modifiers, setOpening = true): void {
+	let { metaKey, ctrlKey, altKey, shiftKey } = modifiers;
+
+	// Firefox does not recognize keyboard events as a user action by default, and the popup blocker
+	// will prevent links with target="_blank" from opening. However, it does allow the event if the
+	// Command/Control key is held, which opens the link in a background tab. This seems like the best we can do.
+	// See https://bugzilla.mozilla.org/show_bug.cgi?id=257870 and https://bugzilla.mozilla.org/show_bug.cgi?id=746640.
+	if (isFirefox() && window.event?.type?.startsWith('key') && target.target === '_blank') {
+		if (isMac()) {
+			metaKey = true;
+		} else {
+			ctrlKey = true;
+		}
+	}
+
+	// WebKit does not support firing click events with modifier keys, but does support keyboard events.
+	// https://github.com/WebKit/WebKit/blob/c03d0ac6e6db178f90923a0a63080b5ca210d25f/Source/WebCore/html/HTMLAnchorElement.cpp#L184
+	let event =
+		isWebKit() && isMac() && !isIPad() && process.env.NODE_ENV !== 'test'
+			? // @ts-ignore - keyIdentifier is a non-standard property, but it's what webkit expects
+				new KeyboardEvent('keydown', { keyIdentifier: 'Enter', metaKey, ctrlKey, altKey, shiftKey })
+			: new MouseEvent('click', {
+					metaKey,
+					ctrlKey,
+					altKey,
+					shiftKey,
+					detail: 1,
+					bubbles: true,
+					cancelable: true,
+				});
+	(openLink as any).isOpening = setOpening;
+	focusWithoutScrolling(target);
+	target.dispatchEvent(event);
+	(openLink as any).isOpening = false;
+}
+// https://github.com/parcel-bundler/parcel/issues/8724
+(openLink as any).isOpening = false;
+
+function getSyntheticLink(target: Element, open: (link: HTMLAnchorElement) => void) {
+	if (target instanceof HTMLAnchorElement) {
+		open(target);
+	} else if (target.hasAttribute('data-href')) {
+		let link = document.createElement('a');
+		link.href = target.getAttribute('data-href')!;
+		if (target.hasAttribute('data-target')) {
+			link.target = target.getAttribute('data-target')!;
+		}
+		if (target.hasAttribute('data-rel')) {
+			link.rel = target.getAttribute('data-rel')!;
+		}
+		if (target.hasAttribute('data-download')) {
+			link.download = target.getAttribute('data-download')!;
+		}
+		if (target.hasAttribute('data-ping')) {
+			link.ping = target.getAttribute('data-ping')!;
+		}
+		if (target.hasAttribute('data-referrer-policy')) {
+			link.referrerPolicy = target.getAttribute('data-referrer-policy')!;
+		}
+		target.appendChild(link);
+		open(link);
+		target.removeChild(link);
+	}
+}
+
+function openSyntheticLink(target: Element, modifiers: Modifiers) {
+	getSyntheticLink(target, (link) => openLink(link, modifiers));
+}
+
+export function useSyntheticLinkProps(props: LinkDOMProps): DOMAttributes<HTMLElement>;
+export function useSyntheticLinkProps(...args: any[]): DOMAttributes<HTMLElement> {
+	const [user] = splitSlot(args);
+	const props = user[0] as LinkDOMProps;
+
+	let router = useRouter();
+	const href = router.useHref(props.href ?? '');
+	return {
+		'data-href': props.href ? href : undefined,
+		'data-target': props.target,
+		'data-rel': props.rel,
+		'data-download': props.download,
+		'data-ping': props.ping,
+		'data-referrer-policy': props.referrerPolicy,
+	} as DOMAttributes<HTMLElement>;
+}
+
+/** @deprecated - For backward compatibility. */
+export function getSyntheticLinkProps(props: LinkDOMProps): DOMAttributes<HTMLElement> {
+	return {
+		'data-href': props.href,
+		'data-target': props.target,
+		'data-rel': props.rel,
+		'data-download': props.download,
+		'data-ping': props.ping,
+		'data-referrer-policy': props.referrerPolicy,
+	} as DOMAttributes<HTMLElement>;
+}
+
+export function useLinkProps(props?: LinkDOMProps): LinkDOMProps;
+export function useLinkProps(...args: any[]): LinkDOMProps {
+	const [user] = splitSlot(args);
+	const props = user[0] as LinkDOMProps | undefined;
+
+	let router = useRouter();
+	const href = router.useHref(props?.href ?? '');
+	let linkProps: LinkDOMProps = {};
+	if (props) {
+		for (let key of ['href', 'target', 'rel', 'download', 'ping', 'referrerPolicy']) {
+			if (key in props) {
+				(linkProps as any)[key] = key === 'href' ? href : (props as any)[key];
+			}
+		}
+	}
+	return linkProps;
+}
+
+export function handleLinkClick(
+	e: MouseEvent,
+	router: Router,
+	href: Href | undefined,
+	routerOptions: RouterOptions | undefined,
+): void {
+	// If a custom router is provided, prevent default and forward if this link should client navigate.
+	if (
+		!router.isNative &&
+		e.currentTarget instanceof HTMLAnchorElement &&
+		e.currentTarget.href &&
+		// If props are applied to a router Link component, it may have already prevented default.
+		!e.defaultPrevented &&
+		shouldClientNavigate(e.currentTarget, e) &&
+		href
+	) {
+		e.preventDefault();
+		router.open(e.currentTarget, e, href, routerOptions);
+	}
+}