@vuu-ui/vuu-ui-controls 0.0.26

package/esm/drag-drop/useDragDropIndicator.js

@@ -0,0 +1,249 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useCallback } from 'react';
+import { useDropIndicator } from './useDropIndicator.js';
+import { measureDropTargets, getNextDropTarget, getItemById, removeDraggedItem, dimensions } from './drop-target-utils.js';
+import { Draggable, createDropIndicator } from './Draggable.js';
+
+const NOT_OVERFLOWED = ':not([data-overflowed="true"])';
+const NOT_HIDDEN = ':not([aria-hidden="true"])';
+const useDragDropIndicator = ({
+  orientation = "horizontal",
+  containerRef,
+  itemQuery = "*",
+  selected,
+  viewportRange
+}) => {
+  const dragDirectionRef = useRef();
+  const dropIndicatorRef = useRef(null);
+  const dropTargetRef = useRef(null);
+  const dropZoneRef = useRef("");
+  const isScrollable = useRef(false);
+  const dragPosRef = useRef(-1);
+  const measuredDropTargets = useRef([]);
+  const overflowMenuShowingRef = useRef(false);
+  const [showOverflow, setShowOverflow] = useState(false);
+  const [dropIndicator, setDropIndicator] = useState();
+  const { clearSpacer, positionDropIndicator } = useDropIndicator();
+  const draggedItemRef = useRef();
+  const fullItemQuery = `:is(${itemQuery}${NOT_OVERFLOWED}${NOT_HIDDEN},[data-overflow-indicator])`;
+  const indexOf = (dropTarget) => measuredDropTargets.current.findIndex((d) => d.id === dropTarget.id);
+  const reposition = (dropTarget, distance, indexShift) => {
+    dropTarget.start += distance;
+    dropTarget.mid += distance;
+    dropTarget.end += distance;
+    if (typeof indexShift === "number") {
+      dropTarget.currentIndex += indexShift;
+    }
+  };
+  const rangeRef = useRef();
+  rangeRef.current = viewportRange;
+  const handleScrollStart = useCallback(() => {
+    clearSpacer();
+  }, [clearSpacer]);
+  const handleScrollStop = useCallback(
+    (scrollDirection, _scrollPos, atEnd) => {
+      const { current: container } = containerRef;
+      const { current: draggedItem } = draggedItemRef;
+      if (container && draggedItem) {
+        measuredDropTargets.current = measureDropTargets(
+          container,
+          orientation,
+          fullItemQuery,
+          rangeRef.current
+        );
+        const { size } = draggedItem;
+        const dragPos = dragPosRef.current;
+        const midPos = dragPos + size / 2;
+        const { current: dropTargets } = measuredDropTargets;
+        const nextDropTarget = getNextDropTarget(
+          dropTargets,
+          midPos,
+          size,
+          "fwd"
+        );
+        if (nextDropTarget) {
+          if (atEnd && scrollDirection === "fwd") {
+            positionDropIndicator(dropTargets[dropTargets.length - 1], "start");
+          } else {
+            positionDropIndicator(nextDropTarget, "start");
+          }
+        }
+      }
+    },
+    [
+      containerRef,
+      positionDropIndicator,
+      fullItemQuery,
+      orientation
+      // setVizData,
+    ]
+  );
+  const beginDrag = useCallback(
+    (dragElement) => {
+      if (dragElement.ariaSelected && Array.isArray(selected) && selected.length > 1) {
+        console.log("its a selected element, and we have a multi select");
+      }
+      const { current: container } = containerRef;
+      if (container && dragElement) {
+        const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
+        const { id: draggedItemId } = dragElement;
+        const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } = container;
+        isScrollable.current = scrollSize > clientSize;
+        const dropTargets = measuredDropTargets.current = measureDropTargets(
+          container,
+          orientation,
+          fullItemQuery,
+          viewportRange
+        );
+        const draggedItem = getItemById(dropTargets, draggedItemId);
+        if (draggedItem && container) {
+          const targetIndex = indexOf(draggedItem);
+          removeDraggedItem(dropTargets, targetIndex);
+          draggedItemRef.current = draggedItem;
+          const { current: range } = rangeRef;
+          if (range?.atEnd) {
+            for (let i = 0; i < dropTargets.length; i++) {
+              reposition(dropTargets[i], draggedItem.size);
+            }
+          }
+          for (let i = targetIndex; i < dropTargets.length; i++) {
+            reposition(dropTargets[i], -draggedItem.size, -1);
+          }
+          const [dropTarget, dropZone2] = draggedItem.isLast ? [dropTargets[dropTargets.length - 1], "end"] : [dropTargets[targetIndex], "start"];
+          dropTargetRef.current = dropTarget;
+          dropZoneRef.current = dropZone2;
+          const dropIndicatorPosition = positionDropIndicator(
+            dropTarget,
+            dropZone2
+          );
+          const { top, left, width } = dropIndicatorPosition.getBoundingClientRect();
+          const dropIndicatorRect = {
+            top: draggedItem.isLast ? range?.atEnd && !range.atStart ? top + draggedItem.size - 2 : top - 2 : top - draggedItem.size - 2,
+            left,
+            width,
+            height: 2
+          };
+          setDropIndicator(
+            /* @__PURE__ */ jsx(
+              Draggable,
+              {
+                wrapperClassName: "dropIndicatorContainer",
+                style: dropIndicatorRect,
+                ref: dropIndicatorRef,
+                element: createDropIndicator()
+              }
+            )
+          );
+        }
+      }
+    },
+    [
+      selected,
+      containerRef,
+      orientation,
+      fullItemQuery,
+      viewportRange,
+      positionDropIndicator
+    ]
+  );
+  const drag = useCallback(
+    (dragPos, mouseMoveDirection) => {
+      const { current: currentDropTarget } = dropTargetRef;
+      const { current: draggedItem } = draggedItemRef;
+      if (draggedItem) {
+        if (containerRef.current) {
+          const START = orientation === "horizontal" ? "left" : "top";
+          dragPosRef.current = dragPos;
+          const { current: dropTargets } = measuredDropTargets;
+          const nextDropTarget = getNextDropTarget(
+            dropTargets,
+            dragPos,
+            draggedItem.size,
+            mouseMoveDirection
+          );
+          if (nextDropTarget && nextDropTarget.index !== currentDropTarget?.index) {
+            if (nextDropTarget.isOverflowIndicator) {
+              setShowOverflow(overflowMenuShowingRef.current = true);
+            } else if (dropIndicatorRef.current) {
+              const targetIndex = indexOf(nextDropTarget);
+              if (targetIndex === dropTargets.length - 1) {
+                const dropTarget = dropTargets[dropTargets.length - 1];
+                const dropIndicatorPosition = positionDropIndicator(
+                  dropTarget,
+                  "start"
+                );
+                const dropIndicatorRect = dropIndicatorPosition.getBoundingClientRect();
+                dropIndicatorRef.current.style[START] = `${dropIndicatorRect.top}px`;
+              } else {
+                const dropIndicatorPosition = positionDropIndicator(
+                  nextDropTarget,
+                  "start"
+                );
+                const dropIndicatorRect = dropIndicatorPosition.getBoundingClientRect();
+                dropIndicatorRef.current.style[START] = `${dropIndicatorRect.top}px`;
+              }
+              setShowOverflow(overflowMenuShowingRef.current = false);
+            }
+            dropTargetRef.current = nextDropTarget;
+            dragDirectionRef.current = mouseMoveDirection;
+          }
+        }
+      }
+    },
+    [containerRef, orientation, positionDropIndicator]
+  );
+  const drop = useCallback(() => {
+    clearSpacer();
+    const { current: draggedItem } = draggedItemRef;
+    const { current: dropTarget } = dropTargetRef;
+    const { current: dropZone2 } = dropZoneRef;
+    const { current: range } = rangeRef;
+    if (draggedItem && range && dropTarget) {
+      const { index: fromIndex } = draggedItem;
+      const dropBefore = dropZone2 === "start";
+      const {
+        index: originalDropTargetIndex,
+        currentIndex: currentDropTargetIndex
+      } = dropTarget;
+      dropTargetRef.current = null;
+      dragDirectionRef.current = void 0;
+      setDropIndicator(void 0);
+      setShowOverflow(false);
+      if (overflowMenuShowingRef.current) {
+        return {
+          fromIndex,
+          toIndex: -1
+        };
+      } else {
+        if (fromIndex < originalDropTargetIndex) {
+          return {
+            fromIndex,
+            toIndex: dropBefore ? currentDropTargetIndex : currentDropTargetIndex + 1
+          };
+        } else {
+          return {
+            fromIndex,
+            toIndex: dropBefore ? originalDropTargetIndex : originalDropTargetIndex + 1
+          };
+        }
+      }
+    } else {
+      throw Error(`useDragDropIndicator drop error`);
+    }
+  }, [clearSpacer]);
+  const releaseDrag = useCallback(() => {
+  }, []);
+  return {
+    beginDrag,
+    drag,
+    drop,
+    dropIndicator,
+    handleScrollStart,
+    handleScrollStop,
+    releaseDrag,
+    revealOverflowedItems: showOverflow
+  };
+};
+
+export { useDragDropIndicator };
+//# sourceMappingURL=useDragDropIndicator.js.map

