Add transition when keyboard sorting without DragOverlay (#570)

clauderic · Jan 10, 2022 · 1ade2f3 · 1ade2f3
1 parent 6e52501
commit 1ade2f3
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 7 deletions.
diff --git a/.changeset/transition-keyboard-sorting.md b/.changeset/transition-keyboard-sorting.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/sortable': minor
+---
+
+Use `transition` for the active draggable node when keyboard sorting without a `<DragOverlay />`.
diff --git a/packages/core/src/components/DndContext/DndContext.tsx b/packages/core/src/components/DndContext/DndContext.tsx
@@ -640,9 +640,10 @@ export const DndContext = memo(function DndContext({
 
   const internalContext = useMemo(() => {
     const context: InternalContextDescriptor = {
+      activatorEvent,
+      activators,
       active,
       activeNodeRect,
-      activators,
       ariaDescribedById: {
         draggable: draggableDescribedById,
       },
@@ -654,9 +655,10 @@ export const DndContext = memo(function DndContext({
 
     return context;
   }, [
+    activatorEvent,
+    activators,
     active,
     activeNodeRect,
-    activators,
     dispatch,
     draggableDescribedById,
     draggableNodes,

diff --git a/packages/core/src/hooks/useDraggable.ts b/packages/core/src/hooks/useDraggable.ts
@@ -39,6 +39,7 @@ export function useDraggable({
   const key = useUniqueId(ID_PREFIX);
   const {
     activators,
+    activatorEvent,
     active,
     activeNodeRect,
     ariaDescribedById,
@@ -84,6 +85,7 @@ export function useDraggable({
 
   return {
     active,
+    activatorEvent,
     activeNodeRect,
     attributes: memoizedAttributes,
     isDragging,

diff --git a/packages/core/src/store/context.ts b/packages/core/src/store/context.ts
@@ -30,9 +30,10 @@ export const defaultPublicContext: PublicContextDescriptor = {
 };
 
 export const defaultInternalContext: InternalContextDescriptor = {
+  activatorEvent: null,
+  activators: [],
   active: null,
   activeNodeRect: null,
-  activators: [],
   ariaDescribedById: {
     draggable: '',
   },

diff --git a/packages/core/src/store/types.ts b/packages/core/src/store/types.ts
@@ -95,6 +95,7 @@ export interface PublicContextDescriptor {
 }
 
 export interface InternalContextDescriptor {
+  activatorEvent: Event | null;
   activators: SyntheticListeners;
   active: Active | null;
   activeNodeRect: ClientRect | null;

diff --git a/packages/sortable/src/hooks/useSortable.ts b/packages/sortable/src/hooks/useSortable.ts
@@ -5,7 +5,7 @@ import {
   UseDraggableArguments,
   UseDroppableArguments,
 } from '@dnd-kit/core';
-import {CSS, useCombinedRefs} from '@dnd-kit/utilities';
+import {CSS, isKeyboardEvent, useCombinedRefs} from '@dnd-kit/utilities';
 
 import {Context} from '../components';
 import type {SortingStrategy} from '../types';
@@ -74,6 +74,7 @@ export function useSortable({
   });
   const {
     active,
+    activatorEvent,
     activeNodeRect,
     attributes,
     setNodeRef: setDraggableNodeRef,
@@ -116,7 +117,12 @@ export function useSortable({
       ? getNewIndex({id, items, activeIndex, overIndex})
       : index;
   const activeId = active?.id;
-  const previous = useRef({activeId, items, newIndex, containerId});
+  const previous = useRef({
+    activeId,
+    items,
+    newIndex,
+    containerId,
+  });
   const itemsHaveChanged = items !== previous.current.items;
   const shouldAnimateLayoutChanges = animateLayoutChanges({
     active,
@@ -189,7 +195,10 @@ export function useSortable({
       return disabledTransition;
     }
 
-    if (shouldDisplaceDragSource || !transition) {
+    if (
+      (shouldDisplaceDragSource && !isKeyboardEvent(activatorEvent)) ||
+      !transition
+    ) {
       return undefined;
     }
 

diff --git a/stories/2 - Presets/Sortable/Sortable.tsx b/stories/2 - Presets/Sortable/Sortable.tsx
@@ -331,7 +331,7 @@ export function SortableItem({
       })}
       onRemove={onRemove ? () => onRemove(id) : undefined}
       transform={transform}
-      transition={!useDragOverlay && isDragging ? 'none' : transition}
+      transition={transition}
       wrapperStyle={wrapperStyle({index, isDragging, id})}
       listeners={listeners}
       data-index={index}