@react-spectrum/list 3.0.0-alpha.8 → 3.0.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/list",
-  "version": "3.0.0-alpha.8",
+  "version": "3.0.0-alpha.9",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -32,34 +32,40 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "^3.5.2",
-    "@react-aria/grid": "^3.2.3",
-    "@react-aria/i18n": "^3.3.6",
-    "@react-aria/interactions": "^3.8.1",
-    "@react-aria/listbox": "^3.4.2",
-    "@react-aria/separator": "^3.1.5",
-    "@react-aria/utils": "^3.11.2",
-    "@react-aria/virtualizer": "^3.3.7",
-    "@react-spectrum/button": "^3.7.1",
-    "@react-spectrum/checkbox": "^3.3.1",
-    "@react-spectrum/layout": "^3.2.3",
-    "@react-spectrum/listbox": "^3.5.5",
-    "@react-spectrum/progress": "^3.1.5",
-    "@react-spectrum/text": "^3.1.5",
-    "@react-spectrum/textfield": "^3.3.2",
-    "@react-spectrum/utils": "^3.6.5",
-    "@react-spectrum/view": "^3.1.5",
-    "@react-stately/collections": "^3.3.6",
-    "@react-stately/grid": "^3.1.2",
-    "@react-stately/layout": "^3.4.4",
-    "@react-stately/list": "^3.4.3",
-    "@react-stately/virtualizer": "^3.1.7",
-    "@react-types/listbox": "^3.2.3",
-    "@react-types/shared": "^3.11.1",
-    "@spectrum-icons/ui": "^3.2.3"
+    "@react-aria/button": "^3.4.2",
+    "@react-aria/focus": "^3.5.3",
+    "@react-aria/grid": "^3.2.4",
+    "@react-aria/i18n": "^3.3.7",
+    "@react-aria/interactions": "^3.8.2",
+    "@react-aria/listbox": "^3.4.3",
+    "@react-aria/separator": "^3.1.6",
+    "@react-aria/utils": "^3.11.3",
+    "@react-aria/virtualizer": "^3.3.8",
+    "@react-aria/visually-hidden": "^3.2.6",
+    "@react-spectrum/button": "^3.7.2",
+    "@react-spectrum/checkbox": "^3.3.2",
+    "@react-spectrum/dnd": "3.0.0-alpha.0",
+    "@react-spectrum/layout": "^3.2.4",
+    "@react-spectrum/listbox": "^3.5.6",
+    "@react-spectrum/progress": "^3.1.6",
+    "@react-spectrum/text": "^3.1.6",
+    "@react-spectrum/textfield": "^3.3.3",
+    "@react-spectrum/utils": "^3.6.6",
+    "@react-spectrum/view": "^3.1.6",
+    "@react-stately/collections": "^3.3.7",
+    "@react-stately/grid": "^3.1.3",
+    "@react-stately/layout": "^3.4.5",
+    "@react-stately/list": "^3.4.4",
+    "@react-stately/virtualizer": "^3.1.8",
+    "@react-types/button": "^3.4.4",
+    "@react-types/listbox": "^3.2.4",
+    "@react-types/shared": "^3.11.2",
+    "@spectrum-icons/ui": "^3.2.4"
   },
   "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.6",
+    "@react-stately/dnd": "3.0.0-alpha.5"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.2.0",
@@ -69,5 +75,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b98f0e60590d784afd54140916576021d4c1bfd7"
+  "gitHead": "ed8d8d984c2f7f2c31e8b18795b97858a95e4729"
 }

package/src/ListView.tsx

@@ -20,23 +20,35 @@ import {
   SpectrumSelectionProps,
   StyleProps
 } from '@react-types/shared';
