@acvl/frontend-components 0.0.14 → 0.0.16

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/cjs/index.js CHANGED
@@ -93,6 +93,7 @@ var RefreshIcon = require('@mui/icons-material/Refresh');
93
93
  var Pagination = require('@mui/material/Pagination');
94
94
  var sortable = require('@dnd-kit/sortable');
95
95
  var utilities = require('@dnd-kit/utilities');
96
+ var core$1 = require('@dnd-kit/core');
96
97
  var modifiers = require('@dnd-kit/modifiers');
97
98
  var CloseIcon = require('@mui/icons-material/Close');
98
99
  var ErrorOutlineIcon = require('@mui/icons-material/ErrorOutline');
@@ -7408,7 +7409,7 @@ function memoize(fn) {
7408
7409
  };
7409
7410
  }
7410
7411
 
7411
- const properties$1 = {
7412
+ const properties = {
7412
7413
  m: 'margin',
7413
7414
  p: 'padding'
7414
7415
  };
@@ -7440,7 +7441,7 @@ const getCssProperties = memoize(prop => {
7440
7441
  }
7441
7442
  }
7442
7443
  const [a, b] = prop.split('');
7443
- const property = properties$1[a];
7444
+ const property = properties[a];
7444
7445
  const direction = directions[b] || '';
7445
7446
  return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
7446
7447
  });
@@ -9487,7 +9488,7 @@ const _excluded$C = ["enableAccessibleFieldDOMStructure"],
9487
9488
  _excluded6 = ["ownerState"],
9488
9489
  _excluded7 = ["ownerState"],
9489
9490
  _excluded8 = ["InputProps", "inputProps"];
9490
- const noop$3 = () => {};
9491
+ const noop$2 = () => {};
9491
9492
  const cleanFieldResponse = _ref => {
9492
9493
  let {
9493
9494
  enableAccessibleFieldDOMStructure
@@ -9504,7 +9505,7 @@ const cleanFieldResponse = _ref => {
9504
9505
  openPickerAriaLabel
9505
9506
  } = fieldResponse,
9506
9507
  other = _objectWithoutPropertiesLoose(fieldResponse, _excluded2$6);
9507
- const mergedInputProps = version.major >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop$3;
9508
+ const mergedInputProps = version.major >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop$2;
9508
9509
  return {
9509
9510
  clearable,
9510
9511
  onClear,
@@ -9539,8 +9540,8 @@ const cleanFieldResponse = _ref => {
9539
9540
  openPickerAriaLabel
9540
9541
  } = fieldResponse,
9541
9542
  other = _objectWithoutPropertiesLoose(fieldResponse, _excluded3$1);
9542
- const mergedInputProps = version.major >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop$3;
9543
- const mergedHtmlInputProps = version.major >= 6 && other?.slotProps?.htmlInput ? mergeSlotProps(other?.slotProps?.htmlInput, inputProps) : noop$3;
9543
+ const mergedInputProps = version.major >= 6 && other?.slotProps?.input ? mergeSlotProps(other?.slotProps?.input, InputProps) : noop$2;
9544
+ const mergedHtmlInputProps = version.major >= 6 && other?.slotProps?.htmlInput ? mergeSlotProps(other?.slotProps?.htmlInput, inputProps) : noop$2;
9544
9545
  return {
9545
9546
  clearable,
9546
9547
  onClear,
@@ -11955,7 +11956,7 @@ Transition.propTypes = process.env.NODE_ENV !== "production" ? {
11955
11956
  onExited: PropTypes.func
11956
11957
  } : {}; // Name the function so it is clearer in the documentation
11957
11958
 
11958
- function noop$2() {}
11959
+ function noop$1() {}
11959
11960
 
11960
11961
  Transition.defaultProps = {
11961
11962
  in: false,
@@ -11964,12 +11965,12 @@ Transition.defaultProps = {
11964
11965
  appear: false,
11965
11966
  enter: true,
11966
11967
  exit: true,
11967
- onEnter: noop$2,
11968
- onEntering: noop$2,
11969
- onEntered: noop$2,
11970
- onExit: noop$2,
11971
- onExiting: noop$2,
11972
- onExited: noop$2
11968
+ onEnter: noop$1,
11969
+ onEntering: noop$1,
11970
+ onEntered: noop$1,
11971
+ onExit: noop$1,
11972
+ onExiting: noop$1,
11973
+ onExited: noop$1
11973
11974
  };
11974
11975
  Transition.UNMOUNTED = UNMOUNTED;
11975
11976
  Transition.EXITED = EXITED;
@@ -12904,7 +12905,7 @@ const PickersDayFiller = styles.styled('div', {
12904
12905
  opacity: 0,
12905
12906
  pointerEvents: 'none'
12906
12907
  }));
12907
- const noop$1 = () => {};
12908
+ const noop = () => {};
12908
12909
  const PickersDayRaw = /*#__PURE__*/React__namespace.forwardRef(function PickersDay(inProps, forwardedRef) {
12909
12910
  const props = styles.useThemeProps({
12910
12911
  props: inProps,
@@ -12917,11 +12918,11 @@ const PickersDayRaw = /*#__PURE__*/React__namespace.forwardRef(function PickersD
12917
12918
  isAnimating,
12918
12919
  onClick,
12919
12920
  onDaySelect,
12920
- onFocus = noop$1,
12921
- onBlur = noop$1,
12922
- onKeyDown = noop$1,
12923
- onMouseDown = noop$1,
12924
- onMouseEnter = noop$1,
12921
+ onFocus = noop,
12922
+ onBlur = noop,
12923
+ onKeyDown = noop,
12924
+ onMouseDown = noop,
12925
+ onMouseEnter = noop,
12925
12926
  children,
12926
12927
  day,
12927
12928
  selected,
@@ -26782,7 +26783,7 @@ const StatusBadge = (props) => {
26782
26783
  }
26783
26784
  }, [props?.severity]);
26784
26785
  if (props)
26785
- return (jsxRuntime.jsx(material.Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', border: 4, borderRadius: 1, borderColor: color[800], bgcolor: color[100], height: 1, minWidth: 100, px: 1, children: jsxRuntime.jsx(material.Typography, { fontWeight: 'bold', sx: {
26786
+ return (jsxRuntime.jsx(material.Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', border: 4, borderRadius: 1, borderColor: color[800], bgcolor: color[100], height: 1, minWidth: 100, px: 1, ...props.slotProps?.box, children: jsxRuntime.jsx(material.Typography, { fontWeight: 'bold', sx: {
26786
26787
  color: color[900]
26787
26788
  }, children: props.title }) }));
26788
26789
  return null;
@@ -27271,7 +27272,7 @@ function CustomPagination() {
27271
27272
  }
27272
27273
 
27273
27274
  const DraggableRow = (params) => {
27274
- const { attributes, listeners, setNodeRef, transform, transition, } = sortable.useSortable({ id: params.rowId });
27275
+ const { attributes, listeners, setNodeRef, transform, transition, } = sortable.useSortable({ id: params.rowId.toString() });
27275
27276
  const style = {
27276
27277
  transform: utilities.CSS.Transform.toString(transform),
27277
27278
  transition
@@ -27288,3284 +27289,6 @@ const DraggableRow = (params) => {
27288
27289
  } }), jsxRuntime.jsx(xDataGrid.GridRow, { ...params })] }));
27289
27290
  };
27290
27291
 
