@dnd-kit/react 0.2.0-beta-20251026133006 → 0.2.0-beta-20251102221435

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/index.cjs +61 -46
  2. package/index.js +62 -47
  3. package/package.json +4 -4
package/index.cjs CHANGED
@@ -98,9 +98,7 @@ function DragDropProvider(_a2) {
98
98
  "onDragOver",
99
99
  "onDragEnd"
100
100
  ]);
101
- var _a3;
102
101
  const rendererRef = react.useRef(null);
103
- const [manager, setManager] = react.useState((_a3 = input.manager) != null ? _a3 : null);
104
102
  const { plugins, modifiers, sensors } = input;
105
103
  const handleBeforeDragStart = hooks.useLatest(onBeforeDragStart);
106
104
  const handleDragStart = hooks.useLatest(onDragStart);
@@ -108,53 +106,57 @@ function DragDropProvider(_a2) {
108
106
  const handleDragMove = hooks.useLatest(onDragMove);
109
107
  const handleDragEnd = hooks.useLatest(onDragEnd);
110
108
  const handleCollision = hooks.useLatest(onCollision);
109
+ const manager = useStableInstance(() => {
110
+ var _a3;
111
+ return (_a3 = input.manager) != null ? _a3 : new dom.DragDropManager(input);
112
+ });
111
113
  react.useEffect(() => {
112
- var _a4;
113
114
  if (!rendererRef.current) throw new Error("Renderer not found");
114
115
  const { renderer, trackRendering } = rendererRef.current;
115
- const manager2 = (_a4 = input.manager) != null ? _a4 : new dom.DragDropManager(input);
116
- manager2.renderer = renderer;
117
- manager2.monitor.addEventListener("beforedragstart", (event) => {
118
- const callback = handleBeforeDragStart.current;
119
- if (callback) {
120
- trackRendering(() => callback(event, manager2));
121
- }
122
- });
123
- manager2.monitor.addEventListener(
124
- "dragstart",
125
- (event) => {
126
- var _a5;
127
- return (_a5 = handleDragStart.current) == null ? void 0 : _a5.call(handleDragStart, event, manager2);
128
- }
129
- );
130
- manager2.monitor.addEventListener("dragover", (event) => {
131
- const callback = handleDragOver.current;
132
- if (callback) {
133
- trackRendering(() => callback(event, manager2));
134
- }
135
- });
136
- manager2.monitor.addEventListener("dragmove", (event) => {
137
- const callback = handleDragMove.current;
138
- if (callback) {
139
- trackRendering(() => callback(event, manager2));
140
- }
141
- });
142
- manager2.monitor.addEventListener("dragend", (event) => {
143
- const callback = handleDragEnd.current;
144
- if (callback) {
145
- trackRendering(() => callback(event, manager2));
146
- }
147
- });
148
- manager2.monitor.addEventListener(
149
- "collision",
150
- (event) => {
151
- var _a5;
152
- return (_a5 = handleCollision.current) == null ? void 0 : _a5.call(handleCollision, event, manager2);
153
- }
154
- );
155
- react.startTransition(() => setManager(manager2));
156
- return manager2.destroy;
157
- }, [input.manager]);
116
+ const { monitor } = manager;
117
+ manager.renderer = renderer;
118
+ const listeners = [
119
+ monitor.addEventListener("beforedragstart", (event) => {
120
+ const callback = handleBeforeDragStart.current;
121
+ if (callback) {
122
+ trackRendering(() => callback(event, manager));
123
+ }
124
+ }),
125
+ monitor.addEventListener(
126
+ "dragstart",
127
+ (event) => {
128
+ var _a3;
129
+ return (_a3 = handleDragStart.current) == null ? void 0 : _a3.call(handleDragStart, event, manager);
130
+ }
131
+ ),
132
+ monitor.addEventListener("dragover", (event) => {
133
+ const callback = handleDragOver.current;
134
+ if (callback) {
135
+ trackRendering(() => callback(event, manager));
136
+ }
137
+ }),
138
+ monitor.addEventListener("dragmove", (event) => {
139
+ const callback = handleDragMove.current;
140
+ if (callback) {
141
+ trackRendering(() => callback(event, manager));
142
+ }
143
+ }),
144
+ monitor.addEventListener("dragend", (event) => {
145
+ const callback = handleDragEnd.current;
146
+ if (callback) {
147
+ trackRendering(() => callback(event, manager));
148
+ }
149
+ }),
150
+ monitor.addEventListener(
151
+ "collision",
152
+ (event) => {
153
+ var _a3;
154
+ return (_a3 = handleCollision.current) == null ? void 0 : _a3.call(handleCollision, event, manager);
155
+ }
156
+ )
157
+ ];
158
+ return () => listeners.forEach((dispose) => dispose());
159
+ }, [manager]);
158
160
  hooks.useOnValueChange(
159
161
  plugins,
160
162
  () => manager && (manager.plugins = plugins != null ? plugins : dom.defaultPreset.plugins),
@@ -175,6 +177,19 @@ function DragDropProvider(_a2) {
175
177
  children
176
178
  ] });