package/esm/drag-drop/useDragDropIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragDropIndicator.js","sources":["../../src/drag-drop/useDragDropIndicator.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nimport {\n  InternalDragDropProps,\n  InternalDragHookResult,\n  Direction,\n  ViewportRange,\n  DropOptions,\n} from \"./dragDropTypes\";\nimport { useDropIndicator } from \"./useDropIndicator\";\n\nimport {\n  dimensions,\n  getItemById,\n  MeasuredDropTarget,\n  measureDropTargets,\n  getNextDropTarget,\n  dropZone,\n  removeDraggedItem,\n} from \"./drop-target-utils\";\n\nimport { createDropIndicator, Draggable } from \"./Draggable\";\n\nconst NOT_OVERFLOWED = ':not([data-overflowed=\"true\"])';\nconst NOT_HIDDEN = ':not([aria-hidden=\"true\"])';\n\nexport const useDragDropIndicator = ({\n  orientation = \"horizontal\",\n  containerRef,\n  itemQuery = \"*\",\n  selected,\n  viewportRange,\n}: InternalDragDropProps): InternalDragHookResult => {\n  const dragDirectionRef = useRef<Direction | undefined>();\n  const dropIndicatorRef = useRef<HTMLDivElement>(null);\n  const dropTargetRef = useRef<MeasuredDropTarget | null>(null);\n  const dropZoneRef = useRef<dropZone | \"\">(\"\");\n  const isScrollable = useRef(false);\n  /** current position of dragged element */\n  const dragPosRef = useRef<number>(-1);\n  const measuredDropTargets = useRef<MeasuredDropTarget[]>([]);\n  const overflowMenuShowingRef = useRef(false);\n\n  const [showOverflow, setShowOverflow] = useState(false);\n  const [dropIndicator, setDropIndicator] = useState<JSX.Element | undefined>();\n\n  const { clearSpacer, positionDropIndicator } = useDropIndicator();\n\n  const draggedItemRef = useRef<MeasuredDropTarget>();\n  const fullItemQuery = `:is(${itemQuery}${NOT_OVERFLOWED}${NOT_HIDDEN},[data-overflow-indicator])`;\n\n  // const { setMeasurements: setVizData } = useListViz();\n\n  const indexOf = (dropTarget: MeasuredDropTarget) =>\n    measuredDropTargets.current.findIndex((d) => d.id === dropTarget.id);\n\n  const reposition = (\n    dropTarget: MeasuredDropTarget,\n    distance: number,\n    indexShift?: number\n  ) => {\n    dropTarget.start += distance;\n    dropTarget.mid += distance;\n    dropTarget.end += distance;\n    if (typeof indexShift === \"number\") {\n      dropTarget.currentIndex += indexShift;\n    }\n  };\n\n  // Shouldn't need this - but viewportRange is always stale in stopScrolling. Checked all dependencies\n  // look ok. Something to do with setTimeout / scrollHandler ?\n  const rangeRef = useRef<ViewportRange>();\n  rangeRef.current = viewportRange;\n\n  const handleScrollStart = useCallback(() => {\n    clearSpacer();\n  }, [clearSpacer]);\n\n  const handleScrollStop = useCallback(\n    (scrollDirection: \"fwd\" | \"bwd\", _scrollPos: number, atEnd: boolean) => {\n      const { current: container } = containerRef;\n      const { current: draggedItem } = draggedItemRef;\n      if (container && draggedItem) {\n        measuredDropTargets.current = measureDropTargets(\n          container,\n          orientation,\n          fullItemQuery,\n          rangeRef.current\n        );\n        // setVizData(measuredDropTargets.current);\n\n        const { size } = draggedItem;\n        const dragPos = dragPosRef.current;\n        const midPos = dragPos + size / 2;\n        const { current: dropTargets } = measuredDropTargets;\n        const nextDropTarget = getNextDropTarget(\n          dropTargets,\n          midPos,\n          size,\n          \"fwd\"\n        );\n        if (nextDropTarget) {\n          if (atEnd && scrollDirection === \"fwd\") {\n            positionDropIndicator(dropTargets[dropTargets.length - 1], \"start\");\n          } else {\n            positionDropIndicator(nextDropTarget, \"start\");\n          }\n        }\n\n        // setVizData(measuredDropTargets.current, nextDropTarget);\n      }\n    },\n    [\n      containerRef,\n      positionDropIndicator,\n      fullItemQuery,\n      orientation,\n      // setVizData,\n    ]\n  );\n\n  const beginDrag = useCallback(\n    (dragElement: HTMLElement) => {\n      if (\n        dragElement.ariaSelected &&\n        Array.isArray(selected) &&\n        selected.length > 1\n      ) {\n        console.log(\"its a selected element, and we have a multi select\");\n      }\n      const { current: container } = containerRef;\n      if (container && dragElement) {\n        const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);\n        const { id: draggedItemId } = dragElement;\n\n        const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } =\n          container;\n        isScrollable.current = scrollSize > clientSize;\n\n        const dropTargets = (measuredDropTargets.current = measureDropTargets(\n          container,\n          orientation,\n          fullItemQuery,\n          viewportRange\n        ));\n\n        const draggedItem = getItemById(dropTargets, draggedItemId);\n\n        if (draggedItem && container) {\n          const targetIndex = indexOf(draggedItem);\n          removeDraggedItem(dropTargets, targetIndex);\n          draggedItemRef.current = draggedItem;\n\n          // This begins to deviate from NaturalMovement here -----------\n          const { current: range } = rangeRef;\n          //TODO when our viewport is the last 'page' of a scrolling viewport\n          // the viewport will scoll up by one row when we remove an item, so\n          // the position of each item will move down.\n          if (range?.atEnd) {\n            for (let i = 0; i < dropTargets.length; i++) {\n              reposition(dropTargets[i], draggedItem.size);\n            }\n          }\n          for (let i = targetIndex; i < dropTargets.length; i++) {\n            reposition(dropTargets[i], -draggedItem.size, -1);\n          }\n\n          const [dropTarget, dropZone] = draggedItem.isLast\n            ? [dropTargets[dropTargets.length - 1], \"end\"]\n            : [dropTargets[targetIndex], \"start\"];\n\n          dropTargetRef.current = dropTarget;\n          dropZoneRef.current = dropZone as dropZone;\n\n          // setVizData(dropTargets, dropTarget, dropZone);\n\n          const dropIndicatorPosition = positionDropIndicator(\n            dropTarget,\n            dropZone as dropZone\n          );\n\n          const { top, left, width } =\n            dropIndicatorPosition.getBoundingClientRect();\n          // Next render will remove the dragged item, that will offset our initial\n          // dropIndicatorPosition\n          const dropIndicatorRect = {\n            top: draggedItem.isLast\n              ? range?.atEnd && !range.atStart\n                ? top + draggedItem.size - 2\n                : top - 2\n              : top - draggedItem.size - 2,\n            left,\n            width,\n            height: 2,\n          };\n\n          setDropIndicator(\n            <Draggable\n              wrapperClassName=\"dropIndicatorContainer\"\n              style={dropIndicatorRect}\n              ref={dropIndicatorRef}\n              element={createDropIndicator()}\n            />\n          );\n        }\n      }\n    },\n    [\n      selected,\n      containerRef,\n      orientation,\n      fullItemQuery,\n      viewportRange,\n      positionDropIndicator,\n    ]\n  );\n\n  const drag = useCallback(\n    (dragPos: number, mouseMoveDirection: \"fwd\" | \"bwd\") => {\n      const { current: currentDropTarget } = dropTargetRef;\n      const { current: draggedItem } = draggedItemRef;\n\n      if (draggedItem) {\n        if (containerRef.current) {\n          const START = orientation === \"horizontal\" ? \"left\" : \"top\";\n          dragPosRef.current = dragPos;\n\n          const { current: dropTargets } = measuredDropTargets;\n          const nextDropTarget = getNextDropTarget(\n            dropTargets,\n            dragPos,\n            draggedItem.size,\n            mouseMoveDirection\n          );\n\n          if (\n            nextDropTarget &&\n            nextDropTarget.index !== currentDropTarget?.index\n            // mouseMoveDirection !== dragDirectionRef.current\n          ) {\n            if (nextDropTarget.isOverflowIndicator) {\n              // Does this belong in here or can we abstract it out\n              setShowOverflow((overflowMenuShowingRef.current = true));\n            } else if (dropIndicatorRef.current) {\n              const targetIndex = indexOf(nextDropTarget);\n              if (targetIndex === dropTargets.length - 1) {\n                // because we maintain at least one out-of-viewport row in\n                // the dropTargets, this means we are at the very last item.\n                const dropTarget = dropTargets[dropTargets.length - 1];\n                const dropIndicatorPosition = positionDropIndicator(\n                  dropTarget,\n                  \"start\"\n                );\n                const dropIndicatorRect =\n                  dropIndicatorPosition.getBoundingClientRect();\n                dropIndicatorRef.current.style[\n                  START\n                ] = `${dropIndicatorRect.top}px`;\n              } else {\n                const dropIndicatorPosition = positionDropIndicator(\n                  nextDropTarget,\n                  \"start\"\n                ) as unknown as HTMLElement;\n                const dropIndicatorRect =\n                  dropIndicatorPosition.getBoundingClientRect();\n                dropIndicatorRef.current.style[\n                  START\n                ] = `${dropIndicatorRect.top}px`;\n              }\n              // setVizData(dropTargets, nextDropTarget, nextDropZone);\n\n              setShowOverflow((overflowMenuShowingRef.current = false));\n            }\n\n            dropTargetRef.current = nextDropTarget;\n            dragDirectionRef.current = mouseMoveDirection;\n          }\n        }\n      }\n    },\n    [containerRef, orientation, positionDropIndicator]\n  );\n\n  const drop = useCallback((): DropOptions => {\n    clearSpacer();\n    const { current: draggedItem } = draggedItemRef;\n    const { current: dropTarget } = dropTargetRef;\n    const { current: dropZone } = dropZoneRef;\n    const { current: range } = rangeRef;\n\n    if (draggedItem && range && dropTarget) {\n      const { index: fromIndex } = draggedItem;\n\n      const dropBefore = dropZone === \"start\";\n      const {\n        index: originalDropTargetIndex,\n        currentIndex: currentDropTargetIndex,\n      } = dropTarget;\n\n      dropTargetRef.current = null;\n      dragDirectionRef.current = undefined;\n\n      setDropIndicator(undefined);\n      setShowOverflow(false);\n\n      //TODO why is this different from Natural Movement ?\n      if (overflowMenuShowingRef.current) {\n        return {\n          fromIndex,\n          toIndex: -1,\n        };\n      } else {\n        if (fromIndex < originalDropTargetIndex) {\n          return {\n            fromIndex,\n            toIndex: dropBefore\n              ? currentDropTargetIndex\n              : currentDropTargetIndex + 1,\n          };\n        } else {\n          return {\n            fromIndex,\n            toIndex: dropBefore\n              ? originalDropTargetIndex\n              : originalDropTargetIndex + 1,\n          };\n        }\n      }\n    } else {\n      throw Error(`useDragDropIndicator drop error`);\n    }\n  }, [clearSpacer]);\n\n  const releaseDrag = useCallback(() => {\n    // TODO\n  }, []);\n\n  return {\n    beginDrag,\n    drag,\n    drop,\n    dropIndicator,\n    handleScrollStart,\n    handleScrollStop,\n    releaseDrag,\n    revealOverflowedItems: showOverflow,\n  };\n};\n"],"names":["dropZone"],"mappings":"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"}

