multi-content-type-relation 2.1.2 → 2.2.1
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/README.md +6 -0
- package/dist/_chunks/{index-DdX2rVzB.mjs → index-BGSdnZnr.mjs} +37 -12
- package/dist/_chunks/index-Bu99PZdl.js +470 -0
- package/dist/_chunks/{index-BtldAbIW.js → index-CEXSrD4g.js} +40 -15
- package/dist/_chunks/index-DEkcD0zR.mjs +470 -0
- package/dist/admin/index.js +1 -1
- package/dist/admin/index.mjs +1 -1
- package/dist/admin/src/components/Input/InputContentSuggestions.d.ts +1 -2
- package/dist/admin/src/components/Input/TableItem.d.ts +2 -3
- package/dist/admin/src/helpers/content.d.ts +1 -1
- package/dist/server/index.js +130 -61
- package/dist/server/index.mjs +130 -61
- package/dist/server/src/controllers/controller.d.ts +1 -0
- package/dist/server/src/controllers/index.d.ts +1 -0
- package/dist/server/src/index.d.ts +1 -0
- package/dist/server/src/interface.d.ts +2 -0
- package/package.json +2 -1
- package/dist/_chunks/index-CyBD50Lc.js +0 -3567
- package/dist/_chunks/index-DGcImy9s.mjs +0 -3565
|
@@ -1,3567 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const React = require("react");
|
|
5
|
-
const reactIntl = require("react-intl");
|
|
6
|
-
const reactRouterDom = require("react-router-dom");
|
|
7
|
-
const designSystem = require("@strapi/design-system");
|
|
8
|
-
const index = require("./index-BtldAbIW.js");
|
|
9
|
-
const reactDom = require("react-dom");
|
|
10
|
-
const sortable = require("@dnd-kit/sortable");
|
|
11
|
-
const icons = require("@strapi/icons");
|
|
12
|
-
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
13
|
-
const React__default = /* @__PURE__ */ _interopDefault(React);
|
|
14
|
-
function useSearchedEntries(keyword, contentTypes, locale) {
|
|
15
|
-
const [loading, setLoading] = React.useState(false);
|
|
16
|
-
const [results, setResults] = React.useState([]);
|
|
17
|
-
const [total, setTotal] = React.useState(0);
|
|
18
|
-
async function fetchEntries() {
|
|
19
|
-
setResults([]);
|
|
20
|
-
setTotal(0);
|
|
21
|
-
if (loading || !keyword) return;
|
|
22
|
-
try {
|
|
23
|
-
const { data, total: total2 } = await index.fetchMatchingContent(
|
|
24
|
-
keyword,
|
|
25
|
-
contentTypes,
|
|
26
|
-
locale
|
|
27
|
-
);
|
|
28
|
-
setResults(data);
|
|
29
|
-
setTotal(total2);
|
|
30
|
-
} finally {
|
|
31
|
-
setLoading(false);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
React.useEffect(() => {
|
|
35
|
-
const timeout = setTimeout(() => fetchEntries(), 500);
|
|
36
|
-
return () => clearTimeout(timeout);
|
|
37
|
-
}, [keyword]);
|
|
38
|
-
return React.useMemo(
|
|
39
|
-
() => ({
|
|
40
|
-
loading,
|
|
41
|
-
results,
|
|
42
|
-
total
|
|
43
|
-
}),
|
|
44
|
-
[results, total]
|
|
45
|
-
);
|
|
46
|
-
}
|
|
47
|
-
const canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
|
|
48
|
-
function isWindow(element) {
|
|
49
|
-
const elementString = Object.prototype.toString.call(element);
|
|
50
|
-
return elementString === "[object Window]" || // In Electron context the Window object serializes to [object global]
|
|
51
|
-
elementString === "[object global]";
|
|
52
|
-
}
|
|
53
|
-
function isNode(node) {
|
|
54
|
-
return "nodeType" in node;
|
|
55
|
-
}
|
|
56
|
-
function getWindow(target) {
|
|
57
|
-
var _target$ownerDocument, _target$ownerDocument2;
|
|
58
|
-
if (!target) {
|
|
59
|
-
return window;
|
|
60
|
-
}
|
|
61
|
-
if (isWindow(target)) {
|
|
62
|
-
return target;
|
|
63
|
-
}
|
|
64
|
-
if (!isNode(target)) {
|
|
65
|
-
return window;
|
|
66
|
-
}
|
|
67
|
-
return (_target$ownerDocument = (_target$ownerDocument2 = target.ownerDocument) == null ? void 0 : _target$ownerDocument2.defaultView) != null ? _target$ownerDocument : window;
|
|
68
|
-
}
|
|
69
|
-
function isDocument(node) {
|
|
70
|
-
const {
|
|
71
|
-
Document
|
|
72
|
-
} = getWindow(node);
|
|
73
|
-
return node instanceof Document;
|
|
74
|
-
}
|
|
75
|
-
function isHTMLElement(node) {
|
|
76
|
-
if (isWindow(node)) {
|
|
77
|
-
return false;
|
|
78
|
-
}
|
|
79
|
-
return node instanceof getWindow(node).HTMLElement;
|
|
80
|
-
}
|
|
81
|
-
function isSVGElement(node) {
|
|
82
|
-
return node instanceof getWindow(node).SVGElement;
|
|
83
|
-
}
|
|
84
|
-
function getOwnerDocument(target) {
|
|
85
|
-
if (!target) {
|
|
86
|
-
return document;
|
|
87
|
-
}
|
|
88
|
-
if (isWindow(target)) {
|
|
89
|
-
return target.document;
|
|
90
|
-
}
|
|
91
|
-
if (!isNode(target)) {
|
|
92
|
-
return document;
|
|
93
|
-
}
|
|
94
|
-
if (isDocument(target)) {
|
|
95
|
-
return target;
|
|
96
|
-
}
|
|
97
|
-
if (isHTMLElement(target) || isSVGElement(target)) {
|
|
98
|
-
return target.ownerDocument;
|
|
99
|
-
}
|
|
100
|
-
return document;
|
|
101
|
-
}
|
|
102
|
-
const useIsomorphicLayoutEffect = canUseDOM ? React.useLayoutEffect : React.useEffect;
|
|
103
|
-
function useEvent(handler) {
|
|
104
|
-
const handlerRef = React.useRef(handler);
|
|
105
|
-
useIsomorphicLayoutEffect(() => {
|
|
106
|
-
handlerRef.current = handler;
|
|
107
|
-
});
|
|
108
|
-
return React.useCallback(function() {
|
|
109
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
110
|
-
args[_key] = arguments[_key];
|
|
111
|
-
}
|
|
112
|
-
return handlerRef.current == null ? void 0 : handlerRef.current(...args);
|
|
113
|
-
}, []);
|
|
114
|
-
}
|
|
115
|
-
function useInterval() {
|
|
116
|
-
const intervalRef = React.useRef(null);
|
|
117
|
-
const set = React.useCallback((listener, duration) => {
|
|
118
|
-
intervalRef.current = setInterval(listener, duration);
|
|
119
|
-
}, []);
|
|
120
|
-
const clear = React.useCallback(() => {
|
|
121
|
-
if (intervalRef.current !== null) {
|
|
122
|
-
clearInterval(intervalRef.current);
|
|
123
|
-
intervalRef.current = null;
|
|
124
|
-
}
|
|
125
|
-
}, []);
|
|
126
|
-
return [set, clear];
|
|
127
|
-
}
|
|
128
|
-
function useLatestValue(value, dependencies) {
|
|
129
|
-
if (dependencies === void 0) {
|
|
130
|
-
dependencies = [value];
|
|
131
|
-
}
|
|
132
|
-
const valueRef = React.useRef(value);
|
|
133
|
-
useIsomorphicLayoutEffect(() => {
|
|
134
|
-
if (valueRef.current !== value) {
|
|
135
|
-
valueRef.current = value;
|
|
136
|
-
}
|
|
137
|
-
}, dependencies);
|
|
138
|
-
return valueRef;
|
|
139
|
-
}
|
|
140
|
-
function useLazyMemo(callback, dependencies) {
|
|
141
|
-
const valueRef = React.useRef();
|
|
142
|
-
return React.useMemo(
|
|
143
|
-
() => {
|
|
144
|
-
const newValue = callback(valueRef.current);
|
|
145
|
-
valueRef.current = newValue;
|
|
146
|
-
return newValue;
|
|
147
|
-
},
|
|
148
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
149
|
-
[...dependencies]
|
|
150
|
-
);
|
|
151
|
-
}
|
|
152
|
-
function useNodeRef(onChange) {
|
|
153
|
-
const onChangeHandler = useEvent(onChange);
|
|
154
|
-
const node = React.useRef(null);
|
|
155
|
-
const setNodeRef = React.useCallback(
|
|
156
|
-
(element) => {
|
|
157
|
-
if (element !== node.current) {
|
|
158
|
-
onChangeHandler == null ? void 0 : onChangeHandler(element, node.current);
|
|
159
|
-
}
|
|
160
|
-
node.current = element;
|
|
161
|
-
},
|
|
162
|
-
//eslint-disable-next-line
|
|
163
|
-
[]
|
|
164
|
-
);
|
|
165
|
-
return [node, setNodeRef];
|
|
166
|
-
}
|
|
167
|
-
function usePrevious(value) {
|
|
168
|
-
const ref = React.useRef();
|
|
169
|
-
React.useEffect(() => {
|
|
170
|
-
ref.current = value;
|
|
171
|
-
}, [value]);
|
|
172
|
-
return ref.current;
|
|
173
|
-
}
|
|
174
|
-
let ids = {};
|
|
175
|
-
function useUniqueId(prefix, value) {
|
|
176
|
-
return React.useMemo(() => {
|
|
177
|
-
if (value) {
|
|
178
|
-
return value;
|
|
179
|
-
}
|
|
180
|
-
const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
|
|
181
|
-
ids[prefix] = id;
|
|
182
|
-
return prefix + "-" + id;
|
|
183
|
-
}, [prefix, value]);
|
|
184
|
-
}
|
|
185
|
-
function createAdjustmentFn(modifier) {
|
|
186
|
-
return function(object) {
|
|
187
|
-
for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
188
|
-
adjustments[_key - 1] = arguments[_key];
|
|
189
|
-
}
|
|
190
|
-
return adjustments.reduce((accumulator, adjustment) => {
|
|
191
|
-
const entries = Object.entries(adjustment);
|
|
192
|
-
for (const [key, valueAdjustment] of entries) {
|
|
193
|
-
const value = accumulator[key];
|
|
194
|
-
if (value != null) {
|
|
195
|
-
accumulator[key] = value + modifier * valueAdjustment;
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
return accumulator;
|
|
199
|
-
}, {
|
|
200
|
-
...object
|
|
201
|
-
});
|
|
202
|
-
};
|
|
203
|
-
}
|
|
204
|
-
const add = /* @__PURE__ */ createAdjustmentFn(1);
|
|
205
|
-
const subtract = /* @__PURE__ */ createAdjustmentFn(-1);
|
|
206
|
-
function hasViewportRelativeCoordinates(event) {
|
|
207
|
-
return "clientX" in event && "clientY" in event;
|
|
208
|
-
}
|
|
209
|
-
function isKeyboardEvent(event) {
|
|
210
|
-
if (!event) {
|
|
211
|
-
return false;
|
|
212
|
-
}
|
|
213
|
-
const {
|
|
214
|
-
KeyboardEvent
|
|
215
|
-
} = getWindow(event.target);
|
|
216
|
-
return KeyboardEvent && event instanceof KeyboardEvent;
|
|
217
|
-
}
|
|
218
|
-
function isTouchEvent(event) {
|
|
219
|
-
if (!event) {
|
|
220
|
-
return false;
|
|
221
|
-
}
|
|
222
|
-
const {
|
|
223
|
-
TouchEvent
|
|
224
|
-
} = getWindow(event.target);
|
|
225
|
-
return TouchEvent && event instanceof TouchEvent;
|
|
226
|
-
}
|
|
227
|
-
function getEventCoordinates(event) {
|
|
228
|
-
if (isTouchEvent(event)) {
|
|
229
|
-
if (event.touches && event.touches.length) {
|
|
230
|
-
const {
|
|
231
|
-
clientX: x,
|
|
232
|
-
clientY: y
|
|
233
|
-
} = event.touches[0];
|
|
234
|
-
return {
|
|
235
|
-
x,
|
|
236
|
-
y
|
|
237
|
-
};
|
|
238
|
-
} else if (event.changedTouches && event.changedTouches.length) {
|
|
239
|
-
const {
|
|
240
|
-
clientX: x,
|
|
241
|
-
clientY: y
|
|
242
|
-
} = event.changedTouches[0];
|
|
243
|
-
return {
|
|
244
|
-
x,
|
|
245
|
-
y
|
|
246
|
-
};
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
if (hasViewportRelativeCoordinates(event)) {
|
|
250
|
-
return {
|
|
251
|
-
x: event.clientX,
|
|
252
|
-
y: event.clientY
|
|
253
|
-
};
|
|
254
|
-
}
|
|
255
|
-
return null;
|
|
256
|
-
}
|
|
257
|
-
const CSS = /* @__PURE__ */ Object.freeze({
|
|
258
|
-
Translate: {
|
|
259
|
-
toString(transform) {
|
|
260
|
-
if (!transform) {
|
|
261
|
-
return;
|
|
262
|
-
}
|
|
263
|
-
const {
|
|
264
|
-
x,
|
|
265
|
-
y
|
|
266
|
-
} = transform;
|
|
267
|
-
return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
|
|
268
|
-
}
|
|
269
|
-
},
|
|
270
|
-
Scale: {
|
|
271
|
-
toString(transform) {
|
|
272
|
-
if (!transform) {
|
|
273
|
-
return;
|
|
274
|
-
}
|
|
275
|
-
const {
|
|
276
|
-
scaleX,
|
|
277
|
-
scaleY
|
|
278
|
-
} = transform;
|
|
279
|
-
return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
|
|
280
|
-
}
|
|
281
|
-
},
|
|
282
|
-
Transform: {
|
|
283
|
-
toString(transform) {
|
|
284
|
-
if (!transform) {
|
|
285
|
-
return;
|
|
286
|
-
}
|
|
287
|
-
return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
|
|
288
|
-
}
|
|
289
|
-
},
|
|
290
|
-
Transition: {
|
|
291
|
-
toString(_ref) {
|
|
292
|
-
let {
|
|
293
|
-
property,
|
|
294
|
-
duration,
|
|
295
|
-
easing
|
|
296
|
-
} = _ref;
|
|
297
|
-
return property + " " + duration + "ms " + easing;
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
});
|
|
301
|
-
const SELECTOR = "a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]";
|
|
302
|
-
function findFirstFocusableNode(element) {
|
|
303
|
-
if (element.matches(SELECTOR)) {
|
|
304
|
-
return element;
|
|
305
|
-
}
|
|
306
|
-
return element.querySelector(SELECTOR);
|
|
307
|
-
}
|
|
308
|
-
const hiddenStyles = {
|
|
309
|
-
display: "none"
|
|
310
|
-
};
|
|
311
|
-
function HiddenText(_ref) {
|
|
312
|
-
let {
|
|
313
|
-
id,
|
|
314
|
-
value
|
|
315
|
-
} = _ref;
|
|
316
|
-
return React__default.default.createElement("div", {
|
|
317
|
-
id,
|
|
318
|
-
style: hiddenStyles
|
|
319
|
-
}, value);
|
|
320
|
-
}
|
|
321
|
-
function LiveRegion(_ref) {
|
|
322
|
-
let {
|
|
323
|
-
id,
|
|
324
|
-
announcement,
|
|
325
|
-
ariaLiveType = "assertive"
|
|
326
|
-
} = _ref;
|
|
327
|
-
const visuallyHidden = {
|
|
328
|
-
position: "fixed",
|
|
329
|
-
top: 0,
|
|
330
|
-
left: 0,
|
|
331
|
-
width: 1,
|
|
332
|
-
height: 1,
|
|
333
|
-
margin: -1,
|
|
334
|
-
border: 0,
|
|
335
|
-
padding: 0,
|
|
336
|
-
overflow: "hidden",
|
|
337
|
-
clip: "rect(0 0 0 0)",
|
|
338
|
-
clipPath: "inset(100%)",
|
|
339
|
-
whiteSpace: "nowrap"
|
|
340
|
-
};
|
|
341
|
-
return React__default.default.createElement("div", {
|
|
342
|
-
id,
|
|
343
|
-
style: visuallyHidden,
|
|
344
|
-
role: "status",
|
|
345
|
-
"aria-live": ariaLiveType,
|
|
346
|
-
"aria-atomic": true
|
|
347
|
-
}, announcement);
|
|
348
|
-
}
|
|
349
|
-
function useAnnouncement() {
|
|
350
|
-
const [announcement, setAnnouncement] = React.useState("");
|
|
351
|
-
const announce = React.useCallback((value) => {
|
|
352
|
-
if (value != null) {
|
|
353
|
-
setAnnouncement(value);
|
|
354
|
-
}
|
|
355
|
-
}, []);
|
|
356
|
-
return {
|
|
357
|
-
announce,
|
|
358
|
-
announcement
|
|
359
|
-
};
|
|
360
|
-
}
|
|
361
|
-
const DndMonitorContext = /* @__PURE__ */ React.createContext(null);
|
|
362
|
-
function useDndMonitor(listener) {
|
|
363
|
-
const registerListener = React.useContext(DndMonitorContext);
|
|
364
|
-
React.useEffect(() => {
|
|
365
|
-
if (!registerListener) {
|
|
366
|
-
throw new Error("useDndMonitor must be used within a children of <DndContext>");
|
|
367
|
-
}
|
|
368
|
-
const unsubscribe = registerListener(listener);
|
|
369
|
-
return unsubscribe;
|
|
370
|
-
}, [listener, registerListener]);
|
|
371
|
-
}
|
|
372
|
-
function useDndMonitorProvider() {
|
|
373
|
-
const [listeners] = React.useState(() => /* @__PURE__ */ new Set());
|
|
374
|
-
const registerListener = React.useCallback((listener) => {
|
|
375
|
-
listeners.add(listener);
|
|
376
|
-
return () => listeners.delete(listener);
|
|
377
|
-
}, [listeners]);
|
|
378
|
-
const dispatch = React.useCallback((_ref) => {
|
|
379
|
-
let {
|
|
380
|
-
type,
|
|
381
|
-
event
|
|
382
|
-
} = _ref;
|
|
383
|
-
listeners.forEach((listener) => {
|
|
384
|
-
var _listener$type;
|
|
385
|
-
return (_listener$type = listener[type]) == null ? void 0 : _listener$type.call(listener, event);
|
|
386
|
-
});
|
|
387
|
-
}, [listeners]);
|
|
388
|
-
return [dispatch, registerListener];
|
|
389
|
-
}
|
|
390
|
-
const defaultScreenReaderInstructions = {
|
|
391
|
-
draggable: "\n To pick up a draggable item, press the space bar.\n While dragging, use the arrow keys to move the item.\n Press space again to drop the item in its new position, or press escape to cancel.\n "
|
|
392
|
-
};
|
|
393
|
-
const defaultAnnouncements = {
|
|
394
|
-
onDragStart(_ref) {
|
|
395
|
-
let {
|
|
396
|
-
active
|
|
397
|
-
} = _ref;
|
|
398
|
-
return "Picked up draggable item " + active.id + ".";
|
|
399
|
-
},
|
|
400
|
-
onDragOver(_ref2) {
|
|
401
|
-
let {
|
|
402
|
-
active,
|
|
403
|
-
over
|
|
404
|
-
} = _ref2;
|
|
405
|
-
if (over) {
|
|
406
|
-
return "Draggable item " + active.id + " was moved over droppable area " + over.id + ".";
|
|
407
|
-
}
|
|
408
|
-
return "Draggable item " + active.id + " is no longer over a droppable area.";
|
|
409
|
-
},
|
|
410
|
-
onDragEnd(_ref3) {
|
|
411
|
-
let {
|
|
412
|
-
active,
|
|
413
|
-
over
|
|
414
|
-
} = _ref3;
|
|
415
|
-
if (over) {
|
|
416
|
-
return "Draggable item " + active.id + " was dropped over droppable area " + over.id;
|
|
417
|
-
}
|
|
418
|
-
return "Draggable item " + active.id + " was dropped.";
|
|
419
|
-
},
|
|
420
|
-
onDragCancel(_ref4) {
|
|
421
|
-
let {
|
|
422
|
-
active
|
|
423
|
-
} = _ref4;
|
|
424
|
-
return "Dragging was cancelled. Draggable item " + active.id + " was dropped.";
|
|
425
|
-
}
|
|
426
|
-
};
|
|
427
|
-
function Accessibility(_ref) {
|
|
428
|
-
let {
|
|
429
|
-
announcements = defaultAnnouncements,
|
|
430
|
-
container,
|
|
431
|
-
hiddenTextDescribedById,
|
|
432
|
-
screenReaderInstructions = defaultScreenReaderInstructions
|
|
433
|
-
} = _ref;
|
|
434
|
-
const {
|
|
435
|
-
announce,
|
|
436
|
-
announcement
|
|
437
|
-
} = useAnnouncement();
|
|
438
|
-
const liveRegionId = useUniqueId("DndLiveRegion");
|
|
439
|
-
const [mounted, setMounted] = React.useState(false);
|
|
440
|
-
React.useEffect(() => {
|
|
441
|
-
setMounted(true);
|
|
442
|
-
}, []);
|
|
443
|
-
useDndMonitor(React.useMemo(() => ({
|
|
444
|
-
onDragStart(_ref2) {
|
|
445
|
-
let {
|
|
446
|
-
active
|
|
447
|
-
} = _ref2;
|
|
448
|
-
announce(announcements.onDragStart({
|
|
449
|
-
active
|
|
450
|
-
}));
|
|
451
|
-
},
|
|
452
|
-
onDragMove(_ref3) {
|
|
453
|
-
let {
|
|
454
|
-
active,
|
|
455
|
-
over
|
|
456
|
-
} = _ref3;
|
|
457
|
-
if (announcements.onDragMove) {
|
|
458
|
-
announce(announcements.onDragMove({
|
|
459
|
-
active,
|
|
460
|
-
over
|
|
461
|
-
}));
|
|
462
|
-
}
|
|
463
|
-
},
|
|
464
|
-
onDragOver(_ref4) {
|
|
465
|
-
let {
|
|
466
|
-
active,
|
|
467
|
-
over
|
|
468
|
-
} = _ref4;
|
|
469
|
-
announce(announcements.onDragOver({
|
|
470
|
-
active,
|
|
471
|
-
over
|
|
472
|
-
}));
|
|
473
|
-
},
|
|
474
|
-
onDragEnd(_ref5) {
|
|
475
|
-
let {
|
|
476
|
-
active,
|
|
477
|
-
over
|
|
478
|
-
} = _ref5;
|
|
479
|
-
announce(announcements.onDragEnd({
|
|
480
|
-
active,
|
|
481
|
-
over
|
|
482
|
-
}));
|
|
483
|
-
},
|
|
484
|
-
onDragCancel(_ref6) {
|
|
485
|
-
let {
|
|
486
|
-
active,
|
|
487
|
-
over
|
|
488
|
-
} = _ref6;
|
|
489
|
-
announce(announcements.onDragCancel({
|
|
490
|
-
active,
|
|
491
|
-
over
|
|
492
|
-
}));
|
|
493
|
-
}
|
|
494
|
-
}), [announce, announcements]));
|
|
495
|
-
if (!mounted) {
|
|
496
|
-
return null;
|
|
497
|
-
}
|
|
498
|
-
const markup = React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(HiddenText, {
|
|
499
|
-
id: hiddenTextDescribedById,
|
|
500
|
-
value: screenReaderInstructions.draggable
|
|
501
|
-
}), React__default.default.createElement(LiveRegion, {
|
|
502
|
-
id: liveRegionId,
|
|
503
|
-
announcement
|
|
504
|
-
}));
|
|
505
|
-
return container ? reactDom.createPortal(markup, container) : markup;
|
|
506
|
-
}
|
|
507
|
-
var Action;
|
|
508
|
-
(function(Action2) {
|
|
509
|
-
Action2["DragStart"] = "dragStart";
|
|
510
|
-
Action2["DragMove"] = "dragMove";
|
|
511
|
-
Action2["DragEnd"] = "dragEnd";
|
|
512
|
-
Action2["DragCancel"] = "dragCancel";
|
|
513
|
-
Action2["DragOver"] = "dragOver";
|
|
514
|
-
Action2["RegisterDroppable"] = "registerDroppable";
|
|
515
|
-
Action2["SetDroppableDisabled"] = "setDroppableDisabled";
|
|
516
|
-
Action2["UnregisterDroppable"] = "unregisterDroppable";
|
|
517
|
-
})(Action || (Action = {}));
|
|
518
|
-
function noop() {
|
|
519
|
-
}
|
|
520
|
-
function useSensor(sensor, options) {
|
|
521
|
-
return React.useMemo(
|
|
522
|
-
() => ({
|
|
523
|
-
sensor,
|
|
524
|
-
options: options != null ? options : {}
|
|
525
|
-
}),
|
|
526
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
527
|
-
[sensor, options]
|
|
528
|
-
);
|
|
529
|
-
}
|
|
530
|
-
function useSensors() {
|
|
531
|
-
for (var _len = arguments.length, sensors = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
532
|
-
sensors[_key] = arguments[_key];
|
|
533
|
-
}
|
|
534
|
-
return React.useMemo(
|
|
535
|
-
() => [...sensors].filter((sensor) => sensor != null),
|
|
536
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
537
|
-
[...sensors]
|
|
538
|
-
);
|
|
539
|
-
}
|
|
540
|
-
const defaultCoordinates = /* @__PURE__ */ Object.freeze({
|
|
541
|
-
x: 0,
|
|
542
|
-
y: 0
|
|
543
|
-
});
|
|
544
|
-
function distanceBetween(p1, p2) {
|
|
545
|
-
return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
|
|
546
|
-
}
|
|
547
|
-
function sortCollisionsAsc(_ref, _ref2) {
|
|
548
|
-
let {
|
|
549
|
-
data: {
|
|
550
|
-
value: a
|
|
551
|
-
}
|
|
552
|
-
} = _ref;
|
|
553
|
-
let {
|
|
554
|
-
data: {
|
|
555
|
-
value: b
|
|
556
|
-
}
|
|
557
|
-
} = _ref2;
|
|
558
|
-
return a - b;
|
|
559
|
-
}
|
|
560
|
-
function sortCollisionsDesc(_ref3, _ref4) {
|
|
561
|
-
let {
|
|
562
|
-
data: {
|
|
563
|
-
value: a
|
|
564
|
-
}
|
|
565
|
-
} = _ref3;
|
|
566
|
-
let {
|
|
567
|
-
data: {
|
|
568
|
-
value: b
|
|
569
|
-
}
|
|
570
|
-
} = _ref4;
|
|
571
|
-
return b - a;
|
|
572
|
-
}
|
|
573
|
-
function getFirstCollision(collisions, property) {
|
|
574
|
-
if (!collisions || collisions.length === 0) {
|
|
575
|
-
return null;
|
|
576
|
-
}
|
|
577
|
-
const [firstCollision] = collisions;
|
|
578
|
-
return firstCollision[property];
|
|
579
|
-
}
|
|
580
|
-
function centerOfRectangle(rect, left, top) {
|
|
581
|
-
if (left === void 0) {
|
|
582
|
-
left = rect.left;
|
|
583
|
-
}
|
|
584
|
-
if (top === void 0) {
|
|
585
|
-
top = rect.top;
|
|
586
|
-
}
|
|
587
|
-
return {
|
|
588
|
-
x: left + rect.width * 0.5,
|
|
589
|
-
y: top + rect.height * 0.5
|
|
590
|
-
};
|
|
591
|
-
}
|
|
592
|
-
const closestCenter = (_ref) => {
|
|
593
|
-
let {
|
|
594
|
-
collisionRect,
|
|
595
|
-
droppableRects,
|
|
596
|
-
droppableContainers
|
|
597
|
-
} = _ref;
|
|
598
|
-
const centerRect = centerOfRectangle(collisionRect, collisionRect.left, collisionRect.top);
|
|
599
|
-
const collisions = [];
|
|
600
|
-
for (const droppableContainer of droppableContainers) {
|
|
601
|
-
const {
|
|
602
|
-
id
|
|
603
|
-
} = droppableContainer;
|
|
604
|
-
const rect = droppableRects.get(id);
|
|
605
|
-
if (rect) {
|
|
606
|
-
const distBetween = distanceBetween(centerOfRectangle(rect), centerRect);
|
|
607
|
-
collisions.push({
|
|
608
|
-
id,
|
|
609
|
-
data: {
|
|
610
|
-
droppableContainer,
|
|
611
|
-
value: distBetween
|
|
612
|
-
}
|
|
613
|
-
});
|
|
614
|
-
}
|
|
615
|
-
}
|
|
616
|
-
return collisions.sort(sortCollisionsAsc);
|
|
617
|
-
};
|
|
618
|
-
function getIntersectionRatio(entry, target) {
|
|
619
|
-
const top = Math.max(target.top, entry.top);
|
|
620
|
-
const left = Math.max(target.left, entry.left);
|
|
621
|
-
const right = Math.min(target.left + target.width, entry.left + entry.width);
|
|
622
|
-
const bottom = Math.min(target.top + target.height, entry.top + entry.height);
|
|
623
|
-
const width = right - left;
|
|
624
|
-
const height = bottom - top;
|
|
625
|
-
if (left < right && top < bottom) {
|
|
626
|
-
const targetArea = target.width * target.height;
|
|
627
|
-
const entryArea = entry.width * entry.height;
|
|
628
|
-
const intersectionArea = width * height;
|
|
629
|
-
const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
|
|
630
|
-
return Number(intersectionRatio.toFixed(4));
|
|
631
|
-
}
|
|
632
|
-
return 0;
|
|
633
|
-
}
|
|
634
|
-
const rectIntersection = (_ref) => {
|
|
635
|
-
let {
|
|
636
|
-
collisionRect,
|
|
637
|
-
droppableRects,
|
|
638
|
-
droppableContainers
|
|
639
|
-
} = _ref;
|
|
640
|
-
const collisions = [];
|
|
641
|
-
for (const droppableContainer of droppableContainers) {
|
|
642
|
-
const {
|
|
643
|
-
id
|
|
644
|
-
} = droppableContainer;
|
|
645
|
-
const rect = droppableRects.get(id);
|
|
646
|
-
if (rect) {
|
|
647
|
-
const intersectionRatio = getIntersectionRatio(rect, collisionRect);
|
|
648
|
-
if (intersectionRatio > 0) {
|
|
649
|
-
collisions.push({
|
|
650
|
-
id,
|
|
651
|
-
data: {
|
|
652
|
-
droppableContainer,
|
|
653
|
-
value: intersectionRatio
|
|
654
|
-
}
|
|
655
|
-
});
|
|
656
|
-
}
|
|
657
|
-
}
|
|
658
|
-
}
|
|
659
|
-
return collisions.sort(sortCollisionsDesc);
|
|
660
|
-
};
|
|
661
|
-
function adjustScale(transform, rect1, rect2) {
|
|
662
|
-
return {
|
|
663
|
-
...transform,
|
|
664
|
-
scaleX: rect1 && rect2 ? rect1.width / rect2.width : 1,
|
|
665
|
-
scaleY: rect1 && rect2 ? rect1.height / rect2.height : 1
|
|
666
|
-
};
|
|
667
|
-
}
|
|
668
|
-
function getRectDelta(rect1, rect2) {
|
|
669
|
-
return rect1 && rect2 ? {
|
|
670
|
-
x: rect1.left - rect2.left,
|
|
671
|
-
y: rect1.top - rect2.top
|
|
672
|
-
} : defaultCoordinates;
|
|
673
|
-
}
|
|
674
|
-
function createRectAdjustmentFn(modifier) {
|
|
675
|
-
return function adjustClientRect(rect) {
|
|
676
|
-
for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
677
|
-
adjustments[_key - 1] = arguments[_key];
|
|
678
|
-
}
|
|
679
|
-
return adjustments.reduce((acc, adjustment) => ({
|
|
680
|
-
...acc,
|
|
681
|
-
top: acc.top + modifier * adjustment.y,
|
|
682
|
-
bottom: acc.bottom + modifier * adjustment.y,
|
|
683
|
-
left: acc.left + modifier * adjustment.x,
|
|
684
|
-
right: acc.right + modifier * adjustment.x
|
|
685
|
-
}), {
|
|
686
|
-
...rect
|
|
687
|
-
});
|
|
688
|
-
};
|
|
689
|
-
}
|
|
690
|
-
const getAdjustedRect = /* @__PURE__ */ createRectAdjustmentFn(1);
|
|
691
|
-
function parseTransform(transform) {
|
|
692
|
-
if (transform.startsWith("matrix3d(")) {
|
|
693
|
-
const transformArray = transform.slice(9, -1).split(/, /);
|
|
694
|
-
return {
|
|
695
|
-
x: +transformArray[12],
|
|
696
|
-
y: +transformArray[13],
|
|
697
|
-
scaleX: +transformArray[0],
|
|
698
|
-
scaleY: +transformArray[5]
|
|
699
|
-
};
|
|
700
|
-
} else if (transform.startsWith("matrix(")) {
|
|
701
|
-
const transformArray = transform.slice(7, -1).split(/, /);
|
|
702
|
-
return {
|
|
703
|
-
x: +transformArray[4],
|
|
704
|
-
y: +transformArray[5],
|
|
705
|
-
scaleX: +transformArray[0],
|
|
706
|
-
scaleY: +transformArray[3]
|
|
707
|
-
};
|
|
708
|
-
}
|
|
709
|
-
return null;
|
|
710
|
-
}
|
|
711
|
-
function inverseTransform(rect, transform, transformOrigin) {
|
|
712
|
-
const parsedTransform = parseTransform(transform);
|
|
713
|
-
if (!parsedTransform) {
|
|
714
|
-
return rect;
|
|
715
|
-
}
|
|
716
|
-
const {
|
|
717
|
-
scaleX,
|
|
718
|
-
scaleY,
|
|
719
|
-
x: translateX,
|
|
720
|
-
y: translateY
|
|
721
|
-
} = parsedTransform;
|
|
722
|
-
const x = rect.left - translateX - (1 - scaleX) * parseFloat(transformOrigin);
|
|
723
|
-
const y = rect.top - translateY - (1 - scaleY) * parseFloat(transformOrigin.slice(transformOrigin.indexOf(" ") + 1));
|
|
724
|
-
const w = scaleX ? rect.width / scaleX : rect.width;
|
|
725
|
-
const h = scaleY ? rect.height / scaleY : rect.height;
|
|
726
|
-
return {
|
|
727
|
-
width: w,
|
|
728
|
-
height: h,
|
|
729
|
-
top: y,
|
|
730
|
-
right: x + w,
|
|
731
|
-
bottom: y + h,
|
|
732
|
-
left: x
|
|
733
|
-
};
|
|
734
|
-
}
|
|
735
|
-
const defaultOptions = {
|
|
736
|
-
ignoreTransform: false
|
|
737
|
-
};
|
|
738
|
-
function getClientRect(element, options) {
|
|
739
|
-
if (options === void 0) {
|
|
740
|
-
options = defaultOptions;
|
|
741
|
-
}
|
|
742
|
-
let rect = element.getBoundingClientRect();
|
|
743
|
-
if (options.ignoreTransform) {
|
|
744
|
-
const {
|
|
745
|
-
transform,
|
|
746
|
-
transformOrigin
|
|
747
|
-
} = getWindow(element).getComputedStyle(element);
|
|
748
|
-
if (transform) {
|
|
749
|
-
rect = inverseTransform(rect, transform, transformOrigin);
|
|
750
|
-
}
|
|
751
|
-
}
|
|
752
|
-
const {
|
|
753
|
-
top,
|
|
754
|
-
left,
|
|
755
|
-
width,
|
|
756
|
-
height,
|
|
757
|
-
bottom,
|
|
758
|
-
right
|
|
759
|
-
} = rect;
|
|
760
|
-
return {
|
|
761
|
-
top,
|
|
762
|
-
left,
|
|
763
|
-
width,
|
|
764
|
-
height,
|
|
765
|
-
bottom,
|
|
766
|
-
right
|
|
767
|
-
};
|
|
768
|
-
}
|
|
769
|
-
function getTransformAgnosticClientRect(element) {
|
|
770
|
-
return getClientRect(element, {
|
|
771
|
-
ignoreTransform: true
|
|
772
|
-
});
|
|
773
|
-
}
|
|
774
|
-
function getWindowClientRect(element) {
|
|
775
|
-
const width = element.innerWidth;
|
|
776
|
-
const height = element.innerHeight;
|
|
777
|
-
return {
|
|
778
|
-
top: 0,
|
|
779
|
-
left: 0,
|
|
780
|
-
right: width,
|
|
781
|
-
bottom: height,
|
|
782
|
-
width,
|
|
783
|
-
height
|
|
784
|
-
};
|
|
785
|
-
}
|
|
786
|
-
function isFixed(node, computedStyle) {
|
|
787
|
-
if (computedStyle === void 0) {
|
|
788
|
-
computedStyle = getWindow(node).getComputedStyle(node);
|
|
789
|
-
}
|
|
790
|
-
return computedStyle.position === "fixed";
|
|
791
|
-
}
|
|
792
|
-
function isScrollable(element, computedStyle) {
|
|
793
|
-
if (computedStyle === void 0) {
|
|
794
|
-
computedStyle = getWindow(element).getComputedStyle(element);
|
|
795
|
-
}
|
|
796
|
-
const overflowRegex = /(auto|scroll|overlay)/;
|
|
797
|
-
const properties2 = ["overflow", "overflowX", "overflowY"];
|
|
798
|
-
return properties2.some((property) => {
|
|
799
|
-
const value = computedStyle[property];
|
|
800
|
-
return typeof value === "string" ? overflowRegex.test(value) : false;
|
|
801
|
-
});
|
|
802
|
-
}
|
|
803
|
-
function getScrollableAncestors(element, limit) {
|
|
804
|
-
const scrollParents = [];
|
|
805
|
-
function findScrollableAncestors(node) {
|
|
806
|
-
if (limit != null && scrollParents.length >= limit) {
|
|
807
|
-
return scrollParents;
|
|
808
|
-
}
|
|
809
|
-
if (!node) {
|
|
810
|
-
return scrollParents;
|
|
811
|
-
}
|
|
812
|
-
if (isDocument(node) && node.scrollingElement != null && !scrollParents.includes(node.scrollingElement)) {
|
|
813
|
-
scrollParents.push(node.scrollingElement);
|
|
814
|
-
return scrollParents;
|
|
815
|
-
}
|
|
816
|
-
if (!isHTMLElement(node) || isSVGElement(node)) {
|
|
817
|
-
return scrollParents;
|
|
818
|
-
}
|
|
819
|
-
if (scrollParents.includes(node)) {
|
|
820
|
-
return scrollParents;
|
|
821
|
-
}
|
|
822
|
-
const computedStyle = getWindow(element).getComputedStyle(node);
|
|
823
|
-
if (node !== element) {
|
|
824
|
-
if (isScrollable(node, computedStyle)) {
|
|
825
|
-
scrollParents.push(node);
|
|
826
|
-
}
|
|
827
|
-
}
|
|
828
|
-
if (isFixed(node, computedStyle)) {
|
|
829
|
-
return scrollParents;
|
|
830
|
-
}
|
|
831
|
-
return findScrollableAncestors(node.parentNode);
|
|
832
|
-
}
|
|
833
|
-
if (!element) {
|
|
834
|
-
return scrollParents;
|
|
835
|
-
}
|
|
836
|
-
return findScrollableAncestors(element);
|
|
837
|
-
}
|
|
838
|
-
function getFirstScrollableAncestor(node) {
|
|
839
|
-
const [firstScrollableAncestor] = getScrollableAncestors(node, 1);
|
|
840
|
-
return firstScrollableAncestor != null ? firstScrollableAncestor : null;
|
|
841
|
-
}
|
|
842
|
-
function getScrollableElement(element) {
|
|
843
|
-
if (!canUseDOM || !element) {
|
|
844
|
-
return null;
|
|
845
|
-
}
|
|
846
|
-
if (isWindow(element)) {
|
|
847
|
-
return element;
|
|
848
|
-
}
|
|
849
|
-
if (!isNode(element)) {
|
|
850
|
-
return null;
|
|
851
|
-
}
|
|
852
|
-
if (isDocument(element) || element === getOwnerDocument(element).scrollingElement) {
|
|
853
|
-
return window;
|
|
854
|
-
}
|
|
855
|
-
if (isHTMLElement(element)) {
|
|
856
|
-
return element;
|
|
857
|
-
}
|
|
858
|
-
return null;
|
|
859
|
-
}
|
|
860
|
-
function getScrollXCoordinate(element) {
|
|
861
|
-
if (isWindow(element)) {
|
|
862
|
-
return element.scrollX;
|
|
863
|
-
}
|
|
864
|
-
return element.scrollLeft;
|
|
865
|
-
}
|
|
866
|
-
function getScrollYCoordinate(element) {
|
|
867
|
-
if (isWindow(element)) {
|
|
868
|
-
return element.scrollY;
|
|
869
|
-
}
|
|
870
|
-
return element.scrollTop;
|
|
871
|
-
}
|
|
872
|
-
function getScrollCoordinates(element) {
|
|
873
|
-
return {
|
|
874
|
-
x: getScrollXCoordinate(element),
|
|
875
|
-
y: getScrollYCoordinate(element)
|
|
876
|
-
};
|
|
877
|
-
}
|
|
878
|
-
var Direction;
|
|
879
|
-
(function(Direction2) {
|
|
880
|
-
Direction2[Direction2["Forward"] = 1] = "Forward";
|
|
881
|
-
Direction2[Direction2["Backward"] = -1] = "Backward";
|
|
882
|
-
})(Direction || (Direction = {}));
|
|
883
|
-
function isDocumentScrollingElement(element) {
|
|
884
|
-
if (!canUseDOM || !element) {
|
|
885
|
-
return false;
|
|
886
|
-
}
|
|
887
|
-
return element === document.scrollingElement;
|
|
888
|
-
}
|
|
889
|
-
function getScrollPosition(scrollingContainer) {
|
|
890
|
-
const minScroll = {
|
|
891
|
-
x: 0,
|
|
892
|
-
y: 0
|
|
893
|
-
};
|
|
894
|
-
const dimensions = isDocumentScrollingElement(scrollingContainer) ? {
|
|
895
|
-
height: window.innerHeight,
|
|
896
|
-
width: window.innerWidth
|
|
897
|
-
} : {
|
|
898
|
-
height: scrollingContainer.clientHeight,
|
|
899
|
-
width: scrollingContainer.clientWidth
|
|
900
|
-
};
|
|
901
|
-
const maxScroll = {
|
|
902
|
-
x: scrollingContainer.scrollWidth - dimensions.width,
|
|
903
|
-
y: scrollingContainer.scrollHeight - dimensions.height
|
|
904
|
-
};
|
|
905
|
-
const isTop = scrollingContainer.scrollTop <= minScroll.y;
|
|
906
|
-
const isLeft = scrollingContainer.scrollLeft <= minScroll.x;
|
|
907
|
-
const isBottom = scrollingContainer.scrollTop >= maxScroll.y;
|
|
908
|
-
const isRight = scrollingContainer.scrollLeft >= maxScroll.x;
|
|
909
|
-
return {
|
|
910
|
-
isTop,
|
|
911
|
-
isLeft,
|
|
912
|
-
isBottom,
|
|
913
|
-
isRight,
|
|
914
|
-
maxScroll,
|
|
915
|
-
minScroll
|
|
916
|
-
};
|
|
917
|
-
}
|
|
918
|
-
const defaultThreshold = {
|
|
919
|
-
x: 0.2,
|
|
920
|
-
y: 0.2
|
|
921
|
-
};
|
|
922
|
-
function getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, _ref, acceleration, thresholdPercentage) {
|
|
923
|
-
let {
|
|
924
|
-
top,
|
|
925
|
-
left,
|
|
926
|
-
right,
|
|
927
|
-
bottom
|
|
928
|
-
} = _ref;
|
|
929
|
-
if (acceleration === void 0) {
|
|
930
|
-
acceleration = 10;
|
|
931
|
-
}
|
|
932
|
-
if (thresholdPercentage === void 0) {
|
|
933
|
-
thresholdPercentage = defaultThreshold;
|
|
934
|
-
}
|
|
935
|
-
const {
|
|
936
|
-
isTop,
|
|
937
|
-
isBottom,
|
|
938
|
-
isLeft,
|
|
939
|
-
isRight
|
|
940
|
-
} = getScrollPosition(scrollContainer);
|
|
941
|
-
const direction = {
|
|
942
|
-
x: 0,
|
|
943
|
-
y: 0
|
|
944
|
-
};
|
|
945
|
-
const speed = {
|
|
946
|
-
x: 0,
|
|
947
|
-
y: 0
|
|
948
|
-
};
|
|
949
|
-
const threshold = {
|
|
950
|
-
height: scrollContainerRect.height * thresholdPercentage.y,
|
|
951
|
-
width: scrollContainerRect.width * thresholdPercentage.x
|
|
952
|
-
};
|
|
953
|
-
if (!isTop && top <= scrollContainerRect.top + threshold.height) {
|
|
954
|
-
direction.y = Direction.Backward;
|
|
955
|
-
speed.y = acceleration * Math.abs((scrollContainerRect.top + threshold.height - top) / threshold.height);
|
|
956
|
-
} else if (!isBottom && bottom >= scrollContainerRect.bottom - threshold.height) {
|
|
957
|
-
direction.y = Direction.Forward;
|
|
958
|
-
speed.y = acceleration * Math.abs((scrollContainerRect.bottom - threshold.height - bottom) / threshold.height);
|
|
959
|
-
}
|
|
960
|
-
if (!isRight && right >= scrollContainerRect.right - threshold.width) {
|
|
961
|
-
direction.x = Direction.Forward;
|
|
962
|
-
speed.x = acceleration * Math.abs((scrollContainerRect.right - threshold.width - right) / threshold.width);
|
|
963
|
-
} else if (!isLeft && left <= scrollContainerRect.left + threshold.width) {
|
|
964
|
-
direction.x = Direction.Backward;
|
|
965
|
-
speed.x = acceleration * Math.abs((scrollContainerRect.left + threshold.width - left) / threshold.width);
|
|
966
|
-
}
|
|
967
|
-
return {
|
|
968
|
-
direction,
|
|
969
|
-
speed
|
|
970
|
-
};
|
|
971
|
-
}
|
|
972
|
-
function getScrollElementRect(element) {
|
|
973
|
-
if (element === document.scrollingElement) {
|
|
974
|
-
const {
|
|
975
|
-
innerWidth,
|
|
976
|
-
innerHeight
|
|
977
|
-
} = window;
|
|
978
|
-
return {
|
|
979
|
-
top: 0,
|
|
980
|
-
left: 0,
|
|
981
|
-
right: innerWidth,
|
|
982
|
-
bottom: innerHeight,
|
|
983
|
-
width: innerWidth,
|
|
984
|
-
height: innerHeight
|
|
985
|
-
};
|
|
986
|
-
}
|
|
987
|
-
const {
|
|
988
|
-
top,
|
|
989
|
-
left,
|
|
990
|
-
right,
|
|
991
|
-
bottom
|
|
992
|
-
} = element.getBoundingClientRect();
|
|
993
|
-
return {
|
|
994
|
-
top,
|
|
995
|
-
left,
|
|
996
|
-
right,
|
|
997
|
-
bottom,
|
|
998
|
-
width: element.clientWidth,
|
|
999
|
-
height: element.clientHeight
|
|
1000
|
-
};
|
|
1001
|
-
}
|
|
1002
|
-
function getScrollOffsets(scrollableAncestors) {
|
|
1003
|
-
return scrollableAncestors.reduce((acc, node) => {
|
|
1004
|
-
return add(acc, getScrollCoordinates(node));
|
|
1005
|
-
}, defaultCoordinates);
|
|
1006
|
-
}
|
|
1007
|
-
function getScrollXOffset(scrollableAncestors) {
|
|
1008
|
-
return scrollableAncestors.reduce((acc, node) => {
|
|
1009
|
-
return acc + getScrollXCoordinate(node);
|
|
1010
|
-
}, 0);
|
|
1011
|
-
}
|
|
1012
|
-
function getScrollYOffset(scrollableAncestors) {
|
|
1013
|
-
return scrollableAncestors.reduce((acc, node) => {
|
|
1014
|
-
return acc + getScrollYCoordinate(node);
|
|
1015
|
-
}, 0);
|
|
1016
|
-
}
|
|
1017
|
-
function scrollIntoViewIfNeeded(element, measure) {
|
|
1018
|
-
if (measure === void 0) {
|
|
1019
|
-
measure = getClientRect;
|
|
1020
|
-
}
|
|
1021
|
-
if (!element) {
|
|
1022
|
-
return;
|
|
1023
|
-
}
|
|
1024
|
-
const {
|
|
1025
|
-
top,
|
|
1026
|
-
left,
|
|
1027
|
-
bottom,
|
|
1028
|
-
right
|
|
1029
|
-
} = measure(element);
|
|
1030
|
-
const firstScrollableAncestor = getFirstScrollableAncestor(element);
|
|
1031
|
-
if (!firstScrollableAncestor) {
|
|
1032
|
-
return;
|
|
1033
|
-
}
|
|
1034
|
-
if (bottom <= 0 || right <= 0 || top >= window.innerHeight || left >= window.innerWidth) {
|
|
1035
|
-
element.scrollIntoView({
|
|
1036
|
-
block: "center",
|
|
1037
|
-
inline: "center"
|
|
1038
|
-
});
|
|
1039
|
-
}
|
|
1040
|
-
}
|
|
1041
|
-
const properties = [["x", ["left", "right"], getScrollXOffset], ["y", ["top", "bottom"], getScrollYOffset]];
|
|
1042
|
-
class Rect {
|
|
1043
|
-
constructor(rect, element) {
|
|
1044
|
-
this.rect = void 0;
|
|
1045
|
-
this.width = void 0;
|
|
1046
|
-
this.height = void 0;
|
|
1047
|
-
this.top = void 0;
|
|
1048
|
-
this.bottom = void 0;
|
|
1049
|
-
this.right = void 0;
|
|
1050
|
-
this.left = void 0;
|
|
1051
|
-
const scrollableAncestors = getScrollableAncestors(element);
|
|
1052
|
-
const scrollOffsets = getScrollOffsets(scrollableAncestors);
|
|
1053
|
-
this.rect = {
|
|
1054
|
-
...rect
|
|
1055
|
-
};
|
|
1056
|
-
this.width = rect.width;
|
|
1057
|
-
this.height = rect.height;
|
|
1058
|
-
for (const [axis, keys, getScrollOffset] of properties) {
|
|
1059
|
-
for (const key of keys) {
|
|
1060
|
-
Object.defineProperty(this, key, {
|
|
1061
|
-
get: () => {
|
|
1062
|
-
const currentOffsets = getScrollOffset(scrollableAncestors);
|
|
1063
|
-
const scrollOffsetsDeltla = scrollOffsets[axis] - currentOffsets;
|
|
1064
|
-
return this.rect[key] + scrollOffsetsDeltla;
|
|
1065
|
-
},
|
|
1066
|
-
enumerable: true
|
|
1067
|
-
});
|
|
1068
|
-
}
|
|
1069
|
-
}
|
|
1070
|
-
Object.defineProperty(this, "rect", {
|
|
1071
|
-
enumerable: false
|
|
1072
|
-
});
|
|
1073
|
-
}
|
|
1074
|
-
}
|
|
1075
|
-
class Listeners {
|
|
1076
|
-
constructor(target) {
|
|
1077
|
-
this.target = void 0;
|
|
1078
|
-
this.listeners = [];
|
|
1079
|
-
this.removeAll = () => {
|
|
1080
|
-
this.listeners.forEach((listener) => {
|
|
1081
|
-
var _this$target;
|
|
1082
|
-
return (_this$target = this.target) == null ? void 0 : _this$target.removeEventListener(...listener);
|
|
1083
|
-
});
|
|
1084
|
-
};
|
|
1085
|
-
this.target = target;
|
|
1086
|
-
}
|
|
1087
|
-
add(eventName, handler, options) {
|
|
1088
|
-
var _this$target2;
|
|
1089
|
-
(_this$target2 = this.target) == null ? void 0 : _this$target2.addEventListener(eventName, handler, options);
|
|
1090
|
-
this.listeners.push([eventName, handler, options]);
|
|
1091
|
-
}
|
|
1092
|
-
}
|
|
1093
|
-
function getEventListenerTarget(target) {
|
|
1094
|
-
const {
|
|
1095
|
-
EventTarget
|
|
1096
|
-
} = getWindow(target);
|
|
1097
|
-
return target instanceof EventTarget ? target : getOwnerDocument(target);
|
|
1098
|
-
}
|
|
1099
|
-
function hasExceededDistance(delta, measurement) {
|
|
1100
|
-
const dx = Math.abs(delta.x);
|
|
1101
|
-
const dy = Math.abs(delta.y);
|
|
1102
|
-
if (typeof measurement === "number") {
|
|
1103
|
-
return Math.sqrt(dx ** 2 + dy ** 2) > measurement;
|
|
1104
|
-
}
|
|
1105
|
-
if ("x" in measurement && "y" in measurement) {
|
|
1106
|
-
return dx > measurement.x && dy > measurement.y;
|
|
1107
|
-
}
|
|
1108
|
-
if ("x" in measurement) {
|
|
1109
|
-
return dx > measurement.x;
|
|
1110
|
-
}
|
|
1111
|
-
if ("y" in measurement) {
|
|
1112
|
-
return dy > measurement.y;
|
|
1113
|
-
}
|
|
1114
|
-
return false;
|
|
1115
|
-
}
|
|
1116
|
-
var EventName;
|
|
1117
|
-
(function(EventName2) {
|
|
1118
|
-
EventName2["Click"] = "click";
|
|
1119
|
-
EventName2["DragStart"] = "dragstart";
|
|
1120
|
-
EventName2["Keydown"] = "keydown";
|
|
1121
|
-
EventName2["ContextMenu"] = "contextmenu";
|
|
1122
|
-
EventName2["Resize"] = "resize";
|
|
1123
|
-
EventName2["SelectionChange"] = "selectionchange";
|
|
1124
|
-
EventName2["VisibilityChange"] = "visibilitychange";
|
|
1125
|
-
})(EventName || (EventName = {}));
|
|
1126
|
-
function preventDefault(event) {
|
|
1127
|
-
event.preventDefault();
|
|
1128
|
-
}
|
|
1129
|
-
function stopPropagation(event) {
|
|
1130
|
-
event.stopPropagation();
|
|
1131
|
-
}
|
|
1132
|
-
var KeyboardCode;
|
|
1133
|
-
(function(KeyboardCode2) {
|
|
1134
|
-
KeyboardCode2["Space"] = "Space";
|
|
1135
|
-
KeyboardCode2["Down"] = "ArrowDown";
|
|
1136
|
-
KeyboardCode2["Right"] = "ArrowRight";
|
|
1137
|
-
KeyboardCode2["Left"] = "ArrowLeft";
|
|
1138
|
-
KeyboardCode2["Up"] = "ArrowUp";
|
|
1139
|
-
KeyboardCode2["Esc"] = "Escape";
|
|
1140
|
-
KeyboardCode2["Enter"] = "Enter";
|
|
1141
|
-
KeyboardCode2["Tab"] = "Tab";
|
|
1142
|
-
})(KeyboardCode || (KeyboardCode = {}));
|
|
1143
|
-
const defaultKeyboardCodes = {
|
|
1144
|
-
start: [KeyboardCode.Space, KeyboardCode.Enter],
|
|
1145
|
-
cancel: [KeyboardCode.Esc],
|
|
1146
|
-
end: [KeyboardCode.Space, KeyboardCode.Enter, KeyboardCode.Tab]
|
|
1147
|
-
};
|
|
1148
|
-
const defaultKeyboardCoordinateGetter = (event, _ref) => {
|
|
1149
|
-
let {
|
|
1150
|
-
currentCoordinates
|
|
1151
|
-
} = _ref;
|
|
1152
|
-
switch (event.code) {
|
|
1153
|
-
case KeyboardCode.Right:
|
|
1154
|
-
return {
|
|
1155
|
-
...currentCoordinates,
|
|
1156
|
-
x: currentCoordinates.x + 25
|
|
1157
|
-
};
|
|
1158
|
-
case KeyboardCode.Left:
|
|
1159
|
-
return {
|
|
1160
|
-
...currentCoordinates,
|
|
1161
|
-
x: currentCoordinates.x - 25
|
|
1162
|
-
};
|
|
1163
|
-
case KeyboardCode.Down:
|
|
1164
|
-
return {
|
|
1165
|
-
...currentCoordinates,
|
|
1166
|
-
y: currentCoordinates.y + 25
|
|
1167
|
-
};
|
|
1168
|
-
case KeyboardCode.Up:
|
|
1169
|
-
return {
|
|
1170
|
-
...currentCoordinates,
|
|
1171
|
-
y: currentCoordinates.y - 25
|
|
1172
|
-
};
|
|
1173
|
-
}
|
|
1174
|
-
return void 0;
|
|
1175
|
-
};
|
|
1176
|
-
class KeyboardSensor {
|
|
1177
|
-
constructor(props) {
|
|
1178
|
-
this.props = void 0;
|
|
1179
|
-
this.autoScrollEnabled = false;
|
|
1180
|
-
this.referenceCoordinates = void 0;
|
|
1181
|
-
this.listeners = void 0;
|
|
1182
|
-
this.windowListeners = void 0;
|
|
1183
|
-
this.props = props;
|
|
1184
|
-
const {
|
|
1185
|
-
event: {
|
|
1186
|
-
target
|
|
1187
|
-
}
|
|
1188
|
-
} = props;
|
|
1189
|
-
this.props = props;
|
|
1190
|
-
this.listeners = new Listeners(getOwnerDocument(target));
|
|
1191
|
-
this.windowListeners = new Listeners(getWindow(target));
|
|
1192
|
-
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
1193
|
-
this.handleCancel = this.handleCancel.bind(this);
|
|
1194
|
-
this.attach();
|
|
1195
|
-
}
|
|
1196
|
-
attach() {
|
|
1197
|
-
this.handleStart();
|
|
1198
|
-
this.windowListeners.add(EventName.Resize, this.handleCancel);
|
|
1199
|
-
this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
|
|
1200
|
-
setTimeout(() => this.listeners.add(EventName.Keydown, this.handleKeyDown));
|
|
1201
|
-
}
|
|
1202
|
-
handleStart() {
|
|
1203
|
-
const {
|
|
1204
|
-
activeNode,
|
|
1205
|
-
onStart
|
|
1206
|
-
} = this.props;
|
|
1207
|
-
const node = activeNode.node.current;
|
|
1208
|
-
if (node) {
|
|
1209
|
-
scrollIntoViewIfNeeded(node);
|
|
1210
|
-
}
|
|
1211
|
-
onStart(defaultCoordinates);
|
|
1212
|
-
}
|
|
1213
|
-
handleKeyDown(event) {
|
|
1214
|
-
if (isKeyboardEvent(event)) {
|
|
1215
|
-
const {
|
|
1216
|
-
active,
|
|
1217
|
-
context,
|
|
1218
|
-
options
|
|
1219
|
-
} = this.props;
|
|
1220
|
-
const {
|
|
1221
|
-
keyboardCodes = defaultKeyboardCodes,
|
|
1222
|
-
coordinateGetter = defaultKeyboardCoordinateGetter,
|
|
1223
|
-
scrollBehavior = "smooth"
|
|
1224
|
-
} = options;
|
|
1225
|
-
const {
|
|
1226
|
-
code
|
|
1227
|
-
} = event;
|
|
1228
|
-
if (keyboardCodes.end.includes(code)) {
|
|
1229
|
-
this.handleEnd(event);
|
|
1230
|
-
return;
|
|
1231
|
-
}
|
|
1232
|
-
if (keyboardCodes.cancel.includes(code)) {
|
|
1233
|
-
this.handleCancel(event);
|
|
1234
|
-
return;
|
|
1235
|
-
}
|
|
1236
|
-
const {
|
|
1237
|
-
collisionRect
|
|
1238
|
-
} = context.current;
|
|
1239
|
-
const currentCoordinates = collisionRect ? {
|
|
1240
|
-
x: collisionRect.left,
|
|
1241
|
-
y: collisionRect.top
|
|
1242
|
-
} : defaultCoordinates;
|
|
1243
|
-
if (!this.referenceCoordinates) {
|
|
1244
|
-
this.referenceCoordinates = currentCoordinates;
|
|
1245
|
-
}
|
|
1246
|
-
const newCoordinates = coordinateGetter(event, {
|
|
1247
|
-
active,
|
|
1248
|
-
context: context.current,
|
|
1249
|
-
currentCoordinates
|
|
1250
|
-
});
|
|
1251
|
-
if (newCoordinates) {
|
|
1252
|
-
const coordinatesDelta = subtract(newCoordinates, currentCoordinates);
|
|
1253
|
-
const scrollDelta = {
|
|
1254
|
-
x: 0,
|
|
1255
|
-
y: 0
|
|
1256
|
-
};
|
|
1257
|
-
const {
|
|
1258
|
-
scrollableAncestors
|
|
1259
|
-
} = context.current;
|
|
1260
|
-
for (const scrollContainer of scrollableAncestors) {
|
|
1261
|
-
const direction = event.code;
|
|
1262
|
-
const {
|
|
1263
|
-
isTop,
|
|
1264
|
-
isRight,
|
|
1265
|
-
isLeft,
|
|
1266
|
-
isBottom,
|
|
1267
|
-
maxScroll,
|
|
1268
|
-
minScroll
|
|
1269
|
-
} = getScrollPosition(scrollContainer);
|
|
1270
|
-
const scrollElementRect = getScrollElementRect(scrollContainer);
|
|
1271
|
-
const clampedCoordinates = {
|
|
1272
|
-
x: Math.min(direction === KeyboardCode.Right ? scrollElementRect.right - scrollElementRect.width / 2 : scrollElementRect.right, Math.max(direction === KeyboardCode.Right ? scrollElementRect.left : scrollElementRect.left + scrollElementRect.width / 2, newCoordinates.x)),
|
|
1273
|
-
y: Math.min(direction === KeyboardCode.Down ? scrollElementRect.bottom - scrollElementRect.height / 2 : scrollElementRect.bottom, Math.max(direction === KeyboardCode.Down ? scrollElementRect.top : scrollElementRect.top + scrollElementRect.height / 2, newCoordinates.y))
|
|
1274
|
-
};
|
|
1275
|
-
const canScrollX = direction === KeyboardCode.Right && !isRight || direction === KeyboardCode.Left && !isLeft;
|
|
1276
|
-
const canScrollY = direction === KeyboardCode.Down && !isBottom || direction === KeyboardCode.Up && !isTop;
|
|
1277
|
-
if (canScrollX && clampedCoordinates.x !== newCoordinates.x) {
|
|
1278
|
-
const newScrollCoordinates = scrollContainer.scrollLeft + coordinatesDelta.x;
|
|
1279
|
-
const canScrollToNewCoordinates = direction === KeyboardCode.Right && newScrollCoordinates <= maxScroll.x || direction === KeyboardCode.Left && newScrollCoordinates >= minScroll.x;
|
|
1280
|
-
if (canScrollToNewCoordinates && !coordinatesDelta.y) {
|
|
1281
|
-
scrollContainer.scrollTo({
|
|
1282
|
-
left: newScrollCoordinates,
|
|
1283
|
-
behavior: scrollBehavior
|
|
1284
|
-
});
|
|
1285
|
-
return;
|
|
1286
|
-
}
|
|
1287
|
-
if (canScrollToNewCoordinates) {
|
|
1288
|
-
scrollDelta.x = scrollContainer.scrollLeft - newScrollCoordinates;
|
|
1289
|
-
} else {
|
|
1290
|
-
scrollDelta.x = direction === KeyboardCode.Right ? scrollContainer.scrollLeft - maxScroll.x : scrollContainer.scrollLeft - minScroll.x;
|
|
1291
|
-
}
|
|
1292
|
-
if (scrollDelta.x) {
|
|
1293
|
-
scrollContainer.scrollBy({
|
|
1294
|
-
left: -scrollDelta.x,
|
|
1295
|
-
behavior: scrollBehavior
|
|
1296
|
-
});
|
|
1297
|
-
}
|
|
1298
|
-
break;
|
|
1299
|
-
} else if (canScrollY && clampedCoordinates.y !== newCoordinates.y) {
|
|
1300
|
-
const newScrollCoordinates = scrollContainer.scrollTop + coordinatesDelta.y;
|
|
1301
|
-
const canScrollToNewCoordinates = direction === KeyboardCode.Down && newScrollCoordinates <= maxScroll.y || direction === KeyboardCode.Up && newScrollCoordinates >= minScroll.y;
|
|
1302
|
-
if (canScrollToNewCoordinates && !coordinatesDelta.x) {
|
|
1303
|
-
scrollContainer.scrollTo({
|
|
1304
|
-
top: newScrollCoordinates,
|
|
1305
|
-
behavior: scrollBehavior
|
|
1306
|
-
});
|
|
1307
|
-
return;
|
|
1308
|
-
}
|
|
1309
|
-
if (canScrollToNewCoordinates) {
|
|
1310
|
-
scrollDelta.y = scrollContainer.scrollTop - newScrollCoordinates;
|
|
1311
|
-
} else {
|
|
1312
|
-
scrollDelta.y = direction === KeyboardCode.Down ? scrollContainer.scrollTop - maxScroll.y : scrollContainer.scrollTop - minScroll.y;
|
|
1313
|
-
}
|
|
1314
|
-
if (scrollDelta.y) {
|
|
1315
|
-
scrollContainer.scrollBy({
|
|
1316
|
-
top: -scrollDelta.y,
|
|
1317
|
-
behavior: scrollBehavior
|
|
1318
|
-
});
|
|
1319
|
-
}
|
|
1320
|
-
break;
|
|
1321
|
-
}
|
|
1322
|
-
}
|
|
1323
|
-
this.handleMove(event, add(subtract(newCoordinates, this.referenceCoordinates), scrollDelta));
|
|
1324
|
-
}
|
|
1325
|
-
}
|
|
1326
|
-
}
|
|
1327
|
-
handleMove(event, coordinates) {
|
|
1328
|
-
const {
|
|
1329
|
-
onMove
|
|
1330
|
-
} = this.props;
|
|
1331
|
-
event.preventDefault();
|
|
1332
|
-
onMove(coordinates);
|
|
1333
|
-
}
|
|
1334
|
-
handleEnd(event) {
|
|
1335
|
-
const {
|
|
1336
|
-
onEnd
|
|
1337
|
-
} = this.props;
|
|
1338
|
-
event.preventDefault();
|
|
1339
|
-
this.detach();
|
|
1340
|
-
onEnd();
|
|
1341
|
-
}
|
|
1342
|
-
handleCancel(event) {
|
|
1343
|
-
const {
|
|
1344
|
-
onCancel
|
|
1345
|
-
} = this.props;
|
|
1346
|
-
event.preventDefault();
|
|
1347
|
-
this.detach();
|
|
1348
|
-
onCancel();
|
|
1349
|
-
}
|
|
1350
|
-
detach() {
|
|
1351
|
-
this.listeners.removeAll();
|
|
1352
|
-
this.windowListeners.removeAll();
|
|
1353
|
-
}
|
|
1354
|
-
}
|
|
1355
|
-
KeyboardSensor.activators = [{
|
|
1356
|
-
eventName: "onKeyDown",
|
|
1357
|
-
handler: (event, _ref, _ref2) => {
|
|
1358
|
-
let {
|
|
1359
|
-
keyboardCodes = defaultKeyboardCodes,
|
|
1360
|
-
onActivation
|
|
1361
|
-
} = _ref;
|
|
1362
|
-
let {
|
|
1363
|
-
active
|
|
1364
|
-
} = _ref2;
|
|
1365
|
-
const {
|
|
1366
|
-
code
|
|
1367
|
-
} = event.nativeEvent;
|
|
1368
|
-
if (keyboardCodes.start.includes(code)) {
|
|
1369
|
-
const activator = active.activatorNode.current;
|
|
1370
|
-
if (activator && event.target !== activator) {
|
|
1371
|
-
return false;
|
|
1372
|
-
}
|
|
1373
|
-
event.preventDefault();
|
|
1374
|
-
onActivation == null ? void 0 : onActivation({
|
|
1375
|
-
event: event.nativeEvent
|
|
1376
|
-
});
|
|
1377
|
-
return true;
|
|
1378
|
-
}
|
|
1379
|
-
return false;
|
|
1380
|
-
}
|
|
1381
|
-
}];
|
|
1382
|
-
function isDistanceConstraint(constraint) {
|
|
1383
|
-
return Boolean(constraint && "distance" in constraint);
|
|
1384
|
-
}
|
|
1385
|
-
function isDelayConstraint(constraint) {
|
|
1386
|
-
return Boolean(constraint && "delay" in constraint);
|
|
1387
|
-
}
|
|
1388
|
-
class AbstractPointerSensor {
|
|
1389
|
-
constructor(props, events2, listenerTarget) {
|
|
1390
|
-
var _getEventCoordinates;
|
|
1391
|
-
if (listenerTarget === void 0) {
|
|
1392
|
-
listenerTarget = getEventListenerTarget(props.event.target);
|
|
1393
|
-
}
|
|
1394
|
-
this.props = void 0;
|
|
1395
|
-
this.events = void 0;
|
|
1396
|
-
this.autoScrollEnabled = true;
|
|
1397
|
-
this.document = void 0;
|
|
1398
|
-
this.activated = false;
|
|
1399
|
-
this.initialCoordinates = void 0;
|
|
1400
|
-
this.timeoutId = null;
|
|
1401
|
-
this.listeners = void 0;
|
|
1402
|
-
this.documentListeners = void 0;
|
|
1403
|
-
this.windowListeners = void 0;
|
|
1404
|
-
this.props = props;
|
|
1405
|
-
this.events = events2;
|
|
1406
|
-
const {
|
|
1407
|
-
event
|
|
1408
|
-
} = props;
|
|
1409
|
-
const {
|
|
1410
|
-
target
|
|
1411
|
-
} = event;
|
|
1412
|
-
this.props = props;
|
|
1413
|
-
this.events = events2;
|
|
1414
|
-
this.document = getOwnerDocument(target);
|
|
1415
|
-
this.documentListeners = new Listeners(this.document);
|
|
1416
|
-
this.listeners = new Listeners(listenerTarget);
|
|
1417
|
-
this.windowListeners = new Listeners(getWindow(target));
|
|
1418
|
-
this.initialCoordinates = (_getEventCoordinates = getEventCoordinates(event)) != null ? _getEventCoordinates : defaultCoordinates;
|
|
1419
|
-
this.handleStart = this.handleStart.bind(this);
|
|
1420
|
-
this.handleMove = this.handleMove.bind(this);
|
|
1421
|
-
this.handleEnd = this.handleEnd.bind(this);
|
|
1422
|
-
this.handleCancel = this.handleCancel.bind(this);
|
|
1423
|
-
this.handleKeydown = this.handleKeydown.bind(this);
|
|
1424
|
-
this.removeTextSelection = this.removeTextSelection.bind(this);
|
|
1425
|
-
this.attach();
|
|
1426
|
-
}
|
|
1427
|
-
attach() {
|
|
1428
|
-
const {
|
|
1429
|
-
events: events2,
|
|
1430
|
-
props: {
|
|
1431
|
-
options: {
|
|
1432
|
-
activationConstraint,
|
|
1433
|
-
bypassActivationConstraint
|
|
1434
|
-
}
|
|
1435
|
-
}
|
|
1436
|
-
} = this;
|
|
1437
|
-
this.listeners.add(events2.move.name, this.handleMove, {
|
|
1438
|
-
passive: false
|
|
1439
|
-
});
|
|
1440
|
-
this.listeners.add(events2.end.name, this.handleEnd);
|
|
1441
|
-
if (events2.cancel) {
|
|
1442
|
-
this.listeners.add(events2.cancel.name, this.handleCancel);
|
|
1443
|
-
}
|
|
1444
|
-
this.windowListeners.add(EventName.Resize, this.handleCancel);
|
|
1445
|
-
this.windowListeners.add(EventName.DragStart, preventDefault);
|
|
1446
|
-
this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
|
|
1447
|
-
this.windowListeners.add(EventName.ContextMenu, preventDefault);
|
|
1448
|
-
this.documentListeners.add(EventName.Keydown, this.handleKeydown);
|
|
1449
|
-
if (activationConstraint) {
|
|
1450
|
-
if (bypassActivationConstraint != null && bypassActivationConstraint({
|
|
1451
|
-
event: this.props.event,
|
|
1452
|
-
activeNode: this.props.activeNode,
|
|
1453
|
-
options: this.props.options
|
|
1454
|
-
})) {
|
|
1455
|
-
return this.handleStart();
|
|
1456
|
-
}
|
|
1457
|
-
if (isDelayConstraint(activationConstraint)) {
|
|
1458
|
-
this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
|
|
1459
|
-
this.handlePending(activationConstraint);
|
|
1460
|
-
return;
|
|
1461
|
-
}
|
|
1462
|
-
if (isDistanceConstraint(activationConstraint)) {
|
|
1463
|
-
this.handlePending(activationConstraint);
|
|
1464
|
-
return;
|
|
1465
|
-
}
|
|
1466
|
-
}
|
|
1467
|
-
this.handleStart();
|
|
1468
|
-
}
|
|
1469
|
-
detach() {
|
|
1470
|
-
this.listeners.removeAll();
|
|
1471
|
-
this.windowListeners.removeAll();
|
|
1472
|
-
setTimeout(this.documentListeners.removeAll, 50);
|
|
1473
|
-
if (this.timeoutId !== null) {
|
|
1474
|
-
clearTimeout(this.timeoutId);
|
|
1475
|
-
this.timeoutId = null;
|
|
1476
|
-
}
|
|
1477
|
-
}
|
|
1478
|
-
handlePending(constraint, offset) {
|
|
1479
|
-
const {
|
|
1480
|
-
active,
|
|
1481
|
-
onPending
|
|
1482
|
-
} = this.props;
|
|
1483
|
-
onPending(active, constraint, this.initialCoordinates, offset);
|
|
1484
|
-
}
|
|
1485
|
-
handleStart() {
|
|
1486
|
-
const {
|
|
1487
|
-
initialCoordinates
|
|
1488
|
-
} = this;
|
|
1489
|
-
const {
|
|
1490
|
-
onStart
|
|
1491
|
-
} = this.props;
|
|
1492
|
-
if (initialCoordinates) {
|
|
1493
|
-
this.activated = true;
|
|
1494
|
-
this.documentListeners.add(EventName.Click, stopPropagation, {
|
|
1495
|
-
capture: true
|
|
1496
|
-
});
|
|
1497
|
-
this.removeTextSelection();
|
|
1498
|
-
this.documentListeners.add(EventName.SelectionChange, this.removeTextSelection);
|
|
1499
|
-
onStart(initialCoordinates);
|
|
1500
|
-
}
|
|
1501
|
-
}
|
|
1502
|
-
handleMove(event) {
|
|
1503
|
-
var _getEventCoordinates2;
|
|
1504
|
-
const {
|
|
1505
|
-
activated,
|
|
1506
|
-
initialCoordinates,
|
|
1507
|
-
props
|
|
1508
|
-
} = this;
|
|
1509
|
-
const {
|
|
1510
|
-
onMove,
|
|
1511
|
-
options: {
|
|
1512
|
-
activationConstraint
|
|
1513
|
-
}
|
|
1514
|
-
} = props;
|
|
1515
|
-
if (!initialCoordinates) {
|
|
1516
|
-
return;
|
|
1517
|
-
}
|
|
1518
|
-
const coordinates = (_getEventCoordinates2 = getEventCoordinates(event)) != null ? _getEventCoordinates2 : defaultCoordinates;
|
|
1519
|
-
const delta = subtract(initialCoordinates, coordinates);
|
|
1520
|
-
if (!activated && activationConstraint) {
|
|
1521
|
-
if (isDistanceConstraint(activationConstraint)) {
|
|
1522
|
-
if (activationConstraint.tolerance != null && hasExceededDistance(delta, activationConstraint.tolerance)) {
|
|
1523
|
-
return this.handleCancel();
|
|
1524
|
-
}
|
|
1525
|
-
if (hasExceededDistance(delta, activationConstraint.distance)) {
|
|
1526
|
-
return this.handleStart();
|
|
1527
|
-
}
|
|
1528
|
-
}
|
|
1529
|
-
if (isDelayConstraint(activationConstraint)) {
|
|
1530
|
-
if (hasExceededDistance(delta, activationConstraint.tolerance)) {
|
|
1531
|
-
return this.handleCancel();
|
|
1532
|
-
}
|
|
1533
|
-
}
|
|
1534
|
-
this.handlePending(activationConstraint, delta);
|
|
1535
|
-
return;
|
|
1536
|
-
}
|
|
1537
|
-
if (event.cancelable) {
|
|
1538
|
-
event.preventDefault();
|
|
1539
|
-
}
|
|
1540
|
-
onMove(coordinates);
|
|
1541
|
-
}
|
|
1542
|
-
handleEnd() {
|
|
1543
|
-
const {
|
|
1544
|
-
onAbort,
|
|
1545
|
-
onEnd
|
|
1546
|
-
} = this.props;
|
|
1547
|
-
this.detach();
|
|
1548
|
-
if (!this.activated) {
|
|
1549
|
-
onAbort(this.props.active);
|
|
1550
|
-
}
|
|
1551
|
-
onEnd();
|
|
1552
|
-
}
|
|
1553
|
-
handleCancel() {
|
|
1554
|
-
const {
|
|
1555
|
-
onAbort,
|
|
1556
|
-
onCancel
|
|
1557
|
-
} = this.props;
|
|
1558
|
-
this.detach();
|
|
1559
|
-
if (!this.activated) {
|
|
1560
|
-
onAbort(this.props.active);
|
|
1561
|
-
}
|
|
1562
|
-
onCancel();
|
|
1563
|
-
}
|
|
1564
|
-
handleKeydown(event) {
|
|
1565
|
-
if (event.code === KeyboardCode.Esc) {
|
|
1566
|
-
this.handleCancel();
|
|
1567
|
-
}
|
|
1568
|
-
}
|
|
1569
|
-
removeTextSelection() {
|
|
1570
|
-
var _this$document$getSel;
|
|
1571
|
-
(_this$document$getSel = this.document.getSelection()) == null ? void 0 : _this$document$getSel.removeAllRanges();
|
|
1572
|
-
}
|
|
1573
|
-
}
|
|
1574
|
-
const events = {
|
|
1575
|
-
cancel: {
|
|
1576
|
-
name: "pointercancel"
|
|
1577
|
-
},
|
|
1578
|
-
move: {
|
|
1579
|
-
name: "pointermove"
|
|
1580
|
-
},
|
|
1581
|
-
end: {
|
|
1582
|
-
name: "pointerup"
|
|
1583
|
-
}
|
|
1584
|
-
};
|
|
1585
|
-
class PointerSensor extends AbstractPointerSensor {
|
|
1586
|
-
constructor(props) {
|
|
1587
|
-
const {
|
|
1588
|
-
event
|
|
1589
|
-
} = props;
|
|
1590
|
-
const listenerTarget = getOwnerDocument(event.target);
|
|
1591
|
-
super(props, events, listenerTarget);
|
|
1592
|
-
}
|
|
1593
|
-
}
|
|
1594
|
-
PointerSensor.activators = [{
|
|
1595
|
-
eventName: "onPointerDown",
|
|
1596
|
-
handler: (_ref, _ref2) => {
|
|
1597
|
-
let {
|
|
1598
|
-
nativeEvent: event
|
|
1599
|
-
} = _ref;
|
|
1600
|
-
let {
|
|
1601
|
-
onActivation
|
|
1602
|
-
} = _ref2;
|
|
1603
|
-
if (!event.isPrimary || event.button !== 0) {
|
|
1604
|
-
return false;
|
|
1605
|
-
}
|
|
1606
|
-
onActivation == null ? void 0 : onActivation({
|
|
1607
|
-
event
|
|
1608
|
-
});
|
|
1609
|
-
return true;
|
|
1610
|
-
}
|
|
1611
|
-
}];
|
|
1612
|
-
const events$1 = {
|
|
1613
|
-
move: {
|
|
1614
|
-
name: "mousemove"
|
|
1615
|
-
},
|
|
1616
|
-
end: {
|
|
1617
|
-
name: "mouseup"
|
|
1618
|
-
}
|
|
1619
|
-
};
|
|
1620
|
-
var MouseButton;
|
|
1621
|
-
(function(MouseButton2) {
|
|
1622
|
-
MouseButton2[MouseButton2["RightClick"] = 2] = "RightClick";
|
|
1623
|
-
})(MouseButton || (MouseButton = {}));
|
|
1624
|
-
class MouseSensor extends AbstractPointerSensor {
|
|
1625
|
-
constructor(props) {
|
|
1626
|
-
super(props, events$1, getOwnerDocument(props.event.target));
|
|
1627
|
-
}
|
|
1628
|
-
}
|
|
1629
|
-
MouseSensor.activators = [{
|
|
1630
|
-
eventName: "onMouseDown",
|
|
1631
|
-
handler: (_ref, _ref2) => {
|
|
1632
|
-
let {
|
|
1633
|
-
nativeEvent: event
|
|
1634
|
-
} = _ref;
|
|
1635
|
-
let {
|
|
1636
|
-
onActivation
|
|
1637
|
-
} = _ref2;
|
|
1638
|
-
if (event.button === MouseButton.RightClick) {
|
|
1639
|
-
return false;
|
|
1640
|
-
}
|
|
1641
|
-
onActivation == null ? void 0 : onActivation({
|
|
1642
|
-
event
|
|
1643
|
-
});
|
|
1644
|
-
return true;
|
|
1645
|
-
}
|
|
1646
|
-
}];
|
|
1647
|
-
const events$2 = {
|
|
1648
|
-
cancel: {
|
|
1649
|
-
name: "touchcancel"
|
|
1650
|
-
},
|
|
1651
|
-
move: {
|
|
1652
|
-
name: "touchmove"
|
|
1653
|
-
},
|
|
1654
|
-
end: {
|
|
1655
|
-
name: "touchend"
|
|
1656
|
-
}
|
|
1657
|
-
};
|
|
1658
|
-
class TouchSensor extends AbstractPointerSensor {
|
|
1659
|
-
constructor(props) {
|
|
1660
|
-
super(props, events$2);
|
|
1661
|
-
}
|
|
1662
|
-
static setup() {
|
|
1663
|
-
window.addEventListener(events$2.move.name, noop2, {
|
|
1664
|
-
capture: false,
|
|
1665
|
-
passive: false
|
|
1666
|
-
});
|
|
1667
|
-
return function teardown() {
|
|
1668
|
-
window.removeEventListener(events$2.move.name, noop2);
|
|
1669
|
-
};
|
|
1670
|
-
function noop2() {
|
|
1671
|
-
}
|
|
1672
|
-
}
|
|
1673
|
-
}
|
|
1674
|
-
TouchSensor.activators = [{
|
|
1675
|
-
eventName: "onTouchStart",
|
|
1676
|
-
handler: (_ref, _ref2) => {
|
|
1677
|
-
let {
|
|
1678
|
-
nativeEvent: event
|
|
1679
|
-
} = _ref;
|
|
1680
|
-
let {
|
|
1681
|
-
onActivation
|
|
1682
|
-
} = _ref2;
|
|
1683
|
-
const {
|
|
1684
|
-
touches
|
|
1685
|
-
} = event;
|
|
1686
|
-
if (touches.length > 1) {
|
|
1687
|
-
return false;
|
|
1688
|
-
}
|
|
1689
|
-
onActivation == null ? void 0 : onActivation({
|
|
1690
|
-
event
|
|
1691
|
-
});
|
|
1692
|
-
return true;
|
|
1693
|
-
}
|
|
1694
|
-
}];
|
|
1695
|
-
var AutoScrollActivator;
|
|
1696
|
-
(function(AutoScrollActivator2) {
|
|
1697
|
-
AutoScrollActivator2[AutoScrollActivator2["Pointer"] = 0] = "Pointer";
|
|
1698
|
-
AutoScrollActivator2[AutoScrollActivator2["DraggableRect"] = 1] = "DraggableRect";
|
|
1699
|
-
})(AutoScrollActivator || (AutoScrollActivator = {}));
|
|
1700
|
-
var TraversalOrder;
|
|
1701
|
-
(function(TraversalOrder2) {
|
|
1702
|
-
TraversalOrder2[TraversalOrder2["TreeOrder"] = 0] = "TreeOrder";
|
|
1703
|
-
TraversalOrder2[TraversalOrder2["ReversedTreeOrder"] = 1] = "ReversedTreeOrder";
|
|
1704
|
-
})(TraversalOrder || (TraversalOrder = {}));
|
|
1705
|
-
function useAutoScroller(_ref) {
|
|
1706
|
-
let {
|
|
1707
|
-
acceleration,
|
|
1708
|
-
activator = AutoScrollActivator.Pointer,
|
|
1709
|
-
canScroll,
|
|
1710
|
-
draggingRect,
|
|
1711
|
-
enabled,
|
|
1712
|
-
interval = 5,
|
|
1713
|
-
order = TraversalOrder.TreeOrder,
|
|
1714
|
-
pointerCoordinates,
|
|
1715
|
-
scrollableAncestors,
|
|
1716
|
-
scrollableAncestorRects,
|
|
1717
|
-
delta,
|
|
1718
|
-
threshold
|
|
1719
|
-
} = _ref;
|
|
1720
|
-
const scrollIntent = useScrollIntent({
|
|
1721
|
-
delta,
|
|
1722
|
-
disabled: !enabled
|
|
1723
|
-
});
|
|
1724
|
-
const [setAutoScrollInterval, clearAutoScrollInterval] = useInterval();
|
|
1725
|
-
const scrollSpeed = React.useRef({
|
|
1726
|
-
x: 0,
|
|
1727
|
-
y: 0
|
|
1728
|
-
});
|
|
1729
|
-
const scrollDirection = React.useRef({
|
|
1730
|
-
x: 0,
|
|
1731
|
-
y: 0
|
|
1732
|
-
});
|
|
1733
|
-
const rect = React.useMemo(() => {
|
|
1734
|
-
switch (activator) {
|
|
1735
|
-
case AutoScrollActivator.Pointer:
|
|
1736
|
-
return pointerCoordinates ? {
|
|
1737
|
-
top: pointerCoordinates.y,
|
|
1738
|
-
bottom: pointerCoordinates.y,
|
|
1739
|
-
left: pointerCoordinates.x,
|
|
1740
|
-
right: pointerCoordinates.x
|
|
1741
|
-
} : null;
|
|
1742
|
-
case AutoScrollActivator.DraggableRect:
|
|
1743
|
-
return draggingRect;
|
|
1744
|
-
}
|
|
1745
|
-
}, [activator, draggingRect, pointerCoordinates]);
|
|
1746
|
-
const scrollContainerRef = React.useRef(null);
|
|
1747
|
-
const autoScroll = React.useCallback(() => {
|
|
1748
|
-
const scrollContainer = scrollContainerRef.current;
|
|
1749
|
-
if (!scrollContainer) {
|
|
1750
|
-
return;
|
|
1751
|
-
}
|
|
1752
|
-
const scrollLeft = scrollSpeed.current.x * scrollDirection.current.x;
|
|
1753
|
-
const scrollTop = scrollSpeed.current.y * scrollDirection.current.y;
|
|
1754
|
-
scrollContainer.scrollBy(scrollLeft, scrollTop);
|
|
1755
|
-
}, []);
|
|
1756
|
-
const sortedScrollableAncestors = React.useMemo(() => order === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order, scrollableAncestors]);
|
|
1757
|
-
React.useEffect(
|
|
1758
|
-
() => {
|
|
1759
|
-
if (!enabled || !scrollableAncestors.length || !rect) {
|
|
1760
|
-
clearAutoScrollInterval();
|
|
1761
|
-
return;
|
|
1762
|
-
}
|
|
1763
|
-
for (const scrollContainer of sortedScrollableAncestors) {
|
|
1764
|
-
if ((canScroll == null ? void 0 : canScroll(scrollContainer)) === false) {
|
|
1765
|
-
continue;
|
|
1766
|
-
}
|
|
1767
|
-
const index2 = scrollableAncestors.indexOf(scrollContainer);
|
|
1768
|
-
const scrollContainerRect = scrollableAncestorRects[index2];
|
|
1769
|
-
if (!scrollContainerRect) {
|
|
1770
|
-
continue;
|
|
1771
|
-
}
|
|
1772
|
-
const {
|
|
1773
|
-
direction,
|
|
1774
|
-
speed
|
|
1775
|
-
} = getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, rect, acceleration, threshold);
|
|
1776
|
-
for (const axis of ["x", "y"]) {
|
|
1777
|
-
if (!scrollIntent[axis][direction[axis]]) {
|
|
1778
|
-
speed[axis] = 0;
|
|
1779
|
-
direction[axis] = 0;
|
|
1780
|
-
}
|
|
1781
|
-
}
|
|
1782
|
-
if (speed.x > 0 || speed.y > 0) {
|
|
1783
|
-
clearAutoScrollInterval();
|
|
1784
|
-
scrollContainerRef.current = scrollContainer;
|
|
1785
|
-
setAutoScrollInterval(autoScroll, interval);
|
|
1786
|
-
scrollSpeed.current = speed;
|
|
1787
|
-
scrollDirection.current = direction;
|
|
1788
|
-
return;
|
|
1789
|
-
}
|
|
1790
|
-
}
|
|
1791
|
-
scrollSpeed.current = {
|
|
1792
|
-
x: 0,
|
|
1793
|
-
y: 0
|
|
1794
|
-
};
|
|
1795
|
-
scrollDirection.current = {
|
|
1796
|
-
x: 0,
|
|
1797
|
-
y: 0
|
|
1798
|
-
};
|
|
1799
|
-
clearAutoScrollInterval();
|
|
1800
|
-
},
|
|
1801
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1802
|
-
[
|
|
1803
|
-
acceleration,
|
|
1804
|
-
autoScroll,
|
|
1805
|
-
canScroll,
|
|
1806
|
-
clearAutoScrollInterval,
|
|
1807
|
-
enabled,
|
|
1808
|
-
interval,
|
|
1809
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1810
|
-
JSON.stringify(rect),
|
|
1811
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1812
|
-
JSON.stringify(scrollIntent),
|
|
1813
|
-
setAutoScrollInterval,
|
|
1814
|
-
scrollableAncestors,
|
|
1815
|
-
sortedScrollableAncestors,
|
|
1816
|
-
scrollableAncestorRects,
|
|
1817
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1818
|
-
JSON.stringify(threshold)
|
|
1819
|
-
]
|
|
1820
|
-
);
|
|
1821
|
-
}
|
|
1822
|
-
const defaultScrollIntent = {
|
|
1823
|
-
x: {
|
|
1824
|
-
[Direction.Backward]: false,
|
|
1825
|
-
[Direction.Forward]: false
|
|
1826
|
-
},
|
|
1827
|
-
y: {
|
|
1828
|
-
[Direction.Backward]: false,
|
|
1829
|
-
[Direction.Forward]: false
|
|
1830
|
-
}
|
|
1831
|
-
};
|
|
1832
|
-
function useScrollIntent(_ref2) {
|
|
1833
|
-
let {
|
|
1834
|
-
delta,
|
|
1835
|
-
disabled
|
|
1836
|
-
} = _ref2;
|
|
1837
|
-
const previousDelta = usePrevious(delta);
|
|
1838
|
-
return useLazyMemo((previousIntent) => {
|
|
1839
|
-
if (disabled || !previousDelta || !previousIntent) {
|
|
1840
|
-
return defaultScrollIntent;
|
|
1841
|
-
}
|
|
1842
|
-
const direction = {
|
|
1843
|
-
x: Math.sign(delta.x - previousDelta.x),
|
|
1844
|
-
y: Math.sign(delta.y - previousDelta.y)
|
|
1845
|
-
};
|
|
1846
|
-
return {
|
|
1847
|
-
x: {
|
|
1848
|
-
[Direction.Backward]: previousIntent.x[Direction.Backward] || direction.x === -1,
|
|
1849
|
-
[Direction.Forward]: previousIntent.x[Direction.Forward] || direction.x === 1
|
|
1850
|
-
},
|
|
1851
|
-
y: {
|
|
1852
|
-
[Direction.Backward]: previousIntent.y[Direction.Backward] || direction.y === -1,
|
|
1853
|
-
[Direction.Forward]: previousIntent.y[Direction.Forward] || direction.y === 1
|
|
1854
|
-
}
|
|
1855
|
-
};
|
|
1856
|
-
}, [disabled, delta, previousDelta]);
|
|
1857
|
-
}
|
|
1858
|
-
function useCachedNode(draggableNodes, id) {
|
|
1859
|
-
const draggableNode = id != null ? draggableNodes.get(id) : void 0;
|
|
1860
|
-
const node = draggableNode ? draggableNode.node.current : null;
|
|
1861
|
-
return useLazyMemo((cachedNode) => {
|
|
1862
|
-
var _ref;
|
|
1863
|
-
if (id == null) {
|
|
1864
|
-
return null;
|
|
1865
|
-
}
|
|
1866
|
-
return (_ref = node != null ? node : cachedNode) != null ? _ref : null;
|
|
1867
|
-
}, [node, id]);
|
|
1868
|
-
}
|
|
1869
|
-
function useCombineActivators(sensors, getSyntheticHandler) {
|
|
1870
|
-
return React.useMemo(() => sensors.reduce((accumulator, sensor) => {
|
|
1871
|
-
const {
|
|
1872
|
-
sensor: Sensor
|
|
1873
|
-
} = sensor;
|
|
1874
|
-
const sensorActivators = Sensor.activators.map((activator) => ({
|
|
1875
|
-
eventName: activator.eventName,
|
|
1876
|
-
handler: getSyntheticHandler(activator.handler, sensor)
|
|
1877
|
-
}));
|
|
1878
|
-
return [...accumulator, ...sensorActivators];
|
|
1879
|
-
}, []), [sensors, getSyntheticHandler]);
|
|
1880
|
-
}
|
|
1881
|
-
var MeasuringStrategy;
|
|
1882
|
-
(function(MeasuringStrategy2) {
|
|
1883
|
-
MeasuringStrategy2[MeasuringStrategy2["Always"] = 0] = "Always";
|
|
1884
|
-
MeasuringStrategy2[MeasuringStrategy2["BeforeDragging"] = 1] = "BeforeDragging";
|
|
1885
|
-
MeasuringStrategy2[MeasuringStrategy2["WhileDragging"] = 2] = "WhileDragging";
|
|
1886
|
-
})(MeasuringStrategy || (MeasuringStrategy = {}));
|
|
1887
|
-
var MeasuringFrequency;
|
|
1888
|
-
(function(MeasuringFrequency2) {
|
|
1889
|
-
MeasuringFrequency2["Optimized"] = "optimized";
|
|
1890
|
-
})(MeasuringFrequency || (MeasuringFrequency = {}));
|
|
1891
|
-
const defaultValue = /* @__PURE__ */ new Map();
|
|
1892
|
-
function useDroppableMeasuring(containers, _ref) {
|
|
1893
|
-
let {
|
|
1894
|
-
dragging,
|
|
1895
|
-
dependencies,
|
|
1896
|
-
config
|
|
1897
|
-
} = _ref;
|
|
1898
|
-
const [queue, setQueue] = React.useState(null);
|
|
1899
|
-
const {
|
|
1900
|
-
frequency,
|
|
1901
|
-
measure,
|
|
1902
|
-
strategy
|
|
1903
|
-
} = config;
|
|
1904
|
-
const containersRef = React.useRef(containers);
|
|
1905
|
-
const disabled = isDisabled();
|
|
1906
|
-
const disabledRef = useLatestValue(disabled);
|
|
1907
|
-
const measureDroppableContainers = React.useCallback(function(ids2) {
|
|
1908
|
-
if (ids2 === void 0) {
|
|
1909
|
-
ids2 = [];
|
|
1910
|
-
}
|
|
1911
|
-
if (disabledRef.current) {
|
|
1912
|
-
return;
|
|
1913
|
-
}
|
|
1914
|
-
setQueue((value) => {
|
|
1915
|
-
if (value === null) {
|
|
1916
|
-
return ids2;
|
|
1917
|
-
}
|
|
1918
|
-
return value.concat(ids2.filter((id) => !value.includes(id)));
|
|
1919
|
-
});
|
|
1920
|
-
}, [disabledRef]);
|
|
1921
|
-
const timeoutId = React.useRef(null);
|
|
1922
|
-
const droppableRects = useLazyMemo((previousValue) => {
|
|
1923
|
-
if (disabled && !dragging) {
|
|
1924
|
-
return defaultValue;
|
|
1925
|
-
}
|
|
1926
|
-
if (!previousValue || previousValue === defaultValue || containersRef.current !== containers || queue != null) {
|
|
1927
|
-
const map = /* @__PURE__ */ new Map();
|
|
1928
|
-
for (let container of containers) {
|
|
1929
|
-
if (!container) {
|
|
1930
|
-
continue;
|
|
1931
|
-
}
|
|
1932
|
-
if (queue && queue.length > 0 && !queue.includes(container.id) && container.rect.current) {
|
|
1933
|
-
map.set(container.id, container.rect.current);
|
|
1934
|
-
continue;
|
|
1935
|
-
}
|
|
1936
|
-
const node = container.node.current;
|
|
1937
|
-
const rect = node ? new Rect(measure(node), node) : null;
|
|
1938
|
-
container.rect.current = rect;
|
|
1939
|
-
if (rect) {
|
|
1940
|
-
map.set(container.id, rect);
|
|
1941
|
-
}
|
|
1942
|
-
}
|
|
1943
|
-
return map;
|
|
1944
|
-
}
|
|
1945
|
-
return previousValue;
|
|
1946
|
-
}, [containers, queue, dragging, disabled, measure]);
|
|
1947
|
-
React.useEffect(() => {
|
|
1948
|
-
containersRef.current = containers;
|
|
1949
|
-
}, [containers]);
|
|
1950
|
-
React.useEffect(
|
|
1951
|
-
() => {
|
|
1952
|
-
if (disabled) {
|
|
1953
|
-
return;
|
|
1954
|
-
}
|
|
1955
|
-
measureDroppableContainers();
|
|
1956
|
-
},
|
|
1957
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1958
|
-
[dragging, disabled]
|
|
1959
|
-
);
|
|
1960
|
-
React.useEffect(
|
|
1961
|
-
() => {
|
|
1962
|
-
if (queue && queue.length > 0) {
|
|
1963
|
-
setQueue(null);
|
|
1964
|
-
}
|
|
1965
|
-
},
|
|
1966
|
-
//eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1967
|
-
[JSON.stringify(queue)]
|
|
1968
|
-
);
|
|
1969
|
-
React.useEffect(
|
|
1970
|
-
() => {
|
|
1971
|
-
if (disabled || typeof frequency !== "number" || timeoutId.current !== null) {
|
|
1972
|
-
return;
|
|
1973
|
-
}
|
|
1974
|
-
timeoutId.current = setTimeout(() => {
|
|
1975
|
-
measureDroppableContainers();
|
|
1976
|
-
timeoutId.current = null;
|
|
1977
|
-
}, frequency);
|
|
1978
|
-
},
|
|
1979
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1980
|
-
[frequency, disabled, measureDroppableContainers, ...dependencies]
|
|
1981
|
-
);
|
|
1982
|
-
return {
|
|
1983
|
-
droppableRects,
|
|
1984
|
-
measureDroppableContainers,
|
|
1985
|
-
measuringScheduled: queue != null
|
|
1986
|
-
};
|
|
1987
|
-
function isDisabled() {
|
|
1988
|
-
switch (strategy) {
|
|
1989
|
-
case MeasuringStrategy.Always:
|
|
1990
|
-
return false;
|
|
1991
|
-
case MeasuringStrategy.BeforeDragging:
|
|
1992
|
-
return dragging;
|
|
1993
|
-
default:
|
|
1994
|
-
return !dragging;
|
|
1995
|
-
}
|
|
1996
|
-
}
|
|
1997
|
-
}
|
|
1998
|
-
function useInitialValue(value, computeFn) {
|
|
1999
|
-
return useLazyMemo((previousValue) => {
|
|
2000
|
-
if (!value) {
|
|
2001
|
-
return null;
|
|
2002
|
-
}
|
|
2003
|
-
if (previousValue) {
|
|
2004
|
-
return previousValue;
|
|
2005
|
-
}
|
|
2006
|
-
return typeof computeFn === "function" ? computeFn(value) : value;
|
|
2007
|
-
}, [computeFn, value]);
|
|
2008
|
-
}
|
|
2009
|
-
function useInitialRect(node, measure) {
|
|
2010
|
-
return useInitialValue(node, measure);
|
|
2011
|
-
}
|
|
2012
|
-
function useMutationObserver(_ref) {
|
|
2013
|
-
let {
|
|
2014
|
-
callback,
|
|
2015
|
-
disabled
|
|
2016
|
-
} = _ref;
|
|
2017
|
-
const handleMutations = useEvent(callback);
|
|
2018
|
-
const mutationObserver = React.useMemo(() => {
|
|
2019
|
-
if (disabled || typeof window === "undefined" || typeof window.MutationObserver === "undefined") {
|
|
2020
|
-
return void 0;
|
|
2021
|
-
}
|
|
2022
|
-
const {
|
|
2023
|
-
MutationObserver
|
|
2024
|
-
} = window;
|
|
2025
|
-
return new MutationObserver(handleMutations);
|
|
2026
|
-
}, [handleMutations, disabled]);
|
|
2027
|
-
React.useEffect(() => {
|
|
2028
|
-
return () => mutationObserver == null ? void 0 : mutationObserver.disconnect();
|
|
2029
|
-
}, [mutationObserver]);
|
|
2030
|
-
return mutationObserver;
|
|
2031
|
-
}
|
|
2032
|
-
function useResizeObserver(_ref) {
|
|
2033
|
-
let {
|
|
2034
|
-
callback,
|
|
2035
|
-
disabled
|
|
2036
|
-
} = _ref;
|
|
2037
|
-
const handleResize = useEvent(callback);
|
|
2038
|
-
const resizeObserver = React.useMemo(
|
|
2039
|
-
() => {
|
|
2040
|
-
if (disabled || typeof window === "undefined" || typeof window.ResizeObserver === "undefined") {
|
|
2041
|
-
return void 0;
|
|
2042
|
-
}
|
|
2043
|
-
const {
|
|
2044
|
-
ResizeObserver
|
|
2045
|
-
} = window;
|
|
2046
|
-
return new ResizeObserver(handleResize);
|
|
2047
|
-
},
|
|
2048
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2049
|
-
[disabled]
|
|
2050
|
-
);
|
|
2051
|
-
React.useEffect(() => {
|
|
2052
|
-
return () => resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
|
2053
|
-
}, [resizeObserver]);
|
|
2054
|
-
return resizeObserver;
|
|
2055
|
-
}
|
|
2056
|
-
function defaultMeasure(element) {
|
|
2057
|
-
return new Rect(getClientRect(element), element);
|
|
2058
|
-
}
|
|
2059
|
-
function useRect(element, measure, fallbackRect) {
|
|
2060
|
-
if (measure === void 0) {
|
|
2061
|
-
measure = defaultMeasure;
|
|
2062
|
-
}
|
|
2063
|
-
const [rect, setRect] = React.useState(null);
|
|
2064
|
-
function measureRect() {
|
|
2065
|
-
setRect((currentRect) => {
|
|
2066
|
-
if (!element) {
|
|
2067
|
-
return null;
|
|
2068
|
-
}
|
|
2069
|
-
if (element.isConnected === false) {
|
|
2070
|
-
var _ref;
|
|
2071
|
-
return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
|
|
2072
|
-
}
|
|
2073
|
-
const newRect = measure(element);
|
|
2074
|
-
if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
|
|
2075
|
-
return currentRect;
|
|
2076
|
-
}
|
|
2077
|
-
return newRect;
|
|
2078
|
-
});
|
|
2079
|
-
}
|
|
2080
|
-
const mutationObserver = useMutationObserver({
|
|
2081
|
-
callback(records) {
|
|
2082
|
-
if (!element) {
|
|
2083
|
-
return;
|
|
2084
|
-
}
|
|
2085
|
-
for (const record of records) {
|
|
2086
|
-
const {
|
|
2087
|
-
type,
|
|
2088
|
-
target
|
|
2089
|
-
} = record;
|
|
2090
|
-
if (type === "childList" && target instanceof HTMLElement && target.contains(element)) {
|
|
2091
|
-
measureRect();
|
|
2092
|
-
break;
|
|
2093
|
-
}
|
|
2094
|
-
}
|
|
2095
|
-
}
|
|
2096
|
-
});
|
|
2097
|
-
const resizeObserver = useResizeObserver({
|
|
2098
|
-
callback: measureRect
|
|
2099
|
-
});
|
|
2100
|
-
useIsomorphicLayoutEffect(() => {
|
|
2101
|
-
measureRect();
|
|
2102
|
-
if (element) {
|
|
2103
|
-
resizeObserver == null ? void 0 : resizeObserver.observe(element);
|
|
2104
|
-
mutationObserver == null ? void 0 : mutationObserver.observe(document.body, {
|
|
2105
|
-
childList: true,
|
|
2106
|
-
subtree: true
|
|
2107
|
-
});
|
|
2108
|
-
} else {
|
|
2109
|
-
resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
|
2110
|
-
mutationObserver == null ? void 0 : mutationObserver.disconnect();
|
|
2111
|
-
}
|
|
2112
|
-
}, [element]);
|
|
2113
|
-
return rect;
|
|
2114
|
-
}
|
|
2115
|
-
function useRectDelta(rect) {
|
|
2116
|
-
const initialRect = useInitialValue(rect);
|
|
2117
|
-
return getRectDelta(rect, initialRect);
|
|
2118
|
-
}
|
|
2119
|
-
const defaultValue$1 = [];
|
|
2120
|
-
function useScrollableAncestors(node) {
|
|
2121
|
-
const previousNode = React.useRef(node);
|
|
2122
|
-
const ancestors = useLazyMemo((previousValue) => {
|
|
2123
|
-
if (!node) {
|
|
2124
|
-
return defaultValue$1;
|
|
2125
|
-
}
|
|
2126
|
-
if (previousValue && previousValue !== defaultValue$1 && node && previousNode.current && node.parentNode === previousNode.current.parentNode) {
|
|
2127
|
-
return previousValue;
|
|
2128
|
-
}
|
|
2129
|
-
return getScrollableAncestors(node);
|
|
2130
|
-
}, [node]);
|
|
2131
|
-
React.useEffect(() => {
|
|
2132
|
-
previousNode.current = node;
|
|
2133
|
-
}, [node]);
|
|
2134
|
-
return ancestors;
|
|
2135
|
-
}
|
|
2136
|
-
function useScrollOffsets(elements) {
|
|
2137
|
-
const [scrollCoordinates, setScrollCoordinates] = React.useState(null);
|
|
2138
|
-
const prevElements = React.useRef(elements);
|
|
2139
|
-
const handleScroll = React.useCallback((event) => {
|
|
2140
|
-
const scrollingElement = getScrollableElement(event.target);
|
|
2141
|
-
if (!scrollingElement) {
|
|
2142
|
-
return;
|
|
2143
|
-
}
|
|
2144
|
-
setScrollCoordinates((scrollCoordinates2) => {
|
|
2145
|
-
if (!scrollCoordinates2) {
|
|
2146
|
-
return null;
|
|
2147
|
-
}
|
|
2148
|
-
scrollCoordinates2.set(scrollingElement, getScrollCoordinates(scrollingElement));
|
|
2149
|
-
return new Map(scrollCoordinates2);
|
|
2150
|
-
});
|
|
2151
|
-
}, []);
|
|
2152
|
-
React.useEffect(() => {
|
|
2153
|
-
const previousElements = prevElements.current;
|
|
2154
|
-
if (elements !== previousElements) {
|
|
2155
|
-
cleanup(previousElements);
|
|
2156
|
-
const entries = elements.map((element) => {
|
|
2157
|
-
const scrollableElement = getScrollableElement(element);
|
|
2158
|
-
if (scrollableElement) {
|
|
2159
|
-
scrollableElement.addEventListener("scroll", handleScroll, {
|
|
2160
|
-
passive: true
|
|
2161
|
-
});
|
|
2162
|
-
return [scrollableElement, getScrollCoordinates(scrollableElement)];
|
|
2163
|
-
}
|
|
2164
|
-
return null;
|
|
2165
|
-
}).filter((entry) => entry != null);
|
|
2166
|
-
setScrollCoordinates(entries.length ? new Map(entries) : null);
|
|
2167
|
-
prevElements.current = elements;
|
|
2168
|
-
}
|
|
2169
|
-
return () => {
|
|
2170
|
-
cleanup(elements);
|
|
2171
|
-
cleanup(previousElements);
|
|
2172
|
-
};
|
|
2173
|
-
function cleanup(elements2) {
|
|
2174
|
-
elements2.forEach((element) => {
|
|
2175
|
-
const scrollableElement = getScrollableElement(element);
|
|
2176
|
-
scrollableElement == null ? void 0 : scrollableElement.removeEventListener("scroll", handleScroll);
|
|
2177
|
-
});
|
|
2178
|
-
}
|
|
2179
|
-
}, [handleScroll, elements]);
|
|
2180
|
-
return React.useMemo(() => {
|
|
2181
|
-
if (elements.length) {
|
|
2182
|
-
return scrollCoordinates ? Array.from(scrollCoordinates.values()).reduce((acc, coordinates) => add(acc, coordinates), defaultCoordinates) : getScrollOffsets(elements);
|
|
2183
|
-
}
|
|
2184
|
-
return defaultCoordinates;
|
|
2185
|
-
}, [elements, scrollCoordinates]);
|
|
2186
|
-
}
|
|
2187
|
-
function useScrollOffsetsDelta(scrollOffsets, dependencies) {
|
|
2188
|
-
if (dependencies === void 0) {
|
|
2189
|
-
dependencies = [];
|
|
2190
|
-
}
|
|
2191
|
-
const initialScrollOffsets = React.useRef(null);
|
|
2192
|
-
React.useEffect(
|
|
2193
|
-
() => {
|
|
2194
|
-
initialScrollOffsets.current = null;
|
|
2195
|
-
},
|
|
2196
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2197
|
-
dependencies
|
|
2198
|
-
);
|
|
2199
|
-
React.useEffect(() => {
|
|
2200
|
-
const hasScrollOffsets = scrollOffsets !== defaultCoordinates;
|
|
2201
|
-
if (hasScrollOffsets && !initialScrollOffsets.current) {
|
|
2202
|
-
initialScrollOffsets.current = scrollOffsets;
|
|
2203
|
-
}
|
|
2204
|
-
if (!hasScrollOffsets && initialScrollOffsets.current) {
|
|
2205
|
-
initialScrollOffsets.current = null;
|
|
2206
|
-
}
|
|
2207
|
-
}, [scrollOffsets]);
|
|
2208
|
-
return initialScrollOffsets.current ? subtract(scrollOffsets, initialScrollOffsets.current) : defaultCoordinates;
|
|
2209
|
-
}
|
|
2210
|
-
function useSensorSetup(sensors) {
|
|
2211
|
-
React.useEffect(
|
|
2212
|
-
() => {
|
|
2213
|
-
if (!canUseDOM) {
|
|
2214
|
-
return;
|
|
2215
|
-
}
|
|
2216
|
-
const teardownFns = sensors.map((_ref) => {
|
|
2217
|
-
let {
|
|
2218
|
-
sensor
|
|
2219
|
-
} = _ref;
|
|
2220
|
-
return sensor.setup == null ? void 0 : sensor.setup();
|
|
2221
|
-
});
|
|
2222
|
-
return () => {
|
|
2223
|
-
for (const teardown of teardownFns) {
|
|
2224
|
-
teardown == null ? void 0 : teardown();
|
|
2225
|
-
}
|
|
2226
|
-
};
|
|
2227
|
-
},
|
|
2228
|
-
// TO-DO: Sensors length could theoretically change which would not be a valid dependency
|
|
2229
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2230
|
-
sensors.map((_ref2) => {
|
|
2231
|
-
let {
|
|
2232
|
-
sensor
|
|
2233
|
-
} = _ref2;
|
|
2234
|
-
return sensor;
|
|
2235
|
-
})
|
|
2236
|
-
);
|
|
2237
|
-
}
|
|
2238
|
-
function useWindowRect(element) {
|
|
2239
|
-
return React.useMemo(() => element ? getWindowClientRect(element) : null, [element]);
|
|
2240
|
-
}
|
|
2241
|
-
const defaultValue$2 = [];
|
|
2242
|
-
function useRects(elements, measure) {
|
|
2243
|
-
if (measure === void 0) {
|
|
2244
|
-
measure = getClientRect;
|
|
2245
|
-
}
|
|
2246
|
-
const [firstElement] = elements;
|
|
2247
|
-
const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
|
|
2248
|
-
const [rects, setRects] = React.useState(defaultValue$2);
|
|
2249
|
-
function measureRects() {
|
|
2250
|
-
setRects(() => {
|
|
2251
|
-
if (!elements.length) {
|
|
2252
|
-
return defaultValue$2;
|
|
2253
|
-
}
|
|
2254
|
-
return elements.map((element) => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
|
|
2255
|
-
});
|
|
2256
|
-
}
|
|
2257
|
-
const resizeObserver = useResizeObserver({
|
|
2258
|
-
callback: measureRects
|
|
2259
|
-
});
|
|
2260
|
-
useIsomorphicLayoutEffect(() => {
|
|
2261
|
-
resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
|
2262
|
-
measureRects();
|
|
2263
|
-
elements.forEach((element) => resizeObserver == null ? void 0 : resizeObserver.observe(element));
|
|
2264
|
-
}, [elements]);
|
|
2265
|
-
return rects;
|
|
2266
|
-
}
|
|
2267
|
-
function getMeasurableNode(node) {
|
|
2268
|
-
if (!node) {
|
|
2269
|
-
return null;
|
|
2270
|
-
}
|
|
2271
|
-
if (node.children.length > 1) {
|
|
2272
|
-
return node;
|
|
2273
|
-
}
|
|
2274
|
-
const firstChild = node.children[0];
|
|
2275
|
-
return isHTMLElement(firstChild) ? firstChild : node;
|
|
2276
|
-
}
|
|
2277
|
-
function useDragOverlayMeasuring(_ref) {
|
|
2278
|
-
let {
|
|
2279
|
-
measure
|
|
2280
|
-
} = _ref;
|
|
2281
|
-
const [rect, setRect] = React.useState(null);
|
|
2282
|
-
const handleResize = React.useCallback((entries) => {
|
|
2283
|
-
for (const {
|
|
2284
|
-
target
|
|
2285
|
-
} of entries) {
|
|
2286
|
-
if (isHTMLElement(target)) {
|
|
2287
|
-
setRect((rect2) => {
|
|
2288
|
-
const newRect = measure(target);
|
|
2289
|
-
return rect2 ? {
|
|
2290
|
-
...rect2,
|
|
2291
|
-
width: newRect.width,
|
|
2292
|
-
height: newRect.height
|
|
2293
|
-
} : newRect;
|
|
2294
|
-
});
|
|
2295
|
-
break;
|
|
2296
|
-
}
|
|
2297
|
-
}
|
|
2298
|
-
}, [measure]);
|
|
2299
|
-
const resizeObserver = useResizeObserver({
|
|
2300
|
-
callback: handleResize
|
|
2301
|
-
});
|
|
2302
|
-
const handleNodeChange = React.useCallback((element) => {
|
|
2303
|
-
const node = getMeasurableNode(element);
|
|
2304
|
-
resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
|
2305
|
-
if (node) {
|
|
2306
|
-
resizeObserver == null ? void 0 : resizeObserver.observe(node);
|
|
2307
|
-
}
|
|
2308
|
-
setRect(node ? measure(node) : null);
|
|
2309
|
-
}, [measure, resizeObserver]);
|
|
2310
|
-
const [nodeRef, setRef] = useNodeRef(handleNodeChange);
|
|
2311
|
-
return React.useMemo(() => ({
|
|
2312
|
-
nodeRef,
|
|
2313
|
-
rect,
|
|
2314
|
-
setRef
|
|
2315
|
-
}), [rect, nodeRef, setRef]);
|
|
2316
|
-
}
|
|
2317
|
-
const defaultSensors = [{
|
|
2318
|
-
sensor: PointerSensor,
|
|
2319
|
-
options: {}
|
|
2320
|
-
}, {
|
|
2321
|
-
sensor: KeyboardSensor,
|
|
2322
|
-
options: {}
|
|
2323
|
-
}];
|
|
2324
|
-
const defaultData = {
|
|
2325
|
-
current: {}
|
|
2326
|
-
};
|
|
2327
|
-
const defaultMeasuringConfiguration = {
|
|
2328
|
-
draggable: {
|
|
2329
|
-
measure: getTransformAgnosticClientRect
|
|
2330
|
-
},
|
|
2331
|
-
droppable: {
|
|
2332
|
-
measure: getTransformAgnosticClientRect,
|
|
2333
|
-
strategy: MeasuringStrategy.WhileDragging,
|
|
2334
|
-
frequency: MeasuringFrequency.Optimized
|
|
2335
|
-
},
|
|
2336
|
-
dragOverlay: {
|
|
2337
|
-
measure: getClientRect
|
|
2338
|
-
}
|
|
2339
|
-
};
|
|
2340
|
-
class DroppableContainersMap extends Map {
|
|
2341
|
-
get(id) {
|
|
2342
|
-
var _super$get;
|
|
2343
|
-
return id != null ? (_super$get = super.get(id)) != null ? _super$get : void 0 : void 0;
|
|
2344
|
-
}
|
|
2345
|
-
toArray() {
|
|
2346
|
-
return Array.from(this.values());
|
|
2347
|
-
}
|
|
2348
|
-
getEnabled() {
|
|
2349
|
-
return this.toArray().filter((_ref) => {
|
|
2350
|
-
let {
|
|
2351
|
-
disabled
|
|
2352
|
-
} = _ref;
|
|
2353
|
-
return !disabled;
|
|
2354
|
-
});
|
|
2355
|
-
}
|
|
2356
|
-
getNodeFor(id) {
|
|
2357
|
-
var _this$get$node$curren, _this$get;
|
|
2358
|
-
return (_this$get$node$curren = (_this$get = this.get(id)) == null ? void 0 : _this$get.node.current) != null ? _this$get$node$curren : void 0;
|
|
2359
|
-
}
|
|
2360
|
-
}
|
|
2361
|
-
const defaultPublicContext = {
|
|
2362
|
-
activatorEvent: null,
|
|
2363
|
-
active: null,
|
|
2364
|
-
activeNode: null,
|
|
2365
|
-
activeNodeRect: null,
|
|
2366
|
-
collisions: null,
|
|
2367
|
-
containerNodeRect: null,
|
|
2368
|
-
draggableNodes: /* @__PURE__ */ new Map(),
|
|
2369
|
-
droppableRects: /* @__PURE__ */ new Map(),
|
|
2370
|
-
droppableContainers: /* @__PURE__ */ new DroppableContainersMap(),
|
|
2371
|
-
over: null,
|
|
2372
|
-
dragOverlay: {
|
|
2373
|
-
nodeRef: {
|
|
2374
|
-
current: null
|
|
2375
|
-
},
|
|
2376
|
-
rect: null,
|
|
2377
|
-
setRef: noop
|
|
2378
|
-
},
|
|
2379
|
-
scrollableAncestors: [],
|
|
2380
|
-
scrollableAncestorRects: [],
|
|
2381
|
-
measuringConfiguration: defaultMeasuringConfiguration,
|
|
2382
|
-
measureDroppableContainers: noop,
|
|
2383
|
-
windowRect: null,
|
|
2384
|
-
measuringScheduled: false
|
|
2385
|
-
};
|
|
2386
|
-
const defaultInternalContext = {
|
|
2387
|
-
activatorEvent: null,
|
|
2388
|
-
activators: [],
|
|
2389
|
-
active: null,
|
|
2390
|
-
activeNodeRect: null,
|
|
2391
|
-
ariaDescribedById: {
|
|
2392
|
-
draggable: ""
|
|
2393
|
-
},
|
|
2394
|
-
dispatch: noop,
|
|
2395
|
-
draggableNodes: /* @__PURE__ */ new Map(),
|
|
2396
|
-
over: null,
|
|
2397
|
-
measureDroppableContainers: noop
|
|
2398
|
-
};
|
|
2399
|
-
const InternalContext = /* @__PURE__ */ React.createContext(defaultInternalContext);
|
|
2400
|
-
const PublicContext = /* @__PURE__ */ React.createContext(defaultPublicContext);
|
|
2401
|
-
function getInitialState() {
|
|
2402
|
-
return {
|
|
2403
|
-
draggable: {
|
|
2404
|
-
active: null,
|
|
2405
|
-
initialCoordinates: {
|
|
2406
|
-
x: 0,
|
|
2407
|
-
y: 0
|
|
2408
|
-
},
|
|
2409
|
-
nodes: /* @__PURE__ */ new Map(),
|
|
2410
|
-
translate: {
|
|
2411
|
-
x: 0,
|
|
2412
|
-
y: 0
|
|
2413
|
-
}
|
|
2414
|
-
},
|
|
2415
|
-
droppable: {
|
|
2416
|
-
containers: new DroppableContainersMap()
|
|
2417
|
-
}
|
|
2418
|
-
};
|
|
2419
|
-
}
|
|
2420
|
-
function reducer(state, action) {
|
|
2421
|
-
switch (action.type) {
|
|
2422
|
-
case Action.DragStart:
|
|
2423
|
-
return {
|
|
2424
|
-
...state,
|
|
2425
|
-
draggable: {
|
|
2426
|
-
...state.draggable,
|
|
2427
|
-
initialCoordinates: action.initialCoordinates,
|
|
2428
|
-
active: action.active
|
|
2429
|
-
}
|
|
2430
|
-
};
|
|
2431
|
-
case Action.DragMove:
|
|
2432
|
-
if (state.draggable.active == null) {
|
|
2433
|
-
return state;
|
|
2434
|
-
}
|
|
2435
|
-
return {
|
|
2436
|
-
...state,
|
|
2437
|
-
draggable: {
|
|
2438
|
-
...state.draggable,
|
|
2439
|
-
translate: {
|
|
2440
|
-
x: action.coordinates.x - state.draggable.initialCoordinates.x,
|
|
2441
|
-
y: action.coordinates.y - state.draggable.initialCoordinates.y
|
|
2442
|
-
}
|
|
2443
|
-
}
|
|
2444
|
-
};
|
|
2445
|
-
case Action.DragEnd:
|
|
2446
|
-
case Action.DragCancel:
|
|
2447
|
-
return {
|
|
2448
|
-
...state,
|
|
2449
|
-
draggable: {
|
|
2450
|
-
...state.draggable,
|
|
2451
|
-
active: null,
|
|
2452
|
-
initialCoordinates: {
|
|
2453
|
-
x: 0,
|
|
2454
|
-
y: 0
|
|
2455
|
-
},
|
|
2456
|
-
translate: {
|
|
2457
|
-
x: 0,
|
|
2458
|
-
y: 0
|
|
2459
|
-
}
|
|
2460
|
-
}
|
|
2461
|
-
};
|
|
2462
|
-
case Action.RegisterDroppable: {
|
|
2463
|
-
const {
|
|
2464
|
-
element
|
|
2465
|
-
} = action;
|
|
2466
|
-
const {
|
|
2467
|
-
id
|
|
2468
|
-
} = element;
|
|
2469
|
-
const containers = new DroppableContainersMap(state.droppable.containers);
|
|
2470
|
-
containers.set(id, element);
|
|
2471
|
-
return {
|
|
2472
|
-
...state,
|
|
2473
|
-
droppable: {
|
|
2474
|
-
...state.droppable,
|
|
2475
|
-
containers
|
|
2476
|
-
}
|
|
2477
|
-
};
|
|
2478
|
-
}
|
|
2479
|
-
case Action.SetDroppableDisabled: {
|
|
2480
|
-
const {
|
|
2481
|
-
id,
|
|
2482
|
-
key,
|
|
2483
|
-
disabled
|
|
2484
|
-
} = action;
|
|
2485
|
-
const element = state.droppable.containers.get(id);
|
|
2486
|
-
if (!element || key !== element.key) {
|
|
2487
|
-
return state;
|
|
2488
|
-
}
|
|
2489
|
-
const containers = new DroppableContainersMap(state.droppable.containers);
|
|
2490
|
-
containers.set(id, {
|
|
2491
|
-
...element,
|
|
2492
|
-
disabled
|
|
2493
|
-
});
|
|
2494
|
-
return {
|
|
2495
|
-
...state,
|
|
2496
|
-
droppable: {
|
|
2497
|
-
...state.droppable,
|
|
2498
|
-
containers
|
|
2499
|
-
}
|
|
2500
|
-
};
|
|
2501
|
-
}
|
|
2502
|
-
case Action.UnregisterDroppable: {
|
|
2503
|
-
const {
|
|
2504
|
-
id,
|
|
2505
|
-
key
|
|
2506
|
-
} = action;
|
|
2507
|
-
const element = state.droppable.containers.get(id);
|
|
2508
|
-
if (!element || key !== element.key) {
|
|
2509
|
-
return state;
|
|
2510
|
-
}
|
|
2511
|
-
const containers = new DroppableContainersMap(state.droppable.containers);
|
|
2512
|
-
containers.delete(id);
|
|
2513
|
-
return {
|
|
2514
|
-
...state,
|
|
2515
|
-
droppable: {
|
|
2516
|
-
...state.droppable,
|
|
2517
|
-
containers
|
|
2518
|
-
}
|
|
2519
|
-
};
|
|
2520
|
-
}
|
|
2521
|
-
default: {
|
|
2522
|
-
return state;
|
|
2523
|
-
}
|
|
2524
|
-
}
|
|
2525
|
-
}
|
|
2526
|
-
function RestoreFocus(_ref) {
|
|
2527
|
-
let {
|
|
2528
|
-
disabled
|
|
2529
|
-
} = _ref;
|
|
2530
|
-
const {
|
|
2531
|
-
active,
|
|
2532
|
-
activatorEvent,
|
|
2533
|
-
draggableNodes
|
|
2534
|
-
} = React.useContext(InternalContext);
|
|
2535
|
-
const previousActivatorEvent = usePrevious(activatorEvent);
|
|
2536
|
-
const previousActiveId = usePrevious(active == null ? void 0 : active.id);
|
|
2537
|
-
React.useEffect(() => {
|
|
2538
|
-
if (disabled) {
|
|
2539
|
-
return;
|
|
2540
|
-
}
|
|
2541
|
-
if (!activatorEvent && previousActivatorEvent && previousActiveId != null) {
|
|
2542
|
-
if (!isKeyboardEvent(previousActivatorEvent)) {
|
|
2543
|
-
return;
|
|
2544
|
-
}
|
|
2545
|
-
if (document.activeElement === previousActivatorEvent.target) {
|
|
2546
|
-
return;
|
|
2547
|
-
}
|
|
2548
|
-
const draggableNode = draggableNodes.get(previousActiveId);
|
|
2549
|
-
if (!draggableNode) {
|
|
2550
|
-
return;
|
|
2551
|
-
}
|
|
2552
|
-
const {
|
|
2553
|
-
activatorNode,
|
|
2554
|
-
node
|
|
2555
|
-
} = draggableNode;
|
|
2556
|
-
if (!activatorNode.current && !node.current) {
|
|
2557
|
-
return;
|
|
2558
|
-
}
|
|
2559
|
-
requestAnimationFrame(() => {
|
|
2560
|
-
for (const element of [activatorNode.current, node.current]) {
|
|
2561
|
-
if (!element) {
|
|
2562
|
-
continue;
|
|
2563
|
-
}
|
|
2564
|
-
const focusableNode = findFirstFocusableNode(element);
|
|
2565
|
-
if (focusableNode) {
|
|
2566
|
-
focusableNode.focus();
|
|
2567
|
-
break;
|
|
2568
|
-
}
|
|
2569
|
-
}
|
|
2570
|
-
});
|
|
2571
|
-
}
|
|
2572
|
-
}, [activatorEvent, disabled, draggableNodes, previousActiveId, previousActivatorEvent]);
|
|
2573
|
-
return null;
|
|
2574
|
-
}
|
|
2575
|
-
function applyModifiers(modifiers, _ref) {
|
|
2576
|
-
let {
|
|
2577
|
-
transform,
|
|
2578
|
-
...args
|
|
2579
|
-
} = _ref;
|
|
2580
|
-
return modifiers != null && modifiers.length ? modifiers.reduce((accumulator, modifier) => {
|
|
2581
|
-
return modifier({
|
|
2582
|
-
transform: accumulator,
|
|
2583
|
-
...args
|
|
2584
|
-
});
|
|
2585
|
-
}, transform) : transform;
|
|
2586
|
-
}
|
|
2587
|
-
function useMeasuringConfiguration(config) {
|
|
2588
|
-
return React.useMemo(
|
|
2589
|
-
() => ({
|
|
2590
|
-
draggable: {
|
|
2591
|
-
...defaultMeasuringConfiguration.draggable,
|
|
2592
|
-
...config == null ? void 0 : config.draggable
|
|
2593
|
-
},
|
|
2594
|
-
droppable: {
|
|
2595
|
-
...defaultMeasuringConfiguration.droppable,
|
|
2596
|
-
...config == null ? void 0 : config.droppable
|
|
2597
|
-
},
|
|
2598
|
-
dragOverlay: {
|
|
2599
|
-
...defaultMeasuringConfiguration.dragOverlay,
|
|
2600
|
-
...config == null ? void 0 : config.dragOverlay
|
|
2601
|
-
}
|
|
2602
|
-
}),
|
|
2603
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2604
|
-
[config == null ? void 0 : config.draggable, config == null ? void 0 : config.droppable, config == null ? void 0 : config.dragOverlay]
|
|
2605
|
-
);
|
|
2606
|
-
}
|
|
2607
|
-
function useLayoutShiftScrollCompensation(_ref) {
|
|
2608
|
-
let {
|
|
2609
|
-
activeNode,
|
|
2610
|
-
measure,
|
|
2611
|
-
initialRect,
|
|
2612
|
-
config = true
|
|
2613
|
-
} = _ref;
|
|
2614
|
-
const initialized = React.useRef(false);
|
|
2615
|
-
const {
|
|
2616
|
-
x,
|
|
2617
|
-
y
|
|
2618
|
-
} = typeof config === "boolean" ? {
|
|
2619
|
-
x: config,
|
|
2620
|
-
y: config
|
|
2621
|
-
} : config;
|
|
2622
|
-
useIsomorphicLayoutEffect(() => {
|
|
2623
|
-
const disabled = !x && !y;
|
|
2624
|
-
if (disabled || !activeNode) {
|
|
2625
|
-
initialized.current = false;
|
|
2626
|
-
return;
|
|
2627
|
-
}
|
|
2628
|
-
if (initialized.current || !initialRect) {
|
|
2629
|
-
return;
|
|
2630
|
-
}
|
|
2631
|
-
const node = activeNode == null ? void 0 : activeNode.node.current;
|
|
2632
|
-
if (!node || node.isConnected === false) {
|
|
2633
|
-
return;
|
|
2634
|
-
}
|
|
2635
|
-
const rect = measure(node);
|
|
2636
|
-
const rectDelta = getRectDelta(rect, initialRect);
|
|
2637
|
-
if (!x) {
|
|
2638
|
-
rectDelta.x = 0;
|
|
2639
|
-
}
|
|
2640
|
-
if (!y) {
|
|
2641
|
-
rectDelta.y = 0;
|
|
2642
|
-
}
|
|
2643
|
-
initialized.current = true;
|
|
2644
|
-
if (Math.abs(rectDelta.x) > 0 || Math.abs(rectDelta.y) > 0) {
|
|
2645
|
-
const firstScrollableAncestor = getFirstScrollableAncestor(node);
|
|
2646
|
-
if (firstScrollableAncestor) {
|
|
2647
|
-
firstScrollableAncestor.scrollBy({
|
|
2648
|
-
top: rectDelta.y,
|
|
2649
|
-
left: rectDelta.x
|
|
2650
|
-
});
|
|
2651
|
-
}
|
|
2652
|
-
}
|
|
2653
|
-
}, [activeNode, x, y, initialRect, measure]);
|
|
2654
|
-
}
|
|
2655
|
-
const ActiveDraggableContext = /* @__PURE__ */ React.createContext({
|
|
2656
|
-
...defaultCoordinates,
|
|
2657
|
-
scaleX: 1,
|
|
2658
|
-
scaleY: 1
|
|
2659
|
-
});
|
|
2660
|
-
var Status;
|
|
2661
|
-
(function(Status2) {
|
|
2662
|
-
Status2[Status2["Uninitialized"] = 0] = "Uninitialized";
|
|
2663
|
-
Status2[Status2["Initializing"] = 1] = "Initializing";
|
|
2664
|
-
Status2[Status2["Initialized"] = 2] = "Initialized";
|
|
2665
|
-
})(Status || (Status = {}));
|
|
2666
|
-
const DndContext = /* @__PURE__ */ React.memo(function DndContext2(_ref) {
|
|
2667
|
-
var _sensorContext$curren, _dragOverlay$nodeRef$, _dragOverlay$rect, _over$rect;
|
|
2668
|
-
let {
|
|
2669
|
-
id,
|
|
2670
|
-
accessibility,
|
|
2671
|
-
autoScroll = true,
|
|
2672
|
-
children,
|
|
2673
|
-
sensors = defaultSensors,
|
|
2674
|
-
collisionDetection = rectIntersection,
|
|
2675
|
-
measuring,
|
|
2676
|
-
modifiers,
|
|
2677
|
-
...props
|
|
2678
|
-
} = _ref;
|
|
2679
|
-
const store = React.useReducer(reducer, void 0, getInitialState);
|
|
2680
|
-
const [state, dispatch] = store;
|
|
2681
|
-
const [dispatchMonitorEvent, registerMonitorListener] = useDndMonitorProvider();
|
|
2682
|
-
const [status, setStatus] = React.useState(Status.Uninitialized);
|
|
2683
|
-
const isInitialized = status === Status.Initialized;
|
|
2684
|
-
const {
|
|
2685
|
-
draggable: {
|
|
2686
|
-
active: activeId,
|
|
2687
|
-
nodes: draggableNodes,
|
|
2688
|
-
translate
|
|
2689
|
-
},
|
|
2690
|
-
droppable: {
|
|
2691
|
-
containers: droppableContainers
|
|
2692
|
-
}
|
|
2693
|
-
} = state;
|
|
2694
|
-
const node = activeId != null ? draggableNodes.get(activeId) : null;
|
|
2695
|
-
const activeRects = React.useRef({
|
|
2696
|
-
initial: null,
|
|
2697
|
-
translated: null
|
|
2698
|
-
});
|
|
2699
|
-
const active = React.useMemo(() => {
|
|
2700
|
-
var _node$data;
|
|
2701
|
-
return activeId != null ? {
|
|
2702
|
-
id: activeId,
|
|
2703
|
-
// It's possible for the active node to unmount while dragging
|
|
2704
|
-
data: (_node$data = node == null ? void 0 : node.data) != null ? _node$data : defaultData,
|
|
2705
|
-
rect: activeRects
|
|
2706
|
-
} : null;
|
|
2707
|
-
}, [activeId, node]);
|
|
2708
|
-
const activeRef = React.useRef(null);
|
|
2709
|
-
const [activeSensor, setActiveSensor] = React.useState(null);
|
|
2710
|
-
const [activatorEvent, setActivatorEvent] = React.useState(null);
|
|
2711
|
-
const latestProps = useLatestValue(props, Object.values(props));
|
|
2712
|
-
const draggableDescribedById = useUniqueId("DndDescribedBy", id);
|
|
2713
|
-
const enabledDroppableContainers = React.useMemo(() => droppableContainers.getEnabled(), [droppableContainers]);
|
|
2714
|
-
const measuringConfiguration = useMeasuringConfiguration(measuring);
|
|
2715
|
-
const {
|
|
2716
|
-
droppableRects,
|
|
2717
|
-
measureDroppableContainers,
|
|
2718
|
-
measuringScheduled
|
|
2719
|
-
} = useDroppableMeasuring(enabledDroppableContainers, {
|
|
2720
|
-
dragging: isInitialized,
|
|
2721
|
-
dependencies: [translate.x, translate.y],
|
|
2722
|
-
config: measuringConfiguration.droppable
|
|
2723
|
-
});
|
|
2724
|
-
const activeNode = useCachedNode(draggableNodes, activeId);
|
|
2725
|
-
const activationCoordinates = React.useMemo(() => activatorEvent ? getEventCoordinates(activatorEvent) : null, [activatorEvent]);
|
|
2726
|
-
const autoScrollOptions = getAutoScrollerOptions();
|
|
2727
|
-
const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
|
|
2728
|
-
useLayoutShiftScrollCompensation({
|
|
2729
|
-
activeNode: activeId != null ? draggableNodes.get(activeId) : null,
|
|
2730
|
-
config: autoScrollOptions.layoutShiftCompensation,
|
|
2731
|
-
initialRect: initialActiveNodeRect,
|
|
2732
|
-
measure: measuringConfiguration.draggable.measure
|
|
2733
|
-
});
|
|
2734
|
-
const activeNodeRect = useRect(activeNode, measuringConfiguration.draggable.measure, initialActiveNodeRect);
|
|
2735
|
-
const containerNodeRect = useRect(activeNode ? activeNode.parentElement : null);
|
|
2736
|
-
const sensorContext = React.useRef({
|
|
2737
|
-
activatorEvent: null,
|
|
2738
|
-
active: null,
|
|
2739
|
-
activeNode,
|
|
2740
|
-
collisionRect: null,
|
|
2741
|
-
collisions: null,
|
|
2742
|
-
droppableRects,
|
|
2743
|
-
draggableNodes,
|
|
2744
|
-
draggingNode: null,
|
|
2745
|
-
draggingNodeRect: null,
|
|
2746
|
-
droppableContainers,
|
|
2747
|
-
over: null,
|
|
2748
|
-
scrollableAncestors: [],
|
|
2749
|
-
scrollAdjustedTranslate: null
|
|
2750
|
-
});
|
|
2751
|
-
const overNode = droppableContainers.getNodeFor((_sensorContext$curren = sensorContext.current.over) == null ? void 0 : _sensorContext$curren.id);
|
|
2752
|
-
const dragOverlay = useDragOverlayMeasuring({
|
|
2753
|
-
measure: measuringConfiguration.dragOverlay.measure
|
|
2754
|
-
});
|
|
2755
|
-
const draggingNode = (_dragOverlay$nodeRef$ = dragOverlay.nodeRef.current) != null ? _dragOverlay$nodeRef$ : activeNode;
|
|
2756
|
-
const draggingNodeRect = isInitialized ? (_dragOverlay$rect = dragOverlay.rect) != null ? _dragOverlay$rect : activeNodeRect : null;
|
|
2757
|
-
const usesDragOverlay = Boolean(dragOverlay.nodeRef.current && dragOverlay.rect);
|
|
2758
|
-
const nodeRectDelta = useRectDelta(usesDragOverlay ? null : activeNodeRect);
|
|
2759
|
-
const windowRect = useWindowRect(draggingNode ? getWindow(draggingNode) : null);
|
|
2760
|
-
const scrollableAncestors = useScrollableAncestors(isInitialized ? overNode != null ? overNode : activeNode : null);
|
|
2761
|
-
const scrollableAncestorRects = useRects(scrollableAncestors);
|
|
2762
|
-
const modifiedTranslate = applyModifiers(modifiers, {
|
|
2763
|
-
transform: {
|
|
2764
|
-
x: translate.x - nodeRectDelta.x,
|
|
2765
|
-
y: translate.y - nodeRectDelta.y,
|
|
2766
|
-
scaleX: 1,
|
|
2767
|
-
scaleY: 1
|
|
2768
|
-
},
|
|
2769
|
-
activatorEvent,
|
|
2770
|
-
active,
|
|
2771
|
-
activeNodeRect,
|
|
2772
|
-
containerNodeRect,
|
|
2773
|
-
draggingNodeRect,
|
|
2774
|
-
over: sensorContext.current.over,
|
|
2775
|
-
overlayNodeRect: dragOverlay.rect,
|
|
2776
|
-
scrollableAncestors,
|
|
2777
|
-
scrollableAncestorRects,
|
|
2778
|
-
windowRect
|
|
2779
|
-
});
|
|
2780
|
-
const pointerCoordinates = activationCoordinates ? add(activationCoordinates, translate) : null;
|
|
2781
|
-
const scrollOffsets = useScrollOffsets(scrollableAncestors);
|
|
2782
|
-
const scrollAdjustment = useScrollOffsetsDelta(scrollOffsets);
|
|
2783
|
-
const activeNodeScrollDelta = useScrollOffsetsDelta(scrollOffsets, [activeNodeRect]);
|
|
2784
|
-
const scrollAdjustedTranslate = add(modifiedTranslate, scrollAdjustment);
|
|
2785
|
-
const collisionRect = draggingNodeRect ? getAdjustedRect(draggingNodeRect, modifiedTranslate) : null;
|
|
2786
|
-
const collisions = active && collisionRect ? collisionDetection({
|
|
2787
|
-
active,
|
|
2788
|
-
collisionRect,
|
|
2789
|
-
droppableRects,
|
|
2790
|
-
droppableContainers: enabledDroppableContainers,
|
|
2791
|
-
pointerCoordinates
|
|
2792
|
-
}) : null;
|
|
2793
|
-
const overId = getFirstCollision(collisions, "id");
|
|
2794
|
-
const [over, setOver] = React.useState(null);
|
|
2795
|
-
const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
|
|
2796
|
-
const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
|
|
2797
|
-
const activeSensorRef = React.useRef(null);
|
|
2798
|
-
const instantiateSensor = React.useCallback(
|
|
2799
|
-
(event, _ref2) => {
|
|
2800
|
-
let {
|
|
2801
|
-
sensor: Sensor,
|
|
2802
|
-
options
|
|
2803
|
-
} = _ref2;
|
|
2804
|
-
if (activeRef.current == null) {
|
|
2805
|
-
return;
|
|
2806
|
-
}
|
|
2807
|
-
const activeNode2 = draggableNodes.get(activeRef.current);
|
|
2808
|
-
if (!activeNode2) {
|
|
2809
|
-
return;
|
|
2810
|
-
}
|
|
2811
|
-
const activatorEvent2 = event.nativeEvent;
|
|
2812
|
-
const sensorInstance = new Sensor({
|
|
2813
|
-
active: activeRef.current,
|
|
2814
|
-
activeNode: activeNode2,
|
|
2815
|
-
event: activatorEvent2,
|
|
2816
|
-
options,
|
|
2817
|
-
// Sensors need to be instantiated with refs for arguments that change over time
|
|
2818
|
-
// otherwise they are frozen in time with the stale arguments
|
|
2819
|
-
context: sensorContext,
|
|
2820
|
-
onAbort(id2) {
|
|
2821
|
-
const draggableNode = draggableNodes.get(id2);
|
|
2822
|
-
if (!draggableNode) {
|
|
2823
|
-
return;
|
|
2824
|
-
}
|
|
2825
|
-
const {
|
|
2826
|
-
onDragAbort
|
|
2827
|
-
} = latestProps.current;
|
|
2828
|
-
const event2 = {
|
|
2829
|
-
id: id2
|
|
2830
|
-
};
|
|
2831
|
-
onDragAbort == null ? void 0 : onDragAbort(event2);
|
|
2832
|
-
dispatchMonitorEvent({
|
|
2833
|
-
type: "onDragAbort",
|
|
2834
|
-
event: event2
|
|
2835
|
-
});
|
|
2836
|
-
},
|
|
2837
|
-
onPending(id2, constraint, initialCoordinates, offset) {
|
|
2838
|
-
const draggableNode = draggableNodes.get(id2);
|
|
2839
|
-
if (!draggableNode) {
|
|
2840
|
-
return;
|
|
2841
|
-
}
|
|
2842
|
-
const {
|
|
2843
|
-
onDragPending
|
|
2844
|
-
} = latestProps.current;
|
|
2845
|
-
const event2 = {
|
|
2846
|
-
id: id2,
|
|
2847
|
-
constraint,
|
|
2848
|
-
initialCoordinates,
|
|
2849
|
-
offset
|
|
2850
|
-
};
|
|
2851
|
-
onDragPending == null ? void 0 : onDragPending(event2);
|
|
2852
|
-
dispatchMonitorEvent({
|
|
2853
|
-
type: "onDragPending",
|
|
2854
|
-
event: event2
|
|
2855
|
-
});
|
|
2856
|
-
},
|
|
2857
|
-
onStart(initialCoordinates) {
|
|
2858
|
-
const id2 = activeRef.current;
|
|
2859
|
-
if (id2 == null) {
|
|
2860
|
-
return;
|
|
2861
|
-
}
|
|
2862
|
-
const draggableNode = draggableNodes.get(id2);
|
|
2863
|
-
if (!draggableNode) {
|
|
2864
|
-
return;
|
|
2865
|
-
}
|
|
2866
|
-
const {
|
|
2867
|
-
onDragStart
|
|
2868
|
-
} = latestProps.current;
|
|
2869
|
-
const event2 = {
|
|
2870
|
-
activatorEvent: activatorEvent2,
|
|
2871
|
-
active: {
|
|
2872
|
-
id: id2,
|
|
2873
|
-
data: draggableNode.data,
|
|
2874
|
-
rect: activeRects
|
|
2875
|
-
}
|
|
2876
|
-
};
|
|
2877
|
-
reactDom.unstable_batchedUpdates(() => {
|
|
2878
|
-
onDragStart == null ? void 0 : onDragStart(event2);
|
|
2879
|
-
setStatus(Status.Initializing);
|
|
2880
|
-
dispatch({
|
|
2881
|
-
type: Action.DragStart,
|
|
2882
|
-
initialCoordinates,
|
|
2883
|
-
active: id2
|
|
2884
|
-
});
|
|
2885
|
-
dispatchMonitorEvent({
|
|
2886
|
-
type: "onDragStart",
|
|
2887
|
-
event: event2
|
|
2888
|
-
});
|
|
2889
|
-
setActiveSensor(activeSensorRef.current);
|
|
2890
|
-
setActivatorEvent(activatorEvent2);
|
|
2891
|
-
});
|
|
2892
|
-
},
|
|
2893
|
-
onMove(coordinates) {
|
|
2894
|
-
dispatch({
|
|
2895
|
-
type: Action.DragMove,
|
|
2896
|
-
coordinates
|
|
2897
|
-
});
|
|
2898
|
-
},
|
|
2899
|
-
onEnd: createHandler(Action.DragEnd),
|
|
2900
|
-
onCancel: createHandler(Action.DragCancel)
|
|
2901
|
-
});
|
|
2902
|
-
activeSensorRef.current = sensorInstance;
|
|
2903
|
-
function createHandler(type) {
|
|
2904
|
-
return async function handler() {
|
|
2905
|
-
const {
|
|
2906
|
-
active: active2,
|
|
2907
|
-
collisions: collisions2,
|
|
2908
|
-
over: over2,
|
|
2909
|
-
scrollAdjustedTranslate: scrollAdjustedTranslate2
|
|
2910
|
-
} = sensorContext.current;
|
|
2911
|
-
let event2 = null;
|
|
2912
|
-
if (active2 && scrollAdjustedTranslate2) {
|
|
2913
|
-
const {
|
|
2914
|
-
cancelDrop
|
|
2915
|
-
} = latestProps.current;
|
|
2916
|
-
event2 = {
|
|
2917
|
-
activatorEvent: activatorEvent2,
|
|
2918
|
-
active: active2,
|
|
2919
|
-
collisions: collisions2,
|
|
2920
|
-
delta: scrollAdjustedTranslate2,
|
|
2921
|
-
over: over2
|
|
2922
|
-
};
|
|
2923
|
-
if (type === Action.DragEnd && typeof cancelDrop === "function") {
|
|
2924
|
-
const shouldCancel = await Promise.resolve(cancelDrop(event2));
|
|
2925
|
-
if (shouldCancel) {
|
|
2926
|
-
type = Action.DragCancel;
|
|
2927
|
-
}
|
|
2928
|
-
}
|
|
2929
|
-
}
|
|
2930
|
-
activeRef.current = null;
|
|
2931
|
-
reactDom.unstable_batchedUpdates(() => {
|
|
2932
|
-
dispatch({
|
|
2933
|
-
type
|
|
2934
|
-
});
|
|
2935
|
-
setStatus(Status.Uninitialized);
|
|
2936
|
-
setOver(null);
|
|
2937
|
-
setActiveSensor(null);
|
|
2938
|
-
setActivatorEvent(null);
|
|
2939
|
-
activeSensorRef.current = null;
|
|
2940
|
-
const eventName = type === Action.DragEnd ? "onDragEnd" : "onDragCancel";
|
|
2941
|
-
if (event2) {
|
|
2942
|
-
const handler2 = latestProps.current[eventName];
|
|
2943
|
-
handler2 == null ? void 0 : handler2(event2);
|
|
2944
|
-
dispatchMonitorEvent({
|
|
2945
|
-
type: eventName,
|
|
2946
|
-
event: event2
|
|
2947
|
-
});
|
|
2948
|
-
}
|
|
2949
|
-
});
|
|
2950
|
-
};
|
|
2951
|
-
}
|
|
2952
|
-
},
|
|
2953
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2954
|
-
[draggableNodes]
|
|
2955
|
-
);
|
|
2956
|
-
const bindActivatorToSensorInstantiator = React.useCallback((handler, sensor) => {
|
|
2957
|
-
return (event, active2) => {
|
|
2958
|
-
const nativeEvent = event.nativeEvent;
|
|
2959
|
-
const activeDraggableNode = draggableNodes.get(active2);
|
|
2960
|
-
if (
|
|
2961
|
-
// Another sensor is already instantiating
|
|
2962
|
-
activeRef.current !== null || // No active draggable
|
|
2963
|
-
!activeDraggableNode || // Event has already been captured
|
|
2964
|
-
nativeEvent.dndKit || nativeEvent.defaultPrevented
|
|
2965
|
-
) {
|
|
2966
|
-
return;
|
|
2967
|
-
}
|
|
2968
|
-
const activationContext = {
|
|
2969
|
-
active: activeDraggableNode
|
|
2970
|
-
};
|
|
2971
|
-
const shouldActivate = handler(event, sensor.options, activationContext);
|
|
2972
|
-
if (shouldActivate === true) {
|
|
2973
|
-
nativeEvent.dndKit = {
|
|
2974
|
-
capturedBy: sensor.sensor
|
|
2975
|
-
};
|
|
2976
|
-
activeRef.current = active2;
|
|
2977
|
-
instantiateSensor(event, sensor);
|
|
2978
|
-
}
|
|
2979
|
-
};
|
|
2980
|
-
}, [draggableNodes, instantiateSensor]);
|
|
2981
|
-
const activators = useCombineActivators(sensors, bindActivatorToSensorInstantiator);
|
|
2982
|
-
useSensorSetup(sensors);
|
|
2983
|
-
useIsomorphicLayoutEffect(() => {
|
|
2984
|
-
if (activeNodeRect && status === Status.Initializing) {
|
|
2985
|
-
setStatus(Status.Initialized);
|
|
2986
|
-
}
|
|
2987
|
-
}, [activeNodeRect, status]);
|
|
2988
|
-
React.useEffect(
|
|
2989
|
-
() => {
|
|
2990
|
-
const {
|
|
2991
|
-
onDragMove
|
|
2992
|
-
} = latestProps.current;
|
|
2993
|
-
const {
|
|
2994
|
-
active: active2,
|
|
2995
|
-
activatorEvent: activatorEvent2,
|
|
2996
|
-
collisions: collisions2,
|
|
2997
|
-
over: over2
|
|
2998
|
-
} = sensorContext.current;
|
|
2999
|
-
if (!active2 || !activatorEvent2) {
|
|
3000
|
-
return;
|
|
3001
|
-
}
|
|
3002
|
-
const event = {
|
|
3003
|
-
active: active2,
|
|
3004
|
-
activatorEvent: activatorEvent2,
|
|
3005
|
-
collisions: collisions2,
|
|
3006
|
-
delta: {
|
|
3007
|
-
x: scrollAdjustedTranslate.x,
|
|
3008
|
-
y: scrollAdjustedTranslate.y
|
|
3009
|
-
},
|
|
3010
|
-
over: over2
|
|
3011
|
-
};
|
|
3012
|
-
reactDom.unstable_batchedUpdates(() => {
|
|
3013
|
-
onDragMove == null ? void 0 : onDragMove(event);
|
|
3014
|
-
dispatchMonitorEvent({
|
|
3015
|
-
type: "onDragMove",
|
|
3016
|
-
event
|
|
3017
|
-
});
|
|
3018
|
-
});
|
|
3019
|
-
},
|
|
3020
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3021
|
-
[scrollAdjustedTranslate.x, scrollAdjustedTranslate.y]
|
|
3022
|
-
);
|
|
3023
|
-
React.useEffect(
|
|
3024
|
-
() => {
|
|
3025
|
-
const {
|
|
3026
|
-
active: active2,
|
|
3027
|
-
activatorEvent: activatorEvent2,
|
|
3028
|
-
collisions: collisions2,
|
|
3029
|
-
droppableContainers: droppableContainers2,
|
|
3030
|
-
scrollAdjustedTranslate: scrollAdjustedTranslate2
|
|
3031
|
-
} = sensorContext.current;
|
|
3032
|
-
if (!active2 || activeRef.current == null || !activatorEvent2 || !scrollAdjustedTranslate2) {
|
|
3033
|
-
return;
|
|
3034
|
-
}
|
|
3035
|
-
const {
|
|
3036
|
-
onDragOver
|
|
3037
|
-
} = latestProps.current;
|
|
3038
|
-
const overContainer = droppableContainers2.get(overId);
|
|
3039
|
-
const over2 = overContainer && overContainer.rect.current ? {
|
|
3040
|
-
id: overContainer.id,
|
|
3041
|
-
rect: overContainer.rect.current,
|
|
3042
|
-
data: overContainer.data,
|
|
3043
|
-
disabled: overContainer.disabled
|
|
3044
|
-
} : null;
|
|
3045
|
-
const event = {
|
|
3046
|
-
active: active2,
|
|
3047
|
-
activatorEvent: activatorEvent2,
|
|
3048
|
-
collisions: collisions2,
|
|
3049
|
-
delta: {
|
|
3050
|
-
x: scrollAdjustedTranslate2.x,
|
|
3051
|
-
y: scrollAdjustedTranslate2.y
|
|
3052
|
-
},
|
|
3053
|
-
over: over2
|
|
3054
|
-
};
|
|
3055
|
-
reactDom.unstable_batchedUpdates(() => {
|
|
3056
|
-
setOver(over2);
|
|
3057
|
-
onDragOver == null ? void 0 : onDragOver(event);
|
|
3058
|
-
dispatchMonitorEvent({
|
|
3059
|
-
type: "onDragOver",
|
|
3060
|
-
event
|
|
3061
|
-
});
|
|
3062
|
-
});
|
|
3063
|
-
},
|
|
3064
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3065
|
-
[overId]
|
|
3066
|
-
);
|
|
3067
|
-
useIsomorphicLayoutEffect(() => {
|
|
3068
|
-
sensorContext.current = {
|
|
3069
|
-
activatorEvent,
|
|
3070
|
-
active,
|
|
3071
|
-
activeNode,
|
|
3072
|
-
collisionRect,
|
|
3073
|
-
collisions,
|
|
3074
|
-
droppableRects,
|
|
3075
|
-
draggableNodes,
|
|
3076
|
-
draggingNode,
|
|
3077
|
-
draggingNodeRect,
|
|
3078
|
-
droppableContainers,
|
|
3079
|
-
over,
|
|
3080
|
-
scrollableAncestors,
|
|
3081
|
-
scrollAdjustedTranslate
|
|
3082
|
-
};
|
|
3083
|
-
activeRects.current = {
|
|
3084
|
-
initial: draggingNodeRect,
|
|
3085
|
-
translated: collisionRect
|
|
3086
|
-
};
|
|
3087
|
-
}, [active, activeNode, collisions, collisionRect, draggableNodes, draggingNode, draggingNodeRect, droppableRects, droppableContainers, over, scrollableAncestors, scrollAdjustedTranslate]);
|
|
3088
|
-
useAutoScroller({
|
|
3089
|
-
...autoScrollOptions,
|
|
3090
|
-
delta: translate,
|
|
3091
|
-
draggingRect: collisionRect,
|
|
3092
|
-
pointerCoordinates,
|
|
3093
|
-
scrollableAncestors,
|
|
3094
|
-
scrollableAncestorRects
|
|
3095
|
-
});
|
|
3096
|
-
const publicContext = React.useMemo(() => {
|
|
3097
|
-
const context = {
|
|
3098
|
-
active,
|
|
3099
|
-
activeNode,
|
|
3100
|
-
activeNodeRect,
|
|
3101
|
-
activatorEvent,
|
|
3102
|
-
collisions,
|
|
3103
|
-
containerNodeRect,
|
|
3104
|
-
dragOverlay,
|
|
3105
|
-
draggableNodes,
|
|
3106
|
-
droppableContainers,
|
|
3107
|
-
droppableRects,
|
|
3108
|
-
over,
|
|
3109
|
-
measureDroppableContainers,
|
|
3110
|
-
scrollableAncestors,
|
|
3111
|
-
scrollableAncestorRects,
|
|
3112
|
-
measuringConfiguration,
|
|
3113
|
-
measuringScheduled,
|
|
3114
|
-
windowRect
|
|
3115
|
-
};
|
|
3116
|
-
return context;
|
|
3117
|
-
}, [active, activeNode, activeNodeRect, activatorEvent, collisions, containerNodeRect, dragOverlay, draggableNodes, droppableContainers, droppableRects, over, measureDroppableContainers, scrollableAncestors, scrollableAncestorRects, measuringConfiguration, measuringScheduled, windowRect]);
|
|
3118
|
-
const internalContext = React.useMemo(() => {
|
|
3119
|
-
const context = {
|
|
3120
|
-
activatorEvent,
|
|
3121
|
-
activators,
|
|
3122
|
-
active,
|
|
3123
|
-
activeNodeRect,
|
|
3124
|
-
ariaDescribedById: {
|
|
3125
|
-
draggable: draggableDescribedById
|
|
3126
|
-
},
|
|
3127
|
-
dispatch,
|
|
3128
|
-
draggableNodes,
|
|
3129
|
-
over,
|
|
3130
|
-
measureDroppableContainers
|
|
3131
|
-
};
|
|
3132
|
-
return context;
|
|
3133
|
-
}, [activatorEvent, activators, active, activeNodeRect, dispatch, draggableDescribedById, draggableNodes, over, measureDroppableContainers]);
|
|
3134
|
-
return React__default.default.createElement(DndMonitorContext.Provider, {
|
|
3135
|
-
value: registerMonitorListener
|
|
3136
|
-
}, React__default.default.createElement(InternalContext.Provider, {
|
|
3137
|
-
value: internalContext
|
|
3138
|
-
}, React__default.default.createElement(PublicContext.Provider, {
|
|
3139
|
-
value: publicContext
|
|
3140
|
-
}, React__default.default.createElement(ActiveDraggableContext.Provider, {
|
|
3141
|
-
value: transform
|
|
3142
|
-
}, children)), React__default.default.createElement(RestoreFocus, {
|
|
3143
|
-
disabled: (accessibility == null ? void 0 : accessibility.restoreFocus) === false
|
|
3144
|
-
})), React__default.default.createElement(Accessibility, {
|
|
3145
|
-
...accessibility,
|
|
3146
|
-
hiddenTextDescribedById: draggableDescribedById
|
|
3147
|
-
}));
|
|
3148
|
-
function getAutoScrollerOptions() {
|
|
3149
|
-
const activeSensorDisablesAutoscroll = (activeSensor == null ? void 0 : activeSensor.autoScrollEnabled) === false;
|
|
3150
|
-
const autoScrollGloballyDisabled = typeof autoScroll === "object" ? autoScroll.enabled === false : autoScroll === false;
|
|
3151
|
-
const enabled = isInitialized && !activeSensorDisablesAutoscroll && !autoScrollGloballyDisabled;
|
|
3152
|
-
if (typeof autoScroll === "object") {
|
|
3153
|
-
return {
|
|
3154
|
-
...autoScroll,
|
|
3155
|
-
enabled
|
|
3156
|
-
};
|
|
3157
|
-
}
|
|
3158
|
-
return {
|
|
3159
|
-
enabled
|
|
3160
|
-
};
|
|
3161
|
-
}
|
|
3162
|
-
});
|
|
3163
|
-
const PublicationState = ({
|
|
3164
|
-
isPublished,
|
|
3165
|
-
hasDraftAndPublish
|
|
3166
|
-
}) => {
|
|
3167
|
-
const { translate } = index.useTranslate();
|
|
3168
|
-
const configuration = React.useMemo(() => {
|
|
3169
|
-
const conf = {
|
|
3170
|
-
variant: "alternative",
|
|
3171
|
-
text: translate("publicationState.na")
|
|
3172
|
-
};
|
|
3173
|
-
if (hasDraftAndPublish) {
|
|
3174
|
-
conf.variant = isPublished ? "success" : "secondary";
|
|
3175
|
-
conf.text = isPublished ? translate("publicationState.published") : translate("publicationState.draft");
|
|
3176
|
-
}
|
|
3177
|
-
return conf;
|
|
3178
|
-
}, [isPublished, hasDraftAndPublish, translate]);
|
|
3179
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3180
|
-
designSystem.Status,
|
|
3181
|
-
{
|
|
3182
|
-
showBullet: false,
|
|
3183
|
-
variant: configuration.variant,
|
|
3184
|
-
size: "S",
|
|
3185
|
-
width: "min-content",
|
|
3186
|
-
style: { paddingLeft: 12, paddingRight: 12 },
|
|
3187
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: `${configuration.variant}700`, children: configuration.text })
|
|
3188
|
-
}
|
|
3189
|
-
);
|
|
3190
|
-
};
|
|
3191
|
-
const TableItem = ({
|
|
3192
|
-
entry,
|
|
3193
|
-
type,
|
|
3194
|
-
uniqueId,
|
|
3195
|
-
disabled,
|
|
3196
|
-
onAdd,
|
|
3197
|
-
onDelete
|
|
3198
|
-
}) => {
|
|
3199
|
-
const { translate } = index.useTranslate();
|
|
3200
|
-
const entryIdentifier = React.useMemo(
|
|
3201
|
-
() => `${uniqueId}-${entry.uid}-${entry.item.id}`,
|
|
3202
|
-
[entry]
|
|
3203
|
-
);
|
|
3204
|
-
const contentType = index.getContentTypeForUid(entry.uid);
|
|
3205
|
-
const location = reactRouterDom.useLocation();
|
|
3206
|
-
const { attributes, listeners, setNodeRef, transform, transition } = sortable.useSortable({ id: entryIdentifier });
|
|
3207
|
-
const trueRef = document.querySelector(
|
|
3208
|
-
`[data-tableitem="${entryIdentifier}"]`
|
|
3209
|
-
);
|
|
3210
|
-
React.useEffect(() => {
|
|
3211
|
-
if (!trueRef) return;
|
|
3212
|
-
setNodeRef(trueRef);
|
|
3213
|
-
}, [trueRef]);
|
|
3214
|
-
const style = {
|
|
3215
|
-
transform: CSS.Transform.toString(transform),
|
|
3216
|
-
transition
|
|
3217
|
-
};
|
|
3218
|
-
const [currentLocale, setCurrentLocale] = React.useState("");
|
|
3219
|
-
React.useEffect(() => {
|
|
3220
|
-
const searchParams = new URLSearchParams(location.search);
|
|
3221
|
-
const locale = searchParams.get("plugins[i18n][locale]");
|
|
3222
|
-
if (!locale) return;
|
|
3223
|
-
setCurrentLocale(locale);
|
|
3224
|
-
}, [location]);
|
|
3225
|
-
const goToEntry = () => {
|
|
3226
|
-
if (!currentLocale) return;
|
|
3227
|
-
const contentTypes = window.sessionStorage.getItem("mctr::content_types");
|
|
3228
|
-
if (contentTypes) {
|
|
3229
|
-
try {
|
|
3230
|
-
const parsedContentTypes = JSON.parse(contentTypes);
|
|
3231
|
-
if (Array.isArray(parsedContentTypes)) {
|
|
3232
|
-
const contentType2 = parsedContentTypes.find(
|
|
3233
|
-
(ct) => ct.uid === entry.uid
|
|
3234
|
-
);
|
|
3235
|
-
if (contentType2) {
|
|
3236
|
-
const kind = contentType2.kind;
|
|
3237
|
-
let url = `/admin/content-manager/${kind}/${entry.uid}`;
|
|
3238
|
-
if (kind === "collectionType") {
|
|
3239
|
-
url += `/${entry.item.id}`;
|
|
3240
|
-
}
|
|
3241
|
-
url += `?plugins[i18n][locale]=${currentLocale}`;
|
|
3242
|
-
window.open(url, "_blank");
|
|
3243
|
-
return;
|
|
3244
|
-
}
|
|
3245
|
-
}
|
|
3246
|
-
} catch (e) {
|
|
3247
|
-
console.error("[MCTR] Failed to retrieve content types");
|
|
3248
|
-
}
|
|
3249
|
-
} else {
|
|
3250
|
-
alert(translate("tableItem.error"));
|
|
3251
|
-
}
|
|
3252
|
-
};
|
|
3253
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3254
|
-
designSystem.Tr,
|
|
3255
|
-
{
|
|
3256
|
-
style,
|
|
3257
|
-
...attributes,
|
|
3258
|
-
...listeners,
|
|
3259
|
-
"data-tableitem": entryIdentifier,
|
|
3260
|
-
children: [
|
|
3261
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: type === "selected" ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { noBorder: true, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Drag, {}) }) : null }),
|
|
3262
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { color: "neutral800", children: entry.item[entry.searchableField] }) }),
|
|
3263
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { color: "neutral800", children: entry.item.id }) }),
|
|
3264
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { color: "neutral800", children: entry.displayName }) }),
|
|
3265
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3266
|
-
PublicationState,
|
|
3267
|
-
{
|
|
3268
|
-
isPublished: !!entry.item.publishedAt,
|
|
3269
|
-
hasDraftAndPublish: contentType?.options?.draftAndPublish
|
|
3270
|
-
}
|
|
3271
|
-
) }),
|
|
3272
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
|
|
3273
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3274
|
-
designSystem.IconButton,
|
|
3275
|
-
{
|
|
3276
|
-
label: translate("tableItem.goToEntry"),
|
|
3277
|
-
onClick: goToEntry,
|
|
3278
|
-
style: { "marg@in-right": "5px" },
|
|
3279
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(icons.Eye, {})
|
|
3280
|
-
}
|
|
3281
|
-
),
|
|
3282
|
-
type === "suggestion" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3283
|
-
designSystem.IconButton,
|
|
3284
|
-
{
|
|
3285
|
-
label: translate("tableItem.add"),
|
|
3286
|
-
onClick: () => onAdd(entry),
|
|
3287
|
-
disabled,
|
|
3288
|
-
marginLeft: 1,
|
|
3289
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {})
|
|
3290
|
-
}
|
|
3291
|
-
) : type === "selected" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3292
|
-
designSystem.IconButton,
|
|
3293
|
-
{
|
|
3294
|
-
label: translate("tableItem.delete"),
|
|
3295
|
-
onClick: () => onDelete(entry),
|
|
3296
|
-
marginLeft: 1,
|
|
3297
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
|
|
3298
|
-
}
|
|
3299
|
-
) : null
|
|
3300
|
-
] }) })
|
|
3301
|
-
]
|
|
3302
|
-
}
|
|
3303
|
-
);
|
|
3304
|
-
};
|
|
3305
|
-
function InputContentSuggestions({
|
|
3306
|
-
uniqueId,
|
|
3307
|
-
suggestions,
|
|
3308
|
-
selected,
|
|
3309
|
-
onAddEntry,
|
|
3310
|
-
onDeleteEntry,
|
|
3311
|
-
onEntriesSorted,
|
|
3312
|
-
maximum,
|
|
3313
|
-
sortable: sortable$1
|
|
3314
|
-
}) {
|
|
3315
|
-
const { translate } = index.useTranslate();
|
|
3316
|
-
const suggestionAsSelectedEntry = React.useMemo(() => {
|
|
3317
|
-
return (suggestions || []).flatMap(
|
|
3318
|
-
(suggestion) => suggestion.results.map((entrySuggestion) => ({
|
|
3319
|
-
displayName: suggestion.displayName,
|
|
3320
|
-
item: entrySuggestion,
|
|
3321
|
-
searchableField: suggestion.searchableField,
|
|
3322
|
-
uid: suggestion.uid
|
|
3323
|
-
}))
|
|
3324
|
-
).slice(0, 10);
|
|
3325
|
-
}, [suggestions]);
|
|
3326
|
-
const buildSelectedId = (entry) => {
|
|
3327
|
-
return `${uniqueId}-${entry.uid}-${entry.item.id}`;
|
|
3328
|
-
};
|
|
3329
|
-
const availableSuggestions = React.useMemo(() => {
|
|
3330
|
-
const selectedIdentifiers = (selected || []).map(buildSelectedId);
|
|
3331
|
-
return suggestionAsSelectedEntry.filter(
|
|
3332
|
-
(suggestion) => !selectedIdentifiers.includes(buildSelectedId(suggestion))
|
|
3333
|
-
);
|
|
3334
|
-
}, [suggestions, selected]);
|
|
3335
|
-
const onAdd = (entry) => {
|
|
3336
|
-
if (typeof onAddEntry === "function") {
|
|
3337
|
-
onAddEntry(entry);
|
|
3338
|
-
}
|
|
3339
|
-
};
|
|
3340
|
-
const onDelete = (entry) => {
|
|
3341
|
-
if (typeof onDeleteEntry === "function") {
|
|
3342
|
-
onDeleteEntry(entry);
|
|
3343
|
-
}
|
|
3344
|
-
};
|
|
3345
|
-
const onSort = (entries) => {
|
|
3346
|
-
if (typeof onEntriesSorted === "function") {
|
|
3347
|
-
onEntriesSorted(entries);
|
|
3348
|
-
}
|
|
3349
|
-
};
|
|
3350
|
-
const sensors = useSensors(
|
|
3351
|
-
useSensor(PointerSensor, {
|
|
3352
|
-
activationConstraint: {
|
|
3353
|
-
distance: 5
|
|
3354
|
-
}
|
|
3355
|
-
})
|
|
3356
|
-
);
|
|
3357
|
-
const handleDragEnd = (event) => {
|
|
3358
|
-
const { active, over } = event;
|
|
3359
|
-
if (!active || !over) return;
|
|
3360
|
-
if (active.id !== over.id) {
|
|
3361
|
-
const oldIndex = selected.findIndex(
|
|
3362
|
-
(entry) => buildSelectedId(entry) === active.id
|
|
3363
|
-
);
|
|
3364
|
-
const newIndex = selected.findIndex(
|
|
3365
|
-
(entry) => buildSelectedId(entry) === over.id
|
|
3366
|
-
);
|
|
3367
|
-
onSort(sortable.arrayMove(selected, oldIndex, newIndex));
|
|
3368
|
-
}
|
|
3369
|
-
};
|
|
3370
|
-
if (!availableSuggestions?.length && !selected?.length) return null;
|
|
3371
|
-
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: [2, 0, 2, 0], background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { style: { whiteSpace: "unset" }, children: [
|
|
3372
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
|
|
3373
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, {}),
|
|
3374
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: translate("contentSuggestions.title") }) }),
|
|
3375
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: translate("contentSuggestions.id") }) }),
|
|
3376
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: translate("contentSuggestions.contentType") }) }),
|
|
3377
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: translate("contentSuggestions.state") }) })
|
|
3378
|
-
] }) }),
|
|
3379
|
-
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tbody, { children: [
|
|
3380
|
-
selected?.length ? sortable$1 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3381
|
-
DndContext,
|
|
3382
|
-
{
|
|
3383
|
-
sensors,
|
|
3384
|
-
collisionDetection: closestCenter,
|
|
3385
|
-
onDragEnd: handleDragEnd,
|
|
3386
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3387
|
-
sortable.SortableContext,
|
|
3388
|
-
{
|
|
3389
|
-
items: selected.map((entry) => buildSelectedId(entry)),
|
|
3390
|
-
strategy: sortable.verticalListSortingStrategy,
|
|
3391
|
-
children: selected.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3392
|
-
TableItem,
|
|
3393
|
-
{
|
|
3394
|
-
uniqueId,
|
|
3395
|
-
entry,
|
|
3396
|
-
type: "selected",
|
|
3397
|
-
onDelete,
|
|
3398
|
-
sortable: sortable$1
|
|
3399
|
-
},
|
|
3400
|
-
buildSelectedId(entry)
|
|
3401
|
-
))
|
|
3402
|
-
}
|
|
3403
|
-
)
|
|
3404
|
-
}
|
|
3405
|
-
) }) : (selected || []).map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3406
|
-
TableItem,
|
|
3407
|
-
{
|
|
3408
|
-
uniqueId,
|
|
3409
|
-
entry,
|
|
3410
|
-
type: "selected",
|
|
3411
|
-
onDelete
|
|
3412
|
-
}
|
|
3413
|
-
)) : null,
|
|
3414
|
-
availableSuggestions.length && selected?.length ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tr, { style: { height: "32px" } }) : null,
|
|
3415
|
-
availableSuggestions.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3416
|
-
TableItem,
|
|
3417
|
-
{
|
|
3418
|
-
uniqueId,
|
|
3419
|
-
entry,
|
|
3420
|
-
type: "suggestion",
|
|
3421
|
-
onAdd,
|
|
3422
|
-
disabled: typeof maximum === "number" ? (selected?.length ?? 0) >= maximum : false
|
|
3423
|
-
},
|
|
3424
|
-
buildSelectedId(entry)
|
|
3425
|
-
))
|
|
3426
|
-
] })
|
|
3427
|
-
] }) });
|
|
3428
|
-
}
|
|
3429
|
-
const MainInput = ({
|
|
3430
|
-
name,
|
|
3431
|
-
error,
|
|
3432
|
-
description,
|
|
3433
|
-
onChange,
|
|
3434
|
-
value,
|
|
3435
|
-
labelAction,
|
|
3436
|
-
label,
|
|
3437
|
-
attribute,
|
|
3438
|
-
required
|
|
3439
|
-
}) => {
|
|
3440
|
-
const { formatMessage } = reactIntl.useIntl();
|
|
3441
|
-
const { translate } = index.useTranslate();
|
|
3442
|
-
const location = reactRouterDom.useLocation();
|
|
3443
|
-
const maximumItems = attribute.options.max;
|
|
3444
|
-
const minimumItems = attribute.options.min || 0;
|
|
3445
|
-
const currentLocale = new URLSearchParams(location.search).get(
|
|
3446
|
-
"plugins[i18n][locale]"
|
|
3447
|
-
);
|
|
3448
|
-
const [keyword, setKeyword] = React.useState("");
|
|
3449
|
-
const [selected, setSelected] = React.useState([]);
|
|
3450
|
-
const [loading, setLoading] = React.useState(true);
|
|
3451
|
-
React.useEffect(() => {
|
|
3452
|
-
const value2 = selected.length > maximumItems || selected.length < minimumItems ? [] : selected;
|
|
3453
|
-
onChange({ target: { name, value: index.formatToStrapiField(value2) } });
|
|
3454
|
-
}, [selected]);
|
|
3455
|
-
const hint = React.useMemo(() => {
|
|
3456
|
-
const minLabel = minimumItems > 0 ? `${translate("input.hint.min")} ${minimumItems} ${minimumItems > 1 ? translate("input.hint.entries") : translate("input.hint.entry")}` : "";
|
|
3457
|
-
const maxLabel = maximumItems > 0 ? `${translate("input.hint.max")} ${maximumItems} ${maximumItems > 1 ? translate("input.hint.entries") : translate("input.hint.entry")}` : "";
|
|
3458
|
-
return `
|
|
3459
|
-
${minLabel ? `${minLabel}` : ""}
|
|
3460
|
-
${minLabel && maxLabel ? ", " : ""}
|
|
3461
|
-
${maxLabel}
|
|
3462
|
-
${minLabel || maxLabel ? translate("input.hint.separator") : ""}
|
|
3463
|
-
${selected.length} ${translate("input.hint.selected")}
|
|
3464
|
-
`;
|
|
3465
|
-
}, [selected, maximumItems, minimumItems, translate]);
|
|
3466
|
-
const inputError = React.useMemo(() => {
|
|
3467
|
-
if (!error) return "";
|
|
3468
|
-
if (selected.length < minimumItems)
|
|
3469
|
-
return `${error} - ${translate("input.error.min")} ${minimumItems} ${translate("input.error.required")}`;
|
|
3470
|
-
if (selected.length > maximumItems)
|
|
3471
|
-
return `${error} - ${translate("input.error.max")} ${maximumItems} ${translate("input.error.required")}`;
|
|
3472
|
-
return error;
|
|
3473
|
-
}, [error, maximumItems, minimumItems, selected, translate]);
|
|
3474
|
-
const { loading: searchLoading, results } = useSearchedEntries(
|
|
3475
|
-
keyword,
|
|
3476
|
-
attribute.options.contentTypes,
|
|
3477
|
-
currentLocale
|
|
3478
|
-
);
|
|
3479
|
-
React.useEffect(() => {
|
|
3480
|
-
async function validateContent() {
|
|
3481
|
-
if (!value) {
|
|
3482
|
-
setLoading(false);
|
|
3483
|
-
return;
|
|
3484
|
-
}
|
|
3485
|
-
const entries = JSON.parse(value);
|
|
3486
|
-
const result = await index.validateCurrentRelations(entries);
|
|
3487
|
-
setSelected(result);
|
|
3488
|
-
setLoading(false);
|
|
3489
|
-
}
|
|
3490
|
-
validateContent();
|
|
3491
|
-
}, []);
|
|
3492
|
-
const onAddEntry = (entry) => {
|
|
3493
|
-
const alreadyDefined = selected.some(
|
|
3494
|
-
(selectedEntry) => selectedEntry.uid === entry.uid && selectedEntry.item.id === entry.item.id
|
|
3495
|
-
);
|
|
3496
|
-
if (alreadyDefined) return;
|
|
3497
|
-
setSelected([...selected, entry]);
|
|
3498
|
-
};
|
|
3499
|
-
const onDeleteEntry = (entry) => {
|
|
3500
|
-
const newSelected = selected.filter(
|
|
3501
|
-
(selectedEntry) => !(selectedEntry.uid === entry.uid && selectedEntry.item.id === entry.item.id)
|
|
3502
|
-
);
|
|
3503
|
-
setSelected(newSelected);
|
|
3504
|
-
};
|
|
3505
|
-
const onEntriesSorted = (entries) => {
|
|
3506
|
-
setSelected(entries);
|
|
3507
|
-
};
|
|
3508
|
-
if (loading) return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {});
|
|
3509
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3510
|
-
designSystem.Field.Root,
|
|
3511
|
-
{
|
|
3512
|
-
name,
|
|
3513
|
-
id: name,
|
|
3514
|
-
error,
|
|
3515
|
-
hint: description,
|
|
3516
|
-
required,
|
|
3517
|
-
children: [
|
|
3518
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
|
|
3519
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3520
|
-
designSystem.TextInput,
|
|
3521
|
-
{
|
|
3522
|
-
placeholder: translate("input.placeholder"),
|
|
3523
|
-
required,
|
|
3524
|
-
hint,
|
|
3525
|
-
error: inputError,
|
|
3526
|
-
value: keyword,
|
|
3527
|
-
onChange: (e) => setKeyword(e.target.value)
|
|
3528
|
-
}
|
|
3529
|
-
),
|
|
3530
|
-
searchLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {}) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
3531
|
-
InputContentSuggestions,
|
|
3532
|
-
{
|
|
3533
|
-
uniqueId: Date.now(),
|
|
3534
|
-
suggestions: results,
|
|
3535
|
-
selected,
|
|
3536
|
-
onAddEntry,
|
|
3537
|
-
onDeleteEntry,
|
|
3538
|
-
onEntriesSorted,
|
|
3539
|
-
maximum: maximumItems,
|
|
3540
|
-
sortable: true
|
|
3541
|
-
}
|
|
3542
|
-
)
|
|
3543
|
-
]
|
|
3544
|
-
}
|
|
3545
|
-
);
|
|
3546
|
-
};
|
|
3547
|
-
const Index = (props) => {
|
|
3548
|
-
const { locale } = reactIntl.useIntl();
|
|
3549
|
-
const theme = React.useMemo(() => ({}), []);
|
|
3550
|
-
const attribute = React.useMemo(() => {
|
|
3551
|
-
if (!props.attribute) return props.attribute;
|
|
3552
|
-
if (!props.attribute.options) return props.attribute;
|
|
3553
|
-
if (!props.attribute.options.contentTypes) return props.attribute;
|
|
3554
|
-
const contentTypes = Object.keys(
|
|
3555
|
-
props.attribute.options.contentTypes
|
|
3556
|
-
).filter((key) => props.attribute.options.contentTypes[key]);
|
|
3557
|
-
return {
|
|
3558
|
-
...props.attribute,
|
|
3559
|
-
options: {
|
|
3560
|
-
...props.attribute.options,
|
|
3561
|
-
contentTypes: contentTypes.join(",")
|
|
3562
|
-
}
|
|
3563
|
-
};
|
|
3564
|
-
}, [props.attribute]);
|
|
3565
|
-
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.DesignSystemProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(MainInput, { ...props, attribute }) });
|
|
3566
|
-
};
|
|
3567
|
-
exports.default = Index;
|