Allow consumers to define drag source opacity in drop animation

.changeset/drop-animation-opacity.md

@@ -0,0 +1,5 @@
+---
+"@dnd-kit/core": patch
+---
+
+Allow consumers to define drag source opacity in drop animation by setting the `dragSourceOpacity` option to a number on the `dropAnimation` prop of `DragOverlay`.

packages/core/src/components/DragOverlay/DragOverlay.tsx

@@ -29,9 +29,10 @@ const defaultTransition: TransitionGetter = (activatorEvent) => {
   return isKeyboardActivator ? 'transform 250ms ease' : undefined;
 };
 
-const defaultDropAnimation: DropAnimation = {
+export const defaultDropAnimation: DropAnimation = {
   duration: 250,
   easing: 'ease',
+  dragSourceOpacity: 0,
 };
 
 export const DragOverlay = React.memo(
@@ -126,6 +127,7 @@ export const DragOverlay = React.memo(
       draggableNodes,
       duration: dropAnimation?.duration,
       easing: dropAnimation?.easing,
+      dragSourceOpacity: dropAnimation?.dragSourceOpacity,
       node: overlayNode.nodeRef.current,
       transform: attributesSnapshot.current?.transform,
     });

packages/core/src/components/DragOverlay/hooks/useDropAnimation.ts

@@ -8,6 +8,7 @@ import {getViewRect} from '../../../utilities';
 export interface DropAnimation {
   duration: number;
   easing: string;
+  dragSourceOpacity?: number;
 }
 
 interface Arguments {
@@ -17,6 +18,7 @@ interface Arguments {
   draggableNodes: DraggableNodes;
   duration: DropAnimation['duration'] | undefined;
   easing: DropAnimation['easing'] | undefined;
+  dragSourceOpacity: DropAnimation['dragSourceOpacity'] | undefined;
   node: HTMLElement | null;
   transform: Transform | undefined;
 }
@@ -28,6 +30,7 @@ export function useDropAnimation({
   draggableNodes,
   duration,
   easing,
+  dragSourceOpacity,
   node,
   transform,
 }: Arguments) {
@@ -72,7 +75,10 @@ export function useDropAnimation({
             });
             const originalOpacity = finalNode.style.opacity;
 
-            finalNode.style.opacity = '0';
+            if (dragSourceOpacity != null) {
+              finalNode.style.opacity = `${dragSourceOpacity}`;
+            }
+
             const nodeAnimation = node.animate(
               [
                 {
@@ -91,7 +97,7 @@ export function useDropAnimation({
             nodeAnimation.onfinish = () => {
               setDropAnimationComplete(true);
 
-              if (finalNode) {
+              if (finalNode && dragSourceOpacity != null) {
                 finalNode.style.opacity = originalOpacity;
               }
             };
@@ -109,6 +115,7 @@ export function useDropAnimation({
     draggableNodes,
     duration,
     easing,
+    dragSourceOpacity,
     node,
     transform,
   ]);

packages/core/src/components/DragOverlay/index.ts

@@ -1,2 +1,3 @@
-export {DragOverlay, Props} from './DragOverlay';
+export {DragOverlay, defaultDropAnimation} from './DragOverlay';
+export type {Props} from './DragOverlay';
 export type {DropAnimation} from './hooks';

packages/core/src/components/index.ts

@@ -1,8 +1,5 @@
-export {
-  Announcements,
-  defaultAnnouncements,
-  ScreenReaderInstructions,
-} from './Accessibility';
+export {defaultAnnouncements} from './Accessibility';
+export type {Announcements, ScreenReaderInstructions} from './Accessibility';
 export {DndContext} from './DndContext';
 export type {
   CancelDrop,
@@ -11,8 +8,5 @@ export type {
   DragMoveEvent,
   DragStartEvent,
 } from './DndContext';
-export {
-  DragOverlay,
-  Props as DragOverlayProps,
-  DropAnimation,
-} from './DragOverlay';
+export {DragOverlay, defaultDropAnimation} from './DragOverlay';
+export type {DropAnimation, Props as DragOverlayProps} from './DragOverlay';

packages/core/src/index.ts

@@ -1,4 +1,9 @@
-export {DndContext, DragOverlay, defaultAnnouncements} from './components';
+export {
+  DndContext,
+  DragOverlay,
+  defaultAnnouncements,
+  defaultDropAnimation,
+} from './components';
 export type {
   Announcements,
   CancelDrop,

stories/2 - Presets/Tree/SortableTree.tsx → stories/3 - Examples/Tree/SortableTree.tsx

@@ -14,6 +14,8 @@ import {
   DragOverEvent,
   LayoutMeasuring,
   LayoutMeasuringStrategy,
+  DropAnimation,
+  defaultDropAnimation,
 } from '@dnd-kit/core';
 import {
   SortableContext,
@@ -66,6 +68,11 @@ const layoutMeasuring: Partial<LayoutMeasuring> = {
   strategy: LayoutMeasuringStrategy.BeforeDragging,
 };
 
+const dropAnimation: DropAnimation = {
+  ...defaultDropAnimation,
+  dragSourceOpacity: 0.5,
+};
+
 export function SortableTree() {
   const [items, setItems] = useState(() => initialItems);
   const [activeId, setActiveId] = useState<string | null>(null);
@@ -144,7 +151,7 @@ export function SortableTree() {
             />
           ))}
           {createPortal(
-            <DragOverlay>
+            <DragOverlay dropAnimation={dropAnimation}>
               {activeId && activeItem ? (
                 <TreeItem
                   depth={activeItem.depth}

stories/2 - Presets/Tree/components/TreeItem/TreeItem.module.css → stories/3 - Examples/Tree/components/TreeItem/TreeItem.module.css

@@ -41,6 +41,7 @@
   border: 1px solid #dedede;
   color: #222;
   box-sizing: border-box;
+  user-select: none;
 }
 
 .Text {

stories/2 - Presets/Tree/components/TreeItem/TreeItem.tsx → stories/3 - Examples/Tree/components/TreeItem/TreeItem.tsx

@@ -52,7 +52,7 @@ export const TreeItem = forwardRef<HTMLDivElement, Props>(
         <div className={styles.TreeItem} ref={ref}>
           <Handle {...handleProps} />
           <span className={styles.Text}>{value}</span>
-          {!clone && !ghost && <Remove onClick={onRemove} />}
+          {!clone && <Remove onClick={onRemove} />}
           {clone && childCount && childCount > 1 ? (
             <span className={styles.Count}>{childCount}</span>
           ) : null}

stories/components/Item/components/Action/Action.module.css

@@ -14,12 +14,15 @@ $focused-outline-color: #4c9ffe;
   outline: none;
   appearance: none;
   background-color: transparent;
+  -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    background-color: var(--action-background, rgba(0, 0, 0, 0.05));
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--action-background, rgba(0, 0, 0, 0.05));
 
-    svg {
-      fill: #6f7b88;
+      svg {
+        fill: #6f7b88;
+      }
     }
   }