From af48f17966d9ef6a984610374e91d3a314c487e4 Mon Sep 17 00:00:00 2001
From: Maxime Peloquin <mpeloquin@landr.com>
Date: Tue, 10 Dec 2024 15:43:28 -0500
Subject: [PATCH 1/6] feat(preview): allow changing the preview placement

---
 .../react-dnd-preview/examples/offset/App.tsx | 60 ++++++++++++++++---
 packages/react-dnd-preview/src/index.ts       |  1 +
 packages/react-dnd-preview/src/offsets.ts     | 60 ++++++++++++++++++-
 packages/react-dnd-preview/src/usePreview.ts  | 13 +++-
 4 files changed, 119 insertions(+), 15 deletions(-)

diff --git a/packages/react-dnd-preview/examples/offset/App.tsx b/packages/react-dnd-preview/examples/offset/App.tsx
index caa7a454..03a162ce 100644
--- a/packages/react-dnd-preview/examples/offset/App.tsx
+++ b/packages/react-dnd-preview/examples/offset/App.tsx
@@ -1,7 +1,8 @@
 import React, {CSSProperties, useState} from 'react'
 import {DndProvider} from 'react-dnd'
 import {TouchBackend} from 'react-dnd-touch-backend'
-import {usePreview} from '../../src'
+import {usePreview, Point} from '../../src'
+import type {PreviewPlacement} from '../../src/'
 import {Draggable, Shape, DragContent} from '../shared'
 
 type Kinds = 'default' | 'ref' | 'custom_client' | 'custom_source_client'
@@ -9,10 +10,12 @@ type Kinds = 'default' | 'ref' | 'custom_client' | 'custom_source_client'
 type PreviewProps = {
   kind: Kinds,
   text: string,
+  previewPlacement?: PreviewPlacement,
+  padding?: Point
 }
 
-export const Preview = ({kind, text}: PreviewProps): JSX.Element | null => {
-  const preview = usePreview<DragContent, HTMLDivElement>()
+export const Preview = ({kind, text, previewPlacement, padding}: PreviewProps): JSX.Element | null => {
+  const preview = usePreview<DragContent, HTMLDivElement>({previewPlacement, padding})
   if (!preview.display) {
     return null
   }
@@ -47,23 +50,62 @@ export const Preview = ({kind, text}: PreviewProps): JSX.Element | null => {
 
 export const App = (): JSX.Element => {
   const [debug, setDebug] = useState(false)
+  const [previewPlacement, setPreviewPlacement] = useState<PreviewPlacement>('center')
+
+  const [paddingX, setPaddingX] = useState('0')
+  const [paddingY, setPaddingY] = useState('0')
+
+  const handlePlacementChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setPreviewPlacement(e.target.value as PreviewPlacement)
+  }
+
+  const handlePaddingXChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPaddingX(e.target.value)
+  }
+
+  const handlePaddingYChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPaddingY(e.target.value)
+  }
 
   return (
     <React.StrictMode>
+      <p>
+        <label htmlFor="previewPlacement">Preview placement: </label>
+        <select value={previewPlacement} id="previewPlacement" onChange={handlePlacementChange}>
+          <option value="center">center (default)</option>
+          <option value="top-start">top-start</option>
+          <option value="top">top</option>
+          <option value="top-end">top-end</option>
+          <option value="bottom-start">bottom-start</option>
+          <option value="bottom">bottom</option>
+          <option value="bottom-end">bottom-end</option>
+          <option value="left">left</option>
+          <option value="right">right</option>
+        </select>
+      </p>
+      <p>
+        <label htmlFor="previewPlacement">Padding x: </label>
+        <input type="text" value={paddingX} onChange={handlePaddingXChange}/>
+      </p>
+      <p>
+        <label htmlFor="previewPlacement">Padding y: </label>
+        <input type="text" value={paddingY} onChange={handlePaddingYChange}/>
+      </p>
       <p>
         <input type="checkbox" checked={debug} onChange={(e) => {
           setDebug(e.target.checked)
-        }} id="debug_mode" />
+        }} id="debug_mode"/>
         <label htmlFor="debug_mode">Debug mode</label>
