feat: box layout and resize + anchor observer primitives

packages/@react-types/shared/src/collections.d.ts

@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {Key} from '@react-types/shared';
+import {Key} from './key';
 import {LinkDOMProps} from './dom';
 import {ReactElement, ReactNode} from 'react';
+import {Rect, Size} from './layout';
 
 export interface ItemProps<T> extends LinkDOMProps {
   /** Rendered contents of the item or child items. */
@@ -132,18 +133,6 @@ export interface KeyboardDelegate {
   getKeyForSearch?(search: string, fromKey?: Key | null): Key | null;
 }
 
-export interface Rect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface Size {
-  width: number;
-  height: number;
-}
-
 /** A LayoutDelegate provides layout information for collection items. */
 export interface LayoutDelegate {
   /** Returns a rectangle for the item with the given key. */

packages/@react-types/shared/src/index.d.ts

@@ -24,3 +24,4 @@ export * from './labelable';
 export * from './orientation';
 export * from './locale';
 export * from './key';
+export * from './layout';

packages/@react-types/shared/src/layout.d.ts

@@ -0,0 +1,52 @@
+/*
+ * 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 type BoundingNode = Element | Document;
+
+export type Axis = 'block' | 'inline';
+export type Precision = 'pixel' | 'sub-pixel' | 'device-pixel';
+export type Corner = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export type Position = 'start' | 'center' | 'end';
+
+export interface BoundingOptions {
+  /** The pixel precision to calculate the bound with. */
+  precision?: Precision;
+  /** Whether or not to allow 2D transforms on the bound. */
+  transform?: boolean;
+  /** The box-model to use when bounding. */
+  model?: BoxModel;
+}
+
+export type BoxModel =
+  | 'margin-box'
+  | 'scroll-margin-box'
+  | 'border-box'
+  | 'padding-box'
+  | 'scroll-padding-box'
+  | 'content-box';
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface Size {
+  width: number;
+  height: number;
+}

packages/react-aria/exports/private/utils/domHelpers.ts

@@ -1,7 +1,2 @@
-export {
-  addEvent,
-  getOwnerDocument,
-  getOwnerWindow,
-  isDocument,
-  isShadowRoot
-} from '../../../src/utils/domHelpers';
+export {addEvent, getOwnerDocument, getOwnerWindow} from '../../../src/utils/domHelpers';
+export {isDocument, isShadowRoot} from '../../../src/utils/typeHelpers';

packages/react-aria/exports/private/utils/layout.ts

@@ -0,0 +1 @@
+export {DOMBox} from '../../../src/utils/layout';

packages/react-aria/exports/private/utils/layoutHelpers.ts

@@ -0,0 +1,8 @@
+export {
+  getVisualViewport,
+  getWritingElement,
+  getStylingElement,
+  getScrollingElement,
+  getOverflowingElement,
+  getContainingElement
+} from '../../../src/utils/layoutHelpers';

packages/react-aria/exports/private/utils/typeHelpers.ts

@@ -0,0 +1,8 @@
+export {
+  isWindow,
+  isDocument,
+  isElement,
+  isHTMLElement,
+  isSVGElement,
+  isShadowRoot
+} from '../../../src/utils/typeHelpers';

packages/react-aria/src/interactions/utils.ts

@@ -13,8 +13,9 @@
 import {FocusableElement} from '@react-types/shared';
 import {focusWithoutScrolling} from '../utils/focusWithoutScrolling';
 import {getActiveElement, getEventTarget, nodeContains} from '../utils/shadowdom/DOMFunctions';
-import {getOwnerWindow, isShadowRoot} from '../utils/domHelpers';
+import {getOwnerWindow} from '../utils/domHelpers';
 import {isFocusable} from '../utils/isFocusable';
+import {isShadowRoot} from '../utils/typeHelpers';
 import {FocusEvent as ReactFocusEvent, SyntheticEvent, useCallback, useRef} from 'react';
 import {useLayoutEffect} from '../utils/useLayoutEffect';
 

packages/react-aria/src/overlays/ariaHideOutside.ts

@@ -11,8 +11,8 @@
  */
 
 import {createShadowTreeWalker} from '../utils/shadowdom/ShadowTreeWalker';
-
-import {getOwnerDocument, getOwnerWindow, isShadowRoot} from '../utils/domHelpers';
+import {getOwnerDocument, getOwnerWindow} from '../utils/domHelpers';
+import {isShadowRoot} from '../utils/typeHelpers';
 import {nodeContains} from '../utils/shadowdom/DOMFunctions';
 import {shadowDOM} from 'react-stately/private/flags/flags';
 

packages/react-aria/src/overlays/calculatePosition.ts

@@ -12,6 +12,8 @@
 
 import {Axis, Placement, PlacementAxis, SizeAxis} from './useOverlayPosition';
 import {clamp} from 'react-stately/private/utils/number';
+import {getContainingElement} from '../utils/layoutHelpers';
+import {getOwnerDocument} from '../utils/domHelpers';
 import {isWebKit} from '../utils/platform';
 import {nodeContains} from '../utils/shadowdom/DOMFunctions';
 
@@ -804,47 +806,6 @@ function getPosition(
 // this element will be positioned relative to.
 // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
 function getContainingBlock(node: HTMLElement): Element {
-  // The offsetParent of an element in most cases equals the containing block.
-  // https://w3c.github.io/csswg-drafts/cssom-view/#dom-htmlelement-offsetparent
-  let offsetParent = node.offsetParent;
-
-  // The offsetParent algorithm terminates at the document body,
-  // even if the body is not a containing block. Double check that
-  // and use the documentElement if so.
-  if (
-    offsetParent &&
-    offsetParent === document.body &&
-    window.getComputedStyle(offsetParent).position === 'static' &&
-    !isContainingBlock(offsetParent)
-  ) {
-    offsetParent = document.documentElement;
-  }
-
-  // TODO(later): handle table elements?
-
-  // The offsetParent can be null if the element has position: fixed, or a few other cases.
-  // We have to walk up the tree manually in this case because fixed positioned elements
-  // are still positioned relative to their containing block, which is not always the viewport.
-  if (offsetParent == null) {
-    offsetParent = node.parentElement;
-    while (offsetParent && !isContainingBlock(offsetParent)) {
-      offsetParent = offsetParent.parentElement;
-    }
-  }
-
-  // Fall back to the viewport.
-  return offsetParent || document.documentElement;
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-function isContainingBlock(node: Element): boolean {
-  let style = window.getComputedStyle(node);
-  return (
-    style.transform !== 'none' ||
-    /transform|perspective/.test(style.willChange) ||
-    style.filter !== 'none' ||
-    style.contain === 'paint' ||
-    ('backdropFilter' in style && style.backdropFilter !== 'none') ||
-    ('WebkitBackdropFilter' in style && style.WebkitBackdropFilter !== 'none')
-  );
+  let ownerDocument = getOwnerDocument(node);
+  return getContainingElement(node) ?? ownerDocument.documentElement;
 }

packages/react-aria/src/utils/domHelpers.ts

@@ -11,6 +11,7 @@
  */
 
 import type {EventMapType} from '@react-types/shared';
+import {isDocument, isWindow} from './typeHelpers';
 
 export const getOwnerDocument = (target?: EventTarget | null): Document => {
   if (isWindow(target)) return target.document;
@@ -28,44 +29,6 @@ export const getOwnerWindow = (target?: EventTarget | null): Window & typeof glo
   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.
- */
-export function isNode(value: unknown): value is Node {
-  return (
-    value !== null &&
-    typeof value === 'object' &&
-    'nodeType' in value &&
-    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 value is a Document. Uses nodeType and host property checks to
- * distinguish Document from other values.
- */
-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.
  */

packages/react-aria/src/utils/events.ts

@@ -0,0 +1,96 @@
+/*
+ * 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.
+ */
+
+import {getEventTarget} from './shadowdom/DOMFunctions';
+
+export interface SyntheticEventListener<T extends Event> {
+  (event: T): void;
+}
+
+/**
+ * An abstract base for producers of synthetic events. Mirrors the EventTarget API, but
+ * ref-counts its listeners in order to lazily (de-)attach from an event source.
+ */
+export abstract class SyntheticEventTarget<T extends Event = Event> {
+  protected listeners: Map<string, Set<SyntheticEventListener<T>>>;
+  protected connections: Set<Function>;
+
+  protected abstract connect(): void;
+  protected abstract disconnect(): void;
+
+  constructor() {
+    this.addEventListener = this.addEventListener.bind(this);
+    this.removeEventListener = this.removeEventListener.bind(this);
+    this.dispatchEvent = this.dispatchEvent.bind(this);
+
+    this.connections = new Set();
+    this.listeners = new Map();
+  }
+
+  /**
+   * The `addEventListener()` method sets up a function that will be called whenever
+   * the specified event is delivered to this target.
+   */
+  public addEventListener<K extends T['type']>(
+    type: K,
+    listener: SyntheticEventListener<Extract<T, {type: K}>>
+  ): void {
+    let handler = listener as SyntheticEventListener<T>;
+    let handlers = this.listeners.get(type);
+
+    if (process.env.NODE_ENV === 'test' || handlers?.has(handler)) return;
+    if (this.listeners.size === 0) this.connect();
+
+    handlers ??= new Set();
+    this.listeners.set(type, handlers);
+    handlers.add(handler);
+  }
+
+  /**
+   * The `removeEventListener()` method removes an event listener from this target,
+   * which had previously been registered with addEventListener().
+   */
+  public removeEventListener<K extends T['type']>(
+    type: K,
+    listener: SyntheticEventListener<Extract<T, {type: K}>>
+  ): void {
+    let handler = listener as SyntheticEventListener<T>;
+    let handlers = this.listeners.get(type);
+
+    if (process.env.NODE_ENV === 'test' || !handlers?.has(handler)) return;
+    if (handlers.size === 1 && this.listeners.size === 1) this.disconnect();
+    if (handlers.size === 1) this.listeners.delete(type);
+
+    handlers.delete(handler);
+  }
+
+  /**
+   * The `dispatchEvent()` method sends an Event to this target, (synchronously)
+   * invoking the affected event listeners in the appropriate order.
+   */
+  public dispatchEvent(event: T): boolean {
+    let target: EventTarget | null = getEventTarget(event);
+    let handlers = new Set(this.listeners.get(event.type));
+
+    Reflect.defineProperty(event, 'target', {
+      value: target ?? this,
+      enumerable: true,
+      configurable: true
+    });
+
+    for (let listener of handlers) {
+      listener(event);
+    }
+
+    return true;
+  }
+}

packages/react-aria/src/utils/isContainingBlock.ts

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+import {getOwnerWindow} from './domHelpers';
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+export function isContainingBlock(element: Element): boolean {
+  let ownerWindow = getOwnerWindow(element);
+  let style = ownerWindow.getComputedStyle(element);
+
+  return (
+    style.transform !== 'none' ||
+    style.perspective !== 'none' ||
+    style.filter !== 'none' ||
+    /(transform|perspective|filter)/.test(style.willChange) ||
+    /(layout|paint|strict|content)/.test(style.contain) ||
+    ('backdropFilter' in style && style.backdropFilter !== 'none') ||
+    ('WebkitBackdropFilter' in style && style.WebkitBackdropFilter !== 'none')
+  );
+}