@octanejs/aria 0.0.46 → 0.0.47

package/src/upstream-exports/react-stately/useSearchFieldState.tsx

@@ -0,0 +1,19 @@
+/** @jsxImportSource octane */
+/*
+ * 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.
+ */
+
+export { useSearchFieldState } from '../../stately/searchfield/useSearchFieldState';
+
+export type {
+	SearchFieldProps,
+	SearchFieldState,
+} from '../../stately/searchfield/useSearchFieldState';

package/src/upstream-exports/react-stately/useSliderState.tsx

@@ -0,0 +1,20 @@
+/** @jsxImportSource octane */
+/*
+ * 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.
+ */
+
+export { useSliderState } from '../../stately/slider/useSliderState';
+
+export type {
+	SliderProps,
+	SliderStateOptions,
+	SliderState,
+} from '../../stately/slider/useSliderState';

package/src/upstream-exports/react-stately/useTableState.tsx

@@ -0,0 +1,45 @@
+/** @jsxImportSource octane */
+/*
+ * 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.
+ */
+
+export type {
+	TableColumnResizeState,
+	TableColumnResizeStateProps,
+} from '../../stately/table/useTableColumnResizeState';
+export type { TableProps, TableState, TableStateProps } from '../../stately/table/useTableState';
+
+export { useTableColumnResizeState } from '../../stately/table/useTableColumnResizeState';
+export { useTableState, UNSTABLE_useFilteredTableState } from '../../stately/table/useTableState';
+
+export type { CellProps, CellElement, CellRenderer } from '../../stately/table/Cell';
+export { Cell } from '../../stately/table/Cell';
+
+export type {
+	ColumnProps,
+	ColumnSize,
+	ColumnDynamicSize,
+	ColumnStaticSize,
+	ColumnElement,
+	ColumnRenderer,
+} from '../../stately/table/Column';
+export { Column } from '../../stately/table/Column';
+
+export type { RowProps, RowElement } from '../../stately/table/Row';
+export { Row } from '../../stately/table/Row';
+
+export type { TableBodyProps } from '../../stately/table/TableBody';
+export { TableBody } from '../../stately/table/TableBody';
+
+export type { TableHeaderProps } from '../../stately/table/TableHeader';
+export { TableHeader } from '../../stately/table/TableHeader';
+
+export type { SortDescriptor, SortDirection } from '@react-types/shared';

package/src/upstream-exports/react-stately/useTokenFieldState.tsx

@@ -0,0 +1,25 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-stately/exports/useTokenFieldState.ts).
+/*
+ * Copyright 2026 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.
+ */
+
+export { useTokenFieldState } from '../../stately/tokenfield/useTokenFieldState';
+export { TokenFieldValue } from '../../stately/tokenfield/TokenFieldValue';
+
+export type { TokenFieldProps, TokenFieldState } from '../../stately/tokenfield/useTokenFieldState';
+export type {
+	TokenFieldSegment,
+	TokenSegment,
+	TextSegment,
+	Position,
+	TokenFieldValueOptions,
+} from '../../stately/tokenfield/TokenFieldValue';

package/src/upstream-exports/react-stately/useTooltipTriggerState.tsx

@@ -0,0 +1,20 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-stately/exports/useTooltipTriggerState.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.
+ */
+
+export { useTooltipTriggerState } from '../../stately/tooltip/useTooltipTriggerState';
+
+export type {
+	TooltipTriggerProps,
+	TooltipTriggerState,
+} from '../../stately/tooltip/useTooltipTriggerState';

package/src/upstream-exports/react-stately/useTreeState.tsx

@@ -0,0 +1,14 @@
+/** @jsxImportSource octane */
+/*
+ * 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.
+ */
+export type { TreeProps, TreeState } from '../../stately/tree/useTreeState';
+export { useTreeState } from '../../stately/tree/useTreeState';

package/src/utils/domHelpers.ts