+
       </p>
       <DndProvider backend={TouchBackend} options={{enableMouseEvents: true}}>
-        <Draggable />
-        <Preview text="default" kind="default" />
-        <Preview text="with ref" kind="ref" />
+        <Draggable/>
+        <Preview text="default" kind="default"/>
+        <Preview text="with ref" kind="ref" previewPlacement={previewPlacement} padding={{x: Number(paddingX), y: Number(paddingY)}}/>
         {debug ? (
           <>
-            <Preview text="custom ClientOffset" kind="custom_client" />
-            <Preview text="custom SourceClientOffset" kind="custom_source_client" />
+            <Preview text="custom ClientOffset" kind="custom_client"/>
+            <Preview text="custom SourceClientOffset" kind="custom_source_client"/>
           </>
         ) : null}
       </DndProvider>
diff --git a/packages/react-dnd-preview/src/index.ts b/packages/react-dnd-preview/src/index.ts
index 20848074..f926352a 100644
--- a/packages/react-dnd-preview/src/index.ts
+++ b/packages/react-dnd-preview/src/index.ts
@@ -1,6 +1,7 @@
 export { Preview } from './Preview'
 export type { PreviewProps, PreviewGenerator } from './Preview'
 export { usePreview } from './usePreview'
+export type { PreviewPlacement, Point } from './offsets'
 export type { usePreviewState, usePreviewStateContent } from './usePreview'
 export { Context } from './Context'
 export type { PreviewState } from './Context'
diff --git a/packages/react-dnd-preview/src/offsets.ts b/packages/react-dnd-preview/src/offsets.ts
index 354ac34e..86d4b5f5 100644
--- a/packages/react-dnd-preview/src/offsets.ts
+++ b/packages/react-dnd-preview/src/offsets.ts
@@ -14,6 +14,17 @@ export type Point = {
   y: number,
 }
 
