diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-20-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-20-0.mdx new file mode 100644 index 00000000000..6f9c12248c4 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-20-0.mdx @@ -0,0 +1,346 @@ +{/* 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 {InstallCommand} from '../../../src/InstallCommand'; + +import {Layout} from '../../../src/Layout'; +export default Layout; + +import docs from 'docs:@react-spectrum/s2'; + +export const hideNav = true; +export const section = 'Releases'; +export const tags = ['release', 'React Aria']; +export const date = 'July 31, 2026'; +export const title = 'v1.20.0'; +export const description = 'This release introduces two new components, along with several new features including support for context menus, a simplified API for keyboard shortcuts, and the ability to use interactive components within Table rows. It also adds new documentation for hooks.' +export const isSubpage = true; + +# v1.20.0 + +This release includes many new components and features! + +The new [PreviewTrigger](../PreviewTrigger) component shows a Popover on hover, focus, or long press. Unlike Tooltip, it may include interactive content, useful for hoverable link previews. Keyboard users can tab in and out of the popover, and it's accessible across devices. Includes open delay, safe area handling, and coordinated entry and exit animations. + +```tsx render hideCode +"use client"; +import {PreviewTrigger} from 'react-aria-components/PreviewTrigger'; +import {Popover} from 'vanilla-starter/Popover'; +import {Link} from 'vanilla-starter/Link'; +import {Button} from 'vanilla-starter/Button'; + +function ProfilePreview({handle, name, bio, avatar, href, ...popoverProps}) { + return ( + + @{handle} + +
+ +
+
{name}
+
@{handle}
+
+ +
+
{bio}
+
+
+ ); +} + +function Example(props) { + return ( +

+ Just shipped a new release with help from{' '} + + {' '}and{' '} + + ! +

+ ); +} +``` + +[TokenField](../TokenField) (alpha) allows users to enter text with inline tokens, supporting autocomplete and auto-tokenization. Use it to build AI prompt fields, tag inputs, structured search fields, mention inputs, and multi-select comboboxes. + +```tsx render hideCode +"use client"; +import {Autocomplete} from 'react-aria-components/Autocomplete'; +import {Text} from 'react-aria-components/Text'; +import {Token, TokenField} from 'vanilla-starter/TokenField'; +import {tokenFieldPositionToDOMRange} from 'react-aria/useTokenField'; +import {TokenFieldValue} from 'react-aria-components/TokenField'; +import {Menu, MenuItem} from 'vanilla-starter/Menu'; +import {Popover} from 'vanilla-starter/Popover'; +import {useMemo, useRef, useState} from 'react'; + +type Item = {username: string} | {command: string; description: string}; + +/*- begin collapse -*/ +const usernames = [ + {username: 'alexmiller'}, + {username: 'sarahjones'}, + {username: 'davidkim'}, + {username: 'emmawatson'}, + {username: 'oliverliu'}, + {username: 'ellagreen'}, + {username: 'lucasbrown'}, + {username: 'amandarivera'}, + {username: 'masonlee'}, + {username: 'nataliasmith'}, + {username: 'benjamintaylor'}, + {username: 'zoewilson'}, + {username: 'henrywalker'}, + {username: 'madelineyoung'}, + {username: 'noahscott'}, + {username: 'lucygonzalez'}, + {username: 'jacobmartin'}, + {username: 'averymoore'}, + {username: 'loganmurphy'}, + {username: 'miahernandez'}, + {username: 'danieladair'}, + {username: 'sofiacox'}, + {username: 'jackharris'}, + {username: 'chloebaker'}, + {username: 'liamrodriguez'} +]; +/*- end collapse -*/ + +/*- begin collapse -*/ +const slashCommands = [ + {command: 'gif', description: 'Insert a GIF'}, + {command: 'todo', description: 'Add a todo list item'}, + {command: 'mention', description: 'Mention a user with @username'}, + {command: 'date', description: 'Insert the current date'}, + {command: 'quote', description: 'Insert a quote block'} +]; +/*- end collapse -*/ + +function Example() { + let inputRef = useRef(null); + let [value, setValue] = useState( + new TokenFieldValue([ + {type: 'text', text: 'This example has autocomplete for '}, + {type: 'token', text: '@usernames'}, + {type: 'text', text: ' and '}, + {type: 'token', text: '/commands'} + ]) + ); + + let [filterAnchor, filterValue] = useMemo(() => { + let filterAnchor = value.findText(value.caretPosition, TokenFieldValue.Direction.Backward, /(?<=^|\s)[@/]/); + if (filterAnchor != null) { + let filterValue = value.slice(filterAnchor, value.caretPosition).toString(); + return [filterAnchor, filterValue]; + } + return [null, null]; + }, [value]); + + let items: Item[] = []; + if (filterValue != null && filterValue.startsWith('/')) { + items = slashCommands.filter(item => item.command.includes(filterValue.slice(1))); + } else if (filterValue != null && filterValue.startsWith('@')) { + items = usernames.filter(item => item.username.includes(filterValue.slice(1))); + } + + return ( + /*- begin highlight -*/ + + + {segment => {segment.text}} + + 0} + isNonModal + hideArrow + placement="bottom start" + trigger="MenuTrigger" + getTargetRect={target => { + return tokenFieldPositionToDOMRange(target, filterAnchor!).getBoundingClientRect(); + }}> + + {item => ( + { + setValue(value => + value.replaceRangeWithSegments( + filterAnchor!, + value.caretPosition, + [ + { + type: 'token', + text: 'username' in item ? '@' + item.username : item.command + }, + {type: 'text', text: ' '} + ], + false + ) + ); + }}> + {'username' in item ? item.username : item.command} + {'description' in item ? {item.description} : null} + + )} + + + + /*- end highlight -*/ + ); +} +``` + +[MenuTrigger](/Menu#context-menu) now supports `trigger="contextMenu"`, enabling accessible context menus via mouse, keyboard, and touch input. + +```tsx render hideCode +"use client"; +import {MenuTrigger, Menu, MenuItem, SubmenuTrigger, Separator} from 'vanilla-starter/Menu'; +import {Button} from 'react-aria-components/Button'; + + + + + Open + + Open with + + Preview + Photoshop + Safari + + + + Get Info + Rename + Duplicate + Move to Trash + + +``` + +```css render hidden +.context-menu-trigger { + width: 250px; + height: 150px; + display: flex; + align-items: center; + justify-content: center; + border: 2px dashed var(--gray-400); + border-radius: 10px; + background: transparent; + font: inherit; + color: inherit; + outline: none; + + &[data-focus-visible] { + outline: 2px solid var(--focus-ring-color); + outline-offset: -2px; + } +} +``` + +In addition, we have added a simpler API to implement keyboard shortcuts to [useKeyboard](../useKeyboard), and support for interactive components like textfields inside Table rows. + +Finally, the React Aria and React Stately hook documentation has been completely rewritten! The new docs use the same styles as our React Aria Components examples, and show how to use both components and hooks together. + +As always, thank you to all our contributors! + +## Changelog + +### General Changes +- Add new React Aria hooks documentation - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/10153), [PR](https://github.com/adobe/react-spectrum/pull/10355) +### Breadcrumbs +- Prevent passing an empty string to the `href` attribute when undefined - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/10286) +### Checkbox +- Fix Enter key presses on Checkbox inputs so they no longer block native implicit form submission - [@nami8824](https://github.com/nami8824) - [PR](https://github.com/adobe/react-spectrum/pull/9972) +### Collections +- Add guide explaining how to update collection structure to documentation - [@patrickwehbe](https://github.com/patrickwehbe) - [PR](https://github.com/adobe/react-spectrum/pull/10232) +- Support collections in React canary and Next.js 16's app router - [@nwidynski](https://github.com/nwidynski) - [PR](https://github.com/adobe/react-spectrum/pull/10323) +### ComboBox +- Document `defaultFilter`'s default `contains` filter behavior - [@patrickwehbe](https://github.com/patrickwehbe) - [PR](https://github.com/adobe/react-spectrum/pull/10222) +- Accept a readonly array for controlled multiple ComboBox `value` - [@lixiaoyan](https://github.com/lixiaoyan) - [PR](https://github.com/adobe/react-spectrum/pull/10290) +### Date and Time +- Export `DayOfWeek` type from `@internationalized/date` - [@patrickwehbe](https://github.com/patrickwehbe) - [PR](https://github.com/adobe/react-spectrum/pull/10234) +- Clamp milliseconds to a valid maximum of 999 - [@spokodev](https://github.com/spokodev) - [PR](https://github.com/adobe/react-spectrum/pull/10289) +- Resolve locales with an explicit script to language-script strings - [@stas-m2muchcoffee](https://github.com/stas-m2muchcoffee) - [PR](https://github.com/adobe/react-spectrum/pull/10268) +### DatePicker +- Avoid stealing focus into a date segment from a `selectionchange` event in Firefox - [@doolse](https://github.com/doolse) - [PR](https://github.com/adobe/react-spectrum/pull/10260) +### Dialog +- Add `aria-describedby` support for the `alertdialog` role - [@costajohnt](https://github.com/costajohnt) - [PR](https://github.com/adobe/react-spectrum/pull/9924) +- Pass the overlay id to `PopoverContext` in Dialog - [@albertdugba](https://github.com/albertdugba) - [PR](https://github.com/adobe/react-spectrum/pull/9807) +### Drag and drop +- Prefer the ancestor drop target over the nearest-by-distance target in DragManager - [@mvanhorn](https://github.com/mvanhorn) - [PR](https://github.com/adobe/react-spectrum/pull/10170) +- Prevent Android Chrome taps from being detected as a drag event - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/10332) +### DropZone +- Prevent focus from moving to DropZone when clicking its hidden file input - [@pradeep-ramola](https://github.com/pradeep-ramola) - [PR](https://github.com/adobe/react-spectrum/pull/10173), [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/10336) +### Link +- Add `onPressChange` prop to `useLink` - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/10306) +### Menu +- Add `useContextMenu` and `trigger="contextMenu"` to MenuTrigger - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/10237) +### Meter +- Guard the percentage calculation against `NaN` when `min` equals `max` - [@mvanhorn](https://github.com/mvanhorn) - [PR](https://github.com/adobe/react-spectrum/pull/10169) +### Overlays +- Restore focus in `FocusScope` containment without scrolling- [@mvanhorn](https://github.com/mvanhorn) - [PR](https://github.com/adobe/react-spectrum/pull/10339) +- Add an `addGlobalScrollListener` utility and close overlays on scroll events inside a shadow DOM - [@pzaczkiewicz-athenahealth](https://github.com/pzaczkiewicz-athenahealth) - [PR](https://github.com/adobe/react-spectrum/pull/10188) +### PreviewTrigger +- Add PreviewTrigger component - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/10243) +### ProgressBar +- Guard the percentage calculation against `NaN` when `min` equals `max` - [@mvanhorn](https://github.com/mvanhorn) - [PR](https://github.com/adobe/react-spectrum/pull/10169) +### RadioGroup +- Fix `Enter` key presses on Radio inputs so they no longer block native implicit form submission - [@nami8824](https://github.com/nami8824) - [PR](https://github.com/adobe/react-spectrum/pull/9972) +### Select +- Restore the default `type` for Select - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/10361) +### Switch +- Delegate label `keydown` handling to the native input for switches so key events behave consistently - [@nami8824](https://github.com/nami8824) - [PR](https://github.com/adobe/react-spectrum/pull/9972) +### Table +- Support TextFields and other interactive components inside Table rows using `keyboardNavigationBehavior="tab"` - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/10159), [PR](https://github.com/adobe/react-spectrum/pull/10206) +- Floor fractional table column widths so columns don't overflow - [@ardittirana](https://github.com/ardittirana) - [PR](https://github.com/adobe/react-spectrum/pull/10238) +- Fix column resizing getting stuck after a press and hold - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/10040) +- Restore focus without an infinite loop when no focusable row remains in `useGridState` - [@RobHannay](https://github.com/RobHannay) - [PR](https://github.com/adobe/react-spectrum/pull/10241) +### TokenField +- Add TokenField component - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/10318) +### Tree +- Fix non-selection checkboxes in Tree items - [@mvanhorn](https://github.com/mvanhorn) - [PR](https://github.com/adobe/react-spectrum/pull/10274) +- Prevent virtualized grid layouts from disappearing when hidden via `display: none` - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/10190) +- Export `TreeSectionProps` and `TreeHeaderProps` types - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/10306) +### useId +- Prevent `FinalizationRegistry` entries from accumulating on every re-render - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/9853) +### useKeyboard +- Adds support for new shortcuts that allow control over stopping prpagation and preventing default - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/10200), [PR](https://github.com/adobe/react-spectrum/pull/10322), [PR](https://github.com/adobe/react-spectrum/pull/10285) +### usePress +- Fix press events not firing consistently for trackpad taps - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/10225) +### Virtualizer +- Add `shouldObserveItemSize` to Virtualizer to force re-layout when items change size - [@yihuiliao](https://github.com/yihuiliao) - [PR](https://github.com/adobe/react-spectrum/pull/10258) + +## Released packages + +``` + - @internationalized/date@3.12.3 + - @internationalized/string@3.2.10 + - @react-types/shared@3.36.1 + - @react-aria/optimize-locales-plugin@2.0.1 + - react-aria@3.51.0 + - react-aria-components@1.20.0 + - react-stately@3.49.0 +``` diff --git a/packages/dev/s2-docs/pages/s2/releases/v1-6-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v1-6-0.mdx new file mode 100644 index 00000000000..39cb2792219 --- /dev/null +++ b/packages/dev/s2-docs/pages/s2/releases/v1-6-0.mdx @@ -0,0 +1,141 @@ +{/* 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 {InstallCommand} from '../../../src/InstallCommand'; + +import {Layout} from '../../../src/Layout'; +export default Layout; + +import docs from 'docs:@react-spectrum/s2'; + +export const hideNav = true; +export const section = 'Releases'; +export const tags = ['release', 'S2']; +export const date = 'July 31, 2026'; +export const title = 'v1.6.0'; +export const description = 'This release adds the long-awaited SideNav component for app navigation sidebars, context menu support in MenuTrigger, and support for textfields and other interactive elements in TableView cells.'; +export const isSubpage = true; + +# v1.6.0 + +This release introduces the new [SideNav](../SideNav) component for building app navigation sidebars, adds `trigger="contextMenu"` support to [MenuTrigger](../Menu#context-menu), and lets [TableView](../TableView#keyboard-navigation) cells hold interactive content like TextFields. + +```tsx render hideCode +"use client"; +import {SideNav, SideNavItem, SideNavItemContent, SideNavItemLink, SideNavSection, SideNavHeader, Text} from '@react-spectrum/s2/SideNav'; +import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; +import UserGroup from '@react-spectrum/s2/icons/UserGroup'; +import CCLibrary from '@react-spectrum/s2/icons/CCLibrary'; +import Files from '@react-spectrum/s2/icons/Files'; +import Images from '@react-spectrum/s2/icons/Images'; +import Animation from '@react-spectrum/s2/icons/Animation'; +import Download from '@react-spectrum/s2/icons/Download'; +import Apps from '@react-spectrum/s2/icons/Apps'; +import {RouterProvider} from 'react-aria-components'; +import React, {useState} from 'react'; + +function RoutedSideNav(props) { + let {children} = props; + let [selectedRoute, setSelectedRoute] = useState(props.defaultSelectedRoute); + + let updateSelection = (href: string) => { + setSelectedRoute(href); + }; + + return {children({selectedRoute})}; +} + + + {({selectedRoute}) => ( + + + Favorites + + + + + Applications + + + + + + + + Downloads + + + + + + Workspaces + + + + + Files + + + + + + + + Your Libraries + + + + + + + Photos + + + + + + + + + Shared with You + + + + + + + Animations + + + + + + + )} + +``` + +## Changelog + +### General Changes +- Adds support for chaining multiple keyboard shortcut handlers - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/10200) +### Dialog +- Adds `aria-describedby` support so AlertDialog content is announced to assistive technology - [@costajohnt](https://github.com/costajohnt) - [PR](https://github.com/adobe/react-spectrum/pull/9924) +### Menu +- Adds `trigger="contextMenu"` support to MenuTrigger for showing menus on right-click or long-press - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/10237) +### SideNav +- Adds SideNav component - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/10306) +### Switch +- Fixes Switch's hidden native input positioning so it doesn't shift layout - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/10336) +### Table +- Adds support for TextField and other interactive components inside Table cells using `keyboardNavigationBehavior="tab"`- [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/10159) +### TextArea +- Fixes empty TextArea height jumping when an overlay is open - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/9933) +### Toast +- Allows an `id` prop to be passed through to the DOM on Toast - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/10342) diff --git a/packages/dev/s2-docs/src/CodeBlock.tsx b/packages/dev/s2-docs/src/CodeBlock.tsx index 35a2d522013..b5c25dd75e4 100644 --- a/packages/dev/s2-docs/src/CodeBlock.tsx +++ b/packages/dev/s2-docs/src/CodeBlock.tsx @@ -75,6 +75,7 @@ interface CodeBlockProps extends VisualExampleProps { files?: string[]; expanded?: boolean; hidden?: boolean; + hideCode?: boolean; showCoachMark?: boolean; } @@ -85,6 +86,7 @@ export function CodeBlock({ files, expanded, hidden, + hideCode, ...props }: CodeBlockProps) { if (hidden) { @@ -147,19 +149,21 @@ export function CodeBlock({ return (
-
- {files ? ( - - {content} - - ) : ( - content - )} -
+ {!hideCode && ( +
+ {files ? ( + + {content} + + ) : ( + content + )} +
+ )}
); } diff --git a/scripts/changelog.js b/scripts/changelog.js index 2bce12dfc9b..f9ec64d239d 100644 --- a/scripts/changelog.js +++ b/scripts/changelog.js @@ -43,6 +43,11 @@ function packageToLibrary(name) { if (name === '@react-spectrum/s2') { return 'Spectrum 2'; } + // @react-spectrum/ai has no release doc set yet — collected into its own + // bucket and console-logged only (like v3), not written to a file. + if (name === '@react-spectrum/ai') { + return 'AI'; + } // V3 has no LIBRARY_CONFIG entry. Its commits are collected but only printed // as a warning, never written to a file. See the v3Bucket handling at the end of run(). if (name === '@adobe/react-spectrum' || name.startsWith('@react-spectrum/')) { @@ -346,4 +351,17 @@ async function run() { } console.warn(); } + + // Handle commits in @react-spectrum/ai + let aiBucket = commitsByLibrary.get('AI'); + if (aiBucket && aiBucket.size > 0) { + console.warn( + `\nℹ ${aiBucket.size} @react-spectrum/ai commit(s) were not written to a file. Review them manually if needed:\n` + ); + let sorted = [...aiBucket.values()].sort((a, b) => (a[1] < b[1] ? -1 : 1)); + for (let commit of sorted) { + console.warn(` ${commit[3]}`); + } + console.warn(); + } }