ListView: Draggable Rows

bin/imports.js

@@ -18,7 +18,7 @@ const substrings = ['-', '+'];
 
 module.exports = function (context) {
   let processNode = (node) => {
-    if (!node.source) {
+    if (!node.source || node.importKind === 'type') {
       return;
     }
 

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

@@ -18,11 +18,11 @@ import intlMessages from '../intl/*.json';
 import {useDrag} from './useDrag';
 import {useMessageFormatter} from '@react-aria/i18n';
 
-interface DraggableItemProps {
+export interface DraggableItemProps {
   key: Key
 }
 
-interface DraggableItemResult {
+export interface DraggableItemResult {
   dragProps: HTMLAttributes<HTMLElement>,
   dragButtonProps: AriaButtonProps
 }

packages/@react-aria/dnd/stories/dnd.stories.tsx

@@ -233,7 +233,7 @@ function Draggable() {
   );
 }
 
-function Droppable({type, children, actionId = ''}: any) {
+export function Droppable({type, children, actionId = ''}: any) {
   let ref = React.useRef();
   let {dropProps, isDropTarget} = useDrop({
     ref,

packages/@react-aria/interactions/src/usePress.ts

@@ -321,7 +321,7 @@ export function usePress(props: PressHookProps): PressResult {
 
         // Due to browser inconsistencies, especially on mobile browsers, we prevent
         // default on pointer down and handle focusing the pressable element ourselves.
-        if (shouldPreventDefault(e.target as Element)) {
+        if (shouldPreventDefault(e.currentTarget as HTMLElement)) {
           e.preventDefault();
         }
 
@@ -359,7 +359,7 @@ export function usePress(props: PressHookProps): PressResult {
           // Chrome and Firefox on touch Windows devices require mouse down events
           // to be canceled in addition to pointer events, or an extra asynchronous
           // focus event will be fired.
-          if (shouldPreventDefault(e.target as Element)) {
+          if (shouldPreventDefault(e.currentTarget as HTMLElement)) {
             e.preventDefault();
           }
 
@@ -443,7 +443,7 @@ export function usePress(props: PressHookProps): PressResult {
 
         // Due to browser inconsistencies, especially on mobile browsers, we prevent
         // default on mouse down and handle focusing the pressable element ourselves.
-        if (shouldPreventDefault(e.target as Element)) {
+        if (shouldPreventDefault(e.currentTarget as HTMLElement)) {
           e.preventDefault();
         }
 
@@ -764,9 +764,9 @@ function isOverTarget(point: EventPoint, target: HTMLElement) {
   return areRectanglesOverlapping(rect, pointRect);
 }
 
-function shouldPreventDefault(target: Element) {
-  // We cannot prevent default if the target is inside a draggable element.
-  return !target.closest('[draggable="true"]');
+function shouldPreventDefault(target: HTMLElement) {
+  // We cannot prevent default if the target is a draggable element.
+  return !target.draggable;
 }
 
 function shouldPreventDefaultKeyboard(target: Element) {

packages/@react-aria/interactions/test/usePress.test.js

@@ -21,9 +21,9 @@ import {theme} from '@react-spectrum/theme-default';
 import {usePress} from '../';
 
 function Example(props) {
-  let {elementType: ElementType = 'div', style, ...otherProps} = props;
+  let {elementType: ElementType = 'div', style, draggable, ...otherProps} = props;
   let {pressProps} = usePress(otherProps);
-  return <ElementType {...pressProps} style={style} tabIndex="0">test</ElementType>;
+  return <ElementType {...pressProps} style={style} tabIndex="0" draggable={draggable}>test</ElementType>;
 }
 
 function pointerEvent(type, opts) {
@@ -507,13 +507,26 @@ describe('usePress', function () {
       expect(allowDefault).toBe(false);
     });
 
-    it('should not prevent default when in a draggable container', function () {
+    it('should still prevent default when pressing on a non draggable + pressable item in a draggable container', function () {
       let res = render(
         <div draggable="true">
           <Example />
         </div>
       );
 
+      let el = res.getByText('test');
+      let allowDefault = fireEvent(el, pointerEvent('pointerdown', {pointerId: 1, pointerType: 'mouse'}));
+      expect(allowDefault).toBe(false);
+
+      allowDefault = fireEvent.mouseDown(el);
+      expect(allowDefault).toBe(false);
+    });
+
+    it('should not prevent default when pressing on a draggable item', function () {
+      let res = render(
+        <Example draggable="true" />
+      );
+
       let el = res.getByText('test');
       let allowDefault = fireEvent(el, pointerEvent('pointerdown', {pointerId: 1, pointerType: 'mouse'}));
       expect(allowDefault).toBe(true);
@@ -1036,13 +1049,24 @@ describe('usePress', function () {
       expect(allowDefault).toBe(false);
     });
 
-    it('should not prevent default when in a draggable container', function () {
+    it('should still prevent default when pressing on a non draggable + pressable item in a draggable container', function () {
       let res = render(
         <div draggable="true">
           <Example />
         </div>
       );
 
+      let el = res.getByText('test');
+      let allowDefault = fireEvent.mouseDown(el);
+      expect(allowDefault).toBe(false);
+    });
+
+
+    it('should not prevent default when pressing on a draggable item', function () {
+      let res = render(
+        <Example draggable="true" />
+      );
+
       let el = res.getByText('test');
       let allowDefault = fireEvent.mouseDown(el);
       expect(allowDefault).toBe(true);

packages/@react-aria/listbox/src/useOption.ts

@@ -131,6 +131,7 @@ export function useOption<T>(props: AriaOptionProps, state: ListState<T>, ref: R
     key,
     ref,
     shouldSelectOnPressUp,
+    allowsDifferentPressOrigin: shouldSelectOnPressUp,
     isVirtualized,
     shouldUseVirtualFocus,
     isDisabled

packages/@react-aria/menu/src/useMenuItem.ts

@@ -152,7 +152,8 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
     selectionManager: state.selectionManager,
     key,
     ref,
-    shouldSelectOnPressUp: true
+    shouldSelectOnPressUp: true,
+    allowsDifferentPressOrigin: true
   });
 
   let {pressProps} = usePress({onPressStart, onPressUp, isDisabled});

packages/@react-aria/selection/src/useSelectableItem.ts

@@ -36,6 +36,11 @@ interface SelectableItemOptions {
    * item causes the UI to disappear immediately (e.g. menus).
    */
   shouldSelectOnPressUp?: boolean,
+  /**
+   * Whether selection requires the pointer/mouse down and up events to occur on the same target or triggers selection on
+   * the target of the pointer/mouse up event.
+   */
+  allowsDifferentPressOrigin?: boolean,
   /**
    * Whether the option is contained in a virtual scroller.
    */
@@ -79,7 +84,8 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
     shouldUseVirtualFocus,
     focus,
     isDisabled,
-    onAction
+    onAction,
+    allowsDifferentPressOrigin
   } = options;
 
   let onSelect = (e: PressEvent | LongPressEvent | PointerEvent) => {
@@ -155,13 +161,27 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
       }
     };
 
-    itemPressProps.onPressUp = (e) => {
-      if (e.pointerType !== 'keyboard') {
-        onSelect(e);
-      }
-    };
+    // If allowsDifferentPressOrigin, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.)
+    // Otherwise, have selection happen onPress (prevents listview row selection when clicking on interactable elements in the row)
+    if (!allowsDifferentPressOrigin) {
+      itemPressProps.onPress = (e) => {
+        if (e.pointerType !== 'keyboard') {
+          onSelect(e);
+        }
 
-    itemPressProps.onPress = hasPrimaryAction ? () => onAction() : null;
+        if (hasPrimaryAction) {
+          onAction();
+        }
+      };
+    } else {
+      itemPressProps.onPressUp = (e) => {
+        if (e.pointerType !== 'keyboard') {
+          onSelect(e);
+        }
+      };
+
+      itemPressProps.onPress = hasPrimaryAction ? () => onAction() : null;
+    }
   } else {
     // On touch, it feels strange to select on touch down, so we special case this.
     itemPressProps.onPressStart = (e) => {

packages/@react-spectrum/dnd/README.md

@@ -0,0 +1,3 @@
+# @react-spectrum/dnd
+
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

packages/@react-spectrum/dnd/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2022 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.
+ */
+
+export * from './src';

packages/@react-spectrum/dnd/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@react-spectrum/dnd",
+  "version": "3.0.0-alpha.1",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "targets": {
+    "main": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    },
+    "module": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@react-aria/dnd": "3.0.0-alpha.5",
+    "@react-aria/utils": "^3.0.0",
+    "@react-spectrum/utils": "^3.0.0",
+    "@react-stately/dnd": "3.0.0-alpha.4",
+    "@react-types/shared": "^3.0.0"
+  },
+  "devDependencies": {
+    "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1",
+    "@react-spectrum/provider": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/@react-spectrum/dnd/src/index.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright 2022 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.
+ */
+
+/// <reference types="css-module-types" />
+
+export * from './useDragHooks';

packages/@react-spectrum/dnd/src/useDragHooks.ts

@@ -0,0 +1,34 @@
+import {DraggableCollectionOptions, DraggableCollectionState, useDraggableCollectionState} from '@react-stately/dnd';
+import {DraggableItemProps, DraggableItemResult, useDraggableItem} from '@react-aria/dnd';
+import {useMemo} from 'react';
+
+export interface DragHooks {
+    useDraggableCollectionState(props: Omit<DraggableCollectionOptions, 'getItems'>): DraggableCollectionState,
+    useDraggableItem(props: DraggableItemProps, state: DraggableCollectionState): DraggableItemResult
+}
+
+export type DragHookOptions = Omit<DraggableCollectionOptions, 'collection' | 'selectionManager' | 'isDragging' | 'getKeysForDrag'>
+
+export function useDragHooks(options: DragHookOptions): DragHooks {
+  return useMemo(() => ({
+    useDraggableCollectionState(props: DraggableCollectionOptions) {
+      let {
+        collection,
+        selectionManager,
+        allowsDraggingItem,
+        getItems,
+        renderPreview
+      } = props;
+
+      return useDraggableCollectionState({
+        collection,
+        selectionManager,
+        allowsDraggingItem,
+        getItems,
+        renderPreview,
+        ...options
+      });
+    },
+    useDraggableItem
+  }), [options]);
+}

packages/@react-spectrum/list/package.json

@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
+    "@react-aria/button": "^3.4.1",
     "@react-aria/focus": "^3.5.2",
     "@react-aria/grid": "^3.2.3",
     "@react-aria/i18n": "^3.3.6",
@@ -40,8 +41,10 @@
     "@react-aria/separator": "^3.1.5",
     "@react-aria/utils": "^3.11.2",
     "@react-aria/virtualizer": "^3.3.7",
+    "@react-aria/visually-hidden": "^3.2.5",
     "@react-spectrum/button": "^3.7.1",
     "@react-spectrum/checkbox": "^3.3.1",
+    "@react-spectrum/dnd": "3.0.0-alpha.1",
     "@react-spectrum/layout": "^3.2.3",
     "@react-spectrum/listbox": "^3.5.5",
     "@react-spectrum/progress": "^3.1.5",
@@ -54,12 +57,15 @@
     "@react-stately/layout": "^3.4.4",
     "@react-stately/list": "^3.4.3",
     "@react-stately/virtualizer": "^3.1.7",
+    "@react-types/button": "^3.4.3",
     "@react-types/listbox": "^3.2.3",
     "@react-types/shared": "^3.11.1",
     "@spectrum-icons/ui": "^3.2.3"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "^3.0.0-alpha.1"
+    "@adobe/spectrum-css-temp": "^3.0.0-alpha.1",
+    "@react-aria/dnd": "3.0.0-alpha.5",
+    "@react-stately/dnd": "3.0.0-alpha.4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1",

packages/@react-spectrum/list/src/DragHandle.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2021 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 React from 'react';
+
+export default function DragHandle() {
+  return (
+    <svg width="16" height="32" viewBox="0 0 16 32">
+      <g transform="translate(5.5 10.5)">
+        <circle cx="1" cy="1" r="1" transform="translate(0 9)" fill="#6e6e6e" />
+        <circle cx="1" cy="1" r="1" transform="translate(0 6)" fill="#6e6e6e" />
+        <circle cx="1" cy="1" r="1" transform="translate(0 3)" fill="#6e6e6e" />
+        <circle cx="1" cy="1" r="1" fill="#6e6e6e" />
+        <circle cx="1" cy="1" r="1" transform="translate(3 9)" fill="#6e6e6e" />
+        <circle cx="1" cy="1" r="1" transform="translate(3 6)" fill="#6e6e6e" />
+        <circle cx="1" cy="1" r="1" transform="translate(3 3)" fill="#6e6e6e" />
+        <circle cx="1" cy="1" r="1" transform="translate(3)" fill="#6e6e6e" />
+      </g>
+    </svg>
+  );
+}