npm - @atlaskit/pragmatic-drag-and-drop - Versions diffs - 1.7.3 → 1.7.4 - Mend

@atlaskit/pragmatic-drag-and-drop 1.7.3 → 1.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,16 @@
 # @atlaskit/pragmatic-drag-and-drop
+## 1.7.4
+### Patch Changes
+- [#174472](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/174472)
+  [`fda983a832f81`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fda983a832f81) -
+  On Android `pointerOutsideOfPreview` will now also center the drag preview under the users
+  pointer. Technically this was already existing observed behaviour as Android always centers the
+  drag preview under the users pointer. We now make this behaviour explicit in the code, and call
+  this out behaviour in jsdoc and documentation.
 ## 1.7.3
 ### Patch Changes

package/dist/cjs/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js CHANGED Viewed

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.pointerOutsideOfPreview = pointerOutsideOfPreview;
+var _android = require("../../../util/android");
 var _isSafariOnIos = require("../../../util/is-safari-on-ios");
 var _centerUnderPointer = require("./center-under-pointer");
 /** Any valid CSS string value
@@ -27,13 +28,13 @@ var _centerUnderPointer = require("./center-under-pointer");
  * The direction will be calculated based on the direction (`dir`) being applied to the `container`
  * element (which will be a child of the `body` element).
  *
- * **iOS**
+ * **iOS, iPadOS and Android**
  *
  * The drag preview will be centered under the users pointer rather than
  * pushed away on iOS due to platform limitations.
  */
 function pointerOutsideOfPreview(point) {
-  return function (_ref) {
+  return function getOffset(_ref) {
     var container = _ref.container;
     /**
      * **Approach: transparent borders.**
@@ -41,29 +42,47 @@ function pointerOutsideOfPreview(point) {
      * The only reliable cross browser technique found to push a
      * drag preview away from the cursor is to use transparent borders on the container.
      *
-     * **🙅📱 Not pushing the preview away on iOS**
+     * **🙅📱 Not pushing the preview away on touch devices**
      *
      * _On iOS_
      *
-     * - the browser will set the transparent border color to be black
-     * - While dragging, the drag preview will shift under the center of the users pointer.
-     *   So if you start at {x: 0, y: 0} (top left), almost immediately the preview will move
-     *   to be under the middle of the users pointer.
+     * Safari will set the transparent border color to be black
+     *
+     * `iOS@18.4.1` on May 7th 2025:
+     * - If you set the background color on the `container` the border color will be that
+     * - Setting a transparent background color on the `container` still results in a
+     *   black border
+     * - The `<body>` text or background color does not change the black border color
+     *
+     * While dragging, the drag preview will shift under the center of the users pointer.
+     * So if you start at {x: 0, y: 0} (top left), almost immediately the preview will move
+     * to be under the middle of the users pointer.
+     *
+     * _On Android_
+     *
+     * Chrome will put the center of the drag preview under the users pointer immediately.
+     *
+     * Tested on `Chrome@137` on `Android 14` on June 20th 2025
      *
      * _What we do_
      *
-     * - We don't add the transparent border (to avoid the black)
-     * - We put center the drag preview under the users pointer (to avoid the drag preview
-     *   quickly moving so it's under the center of the users pointer).
+     * We don't add the transparent border
      *
-     * _Testing notes_
+     * - Avoid the black color on iOS
+     * - It isn't needed on Android anyway as the preview will be under the center
+     *   of the users pointer
      *
-     * `iOS@18.4.1` on May 7th 2025:
-     * - If you set the background color on the `container` the border color will be that
-     * - Setting a transparent background color on the `container` still results in a black border
-     * - The `<body>` text or background color does not change the black border color
+     * We put the center of the drag preview under the users pointer
+     *
+     * - Avoids the drag preview quickly moving from a top corner to be centered under
+     *   the users pointer on iOS
+     * - It will be under the center on Android no matter what we do
+     *
+     * We previously had a isTouchDevice() check, but it felt safer for now
+     * to have a more targeted check, as these are the devices that have been
+     * tested on.
      */
-    if ((0, _isSafariOnIos.isSafariOnIOS)()) {
+    if ((0, _isSafariOnIos.isSafariOnIOS)() || (0, _android.isAndroid)()) {
       return (0, _centerUnderPointer.centerUnderPointer)({
         container: container
       });

package/dist/cjs/public-utils/element/custom-native-drag-preview/preserve-offset-on-source.js CHANGED Viewed

@@ -7,8 +7,25 @@ exports.preserveOffsetOnSource = preserveOffsetOnSource;
 function preserveOffsetOnSource(_ref) {
   var element = _ref.element,
     input = _ref.input;
-  return function (_ref2) {
+  return function getOffset(_ref2) {
     var container = _ref2.container;
+    /**
+     * **Android**
+     *
+     * This function won't do anything 😅.
+     * The drag preview will _always_ be under the center of the users pointer.
+     * There is no harm in calling this function though 🧘.
+     *
+     * **iOS and iPadOS**
+     *
+     * The drag preview is lifted in the expected position and then slides under
+     * the users pointer.
+     * This is more pleasing than immediately putting the center of the drag preview
+     * under the users pointer.
+     * With this function the drag preview looks like it is popping out
+     * of the UI and then it shifts under the users pointer as the drag is occurring ✨
+     */
     var sourceRect = element.getBoundingClientRect();
     var containerRect = container.getBoundingClientRect();
     var offsetX = Math.min(

package/dist/cjs/util/android.js CHANGED Viewed

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isAndroid = exports.androidFallbackText = void 0;
 var _once = require("../public-utils/once");
-// using `cache` as our `isAndroid()` result will not change in a browser
+// Using `once` as the value won't change in a browser
 var isAndroid = exports.isAndroid = (0, _once.once)(function isAndroid() {
   return navigator.userAgent.toLocaleLowerCase().includes('android');
 });

package/dist/cjs/util/is-safari-on-ios.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.isSafariOnIOS = void 0;
 var _once = require("../public-utils/once");
 var _isSafari = require("./is-safari");
-// Using `cache` as our `isIOS()` result will not change in a browser
+// Using `once` as the value won't change in a browser
 /**
  * **Notes**

package/dist/es2019/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { isAndroid } from '../../../util/android';
 import { isSafariOnIOS } from '../../../util/is-safari-on-ios';
 import { centerUnderPointer } from './center-under-pointer';
@@ -22,44 +23,62 @@ import { centerUnderPointer } from './center-under-pointer';
  * The direction will be calculated based on the direction (`dir`) being applied to the `container`
  * element (which will be a child of the `body` element).
  *
- * **iOS**
+ * **iOS, iPadOS and Android**
  *
  * The drag preview will be centered under the users pointer rather than
  * pushed away on iOS due to platform limitations.
  */
 export function pointerOutsideOfPreview(point) {
-  return ({
+  return function getOffset({
     container
-  }) => {
+  }) {
     /**
      * **Approach: transparent borders.**
      *
      * The only reliable cross browser technique found to push a
      * drag preview away from the cursor is to use transparent borders on the container.
      *
-     * **🙅📱 Not pushing the preview away on iOS**
+     * **🙅📱 Not pushing the preview away on touch devices**
      *
      * _On iOS_
      *
-     * - the browser will set the transparent border color to be black
-     * - While dragging, the drag preview will shift under the center of the users pointer.
-     *   So if you start at {x: 0, y: 0} (top left), almost immediately the preview will move
-     *   to be under the middle of the users pointer.
+     * Safari will set the transparent border color to be black
+     *
+     * `iOS@18.4.1` on May 7th 2025:
+     * - If you set the background color on the `container` the border color will be that
+     * - Setting a transparent background color on the `container` still results in a
+     *   black border
+     * - The `<body>` text or background color does not change the black border color
+     *
+     * While dragging, the drag preview will shift under the center of the users pointer.
+     * So if you start at {x: 0, y: 0} (top left), almost immediately the preview will move
+     * to be under the middle of the users pointer.
+     *
+     * _On Android_
+     *
+     * Chrome will put the center of the drag preview under the users pointer immediately.
+     *
+     * Tested on `Chrome@137` on `Android 14` on June 20th 2025
      *
      * _What we do_
      *
-     * - We don't add the transparent border (to avoid the black)
-     * - We put center the drag preview under the users pointer (to avoid the drag preview
-     *   quickly moving so it's under the center of the users pointer).
+     * We don't add the transparent border
      *
-     * _Testing notes_
+     * - Avoid the black color on iOS
+     * - It isn't needed on Android anyway as the preview will be under the center
+     *   of the users pointer
      *
-     * `iOS@18.4.1` on May 7th 2025:
-     * - If you set the background color on the `container` the border color will be that
-     * - Setting a transparent background color on the `container` still results in a black border
-     * - The `<body>` text or background color does not change the black border color
+     * We put the center of the drag preview under the users pointer
+     *
+     * - Avoids the drag preview quickly moving from a top corner to be centered under
+     *   the users pointer on iOS
+     * - It will be under the center on Android no matter what we do
+     *
+     * We previously had a isTouchDevice() check, but it felt safer for now
+     * to have a more targeted check, as these are the devices that have been
+     * tested on.
      */
-    if (isSafariOnIOS()) {
+    if (isSafariOnIOS() || isAndroid()) {
       return centerUnderPointer({
         container
       });

package/dist/es2019/public-utils/element/custom-native-drag-preview/preserve-offset-on-source.js CHANGED Viewed

@@ -2,9 +2,26 @@ export function preserveOffsetOnSource({
   element,
   input
 }) {
-  return ({
+  return function getOffset({
     container
-  }) => {
+  }) {
+    /**
+     * **Android**
+     *
+     * This function won't do anything 😅.
+     * The drag preview will _always_ be under the center of the users pointer.
+     * There is no harm in calling this function though 🧘.
+     *
+     * **iOS and iPadOS**
+     *
+     * The drag preview is lifted in the expected position and then slides under
+     * the users pointer.
+     * This is more pleasing than immediately putting the center of the drag preview
+     * under the users pointer.
+     * With this function the drag preview looks like it is popping out
+     * of the UI and then it shifts under the users pointer as the drag is occurring ✨
+     */
     const sourceRect = element.getBoundingClientRect();
     const containerRect = container.getBoundingClientRect();
     const offsetX = Math.min(

package/dist/es2019/util/android.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { once } from '../public-utils/once';
-// using `cache` as our `isAndroid()` result will not change in a browser
+// Using `once` as the value won't change in a browser
 export const isAndroid = once(function isAndroid() {
   return navigator.userAgent.toLocaleLowerCase().includes('android');
 });

package/dist/es2019/util/is-safari-on-ios.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { once } from '../public-utils/once';
 import { isSafari } from './is-safari';
-// Using `cache` as our `isIOS()` result will not change in a browser
+// Using `once` as the value won't change in a browser
 /**
  * **Notes**

package/dist/esm/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { isAndroid } from '../../../util/android';
 import { isSafariOnIOS } from '../../../util/is-safari-on-ios';
 import { centerUnderPointer } from './center-under-pointer';
@@ -22,13 +23,13 @@ import { centerUnderPointer } from './center-under-pointer';
  * The direction will be calculated based on the direction (`dir`) being applied to the `container`
  * element (which will be a child of the `body` element).
  *
- * **iOS**
+ * **iOS, iPadOS and Android**
  *
  * The drag preview will be centered under the users pointer rather than
  * pushed away on iOS due to platform limitations.
  */
 export function pointerOutsideOfPreview(point) {
-  return function (_ref) {
+  return function getOffset(_ref) {
     var container = _ref.container;
     /**
      * **Approach: transparent borders.**
@@ -36,29 +37,47 @@ export function pointerOutsideOfPreview(point) {
      * The only reliable cross browser technique found to push a
      * drag preview away from the cursor is to use transparent borders on the container.
      *
-     * **🙅📱 Not pushing the preview away on iOS**
+     * **🙅📱 Not pushing the preview away on touch devices**
      *
      * _On iOS_
      *
-     * - the browser will set the transparent border color to be black
-     * - While dragging, the drag preview will shift under the center of the users pointer.
-     *   So if you start at {x: 0, y: 0} (top left), almost immediately the preview will move
-     *   to be under the middle of the users pointer.
+     * Safari will set the transparent border color to be black
+     *
+     * `iOS@18.4.1` on May 7th 2025:
+     * - If you set the background color on the `container` the border color will be that
+     * - Setting a transparent background color on the `container` still results in a
+     *   black border
+     * - The `<body>` text or background color does not change the black border color
+     *
+     * While dragging, the drag preview will shift under the center of the users pointer.
+     * So if you start at {x: 0, y: 0} (top left), almost immediately the preview will move
+     * to be under the middle of the users pointer.
+     *
+     * _On Android_
+     *
+     * Chrome will put the center of the drag preview under the users pointer immediately.
+     *
+     * Tested on `Chrome@137` on `Android 14` on June 20th 2025
      *
      * _What we do_
      *
-     * - We don't add the transparent border (to avoid the black)
-     * - We put center the drag preview under the users pointer (to avoid the drag preview
-     *   quickly moving so it's under the center of the users pointer).
+     * We don't add the transparent border
      *
-     * _Testing notes_
+     * - Avoid the black color on iOS
+     * - It isn't needed on Android anyway as the preview will be under the center
+     *   of the users pointer
      *
-     * `iOS@18.4.1` on May 7th 2025:
-     * - If you set the background color on the `container` the border color will be that
-     * - Setting a transparent background color on the `container` still results in a black border
-     * - The `<body>` text or background color does not change the black border color
+     * We put the center of the drag preview under the users pointer
+     *
+     * - Avoids the drag preview quickly moving from a top corner to be centered under
+     *   the users pointer on iOS
+     * - It will be under the center on Android no matter what we do
+     *
+     * We previously had a isTouchDevice() check, but it felt safer for now
+     * to have a more targeted check, as these are the devices that have been
+     * tested on.
      */
-    if (isSafariOnIOS()) {
+    if (isSafariOnIOS() || isAndroid()) {
       return centerUnderPointer({
         container: container
       });

package/dist/esm/public-utils/element/custom-native-drag-preview/preserve-offset-on-source.js CHANGED Viewed

@@ -1,8 +1,25 @@
 export function preserveOffsetOnSource(_ref) {
   var element = _ref.element,
     input = _ref.input;
-  return function (_ref2) {
+  return function getOffset(_ref2) {
     var container = _ref2.container;
+    /**
+     * **Android**
+     *
+     * This function won't do anything 😅.
+     * The drag preview will _always_ be under the center of the users pointer.
+     * There is no harm in calling this function though 🧘.
+     *
+     * **iOS and iPadOS**
+     *
+     * The drag preview is lifted in the expected position and then slides under
+     * the users pointer.
+     * This is more pleasing than immediately putting the center of the drag preview
+     * under the users pointer.
+     * With this function the drag preview looks like it is popping out
+     * of the UI and then it shifts under the users pointer as the drag is occurring ✨
+     */
     var sourceRect = element.getBoundingClientRect();
     var containerRect = container.getBoundingClientRect();
     var offsetX = Math.min(

package/dist/esm/util/android.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { once } from '../public-utils/once';
-// using `cache` as our `isAndroid()` result will not change in a browser
+// Using `once` as the value won't change in a browser
 export var isAndroid = once(function isAndroid() {
   return navigator.userAgent.toLocaleLowerCase().includes('android');
 });

package/dist/esm/util/is-safari-on-ios.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { once } from '../public-utils/once';
 import { isSafari } from './is-safari';
-// Using `cache` as our `isIOS()` result will not change in a browser
+// Using `once` as the value won't change in a browser
 /**
  * **Notes**

package/dist/types/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.d.ts CHANGED Viewed

@@ -20,7 +20,7 @@ type CSSValue = string;
  * The direction will be calculated based on the direction (`dir`) being applied to the `container`
  * element (which will be a child of the `body` element).
  *
- * **iOS**
+ * **iOS, iPadOS and Android**
  *
  * The drag preview will be centered under the users pointer rather than
  * pushed away on iOS due to platform limitations.

package/dist/types-ts4.5/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.d.ts CHANGED Viewed

@@ -20,7 +20,7 @@ type CSSValue = string;
  * The direction will be calculated based on the direction (`dir`) being applied to the `container`
  * element (which will be a child of the `body` element).
  *
- * **iOS**
+ * **iOS, iPadOS and Android**
  *
  * The drag preview will be centered under the users pointer rather than
  * pushed away on iOS due to platform limitations.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/pragmatic-drag-and-drop",
-	"version": "1.7.3",
+	"version": "1.7.4",
 	"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",