@octanejs/aria 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dominic Gannaway
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @octanejs/aria
+
+React Aria for the [octane](https://github.com/octanejs/octane) renderer — a
+faithful port of Adobe's [React Aria](https://react-spectrum.adobe.com/react-aria/)
+(`react-aria`, `react-stately`, and eventually `react-aria-components`) onto
+octane's hooks and native event system.
+
+- `@octanejs/aria` — the `react-aria` behavior-hook surface.
+- `@octanejs/aria/stately` — the `react-stately` state-hook surface.
+- `@octanejs/aria/components` — the `react-aria-components` surface (planned).
+
+Ported from the pinned `adobe/react-spectrum` checkout at the commit publishing
+`react-aria@3.50.0` / `react-stately@3.48.0` / `react-aria-components@1.19.0`,
+and proven by differential parity: the same fixture runs through
+`@octanejs/aria` and the real React packages, asserting byte-identical DOM.
+
+Status, supported surface, and known divergences: `status.json` (rendered into
+`docs/bindings-status.md`). Plan and progress: `docs/aria-migration-plan.md`.
+
+## Notable divergences
+
+- Octane has no synthetic `onChange`; text-input DOM wiring uses native
+  `onInput` (per keystroke — the same timing React's `onChange` has for text
+  inputs). React Aria's public value-level `onChange(value)` callbacks are
+  unchanged.
+- `forwardRef` becomes octane's ref-as-prop (React 19 style).

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@octanejs/aria",
+  "version": "0.0.1",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "octane": {
+    "hookSlots": {
+      "manual": [
+        "src"
+      ]
+    }
+  },
+  "description": "React Aria for the octane renderer — a port of Adobe's react-aria / react-stately / react-aria-components (accessible behavior hooks, state hooks, and components) onto octane's hooks and native event system.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/aria"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./stately": "./src/stately/index.ts"
+  },
+  "dependencies": {
+    "@react-types/shared": "^3.36.0",
+    "clsx": "^2.1.1"
+  },
+  "peerDependencies": {
+    "octane": "0.1.7"
+  },
+  "devDependencies": {
+    "@tsrx/react": "^0.2.37",
+    "esbuild": "^0.28.1",
+    "react": "^19.2.0",
+    "react-aria": "3.50.0",
+    "react-dom": "^19.2.0",
+    "react-stately": "3.48.0",
+    "vitest": "^4.1.9",
+    "octane": "0.1.7"
+  },
+  "scripts": {
+    "test": "vitest run"
+  }
+}

package/src/index.ts

@@ -0,0 +1,52 @@
+// @octanejs/aria — the `react-aria` surface, ported onto octane. Exports mirror the
+// upstream monopackage index (.react-spectrum/packages/react-aria/exports/index.ts) and
+// grow area-by-area with the migration plan (docs/aria-migration-plan.md).
+
+// interactions
+export { useFocus } from './interactions/useFocus';
+export { useFocusVisible } from './interactions/useFocusVisible';
+export { useFocusWithin } from './interactions/useFocusWithin';
+export { useHover } from './interactions/useHover';
+export { useInteractOutside } from './interactions/useInteractOutside';
+export { useKeyboard } from './interactions/useKeyboard';
+export { useMove } from './interactions/useMove';
+export { usePress } from './interactions/usePress';
+export { useLongPress } from './interactions/useLongPress';
+export { useFocusable, Focusable } from './interactions/useFocusable';
+export { Pressable } from './interactions/Pressable';
+
+// utils
+export { chain } from './utils/chain';
+export { mergeProps } from './utils/mergeProps';
+export { mergeRefs } from './utils/mergeRefs';
+export { RouterProvider } from './utils/openLink';
+export { useId } from './utils/useId';
+export { useObjectRef } from './utils/useObjectRef';
+
+// ssr
+export { SSRProvider, useIsSSR } from './ssr/SSRProvider';
+
+// types — upstream re-exports the React-free event/prop types from @react-types/shared;
+// the event-handler prop types come from the ported modules, where React's synthetic
+// event types became native ones.
+export type { FocusProps, FocusResult } from './interactions/useFocus';
+export type { FocusVisibleProps, FocusVisibleResult } from './interactions/useFocusVisible';
+export type { FocusWithinProps, FocusWithinResult } from './interactions/useFocusWithin';
+export type { HoverProps, HoverResult } from './interactions/useHover';
+export type { InteractOutsideProps } from './interactions/useInteractOutside';
+export type { KeyboardProps, KeyboardResult } from './interactions/useKeyboard';
+export type { LongPressProps, LongPressResult } from './interactions/useLongPress';
+export type { MoveResult } from './interactions/useMove';
+export type { PressHookProps, PressProps, PressResult } from './interactions/usePress';
+export type { PressableProps } from './interactions/Pressable';
+export type { FocusableAria, FocusableOptions, FocusableProps } from './interactions/useFocusable';
+export type {
+	MoveEvents,
+	PressEvent,
+	PressEvents,
+	LongPressEvent,
+	MoveStartEvent,
+	MoveMoveEvent,
+	MoveEndEvent,
+} from '@react-types/shared';
+export type { SSRProviderProps } from './ssr/SSRProvider';