@@ -1,36 +1,93 @@
-// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/domHelpers.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 type { EventMapType } from '@react-types/shared';
+
+export const getOwnerDocument = (target?: EventTarget | null): Document => {
+	if (isWindow(target)) return target.document;
 
-export const getOwnerDocument = (el: Element | null | undefined): Document => {
-	return el?.ownerDocument ?? document;
+	if (isDocument(target)) return target;
+
+	// @ts-expect-error Ensure safe access in SSR environments.
+	return target?.ownerDocument ?? (typeof document !== 'undefined' ? document : undefined);
 };
 
-export const getOwnerWindow = (
-	el: (Window & typeof globalThis) | Element | null | undefined,
-): Window & typeof globalThis => {
-	if (el && 'window' in el && el.window === el) {
-		return el;
-	}
+export const getOwnerWindow = (target?: EventTarget | null): Window & typeof globalThis => {
+	let ownerDocument = getOwnerDocument(target);
 
-	const doc = getOwnerDocument(el as Element | null | undefined);
-	return doc.defaultView || window;
+	// @ts-expect-error Ensure safe access in SSR environments.
+	return ownerDocument?.defaultView ?? (typeof window !== 'undefined' ? window : undefined);
 };
 
 /**
  * Type guard that checks if a value is a Node. Verifies the presence and type of the nodeType
  * property.
  */
-function isNode(value: unknown): value is Node {
+export function isNode(value: unknown): value is Node {
 	return (
 		value !== null &&
 		typeof value === 'object' &&
 		'nodeType' in value &&
-		typeof (value as Node).nodeType === 'number'
+		typeof value.nodeType === 'number'
 	);
 }
+
+/**
+ * Type guard that checks if a value is a Window. Uses window self reference checks to
+ * distinguish Window from other values.
+ */
+function isWindow(value: unknown): value is Window & typeof globalThis {
+	return typeof value === 'object' && value != null && 'window' in value && value.window === value;
+}
+
 /**
- * Type guard that checks if a node is a ShadowRoot. Uses nodeType and host property checks to
- * distinguish ShadowRoot from other DocumentFragments.
+ * Type guard that checks if a value is a Document. Uses nodeType and host property checks to
+ * distinguish Document from other values.
  */
-export function isShadowRoot(node: Node | null): node is ShadowRoot {
-	return isNode(node) && node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && 'host' in node;
+export function isDocument(value: unknown): value is Document {
+	return isNode(value) && value.nodeType === 9;
+}
+
+/**
+ * Type guard that checks if a value is a ShadowRoot. Uses nodeType and host property checks to
+ * distinguish ShadowRoot from other values.
+ */
+export function isShadowRoot(value: unknown): value is ShadowRoot {
+	// 11 = DOCUMENT_FRAGMENT_NODE
+	return isNode(value) && value.nodeType === 11 && 'host' in value;
+}
+
+/**
+ * Attaches an event listener on target(s) and returns a cleanup function.
+ */
+export function addEvent<T extends EventTarget, K extends keyof EventMapType<Exclude<T, null>>>(
+	target: T | EventTarget[] | null,
+	event: Extract<K, string> | (string & {}),
+	listener?: (this: T, ev: EventMapType<Exclude<T, null>>[K]) => any,
+	options?: boolean | AddEventListenerOptions,
+): () => void {
+	if (listener == null || target == null) {
+		return () => {};
+	}
+
+	let eventTargets = Array.isArray(target) ? target : [target];
+
+	for (let eventTarget of eventTargets) {
+		eventTarget.addEventListener(event, listener as EventListener, options);
+	}
+
+	return () => {
+		for (let eventTarget of eventTargets) {
+			eventTarget.removeEventListener(event, listener as EventListener, options);
+		}
+	};
 }

package/src/utils/isVirtualEvent.ts

@@ -38,7 +38,8 @@ export function isVirtualPointerEvent(event: PointerEvent): boolean {
 	// Talkback double tap from Windows Firefox touch screen press
 	return (
 		(!isAndroid() && event.width === 0 && event.height === 0) ||
-		(event.width === 1 &&
+		(isAndroid() &&
+			event.width === 1 &&
 			event.height === 1 &&
 			event.pressure === 0 &&
 			event.detail === 0 &&

package/src/utils/openLink.ts

@@ -100,7 +100,12 @@ export function openLink(target: HTMLAnchorElement, modifiers: Modifiers, setOpe
 	// 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 (
+		!isWebKit() &&
+		isFirefox() &&
+		window.event?.type?.startsWith('key') &&
+		target.target === '_blank'
+	) {
 		if (isMac()) {
 			metaKey = true;
 		} else {
@@ -200,8 +205,8 @@ export function useLinkProps(...args: any[]): LinkDOMProps {
 	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) {
+		for (let key of ['href', 'target', 'rel', 'download', 'ping', 'referrerPolicy'] as const) {
+			if (key in props && props[key] !== undefined) {
 				(linkProps as any)[key] = key === 'href' ? href : (props as any)[key];
 			}
 		}

package/src/utils/platform.ts

@@ -58,11 +58,15 @@ export const isAppleDevice: () => boolean = cached(function () {
 });
 
 export const isWebKit: () => boolean = cached(function () {
-	return testUserAgent(/AppleWebKit/i) && !isChrome();
+	return testUserAgent(/AppleWebKit/i) && (isIOS() || !isChrome());
+});
+
+export const isSafari: () => boolean = cached(function () {
+	return isWebKit() && !isChrome() && !isFirefox();
 });
 
 export const isChrome: () => boolean = cached(function () {
-	return testUserAgent(/Chrome/i);
+	return testUserAgent(/Chrome|CriOS|CrMo/i);
 });
 
 export const isAndroid: () => boolean = cached(function () {
@@ -70,5 +74,5 @@ export const isAndroid: () => boolean = cached(function () {
 });
 
 export const isFirefox: () => boolean = cached(function () {
-	return testUserAgent(/Firefox/i);
+	return testUserAgent(/(Firefox|FxiOS)/i);
 });

package/src/utils/scrollIntoView.ts

@@ -2,7 +2,7 @@
 // Verbatim (no React surface), including the NODE_ENV === 'test' direct-assignment branch
 // (jsdom has no scrollTo implementation).
 import { getScrollParents } from './getScrollParents';
-import { isIOS } from './platform';
+import { isIOS, isWebKit } from '../utils/platform';
 
 interface ScrollIntoViewOpts {
 	/** The position to align items along the block axis in. */
@@ -81,10 +81,10 @@ export function scrollIntoView(
 	let scrollPortRight = viewRight - (isRoot ? 0 : borderRightWidth) - scrollPaddingRight;
 
 	// IOS always positions the scrollbar on the right ¯\_(ツ)_/¯
-	if (viewStyle.direction === 'rtl' && !isIOS()) {
-		scrollPortLeft += scrollBarWidth;
-	} else {
+	if ((isIOS() && isWebKit()) || viewStyle.direction === 'ltr') {
 		scrollPortRight -= scrollBarWidth;
+	} else if (viewStyle.direction === 'rtl') {
+		scrollPortLeft += scrollBarWidth;
 	}
 
 	let shouldScrollBlock = scrollAreaTop < scrollPortTop || scrollAreaBottom > scrollPortBottom;

package/src/utils/shadowdom/DOMFunctions.ts

@@ -29,8 +29,8 @@ export function nodeContains(
 		}
 
 		if (
-			(currentNode as HTMLSlotElement).tagName === 'SLOT' &&
-			(currentNode as HTMLSlotElement).assignedSlot
+			typeof (currentNode as HTMLSlotElement).assignedElements !== 'function' &&
+			(currentNode as HTMLSlotElement).assignedSlot?.parentNode
 		) {
 			// Element is slotted
 			currentNode = (currentNode as HTMLSlotElement).assignedSlot!.parentNode;
@@ -77,6 +77,46 @@ export function getEventTarget<T extends Event>(event: T): EventTarget {
 	return event.target as EventTarget;
 }
 
+/**
+ * ShadowDOM safe fast version of node.contains(document.activeElement).
+ *
+ * @param node
+ * @returns
+ */
+export function getPropagationTargets(
+	from: Element | null | undefined,
+	to?: Document | Window | Element | null,
+): EventTarget[] {
+	// If `to` is coming from a ref, its type technically allows `null`.
+	// In practice, this function will generally be called from within a useEffect.
+	// If the ref has not resolved by that point, then a coding error has been made.
+	// Better to return an empty array than `[window]`, which may appear to work
+	// in the light DOM, but fail in the shadow DOM.
+	if (to === null) {
+		return [];
+	}
+	to = to ?? getOwnerWindow(from);
+	let targets: EventTarget[] = [to];
+	if (!shadowDOM() || !from || from === to) {
+		return targets;
+	}
+
+	// The root `to` itself lives in. The event already reaches `to` once
+	// it is inside this root, so we must NOT collect this root or anything above
+	// it — only the shadow roots strictly between `refNode` and `to`.
+	// `window` has no getRootNode; its boundary is the document, which the walk
+	// reaches naturally (the document is not a ShadowRoot, so the loop exits).
+	let toRoot = 'getRootNode' in to ? to.getRootNode() : null;
+	let current: Node | null = from.getRootNode() ?? null;
+	while (isShadowRoot(current) && current !== toRoot) {
+		// order shouldn't matter
+		targets.push(current);
+		current = current.host.getRootNode();
+	}
+
+	return targets;
+}
+
 /**
  * ShadowDOM safe fast version of node.contains(document.activeElement).
  *

package/src/utils/useId.ts

@@ -29,6 +29,7 @@ if (typeof FinalizationRegistry !== 'undefined') {
  *
  * @param defaultId - Default component id.
  */
+let registeredIds = new WeakMap<object, string>();
 export function useId(defaultId?: string): string;
 // Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
 export function useId(slot: symbol | undefined): string;
@@ -44,8 +45,15 @@ export function useId(...args: any[]): string {
 	let res = useSSRSafeId(value, subSlot(slot, 'ssrId'));
 	let cleanupRef = useRef(null, subSlot(slot, 'cleanupToken'));
 
-	if (registry) {
-		registry.register(cleanupRef, res);
+	let registeredId = registeredIds.get(cleanupRef);
+	if (registry && registeredId !== res) {
+		if (registeredId != null) {
+			registry.unregister(cleanupRef);
+		}
+		// oxlint-disable-next-line react/react-compiler
+		registry.register(cleanupRef, res, cleanupRef);
+		// oxlint-disable-next-line react/react-compiler
+		registeredIds.set(cleanupRef, res);
 	}
 
 	if (canUseDOM) {
@@ -65,6 +73,7 @@ export function useId(...args: any[]): string {
 				// when it is though, also remove it from the finalization registry.
 				if (registry) {
 					registry.unregister(cleanupRef);
+					registeredIds.delete(cleanupRef);
 				}
 				idsUpdaterMap.delete(r);
 			};

package/src/utils/useLoadMoreSentinel.ts

@@ -28,6 +28,7 @@ export interface LoadMoreSentinelProps extends Omit<AsyncLoadable, 'isLoading'>
 	 * @default 1
 	 */
 	scrollOffset?: number;
+	direction?: 'start' | 'end';
 }
 
 export function useLoadMoreSentinel(
@@ -35,7 +36,7 @@ export function useLoadMoreSentinel(
 	ref: RefObject<HTMLElement | null>,
 	slot: symbol | undefined,
 ): void {
-	let { collection, onLoadMore, scrollOffset = 1 } = props;
+	let { collection, onLoadMore, scrollOffset = 1, direction = 'end' } = props;
 
 	let sentinelObserver = useRef<IntersectionObserver | null>(null, subSlot(slot, 'observer'));
 
@@ -59,9 +60,13 @@ export function useLoadMoreSentinel(
 			if (ref.current) {
 				// Tear down and set up a new IntersectionObserver when the collection changes so that we can properly trigger additional loadMores if there is room for more items
 				// Need to do this tear down and set up since using a large rootMargin will mean the observer's callback isn't called even when scrolling the item into view beause its visibility hasn't actually changed
+				const margin = 100 * scrollOffset;
+				// For direction='start', right/left margins have no affect for vertical scroll containers. We are not supporting reverse horizontal scroll containers for now.
+				const rootMargin =
+					direction === 'start' ? `${margin}% 0px 0px 0px` : `0px ${margin}% ${margin}% ${margin}%`;
 				sentinelObserver.current = new IntersectionObserver(triggerLoadMore, {
 					root: getScrollParent(ref?.current) as HTMLElement,
-					rootMargin: `0px ${100 * scrollOffset}% ${100 * scrollOffset}% ${100 * scrollOffset}%`,
+					rootMargin,
 				});
 				sentinelObserver.current.observe(ref.current);
 			}
@@ -72,7 +77,7 @@ export function useLoadMoreSentinel(
 				}
 			};
 		},
-		[collection, ref, scrollOffset],
+		[collection, ref, scrollOffset, direction],
 		subSlot(slot, 'observe'),
 	);
 }

package/src/utils/useViewportSize.ts

@@ -5,7 +5,7 @@
 import { useEffect, useState } from 'octane';
 
 import { getActiveElement, getEventTarget } from './shadowdom/DOMFunctions';
-import { isIOS } from './platform';
+import { isIOS, isWebKit } from './platform';
 import { S, splitSlot, subSlot } from '../internal';
 import { useIsSSR } from '../ssr/SSRProvider';
 import { willOpenKeyboard } from './keyboard';
@@ -75,7 +75,7 @@ export function useViewportSize(...args: any[]): ViewportSize {
 
 			updateSize(getViewportSize());
 
-			if (isIOS()) {
+			if (isIOS() && isWebKit()) {
 				window.addEventListener('blur', onBlur, true);
 			}
 
@@ -87,7 +87,7 @@ export function useViewportSize(...args: any[]): ViewportSize {
 
 			return () => {
 				cancelAnimationFrame(frame);
-				if (isIOS()) {
+				if (isIOS() && isWebKit()) {
 					window.removeEventListener('blur', onBlur, true);
 				}
 				if (!visualViewport) {

package/src/virtualizer/ScrollView.tsx

@@ -1,4 +1,5 @@
 /** @jsxImportSource octane */
+import { addEvent, getOwnerDocument } from '../utils/domHelpers';
 // Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/virtualizer/ScrollView.tsx).
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -14,7 +15,11 @@
 
 // @ts-ignore
 import { flushSync } from 'octane';
-import { getEventTarget, nodeContains } from '../utils/shadowdom/DOMFunctions';
+import {
+	getEventTarget,
+	getPropagationTargets,
+	nodeContains,
+} from '../utils/shadowdom/DOMFunctions';
 import { getScrollLeft } from './utils';
 import { Point, Rect, Size } from '../upstream-exports/react-stately/useVirtualizerState';
 import React, {
@@ -221,9 +226,13 @@ export function useScrollView(
 
 	// Attach a document-level capturing scroll listener so we can account for scrollable ancestors.
 	useEffect(() => {
-		document.addEventListener('scroll', onScroll, true);
-		return () => document.removeEventListener('scroll', onScroll, true);
-	}, [onScroll]);
+		return addEvent(
+			getPropagationTargets(ref.current, getOwnerDocument(ref.current)),
+			'scroll',
+			onScroll,
+			true,
+		);
+	}, [onScroll, ref]);
 
 	useEffect(() => {
 		return () => {

package/src/virtualizer/VirtualizerItem.tsx

@@ -24,10 +24,12 @@ interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> {
 	style?: CSSProperties;
 	className?: string;
 	children: ReactNode;
+	shouldObserveItemSize?: boolean;
 }
 
 export function VirtualizerItem(props: VirtualizerItemProps): JSX.Element {
-	let { style, className, layoutInfo, virtualizer, parent, children } = props;
+	let { style, className, layoutInfo, virtualizer, parent, shouldObserveItemSize, children } =
+		props;
 	let { direction } = useLocale();
 	let ref = useRef<HTMLDivElement | null>(null);
 	useVirtualizerItem({

package/src/virtualizer/useVirtualizerItem.tsx

@@ -1,4 +1,6 @@
 /** @jsxImportSource octane */
+import { isElementVisible } from '../utils/isElementVisible';
+import { useEffectEvent } from '../utils/useEffectEvent';
 // Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/virtualizer/useVirtualizerItem.ts).
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -14,7 +16,7 @@
 
 import { Key, RefObject } from '@react-types/shared';
 import { LayoutInfo, Size } from '../upstream-exports/react-stately/useVirtualizerState';
-import { useCallback } from '../compat/react';
+import { useCallback, useEffect } from '../compat/react';
 import { useLayoutEffect } from '../utils/useLayoutEffect';
 
 interface IVirtualizer {
@@ -25,25 +27,63 @@ export interface VirtualizerItemOptions {
 	layoutInfo: LayoutInfo | null;
 	virtualizer: IVirtualizer;
 	ref: RefObject<HTMLElement | null>;
+	shouldObserveItemSize?: boolean;
 }
 
 export function useVirtualizerItem(options: VirtualizerItemOptions): { updateSize: () => void } {
-	let { layoutInfo, virtualizer, ref } = options;
+	let { layoutInfo, virtualizer, ref, shouldObserveItemSize } = options;
 	let key = layoutInfo?.key;
 
 	let updateSize = useCallback(() => {
 		if (key != null && ref.current) {
+			if (!isElementVisible(ref.current)) {
+				return;
+			}
 			let size = getSize(ref.current);
 			virtualizer.updateItemSize(key, size);
 		}
 	}, [virtualizer, key, ref]);
 
+	let updateSizeEvent = useEffectEvent(updateSize);
 	useLayoutEffect(() => {
 		if (layoutInfo?.estimatedSize) {
-			updateSize();
+			updateSizeEvent();
 		}
 	});
 
+	// TODO: Consider using a MutationObserver in addition to ResizeObserver to detect
+	// when inner DOM structure changes cause an item's height to change.
+	// The current ResizeObserver only observes direct children,
+	// so mutations deeper in the tree won't trigger a remeasure, leading to stale cached heights and overlapping items.
+	// useResizeObserver observes one element via ref, but the wrapper height is fixed by layout
+	// and won't change when content grows. Observe direct children instead, then remeasure the
+	// wrapper in updateSize.
+	useEffect(() => {
+		if (!shouldObserveItemSize) {
+			return;
+		}
+
+		let el = ref.current;
+		if (!el || typeof ResizeObserver === 'undefined') {
+			return;
+		}
+
+		let resizeObserver = new ResizeObserver((entries) => {
+			if (!entries.length) {
+				return;
+			}
+			updateSizeEvent();
+		});
+
+		for (let child of el.children) {
+			resizeObserver.observe(child);
+		}
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [shouldObserveItemSize, ref, key]);
+
 	return { updateSize };
 }