[pull] main from adobe:main

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

@@ -200,6 +200,12 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
     };
   }
 
+  useEffect(() => {
+    if (isDisabled && manager.focusedKey === key) {
+      manager.setFocusedKey(null);
+    }
+  }, [manager, isDisabled, key]);
+
   // With checkbox selection, onAction (i.e. navigation) becomes primary, and occurs on a single click of the row.
   // Clicking the checkbox enters selection mode, after which clicking anywhere on any row toggles selection for that row.
   // With highlight selection, onAction is secondary, and occurs on double click. Single click selects the row.

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

@@ -57,7 +57,7 @@ export function useViewportSize(): ViewportSize {
         // Wait one frame to see if a new element gets focused.
         frame = requestAnimationFrame(() => {
           if (!document.activeElement || !willOpenKeyboard(document.activeElement)) {
-            updateSize({width: window.innerWidth, height: window.innerHeight});
+            updateSize({width: document.documentElement.clientWidth, height: document.documentElement.clientHeight});
           }
         });
       }
@@ -90,7 +90,7 @@ export function useViewportSize(): ViewportSize {
 function getViewportSize(): ViewportSize {
   return {
     // Multiply by the visualViewport scale to get the "natural" size, unaffected by pinch zooming.
-    width: visualViewport ? visualViewport.width * visualViewport.scale : window.innerWidth,
-    height: visualViewport ? visualViewport.height * visualViewport.scale : window.innerHeight
+    width: visualViewport ? visualViewport.width * visualViewport.scale : document.documentElement.clientWidth,
+    height: visualViewport ? visualViewport.height * visualViewport.scale : document.documentElement.clientHeight
   };
 }

packages/@react-spectrum/s2/test/TableView.test.tsx

@@ -24,17 +24,21 @@ import {
   TableView,
   Text
 } from '../src';
+import {DisabledBehavior} from '@react-types/shared';
 import Filter from '../s2wf-icons/S2_Icon_Filter_20_N.svg';
-import React from 'react';
-import {User} from '@react-aria/test-utils';
+import {pointerMap, User} from '@react-aria/test-utils';
+import React, {useState} from 'react';
+import userEvent from '@testing-library/user-event';
 
 // @ts-ignore
 window.getComputedStyle = (el) => el.style;
 
 describe('TableView', () => {
   let offsetWidth, offsetHeight;
+  let user;
   let testUtilUser = new User({advanceTimer: jest.advanceTimersByTime});
   beforeAll(function () {
+    user = userEvent.setup({delay: null, pointerMap});
     offsetWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 400);
     offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 200);
     jest.useFakeTimers();
@@ -108,4 +112,40 @@ describe('TableView', () => {
     await tableTester.triggerColumnHeaderAction({column: 1, action: 0, interactionType: 'keyboard'});
     expect(onAction).toHaveBeenCalledTimes(1);
   });
+
+  it('if the previously focused cell\'s row is disabled, the focus should still be restored to the cell when the disabled behavior is changed and the user navigates to the collection', async () => {
+    function Example() {
+      let [disabledBehavior, setDisabledBehavior] = useState<DisabledBehavior>('selection');
+      return (
+        <>
+          <button>Before</button>
+          <TableView aria-label="Dynamic table" disabledBehavior={disabledBehavior} disabledKeys={['2']}>
+            <TableHeader columns={columns}>
+              {(column) => <Column {...column}>{column.name}</Column>}
+            </TableHeader>
+            <TableBody>
+              <Row id="1"><Cell>Foo 1</Cell><Cell>Bar 1</Cell><Cell>Baz 1</Cell><Cell>Yah 1</Cell></Row>
+              <Row id="2"><Cell>Foo 2</Cell><Cell>Bar 2</Cell><Cell>Baz 2</Cell><Cell>Yah 2</Cell></Row>
+              <Row id="3"><Cell>Foo 3</Cell><Cell>Bar 3</Cell><Cell>Baz 3</Cell><Cell>Yah 3</Cell></Row>
+            </TableBody>
+          </TableView>
+          <button onClick={() => setDisabledBehavior('all')}>After</button>
+        </>
+      );
+    }
+
+    let {getAllByRole, getByRole} = render(<Example />);
+    await user.click(document.body);
+
+    let cells = getAllByRole('gridcell');
+    let afterButton = getByRole('button', {name: 'After'});
+    await user.click(cells[3]); // Bar 2
+    expect(document.activeElement).toBe(cells[3]);
+
+    await user.click(afterButton);
+    await user.tab({shift: true});
+    await user.tab({shift: true});
+    await user.tab();
+    expect(document.activeElement).toBe(cells[3]);
+  });
 });

packages/@react-spectrum/s2/test/TreeView.test.tsx

@@ -9,9 +9,10 @@ import {
   TreeViewItemContent
 } from '../src';
 import {AriaTreeTests} from '../../../react-aria-components/test/AriaTree.test-util';
+import {DisabledBehavior} from '@react-types/shared';
 import FileTxt from '../s2wf-icons/S2_Icon_FileText_20_N.svg';
 import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
-import React from 'react';
+import React, {useState} from 'react';
 import userEvent from '@testing-library/user-event';
 
 AriaTreeTests({
@@ -493,4 +494,74 @@ describe('TreeView', () => {
     let menu = queryByRole('menu');
     expect(menu).not.toBeInTheDocument();
   });
+
+  it('if the previously focused item is disabled, the focus should move to the first item when coming back to the collection', async () => {
+    function Example() {
+      let [disabledBehavior, setDisabledBehavior] = useState<DisabledBehavior>('selection');
+      return (
+        <>
+          <button>Before</button>
+          <TreeView aria-label="Test tree" disabledBehavior={disabledBehavior} disabledKeys={['school']}>
+            <TreeViewItem id="projects" textValue="Projects">
+              <TreeViewItemContent>
+                <Text>Projects</Text>o
+                <Folder />
+                <ActionMenu>
+                  <MenuItem id="edit">
+                    <Text>Edit</Text>
+                  </MenuItem>
+                  <MenuItem id="delete">
+                    <Text>Delete</Text>
+                  </MenuItem>
+                </ActionMenu>
+              </TreeViewItemContent>
+            </TreeViewItem>
+            <TreeViewItem id="school" textValue="School">
+              <TreeViewItemContent>
+                <Text>School</Text>o
+                <Folder />
+                <ActionMenu>
+                  <MenuItem id="edit">
+                    <Text>Edit</Text>
+                  </MenuItem>
+                  <MenuItem id="delete">
+                    <Text>Delete</Text>
+                  </MenuItem>
+                </ActionMenu>
+              </TreeViewItemContent>
+              <TreeViewItem id="homework-1" textValue="Homework-1" isDisabled>
+                <TreeViewItemContent>
+                  <Text>Homework-1</Text>
+                  <Folder />
+                  <ActionMenu>
+                    <MenuItem id="edit">
+                      <Text>Edit</Text>
+                    </MenuItem>
+                    <MenuItem id="delete">
+                      <Text>Delete</Text>
+                    </MenuItem>
+                  </ActionMenu>
+                </TreeViewItemContent>
+              </TreeViewItem>
+            </TreeViewItem>
+          </TreeView>
+          <button onClick={() => setDisabledBehavior('all')}>After</button>
+        </>
+      );
+    }
+
+    let {getAllByRole, getByRole} = render(<Example />);
+    await user.click(document.body);
+
+    let rows = getAllByRole('row');
+    let afterButton = getByRole('button', {name: 'After'});
+    await user.click(rows[1]);
+    expect(document.activeElement).toBe(rows[1]);
+
+    await user.click(afterButton);
+    await user.tab({shift: true});
+    await user.tab({shift: true});
+    await user.tab();
+    expect(document.activeElement).toBe(rows[0]);
+  });
 });

packages/dev/mcp/shared/src/page-manager.ts

@@ -1,5 +1,5 @@
-import {DEFAULT_CDN_BASE, fetchText} from './utils.js';
 import {extractNameAndDescription, parseSectionsFromMarkdown} from './parser.js';
+import {fetchText, getLibraryBaseUrl} from './utils.js';
 import type {Library, PageInfo} from './types.js';
 import path from 'path';
 
@@ -9,10 +9,6 @@ const pageCache = new Map<string, PageInfo>();
 // Whether we've loaded the page index for a library yet.
 const pageIndexLoaded = new Set<Library>();
 
-function libBaseUrl(library: Library) {
-  return `${DEFAULT_CDN_BASE}/${library}`;
-}
-
 // Build an index of pages for the given library from the CDN's llms.txt.
 export async function buildPageIndex(library: Library): Promise<PageInfo[]> {
   if (pageIndexLoaded.has(library)) {
@@ -22,7 +18,8 @@ export async function buildPageIndex(library: Library): Promise<PageInfo[]> {
   const pages: PageInfo[] = [];
 
   // Read llms.txt to enumerate available pages without downloading them all.
-  const llmsUrl = `${libBaseUrl(library)}/llms.txt`;
+  const baseUrl = getLibraryBaseUrl(library);
+  const llmsUrl = `${baseUrl}/llms.txt`;
   const txt = await fetchText(llmsUrl);
   const re = /^\s*-\s*\[([^\]]+)\]\(([^)]+)\)(?:\s*:\s*(.*))?\s*$/;
   for (const line of txt.split(/\r?\n/)) {
@@ -34,7 +31,7 @@ export async function buildPageIndex(library: Library): Promise<PageInfo[]> {
     if (!href || !/\.md$/i.test(href)) {continue;}
     const key = href.replace(/\.md$/i, '').replace(/\\/g, '/');
     const name = display || path.basename(key);
-    const filePath = `${DEFAULT_CDN_BASE}/${key}.md`;
+    const filePath = `${baseUrl}/${key}.md`;
     const info: PageInfo = {key, name, description, filePath, sections: []};
     pages.push(info);
     pageCache.set(info.key, info);
@@ -65,6 +62,8 @@ export async function resolvePageRef(library: Library, pageName: string): Promis
     return pageCache.get(pageName)!;
   }
 
+  const baseUrl = getLibraryBaseUrl(library);
+
   if (pageName.includes('/')) {
     const normalized = pageName.replace(/\\/g, '/');
     const prefix = normalized.split('/', 1)[0];
@@ -73,7 +72,7 @@ export async function resolvePageRef(library: Library, pageName: string): Promis
     }
     const maybe = pageCache.get(normalized);
     if (maybe) {return maybe;}
-    const filePath = `${DEFAULT_CDN_BASE}/${normalized}.md`;
+    const filePath = `${baseUrl}/${normalized}.md`;
     const stub: PageInfo = {key: normalized, name: path.basename(normalized), description: undefined, filePath, sections: []};
     pageCache.set(stub.key, stub);
     return stub;
@@ -82,7 +81,7 @@ export async function resolvePageRef(library: Library, pageName: string): Promis
   const key = `${library}/${pageName}`;
   const maybe = pageCache.get(key);
   if (maybe) {return maybe;}
-  const filePath = `${DEFAULT_CDN_BASE}/${key}.md`;
+  const filePath = `${baseUrl}/${key}.md`;
   const stub: PageInfo = {key, name: pageName, description: undefined, filePath, sections: []};
   pageCache.set(stub.key, stub);
   return stub;

packages/dev/mcp/shared/src/utils.ts

@@ -12,8 +12,16 @@ export function errorToString(err: unknown): string {
   }
 }
 
-// CDN base for docs. Can be overridden via env variable.
-export const DEFAULT_CDN_BASE = process.env.DOCS_CDN_BASE ?? 'https://react-spectrum.adobe.com/beta';
+// Default base URLs for each library
+const DEFAULT_S2_BASE = 'https://react-spectrum.adobe.com';
+const DEFAULT_REACT_ARIA_BASE = 'https://react-aria.adobe.com';
+
+export function getLibraryBaseUrl(library: 's2' | 'react-aria'): string {
+  if (process.env.DOCS_CDN_BASE) {
+    return process.env.DOCS_CDN_BASE;
+  }
+  return library === 's2' ? DEFAULT_S2_BASE : DEFAULT_REACT_ARIA_BASE;
+}
 
 export async function fetchText(url: string, timeoutMs = 15000): Promise<string> {
   const ctrl = new AbortController();

scripts/setupTests.js

@@ -104,8 +104,24 @@ beforeEach(() => {
     disconnect: () => null
   });
   window.IntersectionObserver = mockIntersectionObserver;
+
+  // Set document.documentElement dimensions to match jsdom's default window.innerWidth/innerHeight
+  // This is needed because clientWidth/clientHeight default to 0 in jsdom unless explicitly set
+  Object.defineProperty(document.documentElement, 'clientWidth', {
+    writable: true,
+    configurable: true,
+    value: 1024
+  });
+  Object.defineProperty(document.documentElement, 'clientHeight', {
+    writable: true,
+    configurable: true,
+    value: 768
+  });
 });
 
 afterEach(() => {
   delete window.IntersectionObserver;
+  // Clean up the clientWidth/clientHeight properties
+  delete document.documentElement.clientWidth;
+  delete document.documentElement.clientHeight;
 });