react-dnd/react-dnd (react-dnd)
### [`v16.0.1`](https://togithub.com/react-dnd/react-dnd/compare/v16.0.0...def672e2ad5c72cc63349ee7572ccafdea9886cc)
[Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v16.0.0...def672e2ad5c72cc63349ee7572ccafdea9886cc)
### [`v16.0.0`](https://togithub.com/react-dnd/react-dnd/releases/tag/v16.0.0)
[Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v15.1.2...v16.0.0)
##### Major
- Packages are now ESM-Only (https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)
- Node 18 Support
### [`v15.1.2`](https://togithub.com/react-dnd/react-dnd/releases/tag/v15.1.2)
[Compare Source](https://togithub.com/react-dnd/react-dnd/compare/93558ea7153543a55ff38da77cdab3a922fe5085...v15.1.2)
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
### [`v15.1.1`](https://togithub.com/react-dnd/react-dnd/compare/v15.1.0...93558ea7153543a55ff38da77cdab3a922fe5085)
[Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v15.1.0...93558ea7153543a55ff38da77cdab3a922fe5085)
### [`v15.1.0`](https://togithub.com/react-dnd/react-dnd/releases/tag/v15.1.0)
[Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v15.0.2...v15.1.0)
- All packages now have verified ESM support
- Packages expose CJS/ESM surface are via `pkg.exports`
### [`v15.0.2`](https://togithub.com/react-dnd/react-dnd/releases/tag/v15.0.2)
[Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v15.0.1...v15.0.2)
This release uses output from swc using the 'es2017' target instead of using output from 'tsc' using the 'ESNext' target.
### [`v15.0.1`](https://togithub.com/react-dnd/react-dnd/releases/tag/v15.0.1)
[Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v15.0.0...v15.0.1)
This release fixes issues with the ESM-only structure of v15.0.0. All packages are now in their prior CommonJS/ESM format.
### [`v15.0.0`](https://togithub.com/react-dnd/react-dnd/releases/tag/v15.0.0)
#### 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](https://togithub.com/react-dnd/react-dnd/issues/3262))
- Don't set the 'draggable' attribute unless `canDrag` is true ([#3187](https://togithub.com/react-dnd/react-dnd/issues/3187))
- Improve typings of DropTargetMonitor, DragLayerMonitor ([#3300](https://togithub.com/react-dnd/react-dnd/issues/3300), [#3341](https://togithub.com/react-dnd/react-dnd/issues/3341))
### [`v14.0.3`](https://togithub.com/react-dnd/react-dnd/releases/tag/v14.0.3)
[Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v14.0.2...v14.0.3)
#### 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](https://togithub.com/react-dnd/react-dnd/issues/3181)) (thanks [@eramdam](https://togithub.com/eramdam)!)
- Refactor TouchBackend OptionsReader ([#3291](https://togithub.com/react-dnd/react-dnd/issues/3291))
- Cleanup connected DOM elements from react-dnd internals when hook-based components unmount ([#3290](https://togithub.com/react-dnd/react-dnd/issues/3290))
- Fix issue where custom drag-sources where triggering native drops in Firefox ([#3272](https://togithub.com/react-dnd/react-dnd/issues/3272)) (thanks [@istateside](https://togithub.com/istateside))
### [`v14.0.2`](https://togithub.com/react-dnd/react-dnd/releases/tag/v14.0.2)
[Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v14.0.1...v14.0.2)
##### Patch
This PR will throw a developer exception if a user specifies a `useDrag::spec.begin` method.
### [`v14.0.1`](https://togithub.com/react-dnd/react-dnd/releases/tag/v14.0.1): 14.0.1
[Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v14.0.0...v14.0.1)
#### Patch
Update internal hook `useDragType()` to align with updated typings. Check 14.0.0 release for API changes
### [`v14.0.0`](https://togithub.com/react-dnd/react-dnd/releases/tag/v14.0.0): 14.0.0
[Compare Source](https://togithub.com/react-dnd/react-dnd/compare/13.1.1...v14.0.0)
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`.
```js
// 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`.
```js
// new API
useDrag({
type: BOX,
item: () => shouldNotDrag ? null : {id},
})
```
### [`v13.1.1`](https://togithub.com/react-dnd/react-dnd/releases/tag/13.1.1)
[Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v13.1.0...13.1.1)
#### react-dnd
##### Patch
- Re-register drag sources in hooks API when `item.type` changes
- Export missing typings
#### react-dnd-html5-backend
#### Patch
- Export `HTML5Context`, `HTML5BackendOptions` interfaces
### [`v13.1.0`](https://togithub.com/react-dnd/react-dnd/releases/tag/v13.1.0)
[Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v13.0.1...v13.1.0)
### react-dnd
TLDR: `useDrag` and `useDrop` support both a memo pattern and a spec object now.
```js
useDrag(() => spec) // good
useDrag(spec) // also good
```
In v13, we've tried to address some errors that were pervading with the react-dnd hooks API. Generally, making sure DragSource/DropTargets were up-to-date and that the system wasn't leaking handles was a precarious balancing act. Moving to a memo API pattern (e.g. useDrag(() => spec)) fixed this problem in our tests.
However, as we dug further into handler leakage issues, it became clear that anything using the hooks would reattach and receive a new handler ID whenever the spec changed at all. This was in contrast to the Decorator API's behavior of keeping stable handler IDs as the incoming props changed.
To fix the Hooks API to stop leaking handlers, we found a pretty simple solution: a classical class with a public setter for the `spec` object that's updated via a `useEffect` hook. This neatly avoids the mutating DragSource/DropTargets on every spec change. This had two effects: identifiers have been stabilized, and *spec objects were usable again* because changing them didn't cause DragSource/DropTarget instances to be regenerated and reattached.
In retrospect, this undoes the necessity of the major cut that happened with v13, but the Hooks API is much sturdier now. We hope that you find the improved memory stability in the hooks API to be useful in your projects.
### [`v13.0.1`](https://togithub.com/react-dnd/react-dnd/releases/tag/v13.0.1)
[Compare Source](https://togithub.com/react-dnd/react-dnd/compare/13.0.0...v13.0.1)
#### Patch Updates
- Add invariant() invocations in useDrag, useDrop to verify that spec functions are used instead of objects
- Fix handler registration memory leak issue with useDrag, useDrop
### [`v13.0.0`](https://togithub.com/react-dnd/react-dnd/releases/tag/13.0.0)
### React-DnD v13, Others v12
v12 was largely structural and organizational, but some issues were discovered shortly after release that warranted changing the hooks API.
#### Breaking Changes
- `useDrag`, `useDrop` hooks accept functions that create spec objects instead of spec objects directly. Clients can think about the API to useDrag() and useDrop() as being analogous to useMemo(). This allows clients to have direct control over when their DnD specifications are re-generated (which internally reattaches them to the DnD system).
- Use jsx-factory throughout the library
#### Non-Breaking Changes
- Add HTML native draggable type to HTML5Backend (see new example)
- Clients can specify a `rootElement` component in the HTML5Backend options to localize where DnD will process events in the client app.
- react-dnd-test-utils has improved support for testing with HTML5Backend and using [@testing-library/react](https://togithub.com/testing-library/react) to simulate drag-and-drop sequences.
Configuration
📅 Schedule: Branch creation - "every weekday" (UTC), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about these updates again.
[ ] If you want to rebase/retry this PR, check this box
This PR has been generated by Mend Renovate. View repository job log here.
This PR contains the following updates:
^11.1.3->^16.0.0^11.1.3->^16.0.0Release Notes
react-dnd/react-dnd (react-dnd)
### [`v16.0.1`](https://togithub.com/react-dnd/react-dnd/compare/v16.0.0...def672e2ad5c72cc63349ee7572ccafdea9886cc) [Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v16.0.0...def672e2ad5c72cc63349ee7572ccafdea9886cc) ### [`v16.0.0`](https://togithub.com/react-dnd/react-dnd/releases/tag/v16.0.0) [Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v15.1.2...v16.0.0) ##### Major - Packages are now ESM-Only (https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c) - Node 18 Support ### [`v15.1.2`](https://togithub.com/react-dnd/react-dnd/releases/tag/v15.1.2) [Compare Source](https://togithub.com/react-dnd/react-dnd/compare/93558ea7153543a55ff38da77cdab3a922fe5085...v15.1.2) 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 ### [`v15.1.1`](https://togithub.com/react-dnd/react-dnd/compare/v15.1.0...93558ea7153543a55ff38da77cdab3a922fe5085) [Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v15.1.0...93558ea7153543a55ff38da77cdab3a922fe5085) ### [`v15.1.0`](https://togithub.com/react-dnd/react-dnd/releases/tag/v15.1.0) [Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v15.0.2...v15.1.0) - All packages now have verified ESM support - Packages expose CJS/ESM surface are via `pkg.exports` ### [`v15.0.2`](https://togithub.com/react-dnd/react-dnd/releases/tag/v15.0.2) [Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v15.0.1...v15.0.2) This release uses output from swc using the 'es2017' target instead of using output from 'tsc' using the 'ESNext' target. ### [`v15.0.1`](https://togithub.com/react-dnd/react-dnd/releases/tag/v15.0.1) [Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v15.0.0...v15.0.1) This release fixes issues with the ESM-only structure of v15.0.0. All packages are now in their prior CommonJS/ESM format. ### [`v15.0.0`](https://togithub.com/react-dnd/react-dnd/releases/tag/v15.0.0) #### 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](https://togithub.com/react-dnd/react-dnd/issues/3262)) - Don't set the 'draggable' attribute unless `canDrag` is true ([#3187](https://togithub.com/react-dnd/react-dnd/issues/3187)) - Improve typings of DropTargetMonitor, DragLayerMonitor ([#3300](https://togithub.com/react-dnd/react-dnd/issues/3300), [#3341](https://togithub.com/react-dnd/react-dnd/issues/3341)) ### [`v14.0.3`](https://togithub.com/react-dnd/react-dnd/releases/tag/v14.0.3) [Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v14.0.2...v14.0.3) #### 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](https://togithub.com/react-dnd/react-dnd/issues/3181)) (thanks [@eramdam](https://togithub.com/eramdam)!) - Refactor TouchBackend OptionsReader ([#3291](https://togithub.com/react-dnd/react-dnd/issues/3291)) - Cleanup connected DOM elements from react-dnd internals when hook-based components unmount ([#3290](https://togithub.com/react-dnd/react-dnd/issues/3290)) - Fix issue where custom drag-sources where triggering native drops in Firefox ([#3272](https://togithub.com/react-dnd/react-dnd/issues/3272)) (thanks [@istateside](https://togithub.com/istateside)) ### [`v14.0.2`](https://togithub.com/react-dnd/react-dnd/releases/tag/v14.0.2) [Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v14.0.1...v14.0.2) ##### Patch This PR will throw a developer exception if a user specifies a `useDrag::spec.begin` method. ### [`v14.0.1`](https://togithub.com/react-dnd/react-dnd/releases/tag/v14.0.1): 14.0.1 [Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v14.0.0...v14.0.1) #### Patch Update internal hook `useDragType()` to align with updated typings. Check 14.0.0 release for API changes ### [`v14.0.0`](https://togithub.com/react-dnd/react-dnd/releases/tag/v14.0.0): 14.0.0 [Compare Source](https://togithub.com/react-dnd/react-dnd/compare/13.1.1...v14.0.0) 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`. ```js // 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`. ```js // new API useDrag({ type: BOX, item: () => shouldNotDrag ? null : {id}, }) ``` ### [`v13.1.1`](https://togithub.com/react-dnd/react-dnd/releases/tag/13.1.1) [Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v13.1.0...13.1.1) #### react-dnd ##### Patch - Re-register drag sources in hooks API when `item.type` changes - Export missing typings #### react-dnd-html5-backend #### Patch - Export `HTML5Context`, `HTML5BackendOptions` interfaces ### [`v13.1.0`](https://togithub.com/react-dnd/react-dnd/releases/tag/v13.1.0) [Compare Source](https://togithub.com/react-dnd/react-dnd/compare/v13.0.1...v13.1.0) ### react-dnd TLDR: `useDrag` and `useDrop` support both a memo pattern and a spec object now. ```js useDrag(() => spec) // good useDrag(spec) // also good ``` In v13, we've tried to address some errors that were pervading with the react-dnd hooks API. Generally, making sure DragSource/DropTargets were up-to-date and that the system wasn't leaking handles was a precarious balancing act. Moving to a memo API pattern (e.g. useDrag(() => spec)) fixed this problem in our tests. However, as we dug further into handler leakage issues, it became clear that anything using the hooks would reattach and receive a new handler ID whenever the spec changed at all. This was in contrast to the Decorator API's behavior of keeping stable handler IDs as the incoming props changed. To fix the Hooks API to stop leaking handlers, we found a pretty simple solution: a classical class with a public setter for the `spec` object that's updated via a `useEffect` hook. This neatly avoids the mutating DragSource/DropTargets on every spec change. This had two effects: identifiers have been stabilized, and *spec objects were usable again* because changing them didn't cause DragSource/DropTarget instances to be regenerated and reattached. In retrospect, this undoes the necessity of the major cut that happened with v13, but the Hooks API is much sturdier now. We hope that you find the improved memory stability in the hooks API to be useful in your projects. ### [`v13.0.1`](https://togithub.com/react-dnd/react-dnd/releases/tag/v13.0.1) [Compare Source](https://togithub.com/react-dnd/react-dnd/compare/13.0.0...v13.0.1) #### Patch Updates - Add invariant() invocations in useDrag, useDrop to verify that spec functions are used instead of objects - Fix handler registration memory leak issue with useDrag, useDrop ### [`v13.0.0`](https://togithub.com/react-dnd/react-dnd/releases/tag/13.0.0) ### React-DnD v13, Others v12 v12 was largely structural and organizational, but some issues were discovered shortly after release that warranted changing the hooks API. #### Breaking Changes - `useDrag`, `useDrop` hooks accept functions that create spec objects instead of spec objects directly. Clients can think about the API to useDrag() and useDrop() as being analogous to useMemo(). This allows clients to have direct control over when their DnD specifications are re-generated (which internally reattaches them to the DnD system). - Use jsx-factory throughout the library #### Non-Breaking Changes - Add HTML native draggable type to HTML5Backend (see new example) - Clients can specify a `rootElement` component in the HTML5Backend options to localize where DnD will process events in the client app. - react-dnd-test-utils has improved support for testing with HTML5Backend and using [@testing-library/react](https://togithub.com/testing-library/react) to simulate drag-and-drop sequences.Configuration
📅 Schedule: Branch creation - "every weekday" (UTC), Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about these updates again.
This PR has been generated by Mend Renovate. View repository job log here.