React Dnd Versions Save

Major

• Packages are now ESM-Only (https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)
• Node 18 Support

The utility packages @react-dnd/invariant, @react-dnd/shallowequal, and @react-dnd/asap (which are forks of popular libraries) have been included in the monorepo and built using the same output mechanisms as the react-dnd core packages (dual EJS/CSM).

@react-dnd/asap has been simplified to remove the node variant, which relied on deprecated APIs

• All packages now have verified ESM support
• Packages expose CJS/ESM surface are via pkg.exports

This release uses output from swc using the 'es2017' target instead of using output from 'tsc' using the 'ESNext' target.

This release fixes issues with the ESM-only structure of v15.0.0. All packages are now in their prior CommonJS/ESM format.

Major Changes

• The react-dnd packages are now published as ESM-only with type: module. See this FAQ by sindresorhus: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

• The Decorators API has been removed and fully replaced by the Hooks API. The Decorators API was difficult to develop & type correctly, and this improves its maintainability.

• The builds no longer use babel & preset-env. The library is transpiled using SWC into the "es2017" target, which assumes async/await is available. This should reduce bundle sizes by removing polyfills and support-code which may be unnecessary in your target.

Bugfixes

• Improve data-transfer acquisition from File inputs (#3262)
• Don't set the 'draggable' attribute unless canDrag is true (#3187)
• Improve typings of DropTargetMonitor, DragLayerMonitor (#3300, #3341)

Updated

react-dnd: 14.0.3 react-dnd-html5-backend: 14.0.1 react-dnd-touch-backend: 14.1.0

Patch Updates

• Fix drop operations in iframes & child windows (#3181) (thanks @eramdam!)
• Refactor TouchBackend OptionsReader (#3291)
• Cleanup connected DOM elements from react-dnd internals when hook-based components unmount (#3290)
• Fix issue where custom drag-sources where triggering native drops in Firefox (#3272) (thanks @istateside)

Patch

This PR will throw a developer exception if a user specifies a useDrag::spec.begin method.

Patch

Update internal hook useDragType() to align with updated typings. Check 14.0.0 release for API changes

This release addresses a handful of nagging liveness and ergonomic issues with the hooks API.

The liveness issues affect all hooks, and were discovered on deeper inspection of certain stress tests in the documentation. The internal useCollector() hook is used to collect props from the DnD system when things change. Prior to this update, we subscribed to updates from the DnD monitor to trigger prop collection. However, state on the react side was only accounted for on the first render. This release improves that liveness by collecting props whenever react state changes.

The ergonomics of the useDrag have been refactored. In short:

• spec.type is required
• spec.item can be a function or static object.
• The function version of spec.item replaces spec.begin

Since the release of the hooks API, we packed type under spec.item. However, this led to nonintuitive situations where an item field was required to be specified even though items are created in the begin method.

Additionally, in the original React-DnD design, beginDrag() was optional and the type of the draggables had to be defined. If no explicit DragObject was created, an implicit object was created by the system..

The change we've made here decouples type from item, and collapses begin into item.

// Pre-v14
useDrag({
   // item defined here to get a type
   item: { type: BOX } },
   // ...but the actual item is created here
   begin: () => ({ id })
})

// v14
useDrag({
   type: BOX,
   item: () => ({id})
})

e.g. useDrag({ item: { type: BOX }}) => useDrag({ type: 'BOX' })

We've also added the ability to cancel drag operations in the hooks API by returning null from begin.

// new API
useDrag({
  type: BOX,
  item: () => shouldNotDrag ? null : {id},
})