@haklex/rich-ext-gallery 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1,15 +1,20 @@
1
1
  var __defProp = Object.defineProperty;
2
- var __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: true, configurable: true, writable: true, value }) : obj[key2] = value;
3
- var __publicField = (obj, key2, value) => __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
2
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
+ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
4
4
  import { decodeThumbHash, createRendererDecoration } from "@haklex/rich-editor";
5
5
  import { DecoratorNode, $insertNodes, $getNodeByKey } from "lexical";
6
6
  import { ChevronLeft, ChevronRight, Images, ImageIcon, Pencil, X, Plus, GripVertical, Trash2 } from "lucide-react";
7
- import React, { memo, useMemo, useState, useRef, useEffect, useCallback, createElement, useLayoutEffect, createContext, useReducer, useContext, cloneElement, forwardRef, use } from "react";
7
+ import { memo, useMemo, useState, useRef, useEffect, useCallback, createElement } from "react";
8
8
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
9
+ import "react-photo-view/dist/react-photo-view.css";
9
10
  import { useInView } from "react-intersection-observer";
10
11
  import { PhotoView, PhotoProvider } from "react-photo-view";
11
- import { unstable_batchedUpdates, createPortal } from "react-dom";
12
+ import { useSensors, useSensor, PointerSensor, DndContext, closestCenter, DragOverlay } from "@dnd-kit/core";
13
+ import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
14
+ import { CSS } from "@dnd-kit/utilities";
15
+ import { presentDialog, SegmentedControl } from "@haklex/rich-editor-ui";
12
16
  import { usePortalTheme } from "@haklex/rich-style-token";
17
+ import { createPortal } from "react-dom";
13
18
  var gallery = "_10ydd1n0";
14
19
  var galleryGrid = "_10ydd1n1";
15
20
  var galleryMasonry = "_10ydd1n2";
@@ -245,8 +250,8 @@ const GalleryFigure = memo(
245
250
  );
246
251
  const GalleryRenderer_default = memo(GalleryRenderer);
