Bump react-dnd from 11.1.3 to 14.0.2 #405

dependabot · 2021-04-05T05:08:50Z

Bumps react-dnd from 11.1.3 to 14.0.2.

Release notes

v14.0.2

Patch

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

14.0.1

Patch

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

14.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.
// 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},
})
</tr></table> 

... (truncated)

Commits

f6e9642 chore: version bumps (#3152)
2ccd0c6 Add warning to useDrag's spec.begin (#3151)
1fdd144 Fix Stale Closure issue in Hooks Example (#3134)
03df2fe chore: cut 14.0.1
059466a fix: simplify useDragType (#3127)
f740f8d chore: bump versions (#3126)
8073361 useDrag() Hook Changes (#3114)
83d8a47 Dependabot autofix
6055276 Dependabot autofix
0e5a222 Dependabot autofix
Additional commits viewable in compare view

You can trigger a rebase of this PR by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

Bumps [react-dnd](https://github.com/react-dnd/react-dnd) from 11.1.3 to 14.0.2. - [Release notes](https://github.com/react-dnd/react-dnd/releases) - [Changelog](https://github.com/react-dnd/react-dnd/blob/main/CHANGELOG.md) - [Commits](react-dnd/react-dnd@v11.1.3...v14.0.2) Signed-off-by: dependabot[bot] <support@github.com>

nelsonni · 2021-06-30T22:47:59Z

ERROR in src/components/CanvasComponent.tsx:46:15
TS2571: Object is of type 'unknown'.
    44 |     accept: ['CARD', 'STACK'],
    45 |     canDrop: (_item, monitor) => {
  > 46 |       return !monitor.getItem().captured;
       |               ^^^^^^^^^^^^^^^^^
    47 |     },
    48 |     drop: (item, monitor) => {
    49 |       switch (item.type) {

ERROR in src/components/CanvasComponent.tsx:49:15
TS2571: Object is of type 'unknown'.
    47 |     },
    48 |     drop: (item, monitor) => {
  > 49 |       switch (item.type) {
       |               ^^^^
    50 |         case 'CARD': {
    51 |           const card = cards[monitor.getItem().id];
    52 |           const delta = monitor.getDifferenceFromInitialOffset();

ERROR in src/components/CanvasComponent.tsx:51:30
TS2571: Object is of type 'unknown'.
    49 |       switch (item.type) {
    50 |         case 'CARD': {
  > 51 |           const card = cards[monitor.getItem().id];
       |                              ^^^^^^^^^^^^^^^^^
    52 |           const delta = monitor.getDifferenceFromInitialOffset();
    53 |           if (!delta) return; // no dragging is occurring, perhaps a card was picked up and dropped without dragging
    54 |           if (card.captured) {

ERROR in src/components/CanvasComponent.tsx:62:32
TS2571: Object is of type 'unknown'.
    60 |         }
    61 |         case 'STACK': {
  > 62 |           const stack = stacks[monitor.getItem().id];
       |                                ^^^^^^^^^^^^^^^^^
    63 |           const delta = monitor.getDifferenceFromInitialOffset();
    64 |           if (!delta) return; // no dragging is occurring, perhaps a stack was picked up and dropped without dragging
    65 |           dispatch(updateStack({ ...stack, left: Math.round(stack.left + delta.x), top: Math.round(stack.top + delta.y) }));

ERROR in src/components/CardComponent.tsx:85:12
TS2339: Property 'isDragging' does not exist on type 'unknown'.
    83 | 
    84 |   // Enable CardComponent as a drop source (i.e. allowing this card to be draggable)
  > 85 |   const [{ isDragging }, drag] = useDrag({
       |            ^^^^^^^^^^
    86 |     item: { type: 'CARD', id: props.id },
    87 |     collect: monitor => ({
    88 |       isDragging: !!monitor.isDragging(),

ERROR in src/components/CardComponent.tsx:85:42
TS2345: Argument of type '{ item: { type: string; id: string; }; collect: (monitor: DragSourceMonitor<{ type: string; id: string; }, unknown>) => { isDragging: boolean; }; }' is not assignable to parameter of type 'FactoryOrInstance<DragSourceHookSpec<{ type: string; id: string; }, unknown, unknown>>'.
  Property 'type' is missing in type '{ item: { type: string; id: string; }; collect: (monitor: DragSourceMonitor<{ type: string; id: string; }, unknown>) => { isDragging: boolean; }; }' but required in type 'DragSourceHookSpec<{ type: string; id: string; }, unknown, unknown>'.
    83 | 
    84 |   // Enable CardComponent as a drop source (i.e. allowing this card to be draggable)
  > 85 |   const [{ isDragging }, drag] = useDrag({
       |                                          ^
  > 86 |     item: { type: 'CARD', id: props.id },
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 87 |     collect: monitor => ({
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 88 |       isDragging: !!monitor.isDragging(),
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 89 |     }),
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 90 |   });
       | ^^^^
    91 | 
    92 |   // Enable CardComponent as a drop target (i.e. allow other elements to be dropped on this card)
    93 |   const [{ isOver }, drop] = useDrop({

ERROR in src/components/CardComponent.tsx:97:26
TS2571: Object is of type 'unknown'.
     95 |     canDrop: (item, monitor) => {
     96 |       const dropTarget = cards[props.id];
  >  97 |       const dropSource = item.type === 'CARD' ? cards[monitor.getItem().id] : stacks[monitor.getItem().id];
        |                          ^^^^
     98 |       return dropTarget.id !== dropSource.id; // restrict dropped items from accepting a self-referencing drop (i.e. dropping a card on itself)
     99 |     },
    100 |     drop: (item, monitor) => {

ERROR in src/components/CardComponent.tsx:97:55
TS2571: Object is of type 'unknown'.
     95 |     canDrop: (item, monitor) => {
     96 |       const dropTarget = cards[props.id];
  >  97 |       const dropSource = item.type === 'CARD' ? cards[monitor.getItem().id] : stacks[monitor.getItem().id];
        |                                                       ^^^^^^^^^^^^^^^^^
     98 |       return dropTarget.id !== dropSource.id; // restrict dropped items from accepting a self-referencing drop (i.e. dropping a card on itself)
     99 |     },
    100 |     drop: (item, monitor) => {

ERROR in src/components/CardComponent.tsx:97:86
TS2571: Object is of type 'unknown'.
     95 |     canDrop: (item, monitor) => {
     96 |       const dropTarget = cards[props.id];
  >  97 |       const dropSource = item.type === 'CARD' ? cards[monitor.getItem().id] : stacks[monitor.getItem().id];
        |                                                                                      ^^^^^^^^^^^^^^^^^
     98 |       return dropTarget.id !== dropSource.id; // restrict dropped items from accepting a self-referencing drop (i.e. dropping a card on itself)
     99 |     },
    100 |     drop: (item, monitor) => {

ERROR in src/components/CardComponent.tsx:104:15
TS2571: Object is of type 'unknown'.
    102 |       const delta = monitor.getDifferenceFromInitialOffset();
    103 |       if (!delta) return; // no dragging is occurring, perhaps a draggable element was picked up and dropped without dragging
  > 104 |       switch (item.type) {
        |               ^^^^
    105 |         case 'CARD': {
    106 |           const dropSource = cards[monitor.getItem().id];
    107 |           if (dropSource.captured) {

ERROR in src/components/CardComponent.tsx:106:36
TS2571: Object is of type 'unknown'.
    104 |       switch (item.type) {
    105 |         case 'CARD': {
  > 106 |           const dropSource = cards[monitor.getItem().id];
        |                                    ^^^^^^^^^^^^^^^^^
    107 |           if (dropSource.captured) {
    108 |             dispatch(popCard(stacks[dropSource.captured], dropSource, delta));
    109 |           }

ERROR in src/components/CardComponent.tsx:121:39
TS2571: Object is of type 'unknown'.
    119 |         case 'STACK': {
    120 |           if (!props.captured) {
  > 121 |             const dropSource = stacks[monitor.getItem().id];
        |                                       ^^^^^^^^^^^^^^^^^
    122 |             const actions = pushCards(dropSource, [dropTarget]);
    123 |             actions.map(action => dispatch(action));
    124 |           }

ERROR in src/components/StackComponent.tsx:17:12
TS2339: Property 'isDragging' does not exist on type 'unknown'.
    15 | 
    16 |   // Enable StackComponent as a drop source (i.e. allowing this stack to be draggable)
  > 17 |   const [{ isDragging }, drag] = useDrag({
       |            ^^^^^^^^^^
    18 |     item: { type: 'STACK', id: props.id },
    19 |     collect: monitor => ({
    20 |       item: monitor.getItem(),

ERROR in src/components/StackComponent.tsx:17:42
TS2345: Argument of type '{ item: { type: string; id: string; }; collect: (monitor: DragSourceMonitor<{ type: string; id: string; }, unknown>) => { item: { type: string; id: string; }; isDragging: boolean; }; }' is not assignable to parameter of type 'FactoryOrInstance<DragSourceHookSpec<{ type: string; id: string; }, unknown, unknown>>'.
  Property 'type' is missing in type '{ item: { type: string; id: string; }; collect: (monitor: DragSourceMonitor<{ type: string; id: string; }, unknown>) => { item: { type: string; id: string; }; isDragging: boolean; }; }' but required in type 'DragSourceHookSpec<{ type: string; id: string; }, unknown, unknown>'.
    15 | 
    16 |   // Enable StackComponent as a drop source (i.e. allowing this stack to be draggable)
  > 17 |   const [{ isDragging }, drag] = useDrag({
       |                                          ^
  > 18 |     item: { type: 'STACK', id: props.id },
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 19 |     collect: monitor => ({
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 20 |       item: monitor.getItem(),
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 21 |       isDragging: !!monitor.isDragging()
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 22 |     })
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 23 |   });
       | ^^^^
    24 | 
    25 |   // Enable StackComponent as a drop target (i.e. allow other elements to be dropped on this stack)
    26 |   const [, drop] = useDrop({

ERROR in src/components/StackComponent.tsx:30:26
TS2571: Object is of type 'unknown'.
    28 |     canDrop: (item, monitor) => {
    29 |       const dropTarget = stacks[props.id];
  > 30 |       const dropSource = item.type === 'CARD' ? cards[monitor.getItem().id] : stacks[monitor.getItem().id];
       |                          ^^^^
    31 |       return dropTarget && dropTarget.id !== dropSource.id; // restrict dropped items from accepting a self-referencing drop (i.e. dropping a stack on itself)
    32 |     },
    33 |     drop: (item, monitor) => {

ERROR in src/components/StackComponent.tsx:30:55
TS2571: Object is of type 'unknown'.
    28 |     canDrop: (item, monitor) => {
    29 |       const dropTarget = stacks[props.id];
  > 30 |       const dropSource = item.type === 'CARD' ? cards[monitor.getItem().id] : stacks[monitor.getItem().id];
       |                                                       ^^^^^^^^^^^^^^^^^
    31 |       return dropTarget && dropTarget.id !== dropSource.id; // restrict dropped items from accepting a self-referencing drop (i.e. dropping a stack on itself)
    32 |     },
    33 |     drop: (item, monitor) => {

ERROR in src/components/StackComponent.tsx:30:86
TS2571: Object is of type 'unknown'.
    28 |     canDrop: (item, monitor) => {
    29 |       const dropTarget = stacks[props.id];
  > 30 |       const dropSource = item.type === 'CARD' ? cards[monitor.getItem().id] : stacks[monitor.getItem().id];
       |                                                                                      ^^^^^^^^^^^^^^^^^
    31 |       return dropTarget && dropTarget.id !== dropSource.id; // restrict dropped items from accepting a self-referencing drop (i.e. dropping a stack on itself)
    32 |     },
    33 |     drop: (item, monitor) => {

ERROR in src/components/StackComponent.tsx:36:15
TS2571: Object is of type 'unknown'.
    34 |       const delta = monitor.getDifferenceFromInitialOffset();
    35 |       if (!delta) return; // no dragging is occurring, perhaps a draggable element was picked up and dropped without dragging
  > 36 |       switch (item.type) {
       |               ^^^^
    37 |         case 'CARD': {
    38 |           const dropTarget = stacks[props.id];
    39 |           const dropSource = cards[monitor.getItem().id];

ERROR in src/components/StackComponent.tsx:39:36
TS2571: Object is of type 'unknown'.
    37 |         case 'CARD': {
    38 |           const dropTarget = stacks[props.id];
  > 39 |           const dropSource = cards[monitor.getItem().id];
       |                                    ^^^^^^^^^^^^^^^^^
    40 |           if (dropSource.captured) {
    41 |             dispatch(popCard(dropTarget, dropSource, delta));
    42 |           }

ERROR in src/components/StackComponent.tsx:47:37
TS2571: Object is of type 'unknown'.
    45 |         case 'STACK': {
    46 |           const dropTarget = stacks[props.id];
  > 47 |           const dropSource = stacks[monitor.getItem().id];
       |                                     ^^^^^^^^^^^^^^^^^
    48 |           const actions: Action[] = pushCards(dropTarget, dropSource.cards.map(id => cards[id]));
    49 |           actions.push({ type: ActionKeys.REMOVE_STACK, id: dropSource.id });
    50 |           actions.map(action => dispatch(action));

nelsonni

Must resolve runtime errors thrown by Electron-Forge and Webpack (see issue comment for error messages).

nelsonni · 2021-07-01T17:45:12Z

Per previous discussion in #358 (comment), react-dnd@13.0.0 introduced a dependency on React v17.0.0. Therefore, this PR is dependent on PR #453 getting integrated first.

…eact-dnd-14.0.2

…ned typings

…eact-dnd-14.0.2

dependabot bot added the dependencies Issues or updates to dependency files label Apr 5, 2021

dependabot bot added this to the v1.0.0 milestone Apr 5, 2021

dependabot bot force-pushed the dependabot/npm_and_yarn/development/react-dnd-14.0.2 branch from 481f87f to b1ec3ff Compare May 3, 2021 05:07

nelsonni force-pushed the dependabot/npm_and_yarn/development/react-dnd-14.0.2 branch from b1ec3ff to ab05ca6 Compare June 30, 2021 22:46

nelsonni requested changes Jun 30, 2021

View reviewed changes

nelsonni added 4 commits July 1, 2021 12:12

Merge branch 'development' into dependabot/npm_and_yarn/development/r…

5f0e40c

…eact-dnd-14.0.2

Merge branch 'development' into dependabot/npm_and_yarn/development/r…

cf0a3dc

…eact-dnd-14.0.2

Update react-dnd useDrag and useDrop hooks to spec objects and tighte…

c49521c

…ned typings

Merge branch 'development' into dependabot/npm_and_yarn/development/r…

da959a6

…eact-dnd-14.0.2

nelsonni merged commit 113789c into development Jul 6, 2021

nelsonni deleted the dependabot/npm_and_yarn/development/react-dnd-14.0.2 branch July 6, 2021 20:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bump react-dnd from 11.1.3 to 14.0.2 #405

Bump react-dnd from 11.1.3 to 14.0.2 #405

dependabot bot commented on behalf of github Apr 5, 2021 •

edited

Loading

nelsonni commented Jun 30, 2021

nelsonni left a comment

nelsonni commented Jul 1, 2021

Bump react-dnd from 11.1.3 to 14.0.2 #405

Bump react-dnd from 11.1.3 to 14.0.2 #405

Conversation

dependabot bot commented on behalf of github Apr 5, 2021 • edited Loading

v14.0.2

Patch

14.0.1

Patch

14.0.0

nelsonni commented Jun 30, 2021

nelsonni left a comment

Choose a reason for hiding this comment

nelsonni commented Jul 1, 2021

dependabot bot commented on behalf of github Apr 5, 2021 •

edited

Loading