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

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 (7) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/cjs/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js +23 -14
  3. package/dist/es2019/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js +23 -14
  4. package/dist/esm/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js +23 -14
  5. package/dist/types/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.d.ts +2 -4
  6. package/dist/types-ts4.5/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.d.ts +2 -4
  7. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # @atlaskit/pragmatic-drag-and-drop
2
2
 
3
+ ## 1.7.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#173859](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173859)
8
+ [`d6f17206f8859`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d6f17206f8859) -
9
+ In order to provide the best experience for iOS, the optional function `pointerOutsideOfPreview`
10
+ will now center the drag preview under the users pointer on iOS.
11
+
12
+ Some more detail (in case you are interested):
13
+
14
+ **Borders**
15
+
16
+ _(Existing behaviour)_
17
+
18
+ In `pointerOutsideOfPreview` we use transparent borders to push the preview away from the users
19
+ pointer. On iOS these borders will always be black. So we don't use transparent border on iOS.
20
+
21
+ **Placement**
22
+
23
+ _(Improvement)_
24
+
25
+ During a drag on iOS the drag preview will shift under the center of the users pointer, even if we
26
+ start the drag with the users pointer on the top left or top right corner of the drag preview. So
27
+ now `pointerOutsideOfPreview` will always put the preview under the center of the users pointer in
28
+ order to avoid the drag preview position shifting as the drag is starting.
29
+
3
30
  ## 1.7.2
4
31
 
5
32
  ### Patch Changes
package/dist/cjs/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.pointerOutsideOfPreview = pointerOutsideOfPreview;
7
7
  var _isSafariOnIos = require("../../../util/is-safari-on-ios");
8
+ var _centerUnderPointer = require("./center-under-pointer");
8
9
  /** Any valid CSS string value
9
10
  * @example `calc(var(--grid) * 2)
10
11
  */
@@ -28,10 +29,8 @@ var _isSafariOnIos = require("../../../util/is-safari-on-ios");
28
29
  *
29
30
  * **iOS**
30
31
  *
31
- * This function will not push the preview away from the users pointer on iOS due to platform limitations.
32
- * On iOS the preview will start the drag on the top left corner (or top right corner for right to left interfaces).
33
- * While dragging, iOS will shift the drag preview under the center of the users pointer, so the "pushing away"
34
- * is short lived on iOS.
32
+ * The drag preview will be centered under the users pointer rather than
33
+ * pushed away on iOS due to platform limitations.
35
34
  */