+export type PreviewPlacement =
+    | 'center'
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'right'
+
 const subtract = (a: Point, b: Point): Point => {
   return {
     x: a.x - b.x,
@@ -21,6 +32,13 @@ const subtract = (a: Point, b: Point): Point => {
   }
 }
 
+const add = (a: Point, b: Point): Point => {
+  return {
+    x: a.x + b.x,
+    y: a.y + b.y,
+  }
+}
+
 const calculateParentOffset = (monitor: DragLayerMonitor): Point => {
   const client = monitor.getInitialClientOffset()
   const source = monitor.getInitialSourceClientOffset()
@@ -30,7 +48,42 @@ const calculateParentOffset = (monitor: DragLayerMonitor): Point => {
   return subtract(client, source)
 }
 
-export const calculatePointerPosition = (monitor: DragLayerMonitor, childRef: RefObject<Element>): Point | null => {
+const calculateXOffset = (placement: PreviewPlacement, bb: DOMRect): number => {
+  switch (placement) {
+  case 'left':
+  case 'top-start':
+  case 'bottom-start':
+    return 0
+  case 'right':
+  case 'top-end':
+  case 'bottom-end':
+    return bb.width
+  default:
+    return bb.width / 2
+  }
+}
+
+const calculateYOffset = (placement: PreviewPlacement, bb: DOMRect): number => {
+  switch (placement) {
+  case 'top':
+  case 'top-start':
+  case 'top-end':
+    return 0
+  case 'bottom':
+  case 'bottom-start':
+  case 'bottom-end':
+    return bb.height
+  default:
+    return bb.height / 2
+  }
+}
+
+export const calculatePointerPosition = (
+  monitor: DragLayerMonitor,
+  childRef: RefObject<Element>,
+  placement: PreviewPlacement = 'center',
+  padding: Point = { x: 0, y: 0 },
+): Point | null => {
   const offset = monitor.getClientOffset()
   if (offset === null) {
     return null
@@ -43,6 +96,7 @@ export const calculatePointerPosition = (monitor: DragLayerMonitor, childRef: Re
   }
 
   const bb = childRef.current.getBoundingClientRect()
-  const middle = {x: bb.width / 2, y: bb.height / 2}
-  return subtract(offset, middle)
+  const previewOffset = { x: calculateXOffset(placement, bb), y: calculateYOffset(placement, bb) }
+
+  return add(subtract(offset, previewOffset), padding)
 }
diff --git a/packages/react-dnd-preview/src/usePreview.ts b/packages/react-dnd-preview/src/usePreview.ts
index 4d149386..c4734920 100644
--- a/packages/react-dnd-preview/src/usePreview.ts
+++ b/packages/react-dnd-preview/src/usePreview.ts
@@ -1,7 +1,7 @@
 import {CSSProperties, MutableRefObject, useRef} from 'react'
 import {DragLayerMonitor, useDragLayer} from 'react-dnd'
 import {Identifier} from 'dnd-core'
-import {calculatePointerPosition, Point} from './offsets'
+import {calculatePointerPosition, Point, PreviewPlacement} from './offsets'
 
 const getStyle = (currentOffset: Point): CSSProperties => {
   const transform = `translate(${currentOffset.x.toFixed(1)}px, ${currentOffset.y.toFixed(1)}px)`
@@ -31,11 +31,18 @@ export type usePreviewStateContent<T = unknown, El extends Element = Element> =
   monitor: DragLayerMonitor,
 }
 
-export const usePreview = <T = unknown, El extends Element = Element>(): usePreviewState<T, El> => {
+export type usePreviewOptions = {
+  previewPlacement?: PreviewPlacement;
+  padding?: Point;
+};
+
+export const usePreview = <T = unknown, El extends Element = Element>(
+  options?: usePreviewOptions,
+): usePreviewState<T, El> => {
   const child = useRef<El | null>(null)
   const collectedProps = useDragLayer((monitor: DragLayerMonitor<T>) => {
     return {
-      currentOffset: calculatePointerPosition(monitor, child),
+      currentOffset: calculatePointerPosition(monitor, child, options?.previewPlacement, options?.padding),
       isDragging: monitor.isDragging(),
       itemType: monitor.getItemType(),
       item: monitor.getItem(),

From 8d2cfd45cb50eefc5e890f4452199682161e5666 Mon Sep 17 00:00:00 2001
From: Maxime Peloquin <mpeloquin@landr.com>
Date: Tue, 10 Dec 2024 16:19:12 -0500
Subject: [PATCH 2/6] fix: add tests

---
 .../react-dnd-preview/examples/offset/App.tsx |  2 +-
 .../src/__tests__/usePreview.test.ts          | 91 +++++++++++++++++++
 packages/react-dnd-preview/src/usePreview.ts  |  4 +-
 3 files changed, 94 insertions(+), 3 deletions(-)

diff --git a/packages/react-dnd-preview/examples/offset/App.tsx b/packages/react-dnd-preview/examples/offset/App.tsx
index 03a162ce..49a5d445 100644
--- a/packages/react-dnd-preview/examples/offset/App.tsx
+++ b/packages/react-dnd-preview/examples/offset/App.tsx
@@ -15,7 +15,7 @@ type PreviewProps = {
 }
 
 export const Preview = ({kind, text, previewPlacement, padding}: PreviewProps): JSX.Element | null => {
-  const preview = usePreview<DragContent, HTMLDivElement>({previewPlacement, padding})
+  const preview = usePreview<DragContent, HTMLDivElement>({placement: previewPlacement, padding})
   if (!preview.display) {
     return null
   }
diff --git a/packages/react-dnd-preview/src/__tests__/usePreview.test.ts b/packages/react-dnd-preview/src/__tests__/usePreview.test.ts
index 07e22ca1..f32f7a95 100644
--- a/packages/react-dnd-preview/src/__tests__/usePreview.test.ts
+++ b/packages/react-dnd-preview/src/__tests__/usePreview.test.ts
@@ -3,6 +3,7 @@ import {renderHook, act} from '@testing-library/react'
 import {MockDragMonitor} from '@mocks/mocks'
 import {__setMockMonitor} from '@mocks/react-dnd'
 import {MutableRefObject} from 'react'
+import {PreviewPlacement} from 'react-dnd-preview'
 
 describe('usePreview hook', () => {
   beforeEach(() => {
@@ -191,4 +192,94 @@ describe('usePreview hook', () => {
       },
     })
   })
+
+
+  const cases: { placement: PreviewPlacement, expectedTransform: string }[] = [{
+    placement: 'center',
+    expectedTransform: 'translate(-49.0px, -33.0px)',
+  }, {
+    placement: 'top',
+    expectedTransform: 'translate(-49.0px, 2.0px)',
+  }, {
+    placement: 'top-start',
+    expectedTransform: 'translate(1.0px, 2.0px)',
+  }, {
+    placement: 'top-end',
+    expectedTransform: 'translate(-99.0px, 2.0px)',
+  }, {
+    placement: 'bottom',
+    expectedTransform: 'translate(-49.0px, -68.0px)',
+  }, {
+    placement: 'bottom-start',
+    expectedTransform: 'translate(1.0px, -68.0px)',
+  }, {
+    placement: 'bottom-end',
+    expectedTransform: 'translate(-99.0px, -68.0px)',
+  }, {
+    placement: 'left',
+    expectedTransform: 'translate(1.0px, -33.0px)',
+  }, {
+    placement: 'right',
+    expectedTransform: 'translate(-99.0px, -33.0px)',
+  }]
+
+  describe('preview placement', () => {
+    // eslint-disable-next-line jest/no-focused-tests
+    test.each(cases)(
+      'return true and data when DnD is in progress (with ref, parent offset and placement $placement)',
+      async ({placement, expectedTransform}) => {
+        __setMockMonitor({
+          ...MockDragMonitor<{bluh: string}>({bluh: 'fake'}),
+          isDragging() {return true},
+          getItemType() {return 'no'},
+          getClientOffset() {return {x: 1, y: 2}},
+          getInitialClientOffset() {return {x: 1, y: 2}},
+          getInitialSourceClientOffset() {return {x: 0, y: 1}},
+        })
+        const {result, rerender} = renderHook(() => {return usePreview({ placement }) as usePreviewStateFull})
+        const {current: {display, monitor: _monitor, ref, ...rest}} = result
+        expect(display).toBe(true)
+        expect(ref).not.toBeNull()
+        expect(rest).toEqual({
+          item: {bluh: 'fake'},
+          itemType: 'no',
+          style: {
+            pointerEvents: 'none',
+            position: 'fixed',
+            left: 0,
+            top: 0,
+            WebkitTransform: 'translate(0.0px, 1.0px)',
+            transform: 'translate(0.0px, 1.0px)',
+          },
+        })
+        await act<void>(() => {
+          // FIXME: not great...
+          (ref as MutableRefObject<HTMLDivElement>).current = {
+            ...document.createElement('div'),
+            getBoundingClientRect() {
+              return {
+                width: 100, height: 70,
+                x: 0, y: 0, bottom: 0, left: 0, right: 0, top: 0,
+                toJSON() { },
+              }
+            },
+          }
+        })
+        rerender({ placement })
+        const {current: {display: _display, monitor: _monitor2, ref: _ref, ...rest2}} = result
+        expect(rest2).toEqual({
+          item: {bluh: 'fake'},
+          itemType: 'no',
+          style: {
+            pointerEvents: 'none',
+            position: 'fixed',
+            left: 0,
+            top: 0,
+            WebkitTransform: expectedTransform,
+            transform: expectedTransform,
+          },
+        })
+      }
+    )
+  })
 })
diff --git a/packages/react-dnd-preview/src/usePreview.ts b/packages/react-dnd-preview/src/usePreview.ts
index c4734920..319e84e3 100644
--- a/packages/react-dnd-preview/src/usePreview.ts
+++ b/packages/react-dnd-preview/src/usePreview.ts
@@ -32,7 +32,7 @@ export type usePreviewStateContent<T = unknown, El extends Element = Element> =
 }
 
 export type usePreviewOptions = {
-  previewPlacement?: PreviewPlacement;
+  placement?: PreviewPlacement;
   padding?: Point;
 };
 
@@ -42,7 +42,7 @@ export const usePreview = <T = unknown, El extends Element = Element>(
   const child = useRef<El | null>(null)
   const collectedProps = useDragLayer((monitor: DragLayerMonitor<T>) => {
     return {
-      currentOffset: calculatePointerPosition(monitor, child, options?.previewPlacement, options?.padding),
+      currentOffset: calculatePointerPosition(monitor, child, options?.placement, options?.padding),
       isDragging: monitor.isDragging(),
       itemType: monitor.getItemType(),
       item: monitor.getItem(),

From 7e0b9d694fc944bfeca333cf176d2d2cf236a005 Mon Sep 17 00:00:00 2001
From: Maxime Peloquin <mpeloquin@landr.com>
Date: Tue, 10 Dec 2024 16:29:05 -0500
Subject: [PATCH 3/6] fix: fix issues

---
 packages/react-dnd-preview/examples/offset/App.tsx        | 8 ++++----
 .../react-dnd-preview/src/__tests__/usePreview.test.ts    | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-dnd-preview/examples/offset/App.tsx b/packages/react-dnd-preview/examples/offset/App.tsx
index 49a5d445..89bcaa1d 100644
--- a/packages/react-dnd-preview/examples/offset/App.tsx
+++ b/packages/react-dnd-preview/examples/offset/App.tsx
@@ -10,12 +10,12 @@ type Kinds = 'default' | 'ref' | 'custom_client' | 'custom_source_client'
 type PreviewProps = {
   kind: Kinds,
   text: string,
-  previewPlacement?: PreviewPlacement,
+  placement?: PreviewPlacement,
   padding?: Point
 }
 
-export const Preview = ({kind, text, previewPlacement, padding}: PreviewProps): JSX.Element | null => {
-  const preview = usePreview<DragContent, HTMLDivElement>({placement: previewPlacement, padding})
+export const Preview = ({kind, text, placement, padding}: PreviewProps): JSX.Element | null => {
+  const preview = usePreview<DragContent, HTMLDivElement>({placement, padding})
   if (!preview.display) {
     return null
   }
@@ -101,7 +101,7 @@ export const App = (): JSX.Element => {
       <DndProvider backend={TouchBackend} options={{enableMouseEvents: true}}>
         <Draggable/>
         <Preview text="default" kind="default"/>
-        <Preview text="with ref" kind="ref" previewPlacement={previewPlacement} padding={{x: Number(paddingX), y: Number(paddingY)}}/>
+        <Preview text="with ref" kind="ref" placement={previewPlacement} padding={{x: Number(paddingX), y: Number(paddingY)}}/>
         {debug ? (
           <>
             <Preview text="custom ClientOffset" kind="custom_client"/>
diff --git a/packages/react-dnd-preview/src/__tests__/usePreview.test.ts b/packages/react-dnd-preview/src/__tests__/usePreview.test.ts
index f32f7a95..26575538 100644
--- a/packages/react-dnd-preview/src/__tests__/usePreview.test.ts
+++ b/packages/react-dnd-preview/src/__tests__/usePreview.test.ts
@@ -3,7 +3,7 @@ import {renderHook, act} from '@testing-library/react'
 import {MockDragMonitor} from '@mocks/mocks'
 import {__setMockMonitor} from '@mocks/react-dnd'
 import {MutableRefObject} from 'react'
-import {PreviewPlacement} from 'react-dnd-preview'
+import { PreviewPlacement } from '../offsets'
 
 describe('usePreview hook', () => {
   beforeEach(() => {

From 981d4f96c0aadd71424e8e6691b74ae16c6419d5 Mon Sep 17 00:00:00 2001
From: Maxime Peloquin <mpeloquin@landr.com>
Date: Tue, 10 Dec 2024 16:35:57 -0500
Subject: [PATCH 4/6] fix: remove duplicated test code

---
 .../src/__tests__/usePreview.test.ts          | 227 +++++++-----------
 1 file changed, 86 insertions(+), 141 deletions(-)

diff --git a/packages/react-dnd-preview/src/__tests__/usePreview.test.ts b/packages/react-dnd-preview/src/__tests__/usePreview.test.ts
index 26575538..2ed84cbc 100644
--- a/packages/react-dnd-preview/src/__tests__/usePreview.test.ts
+++ b/packages/react-dnd-preview/src/__tests__/usePreview.test.ts
@@ -139,147 +139,92 @@ describe('usePreview hook', () => {
     })
   })
 
-  test('return true and data when DnD is in progress (with ref and parent offset)', async () => {
-    __setMockMonitor({
-      ...MockDragMonitor<{bluh: string}>({bluh: 'fake'}),
-      isDragging() {return true},
-      getItemType() {return 'no'},
-      getClientOffset() {return {x: 1, y: 2}},
-      getInitialClientOffset() {return {x: 1, y: 2}},
-      getInitialSourceClientOffset() {return {x: 0, y: 1}},
-    })
-    const {result, rerender} = renderHook(() => {return usePreview() as usePreviewStateFull})
-    const {current: {display, monitor: _monitor, ref, ...rest}} = result
-    expect(display).toBe(true)
-    expect(ref).not.toBeNull()
-    expect(rest).toEqual({
-      item: {bluh: 'fake'},
-      itemType: 'no',
-      style: {
-        pointerEvents: 'none',
-        position: 'fixed',
-        left: 0,
-        top: 0,
-        WebkitTransform: 'translate(0.0px, 1.0px)',
-        transform: 'translate(0.0px, 1.0px)',
-      },
-    })
-    await act<void>(() => {
-      // FIXME: not great...
-      (ref as MutableRefObject<HTMLDivElement>).current = {
-        ...document.createElement('div'),
-        getBoundingClientRect() {
-          return {
-            width: 100, height: 70,
-            x: 0, y: 0, bottom: 0, left: 0, right: 0, top: 0,
-            toJSON() { },
-          }
-        },
-      }
-    })
-    rerender()
-    const {current: {display: _display, monitor: _monitor2, ref: _ref, ...rest2}} = result
-    expect(rest2).toEqual({
-      item: {bluh: 'fake'},
-      itemType: 'no',
-      style: {
-        pointerEvents: 'none',
-        position: 'fixed',
-        left: 0,
-        top: 0,
-        WebkitTransform: 'translate(-49.0px, -33.0px)',
-        transform: 'translate(-49.0px, -33.0px)',
-      },
-    })
-  })
-
+  const cases: { placement?: PreviewPlacement, expectedTransform: string }[] = [
+    {
+      expectedTransform: 'translate(-49.0px, -33.0px)',
+    }, {
+      placement: 'center',
+      expectedTransform: 'translate(-49.0px, -33.0px)',
+    }, {
+      placement: 'top',
+      expectedTransform: 'translate(-49.0px, 2.0px)',
+    }, {
+      placement: 'top-start',
+      expectedTransform: 'translate(1.0px, 2.0px)',
+    }, {
+      placement: 'top-end',
+      expectedTransform: 'translate(-99.0px, 2.0px)',
+    }, {
+      placement: 'bottom',
+      expectedTransform: 'translate(-49.0px, -68.0px)',
+    }, {
+      placement: 'bottom-start',
+      expectedTransform: 'translate(1.0px, -68.0px)',
+    }, {
+      placement: 'bottom-end',
+      expectedTransform: 'translate(-99.0px, -68.0px)',
+    }, {
+      placement: 'left',
+      expectedTransform: 'translate(1.0px, -33.0px)',
+    }, {
+      placement: 'right',
+      expectedTransform: 'translate(-99.0px, -33.0px)',
+    }]
 
-  const cases: { placement: PreviewPlacement, expectedTransform: string }[] = [{
-    placement: 'center',
-    expectedTransform: 'translate(-49.0px, -33.0px)',
-  }, {
-    placement: 'top',
-    expectedTransform: 'translate(-49.0px, 2.0px)',
-  }, {
-    placement: 'top-start',
-    expectedTransform: 'translate(1.0px, 2.0px)',
-  }, {
-    placement: 'top-end',
-    expectedTransform: 'translate(-99.0px, 2.0px)',
-  }, {
-    placement: 'bottom',
-    expectedTransform: 'translate(-49.0px, -68.0px)',
-  }, {
-    placement: 'bottom-start',
-    expectedTransform: 'translate(1.0px, -68.0px)',
-  }, {
-    placement: 'bottom-end',
-    expectedTransform: 'translate(-99.0px, -68.0px)',
-  }, {
-    placement: 'left',
-    expectedTransform: 'translate(1.0px, -33.0px)',
-  }, {
-    placement: 'right',
-    expectedTransform: 'translate(-99.0px, -33.0px)',
-  }]
-
-  describe('preview placement', () => {
-    // eslint-disable-next-line jest/no-focused-tests
-    test.each(cases)(
-      'return true and data when DnD is in progress (with ref, parent offset and placement $placement)',
-      async ({placement, expectedTransform}) => {
-        __setMockMonitor({
-          ...MockDragMonitor<{bluh: string}>({bluh: 'fake'}),
-          isDragging() {return true},
-          getItemType() {return 'no'},
-          getClientOffset() {return {x: 1, y: 2}},
-          getInitialClientOffset() {return {x: 1, y: 2}},
-          getInitialSourceClientOffset() {return {x: 0, y: 1}},
-        })
-        const {result, rerender} = renderHook(() => {return usePreview({ placement }) as usePreviewStateFull})
-        const {current: {display, monitor: _monitor, ref, ...rest}} = result
-        expect(display).toBe(true)
-        expect(ref).not.toBeNull()
-        expect(rest).toEqual({
-          item: {bluh: 'fake'},
-          itemType: 'no',
-          style: {
-            pointerEvents: 'none',
-            position: 'fixed',
-            left: 0,
-            top: 0,
-            WebkitTransform: 'translate(0.0px, 1.0px)',
-            transform: 'translate(0.0px, 1.0px)',
-          },
-        })
-        await act<void>(() => {
-          // FIXME: not great...
-          (ref as MutableRefObject<HTMLDivElement>).current = {
-            ...document.createElement('div'),
-            getBoundingClientRect() {
-              return {
-                width: 100, height: 70,
-                x: 0, y: 0, bottom: 0, left: 0, right: 0, top: 0,
-                toJSON() { },
-              }
-            },
-          }
-        })
-        rerender({ placement })
-        const {current: {display: _display, monitor: _monitor2, ref: _ref, ...rest2}} = result
-        expect(rest2).toEqual({
-          item: {bluh: 'fake'},
-          itemType: 'no',
-          style: {
-            pointerEvents: 'none',
-            position: 'fixed',
-            left: 0,
-            top: 0,
-            WebkitTransform: expectedTransform,
-            transform: expectedTransform,
+  test.each(cases)(
+    'return true and data when DnD is in progress (with ref, parent offset and placement $placement)',
+    async ({placement, expectedTransform}) => {
+      __setMockMonitor({
+        ...MockDragMonitor<{bluh: string}>({bluh: 'fake'}),
+        isDragging() {return true},
+        getItemType() {return 'no'},
+        getClientOffset() {return {x: 1, y: 2}},
+        getInitialClientOffset() {return {x: 1, y: 2}},
+        getInitialSourceClientOffset() {return {x: 0, y: 1}},
+      })
+      const {result, rerender} = renderHook(() => {return usePreview({ placement }) as usePreviewStateFull})
+      const {current: {display, monitor: _monitor, ref, ...rest}} = result
+      expect(display).toBe(true)
+      expect(ref).not.toBeNull()
+      expect(rest).toEqual({
+        item: {bluh: 'fake'},
+        itemType: 'no',
+        style: {
+          pointerEvents: 'none',
+          position: 'fixed',
+          left: 0,
+          top: 0,
+          WebkitTransform: 'translate(0.0px, 1.0px)',
+          transform: 'translate(0.0px, 1.0px)',
+        },
+      })
+      await act<void>(() => {
+        // FIXME: not great...
+        (ref as MutableRefObject<HTMLDivElement>).current = {
+          ...document.createElement('div'),
+          getBoundingClientRect() {
+            return {
+              width: 100, height: 70,
+              x: 0, y: 0, bottom: 0, left: 0, right: 0, top: 0,
+              toJSON() { },
+            }
           },
-        })
-      }
-    )
-  })
+        }
+      })
+      rerender({ placement })
+      const {current: {display: _display, monitor: _monitor2, ref: _ref, ...rest2}} = result
+      expect(rest2).toEqual({
+        item: {bluh: 'fake'},
+        itemType: 'no',
+        style: {
+          pointerEvents: 'none',
+          position: 'fixed',
+          left: 0,
+          top: 0,
+          WebkitTransform: expectedTransform,
+          transform: expectedTransform,
+        },
+      })
+    }
+  )
 })

From 4fe75c1dd0afff74181a54708e04084d1671d382 Mon Sep 17 00:00:00 2001
From: Maxime Peloquin <mpeloquin@landr.com>
Date: Tue, 10 Dec 2024 16:54:32 -0500
Subject: [PATCH 5/6] feat: add props to Component style as well

---
 .../examples/main/methods/common.tsx                  |  4 ++--
 packages/react-dnd-preview/src/Preview.tsx            | 11 +++++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/react-dnd-preview/examples/main/methods/common.tsx b/packages/react-dnd-preview/examples/main/methods/common.tsx
index 75eb82e3..4cb5351a 100644
--- a/packages/react-dnd-preview/examples/main/methods/common.tsx
+++ b/packages/react-dnd-preview/examples/main/methods/common.tsx
@@ -11,9 +11,9 @@ export type GenPreviewProps = {
   method: string,
 }
 
-export const generatePreview = ({itemType, item, style}: PreviewProps, {row, col, title, method}: GenPreviewProps): JSX.Element => {
+export const generatePreview = ({itemType, item, style, ref}: PreviewProps, {row, col, title, method}: GenPreviewProps): JSX.Element => {
   return (
-    <Shape color={item.color} size={50} style={{
+    <Shape color={item.color} size={50} ref={ref} style={{
       ...style,
       top: `${row * 60}px`,
       left: `${col * 100}px`,
diff --git a/packages/react-dnd-preview/src/Preview.tsx b/packages/react-dnd-preview/src/Preview.tsx
index 3c84a77f..83407ec9 100644
--- a/packages/react-dnd-preview/src/Preview.tsx
+++ b/packages/react-dnd-preview/src/Preview.tsx
@@ -1,17 +1,24 @@
 import React, {ReactNode} from 'react'
 import {usePreview} from './usePreview'
 import {Context, PreviewState} from './Context'
+import {PreviewPlacement, Point} from './offsets'
 
 export type PreviewGenerator<T = unknown, El extends Element = Element> = (state: PreviewState<T, El>) => JSX.Element
 
-export type PreviewProps<T = unknown, El extends Element = Element> = {
+export type PreviewProps<T = unknown, El extends Element = Element> = ({
   children: PreviewGenerator<T, El> | ReactNode
 } | {
   generator: PreviewGenerator<T, El>,
+}) & {
+    placement?: PreviewPlacement,
+    padding?: Point,
 }
 
 export const Preview = <T = unknown, El extends Element = Element>(props: PreviewProps<T, El>): JSX.Element | null => {
-  const result = usePreview<T, El>()
+  const result = usePreview<T, El>({
+    placement: props.placement,
+    padding: props.padding,
+  })
 
   if (!result.display) {
     return null

From 45e38e9b173156bc1702d70c73bcff8ad7bf90b6 Mon Sep 17 00:00:00 2001
From: Maxime Peloquin <mpeloquin@landr.com>
Date: Tue, 10 Dec 2024 16:58:01 -0500
Subject: [PATCH 6/6] doc: update readme

---
 packages/react-dnd-preview/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-dnd-preview/README.md b/packages/react-dnd-preview/README.md
index fafc5ec4..982dd8da 100644
--- a/packages/react-dnd-preview/README.md
+++ b/packages/react-dnd-preview/README.md
@@ -36,12 +36,12 @@ See also the [examples](examples/) for more information.
 import { usePreview } from 'react-dnd-preview'
 
 const MyPreview = () => {
-  const preview = usePreview()
+  const preview = usePreview({ placement: 'top', padding: {x: -20, y: 0 }})
   if (!preview.display) {
     return null
   }
-  const {itemType, item, style} = preview;
-  return <div className="item-list__item" style={style}>{itemType}</div>
+  const {itemType, item, style, ref} = preview;
+  return <div className="item-list__item" ref={ref} style={style}>{itemType}</div>
 }
 
 const App = () => {