247
252
  const _GalleryNode = class _GalleryNode extends DecoratorNode {
248
- constructor(payload, key2) {
249
- super(key2);
253
+ constructor(payload, key) {
254
+ super(key);
250
255
  __publicField(this, "__images");
251
256
  __publicField(this, "__layout");
252
257
  this.__images = payload.images;
@@ -349,4330 +354,6 @@ function $createGalleryNode(payload) {
349
354
  function $isGalleryNode(node) {
350
355
  return node instanceof GalleryNode;
351
356
  }
352
- function useCombinedRefs() {
353
- for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
354
- refs[_key] = arguments[_key];
355
- }
356
- return useMemo(
357
- () => (node) => {
358
- refs.forEach((ref) => ref(node));
359
- },
360
- // eslint-disable-next-line react-hooks/exhaustive-deps
361
- refs
362
- );
363
- }
364
- const canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
365
- function isWindow(element) {
366
- const elementString = Object.prototype.toString.call(element);
367
- return elementString === "[object Window]" || // In Electron context the Window object serializes to [object global]
368
- elementString === "[object global]";
369
- }
370
- function isNode(node) {
371
- return "nodeType" in node;
372
- }
373
- function getWindow(target) {
374
- var _target$ownerDocument, _target$ownerDocument2;
375
- if (!target) {
376
- return window;
377
- }
378
- if (isWindow(target)) {
379
- return target;
380
- }
381
- if (!isNode(target)) {
382
- return window;
383
- }
384
- return (_target$ownerDocument = (_target$ownerDocument2 = target.ownerDocument) == null ? void 0 : _target$ownerDocument2.defaultView) != null ? _target$ownerDocument : window;
385
- }
386
- function isDocument(node) {
387
- const {
388
- Document
389
- } = getWindow(node);
390
- return node instanceof Document;
391
- }
392
- function isHTMLElement(node) {
393
- if (isWindow(node)) {
394
- return false;
395
- }
396
- return node instanceof getWindow(node).HTMLElement;
397
- }
398
- function isSVGElement(node) {
399
- return node instanceof getWindow(node).SVGElement;
400
- }
401
- function getOwnerDocument(target) {
402
- if (!target) {
403
- return document;
404
- }
405
- if (isWindow(target)) {
406
- return target.document;
407
- }
408
- if (!isNode(target)) {
409
- return document;
410
- }
411
- if (isDocument(target)) {
412
- return target;
413
- }
414
- if (isHTMLElement(target) || isSVGElement(target)) {
415
- return target.ownerDocument;
416
- }
417
- return document;
418
- }
419
- const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
420
- function useEvent(handler) {
421
- const handlerRef = useRef(handler);
422
- useIsomorphicLayoutEffect(() => {
423
- handlerRef.current = handler;
424
- });
425
- return useCallback(function() {
426
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
427
- args[_key] = arguments[_key];
428
- }
429
- return handlerRef.current == null ? void 0 : handlerRef.current(...args);
430
- }, []);
431
- }
432
- function useInterval() {
433
- const intervalRef = useRef(null);
434
- const set = useCallback((listener, duration) => {
435
- intervalRef.current = setInterval(listener, duration);
436
- }, []);
437
- const clear = useCallback(() => {
438
- if (intervalRef.current !== null) {
439
- clearInterval(intervalRef.current);
440
- intervalRef.current = null;
441
- }
442
- }, []);
443
- return [set, clear];
444
- }
445
- function useLatestValue(value, dependencies) {
446
- if (dependencies === void 0) {
447
- dependencies = [value];
448
- }
449
- const valueRef = useRef(value);
450
- useIsomorphicLayoutEffect(() => {
451
- if (valueRef.current !== value) {
452
- valueRef.current = value;
453
- }
454
- }, dependencies);
455
- return valueRef;
456
- }
457
- function useLazyMemo(callback, dependencies) {
458
- const valueRef = useRef();
459
- return useMemo(
460
- () => {
461
- const newValue = callback(valueRef.current);
462
- valueRef.current = newValue;
463
- return newValue;
464
- },
465
- // eslint-disable-next-line react-hooks/exhaustive-deps
466
- [...dependencies]
467
- );
468
- }
469
- function useNodeRef(onChange) {
470
- const onChangeHandler = useEvent(onChange);
471
- const node = useRef(null);
472
- const setNodeRef = useCallback(
473
- (element) => {
474
- if (element !== node.current) {
475
- onChangeHandler == null ? void 0 : onChangeHandler(element, node.current);
476
- }
477
- node.current = element;
478
- },
479
- //eslint-disable-next-line
480
- []
481
- );
482
- return [node, setNodeRef];
483
- }
484
- function usePrevious(value) {
485
- const ref = useRef();
486
- useEffect(() => {
487
- ref.current = value;
488
- }, [value]);
489
- return ref.current;
490
- }
491
- let ids = {};
492
- function useUniqueId(prefix, value) {
493
- return useMemo(() => {
494
- if (value) {
495
- return value;
496
- }
497
- const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
498
- ids[prefix] = id;
499
- return prefix + "-" + id;
500
- }, [prefix, value]);
501
- }
502
- function createAdjustmentFn(modifier) {
503
- return function(object) {
504
- for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
505
- adjustments[_key - 1] = arguments[_key];
506
- }
507
- return adjustments.reduce((accumulator, adjustment) => {
508
- const entries = Object.entries(adjustment);
509
- for (const [key2, valueAdjustment] of entries) {
510
- const value = accumulator[key2];
511
- if (value != null) {
512
- accumulator[key2] = value + modifier * valueAdjustment;
513
- }
514
- }
515
- return accumulator;
516
- }, {
517
- ...object
518
- });
519
- };
520
- }
521
- const add = /* @__PURE__ */ createAdjustmentFn(1);
522
- const subtract = /* @__PURE__ */ createAdjustmentFn(-1);
523
- function hasViewportRelativeCoordinates(event) {
524
- return "clientX" in event && "clientY" in event;
525
- }
526
- function isKeyboardEvent(event) {
527
- if (!event) {
528
- return false;
529
- }
530
- const {
531
- KeyboardEvent
532
- } = getWindow(event.target);
533
- return KeyboardEvent && event instanceof KeyboardEvent;
534
- }
535
- function isTouchEvent(event) {
536
- if (!event) {
537
- return false;
538
- }
539
- const {
540
- TouchEvent
541
- } = getWindow(event.target);
542
- return TouchEvent && event instanceof TouchEvent;
543
- }
544
- function getEventCoordinates(event) {
545
- if (isTouchEvent(event)) {
546
- if (event.touches && event.touches.length) {
547
- const {
548
- clientX: x,
549
- clientY: y
550
- } = event.touches[0];
551
- return {
552
- x,
553
- y
554
- };
555
- } else if (event.changedTouches && event.changedTouches.length) {
556
- const {
557
- clientX: x,
558
- clientY: y
559
- } = event.changedTouches[0];
560
- return {
561
- x,
562
- y
563
- };
564
- }
565
- }
566
- if (hasViewportRelativeCoordinates(event)) {
567
- return {
568
- x: event.clientX,
569
- y: event.clientY
570
- };
571
- }
572
- return null;
573
- }
574
- const CSS = /* @__PURE__ */ Object.freeze({
575
- Translate: {
576
- toString(transform) {
577
- if (!transform) {
578
- return;
579
- }
580
- const {
581
- x,
582
- y
583
- } = transform;
584
- return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
585
- }
586
- },
587
- Scale: {
588
- toString(transform) {
589
- if (!transform) {
590
- return;
591
- }
592
- const {
593
- scaleX,
594
- scaleY
595
- } = transform;
596
- return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
597
- }
598
- },
599
- Transform: {
600
- toString(transform) {
601
- if (!transform) {
602
- return;
603
- }
604
- return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
605
- }
606
- },
607
- Transition: {
608
- toString(_ref) {
609
- let {
610
- property,
611
- duration,
612
- easing
613
- } = _ref;
614
- return property + " " + duration + "ms " + easing;
615
- }
616
- }
617
- });
618
- const SELECTOR = "a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]";
619
- function findFirstFocusableNode(element) {
620
- if (element.matches(SELECTOR)) {
621
- return element;
622
- }
623
- return element.querySelector(SELECTOR);
624
- }
625
- const hiddenStyles = {
626
- display: "none"
627
- };
628
- function HiddenText(_ref) {
629
- let {
630
- id,
631
- value
632
- } = _ref;
633
- return React.createElement("div", {
634
- id,
635
- style: hiddenStyles
636
- }, value);
637
- }
638
- function LiveRegion(_ref) {
639
- let {
640
- id,
641
- announcement,
642
- ariaLiveType = "assertive"
643
- } = _ref;
644
- const visuallyHidden = {
645
- position: "fixed",
646
- top: 0,
647
- left: 0,
648
- width: 1,
649
- height: 1,
650
- margin: -1,
651
- border: 0,
652
- padding: 0,
653
- overflow: "hidden",
654
- clip: "rect(0 0 0 0)",
655
- clipPath: "inset(100%)",
656
- whiteSpace: "nowrap"
657
- };
658
- return React.createElement("div", {
659
- id,
660
- style: visuallyHidden,
661
- role: "status",
662
- "aria-live": ariaLiveType,
663
- "aria-atomic": true
664
- }, announcement);
665
- }
666
- function useAnnouncement() {
667
- const [announcement, setAnnouncement] = useState("");
668
- const announce = useCallback((value) => {
669
- if (value != null) {
670
- setAnnouncement(value);
671
- }
672
- }, []);
673
- return {
674
- announce,
675
- announcement
676
- };
677
- }
678
- const DndMonitorContext = /* @__PURE__ */ createContext(null);
679
- function useDndMonitor(listener) {
680
- const registerListener = useContext(DndMonitorContext);
681
- useEffect(() => {
682
- if (!registerListener) {
683
- throw new Error("useDndMonitor must be used within a children of <DndContext>");
684
- }
685
- const unsubscribe = registerListener(listener);
686
- return unsubscribe;
687
- }, [listener, registerListener]);
688
- }
689
- function useDndMonitorProvider() {
690
- const [listeners2] = useState(() => /* @__PURE__ */ new Set());
691
- const registerListener = useCallback((listener) => {
692
- listeners2.add(listener);
693
- return () => listeners2.delete(listener);
694
- }, [listeners2]);
695
- const dispatch = useCallback((_ref) => {
696
- let {
697
- type,
698
- event
699
- } = _ref;
700
- listeners2.forEach((listener) => {
701
- var _listener$type;
702
- return (_listener$type = listener[type]) == null ? void 0 : _listener$type.call(listener, event);
703
- });
704
- }, [listeners2]);
705
- return [dispatch, registerListener];
706
- }
707
- const defaultScreenReaderInstructions = {
708
- 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 "
709
- };
710
- const defaultAnnouncements = {
711
- onDragStart(_ref) {
712
- let {
713
- active
714
- } = _ref;
715
- return "Picked up draggable item " + active.id + ".";
716
- },
717
- onDragOver(_ref2) {
718
- let {
719
- active,
720
- over
721
- } = _ref2;
722
- if (over) {
723
- return "Draggable item " + active.id + " was moved over droppable area " + over.id + ".";
724
- }
725
- return "Draggable item " + active.id + " is no longer over a droppable area.";
726
- },
727
- onDragEnd(_ref3) {
728
- let {
729
- active,
730
- over
731
- } = _ref3;
732
- if (over) {
733
- return "Draggable item " + active.id + " was dropped over droppable area " + over.id;
734
- }
735
- return "Draggable item " + active.id + " was dropped.";
736
- },
737
- onDragCancel(_ref4) {
738
- let {
739
- active
740
- } = _ref4;
741
- return "Dragging was cancelled. Draggable item " + active.id + " was dropped.";
742
- }
743
- };
744
- function Accessibility(_ref) {
745
- let {
746
- announcements = defaultAnnouncements,
747
- container: container2,
748
- hiddenTextDescribedById,
749
- screenReaderInstructions = defaultScreenReaderInstructions
750
- } = _ref;
751
- const {
752
- announce,
753
- announcement
754
- } = useAnnouncement();
755
- const liveRegionId = useUniqueId("DndLiveRegion");
756
- const [mounted, setMounted] = useState(false);
757
- useEffect(() => {
758
- setMounted(true);
759
- }, []);
760
- useDndMonitor(useMemo(() => ({
761
- onDragStart(_ref2) {
762
- let {
763
- active
764
- } = _ref2;
765
- announce(announcements.onDragStart({
766
- active
767
- }));
768
- },
769
- onDragMove(_ref3) {
770
- let {
771
- active,
772
- over
773
- } = _ref3;
774
- if (announcements.onDragMove) {
775
- announce(announcements.onDragMove({
776
- active,
777
- over
778
- }));
779
- }
780
- },
781
- onDragOver(_ref4) {
782
- let {
783
- active,
784
- over
785
- } = _ref4;
786
- announce(announcements.onDragOver({
787
- active,
788
- over
789
- }));
790
- },
791
- onDragEnd(_ref5) {
792
- let {
793
- active,
794
- over
795
- } = _ref5;
796
- announce(announcements.onDragEnd({
797
- active,
798
- over
799
- }));
800
- },
801
- onDragCancel(_ref6) {
802
- let {
803
- active,
804
- over
805
- } = _ref6;
806
- announce(announcements.onDragCancel({
807
- active,
808
- over
809
- }));
810
- }
811
- }), [announce, announcements]));
812
- if (!mounted) {
813
- return null;
814
- }
815
- const markup = React.createElement(React.Fragment, null, React.createElement(HiddenText, {
816
- id: hiddenTextDescribedById,
817
- value: screenReaderInstructions.draggable
818
- }), React.createElement(LiveRegion, {
819
- id: liveRegionId,
820
- announcement
821
- }));
822
- return container2 ? createPortal(markup, container2) : markup;
823
- }
824
- var Action;
825
- (function(Action2) {
826
- Action2["DragStart"] = "dragStart";
827
- Action2["DragMove"] = "dragMove";
828
- Action2["DragEnd"] = "dragEnd";
829
- Action2["DragCancel"] = "dragCancel";
830
- Action2["DragOver"] = "dragOver";
831
- Action2["RegisterDroppable"] = "registerDroppable";
832
- Action2["SetDroppableDisabled"] = "setDroppableDisabled";
833
- Action2["UnregisterDroppable"] = "unregisterDroppable";
834
- })(Action || (Action = {}));
835
- function noop() {
836
- }
837
- function useSensor(sensor, options) {
838
- return useMemo(
839
- () => ({
840
- sensor,
841
- options: options != null ? options : {}
842
- }),
843
- // eslint-disable-next-line react-hooks/exhaustive-deps
844
- [sensor, options]
845
- );
846
- }
847
- function useSensors() {
848
- for (var _len = arguments.length, sensors = new Array(_len), _key = 0; _key < _len; _key++) {
849
- sensors[_key] = arguments[_key];
850
- }
851
- return useMemo(
852
- () => [...sensors].filter((sensor) => sensor != null),
853
- // eslint-disable-next-line react-hooks/exhaustive-deps
854
- [...sensors]
855
- );
856
- }
857
- const defaultCoordinates = /* @__PURE__ */ Object.freeze({
858
- x: 0,
859
- y: 0
860
- });
861
- function distanceBetween(p1, p2) {
862
- return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
863
- }
864
- function getRelativeTransformOrigin(event, rect) {
865
- const eventCoordinates = getEventCoordinates(event);
866
- if (!eventCoordinates) {
867
- return "0 0";
868
- }
869
- const transformOrigin = {
870
- x: (eventCoordinates.x - rect.left) / rect.width * 100,
871
- y: (eventCoordinates.y - rect.top) / rect.height * 100
872
- };
873
- return transformOrigin.x + "% " + transformOrigin.y + "%";
874
- }
875
- function sortCollisionsAsc(_ref, _ref2) {
876
- let {
877
- data: {
878
- value: a
879
- }
880
- } = _ref;
881
- let {
882
- data: {
883
- value: b
884
- }
885
- } = _ref2;
886
- return a - b;
887
- }
888
- function sortCollisionsDesc(_ref3, _ref4) {
889
- let {
890
- data: {
891
- value: a
892
- }
893
- } = _ref3;
894
- let {
895
- data: {
896
- value: b
897
- }
898
- } = _ref4;
899
- return b - a;
900
- }
901
- function getFirstCollision(collisions, property) {
902
- if (!collisions || collisions.length === 0) {
903
- return null;
904
- }
905
- const [firstCollision] = collisions;
906
- return firstCollision[property];
907
- }
908
- function centerOfRectangle(rect, left, top) {
909
- if (left === void 0) {
910
- left = rect.left;
911
- }
912
- if (top === void 0) {
913
- top = rect.top;
914
- }
915
- return {
916
- x: left + rect.width * 0.5,
917
- y: top + rect.height * 0.5
918
- };
919
- }
920
- const closestCenter = (_ref) => {
921
- let {
922
- collisionRect,
923
- droppableRects,
924
- droppableContainers
925
- } = _ref;
926
- const centerRect = centerOfRectangle(collisionRect, collisionRect.left, collisionRect.top);
927
- const collisions = [];
928
- for (const droppableContainer of droppableContainers) {
929
- const {
930
- id
931
- } = droppableContainer;
932
- const rect = droppableRects.get(id);
933
- if (rect) {
934
- const distBetween = distanceBetween(centerOfRectangle(rect), centerRect);
935
- collisions.push({
936
- id,
937
- data: {
938
- droppableContainer,
939
- value: distBetween
940
- }
941
- });
942
- }
943
- }
944
- return collisions.sort(sortCollisionsAsc);
945
- };
946
- function getIntersectionRatio(entry, target) {
947
- const top = Math.max(target.top, entry.top);
948
- const left = Math.max(target.left, entry.left);
949
- const right = Math.min(target.left + target.width, entry.left + entry.width);
950
- const bottom = Math.min(target.top + target.height, entry.top + entry.height);
951
- const width = right - left;
952
- const height = bottom - top;
953
- if (left < right && top < bottom) {
954
- const targetArea = target.width * target.height;
955
- const entryArea = entry.width * entry.height;
956
- const intersectionArea = width * height;
957
- const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
958
- return Number(intersectionRatio.toFixed(4));
959
- }
960
- return 0;
961
- }
962
- const rectIntersection = (_ref) => {
963
- let {
964
- collisionRect,
965
- droppableRects,
966
- droppableContainers
967
- } = _ref;
968
- const collisions = [];
969
- for (const droppableContainer of droppableContainers) {
970
- const {
971
- id
972
- } = droppableContainer;
973
- const rect = droppableRects.get(id);
974
- if (rect) {
975
- const intersectionRatio = getIntersectionRatio(rect, collisionRect);
976
- if (intersectionRatio > 0) {
977
- collisions.push({
978
- id,
979
- data: {
980
- droppableContainer,
981
- value: intersectionRatio
982
- }
983
- });
984
- }
985
- }
986
- }
987
- return collisions.sort(sortCollisionsDesc);
988
- };
989
- function adjustScale(transform, rect1, rect2) {
990
- return {
991
- ...transform,
992
- scaleX: rect1 && rect2 ? rect1.width / rect2.width : 1,
993
- scaleY: rect1 && rect2 ? rect1.height / rect2.height : 1
994
- };
995
- }
996
- function getRectDelta(rect1, rect2) {
997
- return rect1 && rect2 ? {
998
- x: rect1.left - rect2.left,
999
- y: rect1.top - rect2.top
1000
- } : defaultCoordinates;
1001
- }
1002
- function createRectAdjustmentFn(modifier) {
1003
- return function adjustClientRect(rect) {
1004
- for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
1005
- adjustments[_key - 1] = arguments[_key];
1006
- }
1007
- return adjustments.reduce((acc, adjustment) => ({
1008
- ...acc,
1009
- top: acc.top + modifier * adjustment.y,
1010
- bottom: acc.bottom + modifier * adjustment.y,
1011
- left: acc.left + modifier * adjustment.x,
1012
- right: acc.right + modifier * adjustment.x
1013
- }), {
1014
- ...rect
1015
- });
1016
- };
1017
- }
1018
- const getAdjustedRect = /* @__PURE__ */ createRectAdjustmentFn(1);
1019
- function parseTransform(transform) {
1020
- if (transform.startsWith("matrix3d(")) {
1021
- const transformArray = transform.slice(9, -1).split(/, /);
1022
- return {
1023
- x: +transformArray[12],
1024
- y: +transformArray[13],
1025
- scaleX: +transformArray[0],
1026
- scaleY: +transformArray[5]
1027
- };
1028
- } else if (transform.startsWith("matrix(")) {
1029
- const transformArray = transform.slice(7, -1).split(/, /);
1030
- return {
1031
- x: +transformArray[4],
1032
- y: +transformArray[5],
1033
- scaleX: +transformArray[0],
1034
- scaleY: +transformArray[3]
1035
- };
1036
- }
1037
- return null;
1038
- }
1039
- function inverseTransform(rect, transform, transformOrigin) {
1040
- const parsedTransform = parseTransform(transform);
1041
- if (!parsedTransform) {
1042
- return rect;
1043
- }
1044
- const {
1045
- scaleX,
1046
- scaleY,
1047
- x: translateX,
1048
- y: translateY
1049
- } = parsedTransform;
1050
- const x = rect.left - translateX - (1 - scaleX) * parseFloat(transformOrigin);
1051
- const y = rect.top - translateY - (1 - scaleY) * parseFloat(transformOrigin.slice(transformOrigin.indexOf(" ") + 1));
1052
- const w = scaleX ? rect.width / scaleX : rect.width;
1053
- const h = scaleY ? rect.height / scaleY : rect.height;
1054
- return {
1055
- width: w,
1056
- height: h,
1057
- top: y,
1058
- right: x + w,
1059
- bottom: y + h,
1060
- left: x
1061
- };
1062
- }
1063
- const defaultOptions = {
1064
- ignoreTransform: false
1065
- };
1066
- function getClientRect(element, options) {
1067
- if (options === void 0) {
1068
- options = defaultOptions;
1069
- }
1070
- let rect = element.getBoundingClientRect();
1071
- if (options.ignoreTransform) {
1072
- const {
1073
- transform,
1074
- transformOrigin
1075
- } = getWindow(element).getComputedStyle(element);
1076
- if (transform) {
1077
- rect = inverseTransform(rect, transform, transformOrigin);
1078
- }
1079
- }
1080
- const {
1081
- top,
1082
- left,
1083
- width,
1084
- height,
1085
- bottom,
1086
- right
1087
- } = rect;
1088
- return {
1089
- top,
1090
- left,
1091
- width,
1092
- height,
1093
- bottom,
1094
- right
1095
- };
1096
- }
1097
- function getTransformAgnosticClientRect(element) {
1098
- return getClientRect(element, {
1099
- ignoreTransform: true
1100
- });
1101
- }
1102
- function getWindowClientRect(element) {
1103
- const width = element.innerWidth;
1104
- const height = element.innerHeight;
1105
- return {
1106
- top: 0,
1107
- left: 0,
1108
- right: width,
1109
- bottom: height,
1110
- width,
1111
- height
1112
- };
1113
- }
1114
- function isFixed(node, computedStyle) {
1115
- if (computedStyle === void 0) {
1116
- computedStyle = getWindow(node).getComputedStyle(node);
1117
- }
1118
- return computedStyle.position === "fixed";
1119
- }
1120
- function isScrollable(element, computedStyle) {
1121
- if (computedStyle === void 0) {
1122
- computedStyle = getWindow(element).getComputedStyle(element);
1123
- }
1124
- const overflowRegex = /(auto|scroll|overlay)/;
1125
- const properties2 = ["overflow", "overflowX", "overflowY"];
1126
- return properties2.some((property) => {
1127
- const value = computedStyle[property];
1128
- return typeof value === "string" ? overflowRegex.test(value) : false;
1129
- });
1130
- }
1131
- function getScrollableAncestors(element, limit) {
1132
- const scrollParents = [];
1133
- function findScrollableAncestors(node) {
1134
- if (limit != null && scrollParents.length >= limit) {
1135
- return scrollParents;
1136
- }
1137
- if (!node) {
1138
- return scrollParents;
1139
- }
1140
- if (isDocument(node) && node.scrollingElement != null && !scrollParents.includes(node.scrollingElement)) {
1141
- scrollParents.push(node.scrollingElement);
1142
- return scrollParents;
1143
- }
1144
- if (!isHTMLElement(node) || isSVGElement(node)) {
1145
- return scrollParents;
1146
- }
1147
- if (scrollParents.includes(node)) {
1148
- return scrollParents;
1149
- }
1150
- const computedStyle = getWindow(element).getComputedStyle(node);
1151
- if (node !== element) {
1152
- if (isScrollable(node, computedStyle)) {
1153
- scrollParents.push(node);
1154
- }
1155
- }
1156
- if (isFixed(node, computedStyle)) {
1157
- return scrollParents;
1158
- }
1159
- return findScrollableAncestors(node.parentNode);
1160
- }
1161
- if (!element) {
1162
- return scrollParents;
1163
- }
1164
- return findScrollableAncestors(element);
1165
- }
1166
- function getFirstScrollableAncestor(node) {
1167
- const [firstScrollableAncestor] = getScrollableAncestors(node, 1);
1168
- return firstScrollableAncestor != null ? firstScrollableAncestor : null;
1169
- }
1170
- function getScrollableElement(element) {
1171
- if (!canUseDOM || !element) {
1172
- return null;
1173
- }
1174
- if (isWindow(element)) {
1175
- return element;
1176
- }
1177
- if (!isNode(element)) {
1178
- return null;
1179
- }
1180
- if (isDocument(element) || element === getOwnerDocument(element).scrollingElement) {
1181
- return window;
1182
- }
1183
- if (isHTMLElement(element)) {
1184
- return element;
1185
- }
1186
- return null;
1187
- }
1188
- function getScrollXCoordinate(element) {
1189
- if (isWindow(element)) {
1190
- return element.scrollX;
1191
- }
1192
- return element.scrollLeft;
1193
- }
1194
- function getScrollYCoordinate(element) {
1195
- if (isWindow(element)) {
1196
- return element.scrollY;
1197
- }
1198
- return element.scrollTop;
1199
- }
1200
- function getScrollCoordinates(element) {
1201
- return {
1202
- x: getScrollXCoordinate(element),
1203
- y: getScrollYCoordinate(element)
1204
- };
1205
- }
1206
- var Direction;
1207
- (function(Direction2) {
1208
- Direction2[Direction2["Forward"] = 1] = "Forward";
1209
- Direction2[Direction2["Backward"] = -1] = "Backward";
1210
- })(Direction || (Direction = {}));
1211
- function isDocumentScrollingElement(element) {
1212
- if (!canUseDOM || !element) {
1213
- return false;
1214
- }
1215
- return element === document.scrollingElement;
1216
- }
1217
- function getScrollPosition(scrollingContainer) {
1218
- const minScroll = {
1219
- x: 0,
1220
- y: 0
1221
- };
1222
- const dimensions = isDocumentScrollingElement(scrollingContainer) ? {
1223
- height: window.innerHeight,
1224
- width: window.innerWidth
1225
- } : {
1226
- height: scrollingContainer.clientHeight,
1227
- width: scrollingContainer.clientWidth
1228
- };
1229
- const maxScroll = {
1230
- x: scrollingContainer.scrollWidth - dimensions.width,
1231
- y: scrollingContainer.scrollHeight - dimensions.height
1232
- };
1233
- const isTop = scrollingContainer.scrollTop <= minScroll.y;
1234
- const isLeft = scrollingContainer.scrollLeft <= minScroll.x;
1235
- const isBottom = scrollingContainer.scrollTop >= maxScroll.y;
1236
- const isRight = scrollingContainer.scrollLeft >= maxScroll.x;
1237
- return {
1238
- isTop,
1239
- isLeft,
1240
- isBottom,
1241
- isRight,
1242
- maxScroll,
1243
- minScroll
1244
- };
1245
- }
1246
- const defaultThreshold = {
1247
- x: 0.2,
1248
- y: 0.2
1249
- };
1250
- function getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, _ref, acceleration, thresholdPercentage) {
1251
- let {
1252
- top,
1253
- left,
1254
- right,
1255
- bottom
1256
- } = _ref;
1257
- if (acceleration === void 0) {
1258
- acceleration = 10;
1259
- }
1260
- if (thresholdPercentage === void 0) {
1261
- thresholdPercentage = defaultThreshold;
1262
- }
1263
- const {
1264
- isTop,
1265
- isBottom,
1266
- isLeft,
1267
- isRight
1268
- } = getScrollPosition(scrollContainer);
1269
- const direction = {
1270
- x: 0,
1271
- y: 0
1272
- };
1273
- const speed = {
1274
- x: 0,
1275
- y: 0
1276
- };
1277
- const threshold = {
1278
- height: scrollContainerRect.height * thresholdPercentage.y,
1279
- width: scrollContainerRect.width * thresholdPercentage.x
1280
- };
1281
- if (!isTop && top <= scrollContainerRect.top + threshold.height) {
1282
- direction.y = Direction.Backward;
1283
- speed.y = acceleration * Math.abs((scrollContainerRect.top + threshold.height - top) / threshold.height);
1284
- } else if (!isBottom && bottom >= scrollContainerRect.bottom - threshold.height) {
1285
- direction.y = Direction.Forward;
1286
- speed.y = acceleration * Math.abs((scrollContainerRect.bottom - threshold.height - bottom) / threshold.height);
1287
- }
1288
- if (!isRight && right >= scrollContainerRect.right - threshold.width) {
1289
- direction.x = Direction.Forward;
1290
- speed.x = acceleration * Math.abs((scrollContainerRect.right - threshold.width - right) / threshold.width);
1291
- } else if (!isLeft && left <= scrollContainerRect.left + threshold.width) {
1292
- direction.x = Direction.Backward;
1293
- speed.x = acceleration * Math.abs((scrollContainerRect.left + threshold.width - left) / threshold.width);
1294
- }
1295
- return {
1296
- direction,
1297
- speed
1298
- };
1299
- }
1300
- function getScrollElementRect(element) {
1301
- if (element === document.scrollingElement) {
1302
- const {
1303
- innerWidth,
1304
- innerHeight
1305
- } = window;
1306
- return {
1307
- top: 0,
1308
- left: 0,
1309
- right: innerWidth,
1310
- bottom: innerHeight,
1311
- width: innerWidth,
1312
- height: innerHeight
1313
- };
1314
- }
1315
- const {
1316
- top,
1317
- left,
1318
- right,
1319
- bottom
1320
- } = element.getBoundingClientRect();
1321
- return {
1322
- top,
1323
- left,
1324
- right,
1325
- bottom,
1326
- width: element.clientWidth,
1327
- height: element.clientHeight
1328
- };
1329
- }
1330
- function getScrollOffsets(scrollableAncestors) {
1331
- return scrollableAncestors.reduce((acc, node) => {
1332
- return add(acc, getScrollCoordinates(node));
1333
- }, defaultCoordinates);
1334
- }
1335
- function getScrollXOffset(scrollableAncestors) {
1336
- return scrollableAncestors.reduce((acc, node) => {
1337
- return acc + getScrollXCoordinate(node);
1338
- }, 0);
1339
- }
1340
- function getScrollYOffset(scrollableAncestors) {
1341
- return scrollableAncestors.reduce((acc, node) => {
1342
- return acc + getScrollYCoordinate(node);
1343
- }, 0);
1344
- }
1345
- function scrollIntoViewIfNeeded(element, measure) {
1346
- if (measure === void 0) {
1347
- measure = getClientRect;
1348
- }
1349
- if (!element) {
1350
- return;
1351
- }
1352
- const {
1353
- top,
1354
- left,
1355
- bottom,
1356
- right
1357
- } = measure(element);
1358
- const firstScrollableAncestor = getFirstScrollableAncestor(element);
1359
- if (!firstScrollableAncestor) {
1360
- return;
1361
- }
1362
- if (bottom <= 0 || right <= 0 || top >= window.innerHeight || left >= window.innerWidth) {
1363
- element.scrollIntoView({
1364
- block: "center",
1365
- inline: "center"
1366
- });
1367
- }
1368
- }
1369
- const properties = [["x", ["left", "right"], getScrollXOffset], ["y", ["top", "bottom"], getScrollYOffset]];
1370
- class Rect {
1371
- constructor(rect, element) {
1372
- this.rect = void 0;
1373
- this.width = void 0;
1374
- this.height = void 0;
1375
- this.top = void 0;
1376
- this.bottom = void 0;
1377
- this.right = void 0;
1378
- this.left = void 0;
1379
- const scrollableAncestors = getScrollableAncestors(element);
1380
- const scrollOffsets = getScrollOffsets(scrollableAncestors);
1381
- this.rect = {
1382
- ...rect
1383
- };
1384
- this.width = rect.width;
1385
- this.height = rect.height;
1386
- for (const [axis, keys, getScrollOffset] of properties) {
1387
- for (const key2 of keys) {
1388
- Object.defineProperty(this, key2, {
1389
- get: () => {
1390
- const currentOffsets = getScrollOffset(scrollableAncestors);
1391
- const scrollOffsetsDeltla = scrollOffsets[axis] - currentOffsets;
1392
- return this.rect[key2] + scrollOffsetsDeltla;
1393
- },
1394
- enumerable: true
1395
- });
1396
- }
1397
- }
1398
- Object.defineProperty(this, "rect", {
1399
- enumerable: false
1400
- });
1401
- }
1402
- }
1403
- class Listeners {
1404
- constructor(target) {
1405
- this.target = void 0;
1406
- this.listeners = [];
1407
- this.removeAll = () => {
1408
- this.listeners.forEach((listener) => {
1409
- var _this$target;
1410
- return (_this$target = this.target) == null ? void 0 : _this$target.removeEventListener(...listener);
1411
- });
1412
- };
1413
- this.target = target;
1414
- }
1415
- add(eventName, handler, options) {
1416
- var _this$target2;
1417
- (_this$target2 = this.target) == null ? void 0 : _this$target2.addEventListener(eventName, handler, options);
1418
- this.listeners.push([eventName, handler, options]);
1419
- }
1420
- }
1421
- function getEventListenerTarget(target) {
1422
- const {
1423
- EventTarget
1424
- } = getWindow(target);
1425
- return target instanceof EventTarget ? target : getOwnerDocument(target);
1426
- }
1427
- function hasExceededDistance(delta, measurement) {
1428
- const dx = Math.abs(delta.x);
1429
- const dy = Math.abs(delta.y);
1430
- if (typeof measurement === "number") {
1431
- return Math.sqrt(dx ** 2 + dy ** 2) > measurement;
1432
- }
1433
- if ("x" in measurement && "y" in measurement) {
1434
- return dx > measurement.x && dy > measurement.y;
1435
- }
1436
- if ("x" in measurement) {
1437
- return dx > measurement.x;
1438
- }
1439
- if ("y" in measurement) {
1440
- return dy > measurement.y;
1441
- }
1442
- return false;
1443
- }
1444
- var EventName;
1445
- (function(EventName2) {
1446
- EventName2["Click"] = "click";
1447
- EventName2["DragStart"] = "dragstart";
1448
- EventName2["Keydown"] = "keydown";
1449
- EventName2["ContextMenu"] = "contextmenu";
1450
- EventName2["Resize"] = "resize";
1451
- EventName2["SelectionChange"] = "selectionchange";
1452
- EventName2["VisibilityChange"] = "visibilitychange";
1453
- })(EventName || (EventName = {}));
1454
- function preventDefault(event) {
1455
- event.preventDefault();
1456
- }
1457
- function stopPropagation(event) {
1458
- event.stopPropagation();
1459
- }
1460
- var KeyboardCode;
1461
- (function(KeyboardCode2) {
1462
- KeyboardCode2["Space"] = "Space";
1463
- KeyboardCode2["Down"] = "ArrowDown";
1464
- KeyboardCode2["Right"] = "ArrowRight";
1465
- KeyboardCode2["Left"] = "ArrowLeft";
1466
- KeyboardCode2["Up"] = "ArrowUp";
1467
- KeyboardCode2["Esc"] = "Escape";
1468
- KeyboardCode2["Enter"] = "Enter";
1469
- KeyboardCode2["Tab"] = "Tab";
1470
- })(KeyboardCode || (KeyboardCode = {}));
1471
- const defaultKeyboardCodes = {
1472
- start: [KeyboardCode.Space, KeyboardCode.Enter],
1473
- cancel: [KeyboardCode.Esc],
1474
- end: [KeyboardCode.Space, KeyboardCode.Enter, KeyboardCode.Tab]
1475
- };
1476
- const defaultKeyboardCoordinateGetter = (event, _ref) => {
1477
- let {
1478
- currentCoordinates
1479
- } = _ref;
1480
- switch (event.code) {
1481
- case KeyboardCode.Right:
1482
- return {
1483
- ...currentCoordinates,
1484
- x: currentCoordinates.x + 25
1485
- };
1486
- case KeyboardCode.Left:
1487
- return {
1488
- ...currentCoordinates,
1489
- x: currentCoordinates.x - 25
1490
- };
1491
- case KeyboardCode.Down:
1492
- return {
1493
- ...currentCoordinates,
1494
- y: currentCoordinates.y + 25
1495
- };
1496
- case KeyboardCode.Up:
1497
- return {
1498
- ...currentCoordinates,
1499
- y: currentCoordinates.y - 25
1500
- };
1501
- }
1502
- return void 0;
1503
- };
1504
- class KeyboardSensor {
1505
- constructor(props) {
1506
- this.props = void 0;
1507
- this.autoScrollEnabled = false;
1508
- this.referenceCoordinates = void 0;
1509
- this.listeners = void 0;
1510
- this.windowListeners = void 0;
1511
- this.props = props;
1512
- const {
1513
- event: {
1514
- target
1515
- }
1516
- } = props;
1517
- this.props = props;
1518
- this.listeners = new Listeners(getOwnerDocument(target));
1519
- this.windowListeners = new Listeners(getWindow(target));
1520
- this.handleKeyDown = this.handleKeyDown.bind(this);
1521
- this.handleCancel = this.handleCancel.bind(this);
1522
- this.attach();
1523
- }
1524
- attach() {
1525
- this.handleStart();
1526
- this.windowListeners.add(EventName.Resize, this.handleCancel);
1527
- this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
1528
- setTimeout(() => this.listeners.add(EventName.Keydown, this.handleKeyDown));
1529
- }
1530
- handleStart() {
1531
- const {
1532
- activeNode,
1533
- onStart
1534
- } = this.props;
1535
- const node = activeNode.node.current;
1536
- if (node) {
1537
- scrollIntoViewIfNeeded(node);
1538
- }
1539
- onStart(defaultCoordinates);
1540
- }
1541
- handleKeyDown(event) {
1542
- if (isKeyboardEvent(event)) {
1543
- const {
1544
- active,
1545
- context,
1546
- options
1547
- } = this.props;
1548
- const {
1549
- keyboardCodes = defaultKeyboardCodes,
1550
- coordinateGetter = defaultKeyboardCoordinateGetter,
1551
- scrollBehavior = "smooth"
1552
- } = options;
1553
- const {
1554
- code
1555
- } = event;
1556
- if (keyboardCodes.end.includes(code)) {
1557
- this.handleEnd(event);
1558
- return;
1559
- }
1560
- if (keyboardCodes.cancel.includes(code)) {
1561
- this.handleCancel(event);
1562
- return;
1563
- }
1564
- const {
1565
- collisionRect
1566
- } = context.current;
1567
- const currentCoordinates = collisionRect ? {
1568
- x: collisionRect.left,
1569
- y: collisionRect.top
1570
- } : defaultCoordinates;
1571
- if (!this.referenceCoordinates) {
1572
- this.referenceCoordinates = currentCoordinates;
1573
- }
1574
- const newCoordinates = coordinateGetter(event, {
1575
- active,
1576
- context: context.current,
1577
- currentCoordinates
1578
- });
1579
- if (newCoordinates) {
1580
- const coordinatesDelta = subtract(newCoordinates, currentCoordinates);
1581
- const scrollDelta = {
1582
- x: 0,
1583
- y: 0
1584
- };
1585
- const {
1586
- scrollableAncestors
1587
- } = context.current;
1588
- for (const scrollContainer of scrollableAncestors) {
1589
- const direction = event.code;
1590
- const {
1591
- isTop,
1592
- isRight,
1593
- isLeft,
1594
- isBottom,
1595
- maxScroll,
1596
- minScroll
1597
- } = getScrollPosition(scrollContainer);
1598
- const scrollElementRect = getScrollElementRect(scrollContainer);
1599
- const clampedCoordinates = {
1600
- 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)),
1601
- 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))
1602
- };
1603
- const canScrollX = direction === KeyboardCode.Right && !isRight || direction === KeyboardCode.Left && !isLeft;
1604
- const canScrollY = direction === KeyboardCode.Down && !isBottom || direction === KeyboardCode.Up && !isTop;
1605
- if (canScrollX && clampedCoordinates.x !== newCoordinates.x) {
1606
- const newScrollCoordinates = scrollContainer.scrollLeft + coordinatesDelta.x;
1607
- const canScrollToNewCoordinates = direction === KeyboardCode.Right && newScrollCoordinates <= maxScroll.x || direction === KeyboardCode.Left && newScrollCoordinates >= minScroll.x;
1608
- if (canScrollToNewCoordinates && !coordinatesDelta.y) {
1609
- scrollContainer.scrollTo({
1610
- left: newScrollCoordinates,
1611
- behavior: scrollBehavior
1612
- });
1613
- return;
1614
- }
1615
- if (canScrollToNewCoordinates) {
1616
- scrollDelta.x = scrollContainer.scrollLeft - newScrollCoordinates;
1617
- } else {
1618
- scrollDelta.x = direction === KeyboardCode.Right ? scrollContainer.scrollLeft - maxScroll.x : scrollContainer.scrollLeft - minScroll.x;
1619
- }
1620
- if (scrollDelta.x) {
1621
- scrollContainer.scrollBy({
1622
- left: -scrollDelta.x,
1623
- behavior: scrollBehavior
1624
- });
1625
- }
1626
- break;
1627
- } else if (canScrollY && clampedCoordinates.y !== newCoordinates.y) {
1628
- const newScrollCoordinates = scrollContainer.scrollTop + coordinatesDelta.y;
1629
- const canScrollToNewCoordinates = direction === KeyboardCode.Down && newScrollCoordinates <= maxScroll.y || direction === KeyboardCode.Up && newScrollCoordinates >= minScroll.y;
1630
- if (canScrollToNewCoordinates && !coordinatesDelta.x) {
1631
- scrollContainer.scrollTo({
1632
- top: newScrollCoordinates,
1633
- behavior: scrollBehavior
1634
- });
1635
- return;
1636
- }
1637
- if (canScrollToNewCoordinates) {
1638
- scrollDelta.y = scrollContainer.scrollTop - newScrollCoordinates;
1639
- } else {
1640
- scrollDelta.y = direction === KeyboardCode.Down ? scrollContainer.scrollTop - maxScroll.y : scrollContainer.scrollTop - minScroll.y;
1641
- }
1642
- if (scrollDelta.y) {
1643
- scrollContainer.scrollBy({
1644
- top: -scrollDelta.y,
1645
- behavior: scrollBehavior
1646
- });
1647
- }
1648
- break;
1649
- }
1650
- }
1651
- this.handleMove(event, add(subtract(newCoordinates, this.referenceCoordinates), scrollDelta));
1652
- }
1653
- }
1654
- }
1655
- handleMove(event, coordinates) {
1656
- const {
1657
- onMove
1658
- } = this.props;
1659
- event.preventDefault();
1660
- onMove(coordinates);
1661
- }
1662
- handleEnd(event) {
1663
- const {
1664
- onEnd
1665
- } = this.props;
1666
- event.preventDefault();
1667
- this.detach();
1668
- onEnd();
1669
- }
1670
- handleCancel(event) {
1671
- const {
1672
- onCancel
1673
- } = this.props;
1674
- event.preventDefault();
1675
- this.detach();
1676
- onCancel();
1677
- }
1678
- detach() {
1679
- this.listeners.removeAll();
1680
- this.windowListeners.removeAll();
1681
- }
1682
- }
1683
- KeyboardSensor.activators = [{
1684
- eventName: "onKeyDown",
1685
- handler: (event, _ref, _ref2) => {
1686
- let {
1687
- keyboardCodes = defaultKeyboardCodes,
1688
- onActivation
1689
- } = _ref;
1690
- let {
1691
- active
1692
- } = _ref2;
1693
- const {
1694
- code
1695
- } = event.nativeEvent;
1696
- if (keyboardCodes.start.includes(code)) {
1697
- const activator = active.activatorNode.current;
1698
- if (activator && event.target !== activator) {
1699
- return false;
1700
- }
1701
- event.preventDefault();
1702
- onActivation == null ? void 0 : onActivation({
1703
- event: event.nativeEvent
1704
- });
1705
- return true;
1706
- }
1707
- return false;
1708
- }
1709
- }];
1710
- function isDistanceConstraint(constraint) {
1711
- return Boolean(constraint && "distance" in constraint);
1712
- }
1713
- function isDelayConstraint(constraint) {
1714
- return Boolean(constraint && "delay" in constraint);
1715
- }
1716
- class AbstractPointerSensor {
1717
- constructor(props, events2, listenerTarget) {
1718
- var _getEventCoordinates;
1719
- if (listenerTarget === void 0) {
1720
- listenerTarget = getEventListenerTarget(props.event.target);
1721
- }
1722
- this.props = void 0;
1723
- this.events = void 0;
1724
- this.autoScrollEnabled = true;
1725
- this.document = void 0;
1726
- this.activated = false;
1727
- this.initialCoordinates = void 0;
1728
- this.timeoutId = null;
1729
- this.listeners = void 0;
1730
- this.documentListeners = void 0;
1731
- this.windowListeners = void 0;
1732
- this.props = props;
1733
- this.events = events2;
1734
- const {
1735
- event
1736
- } = props;
1737
- const {
1738
- target
1739
- } = event;
1740
- this.props = props;
1741
- this.events = events2;
1742
- this.document = getOwnerDocument(target);
1743
- this.documentListeners = new Listeners(this.document);
1744
- this.listeners = new Listeners(listenerTarget);
1745
- this.windowListeners = new Listeners(getWindow(target));
1746
- this.initialCoordinates = (_getEventCoordinates = getEventCoordinates(event)) != null ? _getEventCoordinates : defaultCoordinates;
1747
- this.handleStart = this.handleStart.bind(this);
1748
- this.handleMove = this.handleMove.bind(this);
1749
- this.handleEnd = this.handleEnd.bind(this);
1750
- this.handleCancel = this.handleCancel.bind(this);
1751
- this.handleKeydown = this.handleKeydown.bind(this);
1752
- this.removeTextSelection = this.removeTextSelection.bind(this);
1753
- this.attach();
1754
- }
1755
- attach() {
1756
- const {
1757
- events: events2,
1758
- props: {
1759
- options: {
1760
- activationConstraint,
1761
- bypassActivationConstraint
1762
- }
1763
- }
1764
- } = this;
1765
- this.listeners.add(events2.move.name, this.handleMove, {
1766
- passive: false
1767
- });
1768
- this.listeners.add(events2.end.name, this.handleEnd);
1769
- if (events2.cancel) {
1770
- this.listeners.add(events2.cancel.name, this.handleCancel);
1771
- }
1772
- this.windowListeners.add(EventName.Resize, this.handleCancel);
1773
- this.windowListeners.add(EventName.DragStart, preventDefault);
1774
- this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
1775
- this.windowListeners.add(EventName.ContextMenu, preventDefault);
1776
- this.documentListeners.add(EventName.Keydown, this.handleKeydown);
1777
- if (activationConstraint) {
1778
- if (bypassActivationConstraint != null && bypassActivationConstraint({
1779
- event: this.props.event,
1780
- activeNode: this.props.activeNode,
1781
- options: this.props.options
1782
- })) {
1783
- return this.handleStart();
1784
- }
1785
- if (isDelayConstraint(activationConstraint)) {
1786
- this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
1787
- this.handlePending(activationConstraint);
1788
- return;
1789
- }
1790
- if (isDistanceConstraint(activationConstraint)) {
1791
- this.handlePending(activationConstraint);
1792
- return;
1793
- }
1794
- }
1795
- this.handleStart();
1796
- }
1797
- detach() {
1798
- this.listeners.removeAll();
1799
- this.windowListeners.removeAll();
1800
- setTimeout(this.documentListeners.removeAll, 50);
1801
- if (this.timeoutId !== null) {
1802
- clearTimeout(this.timeoutId);
1803
- this.timeoutId = null;
1804
- }
1805
- }
1806
- handlePending(constraint, offset) {
1807
- const {
1808
- active,
1809
- onPending
1810
- } = this.props;
1811
- onPending(active, constraint, this.initialCoordinates, offset);
1812
- }
1813
- handleStart() {
1814
- const {
1815
- initialCoordinates
1816
- } = this;
1817
- const {
1818
- onStart
1819
- } = this.props;
1820
- if (initialCoordinates) {
1821
- this.activated = true;
1822
- this.documentListeners.add(EventName.Click, stopPropagation, {
1823
- capture: true
1824
- });
1825
- this.removeTextSelection();
1826
- this.documentListeners.add(EventName.SelectionChange, this.removeTextSelection);
1827
- onStart(initialCoordinates);
1828
- }
1829
- }
1830
- handleMove(event) {
1831
- var _getEventCoordinates2;
1832
- const {
1833
- activated,
1834
- initialCoordinates,
1835
- props
1836
- } = this;
1837
- const {
1838
- onMove,
1839
- options: {
1840
- activationConstraint
1841
- }
1842
- } = props;
1843
- if (!initialCoordinates) {
1844
- return;
1845
- }
1846
- const coordinates = (_getEventCoordinates2 = getEventCoordinates(event)) != null ? _getEventCoordinates2 : defaultCoordinates;
1847
- const delta = subtract(initialCoordinates, coordinates);
1848
- if (!activated && activationConstraint) {
1849
- if (isDistanceConstraint(activationConstraint)) {
1850
- if (activationConstraint.tolerance != null && hasExceededDistance(delta, activationConstraint.tolerance)) {
1851
- return this.handleCancel();
1852
- }
1853
- if (hasExceededDistance(delta, activationConstraint.distance)) {
1854
- return this.handleStart();
1855
- }
1856
- }
1857
- if (isDelayConstraint(activationConstraint)) {
1858
- if (hasExceededDistance(delta, activationConstraint.tolerance)) {
1859
- return this.handleCancel();
1860
- }
1861
- }
1862
- this.handlePending(activationConstraint, delta);
1863
- return;
1864
- }
1865
- if (event.cancelable) {
1866
- event.preventDefault();
1867
- }
1868
- onMove(coordinates);
1869
- }
1870
- handleEnd() {
1871
- const {
1872
- onAbort,
1873
- onEnd
1874
- } = this.props;
1875
- this.detach();
1876
- if (!this.activated) {
1877
- onAbort(this.props.active);
1878
- }
1879
- onEnd();
1880
- }
1881
- handleCancel() {
1882
- const {
1883
- onAbort,
1884
- onCancel
1885
- } = this.props;
1886
- this.detach();
1887
- if (!this.activated) {
1888
- onAbort(this.props.active);
1889
- }
1890
- onCancel();
1891
- }
1892
- handleKeydown(event) {
1893
- if (event.code === KeyboardCode.Esc) {
1894
- this.handleCancel();
1895
- }
1896
- }
1897
- removeTextSelection() {
1898
- var _this$document$getSel;
1899
- (_this$document$getSel = this.document.getSelection()) == null ? void 0 : _this$document$getSel.removeAllRanges();
1900
- }
1901
- }
1902
- const events = {
1903
- cancel: {
1904
- name: "pointercancel"
1905
- },
1906
- move: {
1907
- name: "pointermove"
1908
- },
1909
- end: {
1910
- name: "pointerup"
1911
- }
1912
- };
1913
- class PointerSensor extends AbstractPointerSensor {
1914
- constructor(props) {
1915
- const {
1916
- event
1917
- } = props;
1918
- const listenerTarget = getOwnerDocument(event.target);
1919
- super(props, events, listenerTarget);
1920
- }
1921
- }
1922
- PointerSensor.activators = [{
1923
- eventName: "onPointerDown",
1924
- handler: (_ref, _ref2) => {
1925
- let {
1926
- nativeEvent: event
1927
- } = _ref;
1928
- let {
1929
- onActivation
1930
- } = _ref2;
1931
- if (!event.isPrimary || event.button !== 0) {
1932
- return false;
1933
- }
1934
- onActivation == null ? void 0 : onActivation({
1935
- event
1936
- });
1937
- return true;
1938
- }
1939
- }];
1940
- const events$1 = {
1941
- move: {
1942
- name: "mousemove"
1943
- },
1944
- end: {
1945
- name: "mouseup"
1946
- }
1947
- };
1948
- var MouseButton;
1949
- (function(MouseButton2) {
1950
- MouseButton2[MouseButton2["RightClick"] = 2] = "RightClick";
1951
- })(MouseButton || (MouseButton = {}));
1952
- class MouseSensor extends AbstractPointerSensor {
1953
- constructor(props) {
1954
- super(props, events$1, getOwnerDocument(props.event.target));
1955
- }
1956
- }
1957
- MouseSensor.activators = [{
1958
- eventName: "onMouseDown",
1959
- handler: (_ref, _ref2) => {
1960
- let {
1961
- nativeEvent: event
1962
- } = _ref;
1963
- let {
1964
- onActivation
1965
- } = _ref2;
1966
- if (event.button === MouseButton.RightClick) {
1967
- return false;
1968
- }
1969
- onActivation == null ? void 0 : onActivation({
1970
- event
1971
- });
1972
- return true;
1973
- }
1974
- }];
1975
- const events$2 = {
1976
- cancel: {
1977
- name: "touchcancel"
1978
- },
1979
- move: {
1980
- name: "touchmove"
1981
- },
1982
- end: {
1983
- name: "touchend"
1984
- }
1985
- };
1986
- class TouchSensor extends AbstractPointerSensor {
1987
- constructor(props) {
1988
- super(props, events$2);
1989
- }
1990
- static setup() {
1991
- window.addEventListener(events$2.move.name, noop2, {
1992
- capture: false,
1993
- passive: false
1994
- });
1995
- return function teardown() {
1996
- window.removeEventListener(events$2.move.name, noop2);
1997
- };
1998
- function noop2() {
1999
- }
2000
- }
2001
- }
2002
- TouchSensor.activators = [{
2003
- eventName: "onTouchStart",
2004
- handler: (_ref, _ref2) => {
2005
- let {
2006
- nativeEvent: event
2007
- } = _ref;
2008
- let {
2009
- onActivation
2010
- } = _ref2;
2011
- const {
2012
- touches
2013
- } = event;
2014
- if (touches.length > 1) {
2015
- return false;
2016
- }
2017
- onActivation == null ? void 0 : onActivation({
2018
- event
2019
- });
2020
- return true;
2021
- }
2022
- }];
2023
- var AutoScrollActivator;
2024
- (function(AutoScrollActivator2) {
2025
- AutoScrollActivator2[AutoScrollActivator2["Pointer"] = 0] = "Pointer";
2026
- AutoScrollActivator2[AutoScrollActivator2["DraggableRect"] = 1] = "DraggableRect";
2027
- })(AutoScrollActivator || (AutoScrollActivator = {}));
2028
- var TraversalOrder;
2029
- (function(TraversalOrder2) {
2030
- TraversalOrder2[TraversalOrder2["TreeOrder"] = 0] = "TreeOrder";
2031
- TraversalOrder2[TraversalOrder2["ReversedTreeOrder"] = 1] = "ReversedTreeOrder";
2032
- })(TraversalOrder || (TraversalOrder = {}));
2033
- function useAutoScroller(_ref) {
2034
- let {
2035
- acceleration,
2036
- activator = AutoScrollActivator.Pointer,
2037
- canScroll,
2038
- draggingRect,
2039
- enabled,
2040
- interval = 5,
2041
- order = TraversalOrder.TreeOrder,
2042
- pointerCoordinates,
2043
- scrollableAncestors,
2044
- scrollableAncestorRects,
2045
- delta,
2046
- threshold
2047
- } = _ref;
2048
- const scrollIntent = useScrollIntent({
2049
- delta,
2050
- disabled: !enabled
2051
- });
2052
- const [setAutoScrollInterval, clearAutoScrollInterval] = useInterval();
2053
- const scrollSpeed = useRef({
2054
- x: 0,
2055
- y: 0
2056
- });
2057
- const scrollDirection = useRef({
2058
- x: 0,
2059
- y: 0
2060
- });
2061
- const rect = useMemo(() => {
2062
- switch (activator) {
2063
- case AutoScrollActivator.Pointer:
2064
- return pointerCoordinates ? {
2065
- top: pointerCoordinates.y,
2066
- bottom: pointerCoordinates.y,
2067
- left: pointerCoordinates.x,
2068
- right: pointerCoordinates.x
2069
- } : null;
2070
- case AutoScrollActivator.DraggableRect:
2071
- return draggingRect;
2072
- }
2073
- }, [activator, draggingRect, pointerCoordinates]);
2074
- const scrollContainerRef = useRef(null);
2075
- const autoScroll = useCallback(() => {
2076
- const scrollContainer = scrollContainerRef.current;
2077
- if (!scrollContainer) {
2078
- return;
2079
- }
2080
- const scrollLeft = scrollSpeed.current.x * scrollDirection.current.x;
2081
- const scrollTop = scrollSpeed.current.y * scrollDirection.current.y;
2082
- scrollContainer.scrollBy(scrollLeft, scrollTop);
2083
- }, []);
2084
- const sortedScrollableAncestors = useMemo(() => order === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order, scrollableAncestors]);
2085
- useEffect(
2086
- () => {
2087
- if (!enabled || !scrollableAncestors.length || !rect) {
2088
- clearAutoScrollInterval();
2089
- return;
2090
- }
2091
- for (const scrollContainer of sortedScrollableAncestors) {
2092
- if ((canScroll == null ? void 0 : canScroll(scrollContainer)) === false) {
2093
- continue;
2094
- }
2095
- const index = scrollableAncestors.indexOf(scrollContainer);
2096
- const scrollContainerRect = scrollableAncestorRects[index];
2097
- if (!scrollContainerRect) {
2098
- continue;
2099
- }
2100
- const {
2101
- direction,
2102
- speed
2103
- } = getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, rect, acceleration, threshold);
2104
- for (const axis of ["x", "y"]) {
2105
- if (!scrollIntent[axis][direction[axis]]) {
2106
- speed[axis] = 0;
2107
- direction[axis] = 0;
2108
- }
2109
- }
2110
- if (speed.x > 0 || speed.y > 0) {
2111
- clearAutoScrollInterval();
2112
- scrollContainerRef.current = scrollContainer;
2113
- setAutoScrollInterval(autoScroll, interval);
2114
- scrollSpeed.current = speed;
2115
- scrollDirection.current = direction;
2116
- return;
2117
- }
2118
- }
2119
- scrollSpeed.current = {
2120
- x: 0,
2121
- y: 0
2122
- };
2123
- scrollDirection.current = {
2124
- x: 0,
2125
- y: 0
2126
- };
2127
- clearAutoScrollInterval();
2128
- },
2129
- // eslint-disable-next-line react-hooks/exhaustive-deps
2130
- [
2131
- acceleration,
2132
- autoScroll,
2133
- canScroll,
2134
- clearAutoScrollInterval,
2135
- enabled,
2136
- interval,
2137
- // eslint-disable-next-line react-hooks/exhaustive-deps
2138
- JSON.stringify(rect),
2139
- // eslint-disable-next-line react-hooks/exhaustive-deps
2140
- JSON.stringify(scrollIntent),
2141
- setAutoScrollInterval,
2142
- scrollableAncestors,
2143
- sortedScrollableAncestors,
2144
- scrollableAncestorRects,
2145
- // eslint-disable-next-line react-hooks/exhaustive-deps
2146
- JSON.stringify(threshold)
2147
- ]
2148
- );
2149
- }
2150
- const defaultScrollIntent = {
2151
- x: {
2152
- [Direction.Backward]: false,
2153
- [Direction.Forward]: false
2154
- },
2155
- y: {
2156
- [Direction.Backward]: false,
2157
- [Direction.Forward]: false
2158
- }
2159
- };
2160
- function useScrollIntent(_ref2) {
2161
- let {
2162
- delta,
2163
- disabled
2164
- } = _ref2;
2165
- const previousDelta = usePrevious(delta);
2166
- return useLazyMemo((previousIntent) => {
2167
- if (disabled || !previousDelta || !previousIntent) {
2168
- return defaultScrollIntent;
2169
- }
2170
- const direction = {
2171
- x: Math.sign(delta.x - previousDelta.x),
2172
- y: Math.sign(delta.y - previousDelta.y)
2173
- };
2174
- return {
2175
- x: {
2176
- [Direction.Backward]: previousIntent.x[Direction.Backward] || direction.x === -1,
2177
- [Direction.Forward]: previousIntent.x[Direction.Forward] || direction.x === 1
2178
- },
2179
- y: {
2180
- [Direction.Backward]: previousIntent.y[Direction.Backward] || direction.y === -1,
2181
- [Direction.Forward]: previousIntent.y[Direction.Forward] || direction.y === 1
2182
- }
2183
- };
2184
- }, [disabled, delta, previousDelta]);
2185
- }
2186
- function useCachedNode(draggableNodes, id) {
2187
- const draggableNode = id != null ? draggableNodes.get(id) : void 0;
2188
- const node = draggableNode ? draggableNode.node.current : null;
2189
- return useLazyMemo((cachedNode) => {
2190
- var _ref;
2191
- if (id == null) {
2192
- return null;
2193
- }
2194
- return (_ref = node != null ? node : cachedNode) != null ? _ref : null;
2195
- }, [node, id]);
2196
- }
2197
- function useCombineActivators(sensors, getSyntheticHandler) {
2198
- return useMemo(() => sensors.reduce((accumulator, sensor) => {
2199
- const {
2200
- sensor: Sensor
2201
- } = sensor;
2202
- const sensorActivators = Sensor.activators.map((activator) => ({
2203
- eventName: activator.eventName,
2204
- handler: getSyntheticHandler(activator.handler, sensor)
2205
- }));
2206
- return [...accumulator, ...sensorActivators];
2207
- }, []), [sensors, getSyntheticHandler]);
2208
- }
2209
- var MeasuringStrategy;
2210
- (function(MeasuringStrategy2) {
2211
- MeasuringStrategy2[MeasuringStrategy2["Always"] = 0] = "Always";
2212
- MeasuringStrategy2[MeasuringStrategy2["BeforeDragging"] = 1] = "BeforeDragging";
2213
- MeasuringStrategy2[MeasuringStrategy2["WhileDragging"] = 2] = "WhileDragging";
2214
- })(MeasuringStrategy || (MeasuringStrategy = {}));
2215
- var MeasuringFrequency;
2216
- (function(MeasuringFrequency2) {
2217
- MeasuringFrequency2["Optimized"] = "optimized";
2218
- })(MeasuringFrequency || (MeasuringFrequency = {}));
2219
- const defaultValue = /* @__PURE__ */ new Map();
2220
- function useDroppableMeasuring(containers, _ref) {
2221
- let {
2222
- dragging,
2223
- dependencies,
2224
- config
2225
- } = _ref;
2226
- const [queue, setQueue] = useState(null);
2227
- const {
2228
- frequency,
2229
- measure,
2230
- strategy
2231
- } = config;
2232
- const containersRef = useRef(containers);
2233
- const disabled = isDisabled();
2234
- const disabledRef = useLatestValue(disabled);
2235
- const measureDroppableContainers = useCallback(function(ids2) {
2236
- if (ids2 === void 0) {
2237
- ids2 = [];
2238
- }
2239
- if (disabledRef.current) {
2240
- return;
2241
- }
2242
- setQueue((value) => {
2243
- if (value === null) {
2244
- return ids2;
2245
- }
2246
- return value.concat(ids2.filter((id) => !value.includes(id)));
2247
- });
2248
- }, [disabledRef]);
2249
- const timeoutId = useRef(null);
2250
- const droppableRects = useLazyMemo((previousValue) => {
2251
- if (disabled && !dragging) {
2252
- return defaultValue;
2253
- }
2254
- if (!previousValue || previousValue === defaultValue || containersRef.current !== containers || queue != null) {
2255
- const map = /* @__PURE__ */ new Map();
2256
- for (let container2 of containers) {
2257
- if (!container2) {
2258
- continue;
2259
- }
2260
- if (queue && queue.length > 0 && !queue.includes(container2.id) && container2.rect.current) {
2261
- map.set(container2.id, container2.rect.current);
2262
- continue;
2263
- }
2264
- const node = container2.node.current;
2265
- const rect = node ? new Rect(measure(node), node) : null;
2266
- container2.rect.current = rect;
2267
- if (rect) {
2268
- map.set(container2.id, rect);
2269
- }
2270
- }
2271
- return map;
2272
- }
2273
- return previousValue;
2274
- }, [containers, queue, dragging, disabled, measure]);
2275
- useEffect(() => {
2276
- containersRef.current = containers;
2277
- }, [containers]);
2278
- useEffect(
2279
- () => {
2280
- if (disabled) {
2281
- return;
2282
- }
2283
- measureDroppableContainers();
2284
- },
2285
- // eslint-disable-next-line react-hooks/exhaustive-deps
2286
- [dragging, disabled]
2287
- );
2288
- useEffect(
2289
- () => {
2290
- if (queue && queue.length > 0) {
2291
- setQueue(null);
2292
- }
2293
- },
2294
- //eslint-disable-next-line react-hooks/exhaustive-deps
2295
- [JSON.stringify(queue)]
2296
- );
2297
- useEffect(
2298
- () => {
2299
- if (disabled || typeof frequency !== "number" || timeoutId.current !== null) {
2300
- return;
2301
- }
2302
- timeoutId.current = setTimeout(() => {
2303
- measureDroppableContainers();
2304
- timeoutId.current = null;
2305
- }, frequency);
2306
- },
2307
- // eslint-disable-next-line react-hooks/exhaustive-deps
2308
- [frequency, disabled, measureDroppableContainers, ...dependencies]
2309
- );
2310
- return {
2311
- droppableRects,
2312
- measureDroppableContainers,
2313
- measuringScheduled: queue != null
2314
- };
2315
- function isDisabled() {
2316
- switch (strategy) {
2317
- case MeasuringStrategy.Always:
2318
- return false;
2319
- case MeasuringStrategy.BeforeDragging:
2320
- return dragging;
2321
- default:
2322
- return !dragging;
2323
- }
2324
- }
2325
- }
2326
- function useInitialValue(value, computeFn) {
2327
- return useLazyMemo((previousValue) => {
2328
- if (!value) {
2329
- return null;
2330
- }
2331
- if (previousValue) {
2332
- return previousValue;
2333
- }
2334
- return typeof computeFn === "function" ? computeFn(value) : value;
2335
- }, [computeFn, value]);
2336
- }
2337
- function useInitialRect(node, measure) {
2338
- return useInitialValue(node, measure);
2339
- }
2340
- function useMutationObserver(_ref) {
2341
- let {
2342
- callback,
2343
- disabled
2344
- } = _ref;
2345
- const handleMutations = useEvent(callback);
2346
- const mutationObserver = useMemo(() => {
2347
- if (disabled || typeof window === "undefined" || typeof window.MutationObserver === "undefined") {
2348
- return void 0;
2349
- }
2350
- const {
2351
- MutationObserver
2352
- } = window;
2353
- return new MutationObserver(handleMutations);
2354
- }, [handleMutations, disabled]);
2355
- useEffect(() => {
2356
- return () => mutationObserver == null ? void 0 : mutationObserver.disconnect();
2357
- }, [mutationObserver]);
2358
- return mutationObserver;
2359
- }
2360
- function useResizeObserver(_ref) {
2361
- let {
2362
- callback,
2363
- disabled
2364
- } = _ref;
2365
- const handleResize = useEvent(callback);
2366
- const resizeObserver = useMemo(
2367
- () => {
2368
- if (disabled || typeof window === "undefined" || typeof window.ResizeObserver === "undefined") {
2369
- return void 0;
2370
- }
2371
- const {
2372
- ResizeObserver: ResizeObserver2
2373
- } = window;
2374
- return new ResizeObserver2(handleResize);
2375
- },
2376
- // eslint-disable-next-line react-hooks/exhaustive-deps
2377
- [disabled]
2378
- );
2379
- useEffect(() => {
2380
- return () => resizeObserver == null ? void 0 : resizeObserver.disconnect();
2381
- }, [resizeObserver]);
2382
- return resizeObserver;
2383
- }
2384
- function defaultMeasure(element) {
2385
- return new Rect(getClientRect(element), element);
2386
- }
2387
- function useRect(element, measure, fallbackRect) {
2388
- if (measure === void 0) {
2389
- measure = defaultMeasure;
2390
- }
2391
- const [rect, setRect] = useState(null);
2392
- function measureRect() {
2393
- setRect((currentRect) => {
2394
- if (!element) {
2395
- return null;
2396
- }
2397
- if (element.isConnected === false) {
2398
- var _ref;
2399
- return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
2400
- }
2401
- const newRect = measure(element);
2402
- if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
2403
- return currentRect;
2404
- }
2405
- return newRect;
2406
- });
2407
- }
2408
- const mutationObserver = useMutationObserver({
2409
- callback(records) {
2410
- if (!element) {
2411
- return;
2412
- }
2413
- for (const record of records) {
2414
- const {
2415
- type,
2416
- target
2417
- } = record;
2418
- if (type === "childList" && target instanceof HTMLElement && target.contains(element)) {
2419
- measureRect();
2420
- break;
2421
- }
2422
- }
2423
- }
2424
- });
2425
- const resizeObserver = useResizeObserver({
2426
- callback: measureRect
2427
- });
2428
- useIsomorphicLayoutEffect(() => {
2429
- measureRect();
2430
- if (element) {
2431
- resizeObserver == null ? void 0 : resizeObserver.observe(element);
2432
- mutationObserver == null ? void 0 : mutationObserver.observe(document.body, {
2433
- childList: true,
2434
- subtree: true
2435
- });
2436
- } else {
2437
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
2438
- mutationObserver == null ? void 0 : mutationObserver.disconnect();
2439
- }
2440
- }, [element]);
2441
- return rect;
2442
- }
2443
- function useRectDelta(rect) {
2444
- const initialRect = useInitialValue(rect);
2445
- return getRectDelta(rect, initialRect);
2446
- }
2447
- const defaultValue$1 = [];
2448
- function useScrollableAncestors(node) {
2449
- const previousNode = useRef(node);
2450
- const ancestors = useLazyMemo((previousValue) => {
2451
- if (!node) {
2452
- return defaultValue$1;
2453
- }
2454
- if (previousValue && previousValue !== defaultValue$1 && node && previousNode.current && node.parentNode === previousNode.current.parentNode) {
2455
- return previousValue;
2456
- }
2457
- return getScrollableAncestors(node);
2458
- }, [node]);
2459
- useEffect(() => {
2460
- previousNode.current = node;
2461
- }, [node]);
2462
- return ancestors;
2463
- }
2464
- function useScrollOffsets(elements) {
2465
- const [scrollCoordinates, setScrollCoordinates] = useState(null);
2466
- const prevElements = useRef(elements);
2467
- const handleScroll = useCallback((event) => {
2468
- const scrollingElement = getScrollableElement(event.target);
2469
- if (!scrollingElement) {
2470
- return;
2471
- }
2472
- setScrollCoordinates((scrollCoordinates2) => {
2473
- if (!scrollCoordinates2) {
2474
- return null;
2475
- }
2476
- scrollCoordinates2.set(scrollingElement, getScrollCoordinates(scrollingElement));
2477
- return new Map(scrollCoordinates2);
2478
- });
2479
- }, []);
2480
- useEffect(() => {
2481
- const previousElements = prevElements.current;
2482
- if (elements !== previousElements) {
2483
- cleanup(previousElements);
2484
- const entries = elements.map((element) => {
2485
- const scrollableElement = getScrollableElement(element);
2486
- if (scrollableElement) {
2487
- scrollableElement.addEventListener("scroll", handleScroll, {
2488
- passive: true
2489
- });
2490
- return [scrollableElement, getScrollCoordinates(scrollableElement)];
2491
- }
2492
- return null;
2493
- }).filter((entry) => entry != null);
2494
- setScrollCoordinates(entries.length ? new Map(entries) : null);
2495
- prevElements.current = elements;
2496
- }
2497
- return () => {
2498
- cleanup(elements);
2499
- cleanup(previousElements);
2500
- };
2501
- function cleanup(elements2) {
2502
- elements2.forEach((element) => {
2503
- const scrollableElement = getScrollableElement(element);
2504
- scrollableElement == null ? void 0 : scrollableElement.removeEventListener("scroll", handleScroll);
2505
- });
2506
- }
2507
- }, [handleScroll, elements]);
2508
- return useMemo(() => {
2509
- if (elements.length) {
2510
- return scrollCoordinates ? Array.from(scrollCoordinates.values()).reduce((acc, coordinates) => add(acc, coordinates), defaultCoordinates) : getScrollOffsets(elements);
2511
- }
2512
- return defaultCoordinates;
2513
- }, [elements, scrollCoordinates]);
2514
- }
2515
- function useScrollOffsetsDelta(scrollOffsets, dependencies) {
2516
- if (dependencies === void 0) {
2517
- dependencies = [];
2518
- }
2519
- const initialScrollOffsets = useRef(null);
2520
- useEffect(
2521
- () => {
2522
- initialScrollOffsets.current = null;
2523
- },
2524
- // eslint-disable-next-line react-hooks/exhaustive-deps
2525
- dependencies
2526
- );
2527
- useEffect(() => {
2528
- const hasScrollOffsets = scrollOffsets !== defaultCoordinates;
2529
- if (hasScrollOffsets && !initialScrollOffsets.current) {
2530
- initialScrollOffsets.current = scrollOffsets;
2531
- }
2532
- if (!hasScrollOffsets && initialScrollOffsets.current) {
2533
- initialScrollOffsets.current = null;
2534
- }
2535
- }, [scrollOffsets]);
2536
- return initialScrollOffsets.current ? subtract(scrollOffsets, initialScrollOffsets.current) : defaultCoordinates;
2537
- }
2538
- function useSensorSetup(sensors) {
2539
- useEffect(
2540
- () => {
2541
- if (!canUseDOM) {
2542
- return;
2543
- }
2544
- const teardownFns = sensors.map((_ref) => {
2545
- let {
2546
- sensor
2547
- } = _ref;
2548
- return sensor.setup == null ? void 0 : sensor.setup();
2549
- });
2550
- return () => {
2551
- for (const teardown of teardownFns) {
2552
- teardown == null ? void 0 : teardown();
2553
- }
2554
- };
2555
- },
2556
- // TO-DO: Sensors length could theoretically change which would not be a valid dependency
2557
- // eslint-disable-next-line react-hooks/exhaustive-deps
2558
- sensors.map((_ref2) => {
2559
- let {
2560
- sensor
2561
- } = _ref2;
2562
- return sensor;
2563
- })
2564
- );
2565
- }
2566
- function useSyntheticListeners(listeners2, id) {
2567
- return useMemo(() => {
2568
- return listeners2.reduce((acc, _ref) => {
2569
- let {
2570
- eventName,
2571
- handler
2572
- } = _ref;
2573
- acc[eventName] = (event) => {
2574
- handler(event, id);
2575
- };
2576
- return acc;
2577
- }, {});
2578
- }, [listeners2, id]);
2579
- }
2580
- function useWindowRect(element) {
2581
- return useMemo(() => element ? getWindowClientRect(element) : null, [element]);
2582
- }
2583
- const defaultValue$2 = [];
2584
- function useRects(elements, measure) {
2585
- if (measure === void 0) {
2586
- measure = getClientRect;
2587
- }
2588
- const [firstElement] = elements;
2589
- const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
2590
- const [rects, setRects] = useState(defaultValue$2);
2591
- function measureRects() {
2592
- setRects(() => {
2593
- if (!elements.length) {
2594
- return defaultValue$2;
2595
- }
2596
- return elements.map((element) => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
2597
- });
2598
- }
2599
- const resizeObserver = useResizeObserver({
2600
- callback: measureRects
2601
- });
2602
- useIsomorphicLayoutEffect(() => {
2603
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
2604
- measureRects();
2605
- elements.forEach((element) => resizeObserver == null ? void 0 : resizeObserver.observe(element));
2606
- }, [elements]);
2607
- return rects;
2608
- }
2609
- function getMeasurableNode(node) {
2610
- if (!node) {
2611
- return null;
2612
- }
2613
- if (node.children.length > 1) {
2614
- return node;
2615
- }
2616
- const firstChild = node.children[0];
2617
- return isHTMLElement(firstChild) ? firstChild : node;
2618
- }
2619
- function useDragOverlayMeasuring(_ref) {
2620
- let {
2621
- measure
2622
- } = _ref;
2623
- const [rect, setRect] = useState(null);
2624
- const handleResize = useCallback((entries) => {
2625
- for (const {
2626
- target
2627
- } of entries) {
2628
- if (isHTMLElement(target)) {
2629
- setRect((rect2) => {
2630
- const newRect = measure(target);
2631
- return rect2 ? {
2632
- ...rect2,
2633
- width: newRect.width,
2634
- height: newRect.height
2635
- } : newRect;
2636
- });
2637
- break;
2638
- }
2639
- }
2640
- }, [measure]);
2641
- const resizeObserver = useResizeObserver({
2642
- callback: handleResize
2643
- });
2644
- const handleNodeChange = useCallback((element) => {
2645
- const node = getMeasurableNode(element);
2646
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
2647
- if (node) {
2648
- resizeObserver == null ? void 0 : resizeObserver.observe(node);
2649
- }
2650
- setRect(node ? measure(node) : null);
2651
- }, [measure, resizeObserver]);
2652
- const [nodeRef, setRef] = useNodeRef(handleNodeChange);
2653
- return useMemo(() => ({
2654
- nodeRef,
2655
- rect,
2656
- setRef
2657
- }), [rect, nodeRef, setRef]);
2658
- }
2659
- const defaultSensors = [{
2660
- sensor: PointerSensor,
2661
- options: {}
2662
- }, {
2663
- sensor: KeyboardSensor,
2664
- options: {}
2665
- }];
2666
- const defaultData = {
2667
- current: {}
2668
- };
2669
- const defaultMeasuringConfiguration = {
2670
- draggable: {
2671
- measure: getTransformAgnosticClientRect
2672
- },
2673
- droppable: {
2674
- measure: getTransformAgnosticClientRect,
2675
- strategy: MeasuringStrategy.WhileDragging,
2676
- frequency: MeasuringFrequency.Optimized
2677
- },
2678
- dragOverlay: {
2679
- measure: getClientRect
2680
- }
2681
- };
2682
- class DroppableContainersMap extends Map {
2683
- get(id) {
2684
- var _super$get;
2685
- return id != null ? (_super$get = super.get(id)) != null ? _super$get : void 0 : void 0;
2686
- }
2687
- toArray() {
2688
- return Array.from(this.values());
2689
- }
2690
- getEnabled() {
2691
- return this.toArray().filter((_ref) => {
2692
- let {
2693
- disabled
2694
- } = _ref;
2695
- return !disabled;
2696
- });
2697
- }
2698
- getNodeFor(id) {
2699
- var _this$get$node$curren, _this$get;
2700
- return (_this$get$node$curren = (_this$get = this.get(id)) == null ? void 0 : _this$get.node.current) != null ? _this$get$node$curren : void 0;
2701
- }
2702
- }
2703
- const defaultPublicContext = {
2704
- activatorEvent: null,
2705
- active: null,
2706
- activeNode: null,
2707
- activeNodeRect: null,
2708
- collisions: null,
2709
- containerNodeRect: null,
2710
- draggableNodes: /* @__PURE__ */ new Map(),
2711
- droppableRects: /* @__PURE__ */ new Map(),
2712
- droppableContainers: /* @__PURE__ */ new DroppableContainersMap(),
2713
- over: null,
2714
- dragOverlay: {
2715
- nodeRef: {
2716
- current: null
2717
- },
2718
- rect: null,
2719
- setRef: noop
2720
- },
2721
- scrollableAncestors: [],
2722
- scrollableAncestorRects: [],
2723
- measuringConfiguration: defaultMeasuringConfiguration,
2724
- measureDroppableContainers: noop,
2725
- windowRect: null,
2726
- measuringScheduled: false
2727
- };
2728
- const defaultInternalContext = {
2729
- activatorEvent: null,
2730
- activators: [],
2731
- active: null,
2732
- activeNodeRect: null,
2733
- ariaDescribedById: {
2734
- draggable: ""
2735
- },
2736
- dispatch: noop,
2737
- draggableNodes: /* @__PURE__ */ new Map(),
2738
- over: null,
2739
- measureDroppableContainers: noop
2740
- };
2741
- const InternalContext = /* @__PURE__ */ createContext(defaultInternalContext);
2742
- const PublicContext = /* @__PURE__ */ createContext(defaultPublicContext);
2743
- function getInitialState() {
2744
- return {
2745
- draggable: {
2746
- active: null,
2747
- initialCoordinates: {
2748
- x: 0,
2749
- y: 0
2750
- },
2751
- nodes: /* @__PURE__ */ new Map(),
2752
- translate: {
2753
- x: 0,
2754
- y: 0
2755
- }
2756
- },
2757
- droppable: {
2758
- containers: new DroppableContainersMap()
2759
- }
2760
- };
2761
- }
2762
- function reducer(state, action) {
2763
- switch (action.type) {
2764
- case Action.DragStart:
2765
- return {
2766
- ...state,
2767
- draggable: {
2768
- ...state.draggable,
2769
- initialCoordinates: action.initialCoordinates,
2770
- active: action.active
2771
- }
2772
- };
2773
- case Action.DragMove:
2774
- if (state.draggable.active == null) {
2775
- return state;
2776
- }
2777
- return {
2778
- ...state,
2779
- draggable: {
2780
- ...state.draggable,
2781
- translate: {
2782
- x: action.coordinates.x - state.draggable.initialCoordinates.x,
2783
- y: action.coordinates.y - state.draggable.initialCoordinates.y
2784
- }
2785
- }
2786
- };
2787
- case Action.DragEnd:
2788
- case Action.DragCancel:
2789
- return {
2790
- ...state,
2791
- draggable: {
2792
- ...state.draggable,
2793
- active: null,
2794
- initialCoordinates: {
2795
- x: 0,
2796
- y: 0
2797
- },
2798
- translate: {
2799
- x: 0,
2800
- y: 0
2801
- }
2802
- }
2803
- };
2804
- case Action.RegisterDroppable: {
2805
- const {
2806
- element
2807
- } = action;
2808
- const {
2809
- id
2810
- } = element;
2811
- const containers = new DroppableContainersMap(state.droppable.containers);
2812
- containers.set(id, element);
2813
- return {
2814
- ...state,
2815
- droppable: {
2816
- ...state.droppable,
2817
- containers
2818
- }
2819
- };
2820
- }
2821
- case Action.SetDroppableDisabled: {
2822
- const {
2823
- id,
2824
- key: key2,
2825
- disabled
2826
- } = action;
2827
- const element = state.droppable.containers.get(id);
2828
- if (!element || key2 !== element.key) {
2829
- return state;
2830
- }
2831
- const containers = new DroppableContainersMap(state.droppable.containers);
2832
- containers.set(id, {
2833
- ...element,
2834
- disabled
2835
- });
2836
- return {
2837
- ...state,
2838
- droppable: {
2839
- ...state.droppable,
2840
- containers
2841
- }
2842
- };
2843
- }
2844
- case Action.UnregisterDroppable: {
2845
- const {
2846
- id,
2847
- key: key2
2848
- } = action;
2849
- const element = state.droppable.containers.get(id);
2850
- if (!element || key2 !== element.key) {
2851
- return state;
2852
- }
2853
- const containers = new DroppableContainersMap(state.droppable.containers);
2854
- containers.delete(id);
2855
- return {
2856
- ...state,
2857
- droppable: {
2858
- ...state.droppable,
2859
- containers
2860
- }
2861
- };
2862
- }
2863
- default: {
2864
- return state;
2865
- }
2866
- }
2867
- }
2868
- function RestoreFocus(_ref) {
2869
- let {
2870
- disabled
2871
- } = _ref;
2872
- const {
2873
- active,
2874
- activatorEvent,
2875
- draggableNodes
2876
- } = useContext(InternalContext);
2877
- const previousActivatorEvent = usePrevious(activatorEvent);
2878
- const previousActiveId = usePrevious(active == null ? void 0 : active.id);
2879
- useEffect(() => {
2880
- if (disabled) {
2881
- return;
2882
- }
2883
- if (!activatorEvent && previousActivatorEvent && previousActiveId != null) {
2884
- if (!isKeyboardEvent(previousActivatorEvent)) {
2885
- return;
2886
- }
2887
- if (document.activeElement === previousActivatorEvent.target) {
2888
- return;
2889
- }
2890
- const draggableNode = draggableNodes.get(previousActiveId);
2891
- if (!draggableNode) {
2892
- return;
2893
- }
2894
- const {
2895
- activatorNode,
2896
- node
2897
- } = draggableNode;
2898
- if (!activatorNode.current && !node.current) {
2899
- return;
2900
- }
2901
- requestAnimationFrame(() => {
2902
- for (const element of [activatorNode.current, node.current]) {
2903
- if (!element) {
2904
- continue;
2905
- }
2906
- const focusableNode = findFirstFocusableNode(element);
2907
- if (focusableNode) {
2908
- focusableNode.focus();
2909
- break;
2910
- }
2911
- }
2912
- });
2913
- }
2914
- }, [activatorEvent, disabled, draggableNodes, previousActiveId, previousActivatorEvent]);
2915
- return null;
2916
- }
2917
- function applyModifiers(modifiers, _ref) {
2918
- let {
2919
- transform,
2920
- ...args
2921
- } = _ref;
2922
- return modifiers != null && modifiers.length ? modifiers.reduce((accumulator, modifier) => {
2923
- return modifier({
2924
- transform: accumulator,
2925
- ...args
2926
- });
2927
- }, transform) : transform;
2928
- }
2929
- function useMeasuringConfiguration(config) {
2930
- return useMemo(
2931
- () => ({
2932
- draggable: {
2933
- ...defaultMeasuringConfiguration.draggable,
2934
- ...config == null ? void 0 : config.draggable
2935
- },
2936
- droppable: {
2937
- ...defaultMeasuringConfiguration.droppable,
2938
- ...config == null ? void 0 : config.droppable
2939
- },
2940
- dragOverlay: {
2941
- ...defaultMeasuringConfiguration.dragOverlay,
2942
- ...config == null ? void 0 : config.dragOverlay
2943
- }
2944
- }),
2945
- // eslint-disable-next-line react-hooks/exhaustive-deps
2946
- [config == null ? void 0 : config.draggable, config == null ? void 0 : config.droppable, config == null ? void 0 : config.dragOverlay]
2947
- );
2948
- }
2949
- function useLayoutShiftScrollCompensation(_ref) {
2950
- let {
2951
- activeNode,
2952
- measure,
2953
- initialRect,
2954
- config = true
2955
- } = _ref;
2956
- const initialized = useRef(false);
2957
- const {
2958
- x,
2959
- y
2960
- } = typeof config === "boolean" ? {
2961
- x: config,
2962
- y: config
2963
- } : config;
2964
- useIsomorphicLayoutEffect(() => {
2965
- const disabled = !x && !y;
2966
- if (disabled || !activeNode) {
2967
- initialized.current = false;
2968
- return;
2969
- }
2970
- if (initialized.current || !initialRect) {
2971
- return;
2972
- }
2973
- const node = activeNode == null ? void 0 : activeNode.node.current;
2974
- if (!node || node.isConnected === false) {
2975
- return;
2976
- }
2977
- const rect = measure(node);
2978
- const rectDelta = getRectDelta(rect, initialRect);
2979
- if (!x) {
2980
- rectDelta.x = 0;
2981
- }
2982
- if (!y) {
2983
- rectDelta.y = 0;
2984
- }
2985
- initialized.current = true;
2986
- if (Math.abs(rectDelta.x) > 0 || Math.abs(rectDelta.y) > 0) {
2987
- const firstScrollableAncestor = getFirstScrollableAncestor(node);
2988
- if (firstScrollableAncestor) {
2989
- firstScrollableAncestor.scrollBy({
2990
- top: rectDelta.y,
2991
- left: rectDelta.x
2992
- });
2993
- }
2994
- }
2995
- }, [activeNode, x, y, initialRect, measure]);
2996
- }
2997
- const ActiveDraggableContext = /* @__PURE__ */ createContext({
2998
- ...defaultCoordinates,
2999
- scaleX: 1,
3000
- scaleY: 1
3001
- });
3002
- var Status;
3003
- (function(Status2) {
3004
- Status2[Status2["Uninitialized"] = 0] = "Uninitialized";
3005
- Status2[Status2["Initializing"] = 1] = "Initializing";
3006
- Status2[Status2["Initialized"] = 2] = "Initialized";
3007
- })(Status || (Status = {}));
3008
- const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
3009
- var _sensorContext$curren, _dragOverlay$nodeRef$, _dragOverlay$rect, _over$rect;
3010
- let {
3011
- id,
3012
- accessibility,
3013
- autoScroll = true,
3014
- children,
3015
- sensors = defaultSensors,
3016
- collisionDetection = rectIntersection,
3017
- measuring,
3018
- modifiers,
3019
- ...props
3020
- } = _ref;
3021
- const store = useReducer(reducer, void 0, getInitialState);
3022
- const [state, dispatch] = store;
3023
- const [dispatchMonitorEvent, registerMonitorListener] = useDndMonitorProvider();
3024
- const [status, setStatus] = useState(Status.Uninitialized);
3025
- const isInitialized = status === Status.Initialized;
3026
- const {
3027
- draggable: {
3028
- active: activeId,
3029
- nodes: draggableNodes,
3030
- translate
3031
- },
3032
- droppable: {
3033
- containers: droppableContainers
3034
- }
3035
- } = state;
3036
- const node = activeId != null ? draggableNodes.get(activeId) : null;
3037
- const activeRects = useRef({
3038
- initial: null,
3039
- translated: null
3040
- });
3041
- const active = useMemo(() => {
3042
- var _node$data;
3043
- return activeId != null ? {
3044
- id: activeId,
3045
- // It's possible for the active node to unmount while dragging
3046
- data: (_node$data = node == null ? void 0 : node.data) != null ? _node$data : defaultData,
3047
- rect: activeRects
3048
- } : null;
3049
- }, [activeId, node]);
3050
- const activeRef = useRef(null);
3051
- const [activeSensor, setActiveSensor] = useState(null);
3052
- const [activatorEvent, setActivatorEvent] = useState(null);
3053
- const latestProps = useLatestValue(props, Object.values(props));
3054
- const draggableDescribedById = useUniqueId("DndDescribedBy", id);
3055
- const enabledDroppableContainers = useMemo(() => droppableContainers.getEnabled(), [droppableContainers]);
3056
- const measuringConfiguration = useMeasuringConfiguration(measuring);
3057
- const {
3058
- droppableRects,
3059
- measureDroppableContainers,
3060
- measuringScheduled
3061
- } = useDroppableMeasuring(enabledDroppableContainers, {
3062
- dragging: isInitialized,
3063
- dependencies: [translate.x, translate.y],
3064
- config: measuringConfiguration.droppable
3065
- });
3066
- const activeNode = useCachedNode(draggableNodes, activeId);
3067
- const activationCoordinates = useMemo(() => activatorEvent ? getEventCoordinates(activatorEvent) : null, [activatorEvent]);
3068
- const autoScrollOptions = getAutoScrollerOptions();
3069
- const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
3070
- useLayoutShiftScrollCompensation({
3071
- activeNode: activeId != null ? draggableNodes.get(activeId) : null,
3072
- config: autoScrollOptions.layoutShiftCompensation,
3073
- initialRect: initialActiveNodeRect,
3074
- measure: measuringConfiguration.draggable.measure
3075
- });
3076
- const activeNodeRect = useRect(activeNode, measuringConfiguration.draggable.measure, initialActiveNodeRect);
3077
- const containerNodeRect = useRect(activeNode ? activeNode.parentElement : null);
3078
- const sensorContext = useRef({
3079
- activatorEvent: null,
3080
- active: null,
3081
- activeNode,
3082
- collisionRect: null,
3083
- collisions: null,
3084
- droppableRects,
3085
- draggableNodes,
3086
- draggingNode: null,
3087
- draggingNodeRect: null,
3088
- droppableContainers,
3089
- over: null,
3090
- scrollableAncestors: [],
3091
- scrollAdjustedTranslate: null
3092
- });
3093
- const overNode = droppableContainers.getNodeFor((_sensorContext$curren = sensorContext.current.over) == null ? void 0 : _sensorContext$curren.id);
3094
- const dragOverlay = useDragOverlayMeasuring({
3095
- measure: measuringConfiguration.dragOverlay.measure
3096
- });
3097
- const draggingNode = (_dragOverlay$nodeRef$ = dragOverlay.nodeRef.current) != null ? _dragOverlay$nodeRef$ : activeNode;
3098
- const draggingNodeRect = isInitialized ? (_dragOverlay$rect = dragOverlay.rect) != null ? _dragOverlay$rect : activeNodeRect : null;
3099
- const usesDragOverlay = Boolean(dragOverlay.nodeRef.current && dragOverlay.rect);
3100
- const nodeRectDelta = useRectDelta(usesDragOverlay ? null : activeNodeRect);
3101
- const windowRect = useWindowRect(draggingNode ? getWindow(draggingNode) : null);
3102
- const scrollableAncestors = useScrollableAncestors(isInitialized ? overNode != null ? overNode : activeNode : null);
3103
- const scrollableAncestorRects = useRects(scrollableAncestors);
3104
- const modifiedTranslate = applyModifiers(modifiers, {
3105
- transform: {
3106
- x: translate.x - nodeRectDelta.x,
3107
- y: translate.y - nodeRectDelta.y,
3108
- scaleX: 1,
3109
- scaleY: 1
3110
- },
3111
- activatorEvent,
3112
- active,
3113
- activeNodeRect,
3114
- containerNodeRect,
3115
- draggingNodeRect,
3116
- over: sensorContext.current.over,
3117
- overlayNodeRect: dragOverlay.rect,
3118
- scrollableAncestors,
3119
- scrollableAncestorRects,
3120
- windowRect
3121
- });
3122
- const pointerCoordinates = activationCoordinates ? add(activationCoordinates, translate) : null;
3123
- const scrollOffsets = useScrollOffsets(scrollableAncestors);
3124
- const scrollAdjustment = useScrollOffsetsDelta(scrollOffsets);
3125
- const activeNodeScrollDelta = useScrollOffsetsDelta(scrollOffsets, [activeNodeRect]);
3126
- const scrollAdjustedTranslate = add(modifiedTranslate, scrollAdjustment);
3127
- const collisionRect = draggingNodeRect ? getAdjustedRect(draggingNodeRect, modifiedTranslate) : null;
3128
- const collisions = active && collisionRect ? collisionDetection({
3129
- active,
3130
- collisionRect,
3131
- droppableRects,
3132
- droppableContainers: enabledDroppableContainers,
3133
- pointerCoordinates
3134
- }) : null;
3135
- const overId = getFirstCollision(collisions, "id");
3136
- const [over, setOver] = useState(null);
3137
- const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
3138
- const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
3139
- const activeSensorRef = useRef(null);
3140
- const instantiateSensor = useCallback(
3141
- (event, _ref2) => {
3142
- let {
3143
- sensor: Sensor,
3144
- options
3145
- } = _ref2;
3146
- if (activeRef.current == null) {
3147
- return;
3148
- }
3149
- const activeNode2 = draggableNodes.get(activeRef.current);
3150
- if (!activeNode2) {
3151
- return;
3152
- }
3153
- const activatorEvent2 = event.nativeEvent;
3154
- const sensorInstance = new Sensor({
3155
- active: activeRef.current,
3156
- activeNode: activeNode2,
3157
- event: activatorEvent2,
3158
- options,
3159
- // Sensors need to be instantiated with refs for arguments that change over time
3160
- // otherwise they are frozen in time with the stale arguments
3161
- context: sensorContext,
3162
- onAbort(id2) {
3163
- const draggableNode = draggableNodes.get(id2);
3164
- if (!draggableNode) {
3165
- return;
3166
- }
3167
- const {
3168
- onDragAbort
3169
- } = latestProps.current;
3170
- const event2 = {
3171
- id: id2
3172
- };
3173
- onDragAbort == null ? void 0 : onDragAbort(event2);
3174
- dispatchMonitorEvent({
3175
- type: "onDragAbort",
3176
- event: event2
3177
- });
3178
- },
3179
- onPending(id2, constraint, initialCoordinates, offset) {
3180
- const draggableNode = draggableNodes.get(id2);
3181
- if (!draggableNode) {
3182
- return;
3183
- }
3184
- const {
3185
- onDragPending
3186
- } = latestProps.current;
3187
- const event2 = {
3188
- id: id2,
3189
- constraint,
3190
- initialCoordinates,
3191
- offset
3192
- };
3193
- onDragPending == null ? void 0 : onDragPending(event2);
3194
- dispatchMonitorEvent({
3195
- type: "onDragPending",
3196
- event: event2
3197
- });
3198
- },
3199
- onStart(initialCoordinates) {
3200
- const id2 = activeRef.current;
3201
- if (id2 == null) {
3202
- return;
3203
- }
3204
- const draggableNode = draggableNodes.get(id2);
3205
- if (!draggableNode) {
3206
- return;
3207
- }
3208
- const {
3209
- onDragStart
3210
- } = latestProps.current;
3211
- const event2 = {
3212
- activatorEvent: activatorEvent2,
3213
- active: {
3214
- id: id2,
3215
- data: draggableNode.data,
3216
- rect: activeRects
3217
- }
3218
- };
3219
- unstable_batchedUpdates(() => {
3220
- onDragStart == null ? void 0 : onDragStart(event2);
3221
- setStatus(Status.Initializing);
3222
- dispatch({
3223
- type: Action.DragStart,
3224
- initialCoordinates,
3225
- active: id2
3226
- });
3227
- dispatchMonitorEvent({
3228
- type: "onDragStart",
3229
- event: event2
3230
- });
3231
- setActiveSensor(activeSensorRef.current);
3232
- setActivatorEvent(activatorEvent2);
3233
- });
3234
- },
3235
- onMove(coordinates) {
3236
- dispatch({
3237
- type: Action.DragMove,
3238
- coordinates
3239
- });
3240
- },
3241
- onEnd: createHandler(Action.DragEnd),
3242
- onCancel: createHandler(Action.DragCancel)
3243
- });
3244
- activeSensorRef.current = sensorInstance;
3245
- function createHandler(type) {
3246
- return async function handler() {
3247
- const {
3248
- active: active2,
3249
- collisions: collisions2,
3250
- over: over2,
3251
- scrollAdjustedTranslate: scrollAdjustedTranslate2
3252
- } = sensorContext.current;
3253
- let event2 = null;
3254
- if (active2 && scrollAdjustedTranslate2) {
3255
- const {
3256
- cancelDrop
3257
- } = latestProps.current;
3258
- event2 = {
3259
- activatorEvent: activatorEvent2,
3260
- active: active2,
3261
- collisions: collisions2,
3262
- delta: scrollAdjustedTranslate2,
3263
- over: over2
3264
- };
3265
- if (type === Action.DragEnd && typeof cancelDrop === "function") {
3266
- const shouldCancel = await Promise.resolve(cancelDrop(event2));
3267
- if (shouldCancel) {
3268
- type = Action.DragCancel;
3269
- }
3270
- }
3271
- }
3272
- activeRef.current = null;
3273
- unstable_batchedUpdates(() => {
3274
- dispatch({
3275
- type
3276
- });
3277
- setStatus(Status.Uninitialized);
3278
- setOver(null);
3279
- setActiveSensor(null);
3280
- setActivatorEvent(null);
3281
- activeSensorRef.current = null;
3282
- const eventName = type === Action.DragEnd ? "onDragEnd" : "onDragCancel";
3283
- if (event2) {
3284
- const handler2 = latestProps.current[eventName];
3285
- handler2 == null ? void 0 : handler2(event2);
3286
- dispatchMonitorEvent({
3287
- type: eventName,
3288
- event: event2
3289
- });
3290
- }
3291
- });
3292
- };
3293
- }
3294
- },
3295
- // eslint-disable-next-line react-hooks/exhaustive-deps
3296
- [draggableNodes]
3297
- );
3298
- const bindActivatorToSensorInstantiator = useCallback((handler, sensor) => {
3299
- return (event, active2) => {
3300
- const nativeEvent = event.nativeEvent;
3301
- const activeDraggableNode = draggableNodes.get(active2);
3302
- if (
3303
- // Another sensor is already instantiating
3304
- activeRef.current !== null || // No active draggable
3305
- !activeDraggableNode || // Event has already been captured
3306
- nativeEvent.dndKit || nativeEvent.defaultPrevented
3307
- ) {
3308
- return;
3309
- }
3310
- const activationContext = {
3311
- active: activeDraggableNode
3312
- };
3313
- const shouldActivate = handler(event, sensor.options, activationContext);
3314
- if (shouldActivate === true) {
3315
- nativeEvent.dndKit = {
3316
- capturedBy: sensor.sensor
3317
- };
3318
- activeRef.current = active2;
3319
- instantiateSensor(event, sensor);
3320
- }
3321
- };
3322
- }, [draggableNodes, instantiateSensor]);
3323
- const activators = useCombineActivators(sensors, bindActivatorToSensorInstantiator);
3324
- useSensorSetup(sensors);
3325
- useIsomorphicLayoutEffect(() => {
3326
- if (activeNodeRect && status === Status.Initializing) {
3327
- setStatus(Status.Initialized);
3328
- }
3329
- }, [activeNodeRect, status]);
3330
- useEffect(
3331
- () => {
3332
- const {
3333
- onDragMove
3334
- } = latestProps.current;
3335
- const {
3336
- active: active2,
3337
- activatorEvent: activatorEvent2,
3338
- collisions: collisions2,
3339
- over: over2
3340
- } = sensorContext.current;
3341
- if (!active2 || !activatorEvent2) {
3342
- return;
3343
- }
3344
- const event = {
3345
- active: active2,
3346
- activatorEvent: activatorEvent2,
3347
- collisions: collisions2,
3348
- delta: {
3349
- x: scrollAdjustedTranslate.x,
3350
- y: scrollAdjustedTranslate.y
3351
- },
3352
- over: over2
3353
- };
3354
- unstable_batchedUpdates(() => {
3355
- onDragMove == null ? void 0 : onDragMove(event);
3356
- dispatchMonitorEvent({
3357
- type: "onDragMove",
3358
- event
3359
- });
3360
- });
3361
- },
3362
- // eslint-disable-next-line react-hooks/exhaustive-deps
3363
- [scrollAdjustedTranslate.x, scrollAdjustedTranslate.y]
3364
- );
3365
- useEffect(
3366
- () => {
3367
- const {
3368
- active: active2,
3369
- activatorEvent: activatorEvent2,
3370
- collisions: collisions2,
3371
- droppableContainers: droppableContainers2,
3372
- scrollAdjustedTranslate: scrollAdjustedTranslate2
3373
- } = sensorContext.current;
3374
- if (!active2 || activeRef.current == null || !activatorEvent2 || !scrollAdjustedTranslate2) {
3375
- return;
3376
- }
3377
- const {
3378
- onDragOver
3379
- } = latestProps.current;
3380
- const overContainer = droppableContainers2.get(overId);
3381
- const over2 = overContainer && overContainer.rect.current ? {
3382
- id: overContainer.id,
3383
- rect: overContainer.rect.current,
3384
- data: overContainer.data,
3385
- disabled: overContainer.disabled
3386
- } : null;
3387
- const event = {
3388
- active: active2,
3389
- activatorEvent: activatorEvent2,
3390
- collisions: collisions2,
3391
- delta: {
3392
- x: scrollAdjustedTranslate2.x,
3393
- y: scrollAdjustedTranslate2.y
3394
- },
3395
- over: over2
3396
- };
3397
- unstable_batchedUpdates(() => {
3398
- setOver(over2);
3399
- onDragOver == null ? void 0 : onDragOver(event);
3400
- dispatchMonitorEvent({
3401
- type: "onDragOver",
3402
- event
3403
- });
3404
- });
3405
- },
3406
- // eslint-disable-next-line react-hooks/exhaustive-deps
3407
- [overId]
3408
- );
3409
- useIsomorphicLayoutEffect(() => {
3410
- sensorContext.current = {
3411
- activatorEvent,
3412
- active,
3413
- activeNode,
3414
- collisionRect,
3415
- collisions,
3416
- droppableRects,
3417
- draggableNodes,
3418
- draggingNode,
3419
- draggingNodeRect,
3420
- droppableContainers,
3421
- over,
3422
- scrollableAncestors,
3423
- scrollAdjustedTranslate
3424
- };
3425
- activeRects.current = {
3426
- initial: draggingNodeRect,
3427
- translated: collisionRect
3428
- };
3429
- }, [active, activeNode, collisions, collisionRect, draggableNodes, draggingNode, draggingNodeRect, droppableRects, droppableContainers, over, scrollableAncestors, scrollAdjustedTranslate]);
3430
- useAutoScroller({
3431
- ...autoScrollOptions,
3432
- delta: translate,
3433
- draggingRect: collisionRect,
3434
- pointerCoordinates,
3435
- scrollableAncestors,
3436
- scrollableAncestorRects
3437
- });
3438
- const publicContext = useMemo(() => {
3439
- const context = {
3440
- active,
3441
- activeNode,
3442
- activeNodeRect,
3443
- activatorEvent,
3444
- collisions,
3445
- containerNodeRect,
3446
- dragOverlay,
3447
- draggableNodes,
3448
- droppableContainers,
3449
- droppableRects,
3450
- over,
3451
- measureDroppableContainers,
3452
- scrollableAncestors,
3453
- scrollableAncestorRects,
3454
- measuringConfiguration,
3455
- measuringScheduled,
3456
- windowRect
3457
- };
3458
- return context;
3459
- }, [active, activeNode, activeNodeRect, activatorEvent, collisions, containerNodeRect, dragOverlay, draggableNodes, droppableContainers, droppableRects, over, measureDroppableContainers, scrollableAncestors, scrollableAncestorRects, measuringConfiguration, measuringScheduled, windowRect]);
3460
- const internalContext = useMemo(() => {
3461
- const context = {
3462
- activatorEvent,
3463
- activators,
3464
- active,
3465
- activeNodeRect,
3466
- ariaDescribedById: {
3467
- draggable: draggableDescribedById
3468
- },
3469
- dispatch,
3470
- draggableNodes,
3471
- over,
3472
- measureDroppableContainers
3473
- };
3474
- return context;
3475
- }, [activatorEvent, activators, active, activeNodeRect, dispatch, draggableDescribedById, draggableNodes, over, measureDroppableContainers]);
3476
- return React.createElement(DndMonitorContext.Provider, {
3477
- value: registerMonitorListener
3478
- }, React.createElement(InternalContext.Provider, {
3479
- value: internalContext
3480
- }, React.createElement(PublicContext.Provider, {
3481
- value: publicContext
3482
- }, React.createElement(ActiveDraggableContext.Provider, {
3483
- value: transform
3484
- }, children)), React.createElement(RestoreFocus, {
3485
- disabled: (accessibility == null ? void 0 : accessibility.restoreFocus) === false
3486
- })), React.createElement(Accessibility, {
3487
- ...accessibility,
3488
- hiddenTextDescribedById: draggableDescribedById
3489
- }));
3490
- function getAutoScrollerOptions() {
3491
- const activeSensorDisablesAutoscroll = (activeSensor == null ? void 0 : activeSensor.autoScrollEnabled) === false;
3492
- const autoScrollGloballyDisabled = typeof autoScroll === "object" ? autoScroll.enabled === false : autoScroll === false;
3493
- const enabled = isInitialized && !activeSensorDisablesAutoscroll && !autoScrollGloballyDisabled;
3494
- if (typeof autoScroll === "object") {
3495
- return {
3496
- ...autoScroll,
3497
- enabled
3498
- };
3499
- }
3500
- return {
3501
- enabled
3502
- };
3503
- }
3504
- });
3505
- const NullContext = /* @__PURE__ */ createContext(null);
3506
- const defaultRole = "button";
3507
- const ID_PREFIX$1 = "Draggable";
3508
- function useDraggable(_ref) {
3509
- let {
3510
- id,
3511
- data,
3512
- disabled = false,
3513
- attributes
3514
- } = _ref;
3515
- const key2 = useUniqueId(ID_PREFIX$1);
3516
- const {
3517
- activators,
3518
- activatorEvent,
3519
- active,
3520
- activeNodeRect,
3521
- ariaDescribedById,
3522
- draggableNodes,
3523
- over
3524
- } = useContext(InternalContext);
3525
- const {
3526
- role = defaultRole,
3527
- roleDescription = "draggable",
3528
- tabIndex = 0
3529
- } = attributes != null ? attributes : {};
3530
- const isDragging = (active == null ? void 0 : active.id) === id;
3531
- const transform = useContext(isDragging ? ActiveDraggableContext : NullContext);
3532
- const [node, setNodeRef] = useNodeRef();
3533
- const [activatorNode, setActivatorNodeRef] = useNodeRef();
3534
- const listeners2 = useSyntheticListeners(activators, id);
3535
- const dataRef = useLatestValue(data);
3536
- useIsomorphicLayoutEffect(
3537
- () => {
3538
- draggableNodes.set(id, {
3539
- id,
3540
- key: key2,
3541
- node,
3542
- activatorNode,
3543
- data: dataRef
3544
- });
3545
- return () => {
3546
- const node2 = draggableNodes.get(id);
3547
- if (node2 && node2.key === key2) {
3548
- draggableNodes.delete(id);
3549
- }
3550
- };
3551
- },
3552
- // eslint-disable-next-line react-hooks/exhaustive-deps
3553
- [draggableNodes, id]
3554
- );
3555
- const memoizedAttributes = useMemo(() => ({
3556
- role,
3557
- tabIndex,
3558
- "aria-disabled": disabled,
3559
- "aria-pressed": isDragging && role === defaultRole ? true : void 0,
3560
- "aria-roledescription": roleDescription,
3561
- "aria-describedby": ariaDescribedById.draggable
3562
- }), [disabled, role, tabIndex, isDragging, roleDescription, ariaDescribedById.draggable]);
3563
- return {
3564
- active,
3565
- activatorEvent,
3566
- activeNodeRect,
3567
- attributes: memoizedAttributes,
3568
- isDragging,
3569
- listeners: disabled ? void 0 : listeners2,
3570
- node,
3571
- over,
3572
- setNodeRef,
3573
- setActivatorNodeRef,
3574
- transform
3575
- };
3576
- }
3577
- function useDndContext() {
3578
- return useContext(PublicContext);
3579
- }
3580
- const ID_PREFIX$1$1 = "Droppable";
3581
- const defaultResizeObserverConfig = {
3582
- timeout: 25
3583
- };
3584
- function useDroppable(_ref) {
3585
- let {
3586
- data,
3587
- disabled = false,
3588
- id,
3589
- resizeObserverConfig
3590
- } = _ref;
3591
- const key2 = useUniqueId(ID_PREFIX$1$1);
3592
- const {
3593
- active,
3594
- dispatch,
3595
- over,
3596
- measureDroppableContainers
3597
- } = useContext(InternalContext);
3598
- const previous = useRef({
3599
- disabled
3600
- });
3601
- const resizeObserverConnected = useRef(false);
3602
- const rect = useRef(null);
3603
- const callbackId = useRef(null);
3604
- const {
3605
- disabled: resizeObserverDisabled,
3606
- updateMeasurementsFor,
3607
- timeout: resizeObserverTimeout
3608
- } = {
3609
- ...defaultResizeObserverConfig,
3610
- ...resizeObserverConfig
3611
- };
3612
- const ids2 = useLatestValue(updateMeasurementsFor != null ? updateMeasurementsFor : id);
3613
- const handleResize = useCallback(
3614
- () => {
3615
- if (!resizeObserverConnected.current) {
3616
- resizeObserverConnected.current = true;
3617
- return;
3618
- }
3619
- if (callbackId.current != null) {
3620
- clearTimeout(callbackId.current);
3621
- }
3622
- callbackId.current = setTimeout(() => {
3623
- measureDroppableContainers(Array.isArray(ids2.current) ? ids2.current : [ids2.current]);
3624
- callbackId.current = null;
3625
- }, resizeObserverTimeout);
3626
- },
3627
- //eslint-disable-next-line react-hooks/exhaustive-deps
3628
- [resizeObserverTimeout]
3629
- );
3630
- const resizeObserver = useResizeObserver({
3631
- callback: handleResize,
3632
- disabled: resizeObserverDisabled || !active
3633
- });
3634
- const handleNodeChange = useCallback((newElement, previousElement) => {
3635
- if (!resizeObserver) {
3636
- return;
3637
- }
3638
- if (previousElement) {
3639
- resizeObserver.unobserve(previousElement);
3640
- resizeObserverConnected.current = false;
3641
- }
3642
- if (newElement) {
3643
- resizeObserver.observe(newElement);
3644
- }
3645
- }, [resizeObserver]);
3646
- const [nodeRef, setNodeRef] = useNodeRef(handleNodeChange);
3647
- const dataRef = useLatestValue(data);
3648
- useEffect(() => {
3649
- if (!resizeObserver || !nodeRef.current) {
3650
- return;
3651
- }
3652
- resizeObserver.disconnect();
3653
- resizeObserverConnected.current = false;
3654
- resizeObserver.observe(nodeRef.current);
3655
- }, [nodeRef, resizeObserver]);
3656
- useEffect(
3657
- () => {
3658
- dispatch({
3659
- type: Action.RegisterDroppable,
3660
- element: {
3661
- id,
3662
- key: key2,
3663
- disabled,
3664
- node: nodeRef,
3665
- rect,
3666
- data: dataRef
3667
- }
3668
- });
3669
- return () => dispatch({
3670
- type: Action.UnregisterDroppable,
3671
- key: key2,
3672
- id
3673
- });
3674
- },
3675
- // eslint-disable-next-line react-hooks/exhaustive-deps
3676
- [id]
3677
- );
3678
- useEffect(() => {
3679
- if (disabled !== previous.current.disabled) {
3680
- dispatch({
3681
- type: Action.SetDroppableDisabled,
3682
- id,
3683
- key: key2,
3684
- disabled
3685
- });
3686
- previous.current.disabled = disabled;
3687
- }
3688
- }, [id, key2, disabled, dispatch]);
3689
- return {
3690
- active,
3691
- rect,
3692
- isOver: (over == null ? void 0 : over.id) === id,
3693
- node: nodeRef,
3694
- over,
3695
- setNodeRef
3696
- };
3697
- }
3698
- function AnimationManager(_ref) {
3699
- let {
3700
- animation,
3701
- children
3702
- } = _ref;
3703
- const [clonedChildren, setClonedChildren] = useState(null);
3704
- const [element, setElement] = useState(null);
3705
- const previousChildren = usePrevious(children);
3706
- if (!children && !clonedChildren && previousChildren) {
3707
- setClonedChildren(previousChildren);
3708
- }
3709
- useIsomorphicLayoutEffect(() => {
3710
- if (!element) {
3711
- return;
3712
- }
3713
- const key2 = clonedChildren == null ? void 0 : clonedChildren.key;
3714
- const id = clonedChildren == null ? void 0 : clonedChildren.props.id;
3715
- if (key2 == null || id == null) {
3716
- setClonedChildren(null);
3717
- return;
3718
- }
3719
- Promise.resolve(animation(id, element)).then(() => {
3720
- setClonedChildren(null);
3721
- });
3722
- }, [animation, clonedChildren, element]);
3723
- return React.createElement(React.Fragment, null, children, clonedChildren ? cloneElement(clonedChildren, {
3724
- ref: setElement
3725
- }) : null);
3726
- }
3727
- const defaultTransform = {
3728
- x: 0,
3729
- y: 0,
3730
- scaleX: 1,
3731
- scaleY: 1
3732
- };
3733
- function NullifiedContextProvider(_ref) {
3734
- let {
3735
- children
3736
- } = _ref;
3737
- return React.createElement(InternalContext.Provider, {
3738
- value: defaultInternalContext
3739
- }, React.createElement(ActiveDraggableContext.Provider, {
3740
- value: defaultTransform
3741
- }, children));
3742
- }
3743
- const baseStyles = {
3744
- position: "fixed",
3745
- touchAction: "none"
3746
- };
3747
- const defaultTransition$1 = (activatorEvent) => {
3748
- const isKeyboardActivator = isKeyboardEvent(activatorEvent);
3749
- return isKeyboardActivator ? "transform 250ms ease" : void 0;
3750
- };
3751
- const PositionedOverlay = /* @__PURE__ */ forwardRef((_ref, ref) => {
3752
- let {
3753
- as,
3754
- activatorEvent,
3755
- adjustScale: adjustScale2,
3756
- children,
3757
- className,
3758
- rect,
3759
- style,
3760
- transform,
3761
- transition = defaultTransition$1
3762
- } = _ref;
3763
- if (!rect) {
3764
- return null;
3765
- }
3766
- const scaleAdjustedTransform = adjustScale2 ? transform : {
3767
- ...transform,
3768
- scaleX: 1,
3769
- scaleY: 1
3770
- };
3771
- const styles = {
3772
- ...baseStyles,
3773
- width: rect.width,
3774
- height: rect.height,
3775
- top: rect.top,
3776
- left: rect.left,
3777
- transform: CSS.Transform.toString(scaleAdjustedTransform),
3778
- transformOrigin: adjustScale2 && activatorEvent ? getRelativeTransformOrigin(activatorEvent, rect) : void 0,
3779
- transition: typeof transition === "function" ? transition(activatorEvent) : transition,
3780
- ...style
3781
- };
3782
- return React.createElement(as, {
3783
- className,
3784
- style: styles,
3785
- ref
3786
- }, children);
3787
- });
3788
- const defaultDropAnimationSideEffects = (options) => (_ref) => {
3789
- let {
3790
- active,
3791
- dragOverlay
3792
- } = _ref;
3793
- const originalStyles = {};
3794
- const {
3795
- styles,
3796
- className
3797
- } = options;
3798
- if (styles != null && styles.active) {
3799
- for (const [key2, value] of Object.entries(styles.active)) {
3800
- if (value === void 0) {
3801
- continue;
3802
- }
3803
- originalStyles[key2] = active.node.style.getPropertyValue(key2);
3804
- active.node.style.setProperty(key2, value);
3805
- }
3806
- }
3807
- if (styles != null && styles.dragOverlay) {
3808
- for (const [key2, value] of Object.entries(styles.dragOverlay)) {
3809
- if (value === void 0) {
3810
- continue;
3811
- }
3812
- dragOverlay.node.style.setProperty(key2, value);
3813
- }
3814
- }
3815
- if (className != null && className.active) {
3816
- active.node.classList.add(className.active);
3817
- }
3818
- if (className != null && className.dragOverlay) {
3819
- dragOverlay.node.classList.add(className.dragOverlay);
3820
- }
3821
- return function cleanup() {
3822
- for (const [key2, value] of Object.entries(originalStyles)) {
3823
- active.node.style.setProperty(key2, value);
3824
- }
3825
- if (className != null && className.active) {
3826
- active.node.classList.remove(className.active);
3827
- }
3828
- };
3829
- };
3830
- const defaultKeyframeResolver = (_ref2) => {
3831
- let {
3832
- transform: {
3833
- initial,
3834
- final
3835
- }
3836
- } = _ref2;
3837
- return [{
3838
- transform: CSS.Transform.toString(initial)
3839
- }, {
3840
- transform: CSS.Transform.toString(final)
3841
- }];
3842
- };
3843
- const defaultDropAnimationConfiguration = {
3844
- duration: 250,
3845
- easing: "ease",
3846
- keyframes: defaultKeyframeResolver,
3847
- sideEffects: /* @__PURE__ */ defaultDropAnimationSideEffects({
3848
- styles: {
3849
- active: {
3850
- opacity: "0"
3851
- }
3852
- }
3853
- })
3854
- };
3855
- function useDropAnimation(_ref3) {
3856
- let {
3857
- config,
3858
- draggableNodes,
3859
- droppableContainers,
3860
- measuringConfiguration
3861
- } = _ref3;
3862
- return useEvent((id, node) => {
3863
- if (config === null) {
3864
- return;
3865
- }
3866
- const activeDraggable = draggableNodes.get(id);
3867
- if (!activeDraggable) {
3868
- return;
3869
- }
3870
- const activeNode = activeDraggable.node.current;
3871
- if (!activeNode) {
3872
- return;
3873
- }
3874
- const measurableNode = getMeasurableNode(node);
3875
- if (!measurableNode) {
3876
- return;
3877
- }
3878
- const {
3879
- transform
3880
- } = getWindow(node).getComputedStyle(node);
3881
- const parsedTransform = parseTransform(transform);
3882
- if (!parsedTransform) {
3883
- return;
3884
- }
3885
- const animation = typeof config === "function" ? config : createDefaultDropAnimation(config);
3886
- scrollIntoViewIfNeeded(activeNode, measuringConfiguration.draggable.measure);
3887
- return animation({
3888
- active: {
3889
- id,
3890
- data: activeDraggable.data,
3891
- node: activeNode,
3892
- rect: measuringConfiguration.draggable.measure(activeNode)
3893
- },
3894
- draggableNodes,
3895
- dragOverlay: {
3896
- node,
3897
- rect: measuringConfiguration.dragOverlay.measure(measurableNode)
3898
- },
3899
- droppableContainers,
3900
- measuringConfiguration,
3901
- transform: parsedTransform
3902
- });
3903
- });
3904
- }
3905
- function createDefaultDropAnimation(options) {
3906
- const {
3907
- duration,
3908
- easing,
3909
- sideEffects,
3910
- keyframes
3911
- } = {
3912
- ...defaultDropAnimationConfiguration,
3913
- ...options
3914
- };
3915
- return (_ref4) => {
3916
- let {
3917
- active,
3918
- dragOverlay,
3919
- transform,
3920
- ...rest
3921
- } = _ref4;
3922
- if (!duration) {
3923
- return;
3924
- }
3925
- const delta = {
3926
- x: dragOverlay.rect.left - active.rect.left,
3927
- y: dragOverlay.rect.top - active.rect.top
3928
- };
3929
- const scale = {
3930
- scaleX: transform.scaleX !== 1 ? active.rect.width * transform.scaleX / dragOverlay.rect.width : 1,
3931
- scaleY: transform.scaleY !== 1 ? active.rect.height * transform.scaleY / dragOverlay.rect.height : 1
3932
- };
3933
- const finalTransform = {
3934
- x: transform.x - delta.x,
3935
- y: transform.y - delta.y,
3936
- ...scale
3937
- };
3938
- const animationKeyframes = keyframes({
3939
- ...rest,
3940
- active,
3941
- dragOverlay,
3942
- transform: {
3943
- initial: transform,
3944
- final: finalTransform
3945
- }
3946
- });
3947
- const [firstKeyframe] = animationKeyframes;
3948
- const lastKeyframe = animationKeyframes[animationKeyframes.length - 1];
3949
- if (JSON.stringify(firstKeyframe) === JSON.stringify(lastKeyframe)) {
3950
- return;
3951
- }
3952
- const cleanup = sideEffects == null ? void 0 : sideEffects({
3953
- active,
3954
- dragOverlay,
3955
- ...rest
3956
- });
3957
- const animation = dragOverlay.node.animate(animationKeyframes, {
3958
- duration,
3959
- easing,
3960
- fill: "forwards"
3961
- });
3962
- return new Promise((resolve) => {
3963
- animation.onfinish = () => {
3964
- cleanup == null ? void 0 : cleanup();
3965
- resolve();
3966
- };
3967
- });
3968
- };
3969
- }
3970
- let key = 0;
3971
- function useKey(id) {
3972
- return useMemo(() => {
3973
- if (id == null) {
3974
- return;
3975
- }
3976
- key++;
3977
- return key;
3978
- }, [id]);
3979
- }
3980
- const DragOverlay = /* @__PURE__ */ React.memo((_ref) => {
3981
- let {
3982
- adjustScale: adjustScale2 = false,
3983
- children,
3984
- dropAnimation: dropAnimationConfig,
3985
- style,
3986
- transition,
3987
- modifiers,
3988
- wrapperElement = "div",
3989
- className,
3990
- zIndex = 999
3991
- } = _ref;
3992
- const {
3993
- activatorEvent,
3994
- active,
3995
- activeNodeRect,
3996
- containerNodeRect,
3997
- draggableNodes,
3998
- droppableContainers,
3999
- dragOverlay,
4000
- over,
4001
- measuringConfiguration,
4002
- scrollableAncestors,
4003
- scrollableAncestorRects,
4004
- windowRect
4005
- } = useDndContext();
4006
- const transform = useContext(ActiveDraggableContext);
4007
- const key2 = useKey(active == null ? void 0 : active.id);
4008
- const modifiedTransform = applyModifiers(modifiers, {
4009
- activatorEvent,
4010
- active,
4011
- activeNodeRect,
4012
- containerNodeRect,
4013
- draggingNodeRect: dragOverlay.rect,
4014
- over,
4015
- overlayNodeRect: dragOverlay.rect,
4016
- scrollableAncestors,
4017
- scrollableAncestorRects,
4018
- transform,
4019
- windowRect
4020
- });
4021
- const initialRect = useInitialValue(activeNodeRect);
4022
- const dropAnimation = useDropAnimation({
4023
- config: dropAnimationConfig,
4024
- draggableNodes,
4025
- droppableContainers,
4026
- measuringConfiguration
4027
- });
4028
- const ref = initialRect ? dragOverlay.setRef : void 0;
4029
- return React.createElement(NullifiedContextProvider, null, React.createElement(AnimationManager, {
4030
- animation: dropAnimation
4031
- }, active && key2 ? React.createElement(PositionedOverlay, {
4032
- key: key2,
4033
- id: active.id,
4034
- ref,
4035
- as: wrapperElement,
4036
- activatorEvent,
4037
- adjustScale: adjustScale2,
4038
- className,
4039
- transition,
4040
- rect: initialRect,
4041
- style: {
4042
- zIndex,
4043
- ...style
4044
- },
4045
- transform: modifiedTransform
4046
- }, children) : null));
4047
- });
4048
- function arrayMove(array, from, to) {
4049
- const newArray = array.slice();
4050
- newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
4051
- return newArray;
4052
- }
4053
- function getSortedRects(items, rects) {
4054
- return items.reduce((accumulator, id, index) => {
4055
- const rect = rects.get(id);
4056
- if (rect) {
4057
- accumulator[index] = rect;
4058
- }
4059
- return accumulator;
4060
- }, Array(items.length));
4061
- }
4062
- function isValidIndex(index) {
4063
- return index !== null && index >= 0;
4064
- }
4065
- function itemsEqual(a, b) {
4066
- if (a === b) {
4067
- return true;
4068
- }
4069
- if (a.length !== b.length) {
4070
- return false;
4071
- }
4072
- for (let i = 0; i < a.length; i++) {
4073
- if (a[i] !== b[i]) {
4074
- return false;
4075
- }
4076
- }
4077
- return true;
4078
- }
4079
- function normalizeDisabled(disabled) {
4080
- if (typeof disabled === "boolean") {
4081
- return {
4082
- draggable: disabled,
4083
- droppable: disabled
4084
- };
4085
- }
4086
- return disabled;
4087
- }
4088
- const rectSortingStrategy = (_ref) => {
4089
- let {
4090
- rects,
4091
- activeIndex,
4092
- overIndex,
4093
- index
4094
- } = _ref;
4095
- const newRects = arrayMove(rects, overIndex, activeIndex);
4096
- const oldRect = rects[index];
4097
- const newRect = newRects[index];
4098
- if (!newRect || !oldRect) {
4099
- return null;
4100
- }
4101
- return {
4102
- x: newRect.left - oldRect.left,
4103
- y: newRect.top - oldRect.top,
4104
- scaleX: newRect.width / oldRect.width,
4105
- scaleY: newRect.height / oldRect.height
4106
- };
4107
- };
4108
- const defaultScale$1 = {
4109
- scaleX: 1,
4110
- scaleY: 1
4111
- };
4112
- const verticalListSortingStrategy = (_ref) => {
4113
- var _rects$activeIndex;
4114
- let {
4115
- activeIndex,
4116
- activeNodeRect: fallbackActiveRect,
4117
- index,
4118
- rects,
4119
- overIndex
4120
- } = _ref;
4121
- const activeNodeRect = (_rects$activeIndex = rects[activeIndex]) != null ? _rects$activeIndex : fallbackActiveRect;
4122
- if (!activeNodeRect) {
4123
- return null;
4124
- }
4125
- if (index === activeIndex) {
4126
- const overIndexRect = rects[overIndex];
4127
- if (!overIndexRect) {
4128
- return null;
4129
- }
4130
- return {
4131
- x: 0,
4132
- y: activeIndex < overIndex ? overIndexRect.top + overIndexRect.height - (activeNodeRect.top + activeNodeRect.height) : overIndexRect.top - activeNodeRect.top,
4133
- ...defaultScale$1
4134
- };
4135
- }
4136
- const itemGap = getItemGap$1(rects, index, activeIndex);
4137
- if (index > activeIndex && index <= overIndex) {
4138
- return {
4139
- x: 0,
4140
- y: -activeNodeRect.height - itemGap,
4141
- ...defaultScale$1
4142
- };
4143
- }
4144
- if (index < activeIndex && index >= overIndex) {
4145
- return {
4146
- x: 0,
4147
- y: activeNodeRect.height + itemGap,
4148
- ...defaultScale$1
4149
- };
4150
- }
4151
- return {
4152
- x: 0,
4153
- y: 0,
4154
- ...defaultScale$1
4155
- };
4156
- };
4157
- function getItemGap$1(clientRects, index, activeIndex) {
4158
- const currentRect = clientRects[index];
4159
- const previousRect = clientRects[index - 1];
4160
- const nextRect = clientRects[index + 1];
4161
- if (!currentRect) {
4162
- return 0;
4163
- }
4164
- if (activeIndex < index) {
4165
- return previousRect ? currentRect.top - (previousRect.top + previousRect.height) : nextRect ? nextRect.top - (currentRect.top + currentRect.height) : 0;
4166
- }
4167
- return nextRect ? nextRect.top - (currentRect.top + currentRect.height) : previousRect ? currentRect.top - (previousRect.top + previousRect.height) : 0;
4168
- }
4169
- const ID_PREFIX = "Sortable";
4170
- const Context = /* @__PURE__ */ React.createContext({
4171
- activeIndex: -1,
4172
- containerId: ID_PREFIX,
4173
- disableTransforms: false,
4174
- items: [],
4175
- overIndex: -1,
4176
- useDragOverlay: false,
4177
- sortedRects: [],
4178
- strategy: rectSortingStrategy,
4179
- disabled: {
4180
- draggable: false,
4181
- droppable: false
4182
- }
4183
- });
4184
- function SortableContext(_ref) {
4185
- let {
4186
- children,
4187
- id,
4188
- items: userDefinedItems,
4189
- strategy = rectSortingStrategy,
4190
- disabled: disabledProp = false
4191
- } = _ref;
4192
- const {
4193
- active,
4194
- dragOverlay,
4195
- droppableRects,
4196
- over,
4197
- measureDroppableContainers
4198
- } = useDndContext();
4199
- const containerId = useUniqueId(ID_PREFIX, id);
4200
- const useDragOverlay = Boolean(dragOverlay.rect !== null);
4201
- const items = useMemo(() => userDefinedItems.map((item2) => typeof item2 === "object" && "id" in item2 ? item2.id : item2), [userDefinedItems]);
4202
- const isDragging = active != null;
4203
- const activeIndex = active ? items.indexOf(active.id) : -1;
4204
- const overIndex = over ? items.indexOf(over.id) : -1;
4205
- const previousItemsRef = useRef(items);
4206
- const itemsHaveChanged = !itemsEqual(items, previousItemsRef.current);
4207
- const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
4208
- const disabled = normalizeDisabled(disabledProp);
4209
- useIsomorphicLayoutEffect(() => {
4210
- if (itemsHaveChanged && isDragging) {
4211
- measureDroppableContainers(items);
4212
- }
4213
- }, [itemsHaveChanged, items, isDragging, measureDroppableContainers]);
4214
- useEffect(() => {
4215
- previousItemsRef.current = items;
4216
- }, [items]);
4217
- const contextValue = useMemo(
4218
- () => ({
4219
- activeIndex,
4220
- containerId,
4221
- disabled,
4222
- disableTransforms,
4223
- items,
4224
- overIndex,
4225
- useDragOverlay,
4226
- sortedRects: getSortedRects(items, droppableRects),
4227
- strategy
4228
- }),
4229
- // eslint-disable-next-line react-hooks/exhaustive-deps
4230
- [activeIndex, containerId, disabled.draggable, disabled.droppable, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]
4231
- );
4232
- return React.createElement(Context.Provider, {
4233
- value: contextValue
4234
- }, children);
4235
- }
4236
- const defaultNewIndexGetter = (_ref) => {
4237
- let {
4238
- id,
4239
- items,
4240
- activeIndex,
4241
- overIndex
4242
- } = _ref;
4243
- return arrayMove(items, activeIndex, overIndex).indexOf(id);
4244
- };
4245
- const defaultAnimateLayoutChanges = (_ref2) => {
4246
- let {
4247
- containerId,
4248
- isSorting,
4249
- wasDragging,
4250
- index,
4251
- items,
4252
- newIndex,
4253
- previousItems,
4254
- previousContainerId,
4255
- transition
4256
- } = _ref2;
4257
- if (!transition || !wasDragging) {
4258
- return false;
4259
- }
4260
- if (previousItems !== items && index === newIndex) {
4261
- return false;
4262
- }
4263
- if (isSorting) {
4264
- return true;
4265
- }
4266
- return newIndex !== index && containerId === previousContainerId;
4267
- };
4268
- const defaultTransition = {
4269
- duration: 200,
4270
- easing: "ease"
4271
- };
4272
- const transitionProperty = "transform";
4273
- const disabledTransition = /* @__PURE__ */ CSS.Transition.toString({
4274
- property: transitionProperty,
4275
- duration: 0,
4276
- easing: "linear"
4277
- });
4278
- const defaultAttributes = {
4279
- roleDescription: "sortable"
4280
- };
4281
- function useDerivedTransform(_ref) {
4282
- let {
4283
- disabled,
4284
- index,
4285
- node,
4286
- rect
4287
- } = _ref;
4288
- const [derivedTransform, setDerivedtransform] = useState(null);
4289
- const previousIndex = useRef(index);
4290
- useIsomorphicLayoutEffect(() => {
4291
- if (!disabled && index !== previousIndex.current && node.current) {
4292
- const initial = rect.current;
4293
- if (initial) {
4294
- const current = getClientRect(node.current, {
4295
- ignoreTransform: true
4296
- });
4297
- const delta = {
4298
- x: initial.left - current.left,
4299
- y: initial.top - current.top,
4300
- scaleX: initial.width / current.width,
4301
- scaleY: initial.height / current.height
4302
- };
4303
- if (delta.x || delta.y) {
4304
- setDerivedtransform(delta);
4305
- }
4306
- }
4307
- }
4308
- if (index !== previousIndex.current) {
4309
- previousIndex.current = index;
4310
- }
4311
- }, [disabled, index, node, rect]);
4312
- useEffect(() => {
4313
- if (derivedTransform) {
4314
- setDerivedtransform(null);
4315
- }
4316
- }, [derivedTransform]);
4317
- return derivedTransform;
4318
- }
4319
- function useSortable(_ref) {
4320
- let {
4321
- animateLayoutChanges = defaultAnimateLayoutChanges,
4322
- attributes: userDefinedAttributes,
4323
- disabled: localDisabled,
4324
- data: customData,
4325
- getNewIndex = defaultNewIndexGetter,
4326
- id,
4327
- strategy: localStrategy,
4328
- resizeObserverConfig,
4329
- transition = defaultTransition
4330
- } = _ref;
4331
- const {
4332
- items,
4333
- containerId,
4334
- activeIndex,
4335
- disabled: globalDisabled,
4336
- disableTransforms,
4337
- sortedRects,
4338
- overIndex,
4339
- useDragOverlay,
4340
- strategy: globalStrategy
4341
- } = useContext(Context);
4342
- const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
4343
- const index = items.indexOf(id);
4344
- const data = useMemo(() => ({
4345
- sortable: {
4346
- containerId,
4347
- index,
4348
- items
4349
- },
4350
- ...customData
4351
- }), [containerId, customData, index, items]);
4352
- const itemsAfterCurrentSortable = useMemo(() => items.slice(items.indexOf(id)), [items, id]);
4353
- const {
4354
- rect,
4355
- node,
4356
- isOver,
4357
- setNodeRef: setDroppableNodeRef
4358
- } = useDroppable({
4359
- id,
4360
- data,
4361
- disabled: disabled.droppable,
4362
- resizeObserverConfig: {
4363
- updateMeasurementsFor: itemsAfterCurrentSortable,
4364
- ...resizeObserverConfig
4365
- }
4366
- });
4367
- const {
4368
- active,
4369
- activatorEvent,
4370
- activeNodeRect,
4371
- attributes,
4372
- setNodeRef: setDraggableNodeRef,
4373
- listeners: listeners2,
4374
- isDragging,
4375
- over,
4376
- setActivatorNodeRef,
4377
- transform
4378
- } = useDraggable({
4379
- id,
4380
- data,
4381
- attributes: {
4382
- ...defaultAttributes,
4383
- ...userDefinedAttributes
4384
- },
4385
- disabled: disabled.draggable
4386
- });
4387
- const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
4388
- const isSorting = Boolean(active);
4389
- const displaceItem = isSorting && !disableTransforms && isValidIndex(activeIndex) && isValidIndex(overIndex);
4390
- const shouldDisplaceDragSource = !useDragOverlay && isDragging;
4391
- const dragSourceDisplacement = shouldDisplaceDragSource && displaceItem ? transform : null;
4392
- const strategy = localStrategy != null ? localStrategy : globalStrategy;
4393
- const finalTransform = displaceItem ? dragSourceDisplacement != null ? dragSourceDisplacement : strategy({
4394
- rects: sortedRects,
4395
- activeNodeRect,
4396
- activeIndex,
4397
- overIndex,
4398
- index
4399
- }) : null;
4400
- const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? getNewIndex({
4401
- id,
4402
- items,
4403
- activeIndex,
4404
- overIndex
4405
- }) : index;
4406
- const activeId = active == null ? void 0 : active.id;
4407
- const previous = useRef({
4408
- activeId,
4409
- items,
4410
- newIndex,
4411
- containerId
4412
- });
4413
- const itemsHaveChanged = items !== previous.current.items;
4414
- const shouldAnimateLayoutChanges = animateLayoutChanges({
4415
- active,
4416
- containerId,
4417
- isDragging,
4418
- isSorting,
4419
- id,
4420
- index,
4421
- items,
4422
- newIndex: previous.current.newIndex,
4423
- previousItems: previous.current.items,
4424
- previousContainerId: previous.current.containerId,
4425
- transition,
4426
- wasDragging: previous.current.activeId != null
4427
- });
4428
- const derivedTransform = useDerivedTransform({
4429
- disabled: !shouldAnimateLayoutChanges,
4430
- index,
4431
- node,
4432
- rect
4433
- });
4434
- useEffect(() => {
4435
- if (isSorting && previous.current.newIndex !== newIndex) {
4436
- previous.current.newIndex = newIndex;
4437
- }
4438
- if (containerId !== previous.current.containerId) {
4439
- previous.current.containerId = containerId;
4440
- }
4441
- if (items !== previous.current.items) {
4442
- previous.current.items = items;
4443
- }
4444
- }, [isSorting, newIndex, containerId, items]);
4445
- useEffect(() => {
4446
- if (activeId === previous.current.activeId) {
4447
- return;
4448
- }
4449
- if (activeId != null && previous.current.activeId == null) {
4450
- previous.current.activeId = activeId;
4451
- return;
4452
- }
4453
- const timeoutId = setTimeout(() => {
4454
- previous.current.activeId = activeId;
4455
- }, 50);
4456
- return () => clearTimeout(timeoutId);
4457
- }, [activeId]);
4458
- return {
4459
- active,
4460
- activeIndex,
4461
- attributes,
4462
- data,
4463
- rect,
4464
- index,
4465
- newIndex,
4466
- items,
4467
- isOver,
4468
- isSorting,
4469
- isDragging,
4470
- listeners: listeners2,
4471
- node,
4472
- overIndex,
4473
- over,
4474
- setNodeRef,
4475
- setActivatorNodeRef,
4476
- setDroppableNodeRef,
4477
- setDraggableNodeRef,
4478
- transform: derivedTransform != null ? derivedTransform : finalTransform,
4479
- transition: getTransition()
4480
- };
4481
- function getTransition() {
4482
- if (
4483
- // Temporarily disable transitions for a single frame to set up derived transforms
4484
- derivedTransform || // Or to prevent items jumping to back to their "new" position when items change
4485
- itemsHaveChanged && previous.current.newIndex === index
4486
- ) {
4487
- return disabledTransition;
4488
- }
4489
- if (shouldDisplaceDragSource && !isKeyboardEvent(activatorEvent) || !transition) {
4490
- return void 0;
4491
- }
4492
- if (isSorting || shouldAnimateLayoutChanges) {
4493
- return CSS.Transition.toString({
4494
- ...transition,
4495
- property: transitionProperty
4496
- });
4497
- }
4498
- return void 0;
4499
- }
4500
- }
4501
- function normalizeLocalDisabled(localDisabled, globalDisabled) {
4502
- var _localDisabled$dragga, _localDisabled$droppa;
4503
- if (typeof localDisabled === "boolean") {
4504
- return {
4505
- draggable: localDisabled,
4506
- // Backwards compatibility
4507
- droppable: false
4508
- };
4509
- }
4510
- return {
4511
- draggable: (_localDisabled$dragga = localDisabled == null ? void 0 : localDisabled.draggable) != null ? _localDisabled$dragga : globalDisabled.draggable,
4512
- droppable: (_localDisabled$droppa = localDisabled == null ? void 0 : localDisabled.droppable) != null ? _localDisabled$droppa : globalDisabled.droppable
4513
- };
4514
- }
4515
- [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
4516
- function getStrictContext(name) {
4517
- const Context2 = createContext(void 0);
4518
- const Provider = ({
4519
- value,
4520
- children
4521
- }) => /* @__PURE__ */ jsx(Context2.Provider, { value, children });
4522
- const useSafeContext = () => {
4523
- const ctx = use(Context2);
4524
- if (ctx === void 0) {
4525
- throw new Error(`useContext must be used within ${name}`);
4526
- }
4527
- return ctx;
4528
- };
4529
- return [Provider, useSafeContext];
4530
- }
4531
- getStrictContext("PopoverContext");
4532
- let stack = [];
4533
- let idCounter = 0;
4534
- const listeners = /* @__PURE__ */ new Set();
4535
- function emit() {
4536
- for (const fn of listeners) fn();
4537
- }
4538
- function presentDialog(props) {
4539
- const id = `dialog-${++idCounter}`;
4540
- stack = [...stack, { ...props, id, open: true }];
4541
- emit();
4542
- return () => dismissDialog(id);
4543
- }
4544
- function dismissDialog(id) {
4545
- stack = stack.map(
4546
- (item2) => item2.id === id ? { ...item2, open: false } : item2
4547
- );
4548
- emit();
4549
- }
4550
- var container = "_1ukrcxs0";
4551
- var containerFullWidth = "_1ukrcxs1";
4552
- var sizeVariants = { sm: "_1ukrcxs2", md: "_1ukrcxs3" };
4553
- var indicator = "_1ukrcxs4";
4554
- var indicatorHidden = "_1ukrcxs5";
4555
- var item = "_1ukrcxs6";
4556
- var itemActive = "_1ukrcxs7";
4557
- var itemDisabled = "_1ukrcxs8";
4558
- var itemFullWidth = "_1ukrcxs9";
4559
- var itemPaddingVariants = { sm: "_1ukrcxsa", md: "_1ukrcxsb" };
4560
- function SegmentedControl({
4561
- items,
4562
- value,
4563
- onChange,
4564
- size = "sm",
4565
- fullWidth = false,
4566
- className
4567
- }) {
4568
- const containerRef = useRef(null);
4569
- const itemElementsRef = useRef(/* @__PURE__ */ new Map());
4570
- const [indicator$1, setIndicator] = useState({ left: 0, width: 0 });
4571
- const [isReady, setIsReady] = useState(false);
4572
- const updateIndicator = useCallback(() => {
4573
- const container2 = containerRef.current;
4574
- const activeEl = itemElementsRef.current.get(value);
4575
- if (!container2 || !activeEl) return;
4576
- const containerRect = container2.getBoundingClientRect();
4577
- const activeRect = activeEl.getBoundingClientRect();
4578
- setIndicator({
4579
- left: activeRect.left - containerRect.left,
4580
- width: activeRect.width
4581
- });
4582
- setIsReady(true);
4583
- }, [value]);
4584
- useEffect(() => {
4585
- updateIndicator();
4586
- }, [updateIndicator]);
4587
- useEffect(() => {
4588
- const container2 = containerRef.current;
4589
- if (!container2) return;
4590
- const observer = new ResizeObserver(() => {
4591
- updateIndicator();
4592
- });
4593
- observer.observe(container2);
4594
- return () => observer.disconnect();
4595
- }, [updateIndicator]);
4596
- const handleKeyDown = (e) => {
4597
- const enabledItems = items.filter((item2) => !item2.disabled);
4598
- const currentIndex = enabledItems.findIndex((item2) => item2.value === value);
4599
- let nextIndex = currentIndex;
4600
- switch (e.key) {
4601
- case "ArrowRight":
4602
- case "ArrowDown": {
4603
- e.preventDefault();
4604
- nextIndex = (currentIndex + 1) % enabledItems.length;
4605
- break;
4606
- }
4607
- case "ArrowLeft":
4608
- case "ArrowUp": {
4609
- e.preventDefault();
4610
- nextIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;
4611
- break;
4612
- }
4613
- case "Home": {
4614
- e.preventDefault();
4615
- nextIndex = 0;
4616
- break;
4617
- }
4618
- case "End": {
4619
- e.preventDefault();
4620
- nextIndex = enabledItems.length - 1;
4621
- break;
4622
- }
4623
- }
4624
- if (nextIndex !== currentIndex) {
4625
- const nextItem = enabledItems[nextIndex];
4626
- onChange(nextItem.value);
4627
- itemElementsRef.current.get(nextItem.value)?.focus();
4628
- }
4629
- };
4630
- return /* @__PURE__ */ jsxs(
4631
- "div",
4632
- {
4633
- ref: containerRef,
4634
- role: "tablist",
4635
- "aria-orientation": "horizontal",
4636
- onKeyDown: handleKeyDown,
4637
- className: `${container} ${sizeVariants[size]} ${fullWidth ? containerFullWidth : ""} ${className || ""}`.trim(),
4638
- children: [
4639
- /* @__PURE__ */ jsx(
4640
- "div",
4641
- {
4642
- className: `${indicator} ${!isReady ? indicatorHidden : ""}`.trim(),
4643
- style: {
4644
- left: indicator$1.left,
4645
- width: indicator$1.width
4646
- },
4647
- "aria-hidden": "true"
4648
- }
4649
- ),
4650
- items.map((item$1) => {
4651
- const isActive = item$1.value === value;
4652
- return /* @__PURE__ */ jsx(
4653
- "button",
4654
- {
4655
- ref: (el) => {
4656
- if (el) itemElementsRef.current.set(item$1.value, el);
4657
- else itemElementsRef.current.delete(item$1.value);
4658
- },
4659
- role: "tab",
4660
- type: "button",
4661
- "aria-selected": isActive,
4662
- "data-active": isActive || void 0,
4663
- tabIndex: isActive ? 0 : -1,
4664
- disabled: item$1.disabled,
4665
- onClick: () => onChange(item$1.value),
4666
- className: `${item} ${itemPaddingVariants[size]} ${isActive ? itemActive : ""} ${item$1.disabled ? itemDisabled : ""} ${fullWidth ? itemFullWidth : ""}`.trim(),
4667
- children: item$1.label
4668
- },
4669
- item$1.value
4670
- );
4671
- })
4672
- ]
4673
- }
4674
- );
4675
- }
4676
357
  const layoutItems = [
4677
358
  { value: "grid", label: "Grid" },
4678
359
  { value: "masonry", label: "Masonry" },
@@ -4685,7 +366,7 @@ function genId() {
4685
366
  const SortableImageCard = ({ id, image, index, isLast, lastInputRef, onUpdate, onRemove }) => {
4686
367
  const {
4687
368
  attributes,
4688
- listeners: listeners2,
369
+ listeners,
4689
370
  setNodeRef,
4690
371
  transform,
4691
372
  transition,
@@ -4702,7 +383,7 @@ const SortableImageCard = ({ id, image, index, isLast, lastInputRef, onUpdate, o
4702
383
  {
4703
384
  className: galleryImageDragHandle,
4704
385
  ...attributes,
4705
- ...listeners2,
386
+ ...listeners,
4706
387
  children: /* @__PURE__ */ jsx(GripVertical, { size: 14 })
4707
388
  }
4708
389
  ),