package/src/interactions/PressResponder.ts

@@ -0,0 +1,54 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/interactions/PressResponder.tsx).
+// octane adaptations:
+// - React.forwardRef → octane ref-as-prop (the forwarded ref arrives as `props.ref`);
+//   JSX → createElement (this is a plain-`.ts` component, so no compiled slots — hooks use
+//   the stable S()/subSlot component-slot convention).
+// - React's ReactNode/JSX.Element types → `any` (octane descriptors).
+// - The dev-only "PressResponder was rendered without a pressable child" console.warn
+//   effect is not ported (repo policy: no dev-only console warnings); `register()`
+//   bookkeeping is unchanged.
+import type { FocusableElement } from '@react-types/shared';
+import { createElement, useContext, useMemo, useRef } from 'octane';
+
+import { mergeProps } from '../utils/mergeProps';
+import type { PressProps } from './usePress';
+import { PressResponderContext } from './context';
+import { S, subSlot } from '../internal';
+import { useObjectRef } from '../utils/useObjectRef';
+import { useSyncRef } from '../utils/useSyncRef';
+
+// octane adaptation: ref-as-prop replaces React's ForwardedRef parameter.
+type ForwardedRef<T> = ((instance: T | null) => (() => void) | void) | { current: T | null } | null;
+
+interface PressResponderProps extends PressProps {
+	children: any;
+	ref?: ForwardedRef<FocusableElement>;
+}
+
+export function PressResponder(allProps: PressResponderProps): any {
+	const slot = S('PressResponder');
+	let { children, ref, ...props } = allProps;
+
+	let isRegistered = useRef(false, subSlot(slot, 'registered'));
+	let prevContext = useContext(PressResponderContext);
+	let context: any = mergeProps(prevContext || {}, {
+		...props,
+		register() {
+			isRegistered.current = true;
+			if (prevContext) {
+				prevContext.register();
+			}
+		},
+	});
+
+	context.ref = useObjectRef(ref || prevContext?.ref, subSlot(slot, 'ref'));
+	useSyncRef(prevContext, context.ref, subSlot(slot, 'sync'));
+
+	return createElement(PressResponderContext.Provider, { value: context, children });
+}
+
+export function ClearPressResponder({ children }: { children: any }): any {
+	const slot = S('ClearPressResponder');
+	let context = useMemo(() => ({ register: () => {} }), [], subSlot(slot, 'context'));
+	return createElement(PressResponderContext.Provider, { value: context as any, children });
+}

package/src/interactions/Pressable.ts