package/esm/drag-drop/useDragDropNaturalMovement.js

@@ -0,0 +1,262 @@
+import { useRef, useState, useCallback, useMemo } from 'react';
+import { useDragDisplacers } from './useDragDisplacers.js';
+import { dispatchMouseEvent } from '@vuu-ui/vuu-utils';
+import { getItemParentContainer, measureDropTargets, getIndexOfDraggedItem, getNextDropTarget, NOT_OVERFLOWED, NOT_HIDDEN, dimensions } from './drop-target-utils.js';
+
+const useDragDropNaturalMovement = ({
+  containerRef,
+  orientation = "horizontal",
+  itemQuery = "*",
+  selected,
+  viewportRange
+}) => {
+  const dragPositionRef = useRef({
+    direction: void 0,
+    insertionPosition: -1
+  });
+  const isScrollable = useRef(false);
+  const dragPosRef = useRef(-1);
+  const measuredDropTargets = useRef([]);
+  const overflowMenuShowingRef = useRef(false);
+  const [showOverflow, setShowOverflow] = useState(false);
+  const { clearSpacers, displaceItem, displaceLastItem, setTerminalSpacer } = useDragDisplacers(orientation);
+  const draggedItemRef = useRef();
+  const fullItemQuery = `:is(${itemQuery}${NOT_OVERFLOWED}${NOT_HIDDEN},.vuuOverflowContainer-OverflowIndicator)`;
+  const indexOf = (dropTarget) => measuredDropTargets.current.findIndex((d) => d.id === dropTarget.id);
+  const rangeRef = useRef();
+  rangeRef.current = viewportRange;
+  const handleScrollStart = useCallback(
+    (scrollDirection) => {
+      const itemContainer = getItemParentContainer(
+        containerRef.current,
+        itemQuery
+      );
+      const { current: draggedItem } = draggedItemRef;
+      if (itemContainer && draggedItem) {
+        setTerminalSpacer(
+          itemContainer,
+          scrollDirection === "fwd" ? "end" : "start",
+          draggedItem.size
+        );
+      }
+    },
+    [containerRef, itemQuery, setTerminalSpacer]
+  );
+  const handleScrollStop = useCallback(
+    (scrollDirection) => {
+      const { current: container } = containerRef;
+      const { current: draggedItem } = draggedItemRef;
+      const { current: dragPosition } = dragPositionRef;
+      if (container && draggedItem) {
+        const dropTargets = measuredDropTargets.current = measureDropTargets(
+          container,
+          orientation,
+          fullItemQuery,
+          rangeRef.current
+        );
+        const dropTargetAtBoundary = scrollDirection === "fwd" ? dropTargets.at(-1) : dropTargets.at(0);
+        if (dropTargetAtBoundary) {
+          const { mid, end, size, start } = dropTargetAtBoundary;
+          if (scrollDirection === "fwd") {
+            const draggedDropTarget = {
+              ...draggedItem,
+              start: Math.round(start + size),
+              mid: Math.round(mid + size),
+              end: Math.round(end + size)
+            };
+            dropTargets.push(draggedDropTarget);
+            dragPosition.insertionPosition = dropTargetAtBoundary.index + 1;
+          } else {
+            const draggedDropTarget = {
+              ...draggedItem,
+              start: Math.round(start - size),
+              mid: Math.round(mid - size),
+              end: Math.round(end - size)
+            };
+            dropTargets.unshift(draggedDropTarget);
+            dragPosition.insertionPosition = 0;
+          }
+        }
+      }
+    },
+    [containerRef, fullItemQuery, orientation]
+  );
+  const beginDrag = useCallback(
+    (dragElement) => {
+      if (
+        //TODO need a different check for selected
+        dragElement.ariaSelected && Array.isArray(selected) && selected.length > 1
+      ) {
+        console.log("its a selected element, and we have a multi select");
+      }
+      const { current: container } = containerRef;
+      const { current: dragPosition } = dragPositionRef;
+      if (container && dragElement) {
+        const internalDrag = container.contains(dragElement);
+        const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
+        const { id: draggedItemId } = dragElement;
+        const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } = container;
+        isScrollable.current = scrollSize > clientSize;
+        const dropTargets = measuredDropTargets.current = measureDropTargets(
+          container,
+          orientation,
+          fullItemQuery,
+          viewportRange,
+          draggedItemId
+        );
+        if (internalDrag) {
+          const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
+          const draggedItem = dropTargets[indexOfDraggedItem];
+          if (draggedItem && container) {
+            draggedItemRef.current = draggedItem;
+            const displaceFunction = draggedItem.isLast ? displaceLastItem : displaceItem;
+            dragPosition.insertionPosition = displaceFunction(
+              dropTargets,
+              draggedItem,
+              draggedItem.size,
+              false,
+              "static"
+            );
+          }
+        } else {
+          const { top: dragPos, height: size } = dragElement.getBoundingClientRect();
+          const dropTarget = getNextDropTarget(dropTargets, dragPos, size, "fwd");
+          const index = dropTargets.indexOf(dropTarget);
+          const { start, end, mid } = dropTarget;
+          const draggedItem = draggedItemRef.current = {
+            end,
+            mid,
+            start,
+            isDraggedItem: true,
+            isExternal: true,
+            size
+          };
+          const indexOfDropTarget = dropTargets.indexOf(dropTarget);
+          dropTargets.splice(indexOfDropTarget, 0, draggedItem);
+          for (let i = index + 1; i < dropTargets.length; i++) {
+            const target = dropTargets[i];
+            target.mid += size;
+            target.end += size;
+            target.start += size;
+          }
+          const displaceFunction = dropTarget.isLast ? displaceLastItem : displaceItem;
+          displaceFunction(
+            dropTargets,
+            dropTarget,
+            dropTarget.size,
+            true,
+            "static"
+          );
+        }
+      }
+    },
+    [
+      containerRef,
+      displaceItem,
+      displaceLastItem,
+      fullItemQuery,
+      orientation,
+      selected,
+      viewportRange
+    ]
+  );
+  const [showPopup, hidePopup] = useMemo(() => {
+    let popupShowing = false;
+    const show = (dropTarget) => {
+      if (!popupShowing) {
+        popupShowing = true;
+        const button = dropTarget.element.querySelector(
+          ".vuuPopupMenu"
+        );
+        if (button) {
+          dispatchMouseEvent(button, "click");
+        }
+      }
+    };
+    const hide = (dropTarget) => {
+      if (popupShowing) {
+        popupShowing = false;
+        const button = dropTarget.element.querySelector(
+          ".vuuPopupMenu"
+        );
+        if (button) {
+          dispatchMouseEvent(button, "click");
+        }
+      }
+    };
+    return [show, hide];
+  }, []);
+  const drag = useCallback(
+    (dragPos, mouseMoveDirection) => {
+      const { current: draggedItem } = draggedItemRef;
+      const { current: dragPosition } = dragPositionRef;
+      if (draggedItem) {
+        if (containerRef.current) {
+          dragPosRef.current = dragPos;
+          const { current: dropTargets } = measuredDropTargets;
+          const nextDropTarget = getNextDropTarget(
+            dropTargets,
+            dragPos,
+            draggedItem.size,
+            mouseMoveDirection
+          );
+          if (nextDropTarget && !nextDropTarget.isDraggedItem) {
+            if (nextDropTarget.isOverflowIndicator) {
+              setShowOverflow(overflowMenuShowingRef.current = true);
+              showPopup(nextDropTarget);
+            } else {
+              const { size } = draggedItem;
+              const targetIndex = indexOf(nextDropTarget);
+              const displaceFunc = targetIndex === dropTargets.length - 1 ? displaceLastItem : displaceItem;
+              dragPosition.insertionPosition = displaceFunc(
+                dropTargets,
+                nextDropTarget,
+                size,
+                true,
+                mouseMoveDirection
+              );
+              const overflowIndicator = dropTargets.at(
+                -1
+              );
+              hidePopup(overflowIndicator);
+              setShowOverflow(overflowMenuShowingRef.current = false);
+            }
+          }
+          dragPosition.direction = mouseMoveDirection;
+        }
+      }
+    },
+    [containerRef, displaceItem, displaceLastItem, hidePopup, showPopup]
+  );
+  const drop = useCallback(() => {
+    clearSpacers();
+    const { current: dropTargets } = measuredDropTargets;
+    const { current: dragPosition } = dragPositionRef;
+    const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
+    const draggedItem = dropTargets[indexOfDraggedItem];
+    const { insertionPosition } = dragPosition;
+    const { index: fromIndex, isExternal } = draggedItem;
+    if (overflowMenuShowingRef.current) {
+      setShowOverflow(false);
+    }
+    dragPosition.direction = void 0;
+    dragPosition.insertionPosition = -1;
+    const toIndex = overflowMenuShowingRef.current ? -1 : fromIndex < insertionPosition ? insertionPosition - 1 : insertionPosition;
+    return { fromIndex, toIndex, isExternal };
+  }, [clearSpacers]);
+  const releaseDrag = useCallback(() => {
+    clearSpacers(true);
+  }, [clearSpacers]);
+  return {
+    beginDrag,
+    drag,
+    drop,
+    handleScrollStart,
+    handleScrollStop,
+    releaseDrag,
+    revealOverflowedItems: showOverflow
+  };
+};
+
+export { useDragDropNaturalMovement };
+//# sourceMappingURL=useDragDropNaturalMovement.js.map

