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

Comparing version 0.7.0 to 0.8.0

CHANGELOG.md

 # @atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration
 
+## 0.8.0
+
+### Minor Changes
+
+- [`1af8b676f81`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1af8b676f81) - When starting a keyboard drag, key bindings are now added synchronously. Previously, they were added in a `requestAnimationFrame()` callback.
+
 ## 0.7.0
@@ -4,0 +10,0 @@

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

@@ -12,3 +12,2 @@ "use strict";
 var _bindEventListener = require("bind-event-listener");
-var _useCleanupFn = require("../../hooks/use-cleanup-fn");
 var _attributes = require("../../utils/attributes");
@@ -253,5 +252,5 @@ var _findClosestScrollContainer = require("../../utils/find-closest-scroll-container");
     setKeyboardCleanupFn = _ref5.setKeyboardCleanupFn;
-  var rafCleanup = (0, _useCleanupFn.useCleanupFn)();
   var startKeyboardDrag = (0, _react.useCallback)(function (_ref6) {
-    var draggableId = _ref6.draggableId,
+    var startEvent = _ref6.event,
+      draggableId = _ref6.draggableId,
       type = _ref6.type,
@@ -291,45 +290,42 @@ getSourceLocation = _ref6.getSourceLocation,
     });
-
-    /**
-     * Key bindings are added asynchronously, to avoid the same keydown event
-     * from trigging a dragstart and drop.
-     */
-    var id = requestAnimationFrame(function () {
-      var cleanupFn = (0, _bindEventListener.bindAll)(window, [{
-        type: 'keydown',
-        // @ts-expect-error - the type inference is broken
-        listener: function listener(event) {
-          var _keyHandlers$directio, _keyHandlers$directio2;
-          var _dragController$getDr = dragController.getDragState(),
-            isDragging = _dragController$getDr.isDragging;
-          if (!isDragging) {
-            return;
-          }
-          if (event.key === ' ') {
-            event.preventDefault();
-            dragController.stopDrag({
-              reason: 'DROP'
-            });
-            return;
-          }
-          if (event.key === 'Escape') {
-            event.preventDefault();
-            dragController.stopDrag({
-              reason: 'CANCEL'
-            });
-            return;
-          }
-          (_keyHandlers$directio = (_keyHandlers$directio2 = keyHandlers[direction])[event.key]) === null || _keyHandlers$directio === void 0 ? void 0 : _keyHandlers$directio.call(_keyHandlers$directio2, event, {
-            dragController: dragController,
-            droppableRegistry: droppableRegistry,
-            contextId: contextId
+    var cleanupFn = (0, _bindEventListener.bindAll)(window, [{
+      type: 'keydown',
+      // @ts-expect-error - the type inference is broken
+      listener: function listener(event) {
+        var _keyHandlers$directio, _keyHandlers$directio2;
+        /**
+         * Ignores the keydown event which triggered the drag start,
+         * so it doesn't trigger an immediate drop.
+         */
+        if (event === startEvent) {
+          return;
+        }
+        var _dragController$getDr = dragController.getDragState(),
+          isDragging = _dragController$getDr.isDragging;
+        if (!isDragging) {
+          return;
+        }
+        if (event.key === ' ') {
+          event.preventDefault();
+          dragController.stopDrag({
+            reason: 'DROP'
           });
+          return;
         }
-      }].concat((0, _toConsumableArray2.default)(cancelBindings)));
-      setKeyboardCleanupFn(cleanupFn);
-    });
-    rafCleanup.setCleanupFn(function () {
-      cancelAnimationFrame(id);
-    });
-  }, [contextId, dragController, droppableRegistry, rafCleanup, setKeyboardCleanupFn]);
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          dragController.stopDrag({
+            reason: 'CANCEL'
+          });
+          return;
+        }
+        (_keyHandlers$directio = (_keyHandlers$directio2 = keyHandlers[direction])[event.key]) === null || _keyHandlers$directio === void 0 ? void 0 : _keyHandlers$directio.call(_keyHandlers$directio2, event, {
+          dragController: dragController,
+          droppableRegistry: droppableRegistry,
+          contextId: contextId
+        });
+      }
+    }].concat((0, _toConsumableArray2.default)(cancelBindings)));
+    setKeyboardCleanupFn(cleanupFn);
+  }, [contextId, dragController, droppableRegistry, setKeyboardCleanupFn]);
   return {
@@ -336,0 +332,0 @@ startKeyboardDrag: startKeyboardDrag

dist/cjs/draggable/index.js

@@ -136,2 +136,3 @@ "use strict";
           startKeyboardDrag({
+            event: event,
             draggableId: draggableId,
@@ -138,0 +139,0 @@ type: type,

dist/cjs/version.json

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

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

 import { useCallback } from 'react';
 import { bindAll } from 'bind-event-listener';
-import { useCleanupFn } from '../../hooks/use-cleanup-fn';
 import { attributes, customAttributes, getAttribute } from '../../utils/attributes';
@@ -258,4 +257,4 @@ import { findClosestScrollContainer } from '../../utils/find-closest-scroll-container';
 }) {
-  const rafCleanup = useCleanupFn();
   const startKeyboardDrag = useCallback(({
+    event: startEvent,
     draggableId,
@@ -297,46 +296,43 @@ type,
     });
-
-    /**
-     * Key bindings are added asynchronously, to avoid the same keydown event
-     * from trigging a dragstart and drop.
-     */
-    const id = requestAnimationFrame(() => {
-      const cleanupFn = bindAll(window, [{
-        type: 'keydown',
-        // @ts-expect-error - the type inference is broken
-        listener(event) {
-          var _keyHandlers$directio, _keyHandlers$directio2;
-          const {
-            isDragging
-          } = dragController.getDragState();
-          if (!isDragging) {
-            return;
-          }
-          if (event.key === ' ') {
-            event.preventDefault();
-            dragController.stopDrag({
-              reason: 'DROP'
-            });
-            return;
-          }
-          if (event.key === 'Escape') {
-            event.preventDefault();
-            dragController.stopDrag({
-              reason: 'CANCEL'
-            });
-            return;
-          }
-          (_keyHandlers$directio = (_keyHandlers$directio2 = keyHandlers[direction])[event.key]) === null || _keyHandlers$directio === void 0 ? void 0 : _keyHandlers$directio.call(_keyHandlers$directio2, event, {
-            dragController,
-            droppableRegistry,
-            contextId
+    const cleanupFn = bindAll(window, [{
+      type: 'keydown',
+      // @ts-expect-error - the type inference is broken
+      listener(event) {
+        var _keyHandlers$directio, _keyHandlers$directio2;
+        /**
+         * Ignores the keydown event which triggered the drag start,
+         * so it doesn't trigger an immediate drop.
+         */
+        if (event === startEvent) {
+          return;
+        }
+        const {
+          isDragging
+        } = dragController.getDragState();
+        if (!isDragging) {
+          return;
+        }
+        if (event.key === ' ') {
+          event.preventDefault();
+          dragController.stopDrag({
+            reason: 'DROP'
           });
+          return;
         }
-      }, ...cancelBindings]);
-      setKeyboardCleanupFn(cleanupFn);
-    });
-    rafCleanup.setCleanupFn(() => {
-      cancelAnimationFrame(id);
-    });
-  }, [contextId, dragController, droppableRegistry, rafCleanup, setKeyboardCleanupFn]);
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          dragController.stopDrag({
+            reason: 'CANCEL'
+          });
+          return;
+        }
+        (_keyHandlers$directio = (_keyHandlers$directio2 = keyHandlers[direction])[event.key]) === null || _keyHandlers$directio === void 0 ? void 0 : _keyHandlers$directio.call(_keyHandlers$directio2, event, {
+          dragController,
+          droppableRegistry,
+          contextId
+        });
+      }
+    }, ...cancelBindings]);
+    setKeyboardCleanupFn(cleanupFn);
+  }, [contextId, dragController, droppableRegistry, setKeyboardCleanupFn]);
   return {
@@ -343,0 +339,0 @@ startKeyboardDrag

dist/es2019/draggable/index.js

@@ -127,2 +127,3 @@ import React, { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
           startKeyboardDrag({
+            event,
             draggableId,
@@ -129,0 +130,0 @@ type,

dist/es2019/version.json

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

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

@@ -7,3 +7,2 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { bindAll } from 'bind-event-listener';
-import { useCleanupFn } from '../../hooks/use-cleanup-fn';
 import { attributes, customAttributes, getAttribute } from '../../utils/attributes';
@@ -246,5 +245,5 @@ import { findClosestScrollContainer } from '../../utils/find-closest-scroll-container';
     setKeyboardCleanupFn = _ref5.setKeyboardCleanupFn;
-  var rafCleanup = useCleanupFn();
   var startKeyboardDrag = useCallback(function (_ref6) {
-    var draggableId = _ref6.draggableId,
+    var startEvent = _ref6.event,
+      draggableId = _ref6.draggableId,
       type = _ref6.type,
@@ -284,45 +283,42 @@ getSourceLocation = _ref6.getSourceLocation,
     });
-
-    /**
-     * Key bindings are added asynchronously, to avoid the same keydown event
-     * from trigging a dragstart and drop.
-     */
-    var id = requestAnimationFrame(function () {
-      var cleanupFn = bindAll(window, [{
-        type: 'keydown',
-        // @ts-expect-error - the type inference is broken
-        listener: function listener(event) {
-          var _keyHandlers$directio, _keyHandlers$directio2;
-          var _dragController$getDr = dragController.getDragState(),
-            isDragging = _dragController$getDr.isDragging;
-          if (!isDragging) {
-            return;
-          }
-          if (event.key === ' ') {
-            event.preventDefault();
-            dragController.stopDrag({
-              reason: 'DROP'
-            });
-            return;
-          }
-          if (event.key === 'Escape') {
-            event.preventDefault();
-            dragController.stopDrag({
-              reason: 'CANCEL'
-            });
-            return;
-          }
-          (_keyHandlers$directio = (_keyHandlers$directio2 = keyHandlers[direction])[event.key]) === null || _keyHandlers$directio === void 0 ? void 0 : _keyHandlers$directio.call(_keyHandlers$directio2, event, {
-            dragController: dragController,
-            droppableRegistry: droppableRegistry,
-            contextId: contextId
+    var cleanupFn = bindAll(window, [{
+      type: 'keydown',
+      // @ts-expect-error - the type inference is broken
+      listener: function listener(event) {
+        var _keyHandlers$directio, _keyHandlers$directio2;
+        /**
+         * Ignores the keydown event which triggered the drag start,
+         * so it doesn't trigger an immediate drop.
+         */
+        if (event === startEvent) {
+          return;
+        }
+        var _dragController$getDr = dragController.getDragState(),
+          isDragging = _dragController$getDr.isDragging;
+        if (!isDragging) {
+          return;
+        }
+        if (event.key === ' ') {
+          event.preventDefault();
+          dragController.stopDrag({
+            reason: 'DROP'
           });
+          return;
         }
-      }].concat(_toConsumableArray(cancelBindings)));
-      setKeyboardCleanupFn(cleanupFn);
-    });
-    rafCleanup.setCleanupFn(function () {
-      cancelAnimationFrame(id);
-    });
-  }, [contextId, dragController, droppableRegistry, rafCleanup, setKeyboardCleanupFn]);
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          dragController.stopDrag({
+            reason: 'CANCEL'
+          });
+          return;
+        }
+        (_keyHandlers$directio = (_keyHandlers$directio2 = keyHandlers[direction])[event.key]) === null || _keyHandlers$directio === void 0 ? void 0 : _keyHandlers$directio.call(_keyHandlers$directio2, event, {
+          dragController: dragController,
+          droppableRegistry: droppableRegistry,
+          contextId: contextId
+        });
+      }
+    }].concat(_toConsumableArray(cancelBindings)));
+    setKeyboardCleanupFn(cleanupFn);
+  }, [contextId, dragController, droppableRegistry, setKeyboardCleanupFn]);
   return {
@@ -329,0 +325,0 @@ startKeyboardDrag: startKeyboardDrag

dist/esm/draggable/index.js

@@ -126,2 +126,3 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
           startKeyboardDrag({
+            event: event,
             draggableId: draggableId,
@@ -128,0 +129,0 @@ type: type,

dist/esm/version.json

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

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

@@ -1,11 +0,4 @@
-import type { DraggableLocation } from 'react-beautiful-dnd';
 import type { CleanupFn } from '../../internal-types';
 import type { DroppableRegistry } from '../droppable-registry';
-import type { DragController } from '../types';
-export type StartKeyboardDrag = (args: {
-    draggableId: string;
-    type: string;
-    getSourceLocation(): DraggableLocation;
-    sourceElement: HTMLElement;
-}) => void;
+import type { DragController, StartKeyboardDrag } from '../types';
 export declare function useKeyboardControls({ dragController, droppableRegistry, contextId, setKeyboardCleanupFn, }: {
@@ -12,0 +5,0 @@ dragController: DragController;

dist/types-ts4.5/drag-drop-context/types.d.ts

@@ -37,2 +37,6 @@ import type { DraggableId, DraggableLocation, MovementMode } from 'react-beautiful-dnd';
 export type StartKeyboardDrag = (args: {
+    /**
+     * The event that caused `startKeyboardDrag()` to be called.
+     */
+    event: KeyboardEvent;
     draggableId: string;
@@ -39,0 +43,0 @@ type: string;

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

@@ -1,11 +0,4 @@
-import type { DraggableLocation } from 'react-beautiful-dnd';
 import type { CleanupFn } from '../../internal-types';
 import type { DroppableRegistry } from '../droppable-registry';
-import type { DragController } from '../types';
-export type StartKeyboardDrag = (args: {
-    draggableId: string;
-    type: string;
-    getSourceLocation(): DraggableLocation;
-    sourceElement: HTMLElement;
-}) => void;
+import type { DragController, StartKeyboardDrag } from '../types';
 export declare function useKeyboardControls({ dragController, droppableRegistry, contextId, setKeyboardCleanupFn, }: {
@@ -12,0 +5,0 @@ dragController: DragController;

dist/types/drag-drop-context/types.d.ts

@@ -37,2 +37,6 @@ import type { DraggableId, DraggableLocation, MovementMode } from 'react-beautiful-dnd';
 export type StartKeyboardDrag = (args: {
+    /**
+     * The event that caused `startKeyboardDrag()` to be called.
+     */
+    event: KeyboardEvent;
     draggableId: string;
@@ -39,0 +43,0 @@ type: string;

package.json

 {
   "name": "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Migration layer for quickly moving from react-beautiful-dnd to @atlaskit/pragmatic-drag-and-drop.",
@@ -5,0 +5,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

1034559

increased by2.36%

Number of package files

475

increased by1.71%

Lines of code

29054

increased by2.73%

No dependency changes