@atlaskit/pragmatic-drag-and-drop 1.1.0 → 1.1.2

package/CHANGELOG.md

@@ -1,22 +1,26 @@
 # @atlaskit/pragmatic-drag-and-drop
 
-## 1.1.0
+## 1.1.2
 
-### Minor Changes
+### Patch Changes
 
-- [#82653](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82653) [`136d8da5542d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/136d8da5542d) - Adding additional information to `onDrop()` events to expose what the final `dropEffect` was for a drag operation.
+- [#84047](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84047) [`72a86ac4a940`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/72a86ac4a940) - Removing experimental `DropData` from `onDrop()`. Exposing the native `dropEffect` turned out to problematic, as you will always get a `"none"` drop effect if dropping externally if the original `draggable` was removed (a native `"dragend"` event is targetted at the original draggable). This made the weak signal of `dropEffect` for even weaker and more problematic. In order to not create footguns for folks, we have decided to remove this experimental API for now. We can explore adding the API back in the future if folks think it would be valuable.
 
-  ```ts
-  type DropData = {
-    dropEffect: DataTransfer['dropEffect'];
-  };
+## 1.1.1
 
-  monitorForElements({
-    onDrop(payload) {
-      const drop: DropData = payload.drop;
-    },
-  });
-  ```
+### Patch Changes
+
+- [#83702](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83702) [`4d9e25ab4eaa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4d9e25ab4eaa) - Updating the descriptions of Pragmatic drag and drop packages, so they each provide a consistent description to various consumers, and so they are consistently formed amongst each other.
+
+  - `package.json` `description`
+  - `README.md`
+  - Website documentation
+
+## 1.1.0
+
+### Minor Changes
+
+- [#82653](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82653) [`136d8da5542d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/136d8da5542d) - _Experimental_: Adding additional information to `onDrop()` events to expose what the final `dropEffect` was for a drag operation (_now removed_)
 
   Fixing a bug where `preventUnhandled.start()` would prevent unhandled drag operations forever. It now only prevents unhandled drag operations for the current drag operation. `preventUnhandled.stop()` is now optional, as `preventUnhandled.start()` now tidies up itself. You can still leverage `preventUnhandled.stop()` to stop preventing unhandled drag operations during a drag.
 

package/README.md

@@ -1,43 +1,7 @@
 # Pragmatic drag and drop
 
-A performance optimized drag and drop framework
+> Fast drag and drop for any experience on any tech stack
 
-> ℹ️ This package is in early access. We have not yet guaranteed API stability
+The core package for Pragmatic drag and drop.
 
-## Background
-
-There are a wealth of existing drag and drop libraries for the web. Some drag and drop libraries are general purpose (e.g. `@shopify/draggable`, `react-dnd`), and some are for specific experiences (e.g. `react-beautiful-dnd` is for lists and connected lists). Some libraries leverage the platform's built in drag and drop capabilities, and some rebuild the drag and drop operation from scratch.
-
-Every drag and drop solution will make tradeoffs regarding feature sets, user experience, startup performance and runtime performance.
-
-The goals of `@atlaskit/pragmatic-drag-and-drop` are:
-
-- 🚀 Speed: Best of class startup and runtime performance
-- 🤸 Flexibility: Can be used to power any interaction
-- 🧑‍🦽 Accessibility\*: Ensuring that all users have a good experience
-
-> \*Accessible experiences are achieved through alternative keyboard and screen reader flows. Unfortunately, the browsers drag and drop behaviour is not accessible (yet). But don't worry, we have a comprehensive guide and toolchain to help you be successful here
-
-## Core characteristics
-
-- 🌎 Platform powered: leverages the browsers drag and drop capabilities
-- 🐁 Tiny: ~`4.5kB` base
-- 🪡 Incremental: only pay for what you use
-- ⏳ Deferred compatible: consumers can delay the loading of `@atlaskit/pragmatic-drag-and-drop` (and related packages) in order to improve page load speeds
-- 🎨 Headless: full rendering and style control
-- 🦊 Cross browser support: full feature support in Firefox, Safari and Chrome
-- 📱 Touch device compatible
-- 🎁 Addons: patterns that allow sharing small pieces of functionality that can be added together
-- 🎄 Framework agnostic: works with any frontend framework
-- 👾 Virtualization support
-- 🧑‍🦽 Accessible: comprehensive toolchain and patterns for creating highly accessible experiences
-
-## Installation
-
-```sh
-yarn add @atlaskit/pragmatic-drag-and-drop
-```
-
-## Usage
-
-Detailed docs and example usage can be found on [atlassian.design](https://atlassian.design/components/pragmatic-drag-and-drop/).
+[📖 Documentation](https://atlassian.design/components/pragmatic-drag-and-drop/)

package/dist/cjs/ledger/dispatch-consumer-event.js

@@ -112,14 +112,12 @@ function makeDispatch(_ref) {
     },
     drop: function drop(_ref5) {
       var current = _ref5.current,
-        drop = _ref5.drop,
         updatedSourcePayload = _ref5.updatedSourcePayload;
       dragStart.flush();
       scheduleOnDrag.cancel();
       safeDispatch({
         eventName: 'onDrop',
         payload: {
-          drop: drop,
           source: updatedSourcePayload !== null && updatedSourcePayload !== void 0 ? updatedSourcePayload : source,
           location: {
             current: current,

package/dist/cjs/ledger/lifecycle-manager.js

@@ -107,7 +107,7 @@ function start(_ref2) {
       input: input
     });
   }
-  function cancel(drop) {
+  function cancel() {
     // The spec behaviour is that when a drag is cancelled, or when dropping on no drop targets,
     // a "dragleave" event is fired on the active drop target before a "dragend" event.
     // We are replicating that behaviour in `cancel` if there are any active drop targets to
@@ -124,7 +124,6 @@ function start(_ref2) {
     }
     dispatch.drop({
       current: state.current,
-      drop: drop,
       updatedSourcePayload: null
     });
     finish();
@@ -216,15 +215,12 @@ function start(_ref2) {
         dropTargets: []
       });
       if (dragType.startedFrom === 'external') {
-        cancel({
-          dropEffect: 'none'
-        });
+        cancel();
       }
     }
   }, {
     type: 'drop',
     listener: function listener(event) {
-      var _event$dataTransfer$d, _event$dataTransfer;
       // A "drop" can only happen if the browser allowed the drop
 
       // Accepting drop operation.
@@ -238,11 +234,6 @@ function start(_ref2) {
       });
       dispatch.drop({
         current: state.current,
-        drop: {
-          // At this point the dropEffect has been set on the event
-          // (if we have set it), so we can read it from there
-          dropEffect: (_event$dataTransfer$d = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.dropEffect) !== null && _event$dataTransfer$d !== void 0 ? _event$dataTransfer$d : 'none'
-        },
         // When dropping something native, we need to extract the latest
         // `.items` from the "drop" event as it is now accessible
         updatedSourcePayload: dragType.type === 'external' ? dragType.getDropPayload(event) : null
@@ -268,16 +259,7 @@ function start(_ref2) {
     // as we will have already removed the event listener
     type: 'dragend',
     listener: function listener(event) {
-      var _event$dataTransfer$d2, _event$dataTransfer2;
-      // The `dropEffect` will be:
-      // - "none" if dropped on no drop targets
-      // - "none" if cancelled locally
-      // - "none" if cancelled externally
-      // - "none" if `preventUnhandled` is used (and there is no drop target)
-      // - [not "none"] if accepted externally
-      cancel({
-        dropEffect: (_event$dataTransfer$d2 = (_event$dataTransfer2 = event.dataTransfer) === null || _event$dataTransfer2 === void 0 ? void 0 : _event$dataTransfer2.dropEffect) !== null && _event$dataTransfer$d2 !== void 0 ? _event$dataTransfer$d2 : 'none'
-      });
+      cancel();
 
       // Applying this fix after `dispatch.drop` so that frameworks have the opportunity
       // to update UI in response to a "onDrop".
@@ -288,11 +270,7 @@ function start(_ref2) {
       }
     }
   }].concat((0, _toConsumableArray2.default)((0, _detectBrokenDrag.getBindingsForBrokenDrags)({
-    onDragEnd: function onDragEnd() {
-      return cancel({
-        dropEffect: 'none'
-      });
-    }
+    onDragEnd: cancel
   }))),
   // Once we have started a managed drag operation it is important that we see / own all drag events
   // We got one adoption bug pop up where some code was stopping (`event.stopPropagation()`)

package/dist/es2019/ledger/dispatch-consumer-event.js

@@ -107,7 +107,6 @@ export function makeDispatch({
     },
     drop({
       current,
-      drop,
       updatedSourcePayload
     }) {
       dragStart.flush();
@@ -115,7 +114,6 @@ export function makeDispatch({
       safeDispatch({
         eventName: 'onDrop',
         payload: {
-          drop,
           source: updatedSourcePayload !== null && updatedSourcePayload !== void 0 ? updatedSourcePayload : source,
           location: {
             current,

package/dist/es2019/ledger/lifecycle-manager.js

@@ -101,7 +101,7 @@ function start({
       input
     });
   }
-  function cancel(drop) {
+  function cancel() {
     // The spec behaviour is that when a drag is cancelled, or when dropping on no drop targets,
     // a "dragleave" event is fired on the active drop target before a "dragend" event.
     // We are replicating that behaviour in `cancel` if there are any active drop targets to
@@ -118,7 +118,6 @@ function start({
     }
     dispatch.drop({
       current: state.current,
-      drop,
       updatedSourcePayload: null
     });
     finish();
@@ -210,15 +209,12 @@ function start({
         dropTargets: []
       });
       if (dragType.startedFrom === 'external') {
-        cancel({
-          dropEffect: 'none'
-        });
+        cancel();
       }
     }
   }, {
     type: 'drop',
     listener(event) {
-      var _event$dataTransfer$d, _event$dataTransfer;
       // A "drop" can only happen if the browser allowed the drop
 
       // Accepting drop operation.
@@ -232,11 +228,6 @@ function start({
       });
       dispatch.drop({
         current: state.current,
-        drop: {
-          // At this point the dropEffect has been set on the event
-          // (if we have set it), so we can read it from there
-          dropEffect: (_event$dataTransfer$d = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.dropEffect) !== null && _event$dataTransfer$d !== void 0 ? _event$dataTransfer$d : 'none'
-        },
         // When dropping something native, we need to extract the latest
         // `.items` from the "drop" event as it is now accessible
         updatedSourcePayload: dragType.type === 'external' ? dragType.getDropPayload(event) : null
@@ -262,16 +253,7 @@ function start({
     // as we will have already removed the event listener
     type: 'dragend',
     listener(event) {
-      var _event$dataTransfer$d2, _event$dataTransfer2;
-      // The `dropEffect` will be:
-      // - "none" if dropped on no drop targets
-      // - "none" if cancelled locally
-      // - "none" if cancelled externally
-      // - "none" if `preventUnhandled` is used (and there is no drop target)
-      // - [not "none"] if accepted externally
-      cancel({
-        dropEffect: (_event$dataTransfer$d2 = (_event$dataTransfer2 = event.dataTransfer) === null || _event$dataTransfer2 === void 0 ? void 0 : _event$dataTransfer2.dropEffect) !== null && _event$dataTransfer$d2 !== void 0 ? _event$dataTransfer$d2 : 'none'
-      });
+      cancel();
 
       // Applying this fix after `dispatch.drop` so that frameworks have the opportunity
       // to update UI in response to a "onDrop".
@@ -282,9 +264,7 @@ function start({
       }
     }
   }, ...getBindingsForBrokenDrags({
-    onDragEnd: () => cancel({
-      dropEffect: 'none'
-    })
+    onDragEnd: cancel
   })],
   // Once we have started a managed drag operation it is important that we see / own all drag events
   // We got one adoption bug pop up where some code was stopping (`event.stopPropagation()`)

package/dist/esm/ledger/dispatch-consumer-event.js

@@ -105,14 +105,12 @@ export function makeDispatch(_ref) {
     },
     drop: function drop(_ref5) {
       var current = _ref5.current,
-        drop = _ref5.drop,
         updatedSourcePayload = _ref5.updatedSourcePayload;
       dragStart.flush();
       scheduleOnDrag.cancel();
       safeDispatch({
         eventName: 'onDrop',
         payload: {
-          drop: drop,
           source: updatedSourcePayload !== null && updatedSourcePayload !== void 0 ? updatedSourcePayload : source,
           location: {
             current: current,

package/dist/esm/ledger/lifecycle-manager.js

@@ -100,7 +100,7 @@ function start(_ref2) {
       input: input
     });
   }
-  function cancel(drop) {
+  function cancel() {
     // The spec behaviour is that when a drag is cancelled, or when dropping on no drop targets,
     // a "dragleave" event is fired on the active drop target before a "dragend" event.
     // We are replicating that behaviour in `cancel` if there are any active drop targets to
@@ -117,7 +117,6 @@ function start(_ref2) {
     }
     dispatch.drop({
       current: state.current,
-      drop: drop,
       updatedSourcePayload: null
     });
     finish();
@@ -209,15 +208,12 @@ function start(_ref2) {
         dropTargets: []
       });
       if (dragType.startedFrom === 'external') {
-        cancel({
-          dropEffect: 'none'
-        });
+        cancel();
       }
     }
   }, {
     type: 'drop',
     listener: function listener(event) {
-      var _event$dataTransfer$d, _event$dataTransfer;
       // A "drop" can only happen if the browser allowed the drop
 
       // Accepting drop operation.
@@ -231,11 +227,6 @@ function start(_ref2) {
       });
       dispatch.drop({
         current: state.current,
-        drop: {
-          // At this point the dropEffect has been set on the event
-          // (if we have set it), so we can read it from there
-          dropEffect: (_event$dataTransfer$d = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.dropEffect) !== null && _event$dataTransfer$d !== void 0 ? _event$dataTransfer$d : 'none'
-        },
         // When dropping something native, we need to extract the latest
         // `.items` from the "drop" event as it is now accessible
         updatedSourcePayload: dragType.type === 'external' ? dragType.getDropPayload(event) : null
@@ -261,16 +252,7 @@ function start(_ref2) {
     // as we will have already removed the event listener
     type: 'dragend',
     listener: function listener(event) {
-      var _event$dataTransfer$d2, _event$dataTransfer2;
-      // The `dropEffect` will be:
-      // - "none" if dropped on no drop targets
-      // - "none" if cancelled locally
-      // - "none" if cancelled externally
-      // - "none" if `preventUnhandled` is used (and there is no drop target)
-      // - [not "none"] if accepted externally
-      cancel({
-        dropEffect: (_event$dataTransfer$d2 = (_event$dataTransfer2 = event.dataTransfer) === null || _event$dataTransfer2 === void 0 ? void 0 : _event$dataTransfer2.dropEffect) !== null && _event$dataTransfer$d2 !== void 0 ? _event$dataTransfer$d2 : 'none'
-      });
+      cancel();
 
       // Applying this fix after `dispatch.drop` so that frameworks have the opportunity
       // to update UI in response to a "onDrop".
@@ -281,11 +263,7 @@ function start(_ref2) {
       }
     }
   }].concat(_toConsumableArray(getBindingsForBrokenDrags({
-    onDragEnd: function onDragEnd() {
-      return cancel({
-        dropEffect: 'none'
-      });
-    }
+    onDragEnd: cancel
   }))),
   // Once we have started a managed drag operation it is important that we see / own all drag events
   // We got one adoption bug pop up where some code was stopping (`event.stopPropagation()`)

package/dist/types/entry-point/types.d.ts

@@ -1 +1 @@
-export type { DropTargetAllowedDropEffect, DropTargetRecord, Position, Input, DragLocation, DragLocationHistory, DropData, CleanupFn, AllDragTypes, MonitorArgs, BaseEventPayload, ElementDragType, TextSelectionDragType, ExternalDragType, } from '../internal-types';
+export type { DropTargetAllowedDropEffect, DropTargetRecord, Position, Input, DragLocation, DragLocationHistory, CleanupFn, AllDragTypes, MonitorArgs, BaseEventPayload, ElementDragType, TextSelectionDragType, ExternalDragType, } from '../internal-types';

package/dist/types/internal-types.d.ts

@@ -193,9 +193,6 @@ export type BaseEventPayload<DragType extends AllDragTypes> = {
      */
     source: DragType['payload'];
 };
-export type DropData = {
-    dropEffect: DataTransfer['dropEffect'];
-};
 export type EventPayloadMap<DragType extends AllDragTypes> = {
     /**
      * Drag is about to start.
@@ -231,9 +228,7 @@ export type EventPayloadMap<DragType extends AllDragTypes> = {
      *
      * The `location.current` property will accurately contain the final drop targets.
      */
-    onDrop: BaseEventPayload<DragType> & {
-        drop: DropData;
-    };
+    onDrop: BaseEventPayload<DragType>;
 };
 export type AllEvents<DragType extends AllDragTypes> = {
     [EventName in keyof EventPayloadMap<DragType>]: (args: EventPayloadMap<DragType>[EventName]) => void;

package/dist/types/ledger/dispatch-consumer-event.d.ts

@@ -1,4 +1,4 @@
-import { AllDragTypes, DragLocation, DropData, EventPayloadMap } from '../internal-types';
+import { AllDragTypes, DragLocation, EventPayloadMap } from '../internal-types';
 export declare function makeDispatch<DragType extends AllDragTypes>({ source, initial, dispatchEvent, }: {
     source: DragType['payload'];
     initial: DragLocation;
@@ -16,9 +16,8 @@ export declare function makeDispatch<DragType extends AllDragTypes>({ source, in
     drag({ current }: {
         current: DragLocation;
     }): void;
-    drop({ current, drop, updatedSourcePayload, }: {
+    drop({ current, updatedSourcePayload, }: {
         current: DragLocation;
-        drop: DropData;
         /** When dragging from an external source, we need to collect the
             drag source information again as it is often only available during
             the "drop" event */

package/dist/types-ts4.5/entry-point/types.d.ts

@@ -1 +1 @@
-export type { DropTargetAllowedDropEffect, DropTargetRecord, Position, Input, DragLocation, DragLocationHistory, DropData, CleanupFn, AllDragTypes, MonitorArgs, BaseEventPayload, ElementDragType, TextSelectionDragType, ExternalDragType, } from '../internal-types';
+export type { DropTargetAllowedDropEffect, DropTargetRecord, Position, Input, DragLocation, DragLocationHistory, CleanupFn, AllDragTypes, MonitorArgs, BaseEventPayload, ElementDragType, TextSelectionDragType, ExternalDragType, } from '../internal-types';

package/dist/types-ts4.5/internal-types.d.ts

@@ -193,9 +193,6 @@ export type BaseEventPayload<DragType extends AllDragTypes> = {
      */
     source: DragType['payload'];
 };
-export type DropData = {
-    dropEffect: DataTransfer['dropEffect'];
-};
 export type EventPayloadMap<DragType extends AllDragTypes> = {
     /**
      * Drag is about to start.
@@ -231,9 +228,7 @@ export type EventPayloadMap<DragType extends AllDragTypes> = {
      *
      * The `location.current` property will accurately contain the final drop targets.
      */
-    onDrop: BaseEventPayload<DragType> & {
-        drop: DropData;
-    };
+    onDrop: BaseEventPayload<DragType>;
 };
 export type AllEvents<DragType extends AllDragTypes> = {
     [EventName in keyof EventPayloadMap<DragType>]: (args: EventPayloadMap<DragType>[EventName]) => void;

package/dist/types-ts4.5/ledger/dispatch-consumer-event.d.ts

@@ -1,4 +1,4 @@
-import { AllDragTypes, DragLocation, DropData, EventPayloadMap } from '../internal-types';
+import { AllDragTypes, DragLocation, EventPayloadMap } from '../internal-types';
 export declare function makeDispatch<DragType extends AllDragTypes>({ source, initial, dispatchEvent, }: {
     source: DragType['payload'];
     initial: DragLocation;
@@ -16,9 +16,8 @@ export declare function makeDispatch<DragType extends AllDragTypes>({ source, in
     drag({ current }: {
         current: DragLocation;
     }): void;
-    drop({ current, drop, updatedSourcePayload, }: {
+    drop({ current, updatedSourcePayload, }: {
         current: DragLocation;
-        drop: DropData;
         /** When dragging from an external source, we need to collect the
             drag source information again as it is often only available during
             the "drop" event */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/pragmatic-drag-and-drop",
-  "version": "1.1.0",
-  "description": "Fast drag and drop for any experience on any tech stack",
+  "version": "1.1.2",
+  "description": "The core package for Pragmatic drag and drop - enabling fast drag and drop for any experience on any tech stack",
   "repository": "https://github.com/atlassian/pragmatic-drag-and-drop",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",