@octanejs/aria 0.0.46 → 0.0.48

package/src/numberfield/{useNumberField.ts → useNumberField.tsx}

@@ -1,71 +1,69 @@
-// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/numberfield/useNumberField.ts).
-// octane adaptations:
-// - Handlers receive NATIVE events. The Enter-commit keydown handler flows through the
-//   ported useKeyboard wrapper (so `continuePropagation()` works) and upstream's
-//   `e.nativeEvent.isComposing` reads `e.isComposing` off the native event; onPaste takes
-//   the native ClipboardEvent. The value-level `onChange(value)` callback is unchanged —
-//   the per-keystroke DOM wiring rides the native `input` event inside the ported
-//   useTextField, and the blur commit rides the native blur/focusout path in useFocus.
-// - `flushSync` comes from 'octane'.
-// - The Parcel glob intl import becomes the generated src/intl/numberfield index
-//   (verbatim dictionaries).
-// - React's InputHTMLAttributes/LabelHTMLAttributes/GroupDOMAttributes element types
-//   collapse to the local structural `DOMAttributes` prop bag; `TextInputDOMEvents` is
-//   declared structurally over native events (upstream's drags React handler types).
-// - `useNativeValidation`'s dep-less useLayoutEffect keeps run-every-render semantics via
-//   an explicit `null` dependency argument, and threads a sub-slot like every other hook
-//   call (it is an internal helper invoked exactly once per useNumberField call).
-// - Public-hook slot threading (splitSlot/subSlot); explicit dependency arrays are kept
-//   verbatim.
+/** @jsxImportSource octane */
+interface TextInputDOMEvents {
+	onCopy?: (e: ClipboardEvent) => void;
+	onCut?: (e: ClipboardEvent) => void;
+	onPaste?: (e: ClipboardEvent) => void;
+	onCompositionStart?: (e: CompositionEvent) => void;
+	onCompositionEnd?: (e: CompositionEvent) => void;
+	onCompositionUpdate?: (e: CompositionEvent) => void;
+	onSelect?: (e: Event) => void;
+	onBeforeInput?: (e: InputEvent) => void;
+	onInput?: (e: Event) => void;
+}
+type DOMAttributes = Record<string, any>;
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria/src/numberfield/useNumberField.ts).
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import { announce } from '../live-announcer/LiveAnnouncer';
-import type { AriaButtonProps } from '../button/useButton';
-import type { AriaLabelingProps, DOMProps, RefObject, ValidationResult } from '@react-types/shared';
-import { chain } from '../utils/chain';
-import { flushSync, useCallback, useMemo, useState } from 'octane';
+import { AriaButtonProps } from '../button/useButton';
+import {
+	AriaLabelingProps,
+	DOMProps,
+	GroupDOMAttributes,
+	TextInputDOMProps,
+	ValidationResult,
+} from '@react-types/shared';
+import {
+	InputHTMLAttributes,
+	LabelHTMLAttributes,
+	RefObject,
+	useCallback,
+	useMemo,
+	useState,
+} from '../compat/react';
 import { filterDOMProps } from '../utils/filterDOMProps';
+import { flushSync, withSlot } from 'octane';
 import { getActiveElement, getEventTarget } from '../utils/shadowdom/DOMFunctions';
-import intlMessages from '../intl/numberfield';
+import intlMessages from '../intl/numberfield/index';
 import { isAndroid, isIOS, isIPhone } from '../utils/platform';
 import { mergeProps } from '../utils/mergeProps';
-import type {
+import {
 	NumberFieldProps,
 	NumberFieldState,
-} from '../stately/numberfield/useNumberFieldState';
-import { privateValidationStateProp } from '../stately/form/useFormValidationState';
+} from '../upstream-exports/react-stately/useNumberFieldState';
+import { privateValidationStateProp } from '../upstream-exports/react-stately/private/form/useFormValidationState';
 import { useFocus } from '../interactions/useFocus';
 import { useFocusWithin } from '../interactions/useFocusWithin';
 import { useFormattedTextField } from '../textfield/useFormattedTextField';
 import { useFormReset } from '../utils/useFormReset';
 import { useId } from '../utils/useId';
