@acvl/frontend-components 0.0.14 → 0.0.15

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