@vuu-ui/vuu-utils 3.1.0-beta.2 → 3.1.0-beta.4
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.
- package/package.json +10 -8
- package/src/index.js +4 -4
- package/src/vendor/@dnd-kit/abstract/index.d.ts +1279 -0
- package/src/vendor/@dnd-kit/abstract/index.js +1472 -0
- package/src/vendor/@dnd-kit/abstract/index.js.map +1 -0
- package/src/vendor/@dnd-kit/abstract/modifiers.d.ts +134 -0
- package/src/vendor/@dnd-kit/abstract/modifiers.js +100 -0
- package/src/vendor/@dnd-kit/abstract/modifiers.js.map +1 -0
- package/src/vendor/@dnd-kit/abstract/package.json +60 -0
- package/src/vendor/@dnd-kit/collision/dist/index.d.ts +46 -0
- package/src/vendor/@dnd-kit/collision/dist/index.js +175 -0
- package/src/vendor/@dnd-kit/collision/package.json +42 -0
- package/src/vendor/@dnd-kit/dom/index.d.ts +298 -0
- package/src/vendor/@dnd-kit/dom/index.js +1977 -0
- package/src/vendor/@dnd-kit/dom/index.js.map +1 -0
- package/src/vendor/@dnd-kit/dom/modifiers.d.ts +26 -0
- package/src/vendor/@dnd-kit/dom/modifiers.js +117 -0
- package/src/vendor/@dnd-kit/dom/modifiers.js.map +1 -0
- package/src/vendor/@dnd-kit/dom/package.json +92 -0
- package/src/vendor/@dnd-kit/dom/plugins/debug.d.ts +8 -0
- package/src/vendor/@dnd-kit/dom/plugins/debug.js +125 -0
- package/src/vendor/@dnd-kit/dom/plugins/debug.js.map +1 -0
- package/src/vendor/@dnd-kit/dom/sortable.d.ts +125 -0
- package/src/vendor/@dnd-kit/dom/sortable.js +822 -0
- package/src/vendor/@dnd-kit/dom/sortable.js.map +1 -0
- package/src/vendor/@dnd-kit/dom/utilities.d.ts +215 -0
- package/src/vendor/@dnd-kit/dom/utilities.js +1361 -0
- package/src/vendor/@dnd-kit/dom/utilities.js.map +1 -0
- package/src/vendor/@dnd-kit/geometry/dist/index.d.ts +178 -0
- package/src/vendor/@dnd-kit/geometry/dist/index.js +347 -0
- package/src/vendor/@dnd-kit/geometry/package.json +31 -0
- package/src/vendor/@dnd-kit/react/hooks.d.ts +30 -0
- package/src/vendor/@dnd-kit/react/hooks.js +133 -0
- package/src/vendor/@dnd-kit/react/index.d.ts +84 -0
- package/src/vendor/@dnd-kit/react/index.js +617 -0
- package/src/vendor/@dnd-kit/react/package.json +80 -0
- package/src/vendor/@dnd-kit/react/sortable.d.ts +26 -0
- package/src/vendor/@dnd-kit/react/sortable.js +175 -0
- package/src/vendor/@dnd-kit/react/utilities.d.ts +7 -0
- package/src/vendor/@dnd-kit/react/utilities.js +18 -0
- package/src/vendor/@dnd-kit/state/dist/index.d.ts +54 -0
- package/src/vendor/@dnd-kit/state/dist/index.js +328 -0
- package/src/vendor/@dnd-kit/state/package.json +33 -0
- package/src/vendor/@preact/signals-core/dist/signals-core.js +1 -0
- package/src/vendor/@preact/signals-core/dist/signals-core.js.map +1 -0
- package/src/vendor/@preact/signals-core/package.json +4 -0
- package/src/vendor/tslib/CopyrightNotice.txt +15 -0
- package/src/vendor/tslib/LICENSE.txt +12 -0
- package/src/vendor/tslib/README.md +164 -0
- package/src/vendor/tslib/SECURITY.md +41 -0
- package/src/vendor/tslib/modules/index.d.ts +38 -0
- package/src/vendor/tslib/modules/index.js +70 -0
- package/src/vendor/tslib/modules/package.json +3 -0
- package/src/vendor/tslib/package.json +47 -0
- package/src/vendor/tslib/tslib.d.ts +460 -0
- package/src/vendor/tslib/tslib.es6.html +1 -0
- package/src/vendor/tslib/tslib.es6.js +402 -0
- package/src/vendor/tslib/tslib.es6.mjs +401 -0
- package/src/vendor/tslib/tslib.html +1 -0
- package/src/vendor/tslib/tslib.js +484 -0
|
@@ -0,0 +1,617 @@
|
|
|
1
|
+
import { createContext, memo, forwardRef, useState, useRef, useMemo, startTransition, useImperativeHandle, useEffect, useContext, useCallback, createElement } from 'react';
|
|
2
|
+
import { DragDropManager, defaultPreset, Draggable, Feedback, Droppable } from '../dom/index.js';
|
|
3
|
+
export { KeyboardSensor, PointerSensor } from '../dom/index.js';
|
|
4
|
+
import { useIsomorphicLayoutEffect, useLatest, useOnValueChange, useDeepSignal, useOnElementChange, useComputed } from './hooks.js';
|
|
5
|
+
import { deepEqual, ValueHistory, derived, batch } from '../state/dist/index.js';
|
|
6
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
7
|
+
import { currentValue } from './utilities.js';
|
|
8
|
+
import { CollisionPriority, CollisionType } from '../abstract/index.js';
|
|
9
|
+
|
|
10
|
+
var __defProp = Object.defineProperty;
|
|
11
|
+
var __defProps = Object.defineProperties;
|
|
12
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
13
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
14
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
15
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
16
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
17
|
+
var __spreadValues = (a, b) => {
|
|
18
|
+
for (var prop in b || (b = {}))
|
|
19
|
+
if (__hasOwnProp.call(b, prop))
|
|
20
|
+
__defNormalProp(a, prop, b[prop]);
|
|
21
|
+
if (__getOwnPropSymbols)
|
|
22
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
23
|
+
if (__propIsEnum.call(b, prop))
|
|
24
|
+
__defNormalProp(a, prop, b[prop]);
|
|
25
|
+
}
|
|
26
|
+
return a;
|
|
27
|
+
};
|
|
28
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
29
|
+
var __objRest = (source, exclude) => {
|
|
30
|
+
var target = {};
|
|
31
|
+
for (var prop in source)
|
|
32
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
if (source != null && __getOwnPropSymbols)
|
|
35
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
36
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
37
|
+
target[prop] = source[prop];
|
|
38
|
+
}
|
|
39
|
+
return target;
|
|
40
|
+
};
|
|
41
|
+
var defaultManager = new DragDropManager();
|
|
42
|
+
var DragDropContext = createContext(
|
|
43
|
+
defaultManager
|
|
44
|
+
);
|
|
45
|
+
var Renderer = memo(
|
|
46
|
+
forwardRef(({ children }, ref) => {
|
|
47
|
+
const [transitionCount, setTransitionCount] = useState(0);
|
|
48
|
+
const rendering = useRef(null);
|
|
49
|
+
const resolver = useRef(null);
|
|
50
|
+
const renderer = useMemo(
|
|
51
|
+
() => ({
|
|
52
|
+
renderer: {
|
|
53
|
+
get rendering() {
|
|
54
|
+
var _a2;
|
|
55
|
+
return (_a2 = rendering.current) != null ? _a2 : Promise.resolve();
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
trackRendering(callback) {
|
|
59
|
+
if (!rendering.current) {
|
|
60
|
+
rendering.current = new Promise((resolve) => {
|
|
61
|
+
resolver.current = resolve;
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
startTransition(() => {
|
|
65
|
+
callback();
|
|
66
|
+
setTransitionCount((count) => count + 1);
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
}),
|
|
70
|
+
[]
|
|
71
|
+
);
|
|
72
|
+
useIsomorphicLayoutEffect(() => {
|
|
73
|
+
var _a2;
|
|
74
|
+
(_a2 = resolver.current) == null ? void 0 : _a2.call(resolver);
|
|
75
|
+
rendering.current = null;
|
|
76
|
+
}, [children, transitionCount]);
|
|
77
|
+
useImperativeHandle(ref, () => renderer);
|
|
78
|
+
return null;
|
|
79
|
+
})
|
|
80
|
+
);
|
|
81
|
+
var options = [void 0, deepEqual];
|
|
82
|
+
function DragDropProvider(_a2) {
|
|
83
|
+
var _b = _a2, {
|
|
84
|
+
children,
|
|
85
|
+
onCollision,
|
|
86
|
+
onBeforeDragStart,
|
|
87
|
+
onDragStart,
|
|
88
|
+
onDragMove,
|
|
89
|
+
onDragOver,
|
|
90
|
+
onDragEnd
|
|
91
|
+
} = _b, input = __objRest(_b, [
|
|
92
|
+
"children",
|
|
93
|
+
"onCollision",
|
|
94
|
+
"onBeforeDragStart",
|
|
95
|
+
"onDragStart",
|
|
96
|
+
"onDragMove",
|
|
97
|
+
"onDragOver",
|
|
98
|
+
"onDragEnd"
|
|
99
|
+
]);
|
|
100
|
+
var _a3;
|
|
101
|
+
const rendererRef = useRef(null);
|
|
102
|
+
const [manager, setManager] = useState((_a3 = input.manager) != null ? _a3 : null);
|
|
103
|
+
const { plugins, modifiers, sensors } = input;
|
|
104
|
+
const handleBeforeDragStart = useLatest(onBeforeDragStart);
|
|
105
|
+
const handleDragStart = useLatest(onDragStart);
|
|
106
|
+
const handleDragOver = useLatest(onDragOver);
|
|
107
|
+
const handleDragMove = useLatest(onDragMove);
|
|
108
|
+
const handleDragEnd = useLatest(onDragEnd);
|
|
109
|
+
const handleCollision = useLatest(onCollision);
|
|
110
|
+
useEffect(() => {
|
|
111
|
+
var _a4;
|
|
112
|
+
if (!rendererRef.current) throw new Error("Renderer not found");
|
|
113
|
+
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]);
|
|
157
|
+
useOnValueChange(
|
|
158
|
+
plugins,
|
|
159
|
+
() => manager && (manager.plugins = plugins != null ? plugins : defaultPreset.plugins),
|
|
160
|
+
...options
|
|
161
|
+
);
|
|
162
|
+
useOnValueChange(
|
|
163
|
+
sensors,
|
|
164
|
+
() => manager && (manager.sensors = sensors != null ? sensors : defaultPreset.sensors),
|
|
165
|
+
...options
|
|
166
|
+
);
|
|
167
|
+
useOnValueChange(
|
|
168
|
+
modifiers,
|
|
169
|
+
() => manager && (manager.modifiers = modifiers != null ? modifiers : defaultPreset.modifiers),
|
|
170
|
+
...options
|
|
171
|
+
);
|
|
172
|
+
return /* @__PURE__ */ jsxs(DragDropContext.Provider, { value: manager, children: [
|
|
173
|
+
/* @__PURE__ */ jsx(Renderer, { ref: rendererRef, children }),
|
|
174
|
+
children
|
|
175
|
+
] });
|
|
176
|
+
}
|
|
177
|
+
function useDragDropManager() {
|
|
178
|
+
return useContext(DragDropContext);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
// src/core/hooks/useInstance.ts
|
|
182
|
+
function useInstance(initializer) {
|
|
183
|
+
var _a2;
|
|
184
|
+
const manager = (_a2 = useDragDropManager()) != null ? _a2 : void 0;
|
|
185
|
+
const [instance] = useState(() => initializer(manager));
|
|
186
|
+
if (instance.manager !== manager) {
|
|
187
|
+
instance.manager = manager;
|
|
188
|
+
}
|
|
189
|
+
useIsomorphicLayoutEffect(instance.register, [manager, instance]);
|
|
190
|
+
return instance;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
// src/core/draggable/useDraggable.ts
|
|
194
|
+
function useDraggable(input) {
|
|
195
|
+
const { disabled, data, element, handle, id, modifiers, sensors } = input;
|
|
196
|
+
const draggable = useInstance(
|
|
197
|
+
(manager) => new Draggable(
|
|
198
|
+
__spreadProps(__spreadValues({}, input), {
|
|
199
|
+
register: false,
|
|
200
|
+
handle: currentValue(handle),
|
|
201
|
+
element: currentValue(element)
|
|
202
|
+
}),
|
|
203
|
+
manager
|
|
204
|
+
)
|
|
205
|
+
);
|
|
206
|
+
const trackedDraggable = useDeepSignal(draggable, shouldUpdateSynchronously);
|
|
207
|
+
useOnValueChange(id, () => draggable.id = id);
|
|
208
|
+
useOnElementChange(handle, (handle2) => draggable.handle = handle2);
|
|
209
|
+
useOnElementChange(element, (element2) => draggable.element = element2);
|
|
210
|
+
useOnValueChange(data, () => data && (draggable.data = data));
|
|
211
|
+
useOnValueChange(disabled, () => draggable.disabled = disabled === true);
|
|
212
|
+
useOnValueChange(sensors, () => draggable.sensors = sensors);
|
|
213
|
+
useOnValueChange(
|
|
214
|
+
modifiers,
|
|
215
|
+
() => draggable.modifiers = modifiers,
|
|
216
|
+
void 0,
|
|
217
|
+
deepEqual
|
|
218
|
+
);
|
|
219
|
+
useOnValueChange(
|
|
220
|
+
input.feedback,
|
|
221
|
+
() => {
|
|
222
|
+
var _a2;
|
|
223
|
+
return draggable.feedback = (_a2 = input.feedback) != null ? _a2 : "default";
|
|
224
|
+
}
|
|
225
|
+
);
|
|
226
|
+
useOnValueChange(
|
|
227
|
+
input.alignment,
|
|
228
|
+
() => draggable.alignment = input.alignment
|
|
229
|
+
);
|
|
230
|
+
return {
|
|
231
|
+
draggable: trackedDraggable,
|
|
232
|
+
get isDragging() {
|
|
233
|
+
return trackedDraggable.isDragging;
|
|
234
|
+
},
|
|
235
|
+
get isDropping() {
|
|
236
|
+
return trackedDraggable.isDropping;
|
|
237
|
+
},
|
|
238
|
+
get isDragSource() {
|
|
239
|
+
return trackedDraggable.isDragSource;
|
|
240
|
+
},
|
|
241
|
+
handleRef: useCallback(
|
|
242
|
+
(element2) => {
|
|
243
|
+
draggable.handle = element2 != null ? element2 : void 0;
|
|
244
|
+
},
|
|
245
|
+
[draggable]
|
|
246
|
+
),
|
|
247
|
+
ref: useCallback(
|
|
248
|
+
(element2) => {
|
|
249
|
+
var _a2, _b;
|
|
250
|
+
if (!element2 && ((_a2 = draggable.element) == null ? void 0 : _a2.isConnected) && !((_b = draggable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
|
|
251
|
+
return;
|
|
252
|
+
}
|
|
253
|
+
draggable.element = element2 != null ? element2 : void 0;
|
|
254
|
+
},
|
|
255
|
+
[draggable]
|
|
256
|
+
)
|
|
257
|
+
};
|
|
258
|
+
}
|
|
259
|
+
function shouldUpdateSynchronously(key, oldValue, newValue) {
|
|
260
|
+
if (key === "isDragSource" && !newValue && oldValue) return true;
|
|
261
|
+
return false;
|
|
262
|
+
}
|
|
263
|
+
function DragOverlay({
|
|
264
|
+
children,
|
|
265
|
+
className,
|
|
266
|
+
style,
|
|
267
|
+
tag,
|
|
268
|
+
disabled
|
|
269
|
+
}) {
|
|
270
|
+
var _a2;
|
|
271
|
+
const ref = useRef(null);
|
|
272
|
+
const manager = useDragDropManager();
|
|
273
|
+
const source = (_a2 = useComputed(() => manager == null ? void 0 : manager.dragOperation.source, [manager]).value) != null ? _a2 : null;
|
|
274
|
+
const isDisabled = typeof disabled === "function" ? disabled(source) : disabled;
|
|
275
|
+
useEffect(() => {
|
|
276
|
+
if (!ref.current || !manager || isDisabled) return;
|
|
277
|
+
const feedback = manager.plugins.find(
|
|
278
|
+
(plugin) => plugin instanceof Feedback
|
|
279
|
+
);
|
|
280
|
+
if (!feedback) return;
|
|
281
|
+
feedback.overlay = ref.current;
|
|
282
|
+
return () => {
|
|
283
|
+
feedback.overlay = void 0;
|
|
284
|
+
};
|
|
285
|
+
}, [manager, isDisabled]);
|
|
286
|
+
const patchedManager = useMemo(() => {
|
|
287
|
+
if (!manager) return null;
|
|
288
|
+
const patchedRegistry = new Proxy(manager.registry, {
|
|
289
|
+
get(target, property) {
|
|
290
|
+
if (property === "register" || property === "unregister") {
|
|
291
|
+
return noop;
|
|
292
|
+
}
|
|
293
|
+
return target[property];
|
|
294
|
+
}
|
|
295
|
+
});
|
|
296
|
+
return new Proxy(manager, {
|
|
297
|
+
get(target, property) {
|
|
298
|
+
if (property === "registry") {
|
|
299
|
+
return patchedRegistry;
|
|
300
|
+
}
|
|
301
|
+
return target[property];
|
|
302
|
+
}
|
|
303
|
+
});
|
|
304
|
+
}, [manager]);
|
|
305
|
+
return /* @__PURE__ */ jsx(DragDropContext.Provider, { value: patchedManager, children: createElement(
|
|
306
|
+
tag || "div",
|
|
307
|
+
{ ref, className, style, "data-dnd-overlay": true },
|
|
308
|
+
renderChildren()
|
|
309
|
+
) });
|
|
310
|
+
function renderChildren() {
|
|
311
|
+
if (!source || isDisabled) return null;
|
|
312
|
+
if (typeof children === "function") {
|
|
313
|
+
return /* @__PURE__ */ jsx(Children, { source, children });
|
|
314
|
+
}
|
|
315
|
+
return children;
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
function noop() {
|
|
319
|
+
return () => {
|
|
320
|
+
};
|
|
321
|
+
}
|
|
322
|
+
function Children({
|
|
323
|
+
children,
|
|
324
|
+
source
|
|
325
|
+
}) {
|
|
326
|
+
return children(useDeepSignal(source));
|
|
327
|
+
}
|
|
328
|
+
var __create = Object.create;
|
|
329
|
+
var __defProp2 = Object.defineProperty;
|
|
330
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
331
|
+
var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
|
|
332
|
+
var __typeError = (msg) => {
|
|
333
|
+
throw TypeError(msg);
|
|
334
|
+
};
|
|
335
|
+
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
336
|
+
var __decoratorStart = (base) => {
|
|
337
|
+
var _a2;
|
|
338
|
+
return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
|
|
339
|
+
};
|
|
340
|
+
var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
|
|
341
|
+
var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
|
|
342
|
+
var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
|
|
343
|
+
var __decoratorMetadata = (array, target) => __defNormalProp2(target, __knownSymbol("metadata"), array[3]);
|
|
344
|
+
var __runInitializers = (array, flags, self, value) => {
|
|
345
|
+
for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self) ;
|
|
346
|
+
return value;
|
|
347
|
+
};
|
|
348
|
+
var __decorateElement = (array, flags, name, decorators, target, extra) => {
|
|
349
|
+
var it, done, ctx, access, k = flags & 7, s = false, p = false;
|
|
350
|
+
var j = 2 , key = __decoratorStrings[k + 5];
|
|
351
|
+
var extraInitializers = array[j] || (array[j] = []);
|
|
352
|
+
var desc = ((target = target.prototype), __getOwnPropDesc(target , name));
|
|
353
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
354
|
+
ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
|
|
355
|
+
{
|
|
356
|
+
ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
|
|
357
|
+
access.get = (x) => x[name];
|
|
358
|
+
}
|
|
359
|
+
it = (0, decorators[i])(desc[key] , ctx), done._ = 1;
|
|
360
|
+
__expectFn(it) && (desc[key] = it );
|
|
361
|
+
}
|
|
362
|
+
return desc && __defProp2(target, name, desc), target;
|
|
363
|
+
};
|
|
364
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
365
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
|
|
366
|
+
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
367
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
368
|
+
var Point = class _Point {
|
|
369
|
+
/**
|
|
370
|
+
* @param {number} Coordinate of the point on the horizontal axis
|
|
371
|
+
* @param {number} Coordinate of the point on the vertical axis
|
|
372
|
+
*/
|
|
373
|
+
constructor(x, y) {
|
|
374
|
+
this.x = x;
|
|
375
|
+
this.y = y;
|
|
376
|
+
}
|
|
377
|
+
/**
|
|
378
|
+
* Returns the delta between this point and another point.
|
|
379
|
+
*
|
|
380
|
+
* @param {Point} a - A point
|
|
381
|
+
* @param {Point} b - Another point
|
|
382
|
+
*/
|
|
383
|
+
static delta(a, b) {
|
|
384
|
+
return new _Point(a.x - b.x, a.y - b.y);
|
|
385
|
+
}
|
|
386
|
+
/**
|
|
387
|
+
* Returns the distance (hypotenuse) between this point and another point.
|
|
388
|
+
*
|
|
389
|
+
* @param {Point} a - A point
|
|
390
|
+
* @param {Point} b - Another point
|
|
391
|
+
*/
|
|
392
|
+
static distance(a, b) {
|
|
393
|
+
return Math.hypot(a.x - b.x, a.y - b.y);
|
|
394
|
+
}
|
|
395
|
+
/**
|
|
396
|
+
* Returns true if both points are equal.
|
|
397
|
+
*
|
|
398
|
+
* @param {Point} a - A point
|
|
399
|
+
* @param {Point} b - Another point
|
|
400
|
+
*/
|
|
401
|
+
static equals(a, b) {
|
|
402
|
+
return a.x === b.x && a.y === b.y;
|
|
403
|
+
}
|
|
404
|
+
static from({ x, y }) {
|
|
405
|
+
return new _Point(x, y);
|
|
406
|
+
}
|
|
407
|
+
};
|
|
408
|
+
var _direction_dec;
|
|
409
|
+
var _delta_dec;
|
|
410
|
+
var _a;
|
|
411
|
+
var _timestamp;
|
|
412
|
+
var _init;
|
|
413
|
+
var Position = class extends (_a = ValueHistory, _delta_dec = [derived], _direction_dec = [derived], _a) {
|
|
414
|
+
constructor(initialValue) {
|
|
415
|
+
const point = Point.from(initialValue);
|
|
416
|
+
super(point, (a, b) => Point.equals(a, b));
|
|
417
|
+
__runInitializers(_init, 5, this);
|
|
418
|
+
__privateAdd(this, _timestamp, 0);
|
|
419
|
+
this.velocity = { x: 0, y: 0 };
|
|
420
|
+
}
|
|
421
|
+
get delta() {
|
|
422
|
+
return Point.delta(this.current, this.initial);
|
|
423
|
+
}
|
|
424
|
+
get direction() {
|
|
425
|
+
const { current, previous } = this;
|
|
426
|
+
if (!previous) return null;
|
|
427
|
+
const delta = {
|
|
428
|
+
x: current.x - previous.x,
|
|
429
|
+
y: current.y - previous.y
|
|
430
|
+
};
|
|
431
|
+
if (!delta.x && !delta.y) {
|
|
432
|
+
return null;
|
|
433
|
+
}
|
|
434
|
+
if (Math.abs(delta.x) > Math.abs(delta.y)) {
|
|
435
|
+
return delta.x > 0 ? "right" : "left";
|
|
436
|
+
}
|
|
437
|
+
return delta.y > 0 ? "down" : "up";
|
|
438
|
+
}
|
|
439
|
+
get current() {
|
|
440
|
+
return super.current;
|
|
441
|
+
}
|
|
442
|
+
set current(coordinates) {
|
|
443
|
+
const { current } = this;
|
|
444
|
+
const point = Point.from(coordinates);
|
|
445
|
+
const delta = {
|
|
446
|
+
x: point.x - current.x,
|
|
447
|
+
y: point.y - current.y
|
|
448
|
+
};
|
|
449
|
+
const timestamp = Date.now();
|
|
450
|
+
const timeDelta = timestamp - __privateGet(this, _timestamp);
|
|
451
|
+
const velocity = (delta2) => Math.round(delta2 / timeDelta * 100);
|
|
452
|
+
batch(() => {
|
|
453
|
+
__privateSet(this, _timestamp, timestamp);
|
|
454
|
+
this.velocity = {
|
|
455
|
+
x: velocity(delta.x),
|
|
456
|
+
y: velocity(delta.y)
|
|
457
|
+
};
|
|
458
|
+
super.current = point;
|
|
459
|
+
});
|
|
460
|
+
}
|
|
461
|
+
reset(coordinates = this.defaultValue) {
|
|
462
|
+
super.reset(Point.from(coordinates));
|
|
463
|
+
this.velocity = { x: 0, y: 0 };
|
|
464
|
+
}
|
|
465
|
+
};
|
|
466
|
+
_init = __decoratorStart(_a);
|
|
467
|
+
_timestamp = /* @__PURE__ */ new WeakMap();
|
|
468
|
+
__decorateElement(_init, 2, "delta", _delta_dec, Position);
|
|
469
|
+
__decorateElement(_init, 2, "direction", _direction_dec, Position);
|
|
470
|
+
__decoratorMetadata(_init, Position);
|
|
471
|
+
var Axis = /* @__PURE__ */ ((Axis2) => {
|
|
472
|
+
Axis2["Horizontal"] = "x";
|
|
473
|
+
Axis2["Vertical"] = "y";
|
|
474
|
+
return Axis2;
|
|
475
|
+
})(Axis || {});
|
|
476
|
+
Object.values(Axis);
|
|
477
|
+
var pointerIntersection = ({
|
|
478
|
+
dragOperation,
|
|
479
|
+
droppable
|
|
480
|
+
}) => {
|
|
481
|
+
const pointerCoordinates = dragOperation.position.current;
|
|
482
|
+
if (!pointerCoordinates) {
|
|
483
|
+
return null;
|
|
484
|
+
}
|
|
485
|
+
const { id } = droppable;
|
|
486
|
+
if (!droppable.shape) {
|
|
487
|
+
return null;
|
|
488
|
+
}
|
|
489
|
+
if (droppable.shape.containsPoint(pointerCoordinates)) {
|
|
490
|
+
const distance = Point.distance(droppable.shape.center, pointerCoordinates);
|
|
491
|
+
return {
|
|
492
|
+
id,
|
|
493
|
+
value: 1 / distance,
|
|
494
|
+
type: CollisionType.PointerIntersection,
|
|
495
|
+
priority: CollisionPriority.High
|
|
496
|
+
};
|
|
497
|
+
}
|
|
498
|
+
return null;
|
|
499
|
+
};
|
|
500
|
+
var shapeIntersection = ({
|
|
501
|
+
dragOperation,
|
|
502
|
+
droppable
|
|
503
|
+
}) => {
|
|
504
|
+
const { shape } = dragOperation;
|
|
505
|
+
if (!droppable.shape || !(shape == null ? void 0 : shape.current)) {
|
|
506
|
+
return null;
|
|
507
|
+
}
|
|
508
|
+
const intersectionArea = shape.current.intersectionArea(droppable.shape);
|
|
509
|
+
if (intersectionArea) {
|
|
510
|
+
const { position } = dragOperation;
|
|
511
|
+
const distance = Point.distance(droppable.shape.center, position.current);
|
|
512
|
+
const intersectionRatio = intersectionArea / (shape.current.area + droppable.shape.area - intersectionArea);
|
|
513
|
+
const value = intersectionRatio / distance;
|
|
514
|
+
return {
|
|
515
|
+
id: droppable.id,
|
|
516
|
+
value,
|
|
517
|
+
type: CollisionType.ShapeIntersection,
|
|
518
|
+
priority: CollisionPriority.Normal
|
|
519
|
+
};
|
|
520
|
+
}
|
|
521
|
+
return null;
|
|
522
|
+
};
|
|
523
|
+
var defaultCollisionDetection = (args) => {
|
|
524
|
+
var _a2;
|
|
525
|
+
return (_a2 = pointerIntersection(args)) != null ? _a2 : shapeIntersection(args);
|
|
526
|
+
};
|
|
527
|
+
|
|
528
|
+
// src/core/droppable/useDroppable.ts
|
|
529
|
+
function useDroppable(input) {
|
|
530
|
+
const { collisionDetector, data, disabled, element, id, accept, type } = input;
|
|
531
|
+
const droppable = useInstance(
|
|
532
|
+
(manager) => new Droppable(
|
|
533
|
+
__spreadProps(__spreadValues({}, input), {
|
|
534
|
+
register: false,
|
|
535
|
+
element: currentValue(element)
|
|
536
|
+
}),
|
|
537
|
+
manager
|
|
538
|
+
)
|
|
539
|
+
);
|
|
540
|
+
const trackedDroppalbe = useDeepSignal(droppable);
|
|
541
|
+
useOnValueChange(id, () => droppable.id = id);
|
|
542
|
+
useOnElementChange(element, (element2) => droppable.element = element2);
|
|
543
|
+
useOnValueChange(
|
|
544
|
+
accept,
|
|
545
|
+
() => droppable.accept = accept,
|
|
546
|
+
void 0,
|
|
547
|
+
deepEqual
|
|
548
|
+
);
|
|
549
|
+
useOnValueChange(
|
|
550
|
+
collisionDetector,
|
|
551
|
+
() => droppable.collisionDetector = collisionDetector != null ? collisionDetector : defaultCollisionDetection
|
|
552
|
+
);
|
|
553
|
+
useOnValueChange(data, () => data && (droppable.data = data));
|
|
554
|
+
useOnValueChange(disabled, () => droppable.disabled = disabled === true);
|
|
555
|
+
useOnValueChange(type, () => droppable.type = type);
|
|
556
|
+
return {
|
|
557
|
+
droppable: trackedDroppalbe,
|
|
558
|
+
get isDropTarget() {
|
|
559
|
+
return trackedDroppalbe.isDropTarget;
|
|
560
|
+
},
|
|
561
|
+
ref: useCallback(
|
|
562
|
+
(element2) => {
|
|
563
|
+
var _a2, _b;
|
|
564
|
+
if (!element2 && ((_a2 = droppable.element) == null ? void 0 : _a2.isConnected) && !((_b = droppable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {
|
|
565
|
+
return;
|
|
566
|
+
}
|
|
567
|
+
droppable.element = element2 != null ? element2 : void 0;
|
|
568
|
+
},
|
|
569
|
+
[droppable]
|
|
570
|
+
)
|
|
571
|
+
};
|
|
572
|
+
}
|
|
573
|
+
function useDragDropMonitor(handlers) {
|
|
574
|
+
const manager = useDragDropManager();
|
|
575
|
+
useEffect(() => {
|
|
576
|
+
if (!manager) {
|
|
577
|
+
if (process.env.NODE_ENV !== "production") {
|
|
578
|
+
console.warn(
|
|
579
|
+
"useDndMonitor hook was called outside of a DragDropProvider. Make sure your app is wrapped in a DragDropProvider component."
|
|
580
|
+
);
|
|
581
|
+
}
|
|
582
|
+
return;
|
|
583
|
+
}
|
|
584
|
+
const cleanupFns = Object.entries(handlers).reduce(
|
|
585
|
+
(acc, [handlerName, handler]) => {
|
|
586
|
+
if (handler) {
|
|
587
|
+
const eventName = handlerName.replace(/^on/, "").toLowerCase();
|
|
588
|
+
const unsubscribe = manager.monitor.addEventListener(
|
|
589
|
+
eventName,
|
|
590
|
+
handler
|
|
591
|
+
);
|
|
592
|
+
acc.push(unsubscribe);
|
|
593
|
+
}
|
|
594
|
+
return acc;
|
|
595
|
+
},
|
|
596
|
+
[]
|
|
597
|
+
);
|
|
598
|
+
return () => cleanupFns.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
|
|
599
|
+
}, [manager, handlers]);
|
|
600
|
+
}
|
|
601
|
+
function useDragOperation() {
|
|
602
|
+
const manager = useDragDropManager();
|
|
603
|
+
const source = useComputed(() => manager == null ? void 0 : manager.dragOperation.source, [manager]);
|
|
604
|
+
const target = useComputed(() => manager == null ? void 0 : manager.dragOperation.target, [manager]);
|
|
605
|
+
return {
|
|
606
|
+
get source() {
|
|
607
|
+
return source.value;
|
|
608
|
+
},
|
|
609
|
+
get target() {
|
|
610
|
+
return target.value;
|
|
611
|
+
}
|
|
612
|
+
};
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
export { DragDropProvider, DragOverlay, useDragDropManager, useDragDropMonitor, useDragOperation, useDraggable, useDroppable, useInstance };
|
|
616
|
+
//# sourceMappingURL=index.js.map
|
|
617
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@dnd-kit/react",
|
|
3
|
+
"version": "0.1.21",
|
|
4
|
+
"main": "./index.cjs",
|
|
5
|
+
"module": "./index.js",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"types": "./index.d.ts",
|
|
8
|
+
"sideEffects": false,
|
|
9
|
+
"license": "MIT",
|
|
10
|
+
"files": [
|
|
11
|
+
"LICENSE",
|
|
12
|
+
"README.md",
|
|
13
|
+
"index.js",
|
|
14
|
+
"index.d.ts",
|
|
15
|
+
"index.cjs",
|
|
16
|
+
"hooks.js",
|
|
17
|
+
"hooks.d.ts",
|
|
18
|
+
"hooks.cjs",
|
|
19
|
+
"sortable.js",
|
|
20
|
+
"sortable.d.ts",
|
|
21
|
+
"sortable.cjs",
|
|
22
|
+
"utilities.js",
|
|
23
|
+
"utilities.d.ts",
|
|
24
|
+
"utilities.cjs"
|
|
25
|
+
],
|
|
26
|
+
"exports": {
|
|
27
|
+
".": {
|
|
28
|
+
"types": "./index.d.ts",
|
|
29
|
+
"import": "./index.js",
|
|
30
|
+
"require": "./index.cjs"
|
|
31
|
+
},
|
|
32
|
+
"./hooks": {
|
|
33
|
+
"types": "./hooks.d.ts",
|
|
34
|
+
"import": "./hooks.js",
|
|
35
|
+
"require": "./hooks.cjs"
|
|
36
|
+
},
|
|
37
|
+
"./sortable": {
|
|
38
|
+
"types": "./sortable.d.ts",
|
|
39
|
+
"import": "./sortable.js",
|
|
40
|
+
"require": "./sortable.cjs"
|
|
41
|
+
},
|
|
42
|
+
"./utilities": {
|
|
43
|
+
"types": "./utilities.d.ts",
|
|
44
|
+
"import": "./utilities.js",
|
|
45
|
+
"require": "./utilities.cjs"
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
"scripts": {
|
|
49
|
+
"build": "bun build:utilities && bun build:hooks && bun build:core && bun build:sortable",
|
|
50
|
+
"build:core": "tsup src/core/index.ts",
|
|
51
|
+
"build:hooks": "tsup --entry.hooks src/hooks/index.ts",
|
|
52
|
+
"build:sortable": "tsup --entry.sortable src/sortable/index.ts",
|
|
53
|
+
"build:utilities": "tsup --entry.utilities src/utilities/index.ts",
|
|
54
|
+
"dev": "bun build:utilities --watch & bun build:hooks --watch & bun build:core --watch & bun build:sortable --watch",
|
|
55
|
+
"lint": "TIMING=1 eslint src/**/*.ts* --fix",
|
|
56
|
+
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
|
|
57
|
+
},
|
|
58
|
+
"dependencies": {
|
|
59
|
+
"@dnd-kit/abstract": "^0.1.21",
|
|
60
|
+
"@dnd-kit/dom": "^0.1.21",
|
|
61
|
+
"@dnd-kit/state": "^0.1.21",
|
|
62
|
+
"tslib": "^2.6.2"
|
|
63
|
+
},
|
|
64
|
+
"peerDependencies": {
|
|
65
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
66
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
67
|
+
},
|
|
68
|
+
"devDependencies": {
|
|
69
|
+
"@types/react": "^19.0.8",
|
|
70
|
+
"@types/react-dom": "^19.0.3",
|
|
71
|
+
"eslint": "^8.38.0",
|
|
72
|
+
"@dnd-kit/eslint-config": "*",
|
|
73
|
+
"react": "^19.0.0",
|
|
74
|
+
"tsup": "8.3.0",
|
|
75
|
+
"typescript": "^5.5.2"
|
|
76
|
+
},
|
|
77
|
+
"publishConfig": {
|
|
78
|
+
"access": "public"
|
|
79
|
+
}
|
|
80
|
+
}
|