@atlaskit/pragmatic-drag-and-drop 0.18.2 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @atlaskit/pragmatic-drag-and-drop
 
+## 0.19.0
+
+### Minor Changes
+
+- [`8c301a251e4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8c301a251e4) - We have changed the API of `setCustomNativeDragPreview()` to allow increased control and slightly lower bundles as well.
+
+  We have removed the `placement` argument, and replaced it with `getOffset()`.
+
+  ```diff
+  - placement: { type: 'center' } | { type: 'offset-from-pointer'; x: CSSValue; y: CSSValue };
+  + getOffset: (args: { container: HTMLElement }) => {x: number, y: number}
+  ```
+
+  `getOffset()` allows unlimited control over how to place the custom native drag preview relative to the users pointer. Please see our updated documentation for detailed information about the new `getOffset()` API. Our new `getOffset()` approach means that we also no longer need to bake in all `placement` options into the bundle - consumers now only pay for what they use!
+
+  `placement: { type: 'offset-from-pointer' }` has been replaced by `offsetFromPointer()`
+
+  ```diff
+  import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+  + import { offsetFromPointer } from '@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer;
+
+  draggable({
+    element: myElement,
+    onGenerateDragPreview: ({ nativeSetDragImage }) => {
+      setCustomNativeDragPreview({
+  -      placement: { type: 'offset-from-pointer', x: '16px', y: '8px' }
+  +      getOffset: offsetFromPointer({x: '16px', y: '8px'}),
+        render: function render({ container }) {
+          ReactDOM.render(<Preview item={item} />, container);
+          return function cleanup() {
+            ReactDOM.unmountComponentAtNode(container);
+          };
+        },
+        nativeSetDragImage,
+      });
+    },
+  });
+  ```
+
+  `placement: { type: 'center' }` has been replaced by `centerUnderPointer()`
+
+  ```diff
+  import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+  + import { centerUnderPointer } from '@atlaskit/pragmatic-drag-and-drop/util/center-under-pointer-pointer;
+
+  draggable({
+    element: myElement,
+    onGenerateDragPreview: ({ nativeSetDragImage }) => {
+      setCustomNativeDragPreview({
+  -      placement: { type: 'center' }
+  +      getOffset: centerUnderPointer,
+        render: function render({ container }) {
+          ReactDOM.render(<Preview item={item} />, container);
+          return function cleanup() {
+            ReactDOM.unmountComponentAtNode(container);
+          };
+        },
+        nativeSetDragImage,
+      });
+    },
+  });
+  ```
+
 ## 0.18.2
 
 ### Patch Changes

package/constellation/index/about.mdx

@@ -4,8 +4,6 @@ order: 0
 
 import SectionMessage from '@atlaskit/section-message';
 
-<!-- I'd like to change this section to be called Drag-and-drop or something, not Core, but still mulling it over. -->
-
 This package contains the essential pieces of the system, and is not tied to any JavaScript framework.
 
 - The [element adapter](/components/pragmatic-drag-and-drop/adapter/element-adapter) powers drag operations of elements.
@@ -176,10 +174,6 @@ You can use `setCustomNativeDragPreview` to mount a new element to the page to b
 
 `setCustomNativeDragPreview` has been designed to work with any view abstraction
 
-```ts
-import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
-```
-
 #### Usage example: `react` portals
 
 This technique requires your component to be re-rendered, but maintains the current `react` `context`
@@ -234,7 +228,6 @@ function Item() {
 
 This technique requires no re-rendering of your component, but does not maintain the current `react` `context`
 
-
 ```tsx
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 
@@ -254,12 +247,33 @@ draggable({
 });
 ```
 
-#### Placement
+#### Offset
+
+You can control where the custom native drag preview is placed by using the `getOffset()` argument.
+
+You can return an `{x: number, y: number}` object from `getOffset()` which will control where the native drag preview is rendered relative to the users pointer. `{x: 0, y: 0}` represents having the users pointer user the top left corner of the drag preview.
+
+For clarity:
+
+> `const rect = container.getBoundingClientRect()`
+
+- `{x: 0, y: 0}` → top left of the `container` will be under the users pointer **(default)**
+- `{x: rect.width, y: 0}` top right of the `container` will be under the users pointer
+- `{x: rect.width, y: rect.height}` bottom right of the `container` will be under the users pointer
+- `{x: 0, y: rect.height}` bottom left of the `container` will be under the users pointer
+
+
+```ts
+type GetOffsetFn = (args: { container: HTMLElement }) => {x: number, y: number};
+```
+
+Notes:
 
-You can control where the custom native drag preview is placed by using the `placement` argument:
+- `GetOffsetFn` needs to return `x` and `y` as numbers as that is what the platform requires
+- You cannot use negative values (not supported by browsers). If you want to push the drag preview away from the users pointer, use `offsetFromPointer` (see below)
+- The max offset value for an axis is the `border-box`. Values greater than the `border-box` get trimmed to be the `border-box` value
 
-- `type: 'center'`: Place the center of the drag preview user the users pointer
-- `type: 'offset-from-pointer'`: Shift the drag preview away from the users pointer
+`{x: rect.width + 1, y: rect.height + 1}` effectively becomes `{x: rect.width, y: rect.height}`.
 
 ```tsx
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
@@ -268,7 +282,11 @@ draggable({
   element: myElement,
   onGenerateDragPreview: ({ nativeSetDragImage }) => {
     setCustomNativeDragPreview({
-      placement: { type: 'offset-from-pointer', x: '16px', y: '8px' },
+      // place the (near) top middle of the `container` under the users pointer
+      getOffset: () => {
+        const rect = container.getBoundingClientRect();
+        return { x: rect.width / 2, y: 16 };
+      },
       render: function render({ container }) {
         ReactDOM.render(<Preview item={item} />, container);
         return function cleanup() {
@@ -281,6 +299,51 @@ draggable({
 });
 ```
 
+We have `getOffset()` helpers for `setCustomnativeDragPreview()`:
+
+1. `centerUnderPointer`: centers the custom native drag preview under the users cursor
+
+```ts
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+import { centerUnderPointer } from '@atlaskit/pragmatic-drag-and-drop/util/center-under-pointer';
+
+draggable({
+  element: myElement,
+  onGenerateDragPreview: ({ nativeSetDragImage }) => {
+    setCustomNativeDragPreview({
+      getOffset: centerUnderPointer,
+      render: function render({ container }) {
+        /* ... */
+      },
+      nativeSetDragImage,
+    });
+  },
+});
+```
+
+2. `offsetFromPointer`: a cross browser mechanism to push the drag preview away from the users pointer
+
+```ts
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+import { offsetFromPointer } from '@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer';
+
+draggable({
+  element: myElement,
+  onGenerateDragPreview: ({ nativeSetDragImage }) => {
+    setCustomNativeDragPreview({
+      // `x` and `y` can be any CSS value
+      getOffset: offsetFromPointer({ x: '8px', y: 'calc(var(--grid) * 2)' }),
+      render: function render({ container }) {
+        /* ... */
+      },
+      nativeSetDragImage,
+    });
+  },
+});
+```
+
+Note: if you are using css variables inside of your `getOffset()` you need to be sure your css variables are available at the `<body>` element, as the `container` is temporarily mounted as a child of `<body>`
+
 ### Disable native drag preview
 
 In some situations, you might want to disable the native drag preview. The `disableNativeDragPreview` utility does this for all supported browsers and platforms.

package/dist/cjs/entry-point/util/center-under-pointer.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "centerUnderPointer", {
+  enumerable: true,
+  get: function get() {
+    return _centerUnderPointer.centerUnderPointer;
+  }
+});
+var _centerUnderPointer = require("../../util/custom-native-drag-preview/center-under-pointer");

package/dist/cjs/entry-point/util/offset-from-pointer.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "offsetFromPointer", {
+  enumerable: true,
+  get: function get() {
+    return _offsetFromPointer.offsetFromPointer;
+  }
+});
+var _offsetFromPointer = require("../../util/custom-native-drag-preview/offset-from-pointer");

package/dist/cjs/entry-point/util/set-custom-native-drag-preview.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "setCustomNativeDragPreview", {
     return _setCustomNativeDragPreview.setCustomNativeDragPreview;
   }
 });
-var _setCustomNativeDragPreview = require("../../util/set-custom-native-drag-preview");
+var _setCustomNativeDragPreview = require("../../util/custom-native-drag-preview/set-custom-native-drag-preview");

package/dist/cjs/util/custom-native-drag-preview/center-under-pointer.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.centerUnderPointer = void 0;
+var centerUnderPointer = function centerUnderPointer(_ref) {
+  var container = _ref.container;
+  var rect = container.getBoundingClientRect();
+  return {
+    x: rect.width / 2,
+    y: rect.height / 2
+  };
+};
+exports.centerUnderPointer = centerUnderPointer;

package/dist/cjs/util/custom-native-drag-preview/offset-from-pointer.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.offsetFromPointer = offsetFromPointer;
+/** Any valid CSS string value
+ * @example `calc(var(--grid) * 2)
+ */
+
+function offsetFromPointer(point) {
+  return function (_ref) {
+    var container = _ref.container;
+    // Only reliable cross browser technique found to push a
+    // drag preview away from the cursor is to use transparent borders on the container
+    Object.assign(container.style, {
+      borderLeft: "".concat(point.x, " solid transparent"),
+      borderTop: "".concat(point.y, " solid transparent")
+    });
+    return {
+      x: 0,
+      y: 0
+    };
+  };
+}

package/dist/cjs/util/{set-custom-native-drag-preview.js → custom-native-drag-preview/set-custom-native-drag-preview.js}

@@ -4,46 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.setCustomNativeDragPreview = setCustomNativeDragPreview;
-var _elementAdapter = require("../adapter/element-adapter");
+var _elementAdapter = require("../../adapter/element-adapter");
 /** A function to remove the element that has been added to the `container`.
  * @example () => ReactDOM.unmountComponentAtNode(container)
  */
 
 /** A function that will render a preview element into a `container` `HTMLElement` */
 
-/** Any valid CSS string value
- * @example `calc(var(--grid) * 2)
- */
-
-/**
- * Where to place the custom drag preview
- *
- * `type: 'center'`: Place the center of the drag preview user the users pointer
- *
- * `type: 'offset-from-pointer'`: Shift the drag preview away from the users pointer
- */
-
-function setImage(_ref) {
-  var container = _ref.container,
-    placement = _ref.placement,
-    nativeSetDragImage = _ref.nativeSetDragImage;
-  if ((placement === null || placement === void 0 ? void 0 : placement.type) === 'center') {
-    var box = container.getBoundingClientRect();
-    nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, box.width / 2, box.height / 2);
-    return;
-  }
-  if ((placement === null || placement === void 0 ? void 0 : placement.type) === 'offset-from-pointer') {
-    // Using a transparent border to push the drag preview away
-    // from the user's pointer.
-    // In Chrome and Safari we could use `padding`:
-    // padding: 'var(--grid)',
-    // But it does not work in Firefox which trims the padding (or inner margin)
-    Object.assign(container.style, {
-      borderLeft: "".concat(placement.x, " solid transparent"),
-      borderTop: "".concat(placement.y, " solid transparent")
-    });
-  }
-  nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, 0, 0);
+/** By default we use the build in values for the native drag preview: {x: 0, y: 0} */
+function defaultOffset() {
+  return {
+    x: 0,
+    y: 0
+  };
 }
 
 /** This function provides the ability to mount an element for it to be used as the native drag preview
@@ -61,10 +34,11 @@ function setImage(_ref) {
  *    },
  * });
  */
-function setCustomNativeDragPreview(_ref2) {
-  var render = _ref2.render,
-    nativeSetDragImage = _ref2.nativeSetDragImage,
-    placement = _ref2.placement;
+function setCustomNativeDragPreview(_ref) {
+  var render = _ref.render,
+    nativeSetDragImage = _ref.nativeSetDragImage,
+    _ref$getOffset = _ref.getOffset,
+    getOffset = _ref$getOffset === void 0 ? defaultOffset : _ref$getOffset;
   var container = document.createElement('div');
   Object.assign(container.style, {
     // Ensuring we don't cause reflow when adding the element to the page
@@ -90,11 +64,10 @@ function setCustomNativeDragPreview(_ref2) {
   var unmount = render({
     container: container
   });
-  setImage({
-    container: container,
-    placement: placement,
-    nativeSetDragImage: nativeSetDragImage
+  var previewOffset = getOffset({
+    container: container
   });
+  nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, previewOffset.x, previewOffset.y);
   function cleanup() {
     unbindMonitor();
     unmount === null || unmount === void 0 ? void 0 : unmount();

package/dist/cjs/util/custom-native-drag-preview/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pragmatic-drag-and-drop",
-	"version": "0.18.2",
+	"version": "0.19.0",
 	"sideEffects": false
 }

package/dist/es2019/entry-point/util/center-under-pointer.js

@@ -0,0 +1 @@
+export { centerUnderPointer } from '../../util/custom-native-drag-preview/center-under-pointer';

package/dist/es2019/entry-point/util/offset-from-pointer.js

@@ -0,0 +1 @@
+export { offsetFromPointer } from '../../util/custom-native-drag-preview/offset-from-pointer';

package/dist/es2019/entry-point/util/set-custom-native-drag-preview.js

@@ -1 +1 @@
-export { setCustomNativeDragPreview } from '../../util/set-custom-native-drag-preview';
+export { setCustomNativeDragPreview } from '../../util/custom-native-drag-preview/set-custom-native-drag-preview';

package/dist/es2019/util/custom-native-drag-preview/center-under-pointer.js

@@ -0,0 +1,9 @@
+export const centerUnderPointer = function centerUnderPointer({
+  container
+}) {
+  const rect = container.getBoundingClientRect();
+  return {
+    x: rect.width / 2,
+    y: rect.height / 2
+  };
+};

package/dist/es2019/util/custom-native-drag-preview/offset-from-pointer.js

@@ -0,0 +1,20 @@
+/** Any valid CSS string value
+ * @example `calc(var(--grid) * 2)
+ */
+
+export function offsetFromPointer(point) {
+  return ({
+    container
+  }) => {
+    // Only reliable cross browser technique found to push a
+    // drag preview away from the cursor is to use transparent borders on the container
+    Object.assign(container.style, {
+      borderLeft: `${point.x} solid transparent`,
+      borderTop: `${point.y} solid transparent`
+    });
+    return {
+      x: 0,
+      y: 0
+    };
+  };
+}

package/dist/es2019/util/{set-custom-native-drag-preview.js → custom-native-drag-preview/set-custom-native-drag-preview.js}

@@ -1,4 +1,4 @@
-import { monitorForElements } from '../adapter/element-adapter';
+import { monitorForElements } from '../../adapter/element-adapter';
 
 /** A function to remove the element that has been added to the `container`.
  * @example () => ReactDOM.unmountComponentAtNode(container)
@@ -6,40 +6,12 @@ import { monitorForElements } from '../adapter/element-adapter';
 
 /** A function that will render a preview element into a `container` `HTMLElement` */
 
-/** Any valid CSS string value
- * @example `calc(var(--grid) * 2)
- */
-
-/**
- * Where to place the custom drag preview
- *
- * `type: 'center'`: Place the center of the drag preview user the users pointer
- *
- * `type: 'offset-from-pointer'`: Shift the drag preview away from the users pointer
- */
-
-function setImage({
-  container,
-  placement,
-  nativeSetDragImage
-}) {
-  if ((placement === null || placement === void 0 ? void 0 : placement.type) === 'center') {
-    const box = container.getBoundingClientRect();
-    nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, box.width / 2, box.height / 2);
-    return;
-  }
-  if ((placement === null || placement === void 0 ? void 0 : placement.type) === 'offset-from-pointer') {
-    // Using a transparent border to push the drag preview away
-    // from the user's pointer.
-    // In Chrome and Safari we could use `padding`:
-    // padding: 'var(--grid)',
-    // But it does not work in Firefox which trims the padding (or inner margin)
-    Object.assign(container.style, {
-      borderLeft: `${placement.x} solid transparent`,
-      borderTop: `${placement.y} solid transparent`
-    });
-  }
-  nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, 0, 0);
+/** By default we use the build in values for the native drag preview: {x: 0, y: 0} */
+function defaultOffset() {
+  return {
+    x: 0,
+    y: 0
+  };
 }
 
 /** This function provides the ability to mount an element for it to be used as the native drag preview
@@ -60,7 +32,7 @@ function setImage({
 export function setCustomNativeDragPreview({
   render,
   nativeSetDragImage,
-  placement
+  getOffset = defaultOffset
 }) {
   const container = document.createElement('div');
   Object.assign(container.style, {
@@ -87,11 +59,10 @@ export function setCustomNativeDragPreview({
   const unmount = render({
     container
   });
-  setImage({
-    container,
-    placement,
-    nativeSetDragImage
+  const previewOffset = getOffset({
+    container
   });
+  nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, previewOffset.x, previewOffset.y);
   function cleanup() {
     unbindMonitor();
     unmount === null || unmount === void 0 ? void 0 : unmount();

package/dist/es2019/util/custom-native-drag-preview/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pragmatic-drag-and-drop",
-	"version": "0.18.2",
+	"version": "0.19.0",
 	"sideEffects": false
 }

package/dist/esm/entry-point/util/center-under-pointer.js

@@ -0,0 +1 @@
+export { centerUnderPointer } from '../../util/custom-native-drag-preview/center-under-pointer';

package/dist/esm/entry-point/util/offset-from-pointer.js

@@ -0,0 +1 @@
+export { offsetFromPointer } from '../../util/custom-native-drag-preview/offset-from-pointer';

package/dist/esm/entry-point/util/set-custom-native-drag-preview.js

@@ -1 +1 @@
-export { setCustomNativeDragPreview } from '../../util/set-custom-native-drag-preview';
+export { setCustomNativeDragPreview } from '../../util/custom-native-drag-preview/set-custom-native-drag-preview';

package/dist/esm/util/custom-native-drag-preview/center-under-pointer.js

@@ -0,0 +1,8 @@
+export var centerUnderPointer = function centerUnderPointer(_ref) {
+  var container = _ref.container;
+  var rect = container.getBoundingClientRect();
+  return {
+    x: rect.width / 2,
+    y: rect.height / 2
+  };
+};

package/dist/esm/util/custom-native-drag-preview/offset-from-pointer.js

@@ -0,0 +1,19 @@
+/** Any valid CSS string value
+ * @example `calc(var(--grid) * 2)
+ */
+
+export function offsetFromPointer(point) {
+  return function (_ref) {
+    var container = _ref.container;
+    // Only reliable cross browser technique found to push a
+    // drag preview away from the cursor is to use transparent borders on the container
+    Object.assign(container.style, {
+      borderLeft: "".concat(point.x, " solid transparent"),
+      borderTop: "".concat(point.y, " solid transparent")
+    });
+    return {
+      x: 0,
+      y: 0
+    };
+  };
+}

package/dist/esm/util/{set-custom-native-drag-preview.js → custom-native-drag-preview/set-custom-native-drag-preview.js}

@@ -1,4 +1,4 @@
-import { monitorForElements } from '../adapter/element-adapter';
+import { monitorForElements } from '../../adapter/element-adapter';
 
 /** A function to remove the element that has been added to the `container`.
  * @example () => ReactDOM.unmountComponentAtNode(container)
@@ -6,39 +6,12 @@ import { monitorForElements } from '../adapter/element-adapter';
 
 /** A function that will render a preview element into a `container` `HTMLElement` */
 
-/** Any valid CSS string value
- * @example `calc(var(--grid) * 2)
- */
-
-/**
- * Where to place the custom drag preview
- *
- * `type: 'center'`: Place the center of the drag preview user the users pointer
- *
- * `type: 'offset-from-pointer'`: Shift the drag preview away from the users pointer
- */
-
-function setImage(_ref) {
-  var container = _ref.container,
-    placement = _ref.placement,
-    nativeSetDragImage = _ref.nativeSetDragImage;
-  if ((placement === null || placement === void 0 ? void 0 : placement.type) === 'center') {
-    var box = container.getBoundingClientRect();
-    nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, box.width / 2, box.height / 2);
-    return;
-  }
-  if ((placement === null || placement === void 0 ? void 0 : placement.type) === 'offset-from-pointer') {
-    // Using a transparent border to push the drag preview away
-    // from the user's pointer.
-    // In Chrome and Safari we could use `padding`:
-    // padding: 'var(--grid)',
-    // But it does not work in Firefox which trims the padding (or inner margin)
-    Object.assign(container.style, {
-      borderLeft: "".concat(placement.x, " solid transparent"),
-      borderTop: "".concat(placement.y, " solid transparent")
-    });
-  }
-  nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, 0, 0);
+/** By default we use the build in values for the native drag preview: {x: 0, y: 0} */
+function defaultOffset() {
+  return {
+    x: 0,
+    y: 0
+  };
 }
 
 /** This function provides the ability to mount an element for it to be used as the native drag preview
@@ -56,10 +29,11 @@ function setImage(_ref) {
  *    },
  * });
  */
-export function setCustomNativeDragPreview(_ref2) {
-  var render = _ref2.render,
-    nativeSetDragImage = _ref2.nativeSetDragImage,
-    placement = _ref2.placement;
+export function setCustomNativeDragPreview(_ref) {
+  var render = _ref.render,
+    nativeSetDragImage = _ref.nativeSetDragImage,
+    _ref$getOffset = _ref.getOffset,
+    getOffset = _ref$getOffset === void 0 ? defaultOffset : _ref$getOffset;
   var container = document.createElement('div');
   Object.assign(container.style, {
     // Ensuring we don't cause reflow when adding the element to the page
@@ -85,11 +59,10 @@ export function setCustomNativeDragPreview(_ref2) {
   var unmount = render({
     container: container
   });
-  setImage({
-    container: container,
-    placement: placement,
-    nativeSetDragImage: nativeSetDragImage
+  var previewOffset = getOffset({
+    container: container
   });
+  nativeSetDragImage === null || nativeSetDragImage === void 0 ? void 0 : nativeSetDragImage(container, previewOffset.x, previewOffset.y);
   function cleanup() {
     unbindMonitor();
     unmount === null || unmount === void 0 ? void 0 : unmount();

package/dist/esm/util/custom-native-drag-preview/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/pragmatic-drag-and-drop",
-	"version": "0.18.2",
+	"version": "0.19.0",
 	"sideEffects": false
 }

package/dist/types/entry-point/util/center-under-pointer.d.ts

@@ -0,0 +1 @@
+export { centerUnderPointer } from '../../util/custom-native-drag-preview/center-under-pointer';

package/dist/types/entry-point/util/offset-from-pointer.d.ts

@@ -0,0 +1 @@
+export { offsetFromPointer } from '../../util/custom-native-drag-preview/offset-from-pointer';

package/dist/types/entry-point/util/set-custom-native-drag-preview.d.ts

@@ -1 +1 @@
-export { setCustomNativeDragPreview } from '../../util/set-custom-native-drag-preview';
+export { setCustomNativeDragPreview } from '../../util/custom-native-drag-preview/set-custom-native-drag-preview';

package/dist/types/util/custom-native-drag-preview/center-under-pointer.d.ts

@@ -0,0 +1,2 @@
+import type { GetOffsetFn } from './types';
+export declare const centerUnderPointer: GetOffsetFn;

package/dist/types/util/custom-native-drag-preview/offset-from-pointer.d.ts

@@ -0,0 +1,10 @@
+import type { GetOffsetFn } from './types';
+/** Any valid CSS string value
+ * @example `calc(var(--grid) * 2)
+ */
+type CSSValue = string;
+export declare function offsetFromPointer(point: {
+    x: CSSValue;
+    y: CSSValue;
+}): GetOffsetFn;
+export {};

package/dist/{types-ts4.5/util → types/util/custom-native-drag-preview}/set-custom-native-drag-preview.d.ts

@@ -1,4 +1,5 @@
-import { ElementEventPayloadMap } from '../adapter/element-adapter';
+import { ElementEventPayloadMap } from '../../adapter/element-adapter';
+import type { GetOffsetFn } from './types';
 /** A function to remove the element that has been added to the `container`.
  * @example () => ReactDOM.unmountComponentAtNode(container)
  */
@@ -11,24 +12,6 @@ type RenderFn = ({ container, }: {
     */
     container: HTMLElement;
 }) => CleanupFn | void;
-/** Any valid CSS string value
- * @example `calc(var(--grid) * 2)
- */
-type CSSValue = string;
-/**
- * Where to place the custom drag preview
- *
- * `type: 'center'`: Place the center of the drag preview user the users pointer
- *
- * `type: 'offset-from-pointer'`: Shift the drag preview away from the users pointer
- */
-type Placement = {
-    type: 'center';
-} | {
-    type: 'offset-from-pointer';
-    x: CSSValue;
-    y: CSSValue;
-};
 /** This function provides the ability to mount an element for it to be used as the native drag preview
  *
  * @example
@@ -44,8 +27,8 @@ type Placement = {
  *    },
  * });
  */
-export declare function setCustomNativeDragPreview({ render, nativeSetDragImage, placement, }: {
-    placement?: Placement;
+export declare function setCustomNativeDragPreview({ render, nativeSetDragImage, getOffset, }: {
+    getOffset?: GetOffsetFn;
     render: RenderFn;
     nativeSetDragImage: ElementEventPayloadMap['onGenerateDragPreview']['nativeSetDragImage'];
 }): void;

package/dist/types/util/custom-native-drag-preview/types.d.ts

@@ -0,0 +1,16 @@
+import type { Position } from '../../internal-types';
+/** A function that will push the position of native drag preview.
+ *
+ * `{x: 0, y: 0}` represents having the users pointer user the top left corner of the drag preview.
+ *
+ * @example
+ * `const rect = container.getBoundingClientRect()`
+ *
+ * - `{x: 0, y: 0}` → top left of the `container` will be under the users pointer **(default)**
+ * - `{x: rect.width, y: 0}` → top right of the `container` will be under the users pointer
+ * - `{x: rect.width, y: rect.height}` → bottom right of the `container` will be under the users pointer
+ * - `{x: 0, y: rect.height}`→  bottom left of the `container` will be under the users pointer
+ */
+export type GetOffsetFn = (args: {
+    container: HTMLElement;
+}) => Position;

package/dist/types-ts4.5/entry-point/util/center-under-pointer.d.ts

@@ -0,0 +1 @@
+export { centerUnderPointer } from '../../util/custom-native-drag-preview/center-under-pointer';

package/dist/types-ts4.5/entry-point/util/offset-from-pointer.d.ts

@@ -0,0 +1 @@
+export { offsetFromPointer } from '../../util/custom-native-drag-preview/offset-from-pointer';

package/dist/types-ts4.5/entry-point/util/set-custom-native-drag-preview.d.ts

@@ -1 +1 @@
-export { setCustomNativeDragPreview } from '../../util/set-custom-native-drag-preview';
+export { setCustomNativeDragPreview } from '../../util/custom-native-drag-preview/set-custom-native-drag-preview';

package/dist/types-ts4.5/util/custom-native-drag-preview/center-under-pointer.d.ts

@@ -0,0 +1,2 @@
+import type { GetOffsetFn } from './types';
+export declare const centerUnderPointer: GetOffsetFn;

package/dist/types-ts4.5/util/custom-native-drag-preview/offset-from-pointer.d.ts

@@ -0,0 +1,10 @@
+import type { GetOffsetFn } from './types';
+/** Any valid CSS string value
+ * @example `calc(var(--grid) * 2)
+ */
+type CSSValue = string;
+export declare function offsetFromPointer(point: {
+    x: CSSValue;
+    y: CSSValue;
+}): GetOffsetFn;
+export {};

package/dist/{types/util → types-ts4.5/util/custom-native-drag-preview}/set-custom-native-drag-preview.d.ts

@@ -1,4 +1,5 @@
-import { ElementEventPayloadMap } from '../adapter/element-adapter';
+import { ElementEventPayloadMap } from '../../adapter/element-adapter';
+import type { GetOffsetFn } from './types';
 /** A function to remove the element that has been added to the `container`.
  * @example () => ReactDOM.unmountComponentAtNode(container)
  */
@@ -11,24 +12,6 @@ type RenderFn = ({ container, }: {
     */
     container: HTMLElement;
 }) => CleanupFn | void;
-/** Any valid CSS string value
- * @example `calc(var(--grid) * 2)
- */
-type CSSValue = string;
-/**
- * Where to place the custom drag preview
- *
- * `type: 'center'`: Place the center of the drag preview user the users pointer
- *
- * `type: 'offset-from-pointer'`: Shift the drag preview away from the users pointer
- */
-type Placement = {
-    type: 'center';
-} | {
-    type: 'offset-from-pointer';
-    x: CSSValue;
-    y: CSSValue;
-};
 /** This function provides the ability to mount an element for it to be used as the native drag preview
  *
  * @example
@@ -44,8 +27,8 @@ type Placement = {
  *    },
  * });
  */
-export declare function setCustomNativeDragPreview({ render, nativeSetDragImage, placement, }: {
-    placement?: Placement;
+export declare function setCustomNativeDragPreview({ render, nativeSetDragImage, getOffset, }: {
+    getOffset?: GetOffsetFn;
     render: RenderFn;
     nativeSetDragImage: ElementEventPayloadMap['onGenerateDragPreview']['nativeSetDragImage'];
 }): void;

package/dist/types-ts4.5/util/custom-native-drag-preview/types.d.ts

@@ -0,0 +1,16 @@
+import type { Position } from '../../internal-types';
+/** A function that will push the position of native drag preview.
+ *
+ * `{x: 0, y: 0}` represents having the users pointer user the top left corner of the drag preview.
+ *
+ * @example
+ * `const rect = container.getBoundingClientRect()`
+ *
+ * - `{x: 0, y: 0}` → top left of the `container` will be under the users pointer **(default)**
+ * - `{x: rect.width, y: 0}` → top right of the `container` will be under the users pointer
+ * - `{x: rect.width, y: rect.height}` → bottom right of the `container` will be under the users pointer
+ * - `{x: 0, y: rect.height}`→  bottom left of the `container` will be under the users pointer
+ */
+export type GetOffsetFn = (args: {
+    container: HTMLElement;
+}) => Position;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/pragmatic-drag-and-drop",
-  "version": "0.18.2",
+  "version": "0.19.0",
   "description": "The core Pragmatic drag and drop framework, optimized for performance.",
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
@@ -44,6 +44,8 @@
     "./util/once": "./src/entry-point/util/once.ts",
     "./util/reorder": "./src/entry-point/util/reorder.ts",
     "./util/set-custom-native-drag-preview": "./src/entry-point/util/set-custom-native-drag-preview.ts",
+    "./util/offset-from-pointer": "./src/entry-point/util/offset-from-pointer.ts",
+    "./util/center-under-pointer": "./src/entry-point/util/center-under-pointer.ts",
     "./util/disable-native-drag-preview": "./src/entry-point/util/disable-native-drag-preview.ts",
     "./util/scroll-just-enough-into-view": "./src/entry-point/util/scroll-just-enough-into-view.ts",
     "./experimental/cross-window-element-adapter": "./src/entry-point/experimental/cross-with-element-adapter.ts"
@@ -54,7 +56,7 @@
     "raf-schd": "^4.0.3"
   },
   "devDependencies": {
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@emotion/react": "^11.7.1",

package/util/center-under-pointer/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/pragmatic-drag-and-drop/util/center-under-pointer",
+  "main": "../../dist/cjs/entry-point/util/center-under-pointer.js",
+  "module": "../../dist/esm/entry-point/util/center-under-pointer.js",
+  "module:es2019": "../../dist/es2019/entry-point/util/center-under-pointer.js",
+  "sideEffects": false,
+  "types": "../../dist/types/entry-point/util/center-under-pointer.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../../dist/types-ts4.5/entry-point/util/center-under-pointer.d.ts"
+      ]
+    }
+  }
+}

package/util/offset-from-pointer/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer",
+  "main": "../../dist/cjs/entry-point/util/offset-from-pointer.js",
+  "module": "../../dist/esm/entry-point/util/offset-from-pointer.js",
+  "module:es2019": "../../dist/es2019/entry-point/util/offset-from-pointer.js",
+  "sideEffects": false,
+  "types": "../../dist/types/entry-point/util/offset-from-pointer.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../../dist/types-ts4.5/entry-point/util/offset-from-pointer.d.ts"
+      ]
+    }
+  }
+}