Skip to content

[pull] main from adobe:main #311

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pull merged 6 commits into from
Mar 3, 2026
Merged

[pull] main from adobe:main #311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ea26071
docs(ActionBar): add TreeView example to ActionBar docs (#9718)
reidbarber Mar 3, 2026
cf84735
fix: prevent calling focus on elements within template elements (#9712)
LFDanLu Mar 3, 2026
98d99cb
fix(TableView): updated disabled behavior to match ListView/TreeView …
reidbarber Mar 3, 2026
2fd0040
chore: update example apps with ListView and Unavailable MenuItem exa…
reidbarber Mar 3, 2026
7b9da59
fix: Tree keyboard drag and drop should skip content nodes (#9724)
devongovett Mar 3, 2026
cdbfe48
chore: fixing defaultSelectedKey type consistency and removing unneed…
LFDanLu Mar 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 30 additions & 2 deletions examples/s2-next-macros/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,13 @@ import {
ButtonGroup,
Cell,
Column,
Content,
ContextualHelpPopover,
Divider,
Heading,
LinkButton,
ListView,
ListViewItem,
Menu,
MenuItem,
MenuTrigger,
Expand All @@ -43,7 +47,8 @@ import {
ToggleButtonGroup,
TreeView,
TreeViewItem,
TreeViewItemContent
TreeViewItemContent,
UnavailableMenuItemTrigger
} from "@react-spectrum/s2";
import Edit from "@react-spectrum/s2/icons/Edit";
import FileTxt from "@react-spectrum/s2/icons/FileText";
Expand Down Expand Up @@ -170,7 +175,13 @@ function App() {
<MenuItem id="sms">SMS</MenuItem>
</Menu>
</SubmenuTrigger>
<MenuItem id="delete">Delete</MenuItem>
<UnavailableMenuItemTrigger isUnavailable>
<MenuItem id="delete">Delete</MenuItem>
<ContextualHelpPopover>
<Heading slot="title">Permission required</Heading>
<Content>Contact your administrator for permissions to delete.</Content>
</ContextualHelpPopover>
</UnavailableMenuItemTrigger>
</Menu>
</MenuTrigger>
<MenuTrigger>
Expand All @@ -184,6 +195,23 @@ function App() {
<MenuItem>Paste</MenuItem>
</Menu>
</MenuTrigger>
<ListView
aria-label="Files"
selectionMode="multiple"
styles={style({width: 320, height: 320})}>
<ListViewItem id="adobe-photoshop" textValue="Adobe Photoshop">
<Text>Adobe Photoshop</Text>
<Text slot="description">Image editing software</Text>
</ListViewItem>
<ListViewItem id="adobe-xd" textValue="Adobe XD">
<Text>Adobe XD</Text>
<Text slot="description">UI/UX design tool</Text>
</ListViewItem>
<ListViewItem id="adobe-indesign" textValue="Adobe InDesign">
<Text>Adobe InDesign</Text>
<Text slot="description">Desktop publishing</Text>
</ListViewItem>
</ListView>
<TableView
aria-label="Files"
styles={style({width: 320, height: 320})}
Expand Down
32 changes: 30 additions & 2 deletions examples/s2-parcel-example/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,13 @@ import {
ButtonGroup,
Cell,
Column,
Content,
ContextualHelpPopover,
Divider,
Heading,
LinkButton,
ListView,
ListViewItem,
Menu,
MenuItem,
MenuTrigger,
Expand All @@ -41,7 +45,8 @@ import {
ToggleButtonGroup,
TreeView,
TreeViewItem,
TreeViewItemContent
TreeViewItemContent,
UnavailableMenuItemTrigger
} from "@react-spectrum/s2";
import Edit from "@react-spectrum/s2/icons/Edit";
import FileTxt from "@react-spectrum/s2/icons/FileText";
Expand Down Expand Up @@ -168,7 +173,13 @@ function App() {
<MenuItem id="sms">SMS</MenuItem>
</Menu>
</SubmenuTrigger>
<MenuItem id="delete">Delete</MenuItem>
<UnavailableMenuItemTrigger isUnavailable>
<MenuItem id="delete">Delete</MenuItem>
<ContextualHelpPopover>
<Heading slot="title">Permission required</Heading>
<Content>Contact your administrator for permissions to delete.</Content>
</ContextualHelpPopover>
</UnavailableMenuItemTrigger>
</Menu>
</MenuTrigger>
<MenuTrigger>
Expand All @@ -182,6 +193,23 @@ function App() {
<MenuItem>Paste</MenuItem>
</Menu>
</MenuTrigger>
<ListView
aria-label="Files"
selectionMode="multiple"
styles={style({width: 320, height: 320})}>
<ListViewItem id="adobe-photoshop" textValue="Adobe Photoshop">
<Text>Adobe Photoshop</Text>
<Text slot="description">Image editing software</Text>
</ListViewItem>
<ListViewItem id="adobe-xd" textValue="Adobe XD">
<Text>Adobe XD</Text>
<Text slot="description">UI/UX design tool</Text>
</ListViewItem>
<ListViewItem id="adobe-indesign" textValue="Adobe InDesign">
<Text>Adobe InDesign</Text>
<Text slot="description">Desktop publishing</Text>
</ListViewItem>
</ListView>
<TableView
aria-label="Files"
styles={style({width: 320, height: 320})}
Expand Down
32 changes: 30 additions & 2 deletions examples/s2-webpack-5-example/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,13 @@ import {
ButtonGroup,
Cell,
Column,
Content,
ContextualHelpPopover,
Divider,
Heading,
LinkButton,
ListView,
ListViewItem,
Menu,
MenuItem,
MenuTrigger,
Expand All @@ -41,7 +45,8 @@ import {
ToggleButtonGroup,
TreeView,
TreeViewItem,
TreeViewItemContent
TreeViewItemContent,
UnavailableMenuItemTrigger
} from "@react-spectrum/s2";
import Edit from "@react-spectrum/s2/icons/Edit";
import FileTxt from "@react-spectrum/s2/icons/FileText";
Expand Down Expand Up @@ -168,7 +173,13 @@ function App() {
<MenuItem id="sms">SMS</MenuItem>
</Menu>
</SubmenuTrigger>
<MenuItem id="delete">Delete</MenuItem>
<UnavailableMenuItemTrigger isUnavailable>
<MenuItem id="delete">Delete</MenuItem>
<ContextualHelpPopover>
<Heading slot="title">Permission required</Heading>
<Content>Contact your administrator for permissions to delete.</Content>
</ContextualHelpPopover>
</UnavailableMenuItemTrigger>
</Menu>
</MenuTrigger>
<MenuTrigger>
Expand All @@ -182,6 +193,23 @@ function App() {
<MenuItem>Paste</MenuItem>
</Menu>
</MenuTrigger>
<ListView
aria-label="Files"
selectionMode="multiple"
styles={style({width: 320, height: 320})}>
<ListViewItem id="adobe-photoshop" textValue="Adobe Photoshop">
<Text>Adobe Photoshop</Text>
<Text slot="description">Image editing software</Text>
</ListViewItem>
<ListViewItem id="adobe-xd" textValue="Adobe XD">
<Text>Adobe XD</Text>
<Text slot="description">UI/UX design tool</Text>
</ListViewItem>
<ListViewItem id="adobe-indesign" textValue="Adobe InDesign">
<Text>Adobe InDesign</Text>
<Text slot="description">Desktop publishing</Text>
</ListViewItem>
</ListView>
<TableView
aria-label="Files"
styles={style({width: 320, height: 320})}
Expand Down
1 change: 0 additions & 1 deletion packages/@internationalized/date/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,6 @@ export {
getLocalTimeZone,
setLocalTimeZone,
resetLocalTimeZone,
isLocalTimeZoneOverridden,
startOfMonth,
startOfWeek,
startOfYear,
Expand Down
3 changes: 2 additions & 1 deletion packages/@internationalized/date/tests/queries.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import {
isEqualMonth,
isEqualYear,
IslamicUmalquraCalendar,
isLocalTimeZoneOverridden,
isSameDay,
isSameMonth,
isSameYear,
Expand All @@ -40,6 +39,8 @@ import {
startOfYear,
ZonedDateTime
} from '..';
import {isLocalTimeZoneOverridden} from '../src/queries';


describe('queries', function () {
describe('isSameDay', function () {
Expand Down
22 changes: 14 additions & 8 deletions packages/@react-aria/dnd/src/DropTargetKeyboardNavigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,7 @@ function nextDropTarget(
} else {
nextKey = keyboardDelegate.getKeyBelow?.(target.key);
}
let nextCollectionKey = collection.getKeyAfter(target.key);
let nextCollectionNode = nextCollectionKey && collection.getItem(nextCollectionKey);
while (nextCollectionNode && nextCollectionNode.type === 'content') {
nextCollectionKey = nextCollectionKey ? collection.getKeyAfter(nextCollectionKey) : null;
nextCollectionNode = nextCollectionKey && collection.getItem(nextCollectionKey);
}
let nextCollectionKey = getNextItem(collection, target.key, key => collection.getKeyAfter(key));

// If the keyboard delegate did not move to the next key in the collection,
// jump to that key with the same drop position. Otherwise, try the other
Expand Down Expand Up @@ -191,7 +186,7 @@ function previousDropTarget(
} else {
prevKey = keyboardDelegate.getKeyAbove?.(target.key);
}
let prevCollectionKey = collection.getKeyBefore(target.key);
let prevCollectionKey = getNextItem(collection, target.key, key => collection.getKeyBefore(key));

// If the keyboard delegate did not move to the next key in the collection,
// jump to that key with the same drop position. Otherwise, try the other
Expand Down Expand Up @@ -263,7 +258,7 @@ function getLastChild(collection: Collection<Node<unknown>>, key: Key): DropTarg
// getChildNodes still returns child tree items even when the item is collapsed.
// Checking if the next item has a greater level is a silly way to determine if the item is expanded.
let targetNode = collection.getItem(key);
let nextKey = collection.getKeyAfter(key);
let nextKey = getNextItem(collection, key, key => collection.getKeyAfter(key));
let nextNode = nextKey != null ? collection.getItem(nextKey) : null;
if (targetNode && nextNode && nextNode.level > targetNode.level) {
let children = getChildNodes(targetNode, collection);
Expand All @@ -285,3 +280,14 @@ function getLastChild(collection: Collection<Node<unknown>>, key: Key): DropTarg

return null;
}

// Find the next or previous item in a collection, skipping over other types of nodes (e.g. content).
function getNextItem(collection: Collection<Node<unknown>>, key: Key, getNextKey: (key: Key) => Key | null): Key | null {
let nextCollectionKey = getNextKey(key);
let nextCollectionNode = nextCollectionKey != null ? collection.getItem(nextCollectionKey) : null;
while (nextCollectionNode && nextCollectionNode.type !== 'item') {
nextCollectionKey = getNextKey(nextCollectionNode.key);
nextCollectionNode = nextCollectionKey != null ? collection.getItem(nextCollectionKey) : null;
}
return nextCollectionKey;
}
42 changes: 40 additions & 2 deletions packages/@react-aria/dnd/test/DropTargetKeyboardNavigation.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ class TestCollection implements Collection<Node<Item>> {
constructor(items: Item[]) {
this.map = new Map<Key, Node<Item>>();
let visitItem = (item: Item, index: number, level = 0, parentKey: string | null = null): Node<Item> => {
let childNodes = item.childItems ? visitItems(item.childItems, level + 1, item.id) : [];
let childNodes = visitItems(item.childItems ?? [], level + 1, item.id);
return {
type: 'item',
key: item.id,
Expand All @@ -67,6 +67,24 @@ class TestCollection implements Collection<Node<Item>> {
let last: Node<Item> | null = null;
let index = 0;
let nodes: Node<Item>[] = [];
if (parentKey != null) {
let contentNode = {
type: 'content',
key: parentKey + '-content',
value: null,
level: level,
hasChildNodes: false,
childNodes: [],
rendered: null,
textValue: '',
index: index++,
parentKey
};
this.map.set(contentNode.key, contentNode);
nodes.push(contentNode);
last = contentNode;
}

for (let item of items) {
let node = visitItem(item, index, level, parentKey);
this.map.set(item.id, node);
Expand Down Expand Up @@ -236,25 +254,45 @@ describe('drop target keyboard navigation', () => {

let expectedKeys = [
'projects',
'projects-content',
'project-1',
'project-1-content',
'project-2',
'project-2-content',
'project-2A',
'project-2A-content',
'project-2B',
'project-2B-content',
'project-2C',
'project-2C-content',
'project-3',
'project-3-content',
'project-4',
'project-4-content',
'project-5',
'project-5-content',
'project-5A',
'project-5A-content',
'project-5B',
'project-5B-content',
'project-5C',
'project-5C-content',
'reports',
'reports-content',
'reports-1',
'reports-1-content',
'reports-1A',
'reports-1A-content',
'reports-1AB',
'reports-1AB-content',
'reports-1ABC',
'reports-1ABC-content',
'reports-1B',
'reports-1B-content',
'reports-1C',
'reports-2'
'reports-1C-content',
'reports-2',
'reports-2-content'
];

expect(nextKeys).toEqual(expectedKeys);
Expand Down
4 changes: 4 additions & 0 deletions packages/@react-aria/interactions/src/focusSafely.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ import {getInteractionModality} from './useFocusVisible';
* as page scrolling and screen reader issues with CSS transitions.
*/
export function focusSafely(element: FocusableElement): void {
if (!element.isConnected) {
return;
}

// If the user is interacting with a virtual cursor, e.g. screen reader, then
// wait until after any animated transitions that are currently occurring on
// the page before shifting focus. This avoids issues with VoiceOver on iOS
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/s2/src/ComboBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,7 +369,7 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
);
});

export interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'render' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {
export interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className' | 'render' | 'onClick' | 'onKeyDown' | 'onKeyUp' | keyof GlobalDOMAttributes>, StyleProps {
children: ReactNode
}

Expand Down
Loading
Loading