-import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {GridCollection, useGridState} from '@react-stately/grid';
-import {GridKeyboardDelegate, useGrid} from '@react-aria/grid';
+import {Checkbox} from '@react-spectrum/checkbox';
+import {classNames, SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';
+import {Content} from '@react-spectrum/view';
+import type {DraggableCollectionState} from '@react-stately/dnd';
+import {DragHooks} from '@react-spectrum/dnd';
+import {GridCollection, GridState, useGridState} from '@react-stately/grid';
+import {GridKeyboardDelegate, useGrid, useGridSelectionCheckbox} from '@react-aria/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import ListGripper from '@spectrum-icons/ui/ListGripper';
 import {ListLayout} from '@react-stately/layout';
 import {ListState, useListState} from '@react-stately/list';
 import listStyles from './listview.css';
 import {ListViewItem} from './ListViewItem';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {ReactElement, useContext, useMemo} from 'react';
+import {Provider, useProvider} from '@react-spectrum/provider';
+import React, {ReactElement, useContext, useMemo, useRef} from 'react';
 import {useCollator, useLocale, useMessageFormatter} from '@react-aria/i18n';
-import {useProvider} from '@react-spectrum/provider';
 import {Virtualizer} from '@react-aria/virtualizer';
 
+interface ListViewContextValue {
+  state: GridState<object, GridCollection<any>>,
+  keyboardDelegate: GridKeyboardDelegate<unknown, GridCollection<any>>,
+  dragState: DraggableCollectionState,
+  onAction:(key: string) => void,
+  isListDraggable: boolean
+}
 
-export const ListViewContext = React.createContext(null);
+export const ListViewContext = React.createContext<ListViewContextValue>(null);
 
 const ROW_HEIGHTS = {
   compact: {
@@ -58,12 +70,12 @@ export function useListLayout<T>(state: ListState<T>, density: ListViewProps<T>[
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let isEmpty = state.collection.size === 0;
   let layout = useMemo(() =>
-      new ListLayout<T>({
-        estimatedRowHeight: ROW_HEIGHTS[density][scale],
-        padding: 0,
-        collator,
-        loaderHeight: isEmpty ? null : ROW_HEIGHTS[density][scale]
-      })
+    new ListLayout<T>({
+      estimatedRowHeight: ROW_HEIGHTS[density][scale],
+      padding: 0,
+      collator,
+      loaderHeight: isEmpty ? null : ROW_HEIGHTS[density][scale]
+    })
     , [collator, scale, density, isEmpty]);
 
   layout.collection = state.collection;
@@ -81,7 +93,8 @@ interface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProp
   loadingState?: LoadingState,
   renderEmptyState?: () => JSX.Element,
   transitionDuration?: number,
-  onAction?: (key: string) => void
+  onAction?: (key: string) => void,
+  dragHooks?: DragHooks
 }
 
 function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDivElement>) {
@@ -91,8 +104,14 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
     loadingState,
     isQuiet,
     transitionDuration = 0,
-    onAction
+    onAction,
+    dragHooks
   } = props;
+  let isListDraggable = !!dragHooks;
+  let dragHooksProvided = useRef(isListDraggable);
+  if (dragHooksProvided.current !== isListDraggable) {
+    console.warn('Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
+  }
   let domRef = useDOMRef(ref);
   let {collection} = useListState(props);
   let formatMessage = useMessageFormatter(intlMessages);
@@ -136,6 +155,62 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
     // focusable children in the cell.
     focusMode: 'cell'
   }), [state, domRef, direction, collator]);
+
+  let provider = useProvider();
+  let {checkboxProps} = useGridSelectionCheckbox({key: null}, state);
+  let dragState: DraggableCollectionState;
+  if (isListDraggable) {
+    dragState = dragHooks.useDraggableCollectionState({
+      collection: state.collection,
+      selectionManager: state.selectionManager,
+      renderPreview(selectedKeys, draggedKey) {
+        let item = state.collection.getItem(draggedKey);
+        let itemWidth = domRef.current.offsetWidth;
+        let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
+        let isSelected = state.selectionManager.isSelected(item.key);
+        return (
+          <Provider
+            {...provider}
+            UNSAFE_className={classNames(listStyles, 'react-spectrum-ListViewItem', 'is-dragging')}
+            UNSAFE_style={{width: itemWidth, paddingInlineStart: 0}}>
+            <div className={listStyles['react-spectrum-ListViewItem-grid']}>
+              <div className={listStyles['react-spectrum-ListViewItem-draghandle-container']}>
+                <div className={listStyles['react-spectrum-ListViewItem-draghandle-button']}>
+                  <ListGripper />
+                </div>
+              </div>
+              {showCheckbox &&
+                <Checkbox
+                  isSelected={isSelected}
+                  UNSAFE_className={listStyles['react-spectrum-ListViewItem-checkbox']}
+                  isEmphasized
+                  aria-label={checkboxProps['aria-label']} />
+              }
+              <SlotProvider
+                slots={{
+                  content: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},
+                  text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},
+                  description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description']},
+                  icon: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-icon'], size: 'M'},
+                  image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-image']},
+                  link: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content'], isQuiet: true},
+                  actionButton: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'], isQuiet: true},
+                  actionGroup: {
+                    UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'],
+                    isQuiet: true,
+                    density: 'compact'
+                  },
+                  actionMenu: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actionmenu'], isQuiet: true}
+                }}>
+                {typeof item.rendered === 'string' ? <Content>{item.rendered}</Content> : item.rendered}
+              </SlotProvider>
+            </div>
+          </Provider>
+        );
+      }
+    });
+  }
+
   let {gridProps} = useGrid({
     ...props,
     isVirtualized: true,
@@ -152,7 +227,7 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
   }
 
   return (
-    <ListViewContext.Provider value={{state, keyboardDelegate}}>
+    <ListViewContext.Provider value={{state, keyboardDelegate, dragState, onAction, isListDraggable}}>
       <Virtualizer
         {...gridProps}
         {...styleProps}
@@ -168,7 +243,8 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
             `react-spectrum-ListView--${density}`,
             'react-spectrum-ListView--emphasized',
             {
-              'react-spectrum-ListView--quiet': isQuiet
+              'react-spectrum-ListView--quiet': isQuiet,
+              'react-spectrum-ListView--draggable': isListDraggable
             },
             styleProps.className
           )
@@ -179,7 +255,7 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
         {(type, item) => {
           if (type === 'item') {
             return (
-              <ListViewItem item={item} onAction={onAction} isEmphasized />
+              <ListViewItem item={item} isEmphasized dragHooks={dragHooks}  />
             );
           } else if (type === 'loader') {
             return (

package/src/ListViewItem.tsx

@@ -14,24 +14,28 @@ import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
 import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
 import {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';
 import {Content} from '@react-spectrum/view';
+import type {DraggableItemResult} from '@react-aria/dnd';
+import {FocusRing, useFocusRing} from '@react-aria/focus';
 import {Grid} from '@react-spectrum/layout';
+import ListGripper from '@spectrum-icons/ui/ListGripper';
 import listStyles from './listview.css';
 import {ListViewContext} from './ListView';
 import {mergeProps} from '@react-aria/utils';
 import React, {useContext, useRef} from 'react';
-import {useFocusRing} from '@react-aria/focus';
+import {useButton} from '@react-aria/button';
 import {useGridCell, useGridRow, useGridSelectionCheckbox} from '@react-aria/grid';
 import {useHover, usePress} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
+import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
 export function ListViewItem(props) {
   let {
     item,
-    onAction,
-    isEmphasized
+    isEmphasized,
+    dragHooks
   } = props;
   let cellNode = [...item.childNodes][0];
-  let {state} = useContext(ListViewContext);
+  let {state, dragState, onAction, isListDraggable} = useContext(ListViewContext);
   let {direction} = useLocale();
   let rowRef = useRef<HTMLDivElement>();
   let cellRef =  useRef<HTMLDivElement>();
@@ -42,17 +46,24 @@ export function ListViewItem(props) {
   let {isFocusVisible, focusProps} = useFocusRing();
   let allowsInteraction = state.selectionManager.selectionMode !== 'none' || onAction;
   let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
+  let isDraggable = dragState?.isDraggable(item.key) && !isDisabled;
   let {hoverProps, isHovered} = useHover({isDisabled});
   let {pressProps, isPressed} = usePress({isDisabled});
   let {rowProps} = useGridRow({
     node: item,
     isVirtualized: true,
-    onAction: onAction ? () => onAction(item.key) : undefined
+    onAction: onAction ? () => onAction(item.key) : undefined,
+    shouldSelectOnPressUp: isListDraggable
   }, state, rowRef);
   let {gridCellProps} = useGridCell({
     node: cellNode,
     focusMode: 'cell'
   }, state, cellRef);
+  let draggableItem: DraggableItemResult;
+  if (isListDraggable) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    draggableItem = dragHooks.useDraggableItem({key: item.key}, dragState);
+  }
   const mergedProps = mergeProps(
     gridCellProps,
     hoverProps,
@@ -61,6 +72,12 @@ export function ListViewItem(props) {
   );
   let {checkboxProps} = useGridSelectionCheckbox({...props, key: item.key}, state);
 
+  let dragButtonRef = React.useRef();
+  let {buttonProps} = useButton({
+    ...draggableItem?.dragButtonProps,
+    elementType: 'div'
+  }, dragButtonRef);
+
   let chevron = null;
   if (item.props.hasChildItems) {
     chevron = direction === 'ltr'
@@ -78,9 +95,11 @@ export function ListViewItem(props) {
 
   let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
   let isSelected = state.selectionManager.isSelected(item.key);
+  let showDragHandle = isDraggable && (isFocusVisibleWithin || isHovered || isPressed);
+  let {visuallyHiddenProps} = useVisuallyHidden();
   return (
     <div
-      {...mergeProps(rowProps, pressProps)}
+      {...mergeProps(rowProps, pressProps, isDraggable && draggableItem?.dragProps)}
       ref={rowRef}>
       <div
         className={
@@ -94,19 +113,41 @@ export function ListViewItem(props) {
               'is-hovered': isHovered,
               'is-selected': isSelected,
               'is-previous-selected': state.selectionManager.isSelected(item.prevKey),
-              'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey))
+              'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey)),
+              'react-spectrum-ListViewItem--draggable': isDraggable
             }
           )
         }
         ref={cellRef}
         {...mergedProps}>
         <Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>
-          {showCheckbox && (
+          {isListDraggable &&
+            <div className={listStyles['react-spectrum-ListViewItem-draghandle-container']}>
+              {isDraggable &&
+                <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>
+                  <div
+                    {...buttonProps as React.HTMLAttributes<HTMLElement>}
+                    className={
+                      classNames(
+                        listStyles,
+                        'react-spectrum-ListViewItem-draghandle-button'
+                      )
+                    }
+                    style={!showDragHandle ? {...visuallyHiddenProps.style} : {}}
+                    ref={dragButtonRef}
+                    draggable="true">
+                    <ListGripper />
+                  </div>
+                </FocusRing>
+              }
+            </div>
+          }
+          {showCheckbox &&
             <Checkbox
               UNSAFE_className={listStyles['react-spectrum-ListViewItem-checkbox']}
               {...checkboxProps}
               isEmphasized={isEmphasized} />
-          )}
+          }
           <SlotProvider
             slots={{
               content: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},

package/src/listview.css

@@ -98,17 +98,46 @@
     padding-bottom: 0px;
   }
 
+  &.is-dragging {
+    border: 1px solid var(--spectrum-global-color-blue-500);
+    border-radius: var(--spectrum-global-dimension-size-50);
+  }
+
   .react-spectrum-ListViewItem-grid {
     display: grid;
-    grid-template-columns: auto auto auto 1fr auto auto;
+    grid-template-columns: auto auto auto auto 1fr auto auto;
     grid-template-rows: 1fr auto;
     grid-template-areas:
-      "checkbox icon image content actions actionmenu chevron"
-      "checkbox icon image description actions actionmenu chevron"
+      "draghandle checkbox icon image content actions actionmenu chevron"
+      "draghandle checkbox icon image description actions actionmenu chevron"
     ;
     align-items: center;
   }
 
+  .react-spectrum-ListViewItem-draghandle-container {
+    grid-area: draghandle;
+    width: var(--spectrum-global-dimension-size-250);
+    display: flex;
+    align-self: stretch;
+    justify-self: stretch;
+    justify-content: center;
+    padding: var(--spectrum-global-dimension-size-25);
+
+
+    .react-spectrum-ListViewItem-draghandle-button {
+      width: var(--spectrum-global-dimension-size-200);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--spectrum-alias-border-radius-regular);
+
+      &:focus-ring {
+        box-shadow: inset 0 0 0 2px var(--spectrum-table-cell-border-color-key-focus);
+        outline: none;
+      }
+    }
+  }
+
   .react-spectrum-ListViewItem-checkbox {
     grid-area: checkbox;
     align-items: center;
@@ -185,6 +214,16 @@
   min-height: var(--spectrum-global-dimension-size-600);
 }
 
+.react-spectrum-ListView--draggable .react-spectrum-ListViewItem {
+  padding-inline-start: 0;
+}
+
+.react-spectrum-ListViewItem--draggable {
+  .react-spectrum-ListViewItem-checkbox input {
+    inset-inline-start: 0;
+  }
+}
+
 .react-spectrum-ListView-centeredWrapper {
   display: flex;
   align-items: center;