@@ -0,0 +1,37 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/interactions/Pressable.tsx).
+// octane adaptations: `forwardRef` becomes ref-as-prop; `React.Children.only` /
+// `cloneElement` are octane's descriptor-based equivalents, so the child must be an
+// element DESCRIPTOR (prop-position JSX, `createElement`, or a `.map()` result — the
+// same contract as radix `Slot`). The upstream effect body is entirely dev-only
+// console warnings and is not ported (repo policy).
+import type { FocusableElement } from '@react-types/shared';
+import { Children, cloneElement } from 'octane';
+
+import { S, subSlot } from '../internal';
+import { mergeProps } from '../utils/mergeProps';
+import { mergeRefs, type MergableRef } from '../utils/mergeRefs';
+import { useObjectRef } from '../utils/useObjectRef';
+import { usePress, type PressProps } from './usePress';
+import { useFocusable } from './useFocusable';
+
+export interface PressableProps extends PressProps {
+	/** The single element-descriptor child the press behavior is projected onto. */
+	children: any;
+	ref?: MergableRef<FocusableElement>;
+}
+
+export function Pressable(props: PressableProps): any {
+	const slot = S('Pressable');
+	const { children, ref: forwardedRef, ...rest } = props;
+	const ref = useObjectRef<FocusableElement>(forwardedRef, subSlot(slot, 'ref'));
+	const { pressProps } = usePress({ ...rest, ref }, subSlot(slot, 'press'));
+	const { focusableProps } = useFocusable(rest, ref, subSlot(slot, 'focusable'));
+	const child = Children.only(children);
+
+	const childRef = (child as any).props?.ref;
+
+	return cloneElement(child, {
+		...mergeProps(pressProps, focusableProps, (child as any).props),
+		ref: mergeRefs(childRef, ref),
+	});
+}

package/src/interactions/context.ts

@@ -0,0 +1,20 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/interactions/context.ts).
+// octane adaptations: React.createContext → octane createContext (octane's Context is
+// callable-as-Provider, `.Provider` stays as an identity alias, so consumers are unchanged);
+// React's MutableRefObject type → a local structural alias; `displayName` is stamped through
+// a cast (octane's Context type doesn't declare it, but the runtime reads it for diagnostics).
+import type { FocusableElement } from '@react-types/shared';
+import { createContext, type Context } from 'octane';
+
+import type { PressProps } from './usePress';
+
+type MutableRefObject<T> = { current: T };
+
+interface IPressResponderContext extends PressProps {
+	register(): void;
+	ref?: MutableRefObject<FocusableElement>;
+}
+
+export const PressResponderContext: Context<IPressResponderContext> =
+	createContext<IPressResponderContext>({ register: () => {} });
+(PressResponderContext as any).displayName = 'PressResponderContext';

package/src/interactions/createEventHandler.ts