package/esm/drag-drop/useDragDropNaturalMovement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragDropNaturalMovement.js","sources":["../../src/drag-drop/useDragDropNaturalMovement.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from \"react\";\n\nimport {\n  Direction,\n  DropOptions,\n  InternalDragDropProps,\n  InternalDragHookResult,\n  ViewportRange,\n} from \"./dragDropTypes\";\nimport { useDragDisplacers } from \"./useDragDisplacers\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport {\n  dimensions,\n  getIndexOfDraggedItem,\n  getItemParentContainer,\n  getNextDropTarget,\n  MeasuredDropTarget,\n  measureDropTargets,\n  NOT_HIDDEN,\n  NOT_OVERFLOWED,\n} from \"./drop-target-utils\";\n\ntype DragPosition = {\n  direction?: Direction;\n  insertionPosition: number;\n};\n\nexport const useDragDropNaturalMovement = ({\n  containerRef,\n  orientation = \"horizontal\",\n  itemQuery = \"*\",\n  selected,\n  viewportRange,\n}: InternalDragDropProps): InternalDragHookResult => {\n  const dragPositionRef = useRef<DragPosition>({\n    direction: undefined,\n    insertionPosition: -1,\n  });\n  const isScrollable = useRef(false);\n  /** current position of dragged element */\n  const dragPosRef = useRef<number>(-1);\n  const measuredDropTargets = useRef<MeasuredDropTarget[]>([]);\n  const overflowMenuShowingRef = useRef(false);\n\n  const [showOverflow, setShowOverflow] = useState(false);\n\n  const { clearSpacers, displaceItem, displaceLastItem, setTerminalSpacer } =\n    useDragDisplacers(orientation);\n\n  const draggedItemRef = useRef<MeasuredDropTarget>();\n  const fullItemQuery = `:is(${itemQuery}${NOT_OVERFLOWED}${NOT_HIDDEN},.vuuOverflowContainer-OverflowIndicator)`;\n\n  const indexOf = (dropTarget: MeasuredDropTarget) =>\n    measuredDropTargets.current.findIndex((d) => d.id === dropTarget.id);\n\n  // Shouldn't need this - but viewportRange is always stale in stopScrolling. Checked all dependencies\n  // look ok. Something to do with setTimeout / scrollHandler ?\n  const rangeRef = useRef<ViewportRange>();\n  rangeRef.current = viewportRange;\n\n  const handleScrollStart = useCallback(\n    (scrollDirection: \"fwd\" | \"bwd\") => {\n      const itemContainer = getItemParentContainer(\n        containerRef.current,\n        itemQuery\n      );\n      const { current: draggedItem } = draggedItemRef;\n\n      // When we start scrolling, insert a spacer at the start of end of the collection.\n      // This is what we will need if user scrolls right to end and it will give the correct\n      // scrollHeight. Ig user stops scrolling before start/end we will reposition the\n      // spacer(s) appropriately\n      if (itemContainer && draggedItem) {\n        setTerminalSpacer(\n          itemContainer,\n          scrollDirection === \"fwd\" ? \"end\" : \"start\",\n          draggedItem.size\n        );\n      }\n    },\n    [containerRef, itemQuery, setTerminalSpacer]\n  );\n\n  const handleScrollStop = useCallback(\n    (scrollDirection: \"fwd\" | \"bwd\") => {\n      const { current: container } = containerRef;\n      const { current: draggedItem } = draggedItemRef;\n      const { current: dragPosition } = dragPositionRef;\n      if (container && draggedItem) {\n        const dropTargets = (measuredDropTargets.current = measureDropTargets(\n          container,\n          orientation,\n          fullItemQuery,\n          rangeRef.current\n        ));\n\n        const dropTargetAtBoundary =\n          scrollDirection === \"fwd\" ? dropTargets.at(-1) : dropTargets.at(0);\n\n        if (dropTargetAtBoundary) {\n          const { mid, end, size, start } = dropTargetAtBoundary;\n          if (scrollDirection === \"fwd\") {\n            const draggedDropTarget = {\n              ...draggedItem,\n              start: Math.round(start + size),\n              mid: Math.round(mid + size),\n              end: Math.round(end + size),\n            };\n            dropTargets.push(draggedDropTarget);\n            dragPosition.insertionPosition = dropTargetAtBoundary.index + 1;\n          } else {\n            const draggedDropTarget = {\n              ...draggedItem,\n              start: Math.round(start - size),\n              mid: Math.round(mid - size),\n              end: Math.round(end - size),\n            };\n            dropTargets.unshift(draggedDropTarget);\n            dragPosition.insertionPosition = 0;\n          }\n        }\n      }\n    },\n    [containerRef, fullItemQuery, orientation]\n  );\n\n  const beginDrag = useCallback(\n    (dragElement: HTMLElement) => {\n      if (\n        //TODO need a different check for selected\n        dragElement.ariaSelected &&\n        Array.isArray(selected) &&\n        selected.length > 1\n      ) {\n        console.log(\"its a selected element, and we have a multi select\");\n      }\n      const { current: container } = containerRef;\n      const { current: dragPosition } = dragPositionRef;\n\n      if (container && dragElement) {\n        const internalDrag = container.contains(dragElement);\n        const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);\n        const { id: draggedItemId } = dragElement;\n        const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } =\n          container;\n        isScrollable.current = scrollSize > clientSize;\n        const dropTargets = (measuredDropTargets.current = measureDropTargets(\n          container,\n          orientation,\n          fullItemQuery,\n          viewportRange,\n          draggedItemId\n        ));\n\n        if (internalDrag) {\n          const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);\n          const draggedItem = dropTargets[indexOfDraggedItem];\n          if (draggedItem && container) {\n            draggedItemRef.current = draggedItem;\n            const displaceFunction = draggedItem.isLast\n              ? displaceLastItem\n              : displaceItem;\n\n            // This should return the insertion position of dragged item\n            // which depends on both dro[Target and direction]\n            dragPosition.insertionPosition = displaceFunction(\n              dropTargets,\n              draggedItem,\n              draggedItem.size,\n              false,\n              \"static\"\n            );\n          }\n        } else {\n          // prettier-ignore\n          const { top: dragPos, height: size } = dragElement.getBoundingClientRect();\n          // prettier-ignore\n          const dropTarget = getNextDropTarget( dropTargets, dragPos, size, \"fwd\");\n          const index = dropTargets.indexOf(dropTarget);\n          const { start, end, mid } = dropTarget;\n\n          // need to compute the correct position of this\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          const draggedItem = (draggedItemRef.current = {\n            end,\n            mid,\n            start,\n            isDraggedItem: true,\n            isExternal: true,\n            size,\n          });\n\n          const indexOfDropTarget = dropTargets.indexOf(dropTarget);\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          dropTargets.splice(indexOfDropTarget, 0, draggedItem);\n          for (let i = index + 1; i < dropTargets.length; i++) {\n            const target = dropTargets[i];\n            target.mid += size;\n            target.end += size;\n            target.start += size;\n          }\n\n          const displaceFunction = dropTarget.isLast\n            ? displaceLastItem\n            : displaceItem;\n\n          displaceFunction(\n            dropTargets,\n            dropTarget,\n            dropTarget.size,\n            true,\n            \"static\"\n          );\n        }\n      }\n    },\n    [\n      containerRef,\n      displaceItem,\n      displaceLastItem,\n      fullItemQuery,\n      orientation,\n      selected,\n      viewportRange,\n    ]\n  );\n\n  const [showPopup, hidePopup] = useMemo(() => {\n    let popupShowing = false;\n    const show = (dropTarget: MeasuredDropTarget) => {\n      if (!popupShowing) {\n        popupShowing = true;\n        const button = dropTarget.element.querySelector(\n          \".vuuPopupMenu\"\n        ) as HTMLElement;\n        if (button) {\n          dispatchMouseEvent(button, \"click\");\n        }\n      }\n    };\n\n    const hide = (dropTarget: MeasuredDropTarget) => {\n      if (popupShowing) {\n        popupShowing = false;\n        const button = dropTarget.element.querySelector(\n          \".vuuPopupMenu\"\n        ) as HTMLElement;\n        if (button) {\n          dispatchMouseEvent(button, \"click\");\n        }\n      }\n    };\n\n    return [show, hide];\n  }, []);\n\n  const drag = useCallback(\n    (dragPos: number, mouseMoveDirection: \"fwd\" | \"bwd\") => {\n      const { current: draggedItem } = draggedItemRef;\n      const { current: dragPosition } = dragPositionRef;\n\n      if (draggedItem) {\n        if (containerRef.current) {\n          dragPosRef.current = dragPos;\n\n          const { current: dropTargets } = measuredDropTargets;\n          const nextDropTarget = getNextDropTarget(\n            dropTargets,\n            dragPos,\n            draggedItem.size,\n            mouseMoveDirection\n          );\n\n          if (nextDropTarget && !nextDropTarget.isDraggedItem) {\n            if (nextDropTarget.isOverflowIndicator) {\n              // Does this belong in here or can we abstract it out\n              setShowOverflow((overflowMenuShowingRef.current = true));\n              showPopup(nextDropTarget);\n            } else {\n              const { size } = draggedItem;\n              const targetIndex = indexOf(nextDropTarget);\n\n              const displaceFunc =\n                targetIndex === dropTargets.length - 1\n                  ? displaceLastItem\n                  : displaceItem;\n\n              dragPosition.insertionPosition = displaceFunc(\n                dropTargets,\n                nextDropTarget,\n                size,\n                true,\n                mouseMoveDirection\n              );\n\n              const overflowIndicator = dropTargets.at(\n                -1\n              ) as MeasuredDropTarget;\n              hidePopup(overflowIndicator);\n              setShowOverflow((overflowMenuShowingRef.current = false));\n            }\n          }\n          dragPosition.direction = mouseMoveDirection;\n        }\n      }\n    },\n    [containerRef, displaceItem, displaceLastItem, hidePopup, showPopup]\n  );\n\n  const drop = useCallback((): DropOptions => {\n    clearSpacers();\n    const { current: dropTargets } = measuredDropTargets;\n    const { current: dragPosition } = dragPositionRef;\n    const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);\n    const draggedItem = dropTargets[indexOfDraggedItem];\n    const { insertionPosition } = dragPosition;\n    const { index: fromIndex, isExternal } = draggedItem;\n\n    if (overflowMenuShowingRef.current) {\n      setShowOverflow(false);\n    }\n\n    dragPosition.direction = undefined;\n    dragPosition.insertionPosition = -1;\n\n    const toIndex = overflowMenuShowingRef.current\n      ? -1\n      : fromIndex < insertionPosition\n      ? insertionPosition - 1\n      : insertionPosition;\n\n    return { fromIndex, toIndex, isExternal };\n  }, [clearSpacers]);\n\n  const releaseDrag = useCallback(() => {\n    clearSpacers(true);\n  }, [clearSpacers]);\n\n  return {\n    beginDrag,\n    drag,\n    drop,\n    handleScrollStart,\n    handleScrollStop,\n    releaseDrag,\n    revealOverflowedItems: showOverflow,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/drag-drop/useDropIndicator.js