36
35
  function pointerOutsideOfPreview(point) {
37
36
  return function (_ref) {
@@ -44,25 +43,35 @@ function pointerOutsideOfPreview(point) {
44
43
  *
45
44
  * **🙅📱 Not pushing the preview away on iOS**
46
45
  *
47
- * On iOS, the browser will set the transparent border color to be black. We can provide a
48
- * more polished experience not using the transparent border on iOS.
46
+ * _On iOS_
49
47
  *
50
- * While dragging, iOS will shift the drag preview under the center of the users pointer,
51
- * so the "pushing away" of the preview is short lived on iOS anyway.
48
+ * - the browser will set the transparent border color to be black
49
+ * - While dragging, the drag preview will shift under the center of the users pointer.
50
+ * So if you start at {x: 0, y: 0} (top left), almost immediately the preview will move
51
+ * to be under the middle of the users pointer.
52
52
  *
53
- * Notes:
53
+ * _What we do_
54
54
  *
55
- * - Tested on `iOS@18.4.1` on May 7th 2025
55
+ * - We don't add the transparent border (to avoid the black)
56
+ * - We put center the drag preview under the users pointer (to avoid the drag preview
57
+ * quickly moving so it's under the center of the users pointer).
58
+ *
59
+ * _Testing notes_
60
+ *
61
+ * `iOS@18.4.1` on May 7th 2025:
56
62
  * - If you set the background color on the `container` the border color will be that
57
63
  * - Setting a transparent background color on the `container` still results in a black border
58
64
  * - The `<body>` text or background color does not change the black border color
59
65
  */
60
- if (!(0, _isSafariOnIos.isSafariOnIOS)()) {
61
- Object.assign(container.style, {
62
- borderInlineStart: "".concat(point.x, " solid transparent"),
63
- borderTop: "".concat(point.y, " solid transparent")
66
+ if ((0, _isSafariOnIos.isSafariOnIOS)()) {
67
+ return (0, _centerUnderPointer.centerUnderPointer)({
68
+ container: container
64
69
  });
65
70
  }
71
+ Object.assign(container.style, {
72
+ borderInlineStart: "".concat(point.x, " solid transparent"),
73
+ borderTop: "".concat(point.y, " solid transparent")
74
+ });
66
75
 
67
76
  // Unfortunate that we need to use `getComputedStyle`,
68
77
  // but it's only a single call when the drag is starting.
package/dist/es2019/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { isSafariOnIOS } from '../../../util/is-safari-on-ios';
2
+ import { centerUnderPointer } from './center-under-pointer';
2
3
 
3
4
  /** Any valid CSS string value
4
5
  * @example `calc(var(--grid) * 2)
@@ -23,10 +24,8 @@ import { isSafariOnIOS } from '../../../util/is-safari-on-ios';
23
24
  *
24
25
  * **iOS**
25
26
  *
26
- * This function will not push the preview away from the users pointer on iOS due to platform limitations.
27
- * On iOS the preview will start the drag on the top left corner (or top right corner for right to left interfaces).
28
- * While dragging, iOS will shift the drag preview under the center of the users pointer, so the "pushing away"
29
- * is short lived on iOS.
27
+ * The drag preview will be centered under the users pointer rather than
28
+ * pushed away on iOS due to platform limitations.
30
29
  */
31
30
  export function pointerOutsideOfPreview(point) {
32
31
  return ({
@@ -40,25 +39,35 @@ export function pointerOutsideOfPreview(point) {
40
39
  *
41
40
  * **🙅📱 Not pushing the preview away on iOS**
42
41
  *
43
- * On iOS, the browser will set the transparent border color to be black. We can provide a
44
- * more polished experience not using the transparent border on iOS.
42
+ * _On iOS_
45
43
  *
46
- * While dragging, iOS will shift the drag preview under the center of the users pointer,
47
- * so the "pushing away" of the preview is short lived on iOS anyway.
44
+ * - the browser will set the transparent border color to be black
45
+ * - While dragging, the drag preview will shift under the center of the users pointer.
46
+ * So if you start at {x: 0, y: 0} (top left), almost immediately the preview will move
47
+ * to be under the middle of the users pointer.
48
48
  *
49
- * Notes:
49
+ * _What we do_
50
50
  *
51
- * - Tested on `iOS@18.4.1` on May 7th 2025
51
+ * - We don't add the transparent border (to avoid the black)
52
+ * - We put center the drag preview under the users pointer (to avoid the drag preview
53
+ * quickly moving so it's under the center of the users pointer).
54
+ *
55
+ * _Testing notes_
56
+ *
57
+ * `iOS@18.4.1` on May 7th 2025:
52
58
  * - If you set the background color on the `container` the border color will be that
53
59
  * - Setting a transparent background color on the `container` still results in a black border
54
60
  * - The `<body>` text or background color does not change the black border color
55
61
  */
56
- if (!isSafariOnIOS()) {
57
- Object.assign(container.style, {
58
- borderInlineStart: `${point.x} solid transparent`,
59
- borderTop: `${point.y} solid transparent`
62
+ if (isSafariOnIOS()) {
63
+ return centerUnderPointer({
64
+ container
60
65
  });
61
66
  }
67
+ Object.assign(container.style, {
68
+ borderInlineStart: `${point.x} solid transparent`,
69
+ borderTop: `${point.y} solid transparent`
70
+ });
62
71
 
63
72
  // Unfortunate that we need to use `getComputedStyle`,
64
73
  // but it's only a single call when the drag is starting.
package/dist/esm/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { isSafariOnIOS } from '../../../util/is-safari-on-ios';
2
+ import { centerUnderPointer } from './center-under-pointer';
2
3
 
3
4
  /** Any valid CSS string value
4
5
  * @example `calc(var(--grid) * 2)
@@ -23,10 +24,8 @@ import { isSafariOnIOS } from '../../../util/is-safari-on-ios';
23
24
  *
24
25
  * **iOS**
25
26
  *
26
- * This function will not push the preview away from the users pointer on iOS due to platform limitations.
27
- * On iOS the preview will start the drag on the top left corner (or top right corner for right to left interfaces).
28
- * While dragging, iOS will shift the drag preview under the center of the users pointer, so the "pushing away"
29
- * is short lived on iOS.
27
+ * The drag preview will be centered under the users pointer rather than
28
+ * pushed away on iOS due to platform limitations.
30
29
  */
31
30
  export function pointerOutsideOfPreview(point) {
32
31
  return function (_ref) {
@@ -39,25 +38,35 @@ export function pointerOutsideOfPreview(point) {
39
38
  *
40
39
  * **🙅📱 Not pushing the preview away on iOS**
41
40
  *
42
- * On iOS, the browser will set the transparent border color to be black. We can provide a
43
- * more polished experience not using the transparent border on iOS.
41
+ * _On iOS_
44
42
  *
45
- * While dragging, iOS will shift the drag preview under the center of the users pointer,
46
- * so the "pushing away" of the preview is short lived on iOS anyway.
43
+ * - the browser will set the transparent border color to be black
44
+ * - While dragging, the drag preview will shift under the center of the users pointer.
45
+ * So if you start at {x: 0, y: 0} (top left), almost immediately the preview will move
46
+ * to be under the middle of the users pointer.
47
47
  *
48
- * Notes:
48
+ * _What we do_
49
49
  *
50
- * - Tested on `iOS@18.4.1` on May 7th 2025
50
+ * - We don't add the transparent border (to avoid the black)
51
+ * - We put center the drag preview under the users pointer (to avoid the drag preview
52
+ * quickly moving so it's under the center of the users pointer).
53
+ *
54
+ * _Testing notes_
55
+ *
56
+ * `iOS@18.4.1` on May 7th 2025:
51
57
  * - If you set the background color on the `container` the border color will be that
52
58
  * - Setting a transparent background color on the `container` still results in a black border
53
59
  * - The `<body>` text or background color does not change the black border color
54
60
  */
55
- if (!isSafariOnIOS()) {
56
- Object.assign(container.style, {
57
- borderInlineStart: "".concat(point.x, " solid transparent"),
58
- borderTop: "".concat(point.y, " solid transparent")
61
+ if (isSafariOnIOS()) {
62
+ return centerUnderPointer({
63
+ container: container
59
64
  });
60
65
  }
66
+ Object.assign(container.style, {
67
+ borderInlineStart: "".concat(point.x, " solid transparent"),
68
+ borderTop: "".concat(point.y, " solid transparent")
69
+ });
61
70
 
62
71
  // Unfortunate that we need to use `getComputedStyle`,
63
72
  // but it's only a single call when the drag is starting.
package/dist/types/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.d.ts CHANGED
@@ -22,10 +22,8 @@ type CSSValue = string;
22
22
  *
23
23
  * **iOS**
24
24
  *
25
- * This function will not push the preview away from the users pointer on iOS due to platform limitations.
26
- * On iOS the preview will start the drag on the top left corner (or top right corner for right to left interfaces).
27
- * While dragging, iOS will shift the drag preview under the center of the users pointer, so the "pushing away"
28
- * is short lived on iOS.
25
+ * The drag preview will be centered under the users pointer rather than
26
+ * pushed away on iOS due to platform limitations.
29
27
  */
30
28
  export declare function pointerOutsideOfPreview(point: {
31
29
  x: CSSValue;
package/dist/types-ts4.5/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.d.ts CHANGED
@@ -22,10 +22,8 @@ type CSSValue = string;
22
22
  *
23
23
  * **iOS**
24
24
  *
25
- * This function will not push the preview away from the users pointer on iOS due to platform limitations.
26
- * On iOS the preview will start the drag on the top left corner (or top right corner for right to left interfaces).
27
- * While dragging, iOS will shift the drag preview under the center of the users pointer, so the "pushing away"
28
- * is short lived on iOS.
25
+ * The drag preview will be centered under the users pointer rather than
26
+ * pushed away on iOS due to platform limitations.
29
27
  */
30
28
  export declare function pointerOutsideOfPreview(point: {
31
29
  x: CSSValue;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/pragmatic-drag-and-drop",
3
- "version": "1.7.2",
3
+ "version": "1.7.3",
4
4
  "description": "The core package for Pragmatic drag and drop - enabling fast drag and drop for any experience on any tech stack",
5
5
  "repository": "https://github.com/atlassian/pragmatic-drag-and-drop",
6
6
  "author": "Atlassian Pty Ltd",