@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

CHANGELOG.md

 # @atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration
 
+## 0.4.1
+
+### Patch Changes
+
+- [`be8246510ed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/be8246510ed) - Ensures that keyboard drag event bindings are properly cleaned up when a drag is cancelled because of an unhandled error on the window.
+
 ## 0.4.0
@@ -4,0 +10,0 @@

dist/cjs/drag-drop-context/hooks/use-keyboard-controls.js

@@ -12,3 +12,3 @@ "use strict";
 var _bindEventListener = require("bind-event-listener");
-var _useCleanupFn2 = require("../../hooks/use-cleanup-fn");
+var _useCleanupFn = require("../../hooks/use-cleanup-fn");
 var _attributes = require("../../utils/attributes");
@@ -251,6 +251,5 @@ var _findClosestScrollContainer = require("../../utils/find-closest-scroll-container");
     droppableRegistry = _ref5.droppableRegistry,
-    contextId = _ref5.contextId;
-  var _useCleanupFn = (0, _useCleanupFn2.useCleanupFn)(),
-    setCleanupFn = _useCleanupFn.setCleanupFn,
-    runCleanupFn = _useCleanupFn.runCleanupFn;
+    contextId = _ref5.contextId,
+    setKeyboardCleanupFn = _ref5.setKeyboardCleanupFn;
+  var rafCleanup = (0, _useCleanupFn.useCleanupFn)();
   var startKeyboardDrag = (0, _react.useCallback)(function (_ref6) {
@@ -279,3 +278,2 @@ var draggableId = _ref6.draggableId,
       });
-      runCleanupFn();
     }
@@ -308,3 +306,2 @@
           if (!isDragging) {
-            runCleanupFn();
             return;
@@ -317,3 +314,2 @@ }
             });
-            runCleanupFn();
             return;
@@ -323,3 +319,5 @@ }
             event.preventDefault();
-            cancelDrag();
+            dragController.stopDrag({
+              reason: 'CANCEL'
+            });
             return;
@@ -334,8 +332,8 @@ }
       }].concat((0, _toConsumableArray2.default)(cancelBindings)));
-      setCleanupFn(cleanupFn);
+      setKeyboardCleanupFn(cleanupFn);
     });
-    setCleanupFn(function () {
+    rafCleanup.setCleanupFn(function () {
       cancelAnimationFrame(id);
     });
-  }, [contextId, dragController, droppableRegistry, runCleanupFn, setCleanupFn]);
+  }, [contextId, dragController, droppableRegistry, rafCleanup, setKeyboardCleanupFn]);
   return {
@@ -342,0 +340,0 @@ startKeyboardDrag: startKeyboardDrag

dist/cjs/drag-drop-context/index.js

@@ -14,2 +14,3 @@ "use strict";
 var _useCapturedDimensions = require("../hooks/use-captured-dimensions");
+var _useCleanupFn = require("../hooks/use-cleanup-fn");
 var _attributes = require("../utils/attributes");
@@ -107,3 +108,11 @@ var _findDragHandle = require("../utils/find-drag-handle");
       isImmediate = _ref3$isImmediate === void 0 ? false : _ref3$isImmediate;
-    (0, _rbdInvariant.rbdInvariant)(dragStateRef.current.isDragging);
+    if (!dragStateRef.current.isDragging) {
+      /**
+       * If there is no ongoing drag, then don't do anything.
+       *
+       * This should never occur, but treating it as a noop is more
+       * reasonable than an invariant.
+       */
+      return;
+    }
     var _dragStateRef$current = dragStateRef.current,
@@ -175,2 +184,11 @@ prevDestination = _dragStateRef$current.prevDestination,
       mode = _ref4.mode;
+    if (dragStateRef.current.isDragging) {
+      /**
+       * If there is already an ongoing drag, then don't do anything.
+       *
+       * This should never occur, but treating it as a noop is more
+       * reasonable than an invariant.
+       */
+      return;
+    }
     var before = {
@@ -283,5 +301,15 @@ draggableId: draggableId,
   }, [droppableRegistry, getClosestEnabledDraggableLocation, lifecycle, onBeforeCapture, onBeforeDragStart, onDragStart, schedule, updateDrag]);
+  var keyboardCleanupManager = (0, _useCleanupFn.useCleanupFn)();
   var stopDrag = (0, _react.useCallback)(function (_ref5) {
     var reason = _ref5.reason;
-    (0, _rbdInvariant.rbdInvariant)(dragStateRef.current.isDragging);
+    if (!dragStateRef.current.isDragging) {
+      /**
+       * If there is no ongoing drag, then don't do anything.
+       *
+       * This should never occur, but treating it as a noop is more
+       * reasonable than an invariant.
+       */
+      return;
+    }
+    keyboardCleanupManager.runCleanupFn();
 
@@ -360,3 +388,3 @@ /**
     }
-  }, [contextId, flush, lifecycle, onDragEnd, updateDrag]);
+  }, [contextId, flush, keyboardCleanupManager, lifecycle, onDragEnd, updateDrag]);
   var dragController = (0, _react.useMemo)(function () {
@@ -377,3 +405,4 @@ return {
       droppableRegistry: droppableRegistry,
-      contextId: contextId
+      contextId: contextId,
+      setKeyboardCleanupFn: keyboardCleanupManager.setCleanupFn
     }),
@@ -380,0 +409,0 @@ startKeyboardDrag = _useKeyboardControls.startKeyboardDrag;

dist/cjs/version.json

 {
 	"name": "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration",
-	"version": "0.4.0",
+	"version": "0.4.1",
 	"sideEffects": false
 }

dist/es2019/drag-drop-context/hooks/use-keyboard-controls.js

@@ -255,8 +255,6 @@ import { useCallback } from 'react';
   droppableRegistry,
-  contextId
+  contextId,
+  setKeyboardCleanupFn
 }) {
-  const {
-    setCleanupFn,
-    runCleanupFn
-  } = useCleanupFn();
+  const rafCleanup = useCleanupFn();
   const startKeyboardDrag = useCallback(({
@@ -286,3 +284,2 @@ draggableId,
       });
-      runCleanupFn();
     }
@@ -316,3 +313,2 @@
           if (!isDragging) {
-            runCleanupFn();
             return;
@@ -325,3 +321,2 @@ }
             });
-            runCleanupFn();
             return;
@@ -331,3 +326,5 @@ }
             event.preventDefault();
-            cancelDrag();
+            dragController.stopDrag({
+              reason: 'CANCEL'
+            });
             return;
@@ -342,8 +339,8 @@ }
       }, ...cancelBindings]);
-      setCleanupFn(cleanupFn);
+      setKeyboardCleanupFn(cleanupFn);
     });
-    setCleanupFn(() => {
+    rafCleanup.setCleanupFn(() => {
       cancelAnimationFrame(id);
     });
-  }, [contextId, dragController, droppableRegistry, runCleanupFn, setCleanupFn]);
+  }, [contextId, dragController, droppableRegistry, rafCleanup, setKeyboardCleanupFn]);
   return {
@@ -350,0 +347,0 @@ startKeyboardDrag

dist/es2019/drag-drop-context/index.js

 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { announce } from '@atlaskit/pragmatic-drag-and-drop-live-region';
 import { getDraggableDimensions } from '../hooks/use-captured-dimensions';
+import { useCleanupFn } from '../hooks/use-cleanup-fn';
 import { attributes, getAttribute } from '../utils/attributes';
@@ -97,3 +98,11 @@ import { findDragHandle } from '../utils/find-drag-handle';
   }) => {
-    rbdInvariant(dragStateRef.current.isDragging);
+    if (!dragStateRef.current.isDragging) {
+      /**
+       * If there is no ongoing drag, then don't do anything.
+       *
+       * This should never occur, but treating it as a noop is more
+       * reasonable than an invariant.
+       */
+      return;
+    }
     const {
@@ -168,2 +177,11 @@ prevDestination,
   }) => {
+    if (dragStateRef.current.isDragging) {
+      /**
+       * If there is already an ongoing drag, then don't do anything.
+       *
+       * This should never occur, but treating it as a noop is more
+       * reasonable than an invariant.
+       */
+      return;
+    }
     const before = {
@@ -282,6 +300,16 @@ draggableId,
   }, [droppableRegistry, getClosestEnabledDraggableLocation, lifecycle, onBeforeCapture, onBeforeDragStart, onDragStart, schedule, updateDrag]);
+  const keyboardCleanupManager = useCleanupFn();
   const stopDrag = useCallback(({
     reason
   }) => {
-    rbdInvariant(dragStateRef.current.isDragging);
+    if (!dragStateRef.current.isDragging) {
+      /**
+       * If there is no ongoing drag, then don't do anything.
+       *
+       * This should never occur, but treating it as a noop is more
+       * reasonable than an invariant.
+       */
+      return;
+    }
+    keyboardCleanupManager.runCleanupFn();
 
@@ -362,3 +390,3 @@ /**
     }
-  }, [contextId, flush, lifecycle, onDragEnd, updateDrag]);
+  }, [contextId, flush, keyboardCleanupManager, lifecycle, onDragEnd, updateDrag]);
   const dragController = useMemo(() => {
@@ -381,3 +409,4 @@ return {
     droppableRegistry,
-    contextId
+    contextId,
+    setKeyboardCleanupFn: keyboardCleanupManager.setCleanupFn
   });
@@ -384,0 +413,0 @@

dist/es2019/version.json

 {
 	"name": "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration",
-	"version": "0.4.0",
+	"version": "0.4.1",
 	"sideEffects": false
 }

dist/esm/drag-drop-context/hooks/use-keyboard-controls.js

@@ -243,6 +243,5 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
     droppableRegistry = _ref5.droppableRegistry,
-    contextId = _ref5.contextId;
-  var _useCleanupFn = useCleanupFn(),
-    setCleanupFn = _useCleanupFn.setCleanupFn,
-    runCleanupFn = _useCleanupFn.runCleanupFn;
+    contextId = _ref5.contextId,
+    setKeyboardCleanupFn = _ref5.setKeyboardCleanupFn;
+  var rafCleanup = useCleanupFn();
   var startKeyboardDrag = useCallback(function (_ref6) {
@@ -271,3 +270,2 @@ var draggableId = _ref6.draggableId,
       });
-      runCleanupFn();
     }
@@ -300,3 +298,2 @@
           if (!isDragging) {
-            runCleanupFn();
             return;
@@ -309,3 +306,2 @@ }
             });
-            runCleanupFn();
             return;
@@ -315,3 +311,5 @@ }
             event.preventDefault();
-            cancelDrag();
+            dragController.stopDrag({
+              reason: 'CANCEL'
+            });
             return;
@@ -326,8 +324,8 @@ }
       }].concat(_toConsumableArray(cancelBindings)));
-      setCleanupFn(cleanupFn);
+      setKeyboardCleanupFn(cleanupFn);
     });
-    setCleanupFn(function () {
+    rafCleanup.setCleanupFn(function () {
       cancelAnimationFrame(id);
     });
-  }, [contextId, dragController, droppableRegistry, runCleanupFn, setCleanupFn]);
+  }, [contextId, dragController, droppableRegistry, rafCleanup, setKeyboardCleanupFn]);
   return {
@@ -334,0 +332,0 @@ startKeyboardDrag: startKeyboardDrag

dist/esm/drag-drop-context/index.js

@@ -5,2 +5,3 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { getDraggableDimensions } from '../hooks/use-captured-dimensions';
+import { useCleanupFn } from '../hooks/use-cleanup-fn';
 import { attributes, getAttribute } from '../utils/attributes';
@@ -97,3 +98,11 @@ import { findDragHandle } from '../utils/find-drag-handle';
       isImmediate = _ref3$isImmediate === void 0 ? false : _ref3$isImmediate;
-    rbdInvariant(dragStateRef.current.isDragging);
+    if (!dragStateRef.current.isDragging) {
+      /**
+       * If there is no ongoing drag, then don't do anything.
+       *
+       * This should never occur, but treating it as a noop is more
+       * reasonable than an invariant.
+       */
+      return;
+    }
     var _dragStateRef$current = dragStateRef.current,
@@ -165,2 +174,11 @@ prevDestination = _dragStateRef$current.prevDestination,
       mode = _ref4.mode;
+    if (dragStateRef.current.isDragging) {
+      /**
+       * If there is already an ongoing drag, then don't do anything.
+       *
+       * This should never occur, but treating it as a noop is more
+       * reasonable than an invariant.
+       */
+      return;
+    }
     var before = {
@@ -273,5 +291,15 @@ draggableId: draggableId,
   }, [droppableRegistry, getClosestEnabledDraggableLocation, lifecycle, onBeforeCapture, onBeforeDragStart, onDragStart, schedule, updateDrag]);
+  var keyboardCleanupManager = useCleanupFn();
   var stopDrag = useCallback(function (_ref5) {
     var reason = _ref5.reason;
-    rbdInvariant(dragStateRef.current.isDragging);
+    if (!dragStateRef.current.isDragging) {
+      /**
+       * If there is no ongoing drag, then don't do anything.
+       *
+       * This should never occur, but treating it as a noop is more
+       * reasonable than an invariant.
+       */
+      return;
+    }
+    keyboardCleanupManager.runCleanupFn();
 
@@ -350,3 +378,3 @@ /**
     }
-  }, [contextId, flush, lifecycle, onDragEnd, updateDrag]);
+  }, [contextId, flush, keyboardCleanupManager, lifecycle, onDragEnd, updateDrag]);
   var dragController = useMemo(function () {
@@ -367,3 +395,4 @@ return {
       droppableRegistry: droppableRegistry,
-      contextId: contextId
+      contextId: contextId,
+      setKeyboardCleanupFn: keyboardCleanupManager.setCleanupFn
     }),
@@ -370,0 +399,0 @@ startKeyboardDrag = _useKeyboardControls.startKeyboardDrag;

dist/esm/version.json

 {
 	"name": "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration",
-	"version": "0.4.0",
+	"version": "0.4.1",
 	"sideEffects": false
 }

dist/types-ts4.0/drag-drop-context/hooks/use-keyboard-controls.d.ts

 import type { DraggableLocation } from 'react-beautiful-dnd';
+import type { CleanupFn } from '../../internal-types';
 import type { DroppableRegistry } from '../droppable-registry';
@@ -10,8 +11,18 @@ import type { DragController } from '../types';
 }) => void;
-export declare function useKeyboardControls({ dragController, droppableRegistry, contextId, }: {
+export declare function useKeyboardControls({ dragController, droppableRegistry, contextId, setKeyboardCleanupFn, }: {
     dragController: DragController;
     droppableRegistry: DroppableRegistry;
     contextId: string;
+    /**
+     * Sets the cleanup function that should run whenever:
+     * - A user drops
+     * - A user cancels a drag
+     * - There is an error, cancelling a drag
+     *
+     * Because this hook has no visibility of when a drag is cancelled due to
+     * an error, the cleanup is handled at the level above.
+     */
+    setKeyboardCleanupFn: (cleanupFn: CleanupFn) => void;
 }): {
     startKeyboardDrag: StartKeyboardDrag;
 };

dist/types/drag-drop-context/hooks/use-keyboard-controls.d.ts

 import type { DraggableLocation } from 'react-beautiful-dnd';
+import type { CleanupFn } from '../../internal-types';
 import type { DroppableRegistry } from '../droppable-registry';
@@ -10,8 +11,18 @@ import type { DragController } from '../types';
 }) => void;
-export declare function useKeyboardControls({ dragController, droppableRegistry, contextId, }: {
+export declare function useKeyboardControls({ dragController, droppableRegistry, contextId, setKeyboardCleanupFn, }: {
     dragController: DragController;
     droppableRegistry: DroppableRegistry;
     contextId: string;
+    /**
+     * Sets the cleanup function that should run whenever:
+     * - A user drops
+     * - A user cancels a drag
+     * - There is an error, cancelling a drag
+     *
+     * Because this hook has no visibility of when a drag is cancelled due to
+     * an error, the cleanup is handled at the level above.
+     */
+    setKeyboardCleanupFn: (cleanupFn: CleanupFn) => void;
 }): {
     startKeyboardDrag: StartKeyboardDrag;
 };

package.json

 {
   "name": "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Migration layer for quickly moving from react-beautiful-dnd to @atlaskit/pragmatic-drag-and-drop.",
@@ -11,3 +11,7 @@ "publishConfig": {
     "inPublicMirror": false,
-    "releaseModel": "continuous"
+    "releaseModel": "continuous",
+    "website": {
+      "name": "react-beautiful-dnd migration",
+      "category": "Libraries"
+    }
   },
@@ -14,0 +18,0 @@ "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",

No alert changes

Improved metrics

Total package byte prevSize

996518

increased by1.34%

Number of package files

463

increased by0.87%

Lines of code

27857

increased by1.04%

No dependency changes