docs: hook followup from testing (#9166)

yihuiliao · web-flow · commit 2e36b000f3c9 · 2025-11-12T22:07:20.000Z
* update provider docs

* fix styling, hopefully...

* update api section for consistency

* fix clipboard example

* remove api from the top in useFocusVisible
diff --git a/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx
@@ -45,4 +45,6 @@ import './FocusRingExample.css';
 
 ## API
 
+### FocusRing
+
 <PropTable links={docs.links} component={docs.exports.FocusRing} />
diff --git a/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx b/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx
@@ -120,7 +120,7 @@ function ToolbarButton(props) {
 
 ## API
 
-### Props
+### FocusScope
 
 <PropTable links={docs.links} component={docs.exports.FocusScope} />
 
diff --git a/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx b/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx
@@ -35,6 +35,8 @@ import {I18nProvider} from '@react-aria/i18n';
 </I18nProvider>
 ```
 
-## Props
+## API
+
+### I18nProvider
 
 <PropTable component={docs.exports.I18nProvider} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx
@@ -166,7 +166,9 @@ function MyOverlay(props) {
 }
 ```
 
-## Props
+## API
+
+### PortalProvider
 
 <PropTable links={docs.links} component={docs.exports.UNSAFE_PortalProvider} />
 
diff --git a/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx b/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx
@@ -36,6 +36,8 @@ import {SSRProvider} from '@react-aria/ssr';
 </SSRProvider>
 ```
 
-## Props
+## API
+
+### SSRProvider
 
 <PropTable component={docs.exports.SSRProvider} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx b/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx
@@ -51,6 +51,8 @@ let {visuallyHiddenProps} = useVisuallyHidden();
 
 ## API
 
+### VisuallyHidden
+
 <PropTable links={docs.links} component={docs.exports.VisuallyHidden} />
 
 {/* not implemented yet */}
diff --git a/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx
@@ -10,8 +10,10 @@ governing permissions and limitations under the License. */}
 import {Layout} from '../../src/Layout';
 export default Layout;
 import {FunctionAPI} from '../../src/FunctionAPI';
+import {InterfaceType} from '../../src/types';
 import docs from 'docs:@react-aria/dnd';
 import sharedDocs from 'docs:@react-types/shared/src/dnd.d.ts';
+
 export const section = 'Interactions';
 
 # useClipboard
@@ -414,4 +416,12 @@ function Pasteable() {
 
 ## API
 
-<FunctionAPI function={docs.exports.useClipboard} links={docs.links} />
+<FunctionAPI function={docs.exports.useClipboard} links={docs.links} />
+
+### ClipboardProps
+
+<InterfaceType {...docs.exports.ClipboardProps} />
+
+### ClipboardResult
+
+<InterfaceType {...docs.exports.ClipboardResult} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useClipboardExample.css b/packages/dev/s2-docs/pages/react-aria/useClipboardExample.css
@@ -7,7 +7,7 @@
   padding: 10px;
   margin-right: 20px;
   border-radius: 8px;
-  color: var(--color-white);
+  color: var(--text-color);
 }
 
 [role=textbox]:focus {
@@ -25,5 +25,5 @@
   border-radius: 4px;
   font-size: small;
   letter-spacing: .2em;
-  color: var(--color-white);
+  color: var(--text-color);
 }
diff --git a/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx b/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx
@@ -10,6 +10,7 @@ governing permissions and limitations under the License. */}
 import {Layout} from '../../src/Layout';
 export default Layout;
 import {FunctionAPI} from '../../src/FunctionAPI';
+import {InterfaceType} from '../../src/types';
 import docs from 'docs:@react-aria/i18n';
 
 export const section = 'Utilities';
@@ -55,3 +56,12 @@ function CurrentDate() {
 ## API
 
 <FunctionAPI function={docs.exports.useDateFormatter} links={docs.links} />
+
+### DateFormatterOptions
+
+<InterfaceType {...docs.exports.DateFormatterOptions} />
+
+### DateFormatter
+
+<InterfaceType {...docs.exports.DateFormatter} />
+
diff --git a/packages/dev/s2-docs/pages/react-aria/useDrag.mdx b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx
@@ -11,8 +11,10 @@ import {Layout} from '../../src/Layout';
 export default Layout;
 import {GroupedPropTable} from '../../src/PropTable';
 import {FunctionAPI} from '../../src/FunctionAPI';
+import {InterfaceType} from '../../src/types';
 import docs from 'docs:@react-aria/dnd';
 import sharedDocs from 'docs:@react-types/shared/src/dnd.d.ts';
+
 export const section = 'Interactions';
 
 # useDrag
@@ -306,3 +308,11 @@ function Draggable() {
 ## API
 
 <FunctionAPI function={docs.exports.useDrag} links={docs.links} />
+
+### DragOptions
+
+<InterfaceType {...docs.exports.DragOptions} />
+
+### DragResult
+
+<InterfaceType {...docs.exports.DragResult} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useDrop.mdx b/packages/dev/s2-docs/pages/react-aria/useDrop.mdx
@@ -14,6 +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 = 'Interactions';
 
 # useDrop
@@ -358,4 +359,12 @@ function DropTarget() {
 
 ## API
 
-<FunctionAPI function={docs.exports.useDrop} links={docs.links} />
+<FunctionAPI function={docs.exports.useDrop} links={docs.links} />
+
+### DropOptions
+
+<InterfaceType {...docs.exports.DropOptions} />
+
+### DropResult
+
+<InterfaceType {...docs.exports.DropResult} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useField.mdx b/packages/dev/s2-docs/pages/react-aria/useField.mdx
@@ -11,6 +11,7 @@ import {Layout} from '../../src/Layout';
 export default Layout;
 import docs from 'docs:@react-aria/label';
 import {FunctionAPI} from '../../src/FunctionAPI';
+import {InterfaceType} from '../../src/types';
 
 export const section = 'Utilities';
 
@@ -68,3 +69,11 @@ function ContactPicker(props) {
 ## API
 
 <FunctionAPI function={docs.exports.useField} links={docs.links} />
+
+### AriaFieldProps
+
+<InterfaceType {...docs.exports.AriaFieldProps} />
+
+### FieldAria
+
+<InterfaceType {...docs.exports.FieldAria} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useFilter.mdx b/packages/dev/s2-docs/pages/react-aria/useFilter.mdx
@@ -76,6 +76,6 @@ function Example() {
 
 <FunctionAPI function={docs.exports.useFilter} links={docs.links} />
 
-### Usage
+### Filter
 
 <ClassAPI class={docs.exports.Filter} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocus.mdx b/packages/dev/s2-docs/pages/react-aria/useFocus.mdx
@@ -74,12 +74,12 @@ function Example() {
 
 <FunctionAPI function={docs.exports.useFocus} links={docs.links} />
 
-### Usage
+### FocusProps
 
-`useFocus` returns props that you should spread onto the target element:
+<InterfaceType {...docs.exports.FocusProps} />
+
+### FocusResult
 
 <InterfaceType {...docs.exports.FocusResult} />
 
-`useFocus` supports the following options and event handlers:
 
-<InterfaceType {...docs.exports.FocusProps} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx
@@ -69,12 +69,11 @@ function Example() {
 
 <FunctionAPI links={docs.links} function={docs.exports.useFocusRing} />
 
-### Usage
+### AriaFocusRingProps
 
-`useFocusRing` returns props that you should spread onto the target element:
+<InterfaceType {...docs.exports.AriaFocusRingProps} />
 
-<InterfaceType {...docs.exports.FocusRingAria} />
+### FocusRingAria
 
-`useFocusRing` supports the following options and event handlers:
+<InterfaceType {...docs.exports.FocusRingAria} />
 
-<InterfaceType {...docs.exports.AriaFocusRingProps} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx
@@ -19,10 +19,6 @@ export const section = 'Interactions';
 
 <PageDescription>{docs.exports.useFocusVisible.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useFocusVisible} links={docs.links} />
-
 ## Features
 
 `useFocusVisible` handles focus interactions for the page and determines whether keyboard focus
@@ -71,12 +67,10 @@ function Example() {
 
 <FunctionAPI function={docs.exports.useFocusVisible} links={docs.links} />
 
-### Usage
-
-`useFocusVisible` returns props that you should spread onto the target element:
+### FocusVisibleProps
 
-<InterfaceType {...docs.exports.FocusVisibleResult} />
+<InterfaceType {...docs.exports.FocusVisibleProps} />
 
-`useFocusVisible` supports the following options:
+### FocusVisibleResult
 
-<InterfaceType {...docs.exports.FocusVisibleProps} />
+<InterfaceType {...docs.exports.FocusVisibleResult} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx
@@ -90,12 +90,10 @@ function Example() {
 
 <FunctionAPI function={docs.exports.useFocusWithin} links={docs.links} />
 
-### Usage
+### FocusWithinProps
 
-`useFocusWithin` returns props that you should spread onto the target element:
+<InterfaceType {...docs.exports.FocusWithinProps} />
 
-<InterfaceType {...docs.exports.FocusWithinResult} />
-
-`useFocusWithin` supports the following event handlers and options:
+### FocusWithinResult
 
-<InterfaceType {...docs.exports.FocusWithinProps} />
+<InterfaceType {...docs.exports.FocusWithinResult} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useHover.mdx b/packages/dev/s2-docs/pages/react-aria/useHover.mdx
@@ -95,15 +95,16 @@ function Example() {
 
 <FunctionAPI function={docs.exports.useHover} links={docs.links} />
 
-### Usage
 
-`useHover` returns props that you should spread onto the target element:
+### HoverProps
 
-<InterfaceType {...docs.exports.HoverResult} />
+<InterfaceType {...docs.exports.HoverProps} />
 
-`useHover` supports the following event handlers and options:
+### HoverResult
 
-<InterfaceType {...docs.exports.HoverProps} />
+<InterfaceType {...docs.exports.HoverResult} />
+
+### HoverEvent
 
 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
@@ -72,12 +72,10 @@ function Example() {
 
 <FunctionAPI function={docs.exports.useKeyboard} links={docs.links} />
 
-### Usage
+### KeyboardProps
 
-`useKeyboard` returns props that you should spread onto the target element:
+<InterfaceType {...docs.exports.KeyboardProps} />
 
-<InterfaceType {...docs.exports.KeyboardResult} />
-
-`useKeyboard` supports the following props:
+### KeyboardResult
 
-<InterfaceType {...docs.exports.KeyboardProps} />
+<InterfaceType {...docs.exports.KeyboardResult} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useLabel.mdx b/packages/dev/s2-docs/pages/react-aria/useLabel.mdx
@@ -11,6 +11,7 @@ import {Layout} from '../../src/Layout';
 export default Layout;
 import docs from 'docs:@react-aria/label';
 import {FunctionAPI} from '../../src/FunctionAPI';
+import {InterfaceType} from '../../src/types';
 
 export const section = 'Utilities';
 
@@ -56,3 +57,11 @@ for examples of how `useLabel` is used by components. */}
 ## API
 
 <FunctionAPI function={docs.exports.useLabel} links={docs.links} />
+
+### LabelAriaProps
+
+<InterfaceType {...docs.exports.LabelAriaProps} />
+
+### LabelAria
+
+<InterfaceType {...docs.exports.LabelAria} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx b/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx
@@ -99,12 +99,10 @@ function Search(props) {
 
 <FunctionAPI function={docs.exports.useLandmark} links={docs.links} />
 
-### Usage
+### AriaLandmarkProps
 
-`useLandmark` returns props that you should spread onto the target element:
+<InterfaceType {...docs.exports.AriaLandmarkProps} />
 
-<InterfaceType {...docs.exports.LandmarkAria} />
-
-`useLandmark` supports the following options:
+### LandmarkAria
 
-<InterfaceType {...docs.exports.AriaLandmarkProps} />
+<InterfaceType {...docs.exports.LandmarkAria} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useLocale.mdx b/packages/dev/s2-docs/pages/react-aria/useLocale.mdx
@@ -49,6 +49,6 @@ function YourApp() {
 
 <FunctionAPI function={docs.exports.useLocale} links={docs.links} />
 
-## Usage
+### Locale
 
 <ClassAPI class={docs.exports.Locale} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx b/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx
@@ -95,15 +95,15 @@ function Example() {
 
 <FunctionAPI function={docs.exports.useLongPress} links={docs.links} />
 
-### Usage
+### LongPressProps
 
-`useLongPress` returns props that you should spread onto the target element:
+<InterfaceType {...docs.exports.LongPressProps} />
 
-<InterfaceType {...docs.exports.LongPressResult} />
+### LongPressResult
 
-`useLongPress` supports the following event handlers and options:
+<InterfaceType {...docs.exports.LongPressResult} />
 
-<InterfaceType {...docs.exports.LongPressProps} />
+### LongPressEvent
 
 Each of these handlers is fired with a `LongPressEvent`, 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/useMove.mdx b/packages/dev/s2-docs/pages/react-aria/useMove.mdx
diff --git a/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx b/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx
diff --git a/packages/dev/s2-docs/pages/react-aria/usePress.mdx b/packages/dev/s2-docs/pages/react-aria/usePress.mdx
diff --git a/packages/dev/s2-docs/pages/s2/Provider.mdx b/packages/dev/s2-docs/pages/s2/Provider.mdx

Original file line number	Diff line number	Diff line change
`@@ -166,7 +166,9 @@ function MyOverlay(props) {`
`166`	`166`	`}`
`167`	`167`	```
`168`	`168`
`169`		`-## Props`
	`169`	`+## API`
	`170`	`+`
	`171`	`+### PortalProvider`
`170`	`172`
`171`	`173`	`<PropTable links={docs.links} component={docs.exports.UNSAFE_PortalProvider} />`
`172`	`174`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`padding: 10px;`
`8`	`8`	`margin-right: 20px;`
`9`	`9`	`border-radius: 8px;`
`10`		`- color: var(--color-white);`
	`10`	`+ color: var(--text-color);`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`[role=textbox]:focus {`
`@@ -25,5 +25,5 @@`
`25`	`25`	`border-radius: 4px;`
`26`	`26`	`font-size: small;`
`27`	`27`	`letter-spacing: .2em;`
`28`		`- color: var(--color-white);`
	`28`	`+ color: var(--text-color);`
`29`	`29`	`}`