@duro-app/ui 3.2.0 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^3.2.0"
+    "@duro-app/tokens": "^3.2.1"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/DragDrop/DragDrop.stories.tsx

@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {expect, fn} from 'storybook/test'
-import {useState} from 'react'
+import {expect, fn, waitFor} from 'storybook/test'
+import {StrictMode, useState} from 'react'
 import {css, html} from 'react-strict-dom'
 import {DragDrop, type DragDropEvent} from './DragDrop'
 import {Button} from '../Button/Button'
@@ -219,21 +219,42 @@ export const TouchBurstAfterHold: Story = {
           ),
         )
       }
-      await new Promise((r) => requestAnimationFrame(() => r(null)))
-      // Checkpoint: the burst alone must have activated the drag.
-      await expect(canvas.getByRole('status')).toHaveTextContent('Picked up Noor.')
+      // Checkpoint: the burst alone must have activated the drag. The update
+      // came from a native event, so React flushes it on its own task.
+      await waitFor(() => expect(canvas.getByRole('status')).toHaveTextContent('Picked up Noor.'))
       document.dispatchEvent(new PointerEvent('pointerup', init(ex, ey, 0)))
     } finally {
       window.setTimeout = original
     }
-    // The release came from a native event; React flushes it asynchronously.
-    await new Promise((r) => setTimeout(r, 50))
-    await expect(canvas.getByRole('status')).toHaveTextContent('Dropped Noor in Gates.')
+    await waitFor(() =>
+      expect(canvas.getByRole('status')).toHaveTextContent('Dropped Noor in Gates.'),
+    )
     await expect(args.onDrop).toHaveBeenCalledTimes(1)
     await expect(canvas.queryByRole('button', {name: 'Noor'})).toBeNull()
   },
 }
 
+/** onDrop runs from the release handler, not from a state updater, so
+ *  StrictMode's double-invoked updaters cannot fire it twice. */
+export const StrictModeDropsOnce: Story = {
+  args: {onDrop: fn()},
+  render: (args) => (
+    <StrictMode>
+      <Board onDrop={args.onDrop as never} />
+    </StrictMode>
+  ),
+  play: async ({canvas, args}) => {
+    const marie = await canvas.findByRole('button', {name: 'Marie'})
+    const gatesZone = canvas.getByText('Drop a person here.')
+    await pointerDrag(marie.parentElement as Element, gatesZone)
+    await waitFor(() =>
+      expect(canvas.getByRole('status')).toHaveTextContent('Dropped Marie in Gates.'),
+    )
+    await expect(args.onDrop).toHaveBeenCalledTimes(1)
+    await expect(canvas.queryByRole('button', {name: 'Marie'})).toBeNull()
+  },
+}
+
 /** A plain click on an item still reaches the button inside: no drag starts
  *  under the movement threshold. */
 export const TapStaysAClick: Story = {

package/src/components/DragDrop/DragDrop.tsx

@@ -188,8 +188,12 @@ function Root<T = unknown>({onDrop, announce, children}: DragDropRootProps<T>) {
     return null
   }, [])
 
+  // `target` is the resolved drop target (null cancels). The consumer's
+  // onDrop runs here, in the event handler, never inside a state updater:
+  // React may call an updater more than once and forbids updating another
+  // component from it.
   const finish = useCallback(
-    (dropped: boolean) => {
+    (target: DragDropTarget | null) => {
       const s = session.current
       if (!s) return
       if (s.holdTimer) clearTimeout(s.holdTimer)
@@ -202,17 +206,14 @@ function Root<T = unknown>({onDrop, announce, children}: DragDropRootProps<T>) {
         // already released
       }
       if (!s.active) return
-      setDrag((current) => {
-        const target = current?.over ?? null
-        const item = items.current.get(s.id)
-        if (dropped && target && item) {
-          onDrop({item: {id: s.id, zone: item.zone, data: item.data as T}, target})
-          say('drop', s.id, target.zone)
-        } else {
-          say('cancel', s.id)
-        }
-        return null
-      })
+      const item = items.current.get(s.id)
+      setDrag(null)
+      if (target && item) {
+        onDrop({item: {id: s.id, zone: item.zone, data: item.data as T}, target})
+        say('drop', s.id, target.zone)
+      } else {
+        say('cancel', s.id)
+      }
     },
     [onDrop, say],
   )
@@ -295,7 +296,7 @@ function Root<T = unknown>({onDrop, announce, children}: DragDropRootProps<T>) {
             activate(s, s.startX, s.startY)
           } else {
             // Moved before the hold elapsed: a flick, not a drag.
-            if (moved > MOVE_THRESHOLD_PX) finish(false)
+            if (moved > MOVE_THRESHOLD_PX) finish(null)
             return
           }
         } else {
@@ -319,19 +320,15 @@ function Root<T = unknown>({onDrop, announce, children}: DragDropRootProps<T>) {
       const s = session.current
       if (!s || e.pointerId !== s.pointerId) return
       // Resolve the target from the release point, not the last frame.
-      if (s.active) {
-        const over = locate(s.id, e.clientX, e.clientY)
-        setDrag((current) => (current ? {...current, over} : current))
-      }
-      finish(true)
+      finish(s.active ? locate(s.id, e.clientX, e.clientY) : null)
     }
     const onCancel = (e: PointerEvent) => {
       const s = session.current
       if (!s || e.pointerId !== s.pointerId) return
-      finish(false)
+      finish(null)
     }
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && session.current) finish(false)
+      if (e.key === 'Escape' && session.current) finish(null)
     }
     document.addEventListener('pointermove', onMove)
     document.addEventListener('pointerup', onUp)