@dnd-kit/react 0.0.6-beta-20250126004210 → 0.0.6-beta-20250126145243

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 (5) hide show
  1. package/index.cjs +6 -7
  2. package/index.js +6 -7
  3. package/package.json +5 -5
  4. package/sortable.cjs +14 -15
  5. package/sortable.js +15 -16
package/index.cjs CHANGED
@@ -175,11 +175,10 @@ function useInstance(initializer) {
175
175
  var _a;
176
176
  const manager = (_a = useDragDropManager()) != null ? _a : void 0;
177
177
  const [instance] = react.useState(() => initializer(void 0));
178
- react.useEffect(() => {
178
+ if (instance.manager !== manager) {
179
179
  instance.manager = manager;
180
- const unregister = instance.register();
181
- return unregister;
182
- }, [instance, manager]);
180
+ }
181
+ react.useEffect(instance.register, [manager, instance]);
183
182
  return instance;
184
183
  }
185
184
 
@@ -197,8 +196,8 @@ function useDraggable(input) {
197
196
  manager
198
197
  )
199
198
  );
200
- const isDragSource = hooks.useComputed(() => draggable.isDragSource);
201
- const status = hooks.useComputed(() => draggable.status);
199
+ const isDragSource = hooks.useComputed(() => draggable.isDragSource, [draggable]);
200
+ const status = hooks.useComputed(() => draggable.status, [draggable]);
202
201
  hooks.useOnValueChange(id, () => draggable.id = id);
203
202
  hooks.useOnValueChange(handle, () => draggable.handle = handle);
204
203
  hooks.useOnValueChange(element, () => draggable.element = element);
@@ -255,7 +254,7 @@ function useDroppable(input) {
255
254
  manager
256
255
  )
257
256
  );
258
- const isDropTarget = hooks.useComputed(() => droppable.isDropTarget);
257
+ const isDropTarget = hooks.useComputed(() => droppable.isDropTarget, [droppable]);
259
258
  hooks.useOnValueChange(id, () => droppable.id = id);
260
259
  hooks.useOnValueChange(accept, () => droppable.id = id, void 0, state.deepEqual);
261
260
  hooks.useOnValueChange(collisionDetector, () => droppable.id = id);
package/index.js CHANGED
@@ -173,11 +173,10 @@ function useInstance(initializer) {
173
173
  var _a;
174
174
  const manager = (_a = useDragDropManager()) != null ? _a : void 0;
175
175
  const [instance] = useState(() => initializer(void 0));
176
- useEffect(() => {
176
+ if (instance.manager !== manager) {
177
177
  instance.manager = manager;
178
- const unregister = instance.register();
179
- return unregister;
180
- }, [instance, manager]);
178
+ }
179
+ useEffect(instance.register, [manager, instance]);
181
180
  return instance;
182
181
  }
183
182
 
@@ -195,8 +194,8 @@ function useDraggable(input) {
195
194
  manager
196
195
  )
197
196
  );
198
- const isDragSource = useComputed(() => draggable.isDragSource);
199
- const status = useComputed(() => draggable.status);
197
+ const isDragSource = useComputed(() => draggable.isDragSource, [draggable]);
198
+ const status = useComputed(() => draggable.status, [draggable]);
200
199
  useOnValueChange(id, () => draggable.id = id);
201
200
  useOnValueChange(handle, () => draggable.handle = handle);
202
201
  useOnValueChange(element, () => draggable.element = element);
@@ -253,7 +252,7 @@ function useDroppable(input) {
253
252
  manager
254
253
  )
255
254
  );
256
- const isDropTarget = useComputed(() => droppable.isDropTarget);
255
+ const isDropTarget = useComputed(() => droppable.isDropTarget, [droppable]);
257
256
  useOnValueChange(id, () => droppable.id = id);
258
257
  useOnValueChange(accept, () => droppable.id = id, void 0, deepEqual);
259
258
  useOnValueChange(collisionDetector, () => droppable.id = id);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dnd-kit/react",
3
- "version": "0.0.6-beta-20250126004210",
3
+ "version": "0.0.6-beta-20250126145243",
4
4
  "main": "./index.cjs",
5
5
  "module": "./index.js",
6
6
  "type": "module",
@@ -56,9 +56,9 @@
56
56
  "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
57
57
  },
58
58
  "dependencies": {
59
- "@dnd-kit/abstract": "0.0.6-beta-20250126004210",
60
- "@dnd-kit/dom": "0.0.6-beta-20250126004210",
61
- "@dnd-kit/state": "0.0.6-beta-20250126004210",
59
+ "@dnd-kit/abstract": "0.0.6-beta-20250126145243",
60
+ "@dnd-kit/dom": "0.0.6-beta-20250126145243",
61
+ "@dnd-kit/state": "0.0.6-beta-20250126145243",
62
62
  "tslib": "^2.6.2"
63
63
  },