@@ -0,0 +1,94 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/interactions/createEventHandler.ts).
+// octane adaptations:
+// - Handlers receive NATIVE events. Upstream builds the wrapped event by SPREADING a React
+//   synthetic event (`{...e, overrides}`); spreading a native event copies nothing (its
+//   properties are non-enumerable prototype accessors), so the wrapped event is a Proxy over
+//   the live native event instead: the override methods win, function-valued properties are
+//   bound to the underlying event, everything else forwards.
+// - `BaseEvent` from '@react-types/shared' is typed over React's SyntheticEvent; a local
+//   structural alias over the native Event type replaces it.
+// - The dev-only console.error inside `stopPropagation` is not ported (the flag mechanics
+//   are preserved exactly).
+
+// Event bubbling can be problematic in real-world applications, so the default for React Spectrum components
+// is not to propagate. This can be overridden by calling continuePropagation() on the event.
+export type BaseEvent<T extends Event> = T & {
+	/**
+	 * Use continuePropagation.
+	 *
+	 * @deprecated
+	 */
+	stopPropagation(): void;
+	continuePropagation(): void;
+};
+
+const hasOwn = Object.prototype.hasOwnProperty;
+
+/**
+ * This function wraps an event handler to make stopPropagation the default, and support
+ * continuePropagation instead.
+ */
+export function createEventHandler<T extends Event>(
+	handler?: (e: BaseEvent<T>) => void,
+): ((e: T) => void) | undefined {
+	if (!handler) {
+		return undefined;
+	}
+
+	// NB: the flag deliberately lives on the WRAPPER closure, not per dispatch — after a
+	// handler calls continuePropagation(), a later event on the same wrapper instance does
+	// not re-arm stop-by-default. That is upstream's exact (and admittedly surprising)
+	// contract at the pinned version; the differential KeyLatch fixture pins octane to
+	// React's observable behavior across consecutive dispatches, so an upstream semantics
+	// change will surface at the next pin bump rather than silently diverging here.
+	let shouldStopPropagation = true;
+	return (e: T) => {
+		const overrides: Record<PropertyKey, any> = {
+			preventDefault() {
+				e.preventDefault();
+			},
+			isDefaultPrevented() {
+				// On a native event, `defaultPrevented` is the source of truth (upstream reads
+				// the synthetic event's isDefaultPrevented()).
+				return e.defaultPrevented;
+			},
+			stopPropagation() {
+				if (shouldStopPropagation) {
+					// Upstream logs a dev-only console.error here ("stopPropagation is now the
+					// default behavior..."); the flag is intentionally left as-is.
+				} else {
+					shouldStopPropagation = true;
+				}
+			},
+			continuePropagation() {
+				shouldStopPropagation = false;
+				// nested createEventHandler might have set continue propagation so we should continue
+				// propagation on wrappers
+				if (typeof (e as any).continuePropagation === 'function') {
+					(e as any).continuePropagation();
+				}
+			},
+			isPropagationStopped() {
+				return shouldStopPropagation;
+			},
+		};
+
+		const event = new Proxy(e, {
+			get(target, prop) {
+				if (hasOwn.call(overrides, prop)) {
+					return overrides[prop as any];
+				}
+				const value = Reflect.get(target, prop);
+				// Native event members are prototype accessors/methods; bind functions to the
+				// underlying event so invocation through the Proxy works.
+				return typeof value === 'function' ? value.bind(target) : value;
+			},
+		}) as BaseEvent<T>;
+
+		handler(event);
+
+		if (shouldStopPropagation) {
+			e.stopPropagation();
+		}
+	};
+}

package/src/interactions/focusSafely.ts

@@ -0,0 +1,40 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/interactions/focusSafely.ts).
+import type { FocusableElement } from '@react-types/shared';
+
+import { focusWithoutScrolling } from '../utils/focusWithoutScrolling';
+import { getActiveElement } from '../utils/shadowdom/DOMFunctions';
+import { getInteractionModality } from './useFocusVisible';
+import { getOwnerDocument } from '../utils/domHelpers';
+import { runAfterTransition } from '../utils/runAfterTransition';
+
+/**
+ * A utility function that focuses an element while avoiding undesired side effects such
+ * as page scrolling and screen reader issues with CSS transitions.
+ */
+export function focusSafely(element: FocusableElement): void {
+	if (!element.isConnected) {
+		return;
+	}
+
+	// If the user is interacting with a virtual cursor, e.g. screen reader, then
+	// wait until after any animated transitions that are currently occurring on
+	// the page before shifting focus. This avoids issues with VoiceOver on iOS
+	// causing the page to scroll when moving focus if the element is transitioning
+	// from off the screen.
+	const ownerDocument = getOwnerDocument(element);
+	if (getInteractionModality() === 'virtual') {
+		let lastFocusedElement = getActiveElement(ownerDocument);
+		runAfterTransition(() => {
+			const activeElement = getActiveElement(ownerDocument);
+			// If focus did not move or focus was lost to the body, and the element is still in the document, focus it.
+			if (
+				(activeElement === lastFocusedElement || activeElement === ownerDocument.body) &&
+				element.isConnected
+			) {
+				focusWithoutScrolling(element);
+			}
+		});
+	} else {
+		focusWithoutScrolling(element);
+	}
+}

package/src/interactions/textSelection.ts

