+
+
+
+
+
+```
diff --git a/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx b/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx
new file mode 100644
index 00000000000..1fe7623fa34
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx
@@ -0,0 +1,113 @@
+{/* Copyright 2025 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 {Layout} from '../../src/Layout';
+export default Layout;
+import {GroupedPropTable} from '../../src/PropTable';
+import {FunctionAPI} from '../../src/FunctionAPI';
+import docs from 'docs:@react-aria/interactions';
+import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
+export const section = 'Hooks';
+export const description = 'Implementing collections in React Aria';
+
+# useLongPress
+
+## API
+
+Navigation
+ +Region
+Example region with no focusable children.
+-
+ {events.map((e, i) =>
- {e} )} +
+
+
+ -
+ {events.map((e, i) =>
- {e} )} +
+ Press me!
+
+ -
+ {events.map((e, i) =>
- {e} )} +
+ {name}
+
+
+ {': '}
+
+ );
+}
\ No newline at end of file
From c76fdf656b3b917e4e19fb16eaf82c4a8feffa5b Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Thu, 23 Oct 2025 13:38:00 -0700
Subject: [PATCH 02/14] add useClipboard
---
.../s2-docs/pages/react-aria/useClipboard.mdx | 481 ++++++++++++++++++
1 file changed, 481 insertions(+)
create mode 100644 packages/dev/s2-docs/pages/react-aria/useClipboard.mdx
diff --git a/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx
new file mode 100644
index 00000000000..015c3f7b50f
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx
@@ -0,0 +1,481 @@
+{/* Copyright 2025 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 {Layout} from '../../src/Layout';
+export default Layout;
+import {GroupedPropTable} from '../../src/PropTable';
+import {FunctionAPI} from '../../src/FunctionAPI';
+import docs from 'docs:@react-aria/dnd';
+export const section = 'Hooks';
+export const description = 'Implementing collections in React Aria';
+
+# useClipboard
+
+## API
+
+
+ Hello world
+ ⌘C
+
+ );
+}
+
+function Pasteable() {
+ let [pasted, setPasted] = React.useState(null);
+ let {clipboardProps} = useClipboard({
+ async onPaste(items) {
+ let pasted = await Promise.all(
+ items
+ .filter((item) =>
+ item.kind === 'text' && item.types.has('text/plain')
+ )
+ .map((item: TextDropItem) => item.getText('text/plain'))
+ );
+ setPasted(pasted.join('\n'));
+ }
+ });
+
+ return (
+
+ {pasted || 'Paste here'}
+ ⌘V
+
+ );
+}
+
+
+
+
+```css
+[role=textbox] {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--spectrum-global-color-gray-50);
+ border: 1px solid var(--spectrum-global-color-gray-400);
+ padding: 10px;
+ margin-right: 20px;
+ border-radius: 8px;
+}
+
+[role=textbox]:focus {
+ outline: none;
+ border-color: var(--blue);
+ box-shadow: 0 0 0 1px var(--blue);
+}
+
+[role=textbox] kbd {
+ display: inline-block;
+ margin-left: 10px;
+ padding: 0 4px;
+ background: var(--spectrum-global-color-gray-100);
+ border: 1px solid var(--spectrum-global-color-gray-300);
+ border-radius: 4px;
+ font-size: small;
+ letter-spacing: .2em;
+}
+```
+
+
+
+## Copy data
+
+Data to copy can be provided in multiple formats at once. This allows the destination where the user pastes to choose the data that it understands. For example, you could serialize a complex object as JSON in a custom format for use within your own application, and also provide plain text and/or rich HTML fallbacks that can be used when a user pastes in an external application (e.g. an email message).
+
+This can be done by returning multiple keys for an item from the `getItems` function. Types can either be a standard [mime type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) for interoperability with external applications, or a custom string for use within your own app.
+
+In addition to providing items in multiple formats, you can also return multiple drag items from `getItems` to transfer multiple objects in a single copy and paste operation.
+
+This example copies two items, each of which contains representations as plain text, HTML, and a custom app-specific data format. Pasting on the target will use the custom data format to render formatted items. If you paste in an external application supporting rich text, the HTML representation will be used. Dropping in a text editor will use the plain text format.
+
+```tsx render
+"use client"
+function Copyable() {
+ let {clipboardProps} = useClipboard({
+ getItems() {
+ return [{
+ 'text/plain': 'hello world',
+ 'text/html': 'hello world',
+ 'my-app-custom-type': JSON.stringify({
+ message: 'hello world',
+ style: 'bold'
+ })
+ }, {
+ 'text/plain': 'foo bar',
+ 'text/html': 'foo bar',
+ 'my-app-custom-type': JSON.stringify({
+ message: 'foo bar',
+ style: 'italic'
+ })
+ }];
+ }
+ });
+
+ return (
+
+
+```css
+[role=textbox] {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--spectrum-global-color-gray-50);
+ border: 1px solid var(--spectrum-global-color-gray-400);
+ padding: 10px;
+ margin-right: 20px;
+ border-radius: 8px;
+}
+
+[role=textbox]:focus {
+ outline: none;
+ border-color: var(--blue);
+ box-shadow: 0 0 0 1px var(--blue);
+}
+
+[role=textbox] kbd {
+ display: inline-block;
+ margin-left: 10px;
+ padding: 0 4px;
+ background: var(--spectrum-global-color-gray-100);
+ border: 1px solid var(--spectrum-global-color-gray-300);
+ border-radius: 4px;
+ font-size: small;
+ letter-spacing: .2em;
+}
+```
+
+
+
+ );
+}
+/*- begin collapse -*/
+function Pasteable() {
+ let [pasted, setPasted] = React.useState(null);
+ let {clipboardProps} = useClipboard({
+ async onPaste(items) {
+ let pasted = await Promise.all(
+ items
+ .filter(item => item.kind === 'text' && (item.types.has('text/plain') || item.types.has('my-app-custom-type')))
+ .map(async (item: TextDropItem) => {
+ if (item.types.has('my-app-custom-type')) {
+ return JSON.parse(await item.getText('my-app-custom-type'));
+ } else {
+ return {message: await item.getText('text/plain')};
+ }
+ })
+ );
+ setPasted(pasted);
+ }
+ });
+
+ let message = ['Paste here'];
+ if (pasted) {
+ message = pasted.map(d => {
+ let message = d.message;
+ if (d.style === 'bold') {
+ message = {message};
+ } else if (d.style === 'italic') {
+ message = {message};
+ }
+ return
+
+ ⌘C
+ hello world
+ foo bar
+ {message}
;
+ });
+ }
+
+ return (
+
+
+ );
+}
+
+{message || 'Paste here'}
+ ⌘V
+
+
+ );
+}
+/*- end collapse -*/
+function Pasteable() {
+ let [pasted, setPasted] = React.useState(null);
+ let {clipboardProps} = useClipboard({
+ async onPaste(items) {
+ let pasted = await Promise.all(
+ items
+ .filter(item => item.kind === 'text' && (item.types.has('text/plain') || item.types.has('my-app-custom-type')))
+ .map(async (item: TextDropItem) => {
+ if (item.types.has('my-app-custom-type')) {
+ return JSON.parse(await item.getText('my-app-custom-type'));
+ } else {
+ return {message: await item.getText('text/plain')};
+ }
+ })
+ );
+ setPasted(pasted);
+ }
+ });
+
+ let message = ['Paste here'];
+ if (pasted) {
+ message = pasted.map(d => {
+ let message = d.message;
+ if (d.style === 'bold') {
+ message = {message};
+ } else if (d.style === 'italic') {
+ message = {message};
+ }
+ return
+
+ ⌘C
+ hello world
+ foo bar
+ {message}
;
+ });
+ }
+
+ return (
+
+
+ );
+}
+/*- begin collapse -*/
+{message || 'Paste here'}
+ ⌘V
+
+ {file ? 
: 'Paste image here'}
+
+ );
+}
+```
+
+### Directories
+
+A -
+ {files.map(f => (
+
-
+ {f.kind === 'directory' ?
: } + {f.name} +
+ ))}
+
+ {contents}
+
+ );
+}
+```
+
+
+
+
+```css
+.grid {
+ display: block;
+ width: auto;
+ height: auto;
+ min-height: 80px;
+}
+
+.grid ul {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, 100px);
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ gap: 20px;
+}
+
+.grid li {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.grid li svg {
+ flex: 0 0 auto;
+}
+
+.grid li span {
+ flex: 1;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+```
+
+
+
+## Disabling copy and paste
+
+If you need to temporarily disable copying and pasting, you can pass the `isDisabled` option to `useClipboard`. This will prevent copying and pasting on the element until it is re-enabled.
+
+```tsx example
+import type {TextDropItem} from '@react-aria/dnd';
+import {useClipboard} from '@react-aria/dnd';
+
+function Copyable() {
+ let {clipboardProps} = useClipboard({
+ getItems() {
+ return [{
+ 'text/plain': 'Hello world'
+ }];
+ },
+ /*- begin highlight -*/
+ isDisabled: true
+ /*- end highlight -*/
+ });
+
+ return (
+
+
+```css
+.grid {
+ display: block;
+ width: auto;
+ height: auto;
+ min-height: 80px;
+}
+
+.grid ul {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, 100px);
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ gap: 20px;
+}
+
+.grid li {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.grid li svg {
+ flex: 0 0 auto;
+}
+
+.grid li span {
+ flex: 1;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+```
+
+
+ Hello world
+ ⌘C
+
+ );
+}
+
+function Pasteable() {
+ let [pasted, setPasted] = React.useState(null);
+ let {clipboardProps} = useClipboard({
+ async onPaste(items) {
+ let pasted = await Promise.all(
+ items
+ .filter((item) =>
+ item.kind === 'text' && item.types.has('text/plain')
+ )
+ .map((item: TextDropItem) => item.getText('text/plain'))
+ );
+ setPasted(pasted.join('\n'));
+ },
+ /*- begin highlight -*/
+ isDisabled: true
+ /*- end highlight -*/
+ });
+
+ return (
+
+ {pasted || 'Paste here'}
+ ⌘V
+
+ );
+}
+
+
+ Drag me
+
+ );
+}
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/DropTarget.tsx b/packages/dev/s2-docs/pages/react-aria/DropTarget.tsx
new file mode 100644
index 00000000000..3927ea1e42a
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/DropTarget.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import React from 'react';
+import type {TextDropItem} from '@react-aria/dnd';
+import {useDrop} from '@react-aria/dnd';
+
+export function DropTarget() {
+ let [dropped, setDropped] = React.useState(null);
+ let ref = React.useRef(null);
+ let {dropProps, isDropTarget} = useDrop({
+ ref,
+ async onDrop(e) {
+ let items = await Promise.all(
+ e.items
+ .filter(item => item.kind === 'text' && (item.types.has('text/plain') || item.types.has('my-app-custom-type')))
+ .map(async (item: TextDropItem) => {
+ if (item.types.has('my-app-custom-type')) {
+ return JSON.parse(await item.getText('my-app-custom-type'));
+ } else {
+ return {message: await item.getText('text/plain')};
+ }
+ })
+ );
+ setDropped(items);
+ }
+ });
+
+ let message: string[] = ['Drop here'];
+ if (dropped) {
+ message = dropped.map(d => {
+ let message = d.message;
+ if (d.style === 'bold') {
+ message = {message};
+ } else if (d.style === 'italic') {
+ message = {message};
+ }
+ return {message}
;
+ });
+ }
+
+ return (
+
+ {message}
+
+ );
+}
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx
new file mode 100644
index 00000000000..ff00514e71d
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx
@@ -0,0 +1,47 @@
+{/* Copyright 2025 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 {Layout} from '../../src/Layout';
+export default Layout;
+import {GroupedPropTable} from '../../src/PropTable';
+import {FunctionAPI} from '../../src/FunctionAPI';
+import docs from 'docs:@react-aria/focus';
+
+export const section = 'Focus';
+export const description = 'Implementing collections in React Aria';
+
+# FocusRing
+
+## Introduction
+
+`FocusRing` is a utility component that can be used to apply a CSS class when an element has keyboard focus.
+This helps keyboard users determine which element on a page or in an application has keyboard focus as they
+navigate around. Focus rings are only visible when interacting with a keyboard so as not to distract mouse
+and touch screen users. When we are unable to detect if the user is using a mouse or touch screen, such as
+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
+
+
+
+ {props.children}
+
+
+ );
+}
+
+function ToolbarButton(props) {
+ let focusManager = useFocusManager();
+ let onKeyDown = (e) => {
+ switch (e.key) {
+ case 'ArrowRight':
+ focusManager.focusNext({wrap: true});
+ break;
+ case 'ArrowLeft':
+ focusManager.focusPrevious({wrap: true});
+ break;
+ }
+ };
+
+ return (
+
+ );
+}
+
+
+ Toasts are portalled here!
+
+
+ );
+}
+
+I am hidden
+```
+
+## Gotchas
+
+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
+
+```
+
diff --git a/packages/dev/s2-docs/pages/react-aria/hooks.css b/packages/dev/s2-docs/pages/react-aria/hooks.css
new file mode 100644
index 00000000000..10903313525
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/hooks.css
@@ -0,0 +1,5 @@
+@import '../../../../../starters/docs/src/theme.css';
+
+:root {
+ --tint: var(--blue)
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx b/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx
new file mode 100644
index 00000000000..1c35964f9d6
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx
@@ -0,0 +1,70 @@
+{/* Copyright 2025 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 {Layout} from '../../src/Layout';
+export default Layout;
+import docs from 'docs:@react-aria/utils';
+import {FunctionAPI} from '../../src/FunctionAPI';
+
+export const section = 'Utilities';
+export const description = 'Implementing collections in React Aria';
+
+
+# mergeProps
+
+## API
+
+
-
-
-```css
-[role=textbox] {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- background: var(--spectrum-global-color-gray-50);
- border: 1px solid var(--spectrum-global-color-gray-400);
- padding: 10px;
- margin-right: 20px;
- border-radius: 8px;
-}
-
-[role=textbox]:focus {
- outline: none;
- border-color: var(--blue);
- box-shadow: 0 0 0 1px var(--blue);
-}
-
-[role=textbox] kbd {
- display: inline-block;
- margin-left: 10px;
- padding: 0 4px;
- background: var(--spectrum-global-color-gray-100);
- border: 1px solid var(--spectrum-global-color-gray-300);
- border-radius: 4px;
- font-size: small;
- letter-spacing: .2em;
-}
+
-
## Copy data
Data to copy can be provided in multiple formats at once. This allows the destination where the user pastes to choose the data that it understands. For example, you could serialize a complex object as JSON in a custom format for use within your own application, and also provide plain text and/or rich HTML fallbacks that can be used when a user pastes in an external application (e.g. an email message).
@@ -128,6 +97,9 @@ This example copies two items, each of which contains representations as plain t
```tsx render
"use client"
+import React from 'react';
+import {useClipboard} from '@react-aria/dnd';
+
function Copyable() {
let {clipboardProps} = useClipboard({
getItems() {
@@ -159,7 +131,8 @@ function Copyable() {
);
}
-/*- begin collapse -*/
+
+///- begin collapse -///
function Pasteable() {
let [pasted, setPasted] = React.useState(null);
let {clipboardProps} = useClipboard({
@@ -200,9 +173,11 @@ function Pasteable() {
);
}
-
-
-```css
-[role=textbox] {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- background: var(--spectrum-global-color-gray-50);
- border: 1px solid var(--spectrum-global-color-gray-400);
- padding: 10px;
- margin-right: 20px;
- border-radius: 8px;
-}
-
-[role=textbox]:focus {
- outline: none;
- border-color: var(--blue);
- box-shadow: 0 0 0 1px var(--blue);
-}
-
-[role=textbox] kbd {
- display: inline-block;
- margin-left: 10px;
- padding: 0 4px;
- background: var(--spectrum-global-color-gray-100);
- border: 1px solid var(--spectrum-global-color-gray-300);
- border-radius: 4px;
- font-size: small;
- letter-spacing: .2em;
-}
+
+
```
-
+
+///- end collapse -///
```
## Paste data
@@ -215,13 +190,16 @@ function Pasteable() {
### Text
-A
+
+///- end collapse -///
```
-
### Files
-
-A
{file ? : 'Paste image here'}
@@ -326,19 +305,18 @@ function Pasteable() {
);
}
```
-
### Directories
-
-A
);
}
+
///- begin collapse -///
{contents}
@@ -381,52 +357,11 @@ function Pasteable() {
);
}
```
-
-
+
+
+
+
+```
diff --git a/packages/dev/s2-docs/pages/react-aria/useDrag.mdx b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx
new file mode 100644
index 00000000000..2e84bfda2f0
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx
@@ -0,0 +1,306 @@
+{/* Copyright 2025 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 {Layout} from '../../src/Layout';
+export default Layout;
+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 description = 'Implementing collections in React Aria';
+
+# useDrag
+
+## API
+
+Enter on a draggable element to enter drag and drop mode. Then, they can press Tab to navigate between drop targets, and Enter to drop or Escape to cancel. Touch screen reader users can also drag by double tapping to activate drag and drop mode, swiping between drop targets, and double tapping again to drop.
+
+See the [drag and drop introduction](dnd.html) to learn more.
+
+## Example
+
+This example shows how to make a simple draggable element that provides data as plain text. In order to support keyboard and screen reader drag interactions, the element must be focusable and have an ARIA role (in this case, `button`). While it is being dragged, it is displayed with a dimmed appearance by applying an additional CSS class.
+
+```tsx render files={["packages/dev/s2-docs/pages/react-aria/useDragExample.css", "packages/dev/s2-docs/pages/react-aria/DropTarget.tsx"]}
+"use client";
+import {useDrag} from '@react-aria/dnd';
+import {DropTarget} from './DropTarget.tsx';
+import './useDragExample.css';
+
+function Draggable() {
+ let {dragProps, isDragging} = useDrag({
+ getItems() {
+ return [{
+ 'text/plain': 'hello world'
+ }];
+ }
+ });
+
+ return (
+ ` component. This accepts a function as a child which receives the dragged data that was returned by `getItems`, and returns a rendered preview for those items. The `DragPreview` is linked with `useDrag` via a ref, passed to the `preview` property. The `DragPreview` should be placed in the component hierarchy appropriately, so that it receives any React context or inherited styles that it needs to render correctly.
+This example renders a custom drag preview which shows the text of the first drag item.
+
+```tsx render
+"use client";
+import React from 'react';
+import {useDrag} from '@react-aria/dnd';
+import {DropTarget} from './DropTarget.tsx';
+import {DragPreview} from '@react-aria/dnd';
+
+function Draggable() {
+ let preview = React.useRef(null);
+ let {dragProps, isDragging} = useDrag({
+ preview,
+ getItems() {
+ return [{
+ 'text/plain': 'hello world'
+ }];
+ }
+ });
+ return (
+ <>
+
+ {items =>
+ {/*- end highlight -*/}
+
+ );
+}
+Option or Alt to switch from move to copy.
+The `onDragEnd` event allows the drag source to respond when a drag that it initiated ends, either because it was dropped or because it was canceled by the user. The `dropOperation` property of the event object indicates the operation that was performed. For example, when data is moved, the UI could be updated to reflect this change by removing the original dragged element.
+This example removes the draggable element from the UI when a move operation is completed. Try holding the Option or Alt keys to change the operation to copy, and see how the behavior changes.
+```tsx render
+"use client"
+import React from 'react';
+import {useDrag} from '@react-aria/dnd';
+import {DropTarget} from './DropTarget.tsx';
+
+function Draggable() {
+ let [moved, setMoved] = React.useState(false);
+ let {dragProps, isDragging} = useDrag({
+ getItems() {
+ return [{
+ 'text/plain': 'hello world'
+ }];
+ },
+ /*- begin highlight -*/
+ onDragEnd(e) {
+ if (e.dropOperation === 'move') {
+ setMoved(true);
+ }
+ }
+ /*- end highlight -*/
+ });
+ if (moved) {
+ return null;
+ }
+ // ...
+ ///- begin collapse -///
+ return (
+ Enter key), or if the element is not focusable, an explicit drag affordance can be added. This acts as a button that keyboard and screen reader users can use to activate drag and drop.
+When the `hasDragButton` option is enabled, the keyboard interactions are moved from the returned `dragProps` to the `dragButtonProps` so that they can be applied to a separate element, while the mouse and touch dragging interactions remain in `dragProps`.
+
+```tsx render
+"use client";
+import React from 'react';
+import {useDrag} from '@react-aria/dnd';
+import {useButton} from '@react-aria/button';
+import {DropTarget} from './DropTarget.tsx';
+
+function Draggable() {
+ let {dragProps, dragButtonProps, isDragging} = useDrag({
+ /*- begin highlight -*/
+ hasDragButton: true,
+ /*- end highlight -*/
+ getItems() {
+ return [{
+ 'text/plain': 'hello world'
+ }];
+ }
+ });
+ /*- begin highlight -*/
+ let ref = React.useRef(null);
+ let {buttonProps} = useButton({...dragButtonProps, elementType: 'div'}, ref);
+ /*- end highlight -*/
+ return (
+ Enter on a draggable element to enter drag and drop mode. Then, they can press Tab to navigate between drop targets, and Enter to drop or Escape to cancel. Touch screen reader users can also drag by double tapping to activate drag and drop mode, swiping between drop targets, and double tapping again to drop.
+
+See the [drag and drop introduction](dnd.html) to learn more.
+
+## Example
+
+This example shows how to make a simple drop target that accepts plain text data. In order to support keyboard and screen reader drag interactions, the element must be focusable and have an ARIA role (in this case, `button`). While a drag is hovered over it, a blue outline is rendered by applying an additional CSS class.
+
+```tsx render files={["packages/dev/s2-docs/pages/react-aria/useDragExample.css", "packages/dev/s2-docs/pages/react-aria/Draggable.tsx"]}
+'use client';
+import React from 'react';
+import type {TextDropItem} from '@react-aria/dnd';
+import {useDrop} from '@react-aria/dnd';
+import {Draggable} from './Draggable.tsx';
+import './useDragExample.css';
+
+function DropTarget() {
+ let [dropped, setDropped] = React.useState(null);
+ let ref = React.useRef(null);
+ let {dropProps, isDropTarget} = useDrop({
+ ref,
+ async onDrop(e) {
+ let items = await Promise.all(
+ e.items
+ .filter(item => item.kind === 'text' && item.types.has('text/plain'))
+ .map((item: TextDropItem) => item.getText('text/plain'))
+ );
+ setDropped(items.join('\n'));
+ }
+ });
+
+ return (
+ Option or Alt to switch from move to copy.
+The drag source can specify which drop operations are allowed for the dragged data (see the [useDrag docs](useDrag.html) for how to customize this). By default, the first allowed operation is allowed by drop targets, meaning that the drop target accepts data of any type and operation.
+
+### getDropOperation
+
+The `getDropOperation` function passed to `useDrop` can be used to provide appropriate feedback to the user when a drag hovers over the drop target. If a drop target only supports data of specific types (e.g. images, videos, text, etc.), then it should implement `getDropOperation` and return `'cancel'` for types that aren't supported. This will prevent visual feedback indicating that the drop target accepts the dragged data when this is not true.
+When the data is supported, either return one of the drop operations in `allowedOperation` or a specific drop operation if only that drop operation is supported. If the returned operation is not in `allowedOperations`, then the drop target will act as if `'cancel'` was returned.
+In the below example, the drop target only supports dropping PNG images. If a PNG is dragged over the target, it will be highlighted and the operating system displays a copy cursor. If another type is dragged over the target, then there is no visual feedback, indicating that a drop is not accepted there. If the user holds a modifier key such as Control while dragging over the drop target in order to change the drop operation, then the drop target does not accept the drop.
+
+```tsx render
+'use client';
+import React from 'react';
+import {useDrop} from '@react-aria/dnd';
+function DropTarget() {
+ let [file, setFile] = React.useState(null);
+ let ref = React.useRef(null);
+ let {dropProps, isDropTarget} = useDrop({
+ ref,
+ /*- begin highlight -*/
+ getDropOperation(types, allowedOperations) {
+ return types.has('image/png') ? 'copy' : 'cancel';
+ },
+ /*- end highlight -*/
+ async onDrop(e) {
+ let item = e.items.find(item => item.kind === 'file' && item.type === 'image/png') as FileDropItem;
+ if (item) {
+ setFile(URL.createObjectURL(await item.getFile()));
+ }
+ }
+ });
+ // ...
+///- begin collapse -///
+ return (
+
);
}
-///- end collapse -///
+///- end collapse -///
function Pasteable() {
let [pasted, setPasted] = React.useState(null);
let {clipboardProps} = useClipboard({
@@ -272,6 +271,7 @@ function Pasteable() {
-
-
-```css
-.grid {
- display: block;
- width: auto;
- height: auto;
- min-height: 80px;
-}
-
-.grid ul {
- display: grid;
- grid-template-columns: repeat(auto-fit, 100px);
- list-style: none;
- margin: 0;
- padding: 0;
- gap: 20px;
-}
-
-.grid li {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.grid li svg {
- flex: 0 0 auto;
-}
-
-.grid li span {
- flex: 1;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-```
-
-
-
## Disabling copy and paste
-
If you need to temporarily disable copying and pasting, you can pass the `isDisabled` option to `useClipboard`. This will prevent copying and pasting on the element until it is re-enabled.
-
-```tsx example
+```tsx render
+"use client";
+import React from 'react';
import type {TextDropItem} from '@react-aria/dnd';
import {useClipboard} from '@react-aria/dnd';
@@ -441,7 +376,6 @@ function Copyable() {
isDisabled: true
/*- end highlight -*/
});
-
return (
-
-```css
-.grid {
- display: block;
- width: auto;
- height: auto;
- min-height: 80px;
-}
-
-.grid ul {
- display: grid;
- grid-template-columns: repeat(auto-fit, 100px);
- list-style: none;
- margin: 0;
- padding: 0;
- gap: 20px;
-}
-
-.grid li {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.grid li svg {
- flex: 0 0 auto;
-}
-
-.grid li span {
- flex: 1;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-```
-
-
Hello world
@@ -449,7 +383,6 @@ function Copyable() {
);
}
-
function Pasteable() {
let [pasted, setPasted] = React.useState(null);
let {clipboardProps} = useClipboard({
@@ -467,7 +400,6 @@ function Pasteable() {
isDisabled: true
/*- end highlight -*/
});
-
return (
{pasted || 'Paste here'}
@@ -475,7 +407,8 @@ function Pasteable() {
);
}
-
-
+
+```
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/useClipboardExample.css b/packages/dev/s2-docs/pages/react-aria/useClipboardExample.css
new file mode 100644
index 00000000000..971bb696cda
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/useClipboardExample.css
@@ -0,0 +1,31 @@
+@import './hooks.css';
+
+[role=textbox] {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--background-color);
+ border: 1px solid var(--border-color);
+ padding: 10px;
+ margin-right: 20px;
+ border-radius: 8px;
+ color: var(--color-white);
+}
+
+[role=textbox]:focus {
+ outline: none;
+ border-color: var(--focus-ring-color);
+ box-shadow: 0 0 0 1px var(--focus-ring-color);
+}
+
+[role=textbox] kbd {
+ display: inline-block;
+ margin-left: 10px;
+ padding: 0 4px;
+ background: var(--background-color);
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ font-size: small;
+ letter-spacing: .2em;
+ color: var(--color-white);
+}
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/useClipboardGrid.css b/packages/dev/s2-docs/pages/react-aria/useClipboardGrid.css
new file mode 100644
index 00000000000..9d8a2e594ab
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/useClipboardGrid.css
@@ -0,0 +1,33 @@
+.grid {
+ display: block;
+ width: auto;
+ height: auto;
+ min-height: 80px;
+}
+
+.grid ul {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, 100px);
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ gap: 20px;
+}
+
+.grid li {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.grid li svg {
+ flex: 0 0 auto;
+}
+
+.grid li span {
+ flex: 1;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
diff --git a/packages/dev/s2-docs/pages/react-aria/useCollator.mdx b/packages/dev/s2-docs/pages/react-aria/useCollator.mdx
new file mode 100644
index 00000000000..9d71e8b06ae
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/useCollator.mdx
@@ -0,0 +1,75 @@
+{/* Copyright 2025 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 {Layout} from '../../src/Layout';
+export default Layout;
+import {GroupedPropTable} from '../../src/PropTable';
+import {FunctionAPI} from '../../src/FunctionAPI';
+import docs from 'docs:@react-aria/i18n';
+
+export const section = 'Internationalization';
+export const description = 'Implementing collections in React Aria';
+
+
+# useCollator
+
+## Introduction
+
+`useCollator` wraps a builtin browser [Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator)
+object to provide a React Hook that integrates with the i18n system in React Aria. It handles string comparison according to the current locale,
+updating when the locale changes, and caching of collators for performance. See the
+[Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator) docs for
+information.
+
+## API
+
+
+
+ setFirst(e.target.value)} />
+
+ setSecond(e.target.value)} />
+
+ + {result === 0 + ? 'The strings are the same' + : result < 0 + ? 'First comes before second' + : 'Second comes before first' + } +
+ + ); +} +``` diff --git a/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx b/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx new file mode 100644 index 00000000000..abb2daa8e51 --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx @@ -0,0 +1,58 @@ +{/* Copyright 2025 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 {Layout} from '../../src/Layout'; +export default Layout; +import {GroupedPropTable} from '../../src/PropTable'; +import {FunctionAPI} from '../../src/FunctionAPI'; +import docs from 'docs:@react-aria/i18n'; + +export const section = 'Internationalization'; +export const description = 'Implementing collections in React Aria'; + +# useDateFormatter + +## Introduction + +`useDateFormatter` wraps a builtin browser [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) +object to provide a React Hook that integrates with the i18n system in React Aria. It handles formatting dates for the current locale, +updating when the locale changes, and caching of date formatters for performance. See the +[Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) docs for +information on formatting options. + +## API + +{formatter.format(new Date())}
+ ); +} + +<> +
+ Drag me
+
+ );
+}
+
+
+
+```
+## Drag data
+Data for a draggable element can be provided in multiple formats at once. This allows drop targets to choose data in a format that they understand. For example, you could serialize a complex object as JSON in a custom format for use within your own application, and also provide plain text and/or rich HTML fallbacks that can be used when a user drops data in an external application (e.g. an email message).
+This can be done by returning multiple keys for an item from the `getItems` function. Types can either be a standard [mime type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) for interoperability with external applications, or a custom string for use within your own app.
+In addition to providing items in multiple formats, you can also return multiple drag items from `getItems` to transfer multiple objects in a single drag operation.
+This example drags two items, each of which contains representations as plain text, HTML, and a custom app-specific data format. Dropping on the drop targets in this page will use the custom data format to render formatted items. If you drop in an external application supporting rich text, the HTML representation will be used. Dropping in a text editor will use the plain text format.
+
+```tsx render
+"use client";
+import {useDrag} from '@react-aria/dnd';
+import {DropTarget} from './DropTarget.tsx';
+
+function Draggable() {
+ let {dragProps, isDragging} = useDrag({
+ getItems() {
+ return [{
+ 'text/plain': 'hello world',
+ 'text/html': 'hello world',
+ 'my-app-custom-type': JSON.stringify({
+ message: 'hello world',
+ style: 'bold'
+ })
+ }, {
+ 'text/plain': 'foo bar',
+ 'text/html': 'foo bar',
+ 'my-app-custom-type': JSON.stringify({
+ message: 'foo bar',
+ style: 'italic'
+ })
+ }];
+ }
+ });
+ ///- begin collapse -///
+ return (
+
+ Drag me
+
+ );
+ ///- end collapse -///
+}
+///- begin collapse -///
+
+
+///- end collapse -///
+```
+
+## Drag previews
+By default, the drag preview shown under the user's pointer or finger is a copy of the original element that started the drag. A custom preview can be rendered using the `
+ Drag me
+
+ {/*- begin highlight -*/}
+ {items[0]['text/plain']}
}
+
+
+```
+
+## Drop operations
+A
+ Drag me
+
+ );
+ ///- end collapse -///
+}
+///- begin collapse -///
+
+
+///- end collapse -///
+```
+
+The drag source can also control which drop operations are allowed for the data. For example, if moving data is not allowed, and only copying is supported, the `getAllowedDropOperations` function could be implemented to indicate this. When you drag the element below, the cursor now shows the copy affordance by default, and pressing a modifier to switch drop operations results in the drop being canceled.
+
+```tsx render
+"use client";
+import {useDrag} from '@react-aria/dnd';
+import {DropTarget} from './DropTarget.tsx';
+
+function Draggable() {
+ let {dragProps, isDragging} = useDrag({
+ getItems() {
+ return [{
+ 'text/plain': 'hello world'
+ }];
+ },
+ /*- begin highlight -*/
+ getAllowedDropOperations() {
+ return ['copy'];
+ }
+ /*- end highlight -*/
+ });
+ // ...
+ ///- begin collapse -///
+ return (
+
+ Drag me
+
+ );
+ ///- end collapse -///
+}
+///- begin collapse -///
+
+
+///- end collapse -///
+```
+
+## Drag button
+
+In cases where a draggable element has other interactions that conflict with accessible drag and drop (e.g.
+ {/*- begin highlight -*/}
+ ≡
+ {/*- end highlight -*/}
+ Some text
+
+
+ );
+}
+
+
+
+```
+## Disabling dragging
+If you need to temporarily disable dragging, you can pass the `isDisabled` option to `useDrag`. This will prevent dragging an element until it is re-enabled.
+
+```tsx render
+"use client";
+import {useDrag} from '@react-aria/dnd';
+function Draggable() {
+ let {dragProps, isDragging} = useDrag({
+ getItems() {
+ return [{
+ 'text/plain': 'hello world'
+ }];
+ },
+ /*- begin highlight -*/
+ isDisabled: true
+ /*- end highlight -*/
+ });
+ return (
+
+ Drag me
+
+ );
+}
+
+ {dropped || 'Drop here'}
+
+ );
+}
+
+
+
+```
+## Drop data
+`useDrop` allows users to drop one or more **drag items**, each of which contains data to be transferred from the drag source to drop target. There are three kinds of drag items:
+* `text` – represents data inline as a string in one or more formats
+* `file` – references a file on the user's device
+* `directory` – references the contents of a directory
+### Text
+A
+ {dropped || 'Drop here'}
+
+ );
+ ///- end collapse -///
+}
+///- begin collapse -///
+
+
+///- end collapse -///
+```
+### Files
+A
+ {file ? : 'Drop image here'}
+
+ );
+}
+```
+### Directories
+A -
+ {files.map(f => (
+
-
+ {f.kind === 'directory' ?
: } + {f.name} +
+ ))}
+
+ {contents}
+
+ );
+}
+```
+
+## Drop operations
+
+A
+ {file ? : 'Drop image here'}
+
+ );
+///- end collapse -///
+}
+```
+### onDrop
+The `onDrop` event also includes the `dropOperation`. This can be used to perform different actions accordingly, for example, when communicating with a backend API.
+```tsx
+function DropTarget(props) {
+ let ref = React.useRef(null);
+ let {dropProps, isDropTarget} = useDrop({
+ ref,
+ async onDrop(e) {
+ let item = e.items.find(item => item.kind === 'text' && item.types.has('my-app-file')) as TextDropItem;
+ if (!item) {
+ return;
+ }
+ let data = JSON.parse(await item.getText('my-app-file'));
+ /*- begin highlight -*/
+ switch (e.dropOperation) {
+ case 'move':
+ MyAppFileService.move(data.filePath, props.filePath);
+ break;
+ case 'copy':
+ MyAppFileService.copy(data.filePath, props.filePath);
+ break;
+ case 'link':
+ MyAppFileService.link(data.filePath, props.filePath);
+ break;
+ }
+ /*- end highlight -*/
+ }
+ });
+ // ...
+}
+```
+## Events
+
+Drop targets receive a number of events during a drag session. These are:
+-
+ {events.map((e, i) =>
- {e} )} +
+
+```
+## Disabling dropping
+
+If you need to temporarily disable dropping, you can pass the `isDisabled` option to `useDrop`. This will prevent the drop target from accepting any drops until it is re-enabled.
+
+```tsx render
+'use client';
+import React from 'react';
+import type {TextDropItem} from '@react-aria/dnd';
+import {useDrop} from '@react-aria/dnd';
+import {Draggable} from './Draggable.tsx';
+
+function DropTarget() {
+ let [dropped, setDropped] = React.useState(null);
+ let ref = React.useRef(null);
+ let {dropProps, isDropTarget} = useDrop({
+ ref,
+ async onDrop(e) {
+ let items = await Promise.all(
+ e.items
+ .filter(item => item.kind === 'text' && item.types.has('text/plain'))
+ .map((item: TextDropItem) => item.getText('text/plain'))
+ );
+ setDropped(items.join('\n'));
+ },
+ /*- begin highlight -*/
+ isDisabled: true
+ /*- end highlight -*/
+ });
+ return (
+
+ {dropped || 'Drop here'}
+
+ );
+}
+
+
+```
\ 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
new file mode 100644
index 00000000000..f4a127bf099
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/useField.mdx
@@ -0,0 +1,67 @@
+{/* Copyright 2025 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 {Layout} from '../../src/Layout';
+export default Layout;
+import docs from 'docs:@react-aria/label';
+import {FunctionAPI} from '../../src/FunctionAPI';
+
+export const section = 'Utilities';
+export const description = 'Implementing collections in React Aria';
+
+# useField
+
+## API
+
+{`Drop here`}
];
if (dropped) {
- message = dropped.map(d => {
- let message = d.message;
+ message = dropped.map((d, index) => {
+ let m = d.message;
if (d.style === 'bold') {
- message = {message};
+ message = [{m}];
} else if (d.style === 'italic') {
- message = {message};
+ message = [{m}];
}
- return {message}
;
+ return {message}
;
});
}
diff --git a/packages/dev/s2-docs/pages/react-aria/MyToastRegion.tsx b/packages/dev/s2-docs/pages/react-aria/MyToastRegion.tsx
index 7f3ccc9c865..3e5e733fe74 100644
--- a/packages/dev/s2-docs/pages/react-aria/MyToastRegion.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/MyToastRegion.tsx
@@ -8,7 +8,7 @@ interface MyToastContent {
description?: string
}
-export function MyToastRegion({queue}) {
+export function MyToastRegion({queue}: {queue: ToastQueue
- {name}
-
-
- {': '}
-
+
+ {name}
+
+
+ {': '}
+
);
-}
\ No newline at end of file
+}
From 844f2a5eae8f819691aa836fa42c16c32d4129aa Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 28 Oct 2025 16:47:17 -0700
Subject: [PATCH 11/14] actually fix lint
---
packages/dev/s2-docs/src/FunctionAPI.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/dev/s2-docs/src/FunctionAPI.tsx b/packages/dev/s2-docs/src/FunctionAPI.tsx
index 4bbe132fb92..e6a7e272364 100644
--- a/packages/dev/s2-docs/src/FunctionAPI.tsx
+++ b/packages/dev/s2-docs/src/FunctionAPI.tsx
@@ -10,9 +10,9 @@
* governing permissions and limitations under the License.
*/
+import {styles as codeStyles} from './Code';
import {Indent, JoinList, setLinks, Type, TypeParameters} from './types';
import React from 'react';
-import {styles as codeStyles} from './Code';
export function FunctionAPI({function: func, links}) {
let {name, parameters, return: returnType, typeParameters} = func;
From 8fff5ce7c0e360fdde207c31b5a235ce34caa2e1 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 28 Oct 2025 16:47:31 -0700
Subject: [PATCH 12/14] remove console log
---
packages/dev/s2-docs/src/ClassAPI.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/packages/dev/s2-docs/src/ClassAPI.tsx b/packages/dev/s2-docs/src/ClassAPI.tsx
index 457b50d39f1..8d837a3e283 100644
--- a/packages/dev/s2-docs/src/ClassAPI.tsx
+++ b/packages/dev/s2-docs/src/ClassAPI.tsx
@@ -7,7 +7,6 @@ interface ClassAPIProps {
}
export function ClassAPI({class: c, links}: ClassAPIProps) {
- console.log('c', c);
setLinks(links);
return (