177
179
  }
180
+ function useStableInstance(create) {
181
+ const ref = react.useRef(null);
182
+ if (!ref.current) {
183
+ ref.current = create();
184
+ }
185
+ react.useInsertionEffect(() => {
186
+ return () => {
187
+ var _a2;
188
+ return (_a2 = ref.current) == null ? void 0 : _a2.destroy();
189
+ };
190
+ }, []);
191
+ return ref.current;
192
+ }
178
193
  function useDragDropManager() {
179
194
  return react.useContext(DragDropContext);
180
195
  }
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { createContext, memo, forwardRef, useState, useRef, useMemo, startTransition, useImperativeHandle, useEffect, useContext, useCallback, createElement } from 'react';
1
+ import { createContext, memo, forwardRef, useState, useRef, useMemo, startTransition, useImperativeHandle, useEffect, useInsertionEffect, useContext, useCallback, createElement } from 'react';
2
2
  import { DragDropManager, defaultPreset, Draggable, Feedback, Droppable } from '@dnd-kit/dom';
3
3
  export { KeyboardSensor, PointerSensor } from '@dnd-kit/dom';
4
4
  import { useIsomorphicLayoutEffect, useLatest, useOnValueChange, useDeepSignal, useOnElementChange, useComputed } from '@dnd-kit/react/hooks';
@@ -97,9 +97,7 @@ function DragDropProvider(_a2) {
97
97
  "onDragOver",
98
98
  "onDragEnd"
99
99
  ]);
100
- var _a3;
101
100
  const rendererRef = useRef(null);
102
- const [manager, setManager] = useState((_a3 = input.manager) != null ? _a3 : null);
103
101
  const { plugins, modifiers, sensors } = input;
104
102
  const handleBeforeDragStart = useLatest(onBeforeDragStart);
105
103
  const handleDragStart = useLatest(onDragStart);