@@ -0,0 +1,25 @@
+import { useMemo, useCallback } from 'react';
+import { createDropIndicatorPosition } from './Draggable.js';
+
+const useDropIndicator = () => {
+  const spacer = useMemo(() => createDropIndicatorPosition(), []);
+  const clearSpacer = useCallback(() => spacer.remove(), [spacer]);
+  const positionDropIndicator = useCallback(
+    (dropTarget, dropZone2 = "end") => {
+      if (dropZone2 === "end") {
+        dropTarget.element.after(spacer);
+      } else {
+        dropTarget.element.before(spacer);
+      }
+      return spacer;
+    },
+    [spacer]
+  );
+  return {
+    positionDropIndicator,
+    clearSpacer
+  };
+};
+
+export { useDropIndicator };
+//# sourceMappingURL=useDropIndicator.js.map

package/esm/drag-drop/useDropIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropIndicator.js","sources":["../../src/drag-drop/useDropIndicator.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { dropZone, MeasuredDropTarget } from \"./drop-target-utils\";\nimport { createDropIndicatorPosition } from \"./Draggable\";\n\nexport const SPACER_SIZE = 0;\n\nexport type DropIndicatorHookResult = {\n  positionDropIndicator: (\n    dropTarget: MeasuredDropTarget,\n    dropZone: dropZone\n  ) => HTMLElement;\n  clearSpacer: () => void;\n};\n\nexport type DropIndicatorHook = () => DropIndicatorHookResult;\n\nexport const useDropIndicator: DropIndicatorHook = () => {\n  const spacer = useMemo(() => createDropIndicatorPosition(), []);\n  const clearSpacer = useCallback(() => spacer.remove(), [spacer]);\n  const positionDropIndicator = useCallback(\n    (dropTarget: MeasuredDropTarget, dropZone: \"start\" | \"end\" = \"end\") => {\n      if (dropZone === \"end\") {\n        dropTarget.element.after(spacer);\n      } else {\n        dropTarget.element.before(spacer);\n      }\n      return spacer;\n    },\n    [spacer]\n  );\n\n  return {\n    positionDropIndicator,\n    clearSpacer,\n  };\n};\n"],"names":["dropZone"],"mappings":";;;AAgBO,MAAM,mBAAsC,MAAM;AACvD,EAAA,MAAM,SAAS,OAAQ,CAAA,MAAM,2BAA4B,EAAA,EAAG,EAAE,CAAA,CAAA;AAC9D,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM,MAAA,CAAO,QAAU,EAAA,CAAC,MAAM,CAAC,CAAA,CAAA;AAC/D,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,UAAgCA,EAAAA,SAAAA,GAA4B,KAAU,KAAA;AACrE,MAAA,IAAIA,cAAa,KAAO,EAAA;AACtB,QAAW,UAAA,CAAA,OAAA,CAAQ,MAAM,MAAM,CAAA,CAAA;AAAA,OAC1B,MAAA;AACL,QAAW,UAAA,CAAA,OAAA,CAAQ,OAAO,MAAM,CAAA,CAAA;AAAA,OAClC;AACA,MAAO,OAAA,MAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,qBAAA;AAAA,IACA,WAAA;AAAA,GACF,CAAA;AACF;;;;"}