rac dropzone (#4451)

* initialize dropzone

* added some comments for clarification

* edit spacing

* added additonal props and passed ref

* added dropzone to storybook

* update index.ts

* fixed linting

* fix linting, added actions to dropzone story

* fixed focus

* allow copy/paste, update render props, styling

* can copy, added stories, dropzone with input

* fix linting

* update focus, added css

* update stories, add data attribute

* add isVirtualDragging to DropZone

* single hidden button, added virtual drag

* add tests, update dropzone

* clean up, add story

* fix tests

* fix

* minor fix

* minor minor fix

* add files to react-aria/utils, update css, mobile dropzone

* remove console.log

* update utils, add press events to dropzone

* update aria-label, add focusProps to wrapper div, usePress updates

* create FileTrigger

* cleanup/add stories

* add prop to filetrigger, update comments, change stories

* change comments

* update useDrop hook to accomodate dropButton

* drop target fixes

* changes to dnd with button ref, press responder, remove onInputChange

* fix prop names, update dnd

* add aria label to DropZone, update onChange

* fix onChange in FileTrigger

Author: yihuiliao

packages/@react-aria/dnd/src/DragManager.ts

@@ -481,7 +481,6 @@ class DragSession {
       }
     }
 
-
     if (item !== this.currentDropItem) {
       if (item && typeof this.currentDropTarget.onDropTargetEnter === 'function') {
         this.currentDropTarget.onDropTargetEnter(item?.target);
@@ -490,7 +489,7 @@ class DragSession {
       item?.element.focus();
       this.currentDropItem = item;
 
-      // Annouce first drop target after drag start announcement finishes.
+      // Announce first drop target after drag start announcement finishes.
       // Otherwise, it will never get announced because drag start announcement is assertive.
       if (!this.initialFocused) {
         announce(item?.element.getAttribute('aria-label'), 'polite');

packages/@react-aria/dnd/src/useDrag.ts

@@ -149,13 +149,10 @@ export function useDrag(options: DragOptions): DragResult {
 
     // Enforce that drops are handled by useDrop.
     addGlobalListener(window, 'drop', e => {
-      if (!DragManager.isValidDropTarget(e.target as Element)) {
-        e.preventDefault();
-        e.stopPropagation();
-        throw new Error('Drags initiated from the React Aria useDrag hook may only be dropped on a target created with useDrop. This ensures that a keyboard and screen reader accessible alternative is available.');
-      }
-    }, {capture: true, once: true});
-
+      e.preventDefault();
+      e.stopPropagation();
+      console.warn('Drags initiated from the React Aria useDrag hook may only be dropped on a target created with useDrop. This ensures that a keyboard and screen reader accessible alternative is available.');
+    }, {once: true});
     state.x = e.clientX;
     state.y = e.clientY;
 

packages/@react-aria/dnd/src/useDrop.ts

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaButtonProps} from '@react-types/button';
 import {DragEvent, HTMLAttributes, RefObject,  useRef, useState} from 'react';
 import * as DragManager from './DragManager';
 import {DragTypes, globalAllowedDropOperations, globalDndState, readFromDataTransfer, setGlobalDnDState, setGlobalDropEffect} from './utils';
@@ -41,14 +42,22 @@ export interface DropOptions {
   /** Handler that is called when a valid drag exits the drop target. */
   onDropExit?: (e: DropExitEvent) => void,
   /** Handler that is called when a valid drag is dropped on the drop target. */
-  onDrop?: (e: DropEvent) => void
+  onDrop?: (e: DropEvent) => void,
+  /**
+   * Whether the item has an explicit focusable drop affordance to initiate accessible drag and drop mode.
+   * If true, the dropProps will omit these event handlers, and they will be applied to dropButtonProps instead.
+   */
+  hasDropButton?: boolean
 }
 
 export interface DropResult {
   /** Props for the droppable element. */
   dropProps: HTMLAttributes<HTMLElement>,
   /** Whether the drop target is currently focused or hovered. */
-  isDropTarget: boolean
+  isDropTarget: boolean,
+  /** Props for the explicit drop button affordance, if any. */
+  dropButtonProps?: AriaButtonProps
+  
 }
 
 const DROP_ACTIVATE_TIMEOUT = 800;
@@ -58,6 +67,7 @@ const DROP_ACTIVATE_TIMEOUT = 800;
  * based drag and drop, in addition to full parity for keyboard and screen reader users.
  */
 export function useDrop(options: DropOptions): DropResult {
+  let {hasDropButton} = options;
   let [isDropTarget, setDropTarget] = useState(false);
   let state = useRef({
     x: 0,
@@ -317,15 +327,16 @@ export function useDrop(options: DropOptions): DropResult {
   }), [ref, getDropOperationKeyboard, onDropEnter, onDropExit, onKeyboardDrop, onDropActivate]);
 
   let {dropProps} = useVirtualDrop();
-
+  
   return {
     dropProps: {
-      ...dropProps,
+      ...(!hasDropButton && dropProps),
       onDragEnter,
       onDragOver,
       onDragLeave,
       onDrop
     },
+    dropButtonProps: {...(hasDropButton && dropProps)},
     isDropTarget
   };
 }

packages/react-aria-components/example/index.css

@@ -175,3 +175,34 @@ html {
     }
   }
 }