64
64
  "peerDependencies": {
@@ -69,7 +69,7 @@
69
69
  "@types/react": "^19.0.8",
70
70
  "@types/react-dom": "^19.0.3",
71
71
  "eslint": "^8.38.0",
72
- "@dnd-kit/eslint-config": "0.0.1-beta-20250126004210",
72
+ "@dnd-kit/eslint-config": "0.0.1-beta-20250126145243",
73
73
  "react": "^19.0.0",
74
74
  "tsup": "~8.2.0",
75
75
  "typescript": "^5.5.2"
package/sortable.cjs CHANGED
@@ -41,11 +41,10 @@ function useSortable(input) {
41
41
  transition = sortable.defaultSortableTransition,
42
42
  type
43
43
  } = input;
44
- const manager = react.useDragDropManager();
45
44
  const handle = utilities.currentValue(input.handle);
46
45
  const element = utilities.currentValue(input.element);
47
46
  const target = utilities.currentValue(input.target);
48
- const sortable$1 = react.useInstance((manager2) => {
47
+ const sortable$1 = react.useInstance((manager) => {
49
48
  return new sortable.Sortable(
50
49
  __spreadProps(__spreadValues({}, input), {
51
50
  handle,
@@ -53,19 +52,19 @@ function useSortable(input) {
53
52
  target,
54
53
  feedback
55
54
  }),
56
- manager2
55
+ manager
57
56
  );
58
57
  });
59
- const isDropTarget = hooks.useComputed(() => sortable$1.isDropTarget);
60
- const isDragSource = hooks.useComputed(() => sortable$1.isDragSource);
61
- const status = hooks.useComputed(() => sortable$1.status);
58
+ const isDropTarget = hooks.useComputed(() => sortable$1.isDropTarget, [sortable$1]);
59
+ const isDragSource = hooks.useComputed(() => sortable$1.isDragSource, [sortable$1]);
60
+ const status = hooks.useComputed(() => sortable$1.status, [sortable$1]);
62
61
  hooks.useOnValueChange(id, () => sortable$1.id = id);
63
62
  hooks.useIsomorphicLayoutEffect(() => {
64
63
  state.batch(() => {
65
64
  sortable$1.group = group;
66
65
  sortable$1.index = index;
67
66
  });
68
- }, [group, index]);
67
+ }, [sortable$1, group, index]);
69
68
  hooks.useOnValueChange(type, () => sortable$1.type = type);
70
69
  hooks.useOnValueChange(
71
70
  accept,
@@ -77,7 +76,8 @@ function useSortable(input) {
77
76
  hooks.useOnValueChange(
78
77
  index,
79
78
  () => {
80
- if ((manager == null ? void 0 : manager.dragOperation.status.idle) && (transition == null ? void 0 : transition.idle)) {
79
+ var _a;
80
+ if (((_a = sortable$1.manager) == null ? void 0 : _a.dragOperation.status.idle) && (transition == null ? void 0 : transition.idle)) {
81
81
  sortable$1.refreshShape();
82
82
  }
83
83
  },
@@ -116,8 +116,8 @@ function useSortable(input) {
116
116
  ),
117
117
  ref: react$1.useCallback(
118
118
  (element2) => {
119
- var _a;
120
- if (!element2 && ((_a = sortable$1.element) == null ? void 0 : _a.isConnected) && !(manager == null ? void 0 : manager.dragOperation.status.idle)) {
119
+ var _a, _b;
120
+ if (!element2 && ((_a = sortable$1.element) == null ? void 0 : _a.isConnected) && !((_b = sortable$1.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
121
121
  return;
122
122
  }
123
123
  sortable$1.element = element2 != null ? element2 : void 0;
@@ -126,9 +126,8 @@ function useSortable(input) {
126
126
  ),
127
127
  sourceRef: react$1.useCallback(
128
128
  (element2) => {
129
- var _a;
130
- const { manager: manager2 } = sortable$1;
131
- if (!element2 && ((_a = sortable$1.source) == null ? void 0 : _a.isConnected) && !(manager2 == null ? void 0 : manager2.dragOperation.status.idle)) {
129
+ var _a, _b;
130
+ if (!element2 && ((_a = sortable$1.source) == null ? void 0 : _a.isConnected) && !((_b = sortable$1.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
132
131
  return;
133
132
  }
134
133
  sortable$1.source = element2 != null ? element2 : void 0;
@@ -137,8 +136,8 @@ function useSortable(input) {
137
136
  ),
138
137
  targetRef: react$1.useCallback(
139
138
  (element2) => {
140
- var _a;
141
- if (!element2 && ((_a = sortable$1.target) == null ? void 0 : _a.isConnected) && !(manager == null ? void 0 : manager.dragOperation.status.idle)) {
139
+ var _a, _b;
140
+ if (!element2 && ((_a = sortable$1.target) == null ? void 0 : _a.isConnected) && !((_b = sortable$1.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
142
141
  return;
143
142
  }
144
143
  sortable$1.target = element2 != null ? element2 : void 0;
package/sortable.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { useCallback } from 'react';
2
2
  import { batch, deepEqual } from '@dnd-kit/state';
3
3
  import { Sortable, defaultSortableTransition } from '@dnd-kit/dom/sortable';
4
- import { useDragDropManager, useInstance } from '@dnd-kit/react';
4
+ import { useInstance } from '@dnd-kit/react';
5
5
  import { useComputed, useOnValueChange, useIsomorphicLayoutEffect, useImmediateEffect } from '@dnd-kit/react/hooks';
6
6
  import { currentValue } from '@dnd-kit/react/utilities';
7
7
 
@@ -39,11 +39,10 @@ function useSortable(input) {
39
39
  transition = defaultSortableTransition,
40
40
  type
41
41
  } = input;
42
- const manager = useDragDropManager();
43
42
  const handle = currentValue(input.handle);
44
43
  const element = currentValue(input.element);
45
44
  const target = currentValue(input.target);
46
- const sortable = useInstance((manager2) => {
45
+ const sortable = useInstance((manager) => {
47
46
  return new Sortable(
48
47
  __spreadProps(__spreadValues({}, input), {
49
48
  handle,
@@ -51,19 +50,19 @@ function useSortable(input) {
51
50
  target,
52
51
  feedback
53
52
  }),
54
- manager2
53
+ manager
55
54
  );
56
55
  });
57
- const isDropTarget = useComputed(() => sortable.isDropTarget);
58
- const isDragSource = useComputed(() => sortable.isDragSource);
59
- const status = useComputed(() => sortable.status);
56
+ const isDropTarget = useComputed(() => sortable.isDropTarget, [sortable]);
57
+ const isDragSource = useComputed(() => sortable.isDragSource, [sortable]);
58
+ const status = useComputed(() => sortable.status, [sortable]);
60
59
  useOnValueChange(id, () => sortable.id = id);
61
60
  useIsomorphicLayoutEffect(() => {
62
61
  batch(() => {
63
62
  sortable.group = group;
64
63
  sortable.index = index;
65
64
  });
66
- }, [group, index]);
65
+ }, [sortable, group, index]);
67
66
  useOnValueChange(type, () => sortable.type = type);
68
67
  useOnValueChange(
69
68
  accept,
@@ -75,7 +74,8 @@ function useSortable(input) {
75
74
  useOnValueChange(
76
75
  index,
77
76
  () => {
78
- if ((manager == null ? void 0 : manager.dragOperation.status.idle) && (transition == null ? void 0 : transition.idle)) {
77
+ var _a;
78
+ if (((_a = sortable.manager) == null ? void 0 : _a.dragOperation.status.idle) && (transition == null ? void 0 : transition.idle)) {
79
79
  sortable.refreshShape();
80
80
  }
81
81
  },
@@ -114,8 +114,8 @@ function useSortable(input) {
114
114
  ),
115
115
  ref: useCallback(
116
116
  (element2) => {
117
- var _a;
118
- if (!element2 && ((_a = sortable.element) == null ? void 0 : _a.isConnected) && !(manager == null ? void 0 : manager.dragOperation.status.idle)) {
117
+ var _a, _b;
118
+ if (!element2 && ((_a = sortable.element) == null ? void 0 : _a.isConnected) && !((_b = sortable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
119
119
  return;
120
120
  }
121
121
  sortable.element = element2 != null ? element2 : void 0;
@@ -124,9 +124,8 @@ function useSortable(input) {
124
124
  ),
125
125
  sourceRef: useCallback(
126
126
  (element2) => {
127
- var _a;
128
- const { manager: manager2 } = sortable;
129
- if (!element2 && ((_a = sortable.source) == null ? void 0 : _a.isConnected) && !(manager2 == null ? void 0 : manager2.dragOperation.status.idle)) {
127
+ var _a, _b;
128
+ if (!element2 && ((_a = sortable.source) == null ? void 0 : _a.isConnected) && !((_b = sortable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
130
129
  return;
131
130
  }
132
131
  sortable.source = element2 != null ? element2 : void 0;
@@ -135,8 +134,8 @@ function useSortable(input) {
135
134
  ),
136
135
  targetRef: useCallback(
137
136
  (element2) => {
138
- var _a;
139
- if (!element2 && ((_a = sortable.target) == null ? void 0 : _a.isConnected) && !(manager == null ? void 0 : manager.dragOperation.status.idle)) {
137
+ var _a, _b;
138
+ if (!element2 && ((_a = sortable.target) == null ? void 0 : _a.isConnected) && !((_b = sortable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
140
139
  return;
141
140
  }
142
141
  sortable.target = element2 != null ? element2 : void 0;