alinea
Version:
Headless git-based CMS
1,779 lines (1,775 loc) • 86.7 kB
JavaScript
// node_modules/@dnd-kit/utilities/dist/utilities.esm.js
import { useMemo, useLayoutEffect, useEffect, useRef, useCallback } from "react";
function useCombinedRefs(...refs) {
return useMemo(
() => (node) => {
refs.forEach((ref) => ref(node));
},
// eslint-disable-next-line react-hooks/exhaustive-deps
refs
);
}
var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
function useInterval() {
const intervalRef = useRef(null);
const set = useCallback((listener, duration) => {
intervalRef.current = setInterval(listener, duration);
}, []);
const clear = useCallback(() => {
if (intervalRef.current !== null) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
}, []);
return [set, clear];
}
function useLazyMemo(callback, dependencies) {
const valueRef = useRef();
return useMemo(
() => {
const newValue = callback(valueRef.current);
valueRef.current = newValue;
return newValue;
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[...dependencies]
);
}
function useNodeRef() {
const node = useRef(null);
const setNodeRef = useCallback((element) => {
node.current = element;
}, []);
return [node, setNodeRef];
}
var ids = {};
function useUniqueId(prefix, value) {
return useMemo(() => {
if (value) {
return value;
}
const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
ids[prefix] = id;
return `${prefix}-${id}`;
}, [prefix, value]);
}
function createAdjustmentFn(modifier) {
return (object, ...adjustments) => {
return adjustments.reduce((accumulator, adjustment) => {
const entries = Object.entries(adjustment);
for (const [key, valueAdjustment] of entries) {
const value = accumulator[key];
if (value != null) {
accumulator[key] = value + modifier * valueAdjustment;
}
}
return accumulator;
}, {
...object
});
};
}
var add = /* @__PURE__ */ createAdjustmentFn(1);
var subtract = /* @__PURE__ */ createAdjustmentFn(-1);
var CSS = /* @__PURE__ */ Object.freeze({
Translate: {
toString(transform) {
if (!transform) {
return;
}
const {
x,
y
} = transform;
return `translate3d(${x ? Math.round(x) : 0}px, ${y ? Math.round(y) : 0}px, 0)`;
}
},
Scale: {
toString(transform) {
if (!transform) {
return;
}
const {
scaleX,
scaleY
} = transform;
return `scaleX(${scaleX}) scaleY(${scaleY})`;
}
},
Transform: {
toString(transform) {
if (!transform) {
return;
}
return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
}
},
Transition: {
toString({
property,
duration,
easing
}) {
return `${property} ${duration}ms ${easing}`;
}
}
});
// node_modules/@dnd-kit/core/dist/core.esm.js
import React2, { createContext, useContext, useRef as useRef2, useEffect as useEffect2, useState as useState2, useMemo as useMemo2, useCallback as useCallback3, memo, useReducer } from "react";
import { createPortal } from "react-dom";
// node_modules/@dnd-kit/accessibility/dist/accessibility.esm.js
import React, { useState, useCallback as useCallback2 } from "react";
var hiddenStyles = {
display: "none"
};
function HiddenText(_ref) {
let {
id,
value
} = _ref;
return React.createElement("div", {
id,
style: hiddenStyles
}, value);
}
function LiveRegion(_ref) {
let {
id,
announcement,
ariaLiveType = "assertive"
} = _ref;
const visuallyHidden = {
position: "fixed",
width: 1,
height: 1,
margin: -1,
border: 0,
padding: 0,
overflow: "hidden",
clip: "rect(0 0 0 0)",
clipPath: "inset(100%)",
whiteSpace: "nowrap"
};
return React.createElement("div", {
id,
style: visuallyHidden,
role: "status",
"aria-live": ariaLiveType,
"aria-atomic": true
}, announcement);
}
function useAnnouncement() {
const [announcement, setAnnouncement] = useState("");
const announce = useCallback2((value) => {
if (value != null) {
setAnnouncement(value);
}
}, []);
return {
announce,
announcement
};
}
// node_modules/@dnd-kit/core/dist/core.esm.js
var screenReaderInstructions = {
draggable: `
To pick up a draggable item, press the space bar.
While dragging, use the arrow keys to move the item.
Press space again to drop the item in its new position, or press escape to cancel.
`
};
var defaultAnnouncements = {
onDragStart(id) {
return `Picked up draggable item ${id}.`;
},
onDragOver(id, overId) {
if (overId) {
return `Draggable item ${id} was moved over droppable area ${overId}.`;
}
return `Draggable item ${id} is no longer over a droppable area.`;
},
onDragEnd(id, overId) {
if (overId) {
return `Draggable item ${id} was dropped over droppable area ${overId}`;
}
return `Draggable item ${id} was dropped.`;
},
onDragCancel(id) {
return `Dragging was cancelled. Draggable item ${id} was dropped.`;
}
};
var Action;
(function(Action2) {
Action2["DragStart"] = "dragStart";
Action2["DragMove"] = "dragMove";
Action2["DragEnd"] = "dragEnd";
Action2["DragCancel"] = "dragCancel";
Action2["DragOver"] = "dragOver";
Action2["RegisterDroppable"] = "registerDroppable";
Action2["SetDroppableDisabled"] = "setDroppableDisabled";
Action2["UnregisterDroppable"] = "unregisterDroppable";
})(Action || (Action = {}));
var getMaxValueIndex = (array) => getValueIndex(array, (value, tracked) => value > tracked);
var getMinValueIndex = (array) => getValueIndex(array, (value, tracked) => value < tracked);
function getValueIndex(array, comparator) {
if (array.length === 0) {
return -1;
}
let tracked = array[0];
let index = 0;
for (var i = 1; i < array.length; i++) {
if (comparator(array[i], tracked)) {
index = i;
tracked = array[i];
}
}
return index;
}
function noop(..._args) {
}
function omit(id, elements) {
const {
[id]: _,
...other
} = elements;
return other;
}
var Context = /* @__PURE__ */ createContext({
activatorEvent: null,
active: null,
activeNode: null,
activeNodeRect: null,
activeNodeClientRect: null,
activators: [],
ariaDescribedById: {
draggable: ""
},
containerNodeRect: null,
dispatch: noop,
draggableNodes: {},
droppableRects: /* @__PURE__ */ new Map(),
droppableContainers: {},
over: null,
overlayNode: {
nodeRef: {
current: null
},
rect: null,
setRef: noop
},
scrollableAncestors: [],
scrollableAncestorRects: [],
recomputeLayouts: noop,
windowRect: null,
willRecomputeLayouts: false
});
var defaultCoordinates = /* @__PURE__ */ Object.freeze({
x: 0,
y: 0
});
function distanceBetween(p1, p2) {
return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
}
function isTouchEvent(event) {
var _window;
return ((_window = window) == null ? void 0 : _window.TouchEvent) && event instanceof TouchEvent;
}
function isMouseEvent(event) {
var _window;
return ((_window = window) == null ? void 0 : _window.MouseEvent) && event instanceof MouseEvent || event.type.includes("mouse");
}
function getEventCoordinates(event) {
if (isTouchEvent(event)) {
if (event.touches && event.touches.length) {
const {
clientX: x,
clientY: y
} = event.touches[0];
return {
x,
y
};
} else if (event.changedTouches && event.changedTouches.length) {
const {
clientX: x,
clientY: y
} = event.changedTouches[0];
return {
x,
y
};
}
}
if (isMouseEvent(event)) {
return {
x: event.clientX,
y: event.clientY
};
}
return {
x: 0,
y: 0
};
}
function getRelativeTransformOrigin(event, rect) {
if (event instanceof KeyboardEvent) {
return "0 0";
}
const eventCoordinates = getEventCoordinates(event);
const transformOrigin = {
x: (eventCoordinates.x - rect.left) / rect.width * 100,
y: (eventCoordinates.y - rect.top) / rect.height * 100
};
return `${transformOrigin.x}% ${transformOrigin.y}%`;
}
function centerOfRectangle(rect, left = rect.offsetLeft, top = rect.offsetTop) {
return {
x: left + rect.width * 0.5,
y: top + rect.height * 0.5
};
}
var closestCenter = (rects, rect) => {
const centerRect = centerOfRectangle(rect, rect.left, rect.top);
const distances = rects.map(([_, rect2]) => distanceBetween(centerOfRectangle(rect2), centerRect));
const minValueIndex = getMinValueIndex(distances);
return rects[minValueIndex] ? rects[minValueIndex][0] : null;
};
function adjustScale(transform, rect1, rect2) {
return {
...transform,
scaleX: rect1 && rect2 ? rect1.width / rect2.width : 1,
scaleY: rect1 && rect2 ? rect1.height / rect2.height : 1
};
}
function getRectDelta(rect1, rect2) {
return rect1 && rect2 ? {
x: rect1.left - rect2.left,
y: rect1.top - rect2.top
} : defaultCoordinates;
}
function createRectAdjustmentFn(modifier) {
return function adjustViewRect(viewRect, ...adjustments) {
return adjustments.reduce((acc, adjustment) => ({
...acc,
top: acc.top + modifier * adjustment.y,
bottom: acc.bottom + modifier * adjustment.y,
left: acc.left + modifier * adjustment.x,
right: acc.right + modifier * adjustment.x,
offsetLeft: acc.offsetLeft + modifier * adjustment.x,
offsetTop: acc.offsetTop + modifier * adjustment.y
}), {
...viewRect
});
};
}
var getAdjustedRect = /* @__PURE__ */ createRectAdjustmentFn(1);
function isScrollable(node) {
const computedStyle = window.getComputedStyle(node);
const overflowRegex = /(auto|scroll|overlay)/;
const properties = ["overflow", "overflowX", "overflowY"];
return properties.find((property) => {
const value = computedStyle[property];
return typeof value === "string" ? overflowRegex.test(value) : false;
}) != null;
}
function getScrollableAncestors(element) {
const scrollParents = [];
function findScrollableAncestors(node) {
if (!node) {
return scrollParents;
}
if (node instanceof Document && node.scrollingElement != null) {
scrollParents.push(node.scrollingElement);
return scrollParents;
}
if (!(node instanceof HTMLElement) || node instanceof SVGElement) {
return scrollParents;
}
if (isScrollable(node)) {
scrollParents.push(node);
}
return findScrollableAncestors(node.parentNode);
}
return element ? findScrollableAncestors(element.parentNode) : scrollParents;
}
function getScrollableElement(element) {
if (!canUseDOM) {
return null;
}
if (element === document.scrollingElement || element instanceof Document) {
return window;
}
if (element instanceof HTMLElement) {
return element;
}
return null;
}
function getScrollCoordinates(element) {
if (element instanceof Window) {
return {
x: element.scrollX,
y: element.scrollY
};
}
return {
x: element.scrollLeft,
y: element.scrollTop
};
}
var Direction;
(function(Direction2) {
Direction2[Direction2["Forward"] = 1] = "Forward";
Direction2[Direction2["Backward"] = -1] = "Backward";
})(Direction || (Direction = {}));
function getScrollPosition(scrollingContainer) {
const minScroll = {
x: 0,
y: 0
};
const maxScroll = {
x: scrollingContainer.scrollWidth - scrollingContainer.clientWidth,
y: scrollingContainer.scrollHeight - scrollingContainer.clientHeight
};
const isTop = scrollingContainer.scrollTop <= minScroll.y;
const isLeft = scrollingContainer.scrollLeft <= minScroll.x;
const isBottom = scrollingContainer.scrollTop >= maxScroll.y;
const isRight = scrollingContainer.scrollLeft >= maxScroll.x;
return {
isTop,
isLeft,
isBottom,
isRight,
maxScroll,
minScroll
};
}
function isDocumentScrollingElement(element) {
if (!canUseDOM || !element) {
return false;
}
return element === document.scrollingElement;
}
var defaultThreshold = {
x: 0.2,
y: 0.2
};
function getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, {
top,
left,
right,
bottom
}, acceleration = 10, thresholdPercentage = defaultThreshold) {
const {
clientHeight,
clientWidth
} = scrollContainer;
const finalScrollContainerRect = isDocumentScrollingElement(scrollContainer) ? {
top: 0,
left: 0,
right: clientWidth,
bottom: clientHeight,
width: clientWidth,
height: clientHeight
} : scrollContainerRect;
const {
isTop,
isBottom,
isLeft,
isRight
} = getScrollPosition(scrollContainer);
const direction = {
x: 0,
y: 0
};
const speed = {
x: 0,
y: 0
};
const threshold = {
height: finalScrollContainerRect.height * thresholdPercentage.y,
width: finalScrollContainerRect.width * thresholdPercentage.x
};
if (!isTop && top <= finalScrollContainerRect.top + threshold.height) {
direction.y = Direction.Backward;
speed.y = acceleration * Math.abs((finalScrollContainerRect.top + threshold.height - top) / threshold.height);
} else if (!isBottom && bottom >= finalScrollContainerRect.bottom - threshold.height) {
direction.y = Direction.Forward;
speed.y = acceleration * Math.abs((finalScrollContainerRect.bottom - threshold.height - bottom) / threshold.height);
}
if (!isRight && right >= finalScrollContainerRect.right - threshold.width) {
direction.x = Direction.Forward;
speed.x = acceleration * Math.abs((finalScrollContainerRect.right - threshold.width - right) / threshold.width);
} else if (!isLeft && left <= finalScrollContainerRect.left + threshold.width) {
direction.x = Direction.Backward;
speed.x = acceleration * Math.abs((finalScrollContainerRect.left + threshold.width - left) / threshold.width);
}
return {
direction,
speed
};
}
function getScrollElementRect(element) {
if (element === document.scrollingElement) {
const {
innerWidth,
innerHeight
} = window;
return {
top: 0,
left: 0,
right: innerWidth,
bottom: innerHeight,
width: innerWidth,
height: innerHeight
};
}
const {
top,
left,
right,
bottom
} = element.getBoundingClientRect();
return {
top,
left,
right,
bottom,
width: element.clientWidth,
height: element.clientHeight
};
}
function getScrollOffsets(scrollableAncestors) {
return scrollableAncestors.reduce((acc, node) => {
return add(acc, getScrollCoordinates(node));
}, defaultCoordinates);
}
function getEdgeOffset(node, parent, offset = defaultCoordinates) {
if (!node || !(node instanceof HTMLElement)) {
return offset;
}
const nodeOffset = {
x: offset.x + node.offsetLeft,
y: offset.y + node.offsetTop
};
if (node.offsetParent === parent) {
return nodeOffset;
}
return getEdgeOffset(node.offsetParent, parent, nodeOffset);
}
function getElementLayout(element) {
const {
offsetWidth: width,
offsetHeight: height
} = element;
const {
x: offsetLeft,
y: offsetTop
} = getEdgeOffset(element, null);
return {
width,
height,
offsetTop,
offsetLeft
};
}
function getBoundingClientRect(element) {
if (element instanceof Window) {
const width2 = window.innerWidth;
const height2 = window.innerHeight;
return {
top: 0,
left: 0,
right: width2,
bottom: height2,
width: width2,
height: height2,
offsetTop: 0,
offsetLeft: 0
};
}
const {
offsetTop,
offsetLeft
} = getElementLayout(element);
const {
width,
height,
top,
bottom,
left,
right
} = element.getBoundingClientRect();
return {
width,
height,
top,
bottom,
right,
left,
offsetTop,
offsetLeft
};
}
function getViewRect(element) {
const {
width,
height,
offsetTop,
offsetLeft
} = getElementLayout(element);
const scrollableAncestors = getScrollableAncestors(element);
const scrollOffsets = getScrollOffsets(scrollableAncestors);
const top = offsetTop - scrollOffsets.y;
const left = offsetLeft - scrollOffsets.x;
return {
width,
height,
top,
bottom: top + height,
right: left + width,
left,
offsetTop,
offsetLeft
};
}
function isViewRect(entry) {
return "top" in entry;
}
function cornersOfRectangle(rect, left = rect.offsetLeft, top = rect.offsetTop) {
return [{
x: left,
y: top
}, {
x: left + rect.width,
y: top
}, {
x: left,
y: top + rect.height
}, {
x: left + rect.width,
y: top + rect.height
}];
}
var closestCorners = (entries, target) => {
const corners = cornersOfRectangle(target, target.left, target.top);
const distances = entries.map(([_, entry]) => {
const entryCorners = cornersOfRectangle(entry, isViewRect(entry) ? entry.left : void 0, isViewRect(entry) ? entry.top : void 0);
const distances2 = corners.reduce((accumulator, corner, index) => {
return accumulator + distanceBetween(entryCorners[index], corner);
}, 0);
return Number((distances2 / 4).toFixed(4));
});
const minValueIndex = getMinValueIndex(distances);
return entries[minValueIndex] ? entries[minValueIndex][0] : null;
};
function getIntersectionRatio(entry, target) {
const top = Math.max(target.top, entry.offsetTop);
const left = Math.max(target.left, entry.offsetLeft);
const right = Math.min(target.left + target.width, entry.offsetLeft + entry.width);
const bottom = Math.min(target.top + target.height, entry.offsetTop + entry.height);
const width = right - left;
const height = bottom - top;
if (left < right && top < bottom) {
const targetArea = target.width * target.height;
const entryArea = entry.width * entry.height;
const intersectionArea = width * height;
const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
return Number(intersectionRatio.toFixed(4));
}
return 0;
}
var rectIntersection = (entries, target) => {
const intersections = entries.map(([_, entry]) => getIntersectionRatio(entry, target));
const maxValueIndex = getMaxValueIndex(intersections);
if (intersections[maxValueIndex] <= 0) {
return null;
}
return entries[maxValueIndex] ? entries[maxValueIndex][0] : null;
};
function getOwnerDocument(target) {
return target instanceof HTMLElement ? target.ownerDocument : document;
}
function getWindow(target) {
var _getOwnerDocument$def;
return (_getOwnerDocument$def = getOwnerDocument(target).defaultView) != null ? _getOwnerDocument$def : window;
}
function getInitialState() {
return {
draggable: {
active: null,
initialCoordinates: {
x: 0,
y: 0
},
nodes: {},
translate: {
x: 0,
y: 0
}
},
droppable: {
containers: {}
}
};
}
function reducer(state, action) {
switch (action.type) {
case Action.DragStart:
return {
...state,
draggable: {
...state.draggable,
initialCoordinates: action.initialCoordinates,
active: action.active
}
};
case Action.DragMove:
if (!state.draggable.active) {
return state;
}
return {
...state,
draggable: {
...state.draggable,
translate: {
x: action.coordinates.x - state.draggable.initialCoordinates.x,
y: action.coordinates.y - state.draggable.initialCoordinates.y
}
}
};
case Action.DragEnd:
case Action.DragCancel:
return {
...state,
draggable: {
...state.draggable,
active: null,
initialCoordinates: {
x: 0,
y: 0
},
translate: {
x: 0,
y: 0
}
}
};
case Action.RegisterDroppable: {
const {
element
} = action;
const {
id
} = element;
return {
...state,
droppable: {
...state.droppable,
containers: {
...state.droppable.containers,
[id]: element
}
}
};
}
case Action.SetDroppableDisabled: {
const {
id,
disabled
} = action;
const element = state.droppable.containers[id];
if (!element) {
return state;
}
return {
...state,
droppable: {
...state.droppable,
containers: {
...state.droppable.containers,
[id]: {
...element,
disabled
}
}
}
};
}
case Action.UnregisterDroppable: {
const {
id
} = action;
return {
...state,
droppable: {
...state.droppable,
containers: omit(id, state.droppable.containers)
}
};
}
default: {
return state;
}
}
}
var DndMonitorContext = /* @__PURE__ */ createContext({
type: null,
event: null
});
function useDndMonitor({
onDragStart,
onDragMove,
onDragOver,
onDragEnd,
onDragCancel
}) {
const monitorState = useContext(DndMonitorContext);
const previousMonitorState = useRef2(monitorState);
useEffect2(() => {
if (monitorState !== previousMonitorState.current) {
const {
type,
event
} = monitorState;
switch (type) {
case Action.DragStart:
onDragStart == null ? void 0 : onDragStart(event);
break;
case Action.DragMove:
onDragMove == null ? void 0 : onDragMove(event);
break;
case Action.DragOver:
onDragOver == null ? void 0 : onDragOver(event);
break;
case Action.DragCancel:
onDragCancel == null ? void 0 : onDragCancel(event);
break;
case Action.DragEnd:
onDragEnd == null ? void 0 : onDragEnd(event);
break;
}
previousMonitorState.current = monitorState;
}
}, [monitorState, onDragStart, onDragMove, onDragOver, onDragEnd, onDragCancel]);
}
function Accessibility({
announcements = defaultAnnouncements,
hiddenTextDescribedById,
screenReaderInstructions: screenReaderInstructions2
}) {
const {
announce,
announcement
} = useAnnouncement();
const liveRegionId = useUniqueId(`DndLiveRegion`);
const [mounted, setMounted] = useState2(false);
useEffect2(() => {
setMounted(true);
}, []);
useDndMonitor(useMemo2(() => ({
onDragStart({
active
}) {
announce(announcements.onDragStart(active.id));
},
onDragMove({
active,
over
}) {
if (announcements.onDragMove) {
announce(announcements.onDragMove(active.id, over == null ? void 0 : over.id));
}
},
onDragOver({
active,
over
}) {
announce(announcements.onDragOver(active.id, over == null ? void 0 : over.id));
},
onDragEnd({
active,
over
}) {
announce(announcements.onDragEnd(active.id, over == null ? void 0 : over.id));
},
onDragCancel({
active
}) {
announce(announcements.onDragCancel(active.id));
}
}), [announce, announcements]));
return mounted ? createPortal(React2.createElement(React2.Fragment, null, React2.createElement(HiddenText, {
id: hiddenTextDescribedById,
value: screenReaderInstructions2.draggable
}), React2.createElement(LiveRegion, {
id: liveRegionId,
announcement
})), document.body) : null;
}
var AutoScrollActivator;
(function(AutoScrollActivator2) {
AutoScrollActivator2[AutoScrollActivator2["Pointer"] = 0] = "Pointer";
AutoScrollActivator2[AutoScrollActivator2["DraggableRect"] = 1] = "DraggableRect";
})(AutoScrollActivator || (AutoScrollActivator = {}));
var TraversalOrder;
(function(TraversalOrder2) {
TraversalOrder2[TraversalOrder2["TreeOrder"] = 0] = "TreeOrder";
TraversalOrder2[TraversalOrder2["ReversedTreeOrder"] = 1] = "ReversedTreeOrder";
})(TraversalOrder || (TraversalOrder = {}));
function useAutoScroller({
acceleration,
activator = AutoScrollActivator.Pointer,
canScroll,
draggingRect,
enabled,
interval = 5,
order = TraversalOrder.TreeOrder,
pointerCoordinates,
scrollableAncestors,
scrollableAncestorRects,
threshold
}) {
const [setAutoScrollInterval, clearAutoScrollInterval] = useInterval();
const scrollSpeed = useRef2({
x: 1,
y: 1
});
const rect = useMemo2(() => {
switch (activator) {
case AutoScrollActivator.Pointer:
return pointerCoordinates ? {
top: pointerCoordinates.y,
bottom: pointerCoordinates.y,
left: pointerCoordinates.x,
right: pointerCoordinates.x
} : null;
case AutoScrollActivator.DraggableRect:
return draggingRect;
}
return null;
}, [activator, draggingRect, pointerCoordinates]);
const scrollDirection = useRef2(defaultCoordinates);
const scrollContainerRef = useRef2(null);
const autoScroll = useCallback3(() => {
const scrollContainer = scrollContainerRef.current;
if (!scrollContainer) {
return;
}
const scrollLeft = scrollSpeed.current.x * scrollDirection.current.x;
const scrollTop = scrollSpeed.current.y * scrollDirection.current.y;
scrollContainer.scrollBy(scrollLeft, scrollTop);
}, []);
const sortedScrollableAncestors = useMemo2(() => order === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order, scrollableAncestors]);
useEffect2(
() => {
if (!enabled || !scrollableAncestors.length || !rect) {
clearAutoScrollInterval();
return;
}
for (const scrollContainer of sortedScrollableAncestors) {
if ((canScroll == null ? void 0 : canScroll(scrollContainer)) === false) {
continue;
}
const index = scrollableAncestors.indexOf(scrollContainer);
const scrolllContainerRect = scrollableAncestorRects[index];
if (!scrolllContainerRect) {
continue;
}
const {
direction,
speed
} = getScrollDirectionAndSpeed(scrollContainer, scrolllContainerRect, rect, acceleration, threshold);
if (speed.x > 0 || speed.y > 0) {
clearAutoScrollInterval();
scrollContainerRef.current = scrollContainer;
setAutoScrollInterval(autoScroll, interval);
scrollSpeed.current = speed;
scrollDirection.current = direction;
return;
}
}
scrollSpeed.current = {
x: 0,
y: 0
};
scrollDirection.current = {
x: 0,
y: 0
};
clearAutoScrollInterval();
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[
acceleration,
autoScroll,
canScroll,
clearAutoScrollInterval,
enabled,
interval,
// eslint-disable-next-line react-hooks/exhaustive-deps
JSON.stringify(rect),
setAutoScrollInterval,
scrollableAncestors,
sortedScrollableAncestors,
scrollableAncestorRects,
// eslint-disable-next-line react-hooks/exhaustive-deps
JSON.stringify(threshold)
]
);
}
function useCachedNode(draggableNodes, id) {
const draggableNode = id !== null ? draggableNodes[id] : void 0;
const node = draggableNode ? draggableNode.node.current : null;
return useLazyMemo((cachedNode) => {
var _ref;
if (id === null) {
return null;
}
return (_ref = node != null ? node : cachedNode) != null ? _ref : null;
}, [node, id]);
}
function useCombineActivators(sensors, getSyntheticHandler) {
return useMemo2(() => sensors.reduce((accumulator, sensor) => {
const {
sensor: Sensor
} = sensor;
const sensorActivators = Sensor.activators.map((activator) => ({
eventName: activator.eventName,
handler: getSyntheticHandler(activator.handler, sensor)
}));
return [...accumulator, ...sensorActivators];
}, []), [sensors, getSyntheticHandler]);
}
function useData(data) {
const dataRef = useRef2(data);
useIsomorphicLayoutEffect(() => {
if (dataRef.current !== data) {
dataRef.current = data;
}
}, [data]);
return dataRef;
}
var LayoutMeasuringStrategy;
(function(LayoutMeasuringStrategy2) {
LayoutMeasuringStrategy2[LayoutMeasuringStrategy2["Always"] = 0] = "Always";
LayoutMeasuringStrategy2[LayoutMeasuringStrategy2["BeforeDragging"] = 1] = "BeforeDragging";
LayoutMeasuringStrategy2[LayoutMeasuringStrategy2["WhileDragging"] = 2] = "WhileDragging";
})(LayoutMeasuringStrategy || (LayoutMeasuringStrategy = {}));
var LayoutMeasuringFrequency;
(function(LayoutMeasuringFrequency2) {
LayoutMeasuringFrequency2["Optimized"] = "optimized";
})(LayoutMeasuringFrequency || (LayoutMeasuringFrequency = {}));
var defaultValue = /* @__PURE__ */ new Map();
function useLayoutMeasuring(containers, {
dragging,
dependencies,
config
}) {
const [willRecomputeLayouts, setWillRecomputeLayouts] = useState2(false);
const {
frequency,
strategy
} = getLayoutMeasuring(config);
const containersRef = useRef2(containers);
const recomputeLayouts = useCallback3(() => setWillRecomputeLayouts(true), []);
const recomputeLayoutsTimeoutId = useRef2(null);
const disabled = isDisabled();
const layoutRectMap = useLazyMemo((previousValue) => {
if (disabled && !dragging) {
return defaultValue;
}
if (!previousValue || previousValue === defaultValue || containersRef.current !== containers || willRecomputeLayouts) {
for (let container of Object.values(containers)) {
if (!container) {
continue;
}
container.rect.current = container.node.current ? getElementLayout(container.node.current) : null;
}
return createLayoutRectMap(containers);
}
return previousValue;
}, [containers, dragging, disabled, willRecomputeLayouts]);
useEffect2(() => {
containersRef.current = containers;
}, [containers]);
useEffect2(() => {
if (willRecomputeLayouts) {
setWillRecomputeLayouts(false);
}
}, [willRecomputeLayouts]);
useEffect2(
function recompute() {
if (disabled) {
return;
}
requestAnimationFrame(recomputeLayouts);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[dragging, disabled]
);
useEffect2(
function forceRecomputeLayouts() {
if (disabled || typeof frequency !== "number" || recomputeLayoutsTimeoutId.current !== null) {
return;
}
recomputeLayoutsTimeoutId.current = setTimeout(() => {
recomputeLayouts();
recomputeLayoutsTimeoutId.current = null;
}, frequency);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[frequency, disabled, recomputeLayouts, ...dependencies]
);
return {
layoutRectMap,
recomputeLayouts,
willRecomputeLayouts
};
function isDisabled() {
switch (strategy) {
case LayoutMeasuringStrategy.Always:
return false;
case LayoutMeasuringStrategy.BeforeDragging:
return dragging;
default:
return !dragging;
}
}
}
function createLayoutRectMap(containers) {
const layoutRectMap = /* @__PURE__ */ new Map();
if (containers) {
for (const container of Object.values(containers)) {
if (!container) {
continue;
}
const {
id,
rect,
disabled
} = container;
if (disabled || rect.current == null) {
continue;
}
layoutRectMap.set(id, rect.current);
}
}
return layoutRectMap;
}
var defaultLayoutMeasuring = {
strategy: LayoutMeasuringStrategy.WhileDragging,
frequency: LayoutMeasuringFrequency.Optimized
};
function getLayoutMeasuring(layoutMeasuring) {
return layoutMeasuring ? {
...defaultLayoutMeasuring,
...layoutMeasuring
} : defaultLayoutMeasuring;
}
function useScrollOffsets(elements) {
const [scrollCoordinates, setScrollCoordinates] = useState2(null);
const prevElements = useRef2(elements);
const handleScroll = useCallback3((event) => {
const scrollingElement = getScrollableElement(event.target);
if (!scrollingElement) {
return;
}
setScrollCoordinates((scrollCoordinates2) => {
if (!scrollCoordinates2) {
return null;
}
scrollCoordinates2.set(scrollingElement, getScrollCoordinates(scrollingElement));
return new Map(scrollCoordinates2);
});
}, []);
useEffect2(() => {
const previousElements = prevElements.current;
if (elements !== previousElements) {
cleanup(previousElements);
const entries = elements.map((element) => {
const scrollableElement = getScrollableElement(element);
if (scrollableElement) {
scrollableElement.addEventListener("scroll", handleScroll, {
passive: true
});
return [scrollableElement, getScrollCoordinates(scrollableElement)];
}
return null;
}).filter((entry) => entry != null);
setScrollCoordinates(entries.length ? new Map(entries) : null);
prevElements.current = elements;
}
return () => {
cleanup(elements);
cleanup(previousElements);
};
function cleanup(elements2) {
elements2.forEach((element) => {
const scrollableElement = getScrollableElement(element);
scrollableElement == null ? void 0 : scrollableElement.removeEventListener("scroll", handleScroll);
});
}
}, [handleScroll, elements]);
return useMemo2(() => {
if (elements.length) {
return scrollCoordinates ? Array.from(scrollCoordinates.values()).reduce((acc, coordinates) => add(acc, coordinates), defaultCoordinates) : getScrollOffsets(elements);
}
return defaultCoordinates;
}, [elements, scrollCoordinates]);
}
var defaultValue$1 = [];
function useScrollableAncestors(node) {
const previousNode = useRef2(node);
const ancestors = useLazyMemo((previousValue) => {
if (!node) {
return defaultValue$1;
}
if (previousValue && node && previousNode.current && node.parentNode === previousNode.current.parentNode) {
return previousValue;
}
return getScrollableAncestors(node);
}, [node]);
useEffect2(() => {
previousNode.current = node;
}, [node]);
return ancestors;
}
function useSyntheticListeners(listeners, id) {
return useMemo2(() => {
return listeners.reduce((acc, {
eventName,
handler
}) => {
acc[eventName] = (event) => {
handler(event, id);
};
return acc;
}, {});
}, [listeners, id]);
}
var useClientRect = /* @__PURE__ */ createUseRectFn(getBoundingClientRect);
var useClientRects = /* @__PURE__ */ createUseRectsFn(getBoundingClientRect);
var useViewRect = /* @__PURE__ */ createUseRectFn(getViewRect);
function createUseRectFn(getRect) {
return function useClientRect2(element, forceRecompute) {
const previousElement = useRef2(element);
return useLazyMemo((previousValue) => {
if (!element) {
return null;
}
if (forceRecompute || !previousValue && element || element !== previousElement.current) {
if (element instanceof HTMLElement && element.parentNode == null) {
return null;
}
return getRect(element);
}
return previousValue != null ? previousValue : null;
}, [element, forceRecompute]);
};
}
function createUseRectsFn(getRect) {
const defaultValue2 = [];
return function useRects(elements, forceRecompute) {
const previousElements = useRef2(elements);
return useLazyMemo((previousValue) => {
if (!elements.length) {
return defaultValue2;
}
if (forceRecompute || !previousValue && elements.length || elements !== previousElements.current) {
return elements.map((element) => getRect(element));
}
return previousValue != null ? previousValue : defaultValue2;
}, [elements, forceRecompute]);
};
}
function useSensor(sensor, options) {
return useMemo2(
() => ({
sensor,
options: options != null ? options : {}
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[sensor, options]
);
}
function useSensors(...sensors) {
return useMemo2(
() => [...sensors].filter((sensor) => sensor != null),
// eslint-disable-next-line react-hooks/exhaustive-deps
[...sensors]
);
}
var Listeners = class {
constructor(target) {
this.target = target;
this.listeners = [];
}
add(eventName, handler, options) {
this.target.addEventListener(eventName, handler, options);
this.listeners.push({
eventName,
handler
});
}
removeAll() {
this.listeners.forEach(({
eventName,
handler
}) => this.target.removeEventListener(eventName, handler));
}
};
function getEventListenerTarget(element) {
return element instanceof EventTarget ? element : getOwnerDocument(element);
}
function hasExceededDistance(delta, measurement) {
const dx = Math.abs(delta.x);
const dy = Math.abs(delta.y);
if (typeof measurement === "number") {
return Math.sqrt(dx ** 2 + dy ** 2) > measurement;
}
if ("x" in measurement && "y" in measurement) {
return dx > measurement.x && dy > measurement.y;
}
if ("x" in measurement) {
return dx > measurement.x;
}
if ("y" in measurement) {
return dy > measurement.y;
}
return false;
}
var KeyboardCode;
(function(KeyboardCode2) {
KeyboardCode2["Space"] = "Space";
KeyboardCode2["Down"] = "ArrowDown";
KeyboardCode2["Right"] = "ArrowRight";
KeyboardCode2["Left"] = "ArrowLeft";
KeyboardCode2["Up"] = "ArrowUp";
KeyboardCode2["Esc"] = "Escape";
KeyboardCode2["Enter"] = "Enter";
})(KeyboardCode || (KeyboardCode = {}));
var defaultKeyboardCodes = {
start: [KeyboardCode.Space, KeyboardCode.Enter],
cancel: [KeyboardCode.Esc],
end: [KeyboardCode.Space, KeyboardCode.Enter]
};
var defaultKeyboardCoordinateGetter = (event, {
currentCoordinates
}) => {
switch (event.code) {
case KeyboardCode.Right:
return {
...currentCoordinates,
x: currentCoordinates.x + 25
};
case KeyboardCode.Left:
return {
...currentCoordinates,
x: currentCoordinates.x - 25
};
case KeyboardCode.Down:
return {
...currentCoordinates,
y: currentCoordinates.y + 25
};
case KeyboardCode.Up:
return {
...currentCoordinates,
y: currentCoordinates.y - 25
};
}
return void 0;
};
var KeyboardSensor = class {
constructor(props) {
this.props = props;
this.autoScrollEnabled = false;
this.coordinates = defaultCoordinates;
const {
event: {
target
}
} = props;
this.props = props;
this.listeners = new Listeners(getOwnerDocument(target));
this.windowListeners = new Listeners(getWindow(target));
this.handleKeyDown = this.handleKeyDown.bind(this);
this.handleCancel = this.handleCancel.bind(this);
this.attach();
}
attach() {
this.handleStart();
setTimeout(() => {
this.listeners.add("keydown", this.handleKeyDown);
this.windowListeners.add("resize", this.handleCancel);
});
}
handleStart() {
const {
activeNode,
onStart
} = this.props;
if (!activeNode.node.current) {
throw new Error("Active draggable node is undefined");
}
const activeNodeRect = getBoundingClientRect(activeNode.node.current);
const coordinates = {
x: activeNodeRect.left,
y: activeNodeRect.top
};
this.coordinates = coordinates;
onStart(coordinates);
}
handleKeyDown(event) {
if (event instanceof KeyboardEvent) {
const {
coordinates
} = this;
const {
active,
context,
options
} = this.props;
const {
keyboardCodes = defaultKeyboardCodes,
coordinateGetter = defaultKeyboardCoordinateGetter,
scrollBehavior = "smooth"
} = options;
const {
code
} = event;
if (keyboardCodes.end.includes(code)) {
this.handleEnd(event);
return;
}
if (keyboardCodes.cancel.includes(code)) {
this.handleCancel(event);
return;
}
const newCoordinates = coordinateGetter(event, {
active,
context: context.current,
currentCoordinates: coordinates
});
if (newCoordinates) {
const scrollDelta = {
x: 0,
y: 0
};
const {
scrollableAncestors
} = context.current;
for (const scrollContainer of scrollableAncestors) {
const direction = event.code;
const coordinatesDelta = subtract(newCoordinates, coordinates);
const {
isTop,
isRight,
isLeft,
isBottom,
maxScroll,
minScroll
} = getScrollPosition(scrollContainer);
const scrollElementRect = getScrollElementRect(scrollContainer);
const clampedCoordinates = {
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)),
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))
};
const canScrollX = direction === KeyboardCode.Right && !isRight || direction === KeyboardCode.Left && !isLeft;
const canScrollY = direction === KeyboardCode.Down && !isBottom || direction === KeyboardCode.Up && !isTop;
if (canScrollX && clampedCoordinates.x !== newCoordinates.x) {
const canFullyScrollToNewCoordinates = direction === KeyboardCode.Right && scrollContainer.scrollLeft + coordinatesDelta.x <= maxScroll.x || direction === KeyboardCode.Left && scrollContainer.scrollLeft + coordinatesDelta.x >= minScroll.x;
if (canFullyScrollToNewCoordinates) {
scrollContainer.scrollBy({
left: coordinatesDelta.x,
behavior: scrollBehavior
});
return;
}
scrollDelta.x = direction === KeyboardCode.Right ? scrollContainer.scrollLeft - maxScroll.x : scrollContainer.scrollLeft - minScroll.x;
scrollContainer.scrollBy({
left: -scrollDelta.x,
behavior: scrollBehavior
});
break;
} else if (canScrollY && clampedCoordinates.y !== newCoordinates.y) {
const canFullyScrollToNewCoordinates = direction === KeyboardCode.Down && scrollContainer.scrollTop + coordinatesDelta.y <= maxScroll.y || direction === KeyboardCode.Up && scrollContainer.scrollTop + coordinatesDelta.y >= minScroll.y;
if (canFullyScrollToNewCoordinates) {
scrollContainer.scrollBy({
top: coordinatesDelta.y,
behavior: scrollBehavior
});
return;
}
scrollDelta.y = direction === KeyboardCode.Down ? scrollContainer.scrollTop - maxScroll.y : scrollContainer.scrollTop - minScroll.y;
scrollContainer.scrollBy({
top: -scrollDelta.y,
behavior: scrollBehavior
});
break;
}
}
this.handleMove(event, add(newCoordinates, scrollDelta));
}
}
}
handleMove(event, coordinates) {
const {
onMove
} = this.props;
event.preventDefault();
onMove(coordinates);
this.coordinates = coordinates;
}
handleEnd(event) {
const {
onEnd
} = this.props;
event.preventDefault();
this.detach();
onEnd();
}
handleCancel(event) {
const {
onCancel
} = this.props;
event.preventDefault();
this.detach();
onCancel();
}
detach() {
this.listeners.removeAll();
this.windowListeners.removeAll();
}
};
KeyboardSensor.activators = [{
eventName: "onKeyDown",
handler: (event, {
keyboardCodes = defaultKeyboardCodes,
onActivation
}) => {
const {
code
} = event.nativeEvent;
if (keyboardCodes.start.includes(code)) {
event.preventDefault();
onActivation == null ? void 0 : onActivation({
event: event.nativeEvent
});
return true;
}
return false;
}
}];
function isDistanceConstraint(constraint) {
return Boolean(constraint && "distance" in constraint);
}
function isDelayConstraint(constraint) {
return Boolean(constraint && "delay" in constraint);
}
var EventName;
(function(EventName2) {
EventName2["Keydown"] = "keydown";
})(EventName || (EventName = {}));
var AbstractPointerSensor = class {
constructor(props, events2, listenerTarget = getEventListenerTarget(props.event.target)) {
this.props = props;
this.events = events2;
this.autoScrollEnabled = true;
this.activated = false;
this.timeoutId = null;
const {
event
} = props;
this.props = props;
this.events = events2;
this.ownerDocument = getOwnerDocument(event.target);
this.listeners = new Listeners(listenerTarget);
this.initialCoordinates = getEventCoordinates(event);
this.handleStart = this.handleStart.bind(this);
this.handleMove = this.handleMove.bind(this);
this.handleEnd = this.handleEnd.bind(this);
this.handleKeydown = this.handleKeydown.bind(this);
this.attach();
}
attach() {
const {
events: events2,
props: {
options: {
activationConstraint
}
}
} = this;
this.listeners.add(events2.move.name, this.handleMove, false);
this.listeners.add(events2.end.name, this.handleEnd);
this.ownerDocument.addEventListener(EventName.Keydown, this.handleKeydown);
if (activationConstraint) {
if (isDistanceConstraint(activationConstraint)) {
return;
}
if (isDelayConstraint(activationConstraint)) {
this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
return;
}
}
this.handleStart();
}
detach() {
this.listeners.removeAll();
this.ownerDocument.removeEventListener(EventName.Keydown, this.handleKeydown);
if (this.timeoutId !== null) {
clearTimeout(this.timeoutId);
this.timeoutId = null;
}
}
handleStart() {
const {
initialCoordinates
} = this;
const {
onStart
} = this.props;
if (initialCoordinates) {
this.activated = true;
onStart(initialCoordinates);
}
}
handleMove(event) {
const {
activated,
initialCoordinates,
props
} = this;
const {
onMove,
options: {
activationConstraint
}
} = props;
if (!initialCoordinates) {
return;
}
const coordinates = getEventCoordinates(event);
const delta = subtract(initialCoordinates, coordinates);
if (!activated && activationConstraint) {
if (isDelayConstraint(activationConstraint)) {
if (hasExceededDistance(delta, activationConstraint.tolerance)) {
return this.handleCancel();
}
return;
}
if (isDistanceConstraint(activationConstraint)) {
if (hasExceededDistance(delta, activationConstraint.distance)) {
return this.handleStart();
}
return;
}
}
if (event.cancelable) {
event.preventDefault();
}
onMove(coordinates);
}
handleEnd() {
const {
onEnd
} = this.props;
this.detach();
onEnd();
}
handleCancel() {
const {
onCancel
} = this.props;
this.detach();
onCancel();
}
handleKeydown(event) {
if (event.code === KeyboardCode.Esc) {
this.handleCancel();
}
}
};
var events = {
move: {
name: "pointermove"
},
end: {
name: "pointerup"
}
};
var PointerSensor = class extends AbstractPointerSensor {
constructor(props) {
const {
event
} = props;
const listenerTarget = getOwnerDocument(event.target);
super(props, events, listenerTarget);
}
};
PointerSensor.activators = [{
eventName: "onPointerDown",
handler: ({
nativeEvent: event
}, {
onActivation
}) => {
if (!event.isPrimary || event.button !== 0) {
return false;
}
onActivation == null ? void 0 : onActivation({
event
});
return true;
}
}];
var events$1 = {
move: {
name: "mousemove"
},
end: {
name: "mouseup"
}
};
var MouseButton;
(function(MouseButton2) {
MouseButton2[MouseButton2["RightClick"] = 2] = "RightClick";
})(MouseButton || (MouseButton = {}));
var MouseSensor = class extends AbstractPointerSensor {
constructor(props) {
super(props, events$1, getOwnerDocument(props.event.target));
}
};
MouseSensor.activators = [{
eventName: "onMouseDown",
handler: ({
nativeEvent: event
}, {
onActivation
}) => {
if (event.button === MouseButton.RightClick) {
return false;
}
onActivation == null ? void 0 : onActivation({
event
});
return true;
}
}];
var events$2 = {
move: {
name: "touchmove"
},
end: {
name: "touchend"
}
};
var TouchSensor = class extends AbstractPointerSensor {
constructor(props) {
super(props, events$2);
}
};
TouchSensor.activators = [{
eventName: "onTouchStart",