+
+.dropzone {
+  border: 2px solid white;
+  margin: 20px;
+  padding: 20px;
+  outline: none;
+
+  &[data-focus-visible][data-focused] {
+    border: 2px dashed blue;
+  }
+
+  &[data-drop-target]{
+    border: 2px dashed orange;
+  }
+}
+
+.draggable {
+  outline: none;
+  
+  &.focus-ring{
+    border: 2px solid blue;
+  }
+}
+
+.copyable {
+  outline: none;
+
+  &.focus-ring{
+    border: 2px solid blue;
+  }
+}

packages/react-aria-components/package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@internationalized/date": "^3.2.0",
     "@react-aria/focus": "^3.12.1",
+    "@react-aria/interactions": "^3.15.1",
     "@react-aria/utils": "^3.17.0",
     "@react-stately/table": "^3.9.1",
     "@react-types/calendar": "^3.2.1",

packages/react-aria-components/src/DropZone.tsx

@@ -0,0 +1,109 @@
+/*
+ * Copyright 2023 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 {AriaLabelingProps} from '@react-types/shared';
+import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {DropOptions, mergeProps, useClipboard, useDrop, useFocusRing, useHover, useId, VisuallyHidden} from 'react-aria';
+import {FileTriggerContext} from './FileTrigger';
+import {filterDOMProps, useLabels} from '@react-aria/utils';
+import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
+import {TextContext} from './Text';
+
+export interface DropZoneRenderProps {
+  /**
+   * Whether the dropzone is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean,
+  /**
+   * Whether the dropzone is focused, either via a mouse or keyboard.
+   * @selector [data-focused]
+   */
+  isFocused: boolean,
+  /**
+   * Whether the dropzone is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean,
+  /**
+   * Whether the dropzone is the drop target.
+   * @selector [data-drop-target]
+   */
+  isDropTarget: boolean
+}
+// note: possibly add isDisabled prop in the future
+export interface DropZoneProps extends Omit<DropOptions, 'getDropOperationForPoint'>, RenderProps<DropZoneRenderProps>, SlotProps, AriaLabelingProps {}
+
+export const DropZoneContext = createContext<ContextValue<DropZoneProps, HTMLDivElement>>(null);
+
+function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, DropZoneContext);
+  let buttonRef = useRef<HTMLButtonElement>(null);
+  let {dropProps, dropButtonProps, isDropTarget} = useDrop({...props, ref: buttonRef, hasDropButton: true});
+  let {hoverProps, isHovered} = useHover({});
+  let {focusProps, isFocused, isFocusVisible} = useFocusRing();
+  let [fileTriggerRef] = useSlot(); 
+  
+  let textId = useId();
+  let labelProps = useLabels({'aria-labelledby': textId});
+
+  let {clipboardProps} = useClipboard({
+    onPaste: (items) => props.onDrop?.({
+      type: 'drop',
+      items,
+      x: 0,
+      y: 0,
+      dropOperation: 'copy'
+    })
+  });
+
+  let renderProps = useRenderProps({ 
+    ...props,
+    values: {isHovered, isFocused, isFocusVisible, isDropTarget},
+    defaultClassName: 'react-aria-DropZone'
+  });
+  let DOMProps = filterDOMProps(props);
+  delete DOMProps.id;
+  
+  return (
+    <Provider
+      values={[
+        [FileTriggerContext, {ref: fileTriggerRef}],
+        [TextContext, {id: textId, slot: 'heading'}]
+      ]}>
+      {/* eslint-disable-next-line */}
+      <div
+        {...mergeProps(dropProps, hoverProps, DOMProps)} 
+        {...renderProps}
+        slot={props.slot}
+        onClick={() => buttonRef.current?.focus()}
+        data-hovered={isHovered || undefined}
+        data-focused={isFocused || undefined}
+        data-focus-visible={isFocusVisible || undefined}
+        data-drop-target={isDropTarget || undefined} >
+        <VisuallyHidden>
+          <button
+            {...mergeProps(dropButtonProps, focusProps, clipboardProps, labelProps)}
+            aria-label="DropZone" // will need to update with string formatter
+            ref={buttonRef} />   
+        </VisuallyHidden>
+        {renderProps.children}
+      </div>
+    </Provider>
+  );
+}
+
+/**
+ * A dropzone is an area into which one or multiple objects can be dragged and dropped.
+ */
+const _DropZone = forwardRef(DropZone);
+export {_DropZone as DropZone};