@@ -107,53 +105,57 @@ function DragDropProvider(_a2) {
107
105
  const handleDragMove = useLatest(onDragMove);
108
106
  const handleDragEnd = useLatest(onDragEnd);
109
107
  const handleCollision = useLatest(onCollision);
108
+ const manager = useStableInstance(() => {
109
+ var _a3;
110
+ return (_a3 = input.manager) != null ? _a3 : new DragDropManager(input);
111
+ });
110
112
  useEffect(() => {
111
- var _a4;
112
113
  if (!rendererRef.current) throw new Error("Renderer not found");
113
114
  const { renderer, trackRendering } = rendererRef.current;
114
- const manager2 = (_a4 = input.manager) != null ? _a4 : new DragDropManager(input);
115
- manager2.renderer = renderer;
116
- manager2.monitor.addEventListener("beforedragstart", (event) => {
117
- const callback = handleBeforeDragStart.current;
118
- if (callback) {
119
- trackRendering(() => callback(event, manager2));
120
- }
121
- });
122
- manager2.monitor.addEventListener(
123
- "dragstart",
124
- (event) => {
125
- var _a5;
126
- return (_a5 = handleDragStart.current) == null ? void 0 : _a5.call(handleDragStart, event, manager2);
127
- }
128
- );
129
- manager2.monitor.addEventListener("dragover", (event) => {
130
- const callback = handleDragOver.current;
131
- if (callback) {
132
- trackRendering(() => callback(event, manager2));
133
- }
134
- });
135
- manager2.monitor.addEventListener("dragmove", (event) => {
136
- const callback = handleDragMove.current;
137
- if (callback) {
138
- trackRendering(() => callback(event, manager2));
139
- }
140
- });
141
- manager2.monitor.addEventListener("dragend", (event) => {
142
- const callback = handleDragEnd.current;
143
- if (callback) {
144
- trackRendering(() => callback(event, manager2));
145
- }
146
- });
147
- manager2.monitor.addEventListener(
148
- "collision",
149
- (event) => {
150
- var _a5;
151
- return (_a5 = handleCollision.current) == null ? void 0 : _a5.call(handleCollision, event, manager2);
152
- }
153
- );
154
- startTransition(() => setManager(manager2));
155
- return manager2.destroy;
156
- }, [input.manager]);
115
+ const { monitor } = manager;
116
+ manager.renderer = renderer;
117
+ const listeners = [
118
+ monitor.addEventListener("beforedragstart", (event) => {
119
+ const callback = handleBeforeDragStart.current;
120
+ if (callback) {
121
+ trackRendering(() => callback(event, manager));
122
+ }
123
+ }),
124
+ monitor.addEventListener(
125
+ "dragstart",
126
+ (event) => {
127
+ var _a3;
128
+ return (_a3 = handleDragStart.current) == null ? void 0 : _a3.call(handleDragStart, event, manager);
129
+ }
130
+ ),
131
+ monitor.addEventListener("dragover", (event) => {
132
+ const callback = handleDragOver.current;
133
+ if (callback) {
134
+ trackRendering(() => callback(event, manager));
135
+ }
136
+ }),
137
+ monitor.addEventListener("dragmove", (event) => {
138
+ const callback = handleDragMove.current;
139
+ if (callback) {
140
+ trackRendering(() => callback(event, manager));
141
+ }
142
+ }),
143
+ monitor.addEventListener("dragend", (event) => {
144
+ const callback = handleDragEnd.current;
145
+ if (callback) {
146
+ trackRendering(() => callback(event, manager));
147
+ }
148
+ }),
149
+ monitor.addEventListener(
150
+ "collision",
151
+ (event) => {
152
+ var _a3;
153
+ return (_a3 = handleCollision.current) == null ? void 0 : _a3.call(handleCollision, event, manager);
154
+ }
155
+ )
156
+ ];
157
+ return () => listeners.forEach((dispose) => dispose());
158
+ }, [manager]);
157
159
  useOnValueChange(
158
160
  plugins,
159
161
  () => manager && (manager.plugins = plugins != null ? plugins : defaultPreset.plugins),
@@ -174,6 +176,19 @@ function DragDropProvider(_a2) {
174
176
  children
175
177
  ] });
176
178
  }
179
+ function useStableInstance(create) {
180
+ const ref = useRef(null);
181
+ if (!ref.current) {
182
+ ref.current = create();
183
+ }
184
+ useInsertionEffect(() => {
185
+ return () => {
186
+ var _a2;
187
+ return (_a2 = ref.current) == null ? void 0 : _a2.destroy();
188
+ };
189
+ }, []);
190
+ return ref.current;
191
+ }
177
192
  function useDragDropManager() {
178
193
  return useContext(DragDropContext);
179
194
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dnd-kit/react",
3
- "version": "0.2.0-beta-20251026133006",
3
+ "version": "0.2.0-beta-20251102221435",
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.2.0-beta-20251026133006",
60
- "@dnd-kit/dom": "0.2.0-beta-20251026133006",
61
- "@dnd-kit/state": "0.2.0-beta-20251026133006",
59
+ "@dnd-kit/abstract": "0.2.0-beta-20251102221435",
60
+ "@dnd-kit/dom": "0.2.0-beta-20251102221435",
61
+ "@dnd-kit/state": "0.2.0-beta-20251102221435",
62
62
  "tslib": "^2.6.2"
63
63
  },
64
64
  "peerDependencies": {