From 9ae01f6b3c4062b901e4ddfd2dc466881d3a9b78 Mon Sep 17 00:00:00 2001 From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com> Date: Mon, 3 Nov 2025 10:48:37 -0800 Subject: [PATCH 1/4] condense sections --- packages/dev/s2-docs/pages/react-aria/FocusRing.mdx | 2 +- packages/dev/s2-docs/pages/react-aria/FocusScope.mdx | 2 +- packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx | 2 +- packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx | 2 +- packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx | 2 +- packages/dev/s2-docs/pages/react-aria/useClipboard.mdx | 2 +- packages/dev/s2-docs/pages/react-aria/useCollator.mdx | 2 +- packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx | 2 +- packages/dev/s2-docs/pages/react-aria/useDrag.mdx | 2 +- packages/dev/s2-docs/pages/react-aria/useDrop.mdx | 2 +- packages/dev/s2-docs/pages/react-aria/useFilter.mdx | 2 +- packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx | 3 +-- packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx | 3 +-- packages/dev/s2-docs/pages/react-aria/useLocale.mdx | 2 +- packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx | 2 +- 15 files changed, 15 insertions(+), 17 deletions(-) diff --git a/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx index 52d8a4aac79..09524d2c431 100644 --- a/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx @@ -13,7 +13,7 @@ import {GroupedPropTable} from '../../src/PropTable'; import {FunctionAPI} from '../../src/FunctionAPI'; import docs from 'docs:@react-aria/focus'; -export const section = 'Focus'; +export const section = 'Interactions'; # FocusRing diff --git a/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx b/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx index bf41919a10d..926ac779ee9 100644 --- a/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx +++ b/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx @@ -13,7 +13,7 @@ import {GroupedPropTable} from '../../src/PropTable'; import {FunctionAPI} from '../../src/FunctionAPI'; import docs from 'docs:@react-aria/focus'; -export const section = 'Focus'; +export const section = 'Interactions'; # FocusScope diff --git a/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx b/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx index 9bdc658f95d..d5e0dcf6bcd 100644 --- a/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx @@ -12,7 +12,7 @@ export default Layout; import {FunctionAPI} from '../../src/FunctionAPI'; import docs from 'docs:@react-aria/i18n'; -export const section = 'Internationalization'; +export const section = 'Utilities'; export const description = 'Implementing collections in React Aria'; diff --git a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx index c161d7d7b79..117eeb1545d 100644 --- a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx @@ -12,7 +12,7 @@ export default Layout; import docs from 'docs:@react-aria/overlays'; import {FunctionAPI} from '../../src/FunctionAPI'; -export const section = 'Server Side Rendering'; +export const section = 'Utilities'; # PortalProvider diff --git a/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx b/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx index 37f23f1bbbe..d2dfdfe8fbb 100644 --- a/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx @@ -11,7 +11,7 @@ import {Layout} from '../../src/Layout'; export default Layout; import docs from 'docs:@react-aria/ssr'; -export const section = 'Server Side Rendering'; +export const section = 'Utilities'; export const description = 'Implementing collections in React Aria'; # SSRProvider diff --git a/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx index e044de4e0b1..d21c3a2e3f8 100644 --- a/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx @@ -12,7 +12,7 @@ export default Layout; import {FunctionAPI} from '../../src/FunctionAPI'; import docs from 'docs:@react-aria/dnd'; import sharedDocs from 'docs:@react-types/shared/src/dnd.d.ts'; -export const section = 'Drag and Drop'; +export const section = 'Interactions'; # useClipboard diff --git a/packages/dev/s2-docs/pages/react-aria/useCollator.mdx b/packages/dev/s2-docs/pages/react-aria/useCollator.mdx index 45d63d6cfd1..5ce6f1724c5 100644 --- a/packages/dev/s2-docs/pages/react-aria/useCollator.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useCollator.mdx @@ -12,7 +12,7 @@ export default Layout; import {FunctionAPI} from '../../src/FunctionAPI'; import docs from 'docs:@react-aria/i18n'; -export const section = 'Internationalization'; +export const section = 'Utilities'; export const description = 'Implementing collections in React Aria'; diff --git a/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx b/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx index 2f77d300aed..7cdb9055a53 100644 --- a/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx @@ -12,7 +12,7 @@ export default Layout; import {FunctionAPI} from '../../src/FunctionAPI'; import docs from 'docs:@react-aria/i18n'; -export const section = 'Internationalization'; +export const section = 'Utilities'; export const description = 'Implementing collections in React Aria'; # useDateFormatter diff --git a/packages/dev/s2-docs/pages/react-aria/useDrag.mdx b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx index 7f028799fa3..59cd5296422 100644 --- a/packages/dev/s2-docs/pages/react-aria/useDrag.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx @@ -13,7 +13,7 @@ import {GroupedPropTable} from '../../src/PropTable'; import {FunctionAPI} from '../../src/FunctionAPI'; import docs from 'docs:@react-aria/dnd'; import sharedDocs from 'docs:@react-types/shared/src/dnd.d.ts'; -export const section = 'Drag and Drop'; +export const section = 'Interactions'; # useDrag diff --git a/packages/dev/s2-docs/pages/react-aria/useDrop.mdx b/packages/dev/s2-docs/pages/react-aria/useDrop.mdx index 1f7e1c93c53..c3a614c8d47 100644 --- a/packages/dev/s2-docs/pages/react-aria/useDrop.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useDrop.mdx @@ -14,7 +14,7 @@ import {FunctionAPI} from '../../src/FunctionAPI'; import docs from 'docs:@react-aria/dnd'; import sharedDocs from 'docs:@react-types/shared/src/dnd.d.ts'; import typesDocs from 'docs:@react-types/shared/src/events.d.ts'; -export const section = 'Drag and Drop'; +export const section = 'Interactions'; # useDrop diff --git a/packages/dev/s2-docs/pages/react-aria/useFilter.mdx b/packages/dev/s2-docs/pages/react-aria/useFilter.mdx index ac5c8b7f37c..53b50dcb56f 100644 --- a/packages/dev/s2-docs/pages/react-aria/useFilter.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useFilter.mdx @@ -12,7 +12,7 @@ export default Layout; import {FunctionAPI} from '../../src/FunctionAPI'; import docs from 'docs:@react-aria/i18n'; -export const section = 'Internationalization'; +export const section = 'Utilities'; export const description = 'Implementing collections in React Aria'; # useFilter diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx index 3cb7dddea29..328e0df2f2d 100644 --- a/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx @@ -13,8 +13,7 @@ import {InterfaceType} from '../../src/types'; import {FunctionAPI} from '../../src/FunctionAPI'; import docs from 'docs:@react-aria/focus'; -export const section = 'Focus'; -export const description = 'Implementing collections in React Aria'; +export const section = 'Interactions'; # useFocusRing diff --git a/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx b/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx index 9f9a882d531..b22711aa90a 100644 --- a/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx @@ -12,8 +12,7 @@ export default Layout; import docs from 'docs:@react-aria/ssr'; import {FunctionAPI} from '../../src/FunctionAPI'; - -export const section = 'Server Side Rendering'; +export const section = 'Utilities'; # useIsSSR diff --git a/packages/dev/s2-docs/pages/react-aria/useLocale.mdx b/packages/dev/s2-docs/pages/react-aria/useLocale.mdx index 978bc50bd40..7cda0302bcb 100644 --- a/packages/dev/s2-docs/pages/react-aria/useLocale.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useLocale.mdx @@ -12,7 +12,7 @@ export default Layout; import {FunctionAPI} from '../../src/FunctionAPI'; import docs from 'docs:@react-aria/i18n'; -export const section = 'Internationalization'; +export const section = 'Utilities'; export const description = 'Implementing collections in React Aria'; # useLocale diff --git a/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx b/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx index 35d39fbb6e5..de679b72c31 100644 --- a/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx @@ -12,7 +12,7 @@ export default Layout; import {FunctionAPI} from '../../src/FunctionAPI'; import docs from 'docs:@react-aria/i18n'; -export const section = 'Internationalization'; +export const section = 'Utilities'; export const description = 'Implementing collections in React Aria'; # useNumberFormatter From 48415fb74585b70156444f3ca466ca49c63986c7 Mon Sep 17 00:00:00 2001 From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com> Date: Mon, 3 Nov 2025 11:55:10 -0800 Subject: [PATCH 2/4] move props after the example --- .../s2-docs/pages/react-aria/FocusRing.mdx | 8 ++--- .../s2-docs/pages/react-aria/FocusScope.mdx | 22 ++++++------- .../s2-docs/pages/react-aria/I18nProvider.mdx | 8 ++--- .../pages/react-aria/PortalProvider.mdx | 9 +++--- .../s2-docs/pages/react-aria/useFilter.mdx | 16 +++++----- .../dev/s2-docs/pages/react-aria/useFocus.mdx | 20 ++++++------ .../s2-docs/pages/react-aria/useFocusRing.mdx | 18 ++++++----- .../pages/react-aria/useFocusVisible.mdx | 21 ++++++------ .../pages/react-aria/useFocusWithin.mdx | 20 ++++++------ .../dev/s2-docs/pages/react-aria/useHover.mdx | 30 ++++++++--------- .../s2-docs/pages/react-aria/useKeyboard.mdx | 21 ++++++------ .../s2-docs/pages/react-aria/useLandmark.mdx | 20 ++++++------ .../s2-docs/pages/react-aria/useLocale.mdx | 16 +++++----- .../s2-docs/pages/react-aria/useLongPress.mdx | 30 ++++++++--------- .../dev/s2-docs/pages/react-aria/useMove.mdx | 32 +++++++++---------- .../pages/react-aria/useNumberFormatter.mdx | 8 ++--- .../dev/s2-docs/pages/react-aria/usePress.mdx | 30 ++++++++--------- 17 files changed, 164 insertions(+), 165 deletions(-) diff --git a/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx index 09524d2c431..dfca372bece 100644 --- a/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx @@ -29,10 +29,6 @@ switching in from a different tab, we show the focus ring. If CSS classes are not being used for styling, see [useFocusRing](useFocusRing.html) for a hooks version. -## Props - - - ## Example This example shows how to use `` to apply a CSS class when keyboard focus is on a button. @@ -46,3 +42,7 @@ import './FocusRingExample.css'; ``` + +## Props + + \ No newline at end of file diff --git a/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx b/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx index 926ac779ee9..2479ed50ac6 100644 --- a/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx +++ b/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx @@ -34,17 +34,6 @@ in combination with a FocusScope to programmatically move focus within the scope arrow key navigation could be implemented by handling keyboard events and using a focus manager to move focus to the next and previous elements. -## Props - - - -## FocusManager Interface - -To get a focus manager, call the hook -from a component within the FocusScope. A focus manager supports the following methods: - - - ## Example A basic example of a focus scope that contains focus within it is below. Clicking the "Open" @@ -128,3 +117,14 @@ function ToolbarButton(props) { Paste ``` + +## Props + + + +## FocusManager Interface + +To get a focus manager, call the hook +from a component within the FocusScope. A focus manager supports the following methods: + + \ No newline at end of file diff --git a/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx b/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx index d5e0dcf6bcd..15fb260507d 100644 --- a/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx @@ -25,10 +25,6 @@ with a locale defined by your application (e.g. application setting). This shoul your entire application in the provider, which will be cause all child elements to receive the new locale information via [useLocale](useLocale.html). -## Props - - - ## Example ```tsx @@ -38,3 +34,7 @@ import {I18nProvider} from '@react-aria/i18n'; ``` + +## Props + + diff --git a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx index 117eeb1545d..55838cf9965 100644 --- a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx @@ -32,10 +32,6 @@ outside of any possible overflow or stacking contexts. We envision `UNSAFE_Porta elements into a single container at the root of the app or to control the order of children of the `body` element, but you may have use cases that need to do otherwise. -## Props - - - ## Example The example below shows how you can use `UNSAFE_PortalProvider` to portal your Toasts to an arbitrary container. Note that @@ -169,3 +165,8 @@ function MyOverlay(props) { return ReactDOM.createPortal(children, getContainer()); } ``` + +## Props + + + diff --git a/packages/dev/s2-docs/pages/react-aria/useFilter.mdx b/packages/dev/s2-docs/pages/react-aria/useFilter.mdx index 53b50dcb56f..d53f2eb9bfd 100644 --- a/packages/dev/s2-docs/pages/react-aria/useFilter.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useFilter.mdx @@ -17,6 +17,10 @@ export const description = 'Implementing collections in React Aria'; # useFilter +## API + + + ## Introduction `useFilter` provides functions for filtering or searching based on substring matches. The builtin JavaScript @@ -25,14 +29,6 @@ sensitive matching. `useFilter` provides options to allow ignoring case, diacrit which are implemented according to locale-specific rules. It automatically uses the current locale set by the application, either via the default browser language or via the [I18nProvider](I18nProvider.html). -## API - - - -## Interface - - - ## Example The following example implements a filterable list using a `contains` matching strategy that ignores both case @@ -79,3 +75,7 @@ function Example() { ); } ``` + +## Interface + + \ No newline at end of file diff --git a/packages/dev/s2-docs/pages/react-aria/useFocus.mdx b/packages/dev/s2-docs/pages/react-aria/useFocus.mdx index 5fd8fb72e71..8a9431802e8 100644 --- a/packages/dev/s2-docs/pages/react-aria/useFocus.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useFocus.mdx @@ -32,16 +32,6 @@ in CSS. To handle focus events on descendants of an element, see [useFocusWithin](useFocusWithin.html). -## Usage - -`useFocus` returns props that you should spread onto the target element: - - - -`useFocus` supports the following options and event handlers: - - - ## Example This example shows a simple input element that handles focus events with `useFocus` and logs them to a list below. @@ -83,3 +73,13 @@ function Example() { ); } ``` + +## Usage + +`useFocus` returns props that you should spread onto the target element: + + + +`useFocus` supports the following options and event handlers: + + \ No newline at end of file diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx index 328e0df2f2d..aa20e5eed87 100644 --- a/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx @@ -32,14 +32,6 @@ and touch screen users. If CSS classes are being used for styling, see the [FocusRing](FocusRing.html) component for a shortcut. -## Options - - - -## Result - - - ## Example This example shows how to use `useFocusRing` to adjust styling when keyboard focus is on a button. @@ -76,3 +68,13 @@ function Example() { ); } ``` + +## Usage + +`useFocusRing` returns props that you should spread onto the target element: + + + +`useFocusRing` supports the following options and event handlers: + + diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx index 8d30baa7051..5543eeb12dc 100644 --- a/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx @@ -35,17 +35,6 @@ in CSS. To determine whether a focus ring should be visible for an individual component rather than globally, see [useFocusRing](useFocusRing.html). -## Usage - -`useFocusVisible` returns props that you should spread onto the target element: - - - -`useFocusVisible` supports the following options: - - - - ## Example This example shows focus visible state and updates as you interact with the page. By default, @@ -77,3 +66,13 @@ function Example() { ); } ``` + +## Usage + +`useFocusVisible` returns props that you should spread onto the target element: + + + +`useFocusVisible` supports the following options: + + diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx index affe18d4e80..91085303b80 100644 --- a/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx @@ -31,16 +31,6 @@ in CSS. To handle focus events on only the target element, and not descendants, see [useFocus](useFocus.html). -## Usage - -`useFocusWithin` returns props that you should spread onto the target element: - - - -`useFocusWithin` supports the following event handlers and options: - - - ## Example This example shows two text fields inside a div, which handles focus within events. It stores focus @@ -100,3 +90,13 @@ function Example() { ); } ``` + +## Usage + +`useFocusWithin` returns props that you should spread onto the target element: + + + +`useFocusWithin` supports the following event handlers and options: + + \ No newline at end of file diff --git a/packages/dev/s2-docs/pages/react-aria/useHover.mdx b/packages/dev/s2-docs/pages/react-aria/useHover.mdx index a605a007bd6..f2f292a3e78 100644 --- a/packages/dev/s2-docs/pages/react-aria/useHover.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useHover.mdx @@ -39,21 +39,6 @@ and device, `:hover` may never apply, or may apply continuously until the user t {/* TODO: uncomment once we transfer over the blogs to new docs */} {/* Read our [blog post](/blog/building-a-button-part-2.html) about the complexities of hover event handling to learn more. */} -## Usage - -`useHover` returns props that you should spread onto the target element: - - - -`useHover` supports the following event handlers and options: - - - -Each of these handlers is fired with a `HoverEvent`, which exposes information about the target and the -type of event that triggered the interaction. - - - ## Accessibility Hover interactions should never be the only way to interact with an element because they are not @@ -112,3 +97,18 @@ function Example() { ); } ``` + +## Usage + +`useHover` returns props that you should spread onto the target element: + + + +`useHover` supports the following event handlers and options: + + + +Each of these handlers is fired with a `HoverEvent`, which exposes information about the target and the +type of event that triggered the interaction. + + diff --git a/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx b/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx index 13ef7c0dc35..66025efeb36 100644 --- a/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx @@ -30,21 +30,11 @@ This provides better modularity by default, so that a parent component doesn't r that a child already handled. If the child doesn't handle the event (e.g. it was for an unknown key), it can call `event.continuePropagation()` to allow parents to handle the event. -## Usage - -`useKeyboard` returns props that you should spread onto the target element: - - - -`useKeyboard` supports the following props: - - - ## Example This example shows a simple input element that handles keyboard events with `useKeyboard` and logs them to a list below. -{/* Components hooks have not been written yet */} +{/* TODO: Components hooks have not been written yet */} {/* **NOTE: for more advanced text field functionality, see [useTextField](useTextField.html).** */} ```tsx render @@ -81,3 +71,12 @@ function Example() { ); } ``` +## Usage + +`useKeyboard` returns props that you should spread onto the target element: + + + +`useKeyboard` supports the following props: + + \ No newline at end of file diff --git a/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx b/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx index df5e9b0a847..acea53b17fd 100644 --- a/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx @@ -45,16 +45,6 @@ If multiple landmarks are registered with the same role, they should have unique {/* TODO: Not implemented yet */} {/* For an example of landmarks in use, see the [useToastRegion](useToast.html#anatomy) documentation. */} -## Usage - -`useLandmark` returns props that you should spread onto the target element: - - - -`useLandmark` supports the following options: - - - ## Example ```tsx render @@ -108,3 +98,13 @@ function Search(props) { ``` + +## Usage + +`useLandmark` returns props that you should spread onto the target element: + + + +`useLandmark` supports the following options: + + \ No newline at end of file diff --git a/packages/dev/s2-docs/pages/react-aria/useLocale.mdx b/packages/dev/s2-docs/pages/react-aria/useLocale.mdx index 7cda0302bcb..3c1e32e7751 100644 --- a/packages/dev/s2-docs/pages/react-aria/useLocale.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useLocale.mdx @@ -17,6 +17,10 @@ export const description = 'Implementing collections in React Aria'; # useLocale +## API + + + ## Introduction `useLocale` allows components to access the current locale and interface layout direction. @@ -28,14 +32,6 @@ be overridden by using the [I18nProvider](I18nProvider.html) at the root of your and [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) attributes so that the browser knows which language and direction the user interface should be rendered in. -## API - - - -## Interface - - - ## Example ```tsx @@ -51,3 +47,7 @@ function YourApp() { ); } ``` + +## Interface + + diff --git a/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx b/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx index 9d94a0bce6f..8e973ddffc3 100644 --- a/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx @@ -38,21 +38,6 @@ such as `usePress` and `useMove` will be canceled so that only the long press is * Customizable time threshold for long press * Supports an accessibility description to indicate to assistive technology users that a long press action is available -## Usage - -`useLongPress` returns props that you should spread onto the target element: - - - -`useLongPress` supports the following event handlers and options: - - - -Each of these handlers is fired with a `LongPressEvent`, which exposes information about the target and the -type of event that triggered the interaction. - - - ## Example This example shows a button that has both a normal press action using [usePress](usePress.html), as well as a long @@ -112,3 +97,18 @@ function Example() { ); } ``` + +## Usage + +`useLongPress` returns props that you should spread onto the target element: + + + +`useLongPress` supports the following event handlers and options: + + + +Each of these handlers is fired with a `LongPressEvent`, which exposes information about the target and the +type of event that triggered the interaction. + + \ No newline at end of file diff --git a/packages/dev/s2-docs/pages/react-aria/useMove.mdx b/packages/dev/s2-docs/pages/react-aria/useMove.mdx index 91ef600ba40..1c72ec53b63 100644 --- a/packages/dev/s2-docs/pages/react-aria/useMove.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useMove.mdx @@ -37,21 +37,6 @@ event. In addition, after a user focuses the target element, move events are fir * Handles disabling text selection on mobile while the press interaction is active * Normalizes many cross browser inconsistencies -## Usage - -`useMove` returns props that you should spread onto the target element: - - - -`useMove` supports the following event handlers: - - - -Each of these handlers is fired with a `MoveEvent`, which exposes information about the target and the -type of event that triggered the interaction. - - - ## Example This example shows a ball that can be moved by dragging with a mouse or touch, or by tabbing to it and using @@ -75,7 +60,6 @@ function Example() { }); let clamp = pos => Math.min(Math.max(pos, 0), CONTAINER_SIZE - BALL_SIZE); - {/*- begin highlight -*/} let {moveProps} = useMove({ onMoveStart(e) { setColor('red'); @@ -113,7 +97,6 @@ function Example() { setEvents(events => [`move end with pointerType = ${e.pointerType}`, ...events]); } }); - {/*- end highlight -*/} return ( <> @@ -150,3 +133,18 @@ function Example() { ); } ``` + +## Usage + +`useMove` returns props that you should spread onto the target element: + + + +`useMove` supports the following event handlers: + + + +Each of these handlers is fired with a `MoveEvent`, which exposes information about the target and the +type of event that triggered the interaction. + + diff --git a/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx b/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx index de679b72c31..0e825c1927e 100644 --- a/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx @@ -17,6 +17,10 @@ export const description = 'Implementing collections in React Aria'; # useNumberFormatter +## API + + + ## Introduction `useNumberFormatter` wraps a builtin browser [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) @@ -25,10 +29,6 @@ updating when the locale changes, and caching of number formatters for performan [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) docs for information on formatting options. -## API - - - ## Example This example displays a currency value for two locales: USA, and Germany. Two instances of the `Currency` component are rendered, diff --git a/packages/dev/s2-docs/pages/react-aria/usePress.mdx b/packages/dev/s2-docs/pages/react-aria/usePress.mdx index a4d768b2b31..a63d8f98ac3 100644 --- a/packages/dev/s2-docs/pages/react-aria/usePress.mdx +++ b/packages/dev/s2-docs/pages/react-aria/usePress.mdx @@ -42,21 +42,6 @@ the visual appearance of the target. If the pointer is released over the target, {/* TODO: uncomment once blog posts are transferred over */} {/* Read our [blog post](/blog/building-a-button-part-1.html) about the complexities of press event handling to learn more. */} -## Usage - -`usePress` returns props that you should spread onto the target element, along with the current press state: - - - -`usePress` supports the following event handlers: - - - -Each of these handlers is fired with a `PressEvent`, which exposes information about the target and the -type of event that triggered the interaction. - - - ## Example This example shows a simple target that handles press events with `usePress` and logs them to a list below. @@ -112,3 +97,18 @@ function Example() { ); } ``` + +## Usage + +`usePress` returns props that you should spread onto the target element, along with the current press state: + + + +`usePress` supports the following event handlers: + + + +Each of these handlers is fired with a `PressEvent`, which exposes information about the target and the +type of event that triggered the interaction. + + \ No newline at end of file From 2dfed5e0c3d4b2d448df9022641603c266475a04 Mon Sep 17 00:00:00 2001 From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com> Date: Mon, 3 Nov 2025 16:56:35 -0800 Subject: [PATCH 3/4] move api sections --- .../s2-docs/pages/react-aria/FocusRing.mdx | 2 +- .../s2-docs/pages/react-aria/FocusScope.mdx | 6 ++- .../s2-docs/pages/react-aria/SSRProvider.mdx | 8 ++-- .../pages/react-aria/VisuallyHidden.mdx | 45 ++++++++----------- .../s2-docs/pages/react-aria/mergeProps.mdx | 11 +++-- .../s2-docs/pages/react-aria/useClipboard.mdx | 10 ++--- .../s2-docs/pages/react-aria/useCollator.mdx | 8 ++-- .../pages/react-aria/useDateFormatter.mdx | 8 ++-- .../dev/s2-docs/pages/react-aria/useDrag.mdx | 10 ++--- .../dev/s2-docs/pages/react-aria/useDrop.mdx | 10 ++--- .../dev/s2-docs/pages/react-aria/useField.mdx | 12 ++--- .../s2-docs/pages/react-aria/useFilter.mdx | 10 ++--- .../dev/s2-docs/pages/react-aria/useFocus.mdx | 10 ++--- .../s2-docs/pages/react-aria/useFocusRing.mdx | 10 ++--- .../pages/react-aria/useFocusVisible.mdx | 6 ++- .../pages/react-aria/useFocusWithin.mdx | 13 +++--- .../dev/s2-docs/pages/react-aria/useHover.mdx | 13 +++--- .../dev/s2-docs/pages/react-aria/useId.mdx | 8 ++-- .../dev/s2-docs/pages/react-aria/useIsSSR.mdx | 8 ++-- .../s2-docs/pages/react-aria/useKeyboard.mdx | 11 ++--- .../dev/s2-docs/pages/react-aria/useLabel.mdx | 8 ++-- .../s2-docs/pages/react-aria/useLandmark.mdx | 10 ++--- .../s2-docs/pages/react-aria/useLocale.mdx | 9 ++-- .../s2-docs/pages/react-aria/useLongPress.mdx | 15 +++---- .../dev/s2-docs/pages/react-aria/useMove.mdx | 7 +-- .../pages/react-aria/useNumberFormatter.mdx | 8 ++-- .../s2-docs/pages/react-aria/useObjectRef.mdx | 8 ++-- .../dev/s2-docs/pages/react-aria/usePress.mdx | 14 +++--- 28 files changed, 144 insertions(+), 154 deletions(-) diff --git a/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx index dfca372bece..2cc6456bcf8 100644 --- a/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx @@ -43,6 +43,6 @@ import './FocusRingExample.css'; ``` -## Props +## API \ No newline at end of file diff --git a/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx b/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx index 2479ed50ac6..dd7a7e6b82a 100644 --- a/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx +++ b/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx @@ -118,11 +118,13 @@ function ToolbarButton(props) { ``` -## Props +## API + +### Props -## FocusManager Interface +### FocusManager Interface To get a focus manager, call the hook from a component within the FocusScope. A focus manager supports the following methods: diff --git a/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx b/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx index d2dfdfe8fbb..262f22460b7 100644 --- a/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx @@ -26,10 +26,6 @@ See the [server side rendering](ssr.html) docs for more information. **Note**: if you're using React 18 or newer, `SSRProvider` is not necessary and can be removed from your app. React Aria uses the [React.useId](https://react.dev/reference/react/useId) hook internally when using React 18, which ensures ids are consistent. -## Props - - - ## Example ```tsx @@ -39,3 +35,7 @@ import {SSRProvider} from '@react-aria/ssr'; ``` + +## Props + + diff --git a/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx b/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx index 14fb52ee5fe..e99bf515747 100644 --- a/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx +++ b/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx @@ -18,25 +18,20 @@ export const section = 'Utilities'; {docs.exports.VisuallyHidden.description} -## Introduction - -`VisuallyHidden` is a utility component that can be used to hide its children visually, -while keeping them visible to screen readers and other assistive technology. This would -typically be used when you want to take advantage of the behavior and semantics of a -native element like a checkbox or radio button, but replace it with a custom styled -element visually. - -## Props - - +## Gotchas -{/* not implemented yet */} -{/* ## Example +VisuallyHidden is positioned absolutely, so it needs a positioned ancestor. Otherwise, it will be positioned relative to the nearest positioned ancestor, which may be the body, causing undesired scroll bars to appear. -See [useRadioGroup](useRadioGroup.html#styling) and [useCheckbox](useCheckbox.html#styling) -for examples of using `VisuallyHidden` to hide native form elements visually. */} +```tsx + +``` -## Hook +## Hook In order to allow additional rendering flexibility, the `useVisuallyHidden` hook can be used in custom components instead of the `VisuallyHidden` component. It supports the same @@ -44,6 +39,8 @@ options as the component, and returns props to spread onto the element that shou +### Example + ```tsx import {useVisuallyHidden} from '@react-aria/visually-hidden'; @@ -52,16 +49,12 @@ let {visuallyHiddenProps} = useVisuallyHidden();
I am hidden
``` -## Gotchas +## API -VisuallyHidden is positioned absolutely, so it needs a positioned ancestor. Otherwise, it will be positioned relative to the nearest positioned ancestor, which may be the body, causing undesired scroll bars to appear. + -```tsx - -``` +{/* not implemented yet */} +{/* ## Example +See [useRadioGroup](useRadioGroup.html#styling) and [useCheckbox](useCheckbox.html#styling) +for examples of using `VisuallyHidden` to hide native form elements visually. */} diff --git a/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx b/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx index fee98fa10a5..5bd8bf6b915 100644 --- a/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx +++ b/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx @@ -18,16 +18,11 @@ export const section = 'Utilities'; {docs.exports.mergeProps.description} -## API - - - ## Introduction `mergeProps` is a utility function that combines multiple props objects together in a smart way. This can be useful when you need to combine the results of multiple react-aria hooks onto a single -element. For example, both hooks may return the same event handlers, class names, or ids, and only -one of these can be applied. `mergeProps` handles combining these props together so that multiple +element. `mergeProps` handles combining these props together so that multiple event handlers will be chained, multiple classes will be combined, and ids will be deduplicated. For all other props, the last prop object overrides all previous ones. @@ -68,3 +63,7 @@ let merged = { } }; ``` + +## API + + diff --git a/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx index d21c3a2e3f8..bf6d6b744da 100644 --- a/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx @@ -18,10 +18,6 @@ export const section = 'Interactions'; {docs.exports.useClipboard.description} -## API - - - ## Introduction Copy and paste is a common way to transfer data between locations, either within or between apps. Browsers support copy and paste of selected text content by default, but rich objects with custom data can also be copied and pasted using the [clipboard events](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent) API. For example, an app could support copying and pasting a selected card representing a rich object to a new location, or allow a user to paste files from their device to upload them. This can provide a keyboard accessible alternative to drag and drop. @@ -414,4 +410,8 @@ function Pasteable() { -``` \ No newline at end of file +``` + +## API + + \ No newline at end of file diff --git a/packages/dev/s2-docs/pages/react-aria/useCollator.mdx b/packages/dev/s2-docs/pages/react-aria/useCollator.mdx index 5ce6f1724c5..eae2aa7f72f 100644 --- a/packages/dev/s2-docs/pages/react-aria/useCollator.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useCollator.mdx @@ -26,10 +26,6 @@ updating when the locale changes, and caching of collators for performance. See [Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator) docs for information. -## API - - - ## Example This example includes two textfields and compares the values of the two fields using a collator according to the current locale. @@ -72,3 +68,7 @@ function Example() { ); } ``` + +## API + + \ No newline at end of file diff --git a/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx b/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx index 7cdb9055a53..1fc88a16a6d 100644 --- a/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx @@ -25,10 +25,6 @@ updating when the locale changes, and caching of date formatters for performance [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) docs for information on formatting options. -## API - - - ## Example This example displays the current date for two locales: USA, and Russia. Two instances of the `CurrentDate` component are rendered, @@ -55,3 +51,7 @@ function CurrentDate() { ``` + +## API + + diff --git a/packages/dev/s2-docs/pages/react-aria/useDrag.mdx b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx index 59cd5296422..e6031e5fa55 100644 --- a/packages/dev/s2-docs/pages/react-aria/useDrag.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx @@ -19,10 +19,6 @@ export const section = 'Interactions'; {docs.exports.useDrag.description} -## API - - - ## Introduction Drag and drop is a common UI interaction that allows users to transfer data between two locations by directly moving a visual representation on screen. It is a flexible, efficient, and intuitive way for users to perform a variety of tasks, and is widely supported across both desktop and mobile operating systems. @@ -304,4 +300,8 @@ function Draggable() { ); } -``` \ No newline at end of file +``` + +## API + + diff --git a/packages/dev/s2-docs/pages/react-aria/useDrop.mdx b/packages/dev/s2-docs/pages/react-aria/useDrop.mdx index c3a614c8d47..95f2748afaf 100644 --- a/packages/dev/s2-docs/pages/react-aria/useDrop.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useDrop.mdx @@ -20,10 +20,6 @@ export const section = 'Interactions'; {docs.exports.useDrop.description} -## API - - - ## Introduction Drag and drop is a common UI interaction that allows users to transfer data between two locations by directly moving a visual representation on screen. It is a flexible, efficient, and intuitive way for users to perform a variety of tasks, and is widely supported across both desktop and mobile operating systems. @@ -357,4 +353,8 @@ function DropTarget() { -``` \ No newline at end of file +``` + +## API + + \ No newline at end of file diff --git a/packages/dev/s2-docs/pages/react-aria/useField.mdx b/packages/dev/s2-docs/pages/react-aria/useField.mdx index 41125ea5648..417e9af4928 100644 --- a/packages/dev/s2-docs/pages/react-aria/useField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/useField.mdx @@ -18,11 +18,7 @@ export const section = 'Utilities'; {docs.exports.useField.description} -## API - - - -## Example +## Introduction The `useField` hook associates a form control with a label, and an optional description and/or error message. This is useful for providing context about how users should fill in a field, or a validation message. `useField` takes care of creating ids for each element and associating them with the correct ARIA attributes (`aria-labelledby` and `aria-describedby`). @@ -31,6 +27,8 @@ By default, `useField` assumes that the label is a native HTML `