packages/react-aria-components/src/FileTrigger.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2023 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 {AriaLabelingProps} from '@react-types/shared';
+import {ContextValue, DOMProps, SlotProps, useContextProps} from './utils';
+import {filterDOMProps} from '@react-aria/utils';
+import {Input} from './Input';
+import {PressResponder} from '@react-aria/interactions';
+import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
+import {VisuallyHidden} from 'react-aria';
+
+export interface FileTriggerProps extends SlotProps, DOMProps, AriaLabelingProps {
+  /**
+   * Specifies what mime type of files are allowed.
+   */
+  acceptedFileTypes?: Array<string>,
+  /**
+   * Whether multiple files can be selected.
+   */
+  allowsMultiple?: boolean,
+  /**
+   * Specifies the use of a media capture mechanism to capture the media on the spot.
+   */
+  defaultCamera?: 'user' | 'environment',
+  /**
+   * Handler when a user selects a file.
+   */
+  onChange?: (files: FileList | null) => void
+}
+
+export const FileTriggerContext = createContext<ContextValue<FileTriggerProps, HTMLDivElement>>(null);
+
+function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, FileTriggerContext);
+  let {onChange, acceptedFileTypes, className, allowsMultiple, defaultCamera, children, ...otherProps} = props;
+  let inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div
+      className={className || 'react-aria-FileTrigger'}
+      {...filterDOMProps(otherProps)}
+      ref={ref}
+      slot={props.slot}>
+      <PressResponder onPress={() => inputRef.current?.click()}>
+        {children}
+      </PressResponder>
+      <VisuallyHidden>
+        <Input 
+          type="file" 
+          ref={inputRef} 
+          accept={acceptedFileTypes?.toString()} 
+          onChange={(e) => onChange?.(e.target.files)} 
+          capture={defaultCamera} 
+          multiple={allowsMultiple} /> 
+      </VisuallyHidden>
+    </div>
+  );
+}
+
+/**
+ * A FileTrigger allows a user to access the file system with either a Button or Link.
+ */
+const _FileTrigger = forwardRef(FileTrigger);
+export {_FileTrigger  as FileTrigger};

packages/react-aria-components/src/index.ts

@@ -18,6 +18,8 @@ export {ComboBox, ComboBoxContext} from './ComboBox';
 export {DateField, DateInput, DateSegment, TimeField, DateFieldContext, TimeFieldContext} from './DateField';
 export {DatePicker, DateRangePicker, DatePickerContext, DateRangePickerContext} from './DatePicker';
 export {DialogTrigger, Dialog, DialogContext} from './Dialog';
+export {DropZone, DropZoneContext} from './DropZone';
+export {FileTrigger, FileTriggerContext} from './FileTrigger';
 export {GridList, GridListContext} from './GridList';
 export {Group, GroupContext} from './Group';
 export {Header} from './Header';