@@ -0,0 +1,96 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/interactions/textSelection.ts).
+// Ported verbatim; the only adaptation is a literal-union annotation on the
+// `userSelect`/`webkitUserSelect` style-property picks (a bare `let` widens to
+// `string`, which this repo's strict indexing rejects).
+import { getOwnerDocument } from '../utils/domHelpers';
+
+import { isIOS } from '../utils/platform';
+import { runAfterTransition } from '../utils/runAfterTransition';
+
+// Safari on iOS starts selecting text on long press. The only way to avoid this, it seems,
+// is to add user-select: none to the entire page. Adding it to the pressable element prevents
+// that element from being selected, but nearby elements may still receive selection. We add
+// user-select: none on touch start, and remove it again on touch end to prevent this.
+// This must be implemented using global state to avoid race conditions between multiple elements.
+
+// There are three possible states due to the delay before removing user-select: none after
+// pointer up. The 'default' state always transitions to the 'disabled' state, which transitions
+// to 'restoring'. The 'restoring' state can either transition back to 'disabled' or 'default'.
+
+// For non-iOS devices, we apply user-select: none to the pressed element instead to avoid possible
+// performance issues that arise from applying and removing user-select: none to the entire page
+// (see https://github.com/adobe/react-spectrum/issues/1609).
+type State = 'default' | 'disabled' | 'restoring';
+
+// Note that state only matters here for iOS. Non-iOS gets user-select: none applied to the target element
+// rather than at the document level so we just need to apply/remove user-select: none for each pressed element individually
+let state: State = 'default';
+let savedUserSelect = '';
+let modifiedElementMap = new WeakMap<Element, string>();
+
+export function disableTextSelection(target?: Element): void {
+	if (isIOS()) {
+		if (state === 'default') {
+			const documentObject = getOwnerDocument(target);
+			savedUserSelect = documentObject.documentElement.style.webkitUserSelect;
+			documentObject.documentElement.style.webkitUserSelect = 'none';
+		}
+
+		state = 'disabled';
+	} else if (target instanceof HTMLElement || target instanceof SVGElement) {
+		// If not iOS, store the target's original user-select and change to user-select: none
+		// Ignore state since it doesn't apply for non iOS
+		let property: 'userSelect' | 'webkitUserSelect' =
+			'userSelect' in target.style ? 'userSelect' : 'webkitUserSelect';
+		modifiedElementMap.set(target, target.style[property]);
+		target.style[property] = 'none';
+	}
+}
+
+export function restoreTextSelection(target?: Element): void {
+	if (isIOS()) {
+		// If the state is already default, there's nothing to do.
+		// If it is restoring, then there's no need to queue a second restore.
+		if (state !== 'disabled') {
+			return;
+		}
+
+		state = 'restoring';
+
+		// There appears to be a delay on iOS where selection still might occur
+		// after pointer up, so wait a bit before removing user-select.
+		setTimeout(() => {
+			// Wait for any CSS transitions to complete so we don't recompute style
+			// for the whole page in the middle of the animation and cause jank.
+			runAfterTransition(() => {
+				// Avoid race conditions
+				if (state === 'restoring') {
+					const documentObject = getOwnerDocument(target);
+					if (documentObject.documentElement.style.webkitUserSelect === 'none') {
+						documentObject.documentElement.style.webkitUserSelect = savedUserSelect || '';
+					}
+
+					savedUserSelect = '';
+					state = 'default';
+				}
+			});
+		}, 300);
+	} else if (target instanceof HTMLElement || target instanceof SVGElement) {
+		// If not iOS, restore the target's original user-select if any
+		// Ignore state since it doesn't apply for non iOS
+		if (target && modifiedElementMap.has(target)) {
+			let targetOldUserSelect = modifiedElementMap.get(target) as string;
+			let property: 'userSelect' | 'webkitUserSelect' =
+				'userSelect' in target.style ? 'userSelect' : 'webkitUserSelect';
+
+			if (target.style[property] === 'none') {
+				target.style[property] = targetOldUserSelect;
+			}
+
+			if (target.getAttribute('style') === '') {
+				target.removeAttribute('style');
+			}
+			modifiedElementMap.delete(target);
+		}
+	}
+}

package/src/interactions/useFocus.ts

