Merge branch 'main' into gridlist-section-docs

Author: yihuiliao

eslint.config.mjs

@@ -361,6 +361,10 @@ export default [{
     },
 
     languageOptions: {
+        globals: {
+          globalThis: "readonly",
+        },
+
         parser: tseslint.parser,
         ecmaVersion: 6,
         sourceType: "module",

package.json

@@ -9,7 +9,9 @@
   },
   "packageManager": "[email protected]",
   "scripts": {
-    "check-types": "tsc",
+    "tsgo": "tsgo",
+    "check-types": "tsgo --noEmit",
+    "check-types:tsc": "tsc",
     "clean": "make clean",
     "clean:all": "make clean_all",
     "install-16": "node scripts/react-16-install-prep.mjs && yarn add react@^16.8.0 react-dom@^16.8.0 @testing-library/react@^12 @testing-library/react-hooks@^8 @testing-library/dom@^8 react-test-renderer@^16.9.0 && node scripts/oldReactSupport.mjs",
@@ -134,6 +136,7 @@
     "@testing-library/user-event": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@typescript/native-preview": "^7.0.0-dev.20251223.1",
     "@yarnpkg/types": "^4.0.0",
     "autoprefixer": "^9.6.0",
     "axe-playwright": "^1.1.11",

packages/@react-aria/calendar/src/useCalendarCell.ts

@@ -338,7 +338,13 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
         // outside the original pressed element.
         // (JSDOM does not support this)
         if ('releasePointerCapture' in e.target) {
-          e.target.releasePointerCapture(e.pointerId);
+          if ('hasPointerCapture' in e.target) {
+            if (e.target.hasPointerCapture(e.pointerId)) {
+              e.target.releasePointerCapture(e.pointerId);
+            }
+          } else {
+            e.target.releasePointerCapture(e.pointerId);
+          }
         }
       },
       onContextMenu(e) {

packages/@react-aria/interactions/src/usePress.ts

@@ -596,7 +596,13 @@ export function usePress(props: PressHookProps): PressResult {
           // This enables onPointerLeave and onPointerEnter to fire.
           let target = getEventTarget(e.nativeEvent);
           if ('releasePointerCapture' in target) {
-            target.releasePointerCapture(e.pointerId);
+            if ('hasPointerCapture' in target) {
+              if (target.hasPointerCapture(e.pointerId)) {
+                target.releasePointerCapture(e.pointerId);
+              }
+            } else {
+              (target as Element).releasePointerCapture(e.pointerId);
+            }
           }
         }
 

packages/@react-aria/interactions/test/usePress.test.js

@@ -420,8 +420,10 @@ describe('usePress', function () {
 
       let el = res.getByText('test');
       el.releasePointerCapture = jest.fn();
+      el.hasPointerCapture = jest.fn().mockReturnValue(true);
       fireEvent(el, pointerEvent('pointerdown', {pointerId: 1, pointerType: 'mouse', clientX: 0, clientY: 0}));
-      expect(el.releasePointerCapture).toHaveBeenCalled();
+      expect(el.hasPointerCapture).toHaveBeenCalledWith(1);
+      expect(el.releasePointerCapture).toHaveBeenCalledWith(1);
       // react listens for pointerout and pointerover instead of pointerleave and pointerenter...
       fireEvent(el, pointerEvent('pointerout', {pointerId: 1, pointerType: 'mouse', clientX: 100, clientY: 100}));
       fireEvent(document, pointerEvent('pointerup', {pointerId: 1, pointerType: 'mouse', clientX: 100, clientY: 100}));
@@ -560,6 +562,16 @@ describe('usePress', function () {
       ]);
     });
 
+    it('should not call releasePointerCapture when hasPointerCapture returns false', function () {
+      let res = render(<Example />);
+      let el = res.getByText('test');
+      el.releasePointerCapture = jest.fn();
+      el.hasPointerCapture = jest.fn().mockReturnValue(false);
+      fireEvent(el, pointerEvent('pointerdown', {pointerId: 1, pointerType: 'mouse', clientX: 0, clientY: 0}));
+      expect(el.hasPointerCapture).toHaveBeenCalledWith(1);
+      expect(el.releasePointerCapture).not.toHaveBeenCalled();
+    });
+
     it('should handle pointer cancel events', function () {
       let events = [];
       let addEvent = (e) => events.push(e);
@@ -4011,8 +4023,10 @@ describe('usePress', function () {
 
       const el = shadowRoot.getElementById('testElement');
       el.releasePointerCapture = jest.fn();
+      el.hasPointerCapture = jest.fn().mockReturnValue(true);
       fireEvent(el, pointerEvent('pointerdown', {pointerId: 1, pointerType: 'mouse', clientX: 0, clientY: 0}));
-      expect(el.releasePointerCapture).toHaveBeenCalled();
+      expect(el.hasPointerCapture).toHaveBeenCalledWith(1);
+      expect(el.releasePointerCapture).toHaveBeenCalledWith(1);
       // react listens for pointerout and pointerover instead of pointerleave and pointerenter...
       fireEvent(el, pointerEvent('pointerout', {pointerId: 1, pointerType: 'mouse', clientX: 100, clientY: 100}));
       fireEvent(document, pointerEvent('pointerup', {pointerId: 1, pointerType: 'mouse', clientX: 100, clientY: 100}));

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

@@ -147,7 +147,12 @@ export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOpt
 
       // If the parent element of the added nodes is not within one of the targets,
       // and not already inside a hidden node, hide all of the new children.
-      if (![...visibleNodes, ...hiddenNodes].some(node => node.contains(change.target))) {
+      if (
+        change.target.isConnected &&
+        ![...visibleNodes, ...hiddenNodes].some((node) =>
+          node.contains(change.target)
+        )
+      ) {
         for (let node of change.addedNodes) {
           if (
             (node instanceof HTMLElement || node instanceof SVGElement) &&

packages/@react-aria/overlays/test/ariaHideOutside.test.js

@@ -12,7 +12,7 @@
 
 import {act, render, waitFor} from '@react-spectrum/test-utils-internal';
 import {ariaHideOutside} from '../src';
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 
 describe('ariaHideOutside', function () {
   it('should hide everything except the provided element [button]', function () {
@@ -275,6 +275,76 @@ describe('ariaHideOutside', function () {
     expect(() => getByTestId('test')).not.toThrow();
   });
 
+  it('should handle when a new element is added and then reparented', async function () {
+
+    let Test = () => {
+      const ref = useRef(null);
+      const mutate = () => {
+        let parent = document.createElement('ul');
+        let child = document.createElement('li');
+        ref.current.append(parent);
+        parent.appendChild(child);
+        parent.remove(); // this results in a mutation record for a disconnected ul with a connected li (through the new ul parent) in `addedNodes`
+        let newParent = document.createElement('ul');
+        newParent.appendChild(child);
+        ref.current.append(newParent);
+      };
+
+      return (
+        <>
+          <div data-testid="test" ref={ref}>
+            <button onClick={mutate}>Mutate</button>
+          </div>
+        </>
+      );
+    };
+
+    let {queryByRole, getAllByRole, getByTestId} = render(<Test />);
+
+    ariaHideOutside([getByTestId('test')]);
+
+    queryByRole('button').click();
+    await Promise.resolve(); // Wait for mutation observer tick
+
+    expect(getAllByRole('listitem')).toHaveLength(1);
+  });
+
+  it('should handle when a new element is added and then reparented to a hidden container', async function () {
+
+    let Test = () => {
+      const ref = useRef(null);
+      const mutate = () => {
+        let parent = document.createElement('ul');
+        let child = document.createElement('li');
+        ref.current.append(parent);
+        parent.appendChild(child);
+        parent.remove(); // this results in a mutation record for a disconnected ul with a connected li (through the new ul parent) in `addedNodes`
+        let newParent = document.createElement('ul');
+        newParent.appendChild(child);
+        ref.current.append(newParent);
+      };
+
+      return (
+        <>
+          <div data-testid="test">
+            <button onClick={mutate}>Mutate</button>
+          </div>
+          <div data-testid="sibling" ref={ref} />
+        </>
+      );
+    };
+
+    let {queryByRole, queryAllByRole, getByTestId} = render(<Test />);
+
+    ariaHideOutside([getByTestId('test')]);
+
+    queryByRole('button').click();
+    await Promise.resolve(); // Wait for mutation observer tick
+
+    expect(queryAllByRole('listitem')).toHaveLength(0);
+  });
+
+
   it('work when called multiple times', function () {
     let {getByRole, getAllByRole} = render(
       <>

packages/@react-aria/selection/src/useSelectableCollection.ts

@@ -118,7 +118,6 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     disallowTypeAhead = false,
     shouldUseVirtualFocus,
     allowsTabNavigation = false,
-    isVirtualized,
     // If no scrollRef is provided, assume the collection ref is the scrollable region
     scrollRef = ref,
     linkBehavior = 'action'
@@ -328,7 +327,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
   // Store the scroll position so we can restore it later.
   /// TODO: should this happen all the time??
   let scrollPos = useRef({top: 0, left: 0});
-  useEvent(scrollRef, 'scroll', isVirtualized ? undefined : () => {
+  useEvent(scrollRef, 'scroll', () => {
     scrollPos.current = {
       top: scrollRef.current?.scrollTop ?? 0,
       left: scrollRef.current?.scrollLeft ?? 0
@@ -369,7 +368,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       } else {
         navigateToKey(manager.firstSelectedKey ?? delegate.getFirstKey?.());
       }
-    } else if (!isVirtualized && scrollRef.current) {
+    } else if (scrollRef.current) {
       // Restore the scroll position to what it was before.
       scrollRef.current.scrollTop = scrollPos.current.top;
       scrollRef.current.scrollLeft = scrollPos.current.left;
@@ -581,7 +580,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
   // This will be marshalled to either the first or last item depending on where focus came from.
   let tabIndex: number | undefined = undefined;
   if (!shouldUseVirtualFocus) {
-    tabIndex = manager.focusedKey == null ? 0 : -1;
+    tabIndex = manager.isFocused ? -1 : 0;
   }
 
   let collectionId = useCollectionId(manager.collection);

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

@@ -3,8 +3,8 @@ export const getOwnerDocument = (el: Element | null | undefined): Document => {
 };
 
 export const getOwnerWindow = (
-  el: (Window & typeof global) | Element | null | undefined
-): Window & typeof global => {
+  el: (Window & typeof globalThis) | Element | null | undefined
+): Window & typeof globalThis => {
   if (el && 'window' in el && el.window === el) {
     return el;
   }

packages/@react-aria/utils/src/useViewportSize.ts

@@ -26,20 +26,23 @@ export function useViewportSize(): ViewportSize {
   let [size, setSize] = useState(() => isSSR ? {width: 0, height: 0} : getViewportSize());
 
   useEffect(() => {
+    let updateSize = (newSize: ViewportSize) => {
+      setSize(size => {
+        if (newSize.width === size.width && newSize.height === size.height) {
+          return size;
+        }
+        return newSize;
+      });
+    };
+
     // Use visualViewport api to track available height even on iOS virtual keyboard opening
     let onResize = () => {
       // Ignore updates when zoomed.
       if (visualViewport && visualViewport.scale > 1) {
         return;
       }
 
-      setSize(size => {
-        let newSize = getViewportSize();
-        if (newSize.width === size.width && newSize.height === size.height) {
-          return size;
-        }
-        return newSize;
-      });
+      updateSize(getViewportSize());
     };
 
     // When closing the keyboard, iOS does not fire the visual viewport resize event until the animation is complete.
@@ -54,18 +57,14 @@ export function useViewportSize(): ViewportSize {
         // Wait one frame to see if a new element gets focused.
         frame = requestAnimationFrame(() => {
           if (!document.activeElement || !willOpenKeyboard(document.activeElement)) {
-            setSize(size => {
-              let newSize = {width: window.innerWidth, height: window.innerHeight};
-              if (newSize.width === size.width && newSize.height === size.height) {
-                return size;
-              }
-              return newSize;
-            });
+            updateSize({width: window.innerWidth, height: window.innerHeight});
           }
         });
       }
     };
 
+    updateSize(getViewportSize());
+
     window.addEventListener('blur', onBlur, true);
 
     if (!visualViewport) {