fix examples in dnd

Author: yihuiliao

packages/dev/s2-docs/pages/react-aria/DropTarget.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, {JSX} from 'react';
+import React, {JSX, ReactNode} from 'react';
 import type {TextDropItem} from '@react-aria/dnd';
 import {useDrop} from '@react-aria/dnd';
 
@@ -18,7 +18,7 @@ export function DropTarget() {
       let items = await Promise.all(
         (e.items as TextDropItem[])
           .filter(item => item.kind === 'text' && (item.types.has('text/plain') || item.types.has('my-app-custom-type')))
-          .map(async item => {
+          .map(async (item: TextDropItem) => {
             if (item.types.has('my-app-custom-type')) {
               return JSON.parse(await item.getText('my-app-custom-type'));
             } else {
@@ -30,16 +30,16 @@ export function DropTarget() {
     }
   });
 
-  let message: JSX.Element[] = [<div>{`Drop here`}</div>];
+  let message: ReactNode = <div key="drop here">'Drop here'</div>;
   if (dropped) {
     message = dropped.map((d, index) => {
-      let m = d.message;
+      let m: ReactNode = d.message;
       if (d.style === 'bold') {
-        message = [<strong>{m}</strong>];
+        m = <strong key={index}>{m}</strong>;
       } else if (d.style === 'italic') {
-        message = [<em>{m}</em>];
+        m = <em key={index}>{m}</em>;
       }
-      return <div key={index}>{message}</div>;
+      return <div key={index}>{m}</div>;
     });
   }
 

packages/dev/s2-docs/pages/react-aria/useDrag.mdx

@@ -21,8 +21,6 @@ export const section = 'Interactions';
 
 ## 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.
-
 React Aria supports traditional mouse and touch based drag and drop, but also implements keyboard and screen reader friendly interactions. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to navigate between drop targets, and <Keyboard>Enter</Keyboard> to drop or <Keyboard>Escape</Keyboard> 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.
@@ -36,6 +34,7 @@ This example shows how to make a simple draggable element that provides data as
 import {useDrag} from '@react-aria/dnd';
 import {DropTarget} from './DropTarget.tsx';
 import './useDragExample.css';
+import 'vanilla-starter/theme.css';
 
 function Draggable() {
   let {dragProps, isDragging} = useDrag({
@@ -151,9 +150,11 @@ A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.D
 * `copy` – indicates that the dragged data will be copied to the target destination.
 * `link` – indicates that there will be a relationship established between the source and target locations.
 * `cancel` – indicates that the drag and drop operation will be canceled, resulting in no changes made to the source or target.
+
 Many operating systems display these in the form of a cursor change, e.g. a plus sign to indicate a copy operation. The user may also be able to use a modifier key to choose which drop operation to perform, such as <Keyboard>Option</Keyboard> or <Keyboard>Alt</Keyboard> 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 <Keyboard>Option</Keyboard> or <Keyboard>Alt</Keyboard> keys to change the operation to copy, and see how the behavior changes.
+
 ```tsx render
 "use client"
 import React from 'react';

packages/dev/s2-docs/pages/react-aria/useDrop.mdx

@@ -22,8 +22,6 @@ export const section = 'Interactions';
 
 ## 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.
-
 React Aria supports traditional mouse and touch based drag and drop, but also implements keyboard and screen reader friendly interactions. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to navigate between drop targets, and <Keyboard>Enter</Keyboard> to drop or <Keyboard>Escape</Keyboard> 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.
@@ -39,6 +37,7 @@ import type {TextDropItem} from '@react-aria/dnd';
 import {useDrop} from '@react-aria/dnd';
 import {Draggable} from './Draggable.tsx';
 import './useDragExample.css';
+import 'vanilla-starter/theme.css';
 
 function DropTarget() {
   let [dropped, setDropped] = React.useState(null);
@@ -74,6 +73,7 @@ function DropTarget() {
 * `directory` – references the contents of a directory
 ### Text
 A <TypeLink links={sharedDocs.links} type={sharedDocs.exports.TextDropItem} /> represents textual data in one or more different formats. These may be either standard [mime types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) or custom app-specific formats. Representing data in multiple formats allows drop targets both within and outside an application to choose data in a format that they understand. For example, a complex object may be serialized in a custom format for use within an application, with fallbacks in plain text and/or rich HTML that can be used when a user drops data from an external application.
+
 The example below finds the first available item that includes a custom app-specific type. The same draggable component as used in the above example is used here, but rather than displaying the plain text representation, the custom format is used instead.
 
 ```tsx render
@@ -114,8 +114,8 @@ function DropTarget() {
 ```
 ### Files
 A <TypeLink links={sharedDocs.links} type={sharedDocs.exports.FileDropItem} /> references a file on the user's device. It includes the name and mime type of the file, and methods to read the contents as plain text, or retrieve a native [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object which can be attached to form data for uploading.
-This example accepts JPEG and PNG image files, and renders them by creating a local [object URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL).
 
+This example accepts JPEG and PNG image files, and renders them by creating a local [object URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL).
 ```tsx render
 'use client';
 import React from 'react';
@@ -194,7 +194,7 @@ function DropTarget() {
     );
   }
   return (
-    <div {...dropProps} role="button" tabIndex={0} ref={ref} className={`droppable grid ${isDropTarget ? 'target' : ''}`}>
+    <div {...dropProps} role="button" tabIndex={0} ref={ref} className={`droppable grid ${isDropTarget ? 'target' : ''}`} style={{overflow: 'auto'}}>
       {contents}
     </div>
   );
@@ -208,6 +208,7 @@ A <TypeLink links={sharedDocs.links} type={sharedDocs.exports.DropOperation} />
 * `copy` – indicates that the dragged data will be copied to the target destination.
 * `link` – indicates that there will be a relationship established between the source and target locations.
 * `cancel` – indicates that the drag and drop operation will be canceled, resulting in no changes made to the source or target.
+
 Many operating systems display these in the form of a cursor change, e.g. a plus sign to indicate a copy operation. The user may also be able to use a modifier key to choose which drop operation to perform, such as <Keyboard>Option</Keyboard> or <Keyboard>Alt</Keyboard> 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.
 
@@ -305,7 +306,7 @@ function DropTarget() {
     onDrop: onEvent
   });
   return (
-    <ul {...dropProps} role="button" tabIndex={0} ref={ref} className={`droppable ${isDropTarget ? 'target' : ''}`} style={{display: 'block', width: 'auto'}}>
+    <ul {...dropProps} role="button" tabIndex={0} ref={ref} className={`droppable ${isDropTarget ? 'target' : ''}`} style={{display: 'block', width: 'auto', overflow: 'auto'}}>
       {events.map((e, i) => <li key={i}>{e}</li>)}
     </ul>
   );