27291
- const hiddenStyles = {
27292
- display: 'none'
27293
- };
27294
- function HiddenText(_ref) {
27295
- let {
27296
- id,
27297
- value
27298
- } = _ref;
27299
- return React.createElement("div", {
27300
- id: id,
27301
- style: hiddenStyles
27302
- }, value);
27303
- }
27304
-
27305
- function LiveRegion(_ref) {
27306
- let {
27307
- id,
27308
- announcement,
27309
- ariaLiveType = "assertive"
27310
- } = _ref;
27311
- // Hide element visually but keep it readable by screen readers
27312
- const visuallyHidden = {
27313
- position: 'fixed',
27314
- top: 0,
27315
- left: 0,
27316
- width: 1,
27317
- height: 1,
27318
- margin: -1,
27319
- border: 0,
27320
- padding: 0,
27321
- overflow: 'hidden',
27322
- clip: 'rect(0 0 0 0)',
27323
- clipPath: 'inset(100%)',
27324
- whiteSpace: 'nowrap'
27325
- };
27326
- return React.createElement("div", {
27327
- id: id,
27328
- style: visuallyHidden,
27329
- role: "status",
27330
- "aria-live": ariaLiveType,
27331
- "aria-atomic": true
27332
- }, announcement);
27333
- }
27334
-
27335
- function useAnnouncement() {
27336
- const [announcement, setAnnouncement] = React.useState('');
27337
- const announce = React.useCallback(value => {
27338
- if (value != null) {
27339
- setAnnouncement(value);
27340
- }
27341
- }, []);
27342
- return {
27343
- announce,
27344
- announcement
27345
- };
27346
- }
27347
-
27348
- const DndMonitorContext = /*#__PURE__*/React.createContext(null);
27349
-
27350
- function useDndMonitor(listener) {
27351
- const registerListener = React.useContext(DndMonitorContext);
27352
- React.useEffect(() => {
27353
- if (!registerListener) {
27354
- throw new Error('useDndMonitor must be used within a children of <DndContext>');
27355
- }
27356
-
27357
- const unsubscribe = registerListener(listener);
27358
- return unsubscribe;
27359
- }, [listener, registerListener]);
27360
- }
27361
-
27362
- function useDndMonitorProvider() {
27363
- const [listeners] = React.useState(() => new Set());
27364
- const registerListener = React.useCallback(listener => {
27365
- listeners.add(listener);
27366
- return () => listeners.delete(listener);
27367
- }, [listeners]);
27368
- const dispatch = React.useCallback(_ref => {
27369
- let {
27370
- type,
27371
- event
27372
- } = _ref;
27373
- listeners.forEach(listener => {
27374
- var _listener$type;
27375
-
27376
- return (_listener$type = listener[type]) == null ? void 0 : _listener$type.call(listener, event);
27377
- });
27378
- }, [listeners]);
27379
- return [dispatch, registerListener];
27380
- }
27381
-
27382
- const defaultScreenReaderInstructions = {
27383
- 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 "
27384
- };
27385
- const defaultAnnouncements = {
27386
- onDragStart(_ref) {
27387
- let {
27388
- active
27389
- } = _ref;
27390
- return "Picked up draggable item " + active.id + ".";
27391
- },
27392
-
27393
- onDragOver(_ref2) {
27394
- let {
27395
- active,
27396
- over
27397
- } = _ref2;
27398
-
27399
- if (over) {
27400
- return "Draggable item " + active.id + " was moved over droppable area " + over.id + ".";
27401
- }
27402
-
27403
- return "Draggable item " + active.id + " is no longer over a droppable area.";
27404
- },
27405
-
27406
- onDragEnd(_ref3) {
27407
- let {
27408
- active,
27409
- over
27410
- } = _ref3;
27411
-
27412
- if (over) {
27413
- return "Draggable item " + active.id + " was dropped over droppable area " + over.id;
27414
- }
27415
-
27416
- return "Draggable item " + active.id + " was dropped.";
27417
- },
27418
-
27419
- onDragCancel(_ref4) {
27420
- let {
27421
- active
27422
- } = _ref4;
27423
- return "Dragging was cancelled. Draggable item " + active.id + " was dropped.";
27424
- }
27425
-
27426
- };
27427
-
27428
- function Accessibility(_ref) {
27429
- let {
27430
- announcements = defaultAnnouncements,
27431
- container,
27432
- hiddenTextDescribedById,
27433
- screenReaderInstructions = defaultScreenReaderInstructions
27434
- } = _ref;
27435
- const {
27436
- announce,
27437
- announcement
27438
- } = useAnnouncement();
27439
- const liveRegionId = utilities.useUniqueId("DndLiveRegion");
27440
- const [mounted, setMounted] = React.useState(false);
27441
- React.useEffect(() => {
27442
- setMounted(true);
27443
- }, []);
27444
- useDndMonitor(React.useMemo(() => ({
27445
- onDragStart(_ref2) {
27446
- let {
27447
- active
27448
- } = _ref2;
27449
- announce(announcements.onDragStart({
27450
- active
27451
- }));
27452
- },
27453
-
27454
- onDragMove(_ref3) {
27455
- let {
27456
- active,
27457
- over
27458
- } = _ref3;
27459
-
27460
- if (announcements.onDragMove) {
27461
- announce(announcements.onDragMove({
27462
- active,
27463
- over
27464
- }));
27465
- }
27466
- },
27467
-
27468
- onDragOver(_ref4) {
27469
- let {
27470
- active,
27471
- over
27472
- } = _ref4;
27473
- announce(announcements.onDragOver({
27474
- active,
27475
- over
27476
- }));
27477
- },
27478
-
27479
- onDragEnd(_ref5) {
27480
- let {
27481
- active,
27482
- over
27483
- } = _ref5;
27484
- announce(announcements.onDragEnd({
27485
- active,
27486
- over
27487
- }));
27488
- },
27489
-
27490
- onDragCancel(_ref6) {
27491
- let {
27492
- active,
27493
- over
27494
- } = _ref6;
27495
- announce(announcements.onDragCancel({
27496
- active,
27497
- over
27498
- }));
27499
- }
27500
-
27501
- }), [announce, announcements]));
27502
-
27503
- if (!mounted) {
27504
- return null;
27505
- }
27506
-
27507
- const markup = React.createElement(React.Fragment, null, React.createElement(HiddenText, {
27508
- id: hiddenTextDescribedById,
27509
- value: screenReaderInstructions.draggable
27510
- }), React.createElement(LiveRegion, {
27511
- id: liveRegionId,
27512
- announcement: announcement
27513
- }));
27514
- return container ? ReactDOM.createPortal(markup, container) : markup;
27515
- }
27516
-
27517
- var Action;
27518
-
27519
- (function (Action) {
27520
- Action["DragStart"] = "dragStart";
27521
- Action["DragMove"] = "dragMove";
27522
- Action["DragEnd"] = "dragEnd";
27523
- Action["DragCancel"] = "dragCancel";
27524
- Action["DragOver"] = "dragOver";
27525
- Action["RegisterDroppable"] = "registerDroppable";
27526
- Action["SetDroppableDisabled"] = "setDroppableDisabled";
27527
- Action["UnregisterDroppable"] = "unregisterDroppable";
27528
- })(Action || (Action = {}));
27529
-
27530
- function noop() {}
27531
-
27532
- function useSensor(sensor, options) {
27533
- return React.useMemo(() => ({
27534
- sensor,
27535
- options: {}
27536
- }), // eslint-disable-next-line react-hooks/exhaustive-deps
27537
- [sensor, options]);
27538
- }
27539
-
27540
- function useSensors() {
27541
- for (var _len = arguments.length, sensors = new Array(_len), _key = 0; _key < _len; _key++) {
27542
- sensors[_key] = arguments[_key];
27543
- }
27544
-
27545
- return React.useMemo(() => [...sensors].filter(sensor => sensor != null), // eslint-disable-next-line react-hooks/exhaustive-deps
27546
- [...sensors]);
27547
- }
27548
-
27549
- const defaultCoordinates = /*#__PURE__*/Object.freeze({
27550
- x: 0,
27551
- y: 0
27552
- });
27553
-
27554
- /**
27555
- * Returns the distance between two points
27556
- */
27557
- function distanceBetween(p1, p2) {
27558
- return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
27559
- }
27560
-
27561
- /**
27562
- * Sort collisions from smallest to greatest value
27563
- */
27564
- function sortCollisionsAsc(_ref, _ref2) {
27565
- let {
27566
- data: {
27567
- value: a
27568
- }
27569
- } = _ref;
27570
- let {
27571
- data: {
27572
- value: b
27573
- }
27574
- } = _ref2;
27575
- return a - b;
27576
- }
27577
- /**
27578
- * Sort collisions from greatest to smallest value
27579
- */
27580
-
27581
- function sortCollisionsDesc(_ref3, _ref4) {
27582
- let {
27583
- data: {
27584
- value: a
27585
- }
27586
- } = _ref3;
27587
- let {
27588
- data: {
27589
- value: b
27590
- }
27591
- } = _ref4;
27592
- return b - a;
27593
- }
27594
- function getFirstCollision(collisions, property) {
27595
- if (!collisions || collisions.length === 0) {
27596
- return null;
27597
- }
27598
-
27599
- const [firstCollision] = collisions;
27600
- return firstCollision[property] ;
27601
- }
27602
-
27603
- /**
27604
- * Returns the coordinates of the center of a given ClientRect
27605
- */
27606
-
27607
- function centerOfRectangle(rect, left, top) {
27608
- if (left === void 0) {
27609
- left = rect.left;
27610
- }
27611
-
27612
- if (top === void 0) {
27613
- top = rect.top;
27614
- }
27615
-
27616
- return {
27617
- x: left + rect.width * 0.5,
27618
- y: top + rect.height * 0.5
27619
- };
27620
- }
27621
- /**
27622
- * Returns the closest rectangles from an array of rectangles to the center of a given
27623
- * rectangle.
27624
- */
27625
-
27626
-
27627
- const closestCenter = _ref => {
27628
- let {
27629
- collisionRect,
27630
- droppableRects,
27631
- droppableContainers
27632
- } = _ref;
27633
- const centerRect = centerOfRectangle(collisionRect, collisionRect.left, collisionRect.top);
27634
- const collisions = [];
27635
-
27636
- for (const droppableContainer of droppableContainers) {
27637
- const {
27638
- id
27639
- } = droppableContainer;
27640
- const rect = droppableRects.get(id);
27641
-
27642
- if (rect) {
27643
- const distBetween = distanceBetween(centerOfRectangle(rect), centerRect);
27644
- collisions.push({
27645
- id,
27646
- data: {
27647
- droppableContainer,
27648
- value: distBetween
27649
- }
27650
- });
27651
- }
27652
- }
27653
-
27654
- return collisions.sort(sortCollisionsAsc);
27655
- };
27656
-
27657
- /**
27658
- * Returns the intersecting rectangle area between two rectangles
27659
- */
27660
-
27661
- function getIntersectionRatio(entry, target) {
27662
- const top = Math.max(target.top, entry.top);
27663
- const left = Math.max(target.left, entry.left);
27664
- const right = Math.min(target.left + target.width, entry.left + entry.width);
27665
- const bottom = Math.min(target.top + target.height, entry.top + entry.height);
27666
- const width = right - left;
27667
- const height = bottom - top;
27668
-
27669
- if (left < right && top < bottom) {
27670
- const targetArea = target.width * target.height;
27671
- const entryArea = entry.width * entry.height;
27672
- const intersectionArea = width * height;
27673
- const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
27674
- return Number(intersectionRatio.toFixed(4));
27675
- } // Rectangles do not overlap, or overlap has an area of zero (edge/corner overlap)
27676
-
27677
-
27678
- return 0;
27679
- }
27680
- /**
27681
- * Returns the rectangles that has the greatest intersection area with a given
27682
- * rectangle in an array of rectangles.
27683
- */
27684
-
27685
- const rectIntersection = _ref => {
27686
- let {
27687
- collisionRect,
27688
- droppableRects,
27689
- droppableContainers
27690
- } = _ref;
27691
- const collisions = [];
27692
-
27693
- for (const droppableContainer of droppableContainers) {
27694
- const {
27695
- id
27696
- } = droppableContainer;
27697
- const rect = droppableRects.get(id);
27698
-
27699
- if (rect) {
27700
- const intersectionRatio = getIntersectionRatio(rect, collisionRect);
27701
-
27702
- if (intersectionRatio > 0) {
27703
- collisions.push({
27704
- id,
27705
- data: {
27706
- droppableContainer,
27707
- value: intersectionRatio
27708
- }
27709
- });
27710
- }
27711
- }
27712
- }
27713
-
27714
- return collisions.sort(sortCollisionsDesc);
27715
- };
27716
-
27717
- function adjustScale(transform, rect1, rect2) {
27718
- return { ...transform,
27719
- scaleX: rect1 && rect2 ? rect1.width / rect2.width : 1,
27720
- scaleY: rect1 && rect2 ? rect1.height / rect2.height : 1
27721
- };
27722
- }
27723
-
27724
- function getRectDelta(rect1, rect2) {
27725
- return rect1 && rect2 ? {
27726
- x: rect1.left - rect2.left,
27727
- y: rect1.top - rect2.top
27728
- } : defaultCoordinates;
27729
- }
27730
-
27731
- function createRectAdjustmentFn(modifier) {
27732
- return function adjustClientRect(rect) {
27733
- for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
27734
- adjustments[_key - 1] = arguments[_key];
27735
- }
27736
-
27737
- return adjustments.reduce((acc, adjustment) => ({ ...acc,
27738
- top: acc.top + modifier * adjustment.y,
27739
- bottom: acc.bottom + modifier * adjustment.y,
27740
- left: acc.left + modifier * adjustment.x,
27741
- right: acc.right + modifier * adjustment.x
27742
- }), { ...rect
27743
- });
27744
- };
27745
- }
27746
- const getAdjustedRect = /*#__PURE__*/createRectAdjustmentFn(1);
27747
-
27748
- function parseTransform(transform) {
27749
- if (transform.startsWith('matrix3d(')) {
27750
- const transformArray = transform.slice(9, -1).split(/, /);
27751
- return {
27752
- x: +transformArray[12],
27753
- y: +transformArray[13],
27754
- scaleX: +transformArray[0],
27755
- scaleY: +transformArray[5]
27756
- };
27757
- } else if (transform.startsWith('matrix(')) {
27758
- const transformArray = transform.slice(7, -1).split(/, /);
27759
- return {
27760
- x: +transformArray[4],
27761
- y: +transformArray[5],
27762
- scaleX: +transformArray[0],
27763
- scaleY: +transformArray[3]
27764
- };
27765
- }
27766
-
27767
- return null;
27768
- }
27769
-
27770
- function inverseTransform(rect, transform, transformOrigin) {
27771
- const parsedTransform = parseTransform(transform);
27772
-
27773
- if (!parsedTransform) {
27774
- return rect;
27775
- }
27776
-
27777
- const {
27778
- scaleX,
27779
- scaleY,
27780
- x: translateX,
27781
- y: translateY
27782
- } = parsedTransform;
27783
- const x = rect.left - translateX - (1 - scaleX) * parseFloat(transformOrigin);
27784
- const y = rect.top - translateY - (1 - scaleY) * parseFloat(transformOrigin.slice(transformOrigin.indexOf(' ') + 1));
27785
- const w = scaleX ? rect.width / scaleX : rect.width;
27786
- const h = scaleY ? rect.height / scaleY : rect.height;
27787
- return {
27788
- width: w,
27789
- height: h,
27790
- top: y,
27791
- right: x + w,
27792
- bottom: y + h,
27793
- left: x
27794
- };
27795
- }
27796
-
27797
- const defaultOptions = {
27798
- ignoreTransform: false
27799
- };
27800
- /**
27801
- * Returns the bounding client rect of an element relative to the viewport.
27802
- */
27803
-
27804
- function getClientRect(element, options) {
27805
- if (options === void 0) {
27806
- options = defaultOptions;
27807
- }
27808
-
27809
- let rect = element.getBoundingClientRect();
27810
-
27811
- if (options.ignoreTransform) {
27812
- const {
27813
- transform,
27814
- transformOrigin
27815
- } = utilities.getWindow(element).getComputedStyle(element);
27816
-
27817
- if (transform) {
27818
- rect = inverseTransform(rect, transform, transformOrigin);
27819
- }
27820
- }
27821
-
27822
- const {
27823
- top,
27824
- left,
27825
- width,
27826
- height,
27827
- bottom,
27828
- right
27829
- } = rect;
27830
- return {
27831
- top,
27832
- left,
27833
- width,
27834
- height,
27835
- bottom,
27836
- right
27837
- };
27838
- }
27839
- /**
27840
- * Returns the bounding client rect of an element relative to the viewport.
27841
- *
27842
- * @remarks
27843
- * The ClientRect returned by this method does not take into account transforms
27844
- * applied to the element it measures.
27845
- *
27846
- */
27847
-
27848
- function getTransformAgnosticClientRect(element) {
27849
- return getClientRect(element, {
27850
- ignoreTransform: true
27851
- });
27852
- }
27853
-
27854
- function getWindowClientRect(element) {
27855
- const width = element.innerWidth;
27856
- const height = element.innerHeight;
27857
- return {
27858
- top: 0,
27859
- left: 0,
27860
- right: width,
27861
- bottom: height,
27862
- width,
27863
- height
27864
- };
27865
- }
27866
-
27867
- function isFixed(node, computedStyle) {
27868
- if (computedStyle === void 0) {
27869
- computedStyle = utilities.getWindow(node).getComputedStyle(node);
27870
- }
27871
-
27872
- return computedStyle.position === 'fixed';
27873
- }
27874
-
27875
- function isScrollable(element, computedStyle) {
27876
- if (computedStyle === void 0) {
27877
- computedStyle = utilities.getWindow(element).getComputedStyle(element);
27878
- }
27879
-
27880
- const overflowRegex = /(auto|scroll|overlay)/;
27881
- const properties = ['overflow', 'overflowX', 'overflowY'];
27882
- return properties.some(property => {
27883
- const value = computedStyle[property];
27884
- return typeof value === 'string' ? overflowRegex.test(value) : false;
27885
- });
27886
- }
27887
-
27888
- function getScrollableAncestors(element, limit) {
27889
- const scrollParents = [];
27890
-
27891
- function findScrollableAncestors(node) {
27892
- if (limit != null && scrollParents.length >= limit) {
27893
- return scrollParents;
27894
- }
27895
-
27896
- if (!node) {
27897
- return scrollParents;
27898
- }
27899
-
27900
- if (utilities.isDocument(node) && node.scrollingElement != null && !scrollParents.includes(node.scrollingElement)) {
27901
- scrollParents.push(node.scrollingElement);
27902
- return scrollParents;
27903
- }
27904
-
27905
- if (!utilities.isHTMLElement(node) || utilities.isSVGElement(node)) {
27906
- return scrollParents;
27907
- }
27908
-
27909
- if (scrollParents.includes(node)) {
27910
- return scrollParents;
27911
- }
27912
-
27913
- const computedStyle = utilities.getWindow(element).getComputedStyle(node);
27914
-
27915
- if (node !== element) {
27916
- if (isScrollable(node, computedStyle)) {
27917
- scrollParents.push(node);
27918
- }
27919
- }
27920
-
27921
- if (isFixed(node, computedStyle)) {
27922
- return scrollParents;
27923
- }
27924
-
27925
- return findScrollableAncestors(node.parentNode);
27926
- }
27927
-
27928
- if (!element) {
27929
- return scrollParents;
27930
- }
27931
-
27932
- return findScrollableAncestors(element);
27933
- }
27934
- function getFirstScrollableAncestor(node) {
27935
- const [firstScrollableAncestor] = getScrollableAncestors(node, 1);
27936
- return firstScrollableAncestor != null ? firstScrollableAncestor : null;
27937
- }
27938
-
27939
- function getScrollableElement(element) {
27940
- if (!utilities.canUseDOM || !element) {
27941
- return null;
27942
- }
27943
-
27944
- if (utilities.isWindow(element)) {
27945
- return element;
27946
- }
27947
-
27948
- if (!utilities.isNode(element)) {
27949
- return null;
27950
- }
27951
-
27952
- if (utilities.isDocument(element) || element === utilities.getOwnerDocument(element).scrollingElement) {
27953
- return window;
27954
- }
27955
-
27956
- if (utilities.isHTMLElement(element)) {
27957
- return element;
27958
- }
27959
-
27960
- return null;
27961
- }
27962
-
27963
- function getScrollXCoordinate(element) {
27964
- if (utilities.isWindow(element)) {
27965
- return element.scrollX;
27966
- }
27967
-
27968
- return element.scrollLeft;
27969
- }
27970
- function getScrollYCoordinate(element) {
27971
- if (utilities.isWindow(element)) {
27972
- return element.scrollY;
27973
- }
27974
-
27975
- return element.scrollTop;
27976
- }
27977
- function getScrollCoordinates(element) {
27978
- return {
27979
- x: getScrollXCoordinate(element),
27980
- y: getScrollYCoordinate(element)
27981
- };
27982
- }
27983
-
27984
- var Direction;
27985
-
27986
- (function (Direction) {
27987
- Direction[Direction["Forward"] = 1] = "Forward";
27988
- Direction[Direction["Backward"] = -1] = "Backward";
27989
- })(Direction || (Direction = {}));
27990
-
27991
- function isDocumentScrollingElement(element) {
27992
- if (!utilities.canUseDOM || !element) {
27993
- return false;
27994
- }
27995
-
27996
- return element === document.scrollingElement;
27997
- }
27998
-
27999
- function getScrollPosition(scrollingContainer) {
28000
- const minScroll = {
28001
- x: 0,
28002
- y: 0
28003
- };
28004
- const dimensions = isDocumentScrollingElement(scrollingContainer) ? {
28005
- height: window.innerHeight,
28006
- width: window.innerWidth
28007
- } : {
28008
- height: scrollingContainer.clientHeight,
28009
- width: scrollingContainer.clientWidth
28010
- };
28011
- const maxScroll = {
28012
- x: scrollingContainer.scrollWidth - dimensions.width,
28013
- y: scrollingContainer.scrollHeight - dimensions.height
28014
- };
28015
- const isTop = scrollingContainer.scrollTop <= minScroll.y;
28016
- const isLeft = scrollingContainer.scrollLeft <= minScroll.x;
28017
- const isBottom = scrollingContainer.scrollTop >= maxScroll.y;
28018
- const isRight = scrollingContainer.scrollLeft >= maxScroll.x;
28019
- return {
28020
- isTop,
28021
- isLeft,
28022
- isBottom,
28023
- isRight,
28024
- maxScroll,
28025
- minScroll
28026
- };
28027
- }
28028
-
28029
- const defaultThreshold = {
28030
- x: 0.2,
28031
- y: 0.2
28032
- };
28033
- function getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, _ref, acceleration, thresholdPercentage) {
28034
- let {
28035
- top,
28036
- left,
28037
- right,
28038
- bottom
28039
- } = _ref;
28040
-
28041
- if (acceleration === void 0) {
28042
- acceleration = 10;
28043
- }
28044
-
28045
- if (thresholdPercentage === void 0) {
28046
- thresholdPercentage = defaultThreshold;
28047
- }
28048
-
28049
- const {
28050
- isTop,
28051
- isBottom,
28052
- isLeft,
28053
- isRight
28054
- } = getScrollPosition(scrollContainer);
28055
- const direction = {
28056
- x: 0,
28057
- y: 0
28058
- };
28059
- const speed = {
28060
- x: 0,
28061
- y: 0
28062
- };
28063
- const threshold = {
28064
- height: scrollContainerRect.height * thresholdPercentage.y,
28065
- width: scrollContainerRect.width * thresholdPercentage.x
28066
- };
28067
-
28068
- if (!isTop && top <= scrollContainerRect.top + threshold.height) {
28069
- // Scroll Up
28070
- direction.y = Direction.Backward;
28071
- speed.y = acceleration * Math.abs((scrollContainerRect.top + threshold.height - top) / threshold.height);
28072
- } else if (!isBottom && bottom >= scrollContainerRect.bottom - threshold.height) {
28073
- // Scroll Down
28074
- direction.y = Direction.Forward;
28075
- speed.y = acceleration * Math.abs((scrollContainerRect.bottom - threshold.height - bottom) / threshold.height);
28076
- }
28077
-
28078
- if (!isRight && right >= scrollContainerRect.right - threshold.width) {
28079
- // Scroll Right
28080
- direction.x = Direction.Forward;
28081
- speed.x = acceleration * Math.abs((scrollContainerRect.right - threshold.width - right) / threshold.width);
28082
- } else if (!isLeft && left <= scrollContainerRect.left + threshold.width) {
28083
- // Scroll Left
28084
- direction.x = Direction.Backward;
28085
- speed.x = acceleration * Math.abs((scrollContainerRect.left + threshold.width - left) / threshold.width);
28086
- }
28087
-
28088
- return {
28089
- direction,
28090
- speed
28091
- };
28092
- }
28093
-
28094
- function getScrollElementRect(element) {
28095
- if (element === document.scrollingElement) {
28096
- const {
28097
- innerWidth,
28098
- innerHeight
28099
- } = window;
28100
- return {
28101
- top: 0,
28102
- left: 0,
28103
- right: innerWidth,
28104
- bottom: innerHeight,
28105
- width: innerWidth,
28106
- height: innerHeight
28107
- };
28108
- }
28109
-
28110
- const {
28111
- top,
28112
- left,
28113
- right,
28114
- bottom
28115
- } = element.getBoundingClientRect();
28116
- return {
28117
- top,
28118
- left,
28119
- right,
28120
- bottom,
28121
- width: element.clientWidth,
28122
- height: element.clientHeight
28123
- };
28124
- }
28125
-
28126
- function getScrollOffsets(scrollableAncestors) {
28127
- return scrollableAncestors.reduce((acc, node) => {
28128
- return utilities.add(acc, getScrollCoordinates(node));
28129
- }, defaultCoordinates);
28130
- }
28131
- function getScrollXOffset(scrollableAncestors) {
28132
- return scrollableAncestors.reduce((acc, node) => {
28133
- return acc + getScrollXCoordinate(node);
28134
- }, 0);
28135
- }
28136
- function getScrollYOffset(scrollableAncestors) {
28137
- return scrollableAncestors.reduce((acc, node) => {
28138
- return acc + getScrollYCoordinate(node);
28139
- }, 0);
28140
- }
28141
-
28142
- function scrollIntoViewIfNeeded(element, measure) {
28143
- if (measure === void 0) {
28144
- measure = getClientRect;
28145
- }
28146
-
28147
- if (!element) {
28148
- return;
28149
- }
28150
-
28151
- const {
28152
- top,
28153
- left,
28154
- bottom,
28155
- right
28156
- } = measure(element);
28157
- const firstScrollableAncestor = getFirstScrollableAncestor(element);
28158
-
28159
- if (!firstScrollableAncestor) {
28160
- return;
28161
- }
28162
-
28163
- if (bottom <= 0 || right <= 0 || top >= window.innerHeight || left >= window.innerWidth) {
28164
- element.scrollIntoView({
28165
- block: 'center',
28166
- inline: 'center'
28167
- });
28168
- }
28169
- }
28170
-
28171
- const properties = [['x', ['left', 'right'], getScrollXOffset], ['y', ['top', 'bottom'], getScrollYOffset]];
28172
- class Rect {
28173
- constructor(rect, element) {
28174
- this.rect = void 0;
28175
- this.width = void 0;
28176
- this.height = void 0;
28177
- this.top = void 0;
28178
- this.bottom = void 0;
28179
- this.right = void 0;
28180
- this.left = void 0;
28181
- const scrollableAncestors = getScrollableAncestors(element);
28182
- const scrollOffsets = getScrollOffsets(scrollableAncestors);
28183
- this.rect = { ...rect
28184
- };
28185
- this.width = rect.width;
28186
- this.height = rect.height;
28187
-
28188
- for (const [axis, keys, getScrollOffset] of properties) {
28189
- for (const key of keys) {
28190
- Object.defineProperty(this, key, {
28191
- get: () => {
28192
- const currentOffsets = getScrollOffset(scrollableAncestors);
28193
- const scrollOffsetsDeltla = scrollOffsets[axis] - currentOffsets;
28194
- return this.rect[key] + scrollOffsetsDeltla;
28195
- },
28196
- enumerable: true
28197
- });
28198
- }
28199
- }
28200
-
28201
- Object.defineProperty(this, 'rect', {
28202
- enumerable: false
28203
- });
28204
- }
28205
-
28206
- }
28207
-
28208
- class Listeners {
28209
- constructor(target) {
28210
- this.target = void 0;
28211
- this.listeners = [];
28212
-
28213
- this.removeAll = () => {
28214
- this.listeners.forEach(listener => {
28215
- var _this$target;
28216
-
28217
- return (_this$target = this.target) == null ? void 0 : _this$target.removeEventListener(...listener);
28218
- });
28219
- };
28220
-
28221
- this.target = target;
28222
- }
28223
-
28224
- add(eventName, handler, options) {
28225
- var _this$target2;
28226
-
28227
- (_this$target2 = this.target) == null ? void 0 : _this$target2.addEventListener(eventName, handler, options);
28228
- this.listeners.push([eventName, handler, options]);
28229
- }
28230
-
28231
- }
28232
-
28233
- function getEventListenerTarget(target) {
28234
- // If the `event.target` element is removed from the document events will still be targeted
28235
- // at it, and hence won't always bubble up to the window or document anymore.
28236
- // If there is any risk of an element being removed while it is being dragged,
28237
- // the best practice is to attach the event listeners directly to the target.
28238
- // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
28239
- const {
28240
- EventTarget
28241
- } = utilities.getWindow(target);
28242
- return target instanceof EventTarget ? target : utilities.getOwnerDocument(target);
28243
- }
28244
-
28245
- function hasExceededDistance(delta, measurement) {
28246
- const dx = Math.abs(delta.x);
28247
- const dy = Math.abs(delta.y);
28248
-
28249
- if (typeof measurement === 'number') {
28250
- return Math.sqrt(dx ** 2 + dy ** 2) > measurement;
28251
- }
28252
-
28253
- if ('x' in measurement && 'y' in measurement) {
28254
- return dx > measurement.x && dy > measurement.y;
28255
- }
28256
-
28257
- if ('x' in measurement) {
28258
- return dx > measurement.x;
28259
- }
28260
-
28261
- if ('y' in measurement) {
28262
- return dy > measurement.y;
28263
- }
28264
-
28265
- return false;
28266
- }
28267
-
28268
- var EventName;
28269
-
28270
- (function (EventName) {
28271
- EventName["Click"] = "click";
28272
- EventName["DragStart"] = "dragstart";
28273
- EventName["Keydown"] = "keydown";
28274
- EventName["ContextMenu"] = "contextmenu";
28275
- EventName["Resize"] = "resize";
28276
- EventName["SelectionChange"] = "selectionchange";
28277
- EventName["VisibilityChange"] = "visibilitychange";
28278
- })(EventName || (EventName = {}));
28279
-
28280
- function preventDefault(event) {
28281
- event.preventDefault();
28282
- }
28283
- function stopPropagation(event) {
28284
- event.stopPropagation();
28285
- }
28286
-
28287
- var KeyboardCode;
28288
-
28289
- (function (KeyboardCode) {
28290
- KeyboardCode["Space"] = "Space";
28291
- KeyboardCode["Down"] = "ArrowDown";
28292
- KeyboardCode["Right"] = "ArrowRight";
28293
- KeyboardCode["Left"] = "ArrowLeft";
28294
- KeyboardCode["Up"] = "ArrowUp";
28295
- KeyboardCode["Esc"] = "Escape";
28296
- KeyboardCode["Enter"] = "Enter";
28297
- KeyboardCode["Tab"] = "Tab";
28298
- })(KeyboardCode || (KeyboardCode = {}));
28299
-
28300
- const defaultKeyboardCodes = {
28301
- start: [KeyboardCode.Space, KeyboardCode.Enter],
28302
- cancel: [KeyboardCode.Esc],
28303
- end: [KeyboardCode.Space, KeyboardCode.Enter, KeyboardCode.Tab]
28304
- };
28305
- const defaultKeyboardCoordinateGetter = (event, _ref) => {
28306
- let {
28307
- currentCoordinates
28308
- } = _ref;
28309
-
28310
- switch (event.code) {
28311
- case KeyboardCode.Right:
28312
- return { ...currentCoordinates,
28313
- x: currentCoordinates.x + 25
28314
- };
28315
-
28316
- case KeyboardCode.Left:
28317
- return { ...currentCoordinates,
28318
- x: currentCoordinates.x - 25
28319
- };
28320
-
28321
- case KeyboardCode.Down:
28322
- return { ...currentCoordinates,
28323
- y: currentCoordinates.y + 25
28324
- };
28325
-
28326
- case KeyboardCode.Up:
28327
- return { ...currentCoordinates,
28328
- y: currentCoordinates.y - 25
28329
- };
28330
- }
28331
-
28332
- return undefined;
28333
- };
28334
-
28335
- class KeyboardSensor {
28336
- constructor(props) {
28337
- this.props = void 0;
28338
- this.autoScrollEnabled = false;
28339
- this.referenceCoordinates = void 0;
28340
- this.listeners = void 0;
28341
- this.windowListeners = void 0;
28342
- this.props = props;
28343
- const {
28344
- event: {
28345
- target
28346
- }
28347
- } = props;
28348
- this.props = props;
28349
- this.listeners = new Listeners(utilities.getOwnerDocument(target));
28350
- this.windowListeners = new Listeners(utilities.getWindow(target));
28351
- this.handleKeyDown = this.handleKeyDown.bind(this);
28352
- this.handleCancel = this.handleCancel.bind(this);
28353
- this.attach();
28354
- }
28355
-
28356
- attach() {
28357
- this.handleStart();
28358
- this.windowListeners.add(EventName.Resize, this.handleCancel);
28359
- this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
28360
- setTimeout(() => this.listeners.add(EventName.Keydown, this.handleKeyDown));
28361
- }
28362
-
28363
- handleStart() {
28364
- const {
28365
- activeNode,
28366
- onStart
28367
- } = this.props;
28368
- const node = activeNode.node.current;
28369
-
28370
- if (node) {
28371
- scrollIntoViewIfNeeded(node);
28372
- }
28373
-
28374
- onStart(defaultCoordinates);
28375
- }
28376
-
28377
- handleKeyDown(event) {
28378
- if (utilities.isKeyboardEvent(event)) {
28379
- const {
28380
- active,
28381
- context,
28382
- options
28383
- } = this.props;
28384
- const {
28385
- keyboardCodes = defaultKeyboardCodes,
28386
- coordinateGetter = defaultKeyboardCoordinateGetter,
28387
- scrollBehavior = 'smooth'
28388
- } = options;
28389
- const {
28390
- code
28391
- } = event;
28392
-
28393
- if (keyboardCodes.end.includes(code)) {
28394
- this.handleEnd(event);
28395
- return;
28396
- }
28397
-
28398
- if (keyboardCodes.cancel.includes(code)) {
28399
- this.handleCancel(event);
28400
- return;
28401
- }
28402
-
28403
- const {
28404
- collisionRect
28405
- } = context.current;
28406
- const currentCoordinates = collisionRect ? {
28407
- x: collisionRect.left,
28408
- y: collisionRect.top
28409
- } : defaultCoordinates;
28410
-
28411
- if (!this.referenceCoordinates) {
28412
- this.referenceCoordinates = currentCoordinates;
28413
- }
28414
-
28415
- const newCoordinates = coordinateGetter(event, {
28416
- active,
28417
- context: context.current,
28418
- currentCoordinates
28419
- });
28420
-
28421
- if (newCoordinates) {
28422
- const coordinatesDelta = utilities.subtract(newCoordinates, currentCoordinates);
28423
- const scrollDelta = {
28424
- x: 0,
28425
- y: 0
28426
- };
28427
- const {
28428
- scrollableAncestors
28429
- } = context.current;
28430
-
28431
- for (const scrollContainer of scrollableAncestors) {
28432
- const direction = event.code;
28433
- const {
28434
- isTop,
28435
- isRight,
28436
- isLeft,
28437
- isBottom,
28438
- maxScroll,
28439
- minScroll
28440
- } = getScrollPosition(scrollContainer);
28441
- const scrollElementRect = getScrollElementRect(scrollContainer);
28442
- const clampedCoordinates = {
28443
- 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)),
28444
- 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))
28445
- };
28446
- const canScrollX = direction === KeyboardCode.Right && !isRight || direction === KeyboardCode.Left && !isLeft;
28447
- const canScrollY = direction === KeyboardCode.Down && !isBottom || direction === KeyboardCode.Up && !isTop;
28448
-
28449
- if (canScrollX && clampedCoordinates.x !== newCoordinates.x) {
28450
- const newScrollCoordinates = scrollContainer.scrollLeft + coordinatesDelta.x;
28451
- const canScrollToNewCoordinates = direction === KeyboardCode.Right && newScrollCoordinates <= maxScroll.x || direction === KeyboardCode.Left && newScrollCoordinates >= minScroll.x;
28452
-
28453
- if (canScrollToNewCoordinates && !coordinatesDelta.y) {
28454
- // We don't need to update coordinates, the scroll adjustment alone will trigger
28455
- // logic to auto-detect the new container we are over
28456
- scrollContainer.scrollTo({
28457
- left: newScrollCoordinates,
28458
- behavior: scrollBehavior
28459
- });
28460
- return;
28461
- }
28462
-
28463
- if (canScrollToNewCoordinates) {
28464
- scrollDelta.x = scrollContainer.scrollLeft - newScrollCoordinates;
28465
- } else {
28466
- scrollDelta.x = direction === KeyboardCode.Right ? scrollContainer.scrollLeft - maxScroll.x : scrollContainer.scrollLeft - minScroll.x;
28467
- }
28468
-
28469
- if (scrollDelta.x) {
28470
- scrollContainer.scrollBy({
28471
- left: -scrollDelta.x,
28472
- behavior: scrollBehavior
28473
- });
28474
- }
28475
-
28476
- break;
28477
- } else if (canScrollY && clampedCoordinates.y !== newCoordinates.y) {
28478
- const newScrollCoordinates = scrollContainer.scrollTop + coordinatesDelta.y;
28479
- const canScrollToNewCoordinates = direction === KeyboardCode.Down && newScrollCoordinates <= maxScroll.y || direction === KeyboardCode.Up && newScrollCoordinates >= minScroll.y;
28480
-
28481
- if (canScrollToNewCoordinates && !coordinatesDelta.x) {
28482
- // We don't need to update coordinates, the scroll adjustment alone will trigger
28483
- // logic to auto-detect the new container we are over
28484
- scrollContainer.scrollTo({
28485
- top: newScrollCoordinates,
28486
- behavior: scrollBehavior
28487
- });
28488
- return;
28489
- }
28490
-
28491
- if (canScrollToNewCoordinates) {
28492
- scrollDelta.y = scrollContainer.scrollTop - newScrollCoordinates;
28493
- } else {
28494
- scrollDelta.y = direction === KeyboardCode.Down ? scrollContainer.scrollTop - maxScroll.y : scrollContainer.scrollTop - minScroll.y;
28495
- }
28496
-
28497
- if (scrollDelta.y) {
28498
- scrollContainer.scrollBy({
28499
- top: -scrollDelta.y,
28500
- behavior: scrollBehavior
28501
- });
28502
- }
28503
-
28504
- break;
28505
- }
28506
- }
28507
-
28508
- this.handleMove(event, utilities.add(utilities.subtract(newCoordinates, this.referenceCoordinates), scrollDelta));
28509
- }
28510
- }
28511
- }
28512
-
28513
- handleMove(event, coordinates) {
28514
- const {
28515
- onMove
28516
- } = this.props;
28517
- event.preventDefault();
28518
- onMove(coordinates);
28519
- }
28520
-
28521
- handleEnd(event) {
28522
- const {
28523
- onEnd
28524
- } = this.props;
28525
- event.preventDefault();
28526
- this.detach();
28527
- onEnd();
28528
- }
28529
-
28530
- handleCancel(event) {
28531
- const {
28532
- onCancel
28533
- } = this.props;
28534
- event.preventDefault();
28535
- this.detach();
28536
- onCancel();
28537
- }
28538
-
28539
- detach() {
28540
- this.listeners.removeAll();
28541
- this.windowListeners.removeAll();
28542
- }
28543
-
28544
- }
28545
- KeyboardSensor.activators = [{
28546
- eventName: 'onKeyDown',
28547
- handler: (event, _ref, _ref2) => {
28548
- let {
28549
- keyboardCodes = defaultKeyboardCodes,
28550
- onActivation
28551
- } = _ref;
28552
- let {
28553
- active
28554
- } = _ref2;
28555
- const {
28556
- code
28557
- } = event.nativeEvent;
28558
-
28559
- if (keyboardCodes.start.includes(code)) {
28560
- const activator = active.activatorNode.current;
28561
-
28562
- if (activator && event.target !== activator) {
28563
- return false;
28564
- }
28565
-
28566
- event.preventDefault();
28567
- onActivation == null ? void 0 : onActivation({
28568
- event: event.nativeEvent
28569
- });
28570
- return true;
28571
- }
28572
-
28573
- return false;
28574
- }
28575
- }];
28576
-
28577
- function isDistanceConstraint(constraint) {
28578
- return Boolean(constraint && 'distance' in constraint);
28579
- }
28580
-
28581
- function isDelayConstraint(constraint) {
28582
- return Boolean(constraint && 'delay' in constraint);
28583
- }
28584
-
28585
- class AbstractPointerSensor {
28586
- constructor(props, events, listenerTarget) {
28587
- var _getEventCoordinates;
28588
-
28589
- if (listenerTarget === void 0) {
28590
- listenerTarget = getEventListenerTarget(props.event.target);
28591
- }
28592
-
28593
- this.props = void 0;
28594
- this.events = void 0;
28595
- this.autoScrollEnabled = true;
28596
- this.document = void 0;
28597
- this.activated = false;
28598
- this.initialCoordinates = void 0;
28599
- this.timeoutId = null;
28600
- this.listeners = void 0;
28601
- this.documentListeners = void 0;
28602
- this.windowListeners = void 0;
28603
- this.props = props;
28604
- this.events = events;
28605
- const {
28606
- event
28607
- } = props;
28608
- const {
28609
- target
28610
- } = event;
28611
- this.props = props;
28612
- this.events = events;
28613
- this.document = utilities.getOwnerDocument(target);
28614
- this.documentListeners = new Listeners(this.document);
28615
- this.listeners = new Listeners(listenerTarget);
28616
- this.windowListeners = new Listeners(utilities.getWindow(target));
28617
- this.initialCoordinates = (_getEventCoordinates = utilities.getEventCoordinates(event)) != null ? _getEventCoordinates : defaultCoordinates;
28618
- this.handleStart = this.handleStart.bind(this);
28619
- this.handleMove = this.handleMove.bind(this);
28620
- this.handleEnd = this.handleEnd.bind(this);
28621
- this.handleCancel = this.handleCancel.bind(this);
28622
- this.handleKeydown = this.handleKeydown.bind(this);
28623
- this.removeTextSelection = this.removeTextSelection.bind(this);
28624
- this.attach();
28625
- }
28626
-
28627
- attach() {
28628
- const {
28629
- events,
28630
- props: {
28631
- options: {
28632
- activationConstraint,
28633
- bypassActivationConstraint
28634
- }
28635
- }
28636
- } = this;
28637
- this.listeners.add(events.move.name, this.handleMove, {
28638
- passive: false
28639
- });
28640
- this.listeners.add(events.end.name, this.handleEnd);
28641
-
28642
- if (events.cancel) {
28643
- this.listeners.add(events.cancel.name, this.handleCancel);
28644
- }
28645
-
28646
- this.windowListeners.add(EventName.Resize, this.handleCancel);
28647
- this.windowListeners.add(EventName.DragStart, preventDefault);
28648
- this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
28649
- this.windowListeners.add(EventName.ContextMenu, preventDefault);
28650
- this.documentListeners.add(EventName.Keydown, this.handleKeydown);
28651
-
28652
- if (activationConstraint) {
28653
- if (bypassActivationConstraint != null && bypassActivationConstraint({
28654
- event: this.props.event,
28655
- activeNode: this.props.activeNode,
28656
- options: this.props.options
28657
- })) {
28658
- return this.handleStart();
28659
- }
28660
-
28661
- if (isDelayConstraint(activationConstraint)) {
28662
- this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
28663
- this.handlePending(activationConstraint);
28664
- return;
28665
- }
28666
-
28667
- if (isDistanceConstraint(activationConstraint)) {
28668
- this.handlePending(activationConstraint);
28669
- return;
28670
- }
28671
- }
28672
-
28673
- this.handleStart();
28674
- }
28675
-
28676
- detach() {
28677
- this.listeners.removeAll();
28678
- this.windowListeners.removeAll(); // Wait until the next event loop before removing document listeners
28679
- // This is necessary because we listen for `click` and `selection` events on the document
28680
-
28681
- setTimeout(this.documentListeners.removeAll, 50);
28682
-
28683
- if (this.timeoutId !== null) {
28684
- clearTimeout(this.timeoutId);
28685
- this.timeoutId = null;
28686
- }
28687
- }
28688
-
28689
- handlePending(constraint, offset) {
28690
- const {
28691
- active,
28692
- onPending
28693
- } = this.props;
28694
- onPending(active, constraint, this.initialCoordinates, offset);
28695
- }
28696
-
28697
- handleStart() {
28698
- const {
28699
- initialCoordinates
28700
- } = this;
28701
- const {
28702
- onStart
28703
- } = this.props;
28704
-
28705
- if (initialCoordinates) {
28706
- this.activated = true; // Stop propagation of click events once activation constraints are met
28707
-
28708
- this.documentListeners.add(EventName.Click, stopPropagation, {
28709
- capture: true
28710
- }); // Remove any text selection from the document
28711
-
28712
- this.removeTextSelection(); // Prevent further text selection while dragging
28713
-
28714
- this.documentListeners.add(EventName.SelectionChange, this.removeTextSelection);
28715
- onStart(initialCoordinates);
28716
- }
28717
- }
28718
-
28719
- handleMove(event) {
28720
- var _getEventCoordinates2;
28721
-
28722
- const {
28723
- activated,
28724
- initialCoordinates,
28725
- props
28726
- } = this;
28727
- const {
28728
- onMove,
28729
- options: {
28730
- activationConstraint
28731
- }
28732
- } = props;
28733
-
28734
- if (!initialCoordinates) {
28735
- return;
28736
- }
28737
-
28738
- const coordinates = (_getEventCoordinates2 = utilities.getEventCoordinates(event)) != null ? _getEventCoordinates2 : defaultCoordinates;
28739
- const delta = utilities.subtract(initialCoordinates, coordinates); // Constraint validation
28740
-
28741
- if (!activated && activationConstraint) {
28742
- if (isDistanceConstraint(activationConstraint)) {
28743
- if (activationConstraint.tolerance != null && hasExceededDistance(delta, activationConstraint.tolerance)) {
28744
- return this.handleCancel();
28745
- }
28746
-
28747
- if (hasExceededDistance(delta, activationConstraint.distance)) {
28748
- return this.handleStart();
28749
- }
28750
- }
28751
-
28752
- if (isDelayConstraint(activationConstraint)) {
28753
- if (hasExceededDistance(delta, activationConstraint.tolerance)) {
28754
- return this.handleCancel();
28755
- }
28756
- }
28757
-
28758
- this.handlePending(activationConstraint, delta);
28759
- return;
28760
- }
28761
-
28762
- if (event.cancelable) {
28763
- event.preventDefault();
28764
- }
28765
-
28766
- onMove(coordinates);
28767
- }
28768
-
28769
- handleEnd() {
28770
- const {
28771
- onAbort,
28772
- onEnd
28773
- } = this.props;
28774
- this.detach();
28775
-
28776
- if (!this.activated) {
28777
- onAbort(this.props.active);
28778
- }
28779
-
28780
- onEnd();
28781
- }
28782
-
28783
- handleCancel() {
28784
- const {
28785
- onAbort,
28786
- onCancel
28787
- } = this.props;
28788
- this.detach();
28789
-
28790
- if (!this.activated) {
28791
- onAbort(this.props.active);
28792
- }
28793
-
28794
- onCancel();
28795
- }
28796
-
28797
- handleKeydown(event) {
28798
- if (event.code === KeyboardCode.Esc) {
28799
- this.handleCancel();
28800
- }
28801
- }
28802
-
28803
- removeTextSelection() {
28804
- var _this$document$getSel;
28805
-
28806
- (_this$document$getSel = this.document.getSelection()) == null ? void 0 : _this$document$getSel.removeAllRanges();
28807
- }
28808
-
28809
- }
28810
-
28811
- const events = {
28812
- cancel: {
28813
- name: 'pointercancel'
28814
- },
28815
- move: {
28816
- name: 'pointermove'
28817
- },
28818
- end: {
28819
- name: 'pointerup'
28820
- }
28821
- };
28822
- class PointerSensor extends AbstractPointerSensor {
28823
- constructor(props) {
28824
- const {
28825
- event
28826
- } = props; // Pointer events stop firing if the target is unmounted while dragging
28827
- // Therefore we attach listeners to the owner document instead
28828
-
28829
- const listenerTarget = utilities.getOwnerDocument(event.target);
28830
- super(props, events, listenerTarget);
28831
- }
28832
-
28833
- }
28834
- PointerSensor.activators = [{
28835
- eventName: 'onPointerDown',
28836
- handler: (_ref, _ref2) => {
28837
- let {
28838
- nativeEvent: event
28839
- } = _ref;
28840
- let {
28841
- onActivation
28842
- } = _ref2;
28843
-
28844
- if (!event.isPrimary || event.button !== 0) {
28845
- return false;
28846
- }
28847
-
28848
- onActivation == null ? void 0 : onActivation({
28849
- event
28850
- });
28851
- return true;
28852
- }
28853
- }];
28854
-
28855
- const events$1 = {
28856
- move: {
28857
- name: 'mousemove'
28858
- },
28859
- end: {
28860
- name: 'mouseup'
28861
- }
28862
- };
28863
- var MouseButton;
28864
-
28865
- (function (MouseButton) {
28866
- MouseButton[MouseButton["RightClick"] = 2] = "RightClick";
28867
- })(MouseButton || (MouseButton = {}));
28868
-
28869
- class MouseSensor extends AbstractPointerSensor {
28870
- constructor(props) {
28871
- super(props, events$1, utilities.getOwnerDocument(props.event.target));
28872
- }
28873
-
28874
- }
28875
- MouseSensor.activators = [{
28876
- eventName: 'onMouseDown',
28877
- handler: (_ref, _ref2) => {
28878
- let {
28879
- nativeEvent: event
28880
- } = _ref;
28881
- let {
28882
- onActivation
28883
- } = _ref2;
28884
-
28885
- if (event.button === MouseButton.RightClick) {
28886
- return false;
28887
- }
28888
-
28889
- onActivation == null ? void 0 : onActivation({
28890
- event
28891
- });
28892
- return true;
28893
- }
28894
- }];
28895
-
28896
- const events$2 = {
28897
- cancel: {
28898
- name: 'touchcancel'
28899
- },
28900
- move: {
28901
- name: 'touchmove'
28902
- },
28903
- end: {
28904
- name: 'touchend'
28905
- }
28906
- };
28907
- class TouchSensor extends AbstractPointerSensor {
28908
- constructor(props) {
28909
- super(props, events$2);
28910
- }
28911
-
28912
- static setup() {
28913
- // Adding a non-capture and non-passive `touchmove` listener in order
28914
- // to force `event.preventDefault()` calls to work in dynamically added
28915
- // touchmove event handlers. This is required for iOS Safari.
28916
- window.addEventListener(events$2.move.name, noop, {
28917
- capture: false,
28918
- passive: false
28919
- });
28920
- return function teardown() {
28921
- window.removeEventListener(events$2.move.name, noop);
28922
- }; // We create a new handler because the teardown function of another sensor
28923
- // could remove our event listener if we use a referentially equal listener.
28924
-
28925
- function noop() {}
28926
- }
28927
-
28928
- }
28929
- TouchSensor.activators = [{
28930
- eventName: 'onTouchStart',
28931
- handler: (_ref, _ref2) => {
28932
- let {
28933
- nativeEvent: event
28934
- } = _ref;
28935
- let {
28936
- onActivation
28937
- } = _ref2;
28938
- const {
28939
- touches
28940
- } = event;
28941
-
28942
- if (touches.length > 1) {
28943
- return false;
28944
- }
28945
-
28946
- onActivation == null ? void 0 : onActivation({
28947
- event
28948
- });
28949
- return true;
28950
- }
28951
- }];
28952
-
28953
- var AutoScrollActivator;
28954
-
28955
- (function (AutoScrollActivator) {
28956
- AutoScrollActivator[AutoScrollActivator["Pointer"] = 0] = "Pointer";
28957
- AutoScrollActivator[AutoScrollActivator["DraggableRect"] = 1] = "DraggableRect";
28958
- })(AutoScrollActivator || (AutoScrollActivator = {}));
28959
-
28960
- var TraversalOrder;
28961
-
28962
- (function (TraversalOrder) {
28963
- TraversalOrder[TraversalOrder["TreeOrder"] = 0] = "TreeOrder";
28964
- TraversalOrder[TraversalOrder["ReversedTreeOrder"] = 1] = "ReversedTreeOrder";
28965
- })(TraversalOrder || (TraversalOrder = {}));
28966
-
28967
- function useAutoScroller(_ref) {
28968
- let {
28969
- acceleration,
28970
- activator = AutoScrollActivator.Pointer,
28971
- canScroll,
28972
- draggingRect,
28973
- enabled,
28974
- interval = 5,
28975
- order = TraversalOrder.TreeOrder,
28976
- pointerCoordinates,
28977
- scrollableAncestors,
28978
- scrollableAncestorRects,
28979
- delta,
28980
- threshold
28981
- } = _ref;
28982
- const scrollIntent = useScrollIntent({
28983
- delta,
28984
- disabled: !enabled
28985
- });
28986
- const [setAutoScrollInterval, clearAutoScrollInterval] = utilities.useInterval();
28987
- const scrollSpeed = React.useRef({
28988
- x: 0,
28989
- y: 0
28990
- });
28991
- const scrollDirection = React.useRef({
28992
- x: 0,
28993
- y: 0
28994
- });
28995
- const rect = React.useMemo(() => {
28996
- switch (activator) {
28997
- case AutoScrollActivator.Pointer:
28998
- return pointerCoordinates ? {
28999
- top: pointerCoordinates.y,
29000
- bottom: pointerCoordinates.y,
29001
- left: pointerCoordinates.x,
29002
- right: pointerCoordinates.x
29003
- } : null;
29004
-
29005
- case AutoScrollActivator.DraggableRect:
29006
- return draggingRect;
29007
- }
29008
- }, [activator, draggingRect, pointerCoordinates]);
29009
- const scrollContainerRef = React.useRef(null);
29010
- const autoScroll = React.useCallback(() => {
29011
- const scrollContainer = scrollContainerRef.current;
29012
-
29013
- if (!scrollContainer) {
29014
- return;
29015
- }
29016
-
29017
- const scrollLeft = scrollSpeed.current.x * scrollDirection.current.x;
29018
- const scrollTop = scrollSpeed.current.y * scrollDirection.current.y;
29019
- scrollContainer.scrollBy(scrollLeft, scrollTop);
29020
- }, []);
29021
- const sortedScrollableAncestors = React.useMemo(() => order === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order, scrollableAncestors]);
29022
- React.useEffect(() => {
29023
- if (!enabled || !scrollableAncestors.length || !rect) {
29024
- clearAutoScrollInterval();
29025
- return;
29026
- }
29027
-
29028
- for (const scrollContainer of sortedScrollableAncestors) {
29029
- if ((canScroll == null ? void 0 : canScroll(scrollContainer)) === false) {
29030
- continue;
29031
- }
29032
-
29033
- const index = scrollableAncestors.indexOf(scrollContainer);
29034
- const scrollContainerRect = scrollableAncestorRects[index];
29035
-
29036
- if (!scrollContainerRect) {
29037
- continue;
29038
- }
29039
-
29040
- const {
29041
- direction,
29042
- speed
29043
- } = getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, rect, acceleration, threshold);
29044
-
29045
- for (const axis of ['x', 'y']) {
29046
- if (!scrollIntent[axis][direction[axis]]) {
29047
- speed[axis] = 0;
29048
- direction[axis] = 0;
29049
- }
29050
- }
29051
-
29052
- if (speed.x > 0 || speed.y > 0) {
29053
- clearAutoScrollInterval();
29054
- scrollContainerRef.current = scrollContainer;
29055
- setAutoScrollInterval(autoScroll, interval);
29056
- scrollSpeed.current = speed;
29057
- scrollDirection.current = direction;
29058
- return;
29059
- }
29060
- }
29061
-
29062
- scrollSpeed.current = {
29063
- x: 0,
29064
- y: 0
29065
- };
29066
- scrollDirection.current = {
29067
- x: 0,
29068
- y: 0
29069
- };
29070
- clearAutoScrollInterval();
29071
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
29072
- [acceleration, autoScroll, canScroll, clearAutoScrollInterval, enabled, interval, // eslint-disable-next-line react-hooks/exhaustive-deps
29073
- JSON.stringify(rect), // eslint-disable-next-line react-hooks/exhaustive-deps
29074
- JSON.stringify(scrollIntent), setAutoScrollInterval, scrollableAncestors, sortedScrollableAncestors, scrollableAncestorRects, // eslint-disable-next-line react-hooks/exhaustive-deps
29075
- JSON.stringify(threshold)]);
29076
- }
29077
- const defaultScrollIntent = {
29078
- x: {
29079
- [Direction.Backward]: false,
29080
- [Direction.Forward]: false
29081
- },
29082
- y: {
29083
- [Direction.Backward]: false,
29084
- [Direction.Forward]: false
29085
- }
29086
- };
29087
-
29088
- function useScrollIntent(_ref2) {
29089
- let {
29090
- delta,
29091
- disabled
29092
- } = _ref2;
29093
- const previousDelta = utilities.usePrevious(delta);
29094
- return utilities.useLazyMemo(previousIntent => {
29095
- if (disabled || !previousDelta || !previousIntent) {
29096
- // Reset scroll intent tracking when auto-scrolling is disabled
29097
- return defaultScrollIntent;
29098
- }
29099
-
29100
- const direction = {
29101
- x: Math.sign(delta.x - previousDelta.x),
29102
- y: Math.sign(delta.y - previousDelta.y)
29103
- }; // Keep track of the user intent to scroll in each direction for both axis
29104
-
29105
- return {
29106
- x: {
29107
- [Direction.Backward]: previousIntent.x[Direction.Backward] || direction.x === -1,
29108
- [Direction.Forward]: previousIntent.x[Direction.Forward] || direction.x === 1
29109
- },
29110
- y: {
29111
- [Direction.Backward]: previousIntent.y[Direction.Backward] || direction.y === -1,
29112
- [Direction.Forward]: previousIntent.y[Direction.Forward] || direction.y === 1
29113
- }
29114
- };
29115
- }, [disabled, delta, previousDelta]);
29116
- }
29117
-
29118
- function useCachedNode(draggableNodes, id) {
29119
- const draggableNode = id != null ? draggableNodes.get(id) : undefined;
29120
- const node = draggableNode ? draggableNode.node.current : null;
29121
- return utilities.useLazyMemo(cachedNode => {
29122
- var _ref;
29123
-
29124
- if (id == null) {
29125
- return null;
29126
- } // In some cases, the draggable node can unmount while dragging
29127
- // This is the case for virtualized lists. In those situations,
29128
- // we fall back to the last known value for that node.
29129
-
29130
-
29131
- return (_ref = node != null ? node : cachedNode) != null ? _ref : null;
29132
- }, [node, id]);
29133
- }
29134
-
29135
- function useCombineActivators(sensors, getSyntheticHandler) {
29136
- return React.useMemo(() => sensors.reduce((accumulator, sensor) => {
29137
- const {
29138
- sensor: Sensor
29139
- } = sensor;
29140
- const sensorActivators = Sensor.activators.map(activator => ({
29141
- eventName: activator.eventName,
29142
- handler: getSyntheticHandler(activator.handler, sensor)
29143
- }));
29144
- return [...accumulator, ...sensorActivators];
29145
- }, []), [sensors, getSyntheticHandler]);
29146
- }
29147
-
29148
- var MeasuringStrategy;
29149
-
29150
- (function (MeasuringStrategy) {
29151
- MeasuringStrategy[MeasuringStrategy["Always"] = 0] = "Always";
29152
- MeasuringStrategy[MeasuringStrategy["BeforeDragging"] = 1] = "BeforeDragging";
29153
- MeasuringStrategy[MeasuringStrategy["WhileDragging"] = 2] = "WhileDragging";
29154
- })(MeasuringStrategy || (MeasuringStrategy = {}));
29155
-
29156
- var MeasuringFrequency;
29157
-
29158
- (function (MeasuringFrequency) {
29159
- MeasuringFrequency["Optimized"] = "optimized";
29160
- })(MeasuringFrequency || (MeasuringFrequency = {}));
29161
-
29162
- const defaultValue = /*#__PURE__*/new Map();
29163
- function useDroppableMeasuring(containers, _ref) {
29164
- let {
29165
- dragging,
29166
- dependencies,
29167
- config
29168
- } = _ref;
29169
- const [queue, setQueue] = React.useState(null);
29170
- const {
29171
- frequency,
29172
- measure,
29173
- strategy
29174
- } = config;
29175
- const containersRef = React.useRef(containers);
29176
- const disabled = isDisabled();
29177
- const disabledRef = utilities.useLatestValue(disabled);
29178
- const measureDroppableContainers = React.useCallback(function (ids) {
29179
- if (ids === void 0) {
29180
- ids = [];
29181
- }
29182
-
29183
- if (disabledRef.current) {
29184
- return;
29185
- }
29186
-
29187
- setQueue(value => {
29188
- if (value === null) {
29189
- return ids;
29190
- }
29191
-
29192
- return value.concat(ids.filter(id => !value.includes(id)));
29193
- });
29194
- }, [disabledRef]);
29195
- const timeoutId = React.useRef(null);
29196
- const droppableRects = utilities.useLazyMemo(previousValue => {
29197
- if (disabled && !dragging) {
29198
- return defaultValue;
29199
- }
29200
-
29201
- if (!previousValue || previousValue === defaultValue || containersRef.current !== containers || queue != null) {
29202
- const map = new Map();
29203
-
29204
- for (let container of containers) {
29205
- if (!container) {
29206
- continue;
29207
- }
29208
-
29209
- if (queue && queue.length > 0 && !queue.includes(container.id) && container.rect.current) {
29210
- // This container does not need to be re-measured
29211
- map.set(container.id, container.rect.current);
29212
- continue;
29213
- }
29214
-
29215
- const node = container.node.current;
29216
- const rect = node ? new Rect(measure(node), node) : null;
29217
- container.rect.current = rect;
29218
-
29219
- if (rect) {
29220
- map.set(container.id, rect);
29221
- }
29222
- }
29223
-
29224
- return map;
29225
- }
29226
-
29227
- return previousValue;
29228
- }, [containers, queue, dragging, disabled, measure]);
29229
- React.useEffect(() => {
29230
- containersRef.current = containers;
29231
- }, [containers]);
29232
- React.useEffect(() => {
29233
- if (disabled) {
29234
- return;
29235
- }
29236
-
29237
- measureDroppableContainers();
29238
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
29239
- [dragging, disabled]);
29240
- React.useEffect(() => {
29241
- if (queue && queue.length > 0) {
29242
- setQueue(null);
29243
- }
29244
- }, //eslint-disable-next-line react-hooks/exhaustive-deps
29245
- [JSON.stringify(queue)]);
29246
- React.useEffect(() => {
29247
- if (disabled || typeof frequency !== 'number' || timeoutId.current !== null) {
29248
- return;
29249
- }
29250
-
29251
- timeoutId.current = setTimeout(() => {
29252
- measureDroppableContainers();
29253
- timeoutId.current = null;
29254
- }, frequency);
29255
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
29256
- [frequency, disabled, measureDroppableContainers, ...dependencies]);
29257
- return {
29258
- droppableRects,
29259
- measureDroppableContainers,
29260
- measuringScheduled: queue != null
29261
- };
29262
-
29263
- function isDisabled() {
29264
- switch (strategy) {
29265
- case MeasuringStrategy.Always:
29266
- return false;
29267
-
29268
- case MeasuringStrategy.BeforeDragging:
29269
- return dragging;
29270
-
29271
- default:
29272
- return !dragging;
29273
- }
29274
- }
29275
- }
29276
-
29277
- function useInitialValue(value, computeFn) {
29278
- return utilities.useLazyMemo(previousValue => {
29279
- if (!value) {
29280
- return null;
29281
- }
29282
-
29283
- if (previousValue) {
29284
- return previousValue;
29285
- }
29286
-
29287
- return typeof computeFn === 'function' ? computeFn(value) : value;
29288
- }, [computeFn, value]);
29289
- }
29290
-
29291
- function useInitialRect(node, measure) {
29292
- return useInitialValue(node, measure);
29293
- }
29294
-
29295
- /**
29296
- * Returns a new MutationObserver instance.
29297
- * If `MutationObserver` is undefined in the execution environment, returns `undefined`.
29298
- */
29299
-
29300
- function useMutationObserver(_ref) {
29301
- let {
29302
- callback,
29303
- disabled
29304
- } = _ref;
29305
- const handleMutations = utilities.useEvent(callback);
29306
- const mutationObserver = React.useMemo(() => {
29307
- if (disabled || typeof window === 'undefined' || typeof window.MutationObserver === 'undefined') {
29308
- return undefined;
29309
- }
29310
-
29311
- const {
29312
- MutationObserver
29313
- } = window;
29314
- return new MutationObserver(handleMutations);
29315
- }, [handleMutations, disabled]);
29316
- React.useEffect(() => {
29317
- return () => mutationObserver == null ? void 0 : mutationObserver.disconnect();
29318
- }, [mutationObserver]);
29319
- return mutationObserver;
29320
- }
29321
-
29322
- /**
29323
- * Returns a new ResizeObserver instance bound to the `onResize` callback.
29324
- * If `ResizeObserver` is undefined in the execution environment, returns `undefined`.
29325
- */
29326
-
29327
- function useResizeObserver(_ref) {
29328
- let {
29329
- callback,
29330
- disabled
29331
- } = _ref;
29332
- const handleResize = utilities.useEvent(callback);
29333
- const resizeObserver = React.useMemo(() => {
29334
- if (disabled || typeof window === 'undefined' || typeof window.ResizeObserver === 'undefined') {
29335
- return undefined;
29336
- }
29337
-
29338
- const {
29339
- ResizeObserver
29340
- } = window;
29341
- return new ResizeObserver(handleResize);
29342
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
29343
- [disabled]);
29344
- React.useEffect(() => {
29345
- return () => resizeObserver == null ? void 0 : resizeObserver.disconnect();
29346
- }, [resizeObserver]);
29347
- return resizeObserver;
29348
- }
29349
-
29350
- function defaultMeasure(element) {
29351
- return new Rect(getClientRect(element), element);
29352
- }
29353
-
29354
- function useRect(element, measure, fallbackRect) {
29355
- if (measure === void 0) {
29356
- measure = defaultMeasure;
29357
- }
29358
-
29359
- const [rect, setRect] = React.useState(null);
29360
-
29361
- function measureRect() {
29362
- setRect(currentRect => {
29363
- if (!element) {
29364
- return null;
29365
- }
29366
-
29367
- if (element.isConnected === false) {
29368
- var _ref;
29369
-
29370
- // Fall back to last rect we measured if the element is
29371
- // no longer connected to the DOM.
29372
- return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
29373
- }
29374
-
29375
- const newRect = measure(element);
29376
-
29377
- if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
29378
- return currentRect;
29379
- }
29380
-
29381
- return newRect;
29382
- });
29383
- }
29384
-
29385
- const mutationObserver = useMutationObserver({
29386
- callback(records) {
29387
- if (!element) {
29388
- return;
29389
- }
29390
-
29391
- for (const record of records) {
29392
- const {
29393
- type,
29394
- target
29395
- } = record;
29396
-
29397
- if (type === 'childList' && target instanceof HTMLElement && target.contains(element)) {
29398
- measureRect();
29399
- break;
29400
- }
29401
- }
29402
- }
29403
-
29404
- });
29405
- const resizeObserver = useResizeObserver({
29406
- callback: measureRect
29407
- });
29408
- utilities.useIsomorphicLayoutEffect(() => {
29409
- measureRect();
29410
-
29411
- if (element) {
29412
- resizeObserver == null ? void 0 : resizeObserver.observe(element);
29413
- mutationObserver == null ? void 0 : mutationObserver.observe(document.body, {
29414
- childList: true,
29415
- subtree: true
29416
- });
29417
- } else {
29418
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
29419
- mutationObserver == null ? void 0 : mutationObserver.disconnect();
29420
- }
29421
- }, [element]);
29422
- return rect;
29423
- }
29424
-
29425
- function useRectDelta(rect) {
29426
- const initialRect = useInitialValue(rect);
29427
- return getRectDelta(rect, initialRect);
29428
- }
29429
-
29430
- const defaultValue$1 = [];
29431
- function useScrollableAncestors(node) {
29432
- const previousNode = React.useRef(node);
29433
- const ancestors = utilities.useLazyMemo(previousValue => {
29434
- if (!node) {
29435
- return defaultValue$1;
29436
- }
29437
-
29438
- if (previousValue && previousValue !== defaultValue$1 && node && previousNode.current && node.parentNode === previousNode.current.parentNode) {
29439
- return previousValue;
29440
- }
29441
-
29442
- return getScrollableAncestors(node);
29443
- }, [node]);
29444
- React.useEffect(() => {
29445
- previousNode.current = node;
29446
- }, [node]);
29447
- return ancestors;
29448
- }
29449
-
29450
- function useScrollOffsets(elements) {
29451
- const [scrollCoordinates, setScrollCoordinates] = React.useState(null);
29452
- const prevElements = React.useRef(elements); // To-do: Throttle the handleScroll callback
29453
-
29454
- const handleScroll = React.useCallback(event => {
29455
- const scrollingElement = getScrollableElement(event.target);
29456
-
29457
- if (!scrollingElement) {
29458
- return;
29459
- }
29460
-
29461
- setScrollCoordinates(scrollCoordinates => {
29462
- if (!scrollCoordinates) {
29463
- return null;
29464
- }
29465
-
29466
- scrollCoordinates.set(scrollingElement, getScrollCoordinates(scrollingElement));
29467
- return new Map(scrollCoordinates);
29468
- });
29469
- }, []);
29470
- React.useEffect(() => {
29471
- const previousElements = prevElements.current;
29472
-
29473
- if (elements !== previousElements) {
29474
- cleanup(previousElements);
29475
- const entries = elements.map(element => {
29476
- const scrollableElement = getScrollableElement(element);
29477
-
29478
- if (scrollableElement) {
29479
- scrollableElement.addEventListener('scroll', handleScroll, {
29480
- passive: true
29481
- });
29482
- return [scrollableElement, getScrollCoordinates(scrollableElement)];
29483
- }
29484
-
29485
- return null;
29486
- }).filter(entry => entry != null);
29487
- setScrollCoordinates(entries.length ? new Map(entries) : null);
29488
- prevElements.current = elements;
29489
- }
29490
-
29491
- return () => {
29492
- cleanup(elements);
29493
- cleanup(previousElements);
29494
- };
29495
-
29496
- function cleanup(elements) {
29497
- elements.forEach(element => {
29498
- const scrollableElement = getScrollableElement(element);
29499
- scrollableElement == null ? void 0 : scrollableElement.removeEventListener('scroll', handleScroll);
29500
- });
29501
- }
29502
- }, [handleScroll, elements]);
29503
- return React.useMemo(() => {
29504
- if (elements.length) {
29505
- return scrollCoordinates ? Array.from(scrollCoordinates.values()).reduce((acc, coordinates) => utilities.add(acc, coordinates), defaultCoordinates) : getScrollOffsets(elements);
29506
- }
29507
-
29508
- return defaultCoordinates;
29509
- }, [elements, scrollCoordinates]);
29510
- }
29511
-
29512
- function useScrollOffsetsDelta(scrollOffsets, dependencies) {
29513
- if (dependencies === void 0) {
29514
- dependencies = [];
29515
- }
29516
-
29517
- const initialScrollOffsets = React.useRef(null);
29518
- React.useEffect(() => {
29519
- initialScrollOffsets.current = null;
29520
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
29521
- dependencies);
29522
- React.useEffect(() => {
29523
- const hasScrollOffsets = scrollOffsets !== defaultCoordinates;
29524
-
29525
- if (hasScrollOffsets && !initialScrollOffsets.current) {
29526
- initialScrollOffsets.current = scrollOffsets;
29527
- }
29528
-
29529
- if (!hasScrollOffsets && initialScrollOffsets.current) {
29530
- initialScrollOffsets.current = null;
29531
- }
29532
- }, [scrollOffsets]);
29533
- return initialScrollOffsets.current ? utilities.subtract(scrollOffsets, initialScrollOffsets.current) : defaultCoordinates;
29534
- }
29535
-
29536
- function useSensorSetup(sensors) {
29537
- React.useEffect(() => {
29538
- if (!utilities.canUseDOM) {
29539
- return;
29540
- }
29541
-
29542
- const teardownFns = sensors.map(_ref => {
29543
- let {
29544
- sensor
29545
- } = _ref;
29546
- return sensor.setup == null ? void 0 : sensor.setup();
29547
- });
29548
- return () => {
29549
- for (const teardown of teardownFns) {
29550
- teardown == null ? void 0 : teardown();
29551
- }
29552
- };
29553
- }, // TO-DO: Sensors length could theoretically change which would not be a valid dependency
29554
- // eslint-disable-next-line react-hooks/exhaustive-deps
29555
- sensors.map(_ref2 => {
29556
- let {
29557
- sensor
29558
- } = _ref2;
29559
- return sensor;
29560
- }));
29561
- }
29562
-
29563
- function useWindowRect(element) {
29564
- return React.useMemo(() => element ? getWindowClientRect(element) : null, [element]);
29565
- }
29566
-
29567
- const defaultValue$2 = [];
29568
- function useRects(elements, measure) {
29569
- if (measure === void 0) {
29570
- measure = getClientRect;
29571
- }
29572
-
29573
- const [firstElement] = elements;
29574
- const windowRect = useWindowRect(firstElement ? utilities.getWindow(firstElement) : null);
29575
- const [rects, setRects] = React.useState(defaultValue$2);
29576
-
29577
- function measureRects() {
29578
- setRects(() => {
29579
- if (!elements.length) {
29580
- return defaultValue$2;
29581
- }
29582
-
29583
- return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
29584
- });
29585
- }
29586
-
29587
- const resizeObserver = useResizeObserver({
29588
- callback: measureRects
29589
- });
29590
- utilities.useIsomorphicLayoutEffect(() => {
29591
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
29592
- measureRects();
29593
- elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
29594
- }, [elements]);
29595
- return rects;
29596
- }
29597
-
29598
- function getMeasurableNode(node) {
29599
- if (!node) {
29600
- return null;
29601
- }
29602
-
29603
- if (node.children.length > 1) {
29604
- return node;
29605
- }
29606
-
29607
- const firstChild = node.children[0];
29608
- return utilities.isHTMLElement(firstChild) ? firstChild : node;
29609
- }
29610
-
29611
- function useDragOverlayMeasuring(_ref) {
29612
- let {
29613
- measure
29614
- } = _ref;
29615
- const [rect, setRect] = React.useState(null);
29616
- const handleResize = React.useCallback(entries => {
29617
- for (const {
29618
- target
29619
- } of entries) {
29620
- if (utilities.isHTMLElement(target)) {
29621
- setRect(rect => {
29622
- const newRect = measure(target);
29623
- return rect ? { ...rect,
29624
- width: newRect.width,
29625
- height: newRect.height
29626
- } : newRect;
29627
- });
29628
- break;
29629
- }
29630
- }
29631
- }, [measure]);
29632
- const resizeObserver = useResizeObserver({
29633
- callback: handleResize
29634
- });
29635
- const handleNodeChange = React.useCallback(element => {
29636
- const node = getMeasurableNode(element);
29637
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
29638
-
29639
- if (node) {
29640
- resizeObserver == null ? void 0 : resizeObserver.observe(node);
29641
- }
29642
-
29643
- setRect(node ? measure(node) : null);
29644
- }, [measure, resizeObserver]);
29645
- const [nodeRef, setRef] = utilities.useNodeRef(handleNodeChange);
29646
- return React.useMemo(() => ({
29647
- nodeRef,
29648
- rect,
29649
- setRef
29650
- }), [rect, nodeRef, setRef]);
29651
- }
29652
-
29653
- const defaultSensors = [{
29654
- sensor: PointerSensor,
29655
- options: {}
29656
- }, {
29657
- sensor: KeyboardSensor,
29658
- options: {}
29659
- }];
29660
- const defaultData = {
29661
- current: {}
29662
- };
29663
- const defaultMeasuringConfiguration = {
29664
- draggable: {
29665
- measure: getTransformAgnosticClientRect
29666
- },
29667
- droppable: {
29668
- measure: getTransformAgnosticClientRect,
29669
- strategy: MeasuringStrategy.WhileDragging,
29670
- frequency: MeasuringFrequency.Optimized
29671
- },
29672
- dragOverlay: {
29673
- measure: getClientRect
29674
- }
29675
- };
29676
-
29677
- class DroppableContainersMap extends Map {
29678
- get(id) {
29679
- var _super$get;
29680
-
29681
- return id != null ? (_super$get = super.get(id)) != null ? _super$get : undefined : undefined;
29682
- }
29683
-
29684
- toArray() {
29685
- return Array.from(this.values());
29686
- }
29687
-
29688
- getEnabled() {
29689
- return this.toArray().filter(_ref => {
29690
- let {
29691
- disabled
29692
- } = _ref;
29693
- return !disabled;
29694
- });
29695
- }
29696
-
29697
- getNodeFor(id) {
29698
- var _this$get$node$curren, _this$get;
29699
-
29700
- return (_this$get$node$curren = (_this$get = this.get(id)) == null ? void 0 : _this$get.node.current) != null ? _this$get$node$curren : undefined;
29701
- }
29702
-
29703
- }
29704
-
29705
- const defaultPublicContext = {
29706
- activatorEvent: null,
29707
- active: null,
29708
- activeNode: null,
29709
- activeNodeRect: null,
29710
- collisions: null,
29711
- containerNodeRect: null,
29712
- draggableNodes: /*#__PURE__*/new Map(),
29713
- droppableRects: /*#__PURE__*/new Map(),
29714
- droppableContainers: /*#__PURE__*/new DroppableContainersMap(),
29715
- over: null,
29716
- dragOverlay: {
29717
- nodeRef: {
29718
- current: null
29719
- },
29720
- rect: null,
29721
- setRef: noop
29722
- },
29723
- scrollableAncestors: [],
29724
- scrollableAncestorRects: [],
29725
- measuringConfiguration: defaultMeasuringConfiguration,
29726
- measureDroppableContainers: noop,
29727
- windowRect: null,
29728
- measuringScheduled: false
29729
- };
29730
- const defaultInternalContext = {
29731
- activatorEvent: null,
29732
- activators: [],
29733
- active: null,
29734
- activeNodeRect: null,
29735
- ariaDescribedById: {
29736
- draggable: ''
29737
- },
29738
- dispatch: noop,
29739
- draggableNodes: /*#__PURE__*/new Map(),
29740
- over: null,
29741
- measureDroppableContainers: noop
29742
- };
29743
- const InternalContext = /*#__PURE__*/React.createContext(defaultInternalContext);
29744
- const PublicContext = /*#__PURE__*/React.createContext(defaultPublicContext);
29745
-
29746
- function getInitialState() {
29747
- return {
29748
- draggable: {
29749
- active: null,
29750
- initialCoordinates: {
29751
- x: 0,
29752
- y: 0
29753
- },
29754
- nodes: new Map(),
29755
- translate: {
29756
- x: 0,
29757
- y: 0
29758
- }
29759
- },
29760
- droppable: {
29761
- containers: new DroppableContainersMap()
29762
- }
29763
- };
29764
- }
29765
- function reducer(state, action) {
29766
- switch (action.type) {
29767
- case Action.DragStart:
29768
- return { ...state,
29769
- draggable: { ...state.draggable,
29770
- initialCoordinates: action.initialCoordinates,
29771
- active: action.active
29772
- }
29773
- };
29774
-
29775
- case Action.DragMove:
29776
- if (state.draggable.active == null) {
29777
- return state;
29778
- }
29779
-
29780
- return { ...state,
29781
- draggable: { ...state.draggable,
29782
- translate: {
29783
- x: action.coordinates.x - state.draggable.initialCoordinates.x,
29784
- y: action.coordinates.y - state.draggable.initialCoordinates.y
29785
- }
29786
- }
29787
- };
29788
-
29789
- case Action.DragEnd:
29790
- case Action.DragCancel:
29791
- return { ...state,
29792
- draggable: { ...state.draggable,
29793
- active: null,
29794
- initialCoordinates: {
29795
- x: 0,
29796
- y: 0
29797
- },
29798
- translate: {
29799
- x: 0,
29800
- y: 0
29801
- }
29802
- }
29803
- };
29804
-
29805
- case Action.RegisterDroppable:
29806
- {
29807
- const {
29808
- element
29809
- } = action;
29810
- const {
29811
- id
29812
- } = element;
29813
- const containers = new DroppableContainersMap(state.droppable.containers);
29814
- containers.set(id, element);
29815
- return { ...state,
29816
- droppable: { ...state.droppable,
29817
- containers
29818
- }
29819
- };
29820
- }
29821
-
29822
- case Action.SetDroppableDisabled:
29823
- {
29824
- const {
29825
- id,
29826
- key,
29827
- disabled
29828
- } = action;
29829
- const element = state.droppable.containers.get(id);
29830
-
29831
- if (!element || key !== element.key) {
29832
- return state;
29833
- }
29834
-
29835
- const containers = new DroppableContainersMap(state.droppable.containers);
29836
- containers.set(id, { ...element,
29837
- disabled
29838
- });
29839
- return { ...state,
29840
- droppable: { ...state.droppable,
29841
- containers
29842
- }
29843
- };
29844
- }
29845
-
29846
- case Action.UnregisterDroppable:
29847
- {
29848
- const {
29849
- id,
29850
- key
29851
- } = action;
29852
- const element = state.droppable.containers.get(id);
29853
-
29854
- if (!element || key !== element.key) {
29855
- return state;
29856
- }
29857
-
29858
- const containers = new DroppableContainersMap(state.droppable.containers);
29859
- containers.delete(id);
29860
- return { ...state,
29861
- droppable: { ...state.droppable,
29862
- containers
29863
- }
29864
- };
29865
- }
29866
-
29867
- default:
29868
- {
29869
- return state;
29870
- }
29871
- }
29872
- }
29873
-
29874
- function RestoreFocus(_ref) {
29875
- let {
29876
- disabled
29877
- } = _ref;
29878
- const {
29879
- active,
29880
- activatorEvent,
29881
- draggableNodes
29882
- } = React.useContext(InternalContext);
29883
- const previousActivatorEvent = utilities.usePrevious(activatorEvent);
29884
- const previousActiveId = utilities.usePrevious(active == null ? void 0 : active.id); // Restore keyboard focus on the activator node
29885
-
29886
- React.useEffect(() => {
29887
- if (disabled) {
29888
- return;
29889
- }
29890
-
29891
- if (!activatorEvent && previousActivatorEvent && previousActiveId != null) {
29892
- if (!utilities.isKeyboardEvent(previousActivatorEvent)) {
29893
- return;
29894
- }
29895
-
29896
- if (document.activeElement === previousActivatorEvent.target) {
29897
- // No need to restore focus
29898
- return;
29899
- }
29900
-
29901
- const draggableNode = draggableNodes.get(previousActiveId);
29902
-
29903
- if (!draggableNode) {
29904
- return;
29905
- }
29906
-
29907
- const {
29908
- activatorNode,
29909
- node
29910
- } = draggableNode;
29911
-
29912
- if (!activatorNode.current && !node.current) {
29913
- return;
29914
- }
29915
-
29916
- requestAnimationFrame(() => {
29917
- for (const element of [activatorNode.current, node.current]) {
29918
- if (!element) {
29919
- continue;
29920
- }
29921
-
29922
- const focusableNode = utilities.findFirstFocusableNode(element);
29923
-
29924
- if (focusableNode) {
29925
- focusableNode.focus();
29926
- break;
29927
- }
29928
- }
29929
- });
29930
- }
29931
- }, [activatorEvent, disabled, draggableNodes, previousActiveId, previousActivatorEvent]);
29932
- return null;
29933
- }
29934
-
29935
- function applyModifiers(modifiers, _ref) {
29936
- let {
29937
- transform,
29938
- ...args
29939
- } = _ref;
29940
- return modifiers != null && modifiers.length ? modifiers.reduce((accumulator, modifier) => {
29941
- return modifier({
29942
- transform: accumulator,
29943
- ...args
29944
- });
29945
- }, transform) : transform;
29946
- }
29947
-
29948
- function useMeasuringConfiguration(config) {
29949
- return React.useMemo(() => ({
29950
- draggable: { ...defaultMeasuringConfiguration.draggable,
29951
- ...(config == null ? void 0 : config.draggable)
29952
- },
29953
- droppable: { ...defaultMeasuringConfiguration.droppable,
29954
- ...(config == null ? void 0 : config.droppable)
29955
- },
29956
- dragOverlay: { ...defaultMeasuringConfiguration.dragOverlay,
29957
- ...(config == null ? void 0 : config.dragOverlay)
29958
- }
29959
- }), // eslint-disable-next-line react-hooks/exhaustive-deps
29960
- [config == null ? void 0 : config.draggable, config == null ? void 0 : config.droppable, config == null ? void 0 : config.dragOverlay]);
29961
- }
29962
-
29963
- function useLayoutShiftScrollCompensation(_ref) {
29964
- let {
29965
- activeNode,
29966
- measure,
29967
- initialRect,
29968
- config = true
29969
- } = _ref;
29970
- const initialized = React.useRef(false);
29971
- const {
29972
- x,
29973
- y
29974
- } = typeof config === 'boolean' ? {
29975
- x: config,
29976
- y: config
29977
- } : config;
29978
- utilities.useIsomorphicLayoutEffect(() => {
29979
- const disabled = !x && !y;
29980
-
29981
- if (disabled || !activeNode) {
29982
- initialized.current = false;
29983
- return;
29984
- }
29985
-
29986
- if (initialized.current || !initialRect) {
29987
- // Return early if layout shift scroll compensation was already attempted
29988
- // or if there is no initialRect to compare to.
29989
- return;
29990
- } // Get the most up to date node ref for the active draggable
29991
-
29992
-
29993
- const node = activeNode == null ? void 0 : activeNode.node.current;
29994
-
29995
- if (!node || node.isConnected === false) {
29996
- // Return early if there is no attached node ref or if the node is
29997
- // disconnected from the document.
29998
- return;
29999
- }
30000
-
30001
- const rect = measure(node);
30002
- const rectDelta = getRectDelta(rect, initialRect);
30003
-
30004
- if (!x) {
30005
- rectDelta.x = 0;
30006
- }
30007
-
30008
- if (!y) {
30009
- rectDelta.y = 0;
30010
- } // Only perform layout shift scroll compensation once
30011
-
30012
-
30013
- initialized.current = true;
30014
-
30015
- if (Math.abs(rectDelta.x) > 0 || Math.abs(rectDelta.y) > 0) {
30016
- const firstScrollableAncestor = getFirstScrollableAncestor(node);
30017
-
30018
- if (firstScrollableAncestor) {
30019
- firstScrollableAncestor.scrollBy({
30020
- top: rectDelta.y,
30021
- left: rectDelta.x
30022
- });
30023
- }
30024
- }
30025
- }, [activeNode, x, y, initialRect, measure]);
30026
- }
30027
-
30028
- const ActiveDraggableContext = /*#__PURE__*/React.createContext({ ...defaultCoordinates,
30029
- scaleX: 1,
30030
- scaleY: 1
30031
- });
30032
- var Status;
30033
-
30034
- (function (Status) {
30035
- Status[Status["Uninitialized"] = 0] = "Uninitialized";
30036
- Status[Status["Initializing"] = 1] = "Initializing";
30037
- Status[Status["Initialized"] = 2] = "Initialized";
30038
- })(Status || (Status = {}));
30039
-
30040
- const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
30041
- var _sensorContext$curren, _dragOverlay$nodeRef$, _dragOverlay$rect, _over$rect;
30042
-
30043
- let {
30044
- id,
30045
- accessibility,
30046
- autoScroll = true,
30047
- children,
30048
- sensors = defaultSensors,
30049
- collisionDetection = rectIntersection,
30050
- measuring,
30051
- modifiers,
30052
- ...props
30053
- } = _ref;
30054
- const store = React.useReducer(reducer, undefined, getInitialState);
30055
- const [state, dispatch] = store;
30056
- const [dispatchMonitorEvent, registerMonitorListener] = useDndMonitorProvider();
30057
- const [status, setStatus] = React.useState(Status.Uninitialized);
30058
- const isInitialized = status === Status.Initialized;
30059
- const {
30060
- draggable: {
30061
- active: activeId,
30062
- nodes: draggableNodes,
30063
- translate
30064
- },
30065
- droppable: {
30066
- containers: droppableContainers
30067
- }
30068
- } = state;
30069
- const node = activeId != null ? draggableNodes.get(activeId) : null;
30070
- const activeRects = React.useRef({
30071
- initial: null,
30072
- translated: null
30073
- });
30074
- const active = React.useMemo(() => {
30075
- var _node$data;
30076
-
30077
- return activeId != null ? {
30078
- id: activeId,
30079
- // It's possible for the active node to unmount while dragging
30080
- data: (_node$data = node == null ? void 0 : node.data) != null ? _node$data : defaultData,
30081
- rect: activeRects
30082
- } : null;
30083
- }, [activeId, node]);
30084
- const activeRef = React.useRef(null);
30085
- const [activeSensor, setActiveSensor] = React.useState(null);
30086
- const [activatorEvent, setActivatorEvent] = React.useState(null);
30087
- const latestProps = utilities.useLatestValue(props, Object.values(props));
30088
- const draggableDescribedById = utilities.useUniqueId("DndDescribedBy", id);
30089
- const enabledDroppableContainers = React.useMemo(() => droppableContainers.getEnabled(), [droppableContainers]);
30090
- const measuringConfiguration = useMeasuringConfiguration(measuring);
30091
- const {
30092
- droppableRects,
30093
- measureDroppableContainers,
30094
- measuringScheduled
30095
- } = useDroppableMeasuring(enabledDroppableContainers, {
30096
- dragging: isInitialized,
30097
- dependencies: [translate.x, translate.y],
30098
- config: measuringConfiguration.droppable
30099
- });
30100
- const activeNode = useCachedNode(draggableNodes, activeId);
30101
- const activationCoordinates = React.useMemo(() => activatorEvent ? utilities.getEventCoordinates(activatorEvent) : null, [activatorEvent]);
30102
- const autoScrollOptions = getAutoScrollerOptions();
30103
- const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
30104
- useLayoutShiftScrollCompensation({
30105
- activeNode: activeId != null ? draggableNodes.get(activeId) : null,
30106
- config: autoScrollOptions.layoutShiftCompensation,
30107
- initialRect: initialActiveNodeRect,
30108
- measure: measuringConfiguration.draggable.measure
30109
- });
30110
- const activeNodeRect = useRect(activeNode, measuringConfiguration.draggable.measure, initialActiveNodeRect);
30111
- const containerNodeRect = useRect(activeNode ? activeNode.parentElement : null);
30112
- const sensorContext = React.useRef({
30113
- activatorEvent: null,
30114
- active: null,
30115
- activeNode,
30116
- collisionRect: null,
30117
- collisions: null,
30118
- droppableRects,
30119
- draggableNodes,
30120
- draggingNode: null,
30121
- draggingNodeRect: null,
30122
- droppableContainers,
30123
- over: null,
30124
- scrollableAncestors: [],
30125
- scrollAdjustedTranslate: null
30126
- });
30127
- const overNode = droppableContainers.getNodeFor((_sensorContext$curren = sensorContext.current.over) == null ? void 0 : _sensorContext$curren.id);
30128
- const dragOverlay = useDragOverlayMeasuring({
30129
- measure: measuringConfiguration.dragOverlay.measure
30130
- }); // Use the rect of the drag overlay if it is mounted
30131
-
30132
- const draggingNode = (_dragOverlay$nodeRef$ = dragOverlay.nodeRef.current) != null ? _dragOverlay$nodeRef$ : activeNode;
30133
- const draggingNodeRect = isInitialized ? (_dragOverlay$rect = dragOverlay.rect) != null ? _dragOverlay$rect : activeNodeRect : null;
30134
- const usesDragOverlay = Boolean(dragOverlay.nodeRef.current && dragOverlay.rect); // The delta between the previous and new position of the draggable node
30135
- // is only relevant when there is no drag overlay
30136
-
30137
- const nodeRectDelta = useRectDelta(usesDragOverlay ? null : activeNodeRect); // Get the window rect of the dragging node
30138
-
30139
- const windowRect = useWindowRect(draggingNode ? utilities.getWindow(draggingNode) : null); // Get scrollable ancestors of the dragging node
30140
-
30141
- const scrollableAncestors = useScrollableAncestors(isInitialized ? overNode != null ? overNode : activeNode : null);
30142
- const scrollableAncestorRects = useRects(scrollableAncestors); // Apply modifiers
30143
-
30144
- const modifiedTranslate = applyModifiers(modifiers, {
30145
- transform: {
30146
- x: translate.x - nodeRectDelta.x,
30147
- y: translate.y - nodeRectDelta.y,
30148
- scaleX: 1,
30149
- scaleY: 1
30150
- },
30151
- activatorEvent,
30152
- active,
30153
- activeNodeRect,
30154
- containerNodeRect,
30155
- draggingNodeRect,
30156
- over: sensorContext.current.over,
30157
- overlayNodeRect: dragOverlay.rect,
30158
- scrollableAncestors,
30159
- scrollableAncestorRects,
30160
- windowRect
30161
- });
30162
- const pointerCoordinates = activationCoordinates ? utilities.add(activationCoordinates, translate) : null;
30163
- const scrollOffsets = useScrollOffsets(scrollableAncestors); // Represents the scroll delta since dragging was initiated
30164
-
30165
- const scrollAdjustment = useScrollOffsetsDelta(scrollOffsets); // Represents the scroll delta since the last time the active node rect was measured
30166
-
30167
- const activeNodeScrollDelta = useScrollOffsetsDelta(scrollOffsets, [activeNodeRect]);
30168
- const scrollAdjustedTranslate = utilities.add(modifiedTranslate, scrollAdjustment);
30169
- const collisionRect = draggingNodeRect ? getAdjustedRect(draggingNodeRect, modifiedTranslate) : null;
30170
- const collisions = active && collisionRect ? collisionDetection({
30171
- active,
30172
- collisionRect,
30173
- droppableRects,
30174
- droppableContainers: enabledDroppableContainers,
30175
- pointerCoordinates
30176
- }) : null;
30177
- const overId = getFirstCollision(collisions, 'id');
30178
- const [over, setOver] = React.useState(null); // When there is no drag overlay used, we need to account for the
30179
- // window scroll delta
30180
-
30181
- const appliedTranslate = usesDragOverlay ? modifiedTranslate : utilities.add(modifiedTranslate, activeNodeScrollDelta);
30182
- const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
30183
- const activeSensorRef = React.useRef(null);
30184
- const instantiateSensor = React.useCallback((event, _ref2) => {
30185
- let {
30186
- sensor: Sensor,
30187
- options
30188
- } = _ref2;
30189
-
30190
- if (activeRef.current == null) {
30191
- return;
30192
- }
30193
-
30194
- const activeNode = draggableNodes.get(activeRef.current);
30195
-
30196
- if (!activeNode) {
30197
- return;
30198
- }
30199
-
30200
- const activatorEvent = event.nativeEvent;
30201
- const sensorInstance = new Sensor({
30202
- active: activeRef.current,
30203
- activeNode,
30204
- event: activatorEvent,
30205
- options,
30206
- // Sensors need to be instantiated with refs for arguments that change over time
30207
- // otherwise they are frozen in time with the stale arguments
30208
- context: sensorContext,
30209
-
30210
- onAbort(id) {
30211
- const draggableNode = draggableNodes.get(id);
30212
-
30213
- if (!draggableNode) {
30214
- return;
30215
- }
30216
-
30217
- const {
30218
- onDragAbort
30219
- } = latestProps.current;
30220
- const event = {
30221
- id
30222
- };
30223
- onDragAbort == null ? void 0 : onDragAbort(event);
30224
- dispatchMonitorEvent({
30225
- type: 'onDragAbort',
30226
- event
30227
- });
30228
- },
30229
-
30230
- onPending(id, constraint, initialCoordinates, offset) {
30231
- const draggableNode = draggableNodes.get(id);
30232
-
30233
- if (!draggableNode) {
30234
- return;
30235
- }
30236
-
30237
- const {
30238
- onDragPending
30239
- } = latestProps.current;
30240
- const event = {
30241
- id,
30242
- constraint,
30243
- initialCoordinates,
30244
- offset
30245
- };
30246
- onDragPending == null ? void 0 : onDragPending(event);
30247
- dispatchMonitorEvent({
30248
- type: 'onDragPending',
30249
- event
30250
- });
30251
- },
30252
-
30253
- onStart(initialCoordinates) {
30254
- const id = activeRef.current;
30255
-
30256
- if (id == null) {
30257
- return;
30258
- }
30259
-
30260
- const draggableNode = draggableNodes.get(id);
30261
-
30262
- if (!draggableNode) {
30263
- return;
30264
- }
30265
-
30266
- const {
30267
- onDragStart
30268
- } = latestProps.current;
30269
- const event = {
30270
- activatorEvent,
30271
- active: {
30272
- id,
30273
- data: draggableNode.data,
30274
- rect: activeRects
30275
- }
30276
- };
30277
- ReactDOM.unstable_batchedUpdates(() => {
30278
- onDragStart == null ? void 0 : onDragStart(event);
30279
- setStatus(Status.Initializing);
30280
- dispatch({
30281
- type: Action.DragStart,
30282
- initialCoordinates,
30283
- active: id
30284
- });
30285
- dispatchMonitorEvent({
30286
- type: 'onDragStart',
30287
- event
30288
- });
30289
- setActiveSensor(activeSensorRef.current);
30290
- setActivatorEvent(activatorEvent);
30291
- });
30292
- },
30293
-
30294
- onMove(coordinates) {
30295
- dispatch({
30296
- type: Action.DragMove,
30297
- coordinates
30298
- });
30299
- },
30300
-
30301
- onEnd: createHandler(Action.DragEnd),
30302
- onCancel: createHandler(Action.DragCancel)
30303
- });
30304
- activeSensorRef.current = sensorInstance;
30305
-
30306
- function createHandler(type) {
30307
- return async function handler() {
30308
- const {
30309
- active,
30310
- collisions,
30311
- over,
30312
- scrollAdjustedTranslate
30313
- } = sensorContext.current;
30314
- let event = null;
30315
-
30316
- if (active && scrollAdjustedTranslate) {
30317
- const {
30318
- cancelDrop
30319
- } = latestProps.current;
30320
- event = {
30321
- activatorEvent,
30322
- active: active,
30323
- collisions,
30324
- delta: scrollAdjustedTranslate,
30325
- over
30326
- };
30327
-
30328
- if (type === Action.DragEnd && typeof cancelDrop === 'function') {
30329
- const shouldCancel = await Promise.resolve(cancelDrop(event));
30330
-
30331
- if (shouldCancel) {
30332
- type = Action.DragCancel;
30333
- }
30334
- }
30335
- }
30336
-
30337
- activeRef.current = null;
30338
- ReactDOM.unstable_batchedUpdates(() => {
30339
- dispatch({
30340
- type
30341
- });
30342
- setStatus(Status.Uninitialized);
30343
- setOver(null);
30344
- setActiveSensor(null);
30345
- setActivatorEvent(null);
30346
- activeSensorRef.current = null;
30347
- const eventName = type === Action.DragEnd ? 'onDragEnd' : 'onDragCancel';
30348
-
30349
- if (event) {
30350
- const handler = latestProps.current[eventName];
30351
- handler == null ? void 0 : handler(event);
30352
- dispatchMonitorEvent({
30353
- type: eventName,
30354
- event
30355
- });
30356
- }
30357
- });
30358
- };
30359
- }
30360
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
30361
- [draggableNodes]);
30362
- const bindActivatorToSensorInstantiator = React.useCallback((handler, sensor) => {
30363
- return (event, active) => {
30364
- const nativeEvent = event.nativeEvent;
30365
- const activeDraggableNode = draggableNodes.get(active);
30366
-
30367
- if ( // Another sensor is already instantiating
30368
- activeRef.current !== null || // No active draggable
30369
- !activeDraggableNode || // Event has already been captured
30370
- nativeEvent.dndKit || nativeEvent.defaultPrevented) {
30371
- return;
30372
- }
30373
-
30374
- const activationContext = {
30375
- active: activeDraggableNode
30376
- };
30377
- const shouldActivate = handler(event, sensor.options, activationContext);
30378
-
30379
- if (shouldActivate === true) {
30380
- nativeEvent.dndKit = {
30381
- capturedBy: sensor.sensor
30382
- };
30383
- activeRef.current = active;
30384
- instantiateSensor(event, sensor);
30385
- }
30386
- };
30387
- }, [draggableNodes, instantiateSensor]);
30388
- const activators = useCombineActivators(sensors, bindActivatorToSensorInstantiator);
30389
- useSensorSetup(sensors);
30390
- utilities.useIsomorphicLayoutEffect(() => {
30391
- if (activeNodeRect && status === Status.Initializing) {
30392
- setStatus(Status.Initialized);
30393
- }
30394
- }, [activeNodeRect, status]);
30395
- React.useEffect(() => {
30396
- const {
30397
- onDragMove
30398
- } = latestProps.current;
30399
- const {
30400
- active,
30401
- activatorEvent,
30402
- collisions,
30403
- over
30404
- } = sensorContext.current;
30405
-
30406
- if (!active || !activatorEvent) {
30407
- return;
30408
- }
30409
-
30410
- const event = {
30411
- active,
30412
- activatorEvent,
30413
- collisions,
30414
- delta: {
30415
- x: scrollAdjustedTranslate.x,
30416
- y: scrollAdjustedTranslate.y
30417
- },
30418
- over
30419
- };
30420
- ReactDOM.unstable_batchedUpdates(() => {
30421
- onDragMove == null ? void 0 : onDragMove(event);
30422
- dispatchMonitorEvent({
30423
- type: 'onDragMove',
30424
- event
30425
- });
30426
- });
30427
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
30428
- [scrollAdjustedTranslate.x, scrollAdjustedTranslate.y]);
30429
- React.useEffect(() => {
30430
- const {
30431
- active,
30432
- activatorEvent,
30433
- collisions,
30434
- droppableContainers,
30435
- scrollAdjustedTranslate
30436
- } = sensorContext.current;
30437
-
30438
- if (!active || activeRef.current == null || !activatorEvent || !scrollAdjustedTranslate) {
30439
- return;
30440
- }
30441
-
30442
- const {
30443
- onDragOver
30444
- } = latestProps.current;
30445
- const overContainer = droppableContainers.get(overId);
30446
- const over = overContainer && overContainer.rect.current ? {
30447
- id: overContainer.id,
30448
- rect: overContainer.rect.current,
30449
- data: overContainer.data,
30450
- disabled: overContainer.disabled
30451
- } : null;
30452
- const event = {
30453
- active,
30454
- activatorEvent,
30455
- collisions,
30456
- delta: {
30457
- x: scrollAdjustedTranslate.x,
30458
- y: scrollAdjustedTranslate.y
30459
- },
30460
- over
30461
- };
30462
- ReactDOM.unstable_batchedUpdates(() => {
30463
- setOver(over);
30464
- onDragOver == null ? void 0 : onDragOver(event);
30465
- dispatchMonitorEvent({
30466
- type: 'onDragOver',
30467
- event
30468
- });
30469
- });
30470
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
30471
- [overId]);
30472
- utilities.useIsomorphicLayoutEffect(() => {
30473
- sensorContext.current = {
30474
- activatorEvent,
30475
- active,
30476
- activeNode,
30477
- collisionRect,
30478
- collisions,
30479
- droppableRects,
30480
- draggableNodes,
30481
- draggingNode,
30482
- draggingNodeRect,
30483
- droppableContainers,
30484
- over,
30485
- scrollableAncestors,
30486
- scrollAdjustedTranslate
30487
- };
30488
- activeRects.current = {
30489
- initial: draggingNodeRect,
30490
- translated: collisionRect
30491
- };
30492
- }, [active, activeNode, collisions, collisionRect, draggableNodes, draggingNode, draggingNodeRect, droppableRects, droppableContainers, over, scrollableAncestors, scrollAdjustedTranslate]);
30493
- useAutoScroller({ ...autoScrollOptions,
30494
- delta: translate,
30495
- draggingRect: collisionRect,
30496
- pointerCoordinates,
30497
- scrollableAncestors,
30498
- scrollableAncestorRects
30499
- });
30500
- const publicContext = React.useMemo(() => {
30501
- const context = {
30502
- active,
30503
- activeNode,
30504
- activeNodeRect,
30505
- activatorEvent,
30506
- collisions,
30507
- containerNodeRect,
30508
- dragOverlay,
30509
- draggableNodes,
30510
- droppableContainers,
30511
- droppableRects,
30512
- over,
30513
- measureDroppableContainers,
30514
- scrollableAncestors,
30515
- scrollableAncestorRects,
30516
- measuringConfiguration,
30517
- measuringScheduled,
30518
- windowRect
30519
- };
30520
- return context;
30521
- }, [active, activeNode, activeNodeRect, activatorEvent, collisions, containerNodeRect, dragOverlay, draggableNodes, droppableContainers, droppableRects, over, measureDroppableContainers, scrollableAncestors, scrollableAncestorRects, measuringConfiguration, measuringScheduled, windowRect]);
30522
- const internalContext = React.useMemo(() => {
30523
- const context = {
30524
- activatorEvent,
30525
- activators,
30526
- active,
30527
- activeNodeRect,
30528
- ariaDescribedById: {
30529
- draggable: draggableDescribedById
30530
- },
30531
- dispatch,
30532
- draggableNodes,
30533
- over,
30534
- measureDroppableContainers
30535
- };
30536
- return context;
30537
- }, [activatorEvent, activators, active, activeNodeRect, dispatch, draggableDescribedById, draggableNodes, over, measureDroppableContainers]);
30538
- return React.createElement(DndMonitorContext.Provider, {
30539
- value: registerMonitorListener
30540
- }, React.createElement(InternalContext.Provider, {
30541
- value: internalContext
30542
- }, React.createElement(PublicContext.Provider, {
30543
- value: publicContext
30544
- }, React.createElement(ActiveDraggableContext.Provider, {
30545
- value: transform
30546
- }, children)), React.createElement(RestoreFocus, {
30547
- disabled: (accessibility == null ? void 0 : accessibility.restoreFocus) === false
30548
- })), React.createElement(Accessibility, { ...accessibility,
30549
- hiddenTextDescribedById: draggableDescribedById
30550
- }));
30551
-
30552
- function getAutoScrollerOptions() {
30553
- const activeSensorDisablesAutoscroll = (activeSensor == null ? void 0 : activeSensor.autoScrollEnabled) === false;
30554
- const autoScrollGloballyDisabled = typeof autoScroll === 'object' ? autoScroll.enabled === false : autoScroll === false;
30555
- const enabled = isInitialized && !activeSensorDisablesAutoscroll && !autoScrollGloballyDisabled;
30556
-
30557
- if (typeof autoScroll === 'object') {
30558
- return { ...autoScroll,
30559
- enabled
30560
- };
30561
- }
30562
-
30563
- return {
30564
- enabled
30565
- };
30566
- }
30567
- });
30568
-
30569
27292
  const EditGridWrapper = (props) => {
30570
27293
  const notifications = core.useNotifications();
30571
27294
  // ======================|| EDIT ||====================== //
@@ -30628,15 +27351,15 @@ const EditGridWrapper = (props) => {
30628
27351
  const rows = React.useMemo(() => {
30629
27352
  return rowsIterator ? Array.from(rowsIterator) : [];
30630
27353
  }, [rowsIterator]);
30631
- const sensors = useSensors(useSensor(PointerSensor));
27354
+ const sensors = core$1.useSensors(core$1.useSensor(core$1.PointerSensor));
30632
27355
  const handleDragEnd = React.useCallback((event) => {
30633
27356
  const field = props.dnd?.field;
30634
27357
  if (!field)
30635
27358
  return;
30636
27359
  const { active, over } = event;
30637
27360
  if (over) {
30638
- const activeRow = rows.find((row) => row.id === active.id);
30639
- const overRow = rows.find((row) => row.id === over.id);
27361
+ const activeRow = rows.find((row) => row.id == active.id);
27362
+ const overRow = rows.find((row) => row.id == over.id);
30640
27363
  const mutationArgs = { ...props.dnd?.args, id: activeRow.id };
30641
27364
  mutationArgs[field] = lodash.get(overRow, field);
30642
27365
  editMutation(mutationArgs);
@@ -30677,11 +27400,11 @@ const EditGridWrapper = (props) => {
30677
27400
  processRowUpdate: processRowUpdate,
30678
27401
  loadingParams: [loadingMutation],
30679
27402
  }, props.dataGridProps);
30680
- const renderEditGrid = () => (jsxRuntime.jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, modifiers: [
27403
+ const renderEditGrid = () => (jsxRuntime.jsx(core$1.DndContext, { sensors: sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, modifiers: [
30681
27404
  modifiers.restrictToVerticalAxis,
30682
27405
  modifiers.restrictToWindowEdges,
30683
27406
  modifiers.restrictToParentElement
30684
- ], autoScroll: false, children: jsxRuntime.jsx(sortable.SortableContext, { items: rows ? rows.map((row) => row.id) : [], strategy: sortable.verticalListSortingStrategy, children: props.renderFunction({ ...props.renderFunctionProps, dataGridProps: editGridProps }) }) }));
27407
+ ], autoScroll: false, children: jsxRuntime.jsx(sortable.SortableContext, { items: rows ? rows.map((row) => row.id.toString()) : [], strategy: sortable.verticalListSortingStrategy, children: props.renderFunction({ ...props.renderFunctionProps, dataGridProps: editGridProps }) }) }));
30685
27408
  return renderEditGrid();
30686
27409
  };
30687
27410
 
@@ -30863,7 +27586,7 @@ const CreateGridWrapper = (props) => {
30863
27586
  handleClose();
30864
27587
  }, disableRipple: true, children: option.title }, index));
30865
27588
  })), jsxRuntime.jsx(MenuItem, { onClick: () => {
30866
- navigate(`crear`);
27589
+ navigate(props.navigation ? `${props.navigation}crear` : `crear`);
30867
27590
  handleClose();
30868
27591
  }, disableRipple: true, children: "Manual" })] }), props.csv_upload?.enable && (jsxRuntime.jsx(CSVUpload, { open: csv.open, drawerToggle: handleToggleClose, data: csv.data })), props.renderFunction({ dataGridProps: createGridProps })] }));
30869
27592
  };
@@ -31070,6 +27793,7 @@ const Base = (props) => {
31070
27793
  permission: data?.permissions?.create,
31071
27794
  renderFunction: renderFunction,
31072
27795
  pathname: props.pathname,
27796
+ navigation: props.slotProps?.navigation,
31073
27797
  ...renderProps,
31074
27798
  ...props.api.create
31075
27799
  };
@@ -31212,6 +27936,12 @@ const DetailField = (props) => {
31212
27936
  if (props.fieldData)
31213
27937
  return lodash.map(props.fieldData, function (item) { return item.label; }).join(', ');
31214
27938
  }
27939
+ else if (props.type.name == 'ControlledDate') {
27940
+ if (props.fieldData) {
27941
+ if (props.extraProps.type == 'datetime')
27942
+ return dayjs(props.fieldData).format('YYYY-MM-DD HH:mm');
27943
+ }
27944
+ }
31215
27945
  else {
31216
27946
  if (props.fieldData) {
31217
27947
  if (props.detail_name) {