ivt
Version:
Ivt Components Library
1 lines • 162 kB
Source Map (JSON)
{"version":3,"file":"sortable-CjI-AdZJ.mjs","sources":["../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js","../../node_modules/@dnd-kit/accessibility/dist/accessibility.esm.js","../../node_modules/@dnd-kit/core/dist/core.esm.js","../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js","../../src/lib/compose-refs.ts","../../src/components/ui/sortable/sortable.tsx"],"sourcesContent":["import { useMemo, useLayoutEffect, useEffect, useRef, useCallback } from 'react';\n\nfunction useCombinedRefs() {\n for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {\n refs[_key] = arguments[_key];\n }\n\n return useMemo(() => node => {\n refs.forEach(ref => ref(node));\n }, // eslint-disable-next-line react-hooks/exhaustive-deps\n refs);\n}\n\n// https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js\nconst canUseDOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';\n\nfunction isWindow(element) {\n const elementString = Object.prototype.toString.call(element);\n return elementString === '[object Window]' || // In Electron context the Window object serializes to [object global]\n elementString === '[object global]';\n}\n\nfunction isNode(node) {\n return 'nodeType' in node;\n}\n\nfunction getWindow(target) {\n var _target$ownerDocument, _target$ownerDocument2;\n\n if (!target) {\n return window;\n }\n\n if (isWindow(target)) {\n return target;\n }\n\n if (!isNode(target)) {\n return window;\n }\n\n return (_target$ownerDocument = (_target$ownerDocument2 = target.ownerDocument) == null ? void 0 : _target$ownerDocument2.defaultView) != null ? _target$ownerDocument : window;\n}\n\nfunction isDocument(node) {\n const {\n Document\n } = getWindow(node);\n return node instanceof Document;\n}\n\nfunction isHTMLElement(node) {\n if (isWindow(node)) {\n return false;\n }\n\n return node instanceof getWindow(node).HTMLElement;\n}\n\nfunction isSVGElement(node) {\n return node instanceof getWindow(node).SVGElement;\n}\n\nfunction getOwnerDocument(target) {\n if (!target) {\n return document;\n }\n\n if (isWindow(target)) {\n return target.document;\n }\n\n if (!isNode(target)) {\n return document;\n }\n\n if (isDocument(target)) {\n return target;\n }\n\n if (isHTMLElement(target) || isSVGElement(target)) {\n return target.ownerDocument;\n }\n\n return document;\n}\n\n/**\r\n * A hook that resolves to useEffect on the server and useLayoutEffect on the client\r\n * @param callback {function} Callback function that is invoked when the dependencies of the hook change\r\n */\n\nconst useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;\n\nfunction useEvent(handler) {\n const handlerRef = useRef(handler);\n useIsomorphicLayoutEffect(() => {\n handlerRef.current = handler;\n });\n return useCallback(function () {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return handlerRef.current == null ? void 0 : handlerRef.current(...args);\n }, []);\n}\n\nfunction useInterval() {\n const intervalRef = useRef(null);\n const set = useCallback((listener, duration) => {\n intervalRef.current = setInterval(listener, duration);\n }, []);\n const clear = useCallback(() => {\n if (intervalRef.current !== null) {\n clearInterval(intervalRef.current);\n intervalRef.current = null;\n }\n }, []);\n return [set, clear];\n}\n\nfunction useLatestValue(value, dependencies) {\n if (dependencies === void 0) {\n dependencies = [value];\n }\n\n const valueRef = useRef(value);\n useIsomorphicLayoutEffect(() => {\n if (valueRef.current !== value) {\n valueRef.current = value;\n }\n }, dependencies);\n return valueRef;\n}\n\nfunction useLazyMemo(callback, dependencies) {\n const valueRef = useRef();\n return useMemo(() => {\n const newValue = callback(valueRef.current);\n valueRef.current = newValue;\n return newValue;\n }, // eslint-disable-next-line react-hooks/exhaustive-deps\n [...dependencies]);\n}\n\nfunction useNodeRef(onChange) {\n const onChangeHandler = useEvent(onChange);\n const node = useRef(null);\n const setNodeRef = useCallback(element => {\n if (element !== node.current) {\n onChangeHandler == null ? void 0 : onChangeHandler(element, node.current);\n }\n\n node.current = element;\n }, //eslint-disable-next-line\n []);\n return [node, setNodeRef];\n}\n\nfunction usePrevious(value) {\n const ref = useRef();\n useEffect(() => {\n ref.current = value;\n }, [value]);\n return ref.current;\n}\n\nlet ids = {};\nfunction useUniqueId(prefix, value) {\n return useMemo(() => {\n if (value) {\n return value;\n }\n\n const id = ids[prefix] == null ? 0 : ids[prefix] + 1;\n ids[prefix] = id;\n return prefix + \"-\" + id;\n }, [prefix, value]);\n}\n\nfunction createAdjustmentFn(modifier) {\n return function (object) {\n for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n adjustments[_key - 1] = arguments[_key];\n }\n\n return adjustments.reduce((accumulator, adjustment) => {\n const entries = Object.entries(adjustment);\n\n for (const [key, valueAdjustment] of entries) {\n const value = accumulator[key];\n\n if (value != null) {\n accumulator[key] = value + modifier * valueAdjustment;\n }\n }\n\n return accumulator;\n }, { ...object\n });\n };\n}\n\nconst add = /*#__PURE__*/createAdjustmentFn(1);\nconst subtract = /*#__PURE__*/createAdjustmentFn(-1);\n\nfunction hasViewportRelativeCoordinates(event) {\n return 'clientX' in event && 'clientY' in event;\n}\n\nfunction isKeyboardEvent(event) {\n if (!event) {\n return false;\n }\n\n const {\n KeyboardEvent\n } = getWindow(event.target);\n return KeyboardEvent && event instanceof KeyboardEvent;\n}\n\nfunction isTouchEvent(event) {\n if (!event) {\n return false;\n }\n\n const {\n TouchEvent\n } = getWindow(event.target);\n return TouchEvent && event instanceof TouchEvent;\n}\n\n/**\r\n * Returns the normalized x and y coordinates for mouse and touch events.\r\n */\n\nfunction getEventCoordinates(event) {\n if (isTouchEvent(event)) {\n if (event.touches && event.touches.length) {\n const {\n clientX: x,\n clientY: y\n } = event.touches[0];\n return {\n x,\n y\n };\n } else if (event.changedTouches && event.changedTouches.length) {\n const {\n clientX: x,\n clientY: y\n } = event.changedTouches[0];\n return {\n x,\n y\n };\n }\n }\n\n if (hasViewportRelativeCoordinates(event)) {\n return {\n x: event.clientX,\n y: event.clientY\n };\n }\n\n return null;\n}\n\nconst CSS = /*#__PURE__*/Object.freeze({\n Translate: {\n toString(transform) {\n if (!transform) {\n return;\n }\n\n const {\n x,\n y\n } = transform;\n return \"translate3d(\" + (x ? Math.round(x) : 0) + \"px, \" + (y ? Math.round(y) : 0) + \"px, 0)\";\n }\n\n },\n Scale: {\n toString(transform) {\n if (!transform) {\n return;\n }\n\n const {\n scaleX,\n scaleY\n } = transform;\n return \"scaleX(\" + scaleX + \") scaleY(\" + scaleY + \")\";\n }\n\n },\n Transform: {\n toString(transform) {\n if (!transform) {\n return;\n }\n\n return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(' ');\n }\n\n },\n Transition: {\n toString(_ref) {\n let {\n property,\n duration,\n easing\n } = _ref;\n return property + \" \" + duration + \"ms \" + easing;\n }\n\n }\n});\n\nconst SELECTOR = 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]';\nfunction findFirstFocusableNode(element) {\n if (element.matches(SELECTOR)) {\n return element;\n }\n\n return element.querySelector(SELECTOR);\n}\n\nexport { CSS, add, canUseDOM, findFirstFocusableNode, getEventCoordinates, getOwnerDocument, getWindow, hasViewportRelativeCoordinates, isDocument, isHTMLElement, isKeyboardEvent, isNode, isSVGElement, isTouchEvent, isWindow, subtract, useCombinedRefs, useEvent, useInterval, useIsomorphicLayoutEffect, useLatestValue, useLazyMemo, useNodeRef, usePrevious, useUniqueId };\n//# sourceMappingURL=utilities.esm.js.map\n","import React, { useState, useCallback } from 'react';\n\nconst hiddenStyles = {\n display: 'none'\n};\nfunction HiddenText(_ref) {\n let {\n id,\n value\n } = _ref;\n return React.createElement(\"div\", {\n id: id,\n style: hiddenStyles\n }, value);\n}\n\nfunction LiveRegion(_ref) {\n let {\n id,\n announcement,\n ariaLiveType = \"assertive\"\n } = _ref;\n // Hide element visually but keep it readable by screen readers\n const visuallyHidden = {\n position: 'fixed',\n top: 0,\n left: 0,\n width: 1,\n height: 1,\n margin: -1,\n border: 0,\n padding: 0,\n overflow: 'hidden',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(100%)',\n whiteSpace: 'nowrap'\n };\n return React.createElement(\"div\", {\n id: id,\n style: visuallyHidden,\n role: \"status\",\n \"aria-live\": ariaLiveType,\n \"aria-atomic\": true\n }, announcement);\n}\n\nfunction useAnnouncement() {\n const [announcement, setAnnouncement] = useState('');\n const announce = useCallback(value => {\n if (value != null) {\n setAnnouncement(value);\n }\n }, []);\n return {\n announce,\n announcement\n };\n}\n\nexport { HiddenText, LiveRegion, useAnnouncement };\n//# sourceMappingURL=accessibility.esm.js.map\n","import React, { createContext, useContext, useEffect, useState, useCallback, useMemo, useRef, memo, useReducer, cloneElement, forwardRef } from 'react';\nimport { createPortal, unstable_batchedUpdates } from 'react-dom';\nimport { useUniqueId, getEventCoordinates, getWindow, isDocument, isHTMLElement, isSVGElement, canUseDOM, isWindow, isNode, getOwnerDocument, add, isKeyboardEvent, subtract, useLazyMemo, useInterval, usePrevious, useLatestValue, useEvent, useIsomorphicLayoutEffect, useNodeRef, findFirstFocusableNode, CSS } from '@dnd-kit/utilities';\nimport { useAnnouncement, HiddenText, LiveRegion } from '@dnd-kit/accessibility';\n\nconst DndMonitorContext = /*#__PURE__*/createContext(null);\n\nfunction useDndMonitor(listener) {\n const registerListener = useContext(DndMonitorContext);\n useEffect(() => {\n if (!registerListener) {\n throw new Error('useDndMonitor must be used within a children of <DndContext>');\n }\n\n const unsubscribe = registerListener(listener);\n return unsubscribe;\n }, [listener, registerListener]);\n}\n\nfunction useDndMonitorProvider() {\n const [listeners] = useState(() => new Set());\n const registerListener = useCallback(listener => {\n listeners.add(listener);\n return () => listeners.delete(listener);\n }, [listeners]);\n const dispatch = useCallback(_ref => {\n let {\n type,\n event\n } = _ref;\n listeners.forEach(listener => {\n var _listener$type;\n\n return (_listener$type = listener[type]) == null ? void 0 : _listener$type.call(listener, event);\n });\n }, [listeners]);\n return [dispatch, registerListener];\n}\n\nconst defaultScreenReaderInstructions = {\n 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 \"\n};\nconst defaultAnnouncements = {\n onDragStart(_ref) {\n let {\n active\n } = _ref;\n return \"Picked up draggable item \" + active.id + \".\";\n },\n\n onDragOver(_ref2) {\n let {\n active,\n over\n } = _ref2;\n\n if (over) {\n return \"Draggable item \" + active.id + \" was moved over droppable area \" + over.id + \".\";\n }\n\n return \"Draggable item \" + active.id + \" is no longer over a droppable area.\";\n },\n\n onDragEnd(_ref3) {\n let {\n active,\n over\n } = _ref3;\n\n if (over) {\n return \"Draggable item \" + active.id + \" was dropped over droppable area \" + over.id;\n }\n\n return \"Draggable item \" + active.id + \" was dropped.\";\n },\n\n onDragCancel(_ref4) {\n let {\n active\n } = _ref4;\n return \"Dragging was cancelled. Draggable item \" + active.id + \" was dropped.\";\n }\n\n};\n\nfunction Accessibility(_ref) {\n let {\n announcements = defaultAnnouncements,\n container,\n hiddenTextDescribedById,\n screenReaderInstructions = defaultScreenReaderInstructions\n } = _ref;\n const {\n announce,\n announcement\n } = useAnnouncement();\n const liveRegionId = useUniqueId(\"DndLiveRegion\");\n const [mounted, setMounted] = useState(false);\n useEffect(() => {\n setMounted(true);\n }, []);\n useDndMonitor(useMemo(() => ({\n onDragStart(_ref2) {\n let {\n active\n } = _ref2;\n announce(announcements.onDragStart({\n active\n }));\n },\n\n onDragMove(_ref3) {\n let {\n active,\n over\n } = _ref3;\n\n if (announcements.onDragMove) {\n announce(announcements.onDragMove({\n active,\n over\n }));\n }\n },\n\n onDragOver(_ref4) {\n let {\n active,\n over\n } = _ref4;\n announce(announcements.onDragOver({\n active,\n over\n }));\n },\n\n onDragEnd(_ref5) {\n let {\n active,\n over\n } = _ref5;\n announce(announcements.onDragEnd({\n active,\n over\n }));\n },\n\n onDragCancel(_ref6) {\n let {\n active,\n over\n } = _ref6;\n announce(announcements.onDragCancel({\n active,\n over\n }));\n }\n\n }), [announce, announcements]));\n\n if (!mounted) {\n return null;\n }\n\n const markup = React.createElement(React.Fragment, null, React.createElement(HiddenText, {\n id: hiddenTextDescribedById,\n value: screenReaderInstructions.draggable\n }), React.createElement(LiveRegion, {\n id: liveRegionId,\n announcement: announcement\n }));\n return container ? createPortal(markup, container) : markup;\n}\n\nvar Action;\n\n(function (Action) {\n Action[\"DragStart\"] = \"dragStart\";\n Action[\"DragMove\"] = \"dragMove\";\n Action[\"DragEnd\"] = \"dragEnd\";\n Action[\"DragCancel\"] = \"dragCancel\";\n Action[\"DragOver\"] = \"dragOver\";\n Action[\"RegisterDroppable\"] = \"registerDroppable\";\n Action[\"SetDroppableDisabled\"] = \"setDroppableDisabled\";\n Action[\"UnregisterDroppable\"] = \"unregisterDroppable\";\n})(Action || (Action = {}));\n\nfunction noop() {}\n\nfunction useSensor(sensor, options) {\n return useMemo(() => ({\n sensor,\n options: options != null ? options : {}\n }), // eslint-disable-next-line react-hooks/exhaustive-deps\n [sensor, options]);\n}\n\nfunction useSensors() {\n for (var _len = arguments.length, sensors = new Array(_len), _key = 0; _key < _len; _key++) {\n sensors[_key] = arguments[_key];\n }\n\n return useMemo(() => [...sensors].filter(sensor => sensor != null), // eslint-disable-next-line react-hooks/exhaustive-deps\n [...sensors]);\n}\n\nconst defaultCoordinates = /*#__PURE__*/Object.freeze({\n x: 0,\n y: 0\n});\n\n/**\r\n * Returns the distance between two points\r\n */\nfunction distanceBetween(p1, p2) {\n return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));\n}\n\nfunction getRelativeTransformOrigin(event, rect) {\n const eventCoordinates = getEventCoordinates(event);\n\n if (!eventCoordinates) {\n return '0 0';\n }\n\n const transformOrigin = {\n x: (eventCoordinates.x - rect.left) / rect.width * 100,\n y: (eventCoordinates.y - rect.top) / rect.height * 100\n };\n return transformOrigin.x + \"% \" + transformOrigin.y + \"%\";\n}\n\n/**\r\n * Sort collisions from smallest to greatest value\r\n */\nfunction sortCollisionsAsc(_ref, _ref2) {\n let {\n data: {\n value: a\n }\n } = _ref;\n let {\n data: {\n value: b\n }\n } = _ref2;\n return a - b;\n}\n/**\r\n * Sort collisions from greatest to smallest value\r\n */\n\nfunction sortCollisionsDesc(_ref3, _ref4) {\n let {\n data: {\n value: a\n }\n } = _ref3;\n let {\n data: {\n value: b\n }\n } = _ref4;\n return b - a;\n}\n/**\r\n * Returns the coordinates of the corners of a given rectangle:\r\n * [TopLeft {x, y}, TopRight {x, y}, BottomLeft {x, y}, BottomRight {x, y}]\r\n */\n\nfunction cornersOfRectangle(_ref5) {\n let {\n left,\n top,\n height,\n width\n } = _ref5;\n return [{\n x: left,\n y: top\n }, {\n x: left + width,\n y: top\n }, {\n x: left,\n y: top + height\n }, {\n x: left + width,\n y: top + height\n }];\n}\nfunction getFirstCollision(collisions, property) {\n if (!collisions || collisions.length === 0) {\n return null;\n }\n\n const [firstCollision] = collisions;\n return property ? firstCollision[property] : firstCollision;\n}\n\n/**\r\n * Returns the coordinates of the center of a given ClientRect\r\n */\n\nfunction centerOfRectangle(rect, left, top) {\n if (left === void 0) {\n left = rect.left;\n }\n\n if (top === void 0) {\n top = rect.top;\n }\n\n return {\n x: left + rect.width * 0.5,\n y: top + rect.height * 0.5\n };\n}\n/**\r\n * Returns the closest rectangles from an array of rectangles to the center of a given\r\n * rectangle.\r\n */\n\n\nconst closestCenter = _ref => {\n let {\n collisionRect,\n droppableRects,\n droppableContainers\n } = _ref;\n const centerRect = centerOfRectangle(collisionRect, collisionRect.left, collisionRect.top);\n const collisions = [];\n\n for (const droppableContainer of droppableContainers) {\n const {\n id\n } = droppableContainer;\n const rect = droppableRects.get(id);\n\n if (rect) {\n const distBetween = distanceBetween(centerOfRectangle(rect), centerRect);\n collisions.push({\n id,\n data: {\n droppableContainer,\n value: distBetween\n }\n });\n }\n }\n\n return collisions.sort(sortCollisionsAsc);\n};\n\n/**\r\n * Returns the closest rectangles from an array of rectangles to the corners of\r\n * another rectangle.\r\n */\n\nconst closestCorners = _ref => {\n let {\n collisionRect,\n droppableRects,\n droppableContainers\n } = _ref;\n const corners = cornersOfRectangle(collisionRect);\n const collisions = [];\n\n for (const droppableContainer of droppableContainers) {\n const {\n id\n } = droppableContainer;\n const rect = droppableRects.get(id);\n\n if (rect) {\n const rectCorners = cornersOfRectangle(rect);\n const distances = corners.reduce((accumulator, corner, index) => {\n return accumulator + distanceBetween(rectCorners[index], corner);\n }, 0);\n const effectiveDistance = Number((distances / 4).toFixed(4));\n collisions.push({\n id,\n data: {\n droppableContainer,\n value: effectiveDistance\n }\n });\n }\n }\n\n return collisions.sort(sortCollisionsAsc);\n};\n\n/**\r\n * Returns the intersecting rectangle area between two rectangles\r\n */\n\nfunction getIntersectionRatio(entry, target) {\n const top = Math.max(target.top, entry.top);\n const left = Math.max(target.left, entry.left);\n const right = Math.min(target.left + target.width, entry.left + entry.width);\n const bottom = Math.min(target.top + target.height, entry.top + entry.height);\n const width = right - left;\n const height = bottom - top;\n\n if (left < right && top < bottom) {\n const targetArea = target.width * target.height;\n const entryArea = entry.width * entry.height;\n const intersectionArea = width * height;\n const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);\n return Number(intersectionRatio.toFixed(4));\n } // Rectangles do not overlap, or overlap has an area of zero (edge/corner overlap)\n\n\n return 0;\n}\n/**\r\n * Returns the rectangles that has the greatest intersection area with a given\r\n * rectangle in an array of rectangles.\r\n */\n\nconst rectIntersection = _ref => {\n let {\n collisionRect,\n droppableRects,\n droppableContainers\n } = _ref;\n const collisions = [];\n\n for (const droppableContainer of droppableContainers) {\n const {\n id\n } = droppableContainer;\n const rect = droppableRects.get(id);\n\n if (rect) {\n const intersectionRatio = getIntersectionRatio(rect, collisionRect);\n\n if (intersectionRatio > 0) {\n collisions.push({\n id,\n data: {\n droppableContainer,\n value: intersectionRatio\n }\n });\n }\n }\n }\n\n return collisions.sort(sortCollisionsDesc);\n};\n\n/**\r\n * Check if a given point is contained within a bounding rectangle\r\n */\n\nfunction isPointWithinRect(point, rect) {\n const {\n top,\n left,\n bottom,\n right\n } = rect;\n return top <= point.y && point.y <= bottom && left <= point.x && point.x <= right;\n}\n/**\r\n * Returns the rectangles that the pointer is hovering over\r\n */\n\n\nconst pointerWithin = _ref => {\n let {\n droppableContainers,\n droppableRects,\n pointerCoordinates\n } = _ref;\n\n if (!pointerCoordinates) {\n return [];\n }\n\n const collisions = [];\n\n for (const droppableContainer of droppableContainers) {\n const {\n id\n } = droppableContainer;\n const rect = droppableRects.get(id);\n\n if (rect && isPointWithinRect(pointerCoordinates, rect)) {\n /* There may be more than a single rectangle intersecting\r\n * with the pointer coordinates. In order to sort the\r\n * colliding rectangles, we measure the distance between\r\n * the pointer and the corners of the intersecting rectangle\r\n */\n const corners = cornersOfRectangle(rect);\n const distances = corners.reduce((accumulator, corner) => {\n return accumulator + distanceBetween(pointerCoordinates, corner);\n }, 0);\n const effectiveDistance = Number((distances / 4).toFixed(4));\n collisions.push({\n id,\n data: {\n droppableContainer,\n value: effectiveDistance\n }\n });\n }\n }\n\n return collisions.sort(sortCollisionsAsc);\n};\n\nfunction adjustScale(transform, rect1, rect2) {\n return { ...transform,\n scaleX: rect1 && rect2 ? rect1.width / rect2.width : 1,\n scaleY: rect1 && rect2 ? rect1.height / rect2.height : 1\n };\n}\n\nfunction getRectDelta(rect1, rect2) {\n return rect1 && rect2 ? {\n x: rect1.left - rect2.left,\n y: rect1.top - rect2.top\n } : defaultCoordinates;\n}\n\nfunction createRectAdjustmentFn(modifier) {\n return function adjustClientRect(rect) {\n for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n adjustments[_key - 1] = arguments[_key];\n }\n\n return adjustments.reduce((acc, adjustment) => ({ ...acc,\n top: acc.top + modifier * adjustment.y,\n bottom: acc.bottom + modifier * adjustment.y,\n left: acc.left + modifier * adjustment.x,\n right: acc.right + modifier * adjustment.x\n }), { ...rect\n });\n };\n}\nconst getAdjustedRect = /*#__PURE__*/createRectAdjustmentFn(1);\n\nfunction parseTransform(transform) {\n if (transform.startsWith('matrix3d(')) {\n const transformArray = transform.slice(9, -1).split(/, /);\n return {\n x: +transformArray[12],\n y: +transformArray[13],\n scaleX: +transformArray[0],\n scaleY: +transformArray[5]\n };\n } else if (transform.startsWith('matrix(')) {\n const transformArray = transform.slice(7, -1).split(/, /);\n return {\n x: +transformArray[4],\n y: +transformArray[5],\n scaleX: +transformArray[0],\n scaleY: +transformArray[3]\n };\n }\n\n return null;\n}\n\nfunction inverseTransform(rect, transform, transformOrigin) {\n const parsedTransform = parseTransform(transform);\n\n if (!parsedTransform) {\n return rect;\n }\n\n const {\n scaleX,\n scaleY,\n x: translateX,\n y: translateY\n } = parsedTransform;\n const x = rect.left - translateX - (1 - scaleX) * parseFloat(transformOrigin);\n const y = rect.top - translateY - (1 - scaleY) * parseFloat(transformOrigin.slice(transformOrigin.indexOf(' ') + 1));\n const w = scaleX ? rect.width / scaleX : rect.width;\n const h = scaleY ? rect.height / scaleY : rect.height;\n return {\n width: w,\n height: h,\n top: y,\n right: x + w,\n bottom: y + h,\n left: x\n };\n}\n\nconst defaultOptions = {\n ignoreTransform: false\n};\n/**\r\n * Returns the bounding client rect of an element relative to the viewport.\r\n */\n\nfunction getClientRect(element, options) {\n if (options === void 0) {\n options = defaultOptions;\n }\n\n let rect = element.getBoundingClientRect();\n\n if (options.ignoreTransform) {\n const {\n transform,\n transformOrigin\n } = getWindow(element).getComputedStyle(element);\n\n if (transform) {\n rect = inverseTransform(rect, transform, transformOrigin);\n }\n }\n\n const {\n top,\n left,\n width,\n height,\n bottom,\n right\n } = rect;\n return {\n top,\n left,\n width,\n height,\n bottom,\n right\n };\n}\n/**\r\n * Returns the bounding client rect of an element relative to the viewport.\r\n *\r\n * @remarks\r\n * The ClientRect returned by this method does not take into account transforms\r\n * applied to the element it measures.\r\n *\r\n */\n\nfunction getTransformAgnosticClientRect(element) {\n return getClientRect(element, {\n ignoreTransform: true\n });\n}\n\nfunction getWindowClientRect(element) {\n const width = element.innerWidth;\n const height = element.innerHeight;\n return {\n top: 0,\n left: 0,\n right: width,\n bottom: height,\n width,\n height\n };\n}\n\nfunction isFixed(node, computedStyle) {\n if (computedStyle === void 0) {\n computedStyle = getWindow(node).getComputedStyle(node);\n }\n\n return computedStyle.position === 'fixed';\n}\n\nfunction isScrollable(element, computedStyle) {\n if (computedStyle === void 0) {\n computedStyle = getWindow(element).getComputedStyle(element);\n }\n\n const overflowRegex = /(auto|scroll|overlay)/;\n const properties = ['overflow', 'overflowX', 'overflowY'];\n return properties.some(property => {\n const value = computedStyle[property];\n return typeof value === 'string' ? overflowRegex.test(value) : false;\n });\n}\n\nfunction getScrollableAncestors(element, limit) {\n const scrollParents = [];\n\n function findScrollableAncestors(node) {\n if (limit != null && scrollParents.length >= limit) {\n return scrollParents;\n }\n\n if (!node) {\n return scrollParents;\n }\n\n if (isDocument(node) && node.scrollingElement != null && !scrollParents.includes(node.scrollingElement)) {\n scrollParents.push(node.scrollingElement);\n return scrollParents;\n }\n\n if (!isHTMLElement(node) || isSVGElement(node)) {\n return scrollParents;\n }\n\n if (scrollParents.includes(node)) {\n return scrollParents;\n }\n\n const computedStyle = getWindow(element).getComputedStyle(node);\n\n if (node !== element) {\n if (isScrollable(node, computedStyle)) {\n scrollParents.push(node);\n }\n }\n\n if (isFixed(node, computedStyle)) {\n return scrollParents;\n }\n\n return findScrollableAncestors(node.parentNode);\n }\n\n if (!element) {\n return scrollParents;\n }\n\n return findScrollableAncestors(element);\n}\nfunction getFirstScrollableAncestor(node) {\n const [firstScrollableAncestor] = getScrollableAncestors(node, 1);\n return firstScrollableAncestor != null ? firstScrollableAncestor : null;\n}\n\nfunction getScrollableElement(element) {\n if (!canUseDOM || !element) {\n return null;\n }\n\n if (isWindow(element)) {\n return element;\n }\n\n if (!isNode(element)) {\n return null;\n }\n\n if (isDocument(element) || element === getOwnerDocument(element).scrollingElement) {\n return window;\n }\n\n if (isHTMLElement(element)) {\n return element;\n }\n\n return null;\n}\n\nfunction getScrollXCoordinate(element) {\n if (isWindow(element)) {\n return element.scrollX;\n }\n\n return element.scrollLeft;\n}\nfunction getScrollYCoordinate(element) {\n if (isWindow(element)) {\n return element.scrollY;\n }\n\n return element.scrollTop;\n}\nfunction getScrollCoordinates(element) {\n return {\n x: getScrollXCoordinate(element),\n y: getScrollYCoordinate(element)\n };\n}\n\nvar Direction;\n\n(function (Direction) {\n Direction[Direction[\"Forward\"] = 1] = \"Forward\";\n Direction[Direction[\"Backward\"] = -1] = \"Backward\";\n})(Direction || (Direction = {}));\n\nfunction isDocumentScrollingElement(element) {\n if (!canUseDOM || !element) {\n return false;\n }\n\n return element === document.scrollingElement;\n}\n\nfunction getScrollPosition(scrollingContainer) {\n const minScroll = {\n x: 0,\n y: 0\n };\n const dimensions = isDocumentScrollingElement(scrollingContainer) ? {\n height: window.innerHeight,\n width: window.innerWidth\n } : {\n height: scrollingContainer.clientHeight,\n width: scrollingContainer.clientWidth\n };\n const maxScroll = {\n x: scrollingContainer.scrollWidth - dimensions.width,\n y: scrollingContainer.scrollHeight - dimensions.height\n };\n const isTop = scrollingContainer.scrollTop <= minScroll.y;\n const isLeft = scrollingContainer.scrollLeft <= minScroll.x;\n const isBottom = scrollingContainer.scrollTop >= maxScroll.y;\n const isRight = scrollingContainer.scrollLeft >= maxScroll.x;\n return {\n isTop,\n isLeft,\n isBottom,\n isRight,\n maxScroll,\n minScroll\n };\n}\n\nconst defaultThreshold = {\n x: 0.2,\n y: 0.2\n};\nfunction getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, _ref, acceleration, thresholdPercentage) {\n let {\n top,\n left,\n right,\n bottom\n } = _ref;\n\n if (acceleration === void 0) {\n acceleration = 10;\n }\n\n if (thresholdPercentage === void 0) {\n thresholdPercentage = defaultThreshold;\n }\n\n const {\n isTop,\n isBottom,\n isLeft,\n isRight\n } = getScrollPosition(scrollContainer);\n const direction = {\n x: 0,\n y: 0\n };\n const speed = {\n x: 0,\n y: 0\n };\n const threshold = {\n height: scrollContainerRect.height * thresholdPercentage.y,\n width: scrollContainerRect.width * thresholdPercentage.x\n };\n\n if (!isTop && top <= scrollContainerRect.top + threshold.height) {\n // Scroll Up\n direction.y = Direction.Backward;\n speed.y = acceleration * Math.abs((scrollContainerRect.top + threshold.height - top) / threshold.height);\n } else if (!isBottom && bottom >= scrollContainerRect.bottom - threshold.height) {\n // Scroll Down\n direction.y = Direction.Forward;\n speed.y = acceleration * Math.abs((scrollContainerRect.bottom - threshold.height - bottom) / threshold.height);\n }\n\n if (!isRight && right >= scrollContainerRect.right - threshold.width) {\n // Scroll Right\n direction.x = Direction.Forward;\n speed.x = acceleration * Math.abs((scrollContainerRect.right - threshold.width - right) / threshold.width);\n } else if (!isLeft && left <= scrollContainerRect.left + threshold.width) {\n // Scroll Left\n direction.x = Direction.Backward;\n speed.x = acceleration * Math.abs((scrollContainerRect.left + threshold.width - left) / threshold.width);\n }\n\n return {\n direction,\n speed\n };\n}\n\nfunction getScrollElementRect(element) {\n if (element === document.scrollingElement) {\n const {\n innerWidth,\n innerHeight\n } = window;\n return {\n top: 0,\n left: 0,\n right: innerWidth,\n bottom: innerHeight,\n width: innerWidth,\n height: innerHeight\n };\n }\n\n const {\n top,\n left,\n right,\n bottom\n } = element.getBoundingClientRect();\n return {\n top,\n left,\n right,\n bottom,\n width: element.clientWidth,\n height: element.clientHeight\n };\n}\n\nfunction getScrollOffsets(scrollableAncestors) {\n return scrollableAncestors.reduce((acc, node) => {\n return add(acc, getScrollCoordinates(node));\n }, defaultCoordinates);\n}\nfunction getScrollXOffset(scrollableAncestors) {\n return scrollableAncestors.reduce((acc, node) => {\n return acc + getScrollXCoordinate(node);\n }, 0);\n}\nfunction getScrollYOffset(scrollableAncestors) {\n return scrollableAncestors.reduce((acc, node) => {\n return acc + getScrollYCoordinate(node);\n }, 0);\n}\n\nfunction scrollIntoViewIfNeeded(element, measure) {\n if (measure === void 0) {\n measure = getClientRect;\n }\n\n if (!element) {\n return;\n }\n\n const {\n top,\n left,\n bottom,\n right\n } = measure(element);\n const firstScrollableAncestor = getFirstScrollableAncestor(element);\n\n if (!firstScrollableAncestor) {\n return;\n }\n\n if (bottom <= 0 || right <= 0 || top >= window.innerHeight || left >= window.innerWidth) {\n element.scrollIntoView({\n block: 'center',\n inline: 'center'\n });\n }\n}\n\nconst properties = [['x', ['left', 'right'], getScrollXOffset], ['y', ['top', 'bottom'], getScrollYOffset]];\nclass Rect {\n constructor(rect, element) {\n this.rect = void 0;\n this.width = void 0;\n this.height = void 0;\n this.top = void 0;\n this.bottom = void 0;\n this.right = void 0;\n this.left = void 0;\n const scrollableAncestors = getScrollableAncestors(element);\n const scrollOffsets = getScrollOffsets(scrollableAncestors);\n this.rect = { ...rect\n };\n this.width = rect.width;\n this.height = rect.height;\n\n for (const [axis, keys, getScrollOffset] of properties) {\n for (const key of keys) {\n Object.defineProperty(this, key, {\n get: () => {\n const currentOffsets = getScrollOffset(scrollableAncestors);\n const scrollOffsetsDeltla = scrollOffsets[axis] - currentOffsets;\n return this.rect[key] + scrollOffsetsDeltla;\n },\n enumerable: true\n });\n }\n }\n\n Object.defineProperty(this, 'rect', {\n enumerable: false\n });\n }\n\n}\n\nclass Listeners {\n constructor(target) {\n this.target = void 0;\n this.listeners = [];\n\n this.removeAll = () => {\n this.listeners.forEach(listener => {\n var _this$target;\n\n return (_this$target = this.target) == null ? void 0 : _this$target.removeEventListener(...listener);\n });\n };\n\n this.target = target;\n }\n\n add(eventName, handler, options) {\n var _this$target2;\n\n (_this$target2 = this.target) == null ? void 0 : _this$target2.addEventListener(eventName, handler, options);\n this.listeners.push([eventName, handler, options]);\n }\n\n}\n\nfunction getEventListenerTarget(target) {\n // If the `event.target` element is removed from the document events will still be targeted\n // at it, and hence won't always bubble up to the window or document anymore.\n // If there is any risk of an element being removed while it is being dragged,\n // the best practice is to attach the event listeners directly to the target.\n // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget\n const {\n EventTarget\n } = getWindow(target);\n return target instanceof EventTarget ? target : getOwnerDocument(target);\n}\n\nfunction hasExceededDistance(delta, measurement) {\n const dx = Math.abs(delta.x);\n const dy = Math.abs(delta.y);\n\n if (typeof measurement === 'number') {\n return Math.sqrt(dx ** 2 + dy ** 2) > measurement;\n }\n\n if ('x' in measurement && 'y' in measurement) {\n return dx > measurement.x && dy > measurement.y;\n }\n\n if ('x' in measurement) {\n return dx > measurement.x;\n }\n\n if ('y' in measurement) {\n return dy > measurement.y;\n }\n\n return false;\n}\n\nvar EventName;\n\n(function (EventName) {\n EventName[\"Click\"] = \"click\";\n EventName[\"DragStart\"] = \"dragstart\";\n EventName[\"Keydown\"] = \"keydown\";\n EventName[\"ContextMenu\"] = \"contextmenu\";\n EventName[\"Resize\"] = \"resize\";\n EventName[\"SelectionChange\"] = \"selectionchange\";\n EventName[\"VisibilityChange\"] = \"visibilitychange\";\n})(EventName || (EventName = {}));\n\nfunction preventDefault(event) {\n event.preventDefault();\n}\nfunction stopPropagation(event) {\n event.stopPropagation();\n}\n\nvar KeyboardCode;\n\n(function (KeyboardCode) {\n KeyboardCode[\"Space\"] = \"Space\";\n KeyboardCode[\"Down\"] = \"ArrowDown\";\n KeyboardCode[\"Right\"] = \"ArrowRight\";\n KeyboardCode[\"Left\"] = \"ArrowLeft\";\n KeyboardCode[\"Up\"] = \"ArrowUp\";\n KeyboardCode[\"Esc\"] = \"Escape\";\n KeyboardCode[\"Enter\"] = \"Enter\";\n KeyboardCode[\"Tab\"] = \"Tab\";\n})(KeyboardCode || (KeyboardCode = {}));\n\nconst defaultKeyboardCodes = {\n start: [KeyboardCode.Space, KeyboardCode.Enter],\n cancel: [KeyboardCode.Esc],\n end: [KeyboardCode.Space, KeyboardCode.Enter, KeyboardCode.Tab]\n};\nconst defaultKeyboardCoordinateGetter = (event, _ref) => {\n let {\n currentCoordinates\n } = _ref;\n\n switch (event.code) {\n case KeyboardCode.Right:\n return { ...currentCoordinates,\n x: currentCoordinates.x + 25\n };\n\n case KeyboardCode.Left:\n return { ...currentCoordinates,\n x: currentCoordinates.x - 25\n };\n\n case KeyboardCode.Down:\n return { ...currentCoordinates,\n y: currentCoordinates.y + 25\n };\n\n case KeyboardCode.Up:\n return { ...currentCoordinates,\n y: currentCoordinates.y - 25\n };\n }\n\n return undefined;\n};\n\nclass KeyboardSensor {\n constructor(props) {\n this.props = void 0;\n this.autoScrollEnabled = false;\n this.referenceCoordinates = void 0;\n this.listeners = void 0;\n this.windowListeners = void 0;\n this.props = props;\n const {\n event: {\n target\n }\n } = props;\n this.props = props;\n this.listeners = new Listeners(getOwnerDocument(target));\n this.windowListeners = new Listeners(getWindow(target));\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleCancel = this.handleCancel.bind(this);\n this.attach();\n }\n\n attach() {\n this.handleStart();\n this.windowListeners.add(EventName.Resize, this.handleCancel);\n this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);\n setTimeout(() => this.listeners.add(EventName.Keydown, this.handleKeyDown));\n }\n\n handleStart() {\n const {\n activeNode,\n onStart\n } = this.props;\n const node = activeNode.node.current;\n\n if (node) {\n scrollIntoViewIfNeeded(node);\n }\n\n onStart(defaultCoordinates);\n }\n\n handleKeyDown(event) {\n if (isKeyboardEvent(event)) {\n const {\n active,\n context,\n options\n } = this.props;\n const {\n keyboardCodes = defaultKeyboardCodes,\n coordinateGetter = defaultKeyboardCoordinateGetter,\n scrollBehavior = 'smooth'\n } = options;\n const {\n code\n } = event;\n\n if (keyboardCodes.end.includes(code)) {\n this.handleEnd(event);\n return;\n }\n\n if (keyboardCodes.cancel.includes(code)) {\n this.handleCancel(event);\n return;\n }\n\n const {\n collisionRect\n } = context.current;\n const currentCoordinates = collisionRect ? {\n x: collisionRect.left,\n y: collisionRect.top\n } : defaultCoordinates;\n\n if (!this.referenceCoordinates) {\n this.referenceCoordinates = currentCoordinates;\n }\n\n const newCoordinates = coordinateGetter(event, {\n active,\n context: context.current,\n currentCoordinates\n });\n\n if (newCoordinates) {\n const coordinatesDelta = subtract(newCoordinates, currentCoordinates);\n const scrollDelta = {\n x: 0,\n y: 0\n };\n const {\n scrollableAncestors\n } = context.current;\n\n for (const scrollContainer of scrollableAncestors) {\n const direction = event.code;\n const {\n isTop,\n isRight,\n isLeft,\n isBottom,\n maxScroll,\n minScroll\n } = getScrollPosition(scrollContainer);\n const scrollElementRect = getScrollElementRect(scrollContainer);\n const clampedCoordinates = {\n 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)),\n 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))\n };\n const canScrollX = direction === KeyboardCode.Right && !isRight || direction === KeyboardCode.Left && !isLeft;\n const canScrollY = direction === KeyboardCode.Down && !isBottom || direction === KeyboardCode.Up && !isTop;\n\n if (canScrollX && clampedCoordinates.x !== newCoordinates.x) {\n const newScrollCoordinates = scrollContainer.scrollLeft + coordinatesDelta.x;\n const canScrollToNewCoordinates = direction === KeyboardCode.Right && newScrollCoordinates <= maxScroll.x || direction === KeyboardCode.Left && newScrollCoordinates >= minScroll.x;\n\n if (canScrollToNewCoordinates && !coordinatesDelta.y) {\n // We don't need to update coordinates, the scroll adjustment alone will trigger\n // logic to auto-detect the new container we are over\n scrollContainer.scrollTo({\n left: newScrollCoordinates,\n behavior: scrollBehavior\n });\n return;\n }\n\n if (canScrollToNewCoordinates) {\n scrollDelta.x = scrollContainer.scrollLeft - newScrollCoordinates;\n } else {\n scrollDelta.x = direction === KeyboardCode.Right ? scrollContainer.scrollLeft - maxScroll.x : scrollContainer.scrollLeft - minScroll.x;\n }\n\n if (scrollDelta.x) {\n scrollContainer.scrollBy({\n left: -scrollDelta.x,\n behavior: scrollBehavior\n });\n }\n\n break;\n } else if (canScrollY && clampedCoordinates.y !== newCoordinates.y) {\n const newScrollCoordinates = scrollContainer.scrollTop + coordinatesDelta.y;\n const canScrollToNewCoordinates = direction === KeyboardCode.Down && newScrollCoordinates <= maxScroll.y || direction === KeyboardCode.Up && newScrollCoordinates >= minScroll.y;\n\n if (canScrollToNewCoordinates && !coordinatesDelta.x) {\n // We don't need to update coordinates, the scroll adjustment alone will trigger\n // logic to auto-detect the new container we are over\n scrollContainer.scrollTo({\n top: newScrollCoordinates,\n behavior: scrollBehavior\n });\n return;\n }\n\n if (canScrollToNewCoordinates) {\n scrollDelta.y = scrollContainer.scrollTop - newScrollCoordinates;\n } else {\n scrollDelta.y = direction === KeyboardCode.Down ? scrollContainer.scrollTop - maxScroll.y : scrollContainer.scrollTop - minScroll.y;\n }\n\n if (scrollDelta.y) {\n scrollContainer.scrollBy({\n top: -scrollDelta.y,\n behavior: scrollBehavior\n });\n }\n\n break;\n }\n }\n\n this.handleMove(event, add(subtract(newCoordinates, this.referenceCoordinates), scrollDelta));\n }\n }\n }\n\n handleMove(event, coordinates) {\n const {\n onMove\n } = this.props;\n event.preventDefault();\n onMove(coordinates);\n }\n\n handleEnd(event) {\n const {\n onEnd\n } = this.props;\n event.preventDefault();\n this.detach();\n onEnd();\n }\n\n handleCancel(event) {\n const {\n onCancel\n } = this.props;\n event.preventDefault();\n this.detach();\n onCancel();\n }\n\n detach() {\n this.listeners.removeAll();\n this.windowListeners.removeAll();\n }\n\n}\nKeyboardSensor.activators = [{\n eventName: 'onKeyDown',\n handler: (event, _ref, _ref2) => {\n let {\n keyboardCodes = defaultKeyboardCodes,\n onActivation\n } = _ref;\n let {\n active\n } = _ref2;\n const {\n code\n } = event.nativeEvent;\n\n if (keyboardCodes.start.includes(code)) {\n const activator = active.activatorNode.current;\n\n if (activator && event.target !== activator) {\n return false;\n }\n\n event.preventDefault();\n onActivation == null ? void 0 : onActivation({\n event: event.nativeEvent\n });\n return true;\n }\n\n return false;\n }\n}];\n\nfunction isDistanceConstraint(constraint) {\n return Boolean(constraint && 'distance' in constraint);\n}\n\nfunction isDelayConstraint(constraint) {\n return Boolean(constraint && 'delay' in constraint);\n}\n\nclass AbstractPointerSensor {\n constructor(props, events, listenerTarget) {\n var _getEventCoordinates;\n\n if (listenerTarget === void 0) {\n listenerTarget = getEventListenerTarget(props.event.target);\n }\n\n this.props = void 0;\n this.events = void 0;\n this.autoScrollEnabled = true;\n this.document = void 0;\n this.activated = false;\n this.initialCoordinates = void 0;\n this.timeoutId = null;\n this.listeners = void 0;\n this.documentListeners = void 0;\n this.windowListeners = void 0;\n this.props = props;\n this.events = events;\n const {\n event\n } = props;\n const {\n target\n } = event;\n this.props = props;\n this.events = events;\n this.document = getOwnerDocument(target);\n this.documentListeners = new Listeners(this.document);\n this.listeners = new Listeners(listenerTarget);\n this.windowListeners = new Listeners(getWindow(target));\n this.initialCoordinates = (_getEventCoordinates = getEventCoordinates(event)) != null ? _getEventCoordinates : defaultCoordinates;\n this.handleStart = this.handleStart.bind(this);\n this.handleMove = this.handleMove.bind(this);\n this.handleEnd = this.handleEnd.bind(this);\n this.handleCancel = this.handleCancel.bind(this);\n this.handleKeydown = this.handleKeydown.bind(this);\n this.removeTextSelection = this.removeTextSelection.bind(this);\n this.attach();\n }\n\n attach() {\n const {\n events,\n props: {\n options: {\n activationConstraint,\n bypassActivationConstraint\n }\n }\n } = this;\n this.listeners.add(events.move.name, this.handleMove, {\n passive: false\n });\n this.listeners.add(events.end.name, this.handleEnd);\n\n if (events.cancel) {\n this.listeners.add(events.cancel.name, this.handleCancel);\n }\n\n this.windowListeners.add(EventName.Resize, this.handleCancel);\n this.windowListeners.add(EventName.DragStart, preventDefault);\n this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);\n this.windowListeners.add(EventName.ContextMenu, preventDefault);\n this.documentListeners.add(EventName.Keydown, this.handleKeydown);\n\n if (activationConstraint) {\n if (bypassActivationConstraint != null && bypassActivationConstraint({\n event: this.props.event,\n activeNode: this.props.activeNode,\n options: this.props.options\n })) {\n return this.handleStart();\n }\n\n if (isDelayConstraint(activationConstraint)) {\n this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);\n this.handlePending(activationConstraint);\n return;\n }\n\n if (isDistanceConstraint(activationConstraint)) {\n this.handlePending(activationConstraint);\n return;\n }\n }\n\n this.handleStart();\n }\n\n detach() {\n this.listeners.removeAll();\n this.windowListeners.removeAll(); // Wait until the next event loop before removing document listeners\n // This is necessary because we listen for `click` and `selection` events on the document\n\n setTimeout(this.documentListeners.removeAll, 50);\n\n if (this.timeoutId !== null) {\n clearTimeout(this.timeoutId);\n this.timeoutId = null;\n }\n }\n\n handlePending(constraint, offset) {\n const {\n active,\n onPending\n } = this.props;\n onPending(active, constraint, this.initialCoordinates, offset);\n }\n\n handleStart() {\n const {\n