+import { useKeyboard } from '../interactions/useKeyboard';
 import { useLayoutEffect } from '../utils/useLayoutEffect';
 import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
 import { useNumberFormatter } from '../i18n/useNumberFormatter';
 import { useScrollWheel } from '../interactions/useScrollWheel';
 import { useSpinButton } from '../spinbutton/useSpinButton';
 
-import { S, splitSlot, subSlot } from '../internal';
-
-// octane adaptation: minimal structural DOMAttributes (upstream's drags React's synthetic
-// handler types along).
-type DOMAttributes = Record<string, any>;
-
-// octane adaptation: structural native-event versions of upstream's TextInputDOMEvents.
-interface TextInputDOMEvents {
-	// Clipboard events
-	onCopy?: (e: ClipboardEvent) => void;
-	onCut?: (e: ClipboardEvent) => void;
-	onPaste?: (e: ClipboardEvent) => void;
-	// Composition events
-	onCompositionEnd?: (e: CompositionEvent) => void;
-	onCompositionStart?: (e: CompositionEvent) => void;
-	onCompositionUpdate?: (e: CompositionEvent) => void;
-	// Selection events
-	onSelect?: (e: Event) => void;
-	// Input events
-	onBeforeInput?: (e: InputEvent) => void;
-	onInput?: (e: Event) => void;
-}
-
 export interface AriaNumberFieldProps
 	extends NumberFieldProps, DOMProps, AriaLabelingProps, TextInputDOMEvents {
 	/**
@@ -86,11 +84,11 @@ export interface AriaNumberFieldProps
 
 export interface NumberFieldAria extends ValidationResult {
 	/** Props for the label element. */
-	labelProps: DOMAttributes;
+	labelProps: LabelHTMLAttributes<HTMLLabelElement>;
 	/** Props for the group wrapper around the input and stepper buttons. */
-	groupProps: DOMAttributes;
+	groupProps: GroupDOMAttributes;
 	/** Props for the input element. */
-	inputProps: DOMAttributes;
+	inputProps: InputHTMLAttributes<HTMLInputElement>;
 	/** Props for the increment button, to be passed to `useButton`. */
 	incrementButtonProps: AriaButtonProps;
 	/** Props for the decrement button, to be passed to `useButton`. */
@@ -110,20 +108,11 @@ export function useNumberField(
 	props: AriaNumberFieldProps,
 	state: NumberFieldState,
 	inputRef: RefObject<HTMLInputElement | null>,
-): NumberFieldAria;
-// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
-export function useNumberField(
-	props: AriaNumberFieldProps,
-	state: NumberFieldState,
-	inputRef: RefObject<HTMLInputElement | null>,
-	slot: symbol | undefined,
-): NumberFieldAria;
-export function useNumberField(...args: any[]): NumberFieldAria {
-	const [user, slotArg] = splitSlot(args);
-	const slot = slotArg ?? S('useNumberField');
-	const props = user[0] as AriaNumberFieldProps;
-	const state = user[1] as NumberFieldState;
-	const inputRef = user[2] as RefObject<HTMLInputElement | null>;
+	_slot?: symbol,
+): NumberFieldAria {
+	if (_slot !== undefined) {
+		return withSlot(_slot, useNumberField, props, state, inputRef);
+	}
 
 	let {
 		id,
@@ -159,85 +148,60 @@ export function useNumberField(...args: any[]): NumberFieldAria {
 		commitValidation,
 	} = state;
 
-	const stringFormatter = useLocalizedStringFormatter(
-		intlMessages,
-		'@react-aria/numberfield',
-		subSlot(slot, 'strings'),
-	);
-	let commitAndAnnounce = useCallback(
-		() => {
-			let oldValue = inputRef.current?.value ?? '';
-			// Set input value to normalized valid value
-			flushSync(() => {
-				commit();
-			});
-
-			if (inputRef.current?.value !== oldValue) {
-				announce(inputRef.current?.value ?? '', 'assertive');
-			}
-		},
-		[commit, inputRef],
-		subSlot(slot, 'commitAndAnnounce'),
-	);
+	const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/numberfield');
+	let commitAndAnnounce = useCallback(() => {
+		let oldValue = inputRef.current?.value ?? '';
+		// Set input value to normalized valid value
+		flushSync(() => {
+			commit();
+		});
 
-	let inputId = useId(id, subSlot(slot, 'inputId'));
-	let { focusProps } = useFocus(
-		{
-			onBlur() {
-				commitAndAnnounce();
-			},
+		if (inputRef.current?.value !== oldValue) {
+			announce(inputRef.current?.value ?? '', 'assertive');
+		}
+	}, [commit, inputRef]);
+
+	let inputId = useId(id);
+	let { focusProps } = useFocus({
+		onBlur() {
+			commitAndAnnounce();
 		},
-		subSlot(slot, 'focus'),
-	);
+	});
 
-	let numberFormatter = useNumberFormatter(formatOptions, subSlot(slot, 'formatter'));
-	let intlOptions = useMemo(
-		() => numberFormatter.resolvedOptions(),
-		[numberFormatter],
-		subSlot(slot, 'intlOptions'),
-	);
+	let numberFormatter = useNumberFormatter(formatOptions);
+	let intlOptions = useMemo(() => numberFormatter.resolvedOptions(), [numberFormatter]);
 
 	// Replace negative textValue formatted using currencySign: 'accounting'
 	// with a textValue that can be announced using a minus sign.
-	let textValueFormatter = useNumberFormatter(
-		{ ...formatOptions, currencySign: undefined },
-		subSlot(slot, 'textValueFormatter'),
-	);
+	let textValueFormatter = useNumberFormatter({ ...formatOptions, currencySign: undefined });
 	let textValue = useMemo(
 		() => (isNaN(numberValue) ? '' : textValueFormatter.format(numberValue)),
 		[textValueFormatter, numberValue],
-		subSlot(slot, 'textValue'),
 	);
 
 	let {
 		spinButtonProps,
 		incrementButtonProps: incButtonProps,
 		decrementButtonProps: decButtonProps,
-	} = useSpinButton(
-		{
-			isDisabled,
-			isReadOnly,
-			isRequired,
-			maxValue,
-			minValue,
-			onIncrement: increment,
-			onIncrementToMax: incrementToMax,
-			onDecrement: decrement,
-			onDecrementToMin: decrementToMin,
-			value: numberValue,
-			textValue,
-		},
-		subSlot(slot, 'spinButton'),
-	);
+	} = useSpinButton({
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		maxValue,
+		minValue,
+		onIncrement: increment,
+		onIncrementToMax: incrementToMax,
+		onDecrement: decrement,
+		onDecrementToMin: decrementToMin,
+		value: numberValue,
+		textValue,
+	});
 
-	let [focusWithin, setFocusWithin] = useState(false, subSlot(slot, 'focusWithin'));
-	let { focusWithinProps } = useFocusWithin(
-		{ isDisabled, onFocusWithinChange: setFocusWithin },
-		subSlot(slot, 'focusWithinHook'),
-	);
+	let [focusWithin, setFocusWithin] = useState(false);
+	let { focusWithinProps } = useFocusWithin({ isDisabled, onFocusWithinChange: setFocusWithin });
 
 	let onWheel = useCallback(
-		(e: { deltaX: number; deltaY: number }) => {
+		(e) => {
 			// if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change
 			// if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec
 			// this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication
@@ -252,15 +216,10 @@ export function useNumberField(...args: any[]): NumberFieldAria {
 			}
 		},
 		[decrement, increment],
-		subSlot(slot, 'wheel'),
 	);
 	// If the input isn't supposed to receive input, disable scrolling.
 	let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;
-	useScrollWheel(
-		{ onScroll: onWheel, isDisabled: scrollingDisabled },
-		inputRef,
-		subSlot(slot, 'scrollWheel'),
-	);
+	useScrollWheel({ onScroll: onWheel, isDisabled: scrollingDisabled }, inputRef);
 
 	// The inputMode attribute influences the software keyboard that is shown on touch devices.
 	// Browsers and operating systems are quite inconsistent about what keys are available, however.
@@ -268,7 +227,7 @@ export function useNumberField(...args: any[]): NumberFieldAria {
 	// and based on testing on various devices to determine what keys are available in each inputMode.
 	let hasDecimals = (intlOptions.maximumFractionDigits ?? 0) > 0;
 	let hasNegative = state.minValue === undefined || isNaN(state.minValue) || state.minValue < 0;
-	let inputMode: string = 'numeric';
+	let inputMode: TextInputDOMProps['inputMode'] = 'numeric';
 	if (isIPhone()) {
 		// iPhone doesn't have a minus sign in either numeric or decimal.
 		// Note this is only for iPhone, not iPad, which always has both
@@ -314,31 +273,25 @@ export function useNumberField(...args: any[]): NumberFieldAria {
 	};
 
 	let domProps = filterDOMProps(props);
-	let onKeyDownEnter = useCallback(
-		(e: any) => {
-			// octane adaptation: `e.nativeEvent.isComposing` → the native event's own flag
-			// (the wrapped keyboard event proxies it through).
-			if (e.isComposing) {
-				return;
-			}
-
-			if (e.key === 'Enter') {
+	let { keyboardProps } = useKeyboard({
+		isDisabled: isDisabled || isReadOnly,
+		shortcuts: {
+			Enter: () => {
 				flushSync(() => {
 					commit();
 				});
 				commitValidation();
-			} else {
-				e.continuePropagation();
-			}
+				return { shouldPreventDefault: false };
+			},
 		},
-		[commit, commitValidation],
-		subSlot(slot, 'keyDownEnter'),
-	);
+		onKeyDown,
+		onKeyUp,
+	});
 
 	let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
 	let {
 		labelProps,
-		inputProps: textFieldProps,
+		inputProps: textFieldPropsFromHook,
 		descriptionProps,
 		errorMessageProps,
 	} = useFormattedTextField(
@@ -367,22 +320,20 @@ export function useNumberField(...args: any[]): NumberFieldAria {
 			onBlur,
 			onFocus,
 			onFocusChange,
-			onKeyDown: useMemo(
-				() => chain(onKeyDownEnter, onKeyDown),
-				[onKeyDownEnter, onKeyDown],
-				subSlot(slot, 'keyDownChain'),
-			),
-			onKeyUp,
 			onPaste,
 			description,
 			errorMessage,
-		} as any,
+		},
 		state,
 		inputRef,
-		subSlot(slot, 'textField'),
 	);
 
-	useFormReset(inputRef, state.defaultNumberValue, state.setNumberValue, subSlot(slot, 'reset'));
+	// Merge outside useFormattedTextField so useKeyboard's createEventHandler is not nested inside
+	// useTextField/useFocusable's createEventHandler (avoids redundant stopPropagation on RS events).
+	// Shortcuts run first (mergeProps chains the second argument after the first).
+	let textFieldProps = mergeProps(keyboardProps, textFieldPropsFromHook);
+
+	useFormReset(inputRef, state.defaultNumberValue, state.setNumberValue);
 	useNativeValidation(
 		state,
 		props.validationBehavior,
@@ -392,27 +343,31 @@ export function useNumberField(...args: any[]): NumberFieldAria {
 		state.maxValue,
 		props.step,
 		state.numberValue,
-		subSlot(slot, 'nativeValidation'),
 	);
 
-	let inputProps: DOMAttributes = mergeProps(spinButtonProps, focusProps, textFieldProps, {
-		// override the spinbutton role, we can't focus a spin button with VO
-		role: null,
-		// ignore aria-roledescription on iOS so that required state will announce when it is present
-		'aria-roledescription': !isIOS() ? stringFormatter.format('numberField') : null,
-		'aria-valuemax': null,
-		'aria-valuemin': null,
-		'aria-valuenow': null,
-		'aria-valuetext': null,
-		autoCorrect: 'off',
-		spellCheck: 'false',
-	});
+	let inputProps: InputHTMLAttributes<HTMLInputElement> = mergeProps(
+		spinButtonProps,
+		focusProps,
+		textFieldProps,
+		{
+			// override the spinbutton role, we can't focus a spin button with VO
+			role: null,
+			// ignore aria-roledescription on iOS so that required state will announce when it is present
+			'aria-roledescription': !isIOS() ? stringFormatter.format('numberField') : null,
+			'aria-valuemax': null,
+			'aria-valuemin': null,
+			'aria-valuenow': null,
+			'aria-valuetext': null,
+			autoCorrect: 'off',
+			spellCheck: 'false',
+		},
+	);
 
 	if (props.validationBehavior === 'native') {
 		inputProps['aria-required'] = undefined;
 	}
 
-	let onButtonPressStart = (e: any) => {
+	let onButtonPressStart = (e: import('@react-types/shared').PressEvent) => {
 		// If focus is already on the input, keep it there so we don't hide the
 		// software keyboard when tapping the increment/decrement buttons.
 		if (getActiveElement() === inputRef.current) {
@@ -425,7 +380,7 @@ export function useNumberField(...args: any[]): NumberFieldAria {
 		if (e.pointerType === 'mouse') {
 			inputRef.current?.focus();
 		} else {
-			e.target.focus();
+			(e.target as HTMLElement).focus();
 		}
 	};
 
@@ -445,9 +400,10 @@ export function useNumberField(...args: any[]): NumberFieldAria {
 		ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];
 	}
 
-	let incrementId = useId(subSlot(slot, 'incrementId'));
-	let decrementId = useId(subSlot(slot, 'decrementId'));
+	let incrementId = useId();
+	let decrementId = useId();
 
+	// oxlint-disable-next-line react/react-compiler
 	let incrementButtonProps: AriaButtonProps = mergeProps(incButtonProps, {
 		'aria-label': incrementAriaLabel || stringFormatter.format('increase', { fieldLabel }).trim(),
 		id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,
@@ -461,6 +417,7 @@ export function useNumberField(...args: any[]): NumberFieldAria {
 		onPressStart: onButtonPressStart,
 	});
 
+	// oxlint-disable-next-line react/react-compiler
 	let decrementButtonProps: AriaButtonProps = mergeProps(decButtonProps, {
 		'aria-label': decrementAriaLabel || stringFormatter.format('decrease', { fieldLabel }).trim(),
 		id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,
@@ -504,69 +461,62 @@ function useNativeValidation(
 	max: number | undefined,
 	step: number | undefined,
 	value: number | undefined,
-	slot: symbol | undefined,
 ) {
-	// octane adaptation: upstream's dep-less useLayoutEffect (run after every render) is
-	// an explicit `null` dependency argument here.
-	useLayoutEffect(
-		() => {
-			let input = inputRef.current;
-			if (
-				commitBehavior !== 'validate' ||
-				state.realtimeValidation.isInvalid ||
-				!input ||
-				input.disabled
-			) {
-				return;
-			}
+	useLayoutEffect(() => {
+		let input = inputRef.current;
+		if (
+			commitBehavior !== 'validate' ||
+			state.realtimeValidation.isInvalid ||
+			!input ||
+			input.disabled
+		) {
+			return;
+		}
 
-			// Create a native number input and use it to implement validation of min/max/step.
-			// This lets us get the native validation message provided by the browser instead of needing our own translations.
-			if (!numberInput && typeof document !== 'undefined') {
-				numberInput = document.createElement('input');
-				numberInput.type = 'number';
-			}
+		// Create a native number input and use it to implement validation of min/max/step.
+		// This lets us get the native validation message provided by the browser instead of needing our own translations.
+		if (!numberInput && typeof document !== 'undefined') {
+			numberInput = document.createElement('input');
+			numberInput.type = 'number';
+		}
 
-			if (!numberInput) {
-				// For TypeScript.
-				return;
-			}
+		if (!numberInput) {
+			// For TypeScript.
+			return;
+		}
 
-			numberInput.min = min != null && !isNaN(min) ? String(min) : '';
-			numberInput.max = max != null && !isNaN(max) ? String(max) : '';
-			numberInput.step = step != null && !isNaN(step) ? String(step) : '';
-			numberInput.value = value != null && !isNaN(value) ? String(value) : '';
-
-			// Merge validity with the visible text input (for other validations like required).
-			let valid = input.validity.valid && numberInput.validity.valid;
-			let validationMessage = input.validationMessage || numberInput.validationMessage;
-			let validity = {
-				isInvalid: !valid,
-				validationErrors: validationMessage ? [validationMessage] : [],
-				validationDetails: {
-					badInput: input.validity.badInput,
-					customError: input.validity.customError,
-					patternMismatch: input.validity.patternMismatch,
-					rangeOverflow: numberInput.validity.rangeOverflow,
-					rangeUnderflow: numberInput.validity.rangeUnderflow,
-					stepMismatch: numberInput.validity.stepMismatch,
-					tooLong: input.validity.tooLong,
-					tooShort: input.validity.tooShort,
-					typeMismatch: input.validity.typeMismatch,
-					valueMissing: input.validity.valueMissing,
-					valid,
-				},
-			};
-
-			state.updateValidation(validity);
-
-			// Block form submission if validation behavior is native.
-			// This won't overwrite any user-defined validation message because we checked realtimeValidation above.
-			if (validationBehavior === 'native' && !numberInput.validity.valid) {
-				input.setCustomValidity(numberInput.validationMessage);
-			}
-		},
-		null,
-		subSlot(slot, 'effect'),
-	);
+		numberInput.min = min != null && !isNaN(min) ? String(min) : '';
+		numberInput.max = max != null && !isNaN(max) ? String(max) : '';
+		numberInput.step = step != null && !isNaN(step) ? String(step) : '';
+		numberInput.value = value != null && !isNaN(value) ? String(value) : '';
+
+		// Merge validity with the visible text input (for other validations like required).
+		let valid = input.validity.valid && numberInput.validity.valid;
+		let validationMessage = input.validationMessage || numberInput.validationMessage;
+		let validity = {
+			isInvalid: !valid,
+			validationErrors: validationMessage ? [validationMessage] : [],
+			validationDetails: {
+				badInput: input.validity.badInput,
+				customError: input.validity.customError,
+				patternMismatch: input.validity.patternMismatch,
+				rangeOverflow: numberInput.validity.rangeOverflow,
+				rangeUnderflow: numberInput.validity.rangeUnderflow,
+				stepMismatch: numberInput.validity.stepMismatch,
+				tooLong: input.validity.tooLong,
+				tooShort: input.validity.tooShort,
+				typeMismatch: input.validity.typeMismatch,
+				valueMissing: input.validity.valueMissing,
+				valid,
+			},
+		};
+
+		state.updateValidation(validity);
+
+		// Block form submission if validation behavior is native.
+		// This won't overwrite any user-defined validation message because we checked realtimeValidation above.
+		if (validationBehavior === 'native' && !numberInput.validity.valid) {
+			input.setCustomValidity(numberInput.validationMessage);
+		}
+	});
 }

package/src/overlays/Overlay.ts

@@ -5,6 +5,7 @@
 // Provider descriptor keeps a stable `{ value, children }` shape; React's ReactNode/JSX/Context
 // types → `any`; `useOverlayFocusContain` gets public-hook slot threading.
 import { ClearPressResponder } from '../interactions/PressResponder';
+import { FocusableContext } from '../interactions/useFocusable';
 import { FocusScope } from '../focus/FocusScope';
 import { createContext, createElement, createPortal, useContext, useMemo, useState } from 'octane';
 import { useIsSSR } from '../ssr/SSRProvider';
@@ -81,7 +82,10 @@ export function Overlay(props: OverlayProps): any {
 
 	contents = createElement(OverlayContext.Provider, {
 		value: contextValue as OverlayContextValue,
-		children: createElement(ClearPressResponder, { children: contents }),
+		children: createElement(FocusableContext.Provider, {
+			value: null,
+			children: createElement(ClearPressResponder, { children: contents }),
+		}),
 	});
 
 	return createPortal(contents, portalContainer);

package/src/overlays/ariaHideOutside.ts

@@ -4,7 +4,7 @@
 // no slot threading. Module-level ref-count map and observer stack are ported verbatim.
 import { createShadowTreeWalker } from '../utils/shadowdom/ShadowTreeWalker';
 
-import { getOwnerDocument, getOwnerWindow } from '../utils/domHelpers';
+import { getOwnerDocument, getOwnerWindow, isShadowRoot } from '../utils/domHelpers';
 import { nodeContains } from '../utils/shadowdom/DOMFunctions';
 import { shadowDOM } from '../stately/flags';
 
@@ -72,14 +72,12 @@ export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOpt
 	if (shadowDOM()) {
 		// find all shadow roots that are ancestors of the targets
 		// traverse upwards until the root is reached
+		let boundary = root.getRootNode();
 		for (let target of targets) {
-			let node = target;
-			while (node && node !== root) {
-				let root = node.getRootNode();
-				if ('shadowRoot' in root) {
-					shadowRootsToWatch.add(root.shadowRoot as ShadowRoot);
-				}
-				node = root.parentNode as Element;
+			let current = target.getRootNode();
+			while (isShadowRoot(current) && current !== boundary) {
+				shadowRootsToWatch.add(current);
+				current = current.host.getRootNode();
 			}
 		}
 	}

package/src/overlays/useCloseOnScroll.ts

@@ -1,10 +1,15 @@
+import { addEvent } from '../utils/domHelpers';
 // Ported from react-aria (source: .react-spectrum/packages/react-aria/src/overlays/useCloseOnScroll.ts).
 // octane adaptations: public-hook slot threading (splitSlot/subSlot) per the binding
 // convention; the explicit dependency array is kept verbatim.
 //
 // NOTE: ported ahead of the rest of the overlays area because useOverlayTrigger (needed by
 // useMenuTrigger) shares its `onCloseMap` backward-compatibility channel.
-import { getEventTarget, nodeContains } from '../utils/shadowdom/DOMFunctions';
+import {
+	getEventTarget,
+	getPropagationTargets,
+	nodeContains,
+} from '../utils/shadowdom/DOMFunctions';
 import type { RefObject } from '@react-types/shared';
 import { useEffect } from 'octane';
 
@@ -64,10 +69,7 @@ export function useCloseOnScroll(...args: any[]): void {
 				}
 			};
 
-			window.addEventListener('scroll', onScroll, true);
-			return () => {
-				window.removeEventListener('scroll', onScroll, true);
-			};
+			return addEvent(getPropagationTargets(triggerRef.current), 'scroll', onScroll, true);
 		},
 		[isOpen, onClose, triggerRef],
 		subSlot(slot, 'scroll'),