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.
@@ -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;