From 2751d0b9a004add44325d73b9562a892703cb8a6 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 30 Jan 2026 14:04:51 -0800 Subject: [PATCH 1/4] Add render prop to customization docs --- .../pages/react-aria/customization.mdx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/packages/dev/s2-docs/pages/react-aria/customization.mdx b/packages/dev/s2-docs/pages/react-aria/customization.mdx index c2a53be4310..7689e549b42 100644 --- a/packages/dev/s2-docs/pages/react-aria/customization.mdx +++ b/packages/dev/s2-docs/pages/react-aria/customization.mdx @@ -2,6 +2,7 @@ import {Layout} from '../../src/Layout'; export default Layout; import docs from 'docs:react-aria-components'; +import {InlineAlert, Heading, Content} from '@react-spectrum/s2'; export const section = 'Guides'; export const description = 'How to build custom component patterns.'; @@ -10,6 +11,39 @@ export const description = 'How to build custom component patterns.'; React Aria is built using a flexible and composable API. Learn how to use contexts and slots to create custom component patterns, or mix and match with the lower level Hook-based API for even more control over rendering and behavior. +## DOM elements + +Use the `render` prop on any React Aria component to render a custom component in place of the default DOM element. This accepts a function which receives the DOM props to pass through, and states such as `isPressed` and `isSelected`. + +For example, you can render a [Motion](https://motion.dev) button and use the state to drive an animation. + +```tsx +import {Button} from 'react-aria-components'; +import {motion} from 'motion/react'; + + +``` + +The `render` prop is also useful for rendering link components from client-side routers, or reusing existing presentational components. + + + Follow these rules to avoid breaking the behavior and accessibility of the component: + + + + + ## Contexts The React Aria Components API is designed around composition. Components are reused between patterns to build larger composite components. For example, there is no dedicated `NumberFieldIncrementButton` or `SelectPopover` component. Instead, the standalone [Button](Button) and [Popover](Popover) components are reused within [NumberField](NumberField) and [Select](Select). This reduces the amount of duplicate styling code you need to write and maintain, and provides powerful composition capabilities you can use in your own components. From 27b47683d60812863c159006f7187eb5c39bf6ea Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 30 Jan 2026 14:05:03 -0800 Subject: [PATCH 2/4] merge refs in mergeProps --- .../@react-aria/interactions/src/PressResponder.tsx | 7 +++---- packages/@react-aria/interactions/src/usePress.ts | 2 +- packages/@react-aria/utils/src/mergeProps.ts | 5 ++++- packages/@react-aria/utils/test/mergeProps.test.jsx | 10 ++++++++++ 4 files changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/@react-aria/interactions/src/PressResponder.tsx b/packages/@react-aria/interactions/src/PressResponder.tsx index de0a7c78e66..f6a598a7a68 100644 --- a/packages/@react-aria/interactions/src/PressResponder.tsx +++ b/packages/@react-aria/interactions/src/PressResponder.tsx @@ -25,10 +25,8 @@ export const PressResponder: React.forwardRef(({children, ...props}: PressResponderProps, ref: ForwardedRef) => { let isRegistered = useRef(false); let prevContext = useContext(PressResponderContext); - ref = useObjectRef(ref || prevContext?.ref); - let context = mergeProps(prevContext || {}, { + let context: any = mergeProps(prevContext || {}, { ...props, - ref, register() { isRegistered.current = true; if (prevContext) { @@ -37,7 +35,8 @@ React.forwardRef(({children, ...props}: PressResponderProps, ref: ForwardedRef { if (!isRegistered.current) { diff --git a/packages/@react-aria/interactions/src/usePress.ts b/packages/@react-aria/interactions/src/usePress.ts index d3cca266f43..668985b5d66 100644 --- a/packages/@react-aria/interactions/src/usePress.ts +++ b/packages/@react-aria/interactions/src/usePress.ts @@ -99,7 +99,7 @@ function usePressResponderContext(props: PressHookProps): PressHookProps { // Consume context from and merge with props. let context = useContext(PressResponderContext); if (context) { - let {register, ...contextProps} = context; + let {register, ref, ...contextProps} = context; props = mergeProps(contextProps, props) as PressHookProps; register(); } diff --git a/packages/@react-aria/utils/src/mergeProps.ts b/packages/@react-aria/utils/src/mergeProps.ts index c7f442fc48e..ed1a4ead348 100644 --- a/packages/@react-aria/utils/src/mergeProps.ts +++ b/packages/@react-aria/utils/src/mergeProps.ts @@ -13,6 +13,7 @@ import {chain} from './chain'; import clsx from 'clsx'; import {mergeIds} from './useId'; +import {mergeRefs} from './mergeRefs'; interface Props { [key: string]: any @@ -28,7 +29,7 @@ type UnionToIntersection = (U extends any ? (k: U) => void : never) extends ( /** * Merges multiple props objects together. Event handlers are chained, - * classNames are combined, and ids are deduplicated. + * classNames are combined, ids are deduplicated, and refs are merged. * For all other props, the last prop object overrides all previous ones. * @param args - Multiple sets of props to merge together. */ @@ -63,6 +64,8 @@ export function mergeProps(...args: T): UnionToIntersectio result[key] = clsx(a, b); } else if (key === 'id' && a && b) { result.id = mergeIds(a, b); + } else if (key === 'ref' && a && b) { + result.ref = mergeRefs(a, b); // Override others } else { result[key] = b !== undefined ? b : a; diff --git a/packages/@react-aria/utils/test/mergeProps.test.jsx b/packages/@react-aria/utils/test/mergeProps.test.jsx index cd64fd06de7..1075f65d528 100644 --- a/packages/@react-aria/utils/test/mergeProps.test.jsx +++ b/packages/@react-aria/utils/test/mergeProps.test.jsx @@ -14,6 +14,7 @@ import clsx from 'clsx'; import { mergeIds, useId } from '../src/useId'; import { mergeProps } from '../src/mergeProps'; import { render } from '@react-spectrum/test-utils-internal'; +import { createRef } from 'react'; describe('mergeProps', function () { it('handles one argument', function () { @@ -122,4 +123,13 @@ describe('mergeProps', function () { let mergedProps = mergeProps({ data: id1 }, { data: id2 }); expect(mergedProps.data).toBe(id2); }); + + it('merges refs', function () { + let ref = createRef(); + let ref1 = createRef(); + let merged = mergeProps({ref}, {ref: ref1}); + merged.ref(2); + expect(ref.current).toBe(2); + expect(ref1.current).toBe(2); + }); }); From 72b12897722e180501addc4bab7ff6ad2972955e Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 30 Jan 2026 16:51:49 -0800 Subject: [PATCH 3/4] Document render prop to create links --- .../dev/s2-docs/pages/react-aria/GridList.mdx | 7 +- .../dev/s2-docs/pages/react-aria/ListBox.mdx | 14 +++- .../dev/s2-docs/pages/react-aria/Menu.mdx | 14 +++- .../dev/s2-docs/pages/react-aria/Table.mdx | 7 +- .../dev/s2-docs/pages/react-aria/Tabs.mdx | 50 +++--------- .../dev/s2-docs/pages/react-aria/TagGroup.mdx | 8 +- .../dev/s2-docs/pages/react-aria/Tree.mdx | 7 +- .../s2-docs/pages/react-aria/frameworks.mdx | 65 +++------------- packages/dev/s2-docs/src/routers.mdx | 78 ------------------- 9 files changed, 72 insertions(+), 178 deletions(-) delete mode 100644 packages/dev/s2-docs/src/routers.mdx diff --git a/packages/dev/s2-docs/pages/react-aria/GridList.mdx b/packages/dev/s2-docs/pages/react-aria/GridList.mdx index 50be2017586..fd988402641 100644 --- a/packages/dev/s2-docs/pages/react-aria/GridList.mdx +++ b/packages/dev/s2-docs/pages/react-aria/GridList.mdx @@ -429,7 +429,7 @@ function AsyncLoadingExample() { ### Links -Use the `href` prop on a `` to create a link. See the [framework setup guide](frameworks) to learn how to integrate with your framework. Link interactions vary depending on the selection behavior. See the [selection guide](selection?component=GridList#selection-behavior) for more details. +Use the `href` prop on a `` to create a link. Link interactions vary depending on the selection behavior. See the [selection guide](selection?component=GridList#selection-behavior) for more details. ```tsx render docs={docs.exports.GridList} links={docs.links} props={['selectionBehavior']} initialProps={{'aria-label': 'Links', selectionMode: 'multiple'}} wide "use client"; @@ -520,6 +520,11 @@ let images = [ ``` + + Client-side routing + Due to [HTML spec limitations](https://github.com/w3c/html-aria/issues/473), GridListItems cannot be rendered as `` elements. React Aria handles link clicks with JavaScript and triggers native navigation. When using a client-side router, use the `onAction` event to programmatically trigger navigation instead of the `href` prop. + + ### Empty state ```tsx render hideImports diff --git a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx index 07547ded718..e8e779ad899 100644 --- a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx @@ -196,7 +196,7 @@ function AsyncLoadingExample() { ### Links -Use the `href` prop on a `` to create a link. See the [framework setup guide](frameworks) to learn how to integrate with your framework. +Use the `href` prop on a `` to create a link. By default, link items in a ListBox are not selectable, and only perform navigation when the user interacts with them. However, with `selectionBehavior="replace"`, items will be selected when single clicking or pressing the Space key, and navigate to the link when double clicking or pressing the Enter key. @@ -214,6 +214,18 @@ import {ListBox, ListBoxItem} from 'react-aria-components'; ``` +By default, links are rendered as an `` element. Use the `render` prop to integrate your framework's link component. An `href` should still be passed to `ListBoxItem` so React Aria knows it is a link. + +```tsx + + 'href' in domProps + ? + :
+ } /> +``` + ### Empty state ```tsx render hideImports diff --git a/packages/dev/s2-docs/pages/react-aria/Menu.mdx b/packages/dev/s2-docs/pages/react-aria/Menu.mdx index c6b840edf5e..44a1ed04df8 100644 --- a/packages/dev/s2-docs/pages/react-aria/Menu.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Menu.mdx @@ -285,7 +285,7 @@ import {Button} from 'vanilla-starter/Button'; ### Links -Use the `href` prop on a `` to create a link. See the [framework setup guide](frameworks) to learn how to integrate with your framework. +Use the `href` prop on a `` to create a link. ```tsx render hideImports "use client"; @@ -305,6 +305,18 @@ import {Button} from 'vanilla-starter/Button'; ``` +By default, links are rendered as an `` element. Use the `render` prop to integrate your framework's link component. An `href` should still be passed to `MenuItem` so React Aria knows it is a link. + +```tsx + + 'href' in domProps + ? + :
+ } /> +``` + ### Autocomplete Popovers can include additional components as siblings of a menu. This example uses an [Autocomplete](Autocomplete) with a [SearchField](SearchField) to let the user filter the items. diff --git a/packages/dev/s2-docs/pages/react-aria/Table.mdx b/packages/dev/s2-docs/pages/react-aria/Table.mdx index 6c99f59bd79..424dc7ecd01 100644 --- a/packages/dev/s2-docs/pages/react-aria/Table.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Table.mdx @@ -261,7 +261,7 @@ function AsyncSortTable() { ### Links -Use the `href` prop on a `` to create a link. See the [framework setup guide](frameworks) to learn how to integrate with your framework. Link interactions vary depending on the selection behavior. See the [selection guide](selection) for more details. +Use the `href` prop on a `` to create a link. Link interactions vary depending on the selection behavior. See the [selection guide](selection) for more details. ```tsx render docs={docs.exports.ListBox} links={docs.links} props={['selectionBehavior']} initialProps={{'aria-label': 'Bookmarks', selectionMode: 'multiple'}} wide "use client"; @@ -295,6 +295,11 @@ import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/ ``` + + Client-side routing + Due to [HTML spec limitations](https://github.com/w3c/html-aria/issues/473), table rows cannot be rendered as `` elements. React Aria handles link clicks with JavaScript and triggers native navigation. When using a client-side router, use the `onAction` event to programmatically trigger navigation instead of the `href` prop. + + ### Empty state ```tsx render hideImports diff --git a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx index f833dc213ad..9983109c84c 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx @@ -186,46 +186,16 @@ function Example() { ### Links -Use the `href` prop on a `` to create a link. See the [framework setup guide](frameworks) to learn how to integrate with your framework. This example uses a simple hash-based router to sync the selected tab to the URL. - -```tsx render -"use client"; -import {Tabs, TabList, Tab, TabPanels, TabPanel} from 'vanilla-starter/Tabs'; -import {useSyncExternalStore} from 'react'; - -export default function Example() { - let hash = useSyncExternalStore(subscribe, getHash, getHashServer); - - return ( - - - {/*- begin highlight -*/} - Home - {/*- end highlight -*/} - Shared - Deleted - - - Home - Shared - Deleted - - - ); -} - -function getHash() { - return location.hash.startsWith('#/') ? location.hash : '#/'; -} - -function getHashServer() { - return '#/'; -} - -function subscribe(fn) { - addEventListener('hashchange', fn); - return () => removeEventListener('hashchange', fn); -} +Use the `href` prop on a `` to create a link. By default, links are rendered as an `` element. Use the `render` prop to integrate your framework's link component. + +```tsx + + 'href' in domProps + ? + :
+ } /> ``` ## Selection diff --git a/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx b/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx index dd988443d44..26add9b66f7 100644 --- a/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx @@ -6,6 +6,7 @@ import {TagGroup as VanillaTagGroup, Tag} from 'vanilla-starter/TagGroup'; import vanillaDocs from 'docs:vanilla-starter/TagGroup'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/tag/docs/anatomy.svg'; +import {InlineAlert, Heading, Content} from '@react-spectrum/s2'; export const tags = ['chips', 'pills']; export const relatedPages = [{'title': 'useTagGroup', 'url': 'TagGroup/useTagGroup.html'}]; @@ -77,7 +78,7 @@ function Example() { ### Links -Use the `href` prop on a `` to create a link. See the [framework setup guide](frameworks) to learn how to integrate with your framework. +Use the `href` prop on a `` to create a link. ```tsx render "use client"; @@ -95,6 +96,11 @@ import {TagGroup, Tag} from 'vanilla-starter/TagGroup'; ``` + + Client-side routing + Due to [HTML spec limitations](https://github.com/w3c/html-aria/issues/473), tags cannot be rendered as `` elements. React Aria handles link clicks with JavaScript and triggers native navigation. When using a client-side router, use the `onAction` event to programmatically trigger navigation instead of the `href` prop. + + ## Selection Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection?component=TagGroup) for more details. diff --git a/packages/dev/s2-docs/pages/react-aria/Tree.mdx b/packages/dev/s2-docs/pages/react-aria/Tree.mdx index e697c3f53d9..92555e74f77 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tree.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tree.mdx @@ -187,7 +187,7 @@ function AsyncLoadingExample() { ### Links -Use the `href` prop on a `` to create a link. See the [framework setup guide](frameworks) to learn how to integrate with your framework. Link interactions vary depending on the selection behavior. See the [selection guide](selection?component=Tree#selection-behavior) for more details. +Use the `href` prop on a `` to create a link. Link interactions vary depending on the selection behavior. See the [selection guide](selection?component=Tree#selection-behavior) for more details. ```tsx render docs={docs.exports.Tree} links={docs.links} props={['selectionBehavior']} initialProps={{selectionMode: 'multiple'}} wide "use client"; @@ -219,6 +219,11 @@ import {Tree, TreeItem} from 'vanilla-starter/Tree'; ``` + + Client-side routing + Due to [HTML spec limitations](https://github.com/w3c/html-aria/issues/473), TreeItems cannot be rendered as `` elements. React Aria handles link clicks with JavaScript and triggers native navigation. When using a client-side router, use the `onAction` event to programmatically trigger navigation instead of the `href` prop. + + ### Empty state ```tsx render diff --git a/packages/dev/s2-docs/pages/react-aria/frameworks.mdx b/packages/dev/s2-docs/pages/react-aria/frameworks.mdx index 2455f685906..bc256d991e2 100644 --- a/packages/dev/s2-docs/pages/react-aria/frameworks.mdx +++ b/packages/dev/s2-docs/pages/react-aria/frameworks.mdx @@ -13,7 +13,6 @@ import Parcel from '../../src/icons/Parcel'; import Webpack from '../../src/icons/Webpack'; import Rollup from '../../src/icons/Rollup'; import ESBuild from '../../src/icons/Esbuild'; -import Routers from '../../src/routers.mdx'; export const section = 'Guides'; export const tags = ['framework', 'setup', 'routing', 'ssr']; @@ -26,7 +25,7 @@ export const description = 'How to integrate with your framework.'; Next.jsReact RouterParcelVitewebpackRollupESBuild - To integrate with Next.js (app router), ensure the locale on the server matches the client, and configure React Aria links to use the Next.js router. + To integrate with Next.js (app router), ensure the locale on the server matches the client. @@ -57,30 +56,18 @@ export const description = 'How to integrate with your framework.'; ``` - Create `app/provider.tsx`. This should render an `I18nProvider` to set the locale used by React Aria, and a `RouterProvider` to integrate with the Next.js router. + Create `app/provider.tsx`. This should render an `I18nProvider` to set the locale used by React Aria. ```tsx // app/provider.tsx "use client"; - import {useRouter} from 'next/navigation'; - import {RouterProvider, I18nProvider} from 'react-aria-components'; - - // Configure the type of the `routerOptions` prop on all React Aria components. - declare module 'react-aria-components' { - interface RouterConfig { - routerOptions: NonNullable['push']>[1]> - } - } + import {I18nProvider} from 'react-aria-components'; export function ClientProviders({lang, children}) { - let router = useRouter(); - return ( - - {children} - + {children} ); } @@ -89,7 +76,7 @@ export const description = 'How to integrate with your framework.'; - To integrate with React Router (framework mode), ensure the locale on the server matches the client, configure React Aria links to use client side routing, and exclude localized strings from the client bundle. If you're using declarative mode, choose your bundler above. + To integrate with React Router (framework mode), ensure the locale on the server matches the client, and exclude localized strings from the client bundle. If you're using declarative mode, choose your bundler above. @@ -149,21 +136,10 @@ export const description = 'How to integrate with your framework.'; ```tsx // app/root.tsx import {useLocale} from 'react-aria-components'; - import {useNavigate, useHref, type NavigateOptions} from 'react-router'; - - /*- begin highlight -*/ - // Configure the type of the `routerOptions` prop on all React Aria components. - declare module 'react-aria-components' { - interface RouterConfig { - routerOptions: NavigateOptions - } - } - /*- end highlight -*/ export function Layout({children}) { /*- begin highlight -*/ let {locale, direction} = useLocale(); - let navigate = useNavigate(); /*- end highlight -*/ return ( @@ -174,11 +150,7 @@ export const description = 'How to integrate with your framework.'; {/* ... */} - {/*- begin highlight -*/} - - {/*- end highlight -*/} - {children} - + {children} {/* ... */} @@ -215,12 +187,9 @@ export const description = 'How to integrate with your framework.'; - To integrate with a client-only Parcel SPA, configure React Aria links to use your client side router, and optimize the client bundle to include localized strings for your supported languages. + To integrate with a client-only Parcel SPA, and optimize the client bundle to include localized strings for your supported languages. - - - By default, React Aria includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin. @@ -247,12 +216,9 @@ export const description = 'How to integrate with your framework.'; - To integrate with a client-only Vite SPA, configure React Aria links to use your client side router, and optimize the client bundle to include localized strings for your supported languages. + To integrate with a client-only Vite SPA, and optimize the client bundle to include localized strings for your supported languages. - - - By default, React Aria includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin. @@ -280,12 +246,9 @@ export const description = 'How to integrate with your framework.'; - To integrate with a client-only webpack SPA, configure React Aria links to use your client side router, and optimize the client bundle to include localized strings for your supported languages. + To integrate with a client-only webpack SPA, and optimize the client bundle to include localized strings for your supported languages. - - - By default, React Aria includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin. @@ -310,12 +273,9 @@ export const description = 'How to integrate with your framework.'; - To integrate with a client-only Rollup SPA, configure React Aria links to use your client side router, and optimize the client bundle to include localized strings for your supported languages. + To integrate with a client-only Rollup SPA, and optimize the client bundle to include localized strings for your supported languages. - - - By default, React Aria includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin. @@ -340,12 +300,9 @@ export const description = 'How to integrate with your framework.'; - To integrate with a client-only ESBuild SPA, configure React Aria links to use your client side router, and optimize the client bundle to include localized strings for your supported languages. + To integrate with a client-only ESBuild SPA, and optimize the client bundle to include localized strings for your supported languages. - - - By default, React Aria includes localized strings for 30+ languages. To optimize the JavaScript bundle to include only your supported languages, install our bundler plugin. diff --git a/packages/dev/s2-docs/src/routers.mdx b/packages/dev/s2-docs/src/routers.mdx deleted file mode 100644 index 575effd9017..00000000000 --- a/packages/dev/s2-docs/src/routers.mdx +++ /dev/null @@ -1,78 +0,0 @@ -import {Counter} from './Step'; - -Render a `RouterProvider` at the root of your app to enable React Aria links to use your client side router. This accepts two props: - -1. `navigate` – a function received from your router for performing a client side navigation programmatically. -2. `useHref` (optional) – converts a router-specific href to a native HTML href, e.g. prepending a base path. - - - -```tsx -// src/app.tsx -import {RouterProvider} from 'react-aria-components'; -import {BrowserRouter, useNavigate, useHref, type NavigateOptions} from 'react-router'; - -/*- begin highlight -*/ -// Configure the type of the `routerOptions` prop on all React Aria components. -declare module 'react-aria-components' { - interface RouterConfig { - routerOptions: NavigateOptions - } -} -/*- end highlight -*/ - -function App() { - let navigate = useNavigate(); - - return ( - /*- begin highlight -*/ - - {/*- end highlight -*/} - {/* Your app here... */} - - } /> - {/* ... */} - - - ); -} -``` - -```tsx -// src/routes/__root.tsx -import {RouterProvider} from 'react-aria-components'; -import {useRouter, type NavigateOptions, type ToOptions} from '@tanstack/react-router'; - -/*- begin highlight -*/ -// Configure the type of the `href` and `routerOptions` props on all React Aria components. -declare module 'react-aria-components' { - interface RouterConfig { - href: ToOptions, - routerOptions: Omit - } -} -/*- end highlight -*/ - -export const Route = createRootRoute({ - component: () => { - let router = useRouter(); - return ( - /*- begin highlight -*/ - { - if (typeof href === "string") return; - return router.navigate({ ...href, ...opts }); - }} - useHref={(href) => { - if (typeof href === "string") return href; - return router.buildLocation(href).href; - }}> - {/*- end highlight -*/} - {/* Your app here... */} - - ); - } -}); -``` - - From 0f9132118278890781b4510eb004fb7c15818188 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 30 Jan 2026 16:57:46 -0800 Subject: [PATCH 4/4] lint --- packages/@react-aria/interactions/src/usePress.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/@react-aria/interactions/src/usePress.ts b/packages/@react-aria/interactions/src/usePress.ts index 668985b5d66..22c91966655 100644 --- a/packages/@react-aria/interactions/src/usePress.ts +++ b/packages/@react-aria/interactions/src/usePress.ts @@ -99,6 +99,8 @@ function usePressResponderContext(props: PressHookProps): PressHookProps { // Consume context from and merge with props. let context = useContext(PressResponderContext); if (context) { + // Prevent mergeProps from merging ref. + // eslint-disable-next-line @typescript-eslint/no-unused-vars let {register, ref, ...contextProps} = context; props = mergeProps(contextProps, props) as PressHookProps; register();