@@ -0,0 +1,114 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/interactions/useFocus.ts).
+// octane adaptations:
+// - Handlers receive NATIVE FocusEvents (React's FocusEvent<Target> type → native FocusEvent),
+//   so `FocusEvents` / `DOMAttributes` from '@react-types/shared' (typed over React events)
+//   become local structural aliases.
+// - Public-hook slot threading (splitSlot/subSlot) per the binding convention.
+
+// Portions of the code in this file are based on code from react.
+// Original licensing for the following can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
+
+import type { FocusableElement } from '@react-types/shared';
+import { useCallback } from 'octane';
+
+import { S, splitSlot, subSlot } from '../internal';
+import { getActiveElement, getEventTarget } from '../utils/shadowdom/DOMFunctions';
+import { getOwnerDocument } from '../utils/domHelpers';
+import { useSyntheticBlurEvent } from './utils';
+
+// octane adaptation: native-event handler props (upstream: FocusEvents<Target> from
+// '@react-types/shared'). The Target parameter is kept for signature parity.
+export interface FocusEvents<Target = FocusableElement> {
+	/** Handler that is called when the element receives focus. */
+	onFocus?: (e: FocusEvent) => void;
+	/** Handler that is called when the element loses focus. */
+	onBlur?: (e: FocusEvent) => void;
+	/** Handler that is called when the element's focus status changes. */
+	onFocusChange?: (isFocused: boolean) => void;
+}
+
+// octane adaptation: minimal structural DOMAttributes (upstream's drags React attribute types).
+export type DOMAttributes<T = FocusableElement> = Record<string, any>;
+
+export interface FocusProps<Target = FocusableElement> extends FocusEvents<Target> {
+	/** Whether the focus events should be disabled. */
+	isDisabled?: boolean;
+}
+
+export interface FocusResult<Target = FocusableElement> {
+	/** Props to spread onto the target element. */
+	focusProps: DOMAttributes<Target>;
+}
+
+/**
+ * Handles focus events for the immediate target.
+ * Focus events on child elements will be ignored.
+ */
+export function useFocus<Target extends FocusableElement = FocusableElement>(
+	props: FocusProps<Target>,
+): FocusResult<Target>;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useFocus<Target extends FocusableElement = FocusableElement>(
+	props: FocusProps<Target>,
+	slot: symbol | undefined,
+): FocusResult<Target>;
+export function useFocus(...args: any[]): FocusResult {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useFocus');
+	const props = user[0] as FocusProps;
+
+	let { isDisabled, onFocus: onFocusProp, onBlur: onBlurProp, onFocusChange } = props;
+
+	const onBlur: FocusProps['onBlur'] = useCallback(
+		(e: FocusEvent) => {
+			if (getEventTarget(e) === e.currentTarget) {
+				if (onBlurProp) {
+					onBlurProp(e);
+				}
+
+				if (onFocusChange) {
+					onFocusChange(false);
+				}
+
+				return true;
+			}
+		},
+		[onBlurProp, onFocusChange],
+		subSlot(slot, 'blur'),
+	);
+
+	const onSyntheticFocus = useSyntheticBlurEvent(onBlur!, subSlot(slot, 'syntheticBlur'));
+
+	const onFocus: FocusProps['onFocus'] = useCallback(
+		(e: FocusEvent) => {
+			// Double check that document.activeElement actually matches e.target in case a previously chained
+			// focus handler already moved focus somewhere else.
+
+			let eventTarget = getEventTarget(e);
+			const ownerDocument = getOwnerDocument(eventTarget as Element);
+			const activeElement = ownerDocument ? getActiveElement(ownerDocument) : getActiveElement();
+			if (eventTarget === e.currentTarget && eventTarget === activeElement) {
+				if (onFocusProp) {
+					onFocusProp(e);
+				}
+
+				if (onFocusChange) {
+					onFocusChange(true);
+				}
+
+				onSyntheticFocus(e);
+			}
+		},
+		[onFocusChange, onFocusProp, onSyntheticFocus],
+		subSlot(slot, 'focus'),
+	);
+
+	return {
+		focusProps: {
+			onFocus: !isDisabled && (onFocusProp || onFocusChange || onBlurProp) ? onFocus : undefined,
+			onBlur: !isDisabled && (onBlurProp || onFocusChange) ? onBlur : undefined,
+		},
+	};
+}