@vx-oss/heroui-v2-use-draggable 2.1.19-alpha.2 → 2.1.21-beta.0

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 (3) hide show
  1. package/dist/index.js +15 -6
  2. package/dist/index.mjs +15 -6
  3. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -29,11 +29,20 @@ function useDraggable(props) {
29
29
  const { targetRef, isDisabled = false, canOverflow = false } = props;
30
30
  const boundary = (0, import_react.useRef)({ minLeft: 0, minTop: 0, maxLeft: 0, maxTop: 0 });
31
31
  const isDragging = (0, import_react.useRef)(false);
32
- let transform = { offsetX: 0, offsetY: 0 };
32
+ const transform = (0, import_react.useRef)({ offsetX: 0, offsetY: 0 });
33
+ const prevTargetRef = (0, import_react.useRef)(null);
34
+ (0, import_react.useEffect)(() => {
35
+ var _a;
36
+ const currentTarget = (_a = targetRef == null ? void 0 : targetRef.current) != null ? _a : null;
37
+ if (prevTargetRef.current !== currentTarget) {
38
+ transform.current = { offsetX: 0, offsetY: 0 };
39
+ prevTargetRef.current = currentTarget;
40
+ }
41
+ }, [targetRef == null ? void 0 : targetRef.current]);
33
42
  const onMoveStart = (0, import_react.useCallback)(() => {
34
43
  var _a, _b, _c, _d, _e;
35
44
  isDragging.current = true;
36
- const { offsetX, offsetY } = transform;
45
+ const { offsetX, offsetY } = transform.current;
37
46
  const targetRect = (_a = targetRef == null ? void 0 : targetRef.current) == null ? void 0 : _a.getBoundingClientRect();
38
47
  const targetLeft = (_b = targetRect == null ? void 0 : targetRect.left) != null ? _b : 0;
39
48
  const targetTop = (_c = targetRect == null ? void 0 : targetRect.top) != null ? _c : 0;
@@ -51,13 +60,13 @@ function useDraggable(props) {
51
60
  maxLeft,
52
61
  maxTop
53
62
  };
54
- }, [transform, targetRef == null ? void 0 : targetRef.current]);
63
+ }, [targetRef]);
55
64
  const onMove = (0, import_react.useCallback)(
56
65
  (e) => {
57
66
  if (isDisabled) {
58
67
  return;
59
68
  }
60
- const { offsetX, offsetY } = transform;
69
+ const { offsetX, offsetY } = transform.current;
61
70
  const { minLeft, minTop, maxLeft, maxTop } = boundary.current;
62
71
  let moveX = offsetX + e.deltaX;
63
72
  let moveY = offsetY + e.deltaY;
@@ -65,7 +74,7 @@ function useDraggable(props) {
65
74
  moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
66
75
  moveY = Math.min(Math.max(moveY, minTop), maxTop);
67
76
  }
68
- transform = {
77
+ transform.current = {
69
78
  offsetX: moveX,
70
79
  offsetY: moveY
71
80
  };
@@ -73,7 +82,7 @@ function useDraggable(props) {
73
82
  targetRef.current.style.transform = `translate(${moveX}px, ${moveY}px)`;
74
83
  }
75
84
  },
76
- [isDisabled, transform, boundary.current, canOverflow, targetRef == null ? void 0 : targetRef.current]
85
+ [isDisabled, canOverflow, targetRef]
77
86
  );
78
87
  const onMoveEnd = (0, import_react.useCallback)(() => {
79
88
  isDragging.current = false;
package/dist/index.mjs CHANGED
@@ -5,11 +5,20 @@ function useDraggable(props) {
5
5
  const { targetRef, isDisabled = false, canOverflow = false } = props;
6
6
  const boundary = useRef({ minLeft: 0, minTop: 0, maxLeft: 0, maxTop: 0 });
7
7
  const isDragging = useRef(false);
8
- let transform = { offsetX: 0, offsetY: 0 };
8
+ const transform = useRef({ offsetX: 0, offsetY: 0 });
9
+ const prevTargetRef = useRef(null);
10
+ useEffect(() => {
11
+ var _a;
12
+ const currentTarget = (_a = targetRef == null ? void 0 : targetRef.current) != null ? _a : null;
13
+ if (prevTargetRef.current !== currentTarget) {
14
+ transform.current = { offsetX: 0, offsetY: 0 };
15
+ prevTargetRef.current = currentTarget;
16
+ }
17
+ }, [targetRef == null ? void 0 : targetRef.current]);
9
18
  const onMoveStart = useCallback(() => {
10
19
  var _a, _b, _c, _d, _e;
11
20
  isDragging.current = true;
12
- const { offsetX, offsetY } = transform;
21
+ const { offsetX, offsetY } = transform.current;
13
22
  const targetRect = (_a = targetRef == null ? void 0 : targetRef.current) == null ? void 0 : _a.getBoundingClientRect();
14
23
  const targetLeft = (_b = targetRect == null ? void 0 : targetRect.left) != null ? _b : 0;
15
24
  const targetTop = (_c = targetRect == null ? void 0 : targetRect.top) != null ? _c : 0;
@@ -27,13 +36,13 @@ function useDraggable(props) {
27
36
  maxLeft,
28
37
  maxTop
29
38
  };
30
- }, [transform, targetRef == null ? void 0 : targetRef.current]);
39
+ }, [targetRef]);
31
40
  const onMove = useCallback(
32
41
  (e) => {
33
42
  if (isDisabled) {
34
43
  return;
35
44
  }
36
- const { offsetX, offsetY } = transform;
45
+ const { offsetX, offsetY } = transform.current;
37
46
  const { minLeft, minTop, maxLeft, maxTop } = boundary.current;
38
47
  let moveX = offsetX + e.deltaX;
39
48
  let moveY = offsetY + e.deltaY;
@@ -41,7 +50,7 @@ function useDraggable(props) {
41
50
  moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
42
51
  moveY = Math.min(Math.max(moveY, minTop), maxTop);
43
52
  }
44
- transform = {
53
+ transform.current = {
45
54
  offsetX: moveX,
46
55
  offsetY: moveY
47
56
  };
@@ -49,7 +58,7 @@ function useDraggable(props) {
49
58
  targetRef.current.style.transform = `translate(${moveX}px, ${moveY}px)`;
50
59
  }
51
60
  },
52
- [isDisabled, transform, boundary.current, canOverflow, targetRef == null ? void 0 : targetRef.current]
61
+ [isDisabled, canOverflow, targetRef]
53
62
  );
54
63
  const onMoveEnd = useCallback(() => {
55
64
  isDragging.current = false;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vx-oss/heroui-v2-use-draggable",
3
- "version": "2.1.19-alpha.2",
3
+ "version": "2.1.21-beta.0",
4
4
  "description": "This hook can provide drag and drop interaction",
5
5
  "keywords": [
6
6
  "use-draggable"
@@ -37,7 +37,7 @@
37
37
  ]
38
38
  },
39
39
  "dependencies": {
40
- "@react-aria/interactions": "3.25.6"
40
+ "@react-aria/interactions": "3.27.1"
41
41
  },
42
42
  "module": "dist/index.mjs",
43
43
  "types": "dist/index.d.ts",