diff --git a/packages/@react-aria/selection/src/useSelectableItem.ts b/packages/@react-aria/selection/src/useSelectableItem.ts index 1a307bf9790..207a72e07ba 100644 --- a/packages/@react-aria/selection/src/useSelectableItem.ts +++ b/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. diff --git a/packages/@react-aria/utils/src/useViewportSize.ts b/packages/@react-aria/utils/src/useViewportSize.ts index ed6f6f765e5..b98ae0fc4e9 100644 --- a/packages/@react-aria/utils/src/useViewportSize.ts +++ b/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 }; } diff --git a/packages/@react-spectrum/s2/test/TableView.test.tsx b/packages/@react-spectrum/s2/test/TableView.test.tsx index 5b49c9d40d4..d00e9980c0a 100644 --- a/packages/@react-spectrum/s2/test/TableView.test.tsx +++ b/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('selection'); + return ( + <> + + + + {(column) => {column.name}} + + + Foo 1Bar 1Baz 1Yah 1 + Foo 2Bar 2Baz 2Yah 2 + Foo 3Bar 3Baz 3Yah 3 + + + + + ); + } + + let {getAllByRole, getByRole} = render(); + 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]); + }); }); diff --git a/packages/@react-spectrum/s2/test/TreeView.test.tsx b/packages/@react-spectrum/s2/test/TreeView.test.tsx index d68d29d7744..de612397a26 100644 --- a/packages/@react-spectrum/s2/test/TreeView.test.tsx +++ b/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('selection'); + return ( + <> + + + + + Projectso + + + + Edit + + + Delete + + + + + + + Schoolo + + + + Edit + + + Delete + + + + + + Homework-1 + + + + Edit + + + Delete + + + + + + + + + ); + } + + let {getAllByRole, getByRole} = render(); + 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]); + }); }); diff --git a/packages/dev/mcp/shared/src/page-manager.ts b/packages/dev/mcp/shared/src/page-manager.ts index c89b09d2554..74fd1724e4b 100644 --- a/packages/dev/mcp/shared/src/page-manager.ts +++ b/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(); // Whether we've loaded the page index for a library yet. const pageIndexLoaded = new Set(); -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 { if (pageIndexLoaded.has(library)) { @@ -22,7 +18,8 @@ export async function buildPageIndex(library: Library): Promise { 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 { 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; diff --git a/packages/dev/mcp/shared/src/utils.ts b/packages/dev/mcp/shared/src/utils.ts index ba6a62f039a..a573f2c3d96 100644 --- a/packages/dev/mcp/shared/src/utils.ts +++ b/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 { const ctrl = new AbortController(); diff --git a/scripts/setupTests.js b/scripts/setupTests.js index 9565be18aec..fedbf8c0bd3 100644 --- a/scripts/setupTests.js +++ b/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; });