Add isDragging and isDropping attributes

.changeset/is-drag-source.md

@@ -0,0 +1,6 @@
+---
+'@dnd-kit/abstract': patch
+'@dnd-kit/dom': patch
+---
+
+Added `isDragging` and `isDropping` properties to `draggable` and `sortable` instances.

apps/docs/react/guides/multiple-sortable-lists.mdx

@@ -358,7 +358,7 @@ export const SortableItem = `import React from 'react';
 import {useSortable} from '@dnd-kit/react/sortable';
 
 export function Item({id, index, column}) {
-  const {ref, isDragSource} = useSortable({
+  const {ref, isDragging} = useSortable({
     id,
     index,
     type: 'item',
@@ -367,7 +367,7 @@ export function Item({id, index, column}) {
   });
 
   return (
-    <button className="Item" ref={ref} data-dragging={isDragSource}>
+    <button className="Item" ref={ref} data-dragging={isDragging}>
       {id}
     </button>
   );

apps/docs/react/hooks/use-draggable.mdx

@@ -80,7 +80,15 @@ The `useDraggable` hook returns an object containing the following properties:
 </ResponseField>
 
 <ResponseField name="isDragSource" type="boolean">
-  A boolean value that indicates whether the element is currently being dragged.
+  A boolean value that indicates whether the draggable is the source of the drag operation that is in progress.
+</ResponseField>
+
+<ResponseField name="isDragging" type="boolean">
+  A boolean value that indicates whether the draggable is currently being dragged.
+</ResponseField>
+
+<ResponseField name="isDropping" type="boolean">
+  A boolean value that indicates whether the draggable is being dropped. This can be used to style the draggable element differently during the drop animation.
 </ResponseField>
 
 <ResponseField name="draggable" type="Draggable">

apps/docs/react/hooks/use-sortable.mdx

@@ -149,5 +149,13 @@ The `useSortable` hook returns an object containing the following properties:
 </ParamField>
 
 <ParamField path="isDragSource" type="boolean">
-  A boolean value that indicates whether the sortable element is currently being dragged.
+  A boolean value that indicates whether the sortable is the source of the drag operation that is in progress.
 </ParamField>
+
+<ResponseField name="isDragging" type="boolean">
+  A boolean value that indicates whether the sortable is currently being dragged.
+</ResponseField>
+
+<ResponseField name="isDropping" type="boolean">
+  A boolean value that indicates whether the sortable is being dropped. This can be used to style the sortable element differently during the drop animation.
+</ResponseField>

apps/stories/stories/react/Draggable/DraggableExample.tsx

@@ -53,7 +53,7 @@ export function Draggable({
   const [element, setElement] = useState<Element | null>(null);
   const handleRef = useRef<HTMLButtonElement | null>(null);
 
-  const {isDragSource} = useDraggable({
+  const {isDragging} = useDraggable({
     id,
     modifiers,
     element,
@@ -64,7 +64,7 @@ export function Draggable({
   return (
     <Button
       ref={setElement}
-      shadow={isDragSource}
+      shadow={isDragging}
       actions={handle ? <Handle ref={handleRef} variant="dark" /> : undefined}
       style={style}
     >

apps/stories/stories/react/Droppable/DroppableExample.tsx

@@ -53,13 +53,13 @@ interface DraggableProps {
 function Draggable({id}: DraggableProps) {
   const [element, setElement] = useState<Element | null>(null);
 
-  const {isDragSource} = useDraggable({
+  const {isDragging} = useDraggable({
     id,
     element,
   });
 
   return (
-    <Button ref={setElement} shadow={isDragSource}>
+    <Button ref={setElement} shadow={isDragging}>
       <DraggableIcon />
     </Button>
   );

apps/stories/stories/react/Sortable/Iframe/IframeExample.tsx

@@ -106,9 +106,7 @@ export function IframeLists({
         </AutoFrame>
       </div>
       <DragOverlay>
-        {(source) => (
-          <Item shadow={source.status == 'dragging'}>{source.id}</Item>
-        )}
+        {(source) => <Item shadow={source.isDragging}>{source.id}</Item>}
       </DragOverlay>
     </DragDropProvider>
   );

apps/stories/stories/react/Sortable/MultipleLists/MultipleLists.tsx

@@ -163,7 +163,7 @@ function SortableItem({
   onRemove,
 }: PropsWithChildren<SortableItemProps>) {
   const group = column;
-  const {handleRef, ref, isDragSource} = useSortable({
+  const {handleRef, ref, isDragging} = useSortable({
     id,
     group,
     accept: 'item',
@@ -178,14 +178,14 @@ function SortableItem({
       ref={ref}
       actions={
         <Actions>
-          {onRemove && !isDragSource ? (
+          {onRemove && !isDragging ? (
             <Remove onClick={() => onRemove(id, column)} />
           ) : null}
           <Handle ref={handleRef} />
         </Actions>
       }
       accentColor={COLORS[column]}
-      shadow={isDragSource}
+      shadow={isDragging}
       style={style}
       transitionId={`sortable-${column}-${id}`}
     >
@@ -210,7 +210,7 @@ function SortableColumn({
   scrollable,
   style,
 }: PropsWithChildren<SortableColumnProps>) {
-  const {handleRef, isDragSource, ref} = useSortable({
+  const {handleRef, isDragging, ref} = useSortable({
     id,
     accept: ['column', 'item'],
     collisionPriority: CollisionPriority.Low,
@@ -228,7 +228,7 @@ function SortableColumn({
         </Actions>
       }
       columns={columns}
-      shadow={isDragSource}
+      shadow={isDragging}
       scrollable={scrollable}
       transitionId={`sortable-column-${id}`}
       style={style}

apps/stories/stories/react/Sortable/SortableExample.tsx

@@ -102,7 +102,7 @@ function SortableItem({
 }: PropsWithChildren<SortableProps>) {
   const [element, setElement] = useState<Element | null>(null);
   const handleRef = useRef<HTMLButtonElement | null>(null);
-  const {isDragSource} = useSortable({
+  const {isDragging} = useSortable({
     id,
     index,
     element,
@@ -117,7 +117,7 @@ function SortableItem({
     <Item
       ref={setElement}
       actions={dragHandle ? <Handle ref={handleRef} /> : null}
-      shadow={isDragSource}
+      shadow={isDragging}
       style={style}
     >
       {id}

apps/stories/stories/react/Sortable/Virtualized/ReactTinyVirtualListExample.tsx

@@ -55,7 +55,7 @@ interface SortableProps {
 }
 
 function Sortable({id, index, style}: SortableProps) {
-  const {isDragSource, ref, handleRef} = useSortable({
+  const {isDragging, ref, handleRef} = useSortable({
     id,
     index,
   });
@@ -68,7 +68,7 @@ function Sortable({id, index, style}: SortableProps) {
       <Item
         actions={<Handle ref={handleRef} />}
         data-index={index}
-        shadow={isDragSource}
+        shadow={isDragging}
       >
         {id}
       </Item>

apps/stories/stories/react/Sortable/Virtualized/ReactVirtualExample.tsx

@@ -98,7 +98,7 @@ const Sortable = forwardRef<Element, PropsWithChildren<SortableProps>>(
     const [element, setElement] = useState<Element | null>(null);
     const handleRef = useRef<HTMLButtonElement | null>(null);
 
-    const {isDragSource} = useSortable({
+    const {isDragging} = useSortable({
       id,
       index,
       element,
@@ -119,7 +119,7 @@ const Sortable = forwardRef<Element, PropsWithChildren<SortableProps>>(
         }}
         actions={<Handle ref={handleRef} />}
         data-index={index}
-        shadow={isDragSource}
+        shadow={isDragging}
       >
         {id}
       </Item>

apps/stories/stories/react/Sortable/Virtualized/ReactWindowExample.tsx

@@ -67,7 +67,7 @@ interface SortableProps {
 }
 
 function Sortable({id, index, style}: SortableProps) {
-  const {isDragSource, ref, handleRef} = useSortable({
+  const {isDragging, ref, handleRef} = useSortable({
     id,
     index,
   });
@@ -80,7 +80,7 @@ function Sortable({id, index, style}: SortableProps) {
       <Item
         actions={<Handle ref={handleRef} />}
         data-index={index}
-        shadow={isDragSource}
+        shadow={isDragging}
       >
         {id}
       </Item>

apps/stories/stories/vanilla/Draggable/DraggableExample.ts

@@ -17,9 +17,7 @@ export const DraggableExample = createVanillaStory(() => {
       element: draggableElement,
       effects: () => [
         () => {
-          const {status} = manager.dragOperation;
-
-          if (draggable.isDragSource && (status.dragging || status.dropped)) {
+          if (draggable.isDragging) {
             draggableElement.setAttribute('data-shadow', 'true');
 
             return () => {

packages/abstract/src/core/entities/draggable/draggable.ts

@@ -40,6 +40,22 @@ export class Draggable<
   @reactive
   public accessor status: DraggableStatus = 'idle';
 
+  /**
+   * A boolean indicating whether the draggable item is being dropped.
+   */
+  @derived
+  public get isDropping() {
+    return this.status === 'dropping' && this.isDragSource;
+  }
+
+  /**
+   * A boolean indicating whether the draggable item is being dropped.
+   */
+  @derived
+  public get isDragging() {
+    return this.status === 'dragging' && this.isDragSource;
+  }
+
   /**
    * A boolean indicating whether the draggable item is the source of a drag operation.
    */

packages/dom/src/sortable/sortable.ts

@@ -371,6 +371,20 @@ export class Sortable<T extends Data = Data> {
     return this.draggable.isDragSource;
   }
 
+  /**
+   * A boolean indicating whether the sortable item is being dragged.
+   */
+  public get isDragging() {
+    return this.draggable.isDragging;
+  }
+
+  /**
+   * A boolean indicating whether the sortable item is being dropped.
+   */
+  public get isDropping() {
+    return this.draggable.isDropping;
+  }
+
   public get status() {
     return this.draggable.status;
   }

packages/react/src/core/draggable/useDraggable.ts

@@ -7,6 +7,7 @@ import {
   useComputed,
   useOnValueChange,
   useOnElementChange,
+  useDeepSignal,
 } from '@dnd-kit/react/hooks';
 import {currentValue, type RefOrValue} from '@dnd-kit/react/utilities';
 
@@ -33,7 +34,7 @@ export function useDraggable<T extends Data = Data>(
         manager
       )
   );
-  const isDragSource = useComputed(() => draggable.isDragSource, [draggable]);
+  const trackedDraggable = useDeepSignal(draggable);
   const status = useComputed(() => draggable.status, [draggable]);
 
   useOnValueChange(id, () => (draggable.id = id));
@@ -54,12 +55,15 @@ export function useDraggable<T extends Data = Data>(
   );
 
   return {
-    draggable,
-    get isDragSource() {
-      return isDragSource.value;
+    draggable: trackedDraggable,
+    get isDragging() {
+      return trackedDraggable.isDragging;
+    },
+    get isDropping() {
+      return trackedDraggable.isDropping;
     },
-    get status() {
-      return status.value;
+    get isDragSource() {
+      return trackedDraggable.isDragSource;
     },
     handleRef: useCallback(
       (element: Element | null) => {

packages/react/src/core/droppable/useDroppable.ts

@@ -7,6 +7,7 @@ import {
   useComputed,
   useOnValueChange,
   useOnElementChange,
+  useDeepSignal,
 } from '@dnd-kit/react/hooks';
 import {currentValue, type RefOrValue} from '@dnd-kit/react/utilities';
 
@@ -31,7 +32,7 @@ export function useDroppable<T extends Data = Data>(
         manager
       )
   );
-  const isDropTarget = useComputed(() => droppable.isDropTarget, [droppable]);
+  const trackedDroppalbe = useDeepSignal(droppable);
 
   useOnValueChange(id, () => (droppable.id = id));
   useOnElementChange(element, (element) => (droppable.element = element));
@@ -42,8 +43,9 @@ export function useDroppable<T extends Data = Data>(
   useOnValueChange(type, () => (droppable.id = id));
 
   return {
+    droppable: trackedDroppalbe,
     get isDropTarget() {
-      return isDropTarget.value;
+      return trackedDroppalbe.isDropTarget;
     },
     ref: useCallback(
       (element: Element | null) => {
@@ -59,6 +61,5 @@ export function useDroppable<T extends Data = Data>(
       },
       [droppable]
     ),
-    droppable,
   };
 }

packages/react/src/sortable/useSortable.ts

@@ -10,6 +10,7 @@ import {
   useIsomorphicLayoutEffect,
   useOnValueChange,
   useOnElementChange,
+  useDeepSignal,
 } from '@dnd-kit/react/hooks';
 import {currentValue, type RefOrValue} from '@dnd-kit/react/utilities';
 
@@ -52,9 +53,7 @@ export function useSortable<T extends Data = Data>(input: UseSortableInput<T>) {
     );
   });
 
-  const isDropTarget = useComputed(() => sortable.isDropTarget, [sortable]);
-  const isDragSource = useComputed(() => sortable.isDragSource, [sortable]);
-  const status = useComputed(() => sortable.status, [sortable]);
+  const trackedSortable = useDeepSignal(sortable);
 
   useOnValueChange(id, () => (sortable.id = id));
 
@@ -105,14 +104,18 @@ export function useSortable<T extends Data = Data>(input: UseSortableInput<T>) {
   );
 
   return {
+    sortable: trackedSortable,
+    get isDragging() {
+      return trackedSortable.isDragging;
+    },
+    get isDropping() {
+      return trackedSortable.isDropping;
+    },
     get isDragSource() {
-      return isDragSource.value;
+      return trackedSortable.isDragSource;
     },
     get isDropTarget() {
-      return isDropTarget.value;
-    },
-    get status() {
-      return status.value;
+      return trackedSortable.isDropTarget;
     },
     handleRef: useCallback(
       (element: Element | null) => {