@vuu-ui/vuu-ui-controls 0.0.26

package/cjs/drag-drop/drop-target-utils.js

@@ -0,0 +1,245 @@
+'use strict';
+
+const LEFT_RIGHT = ["left", "right"];
+const TOP_BOTTOM = ["top", "bottom"];
+const NOT_OVERFLOWED = ":not(.wrapped)";
+const NOT_HIDDEN = ':not([aria-hidden="true"])';
+const cloneElement = (element) => {
+  const dolly = element.cloneNode(true);
+  dolly.removeAttribute("id");
+  dolly.dataset.index = "-1";
+  return dolly;
+};
+const measureElementSizeAndPosition = (element, dimension = "width", includeAutoMargin = false) => {
+  const pos = dimension === "width" ? "left" : "top";
+  const { [dimension]: size, [pos]: position } = element.getBoundingClientRect();
+  const { padEnd = false, padStart = false } = element.dataset;
+  const style = getComputedStyle(element);
+  const [start, end] = dimension === "width" ? LEFT_RIGHT : TOP_BOTTOM;
+  const marginStart = padStart && !includeAutoMargin ? 0 : parseInt(style.getPropertyValue(`margin-${start}`), 10);
+  const marginEnd = padEnd && !includeAutoMargin ? 0 : parseInt(style.getPropertyValue(`margin-${end}`), 10);
+  let minWidth = size;
+  const flexShrink = parseInt(style.getPropertyValue("flex-shrink"), 10);
+  if (flexShrink > 0) {
+    const flexBasis = parseInt(style.getPropertyValue("flex-basis"), 10);
+    if (!isNaN(flexBasis) && flexBasis > 0) {
+      minWidth = flexBasis;
+    }
+  }
+  return [position, marginStart + minWidth + marginEnd];
+};
+const DIMENSIONS = {
+  horizontal: {
+    CLIENT_POS: "clientX",
+    CLIENT_SIZE: "clientWidth",
+    CONTRA: "top",
+    CONTRA_CLIENT_POS: "clientY",
+    CONTRA_END: "bottom",
+    CONTRA_POS: "y",
+    DIMENSION: "width",
+    END: "right",
+    POS: "x",
+    SCROLL_POS: "scrollLeft",
+    SCROLL_SIZE: "scrollWidth",
+    START: "left"
+  },
+  vertical: {
+    CLIENT_POS: "clientY",
+    CLIENT_SIZE: "clientHeight",
+    CONTRA: "left",
+    CONTRA_CLIENT_POS: "clientX",
+    CONTRA_END: "right",
+    CONTRA_POS: "x",
+    DIMENSION: "height",
+    END: "bottom",
+    POS: "y",
+    SCROLL_POS: "scrollTop",
+    SCROLL_SIZE: "scrollHeight",
+    START: "top"
+  }
+};
+const dimensions = (orientation) => DIMENSIONS[orientation];
+const getItemById = (measuredItems, id) => {
+  const result = measuredItems.find((item) => item.id === id);
+  if (result) {
+    return result;
+  }
+};
+const removeDraggedItem = (measuredItems, index) => {
+  measuredItems.splice(index, 1);
+  for (let i = index; i < measuredItems.length; i++) {
+    measuredItems[i].currentIndex -= 1;
+  }
+};
+const measureDropTargets = (container, orientation, itemQuery, viewportRange, draggedItemId) => {
+  const dragThresholds = [];
+  const { DIMENSION } = dimensions(orientation);
+  const children = Array.from(
+    itemQuery ? container.querySelectorAll(itemQuery) : container.children
+  );
+  const itemCount = children.length;
+  const start = typeof viewportRange?.from === "number" ? viewportRange.atEnd ? Math.max(0, viewportRange.from - 1) : viewportRange.from : 0;
+  const end = typeof viewportRange?.to === "number" ? Math.min(viewportRange.to + 2, itemCount - 1) : itemCount - 1;
+  for (let index = start; index <= end; index++) {
+    const element = children[index];
+    const [start2, size] = measureElementSizeAndPosition(element, DIMENSION);
+    const isLast = index === itemCount - 1;
+    const id = element.id;
+    dragThresholds.push({
+      currentIndex: index,
+      id,
+      index,
+      isDraggedItem: draggedItemId === id,
+      isLast,
+      isOverflowIndicator: element.dataset.index === "overflow",
+      element,
+      start: start2,
+      end: start2 + size,
+      size,
+      mid: start2 + size / 2
+    });
+  }
+  return dragThresholds;
+};
+const getIndexOfDraggedItem = (dropTargets) => dropTargets.findIndex((d) => d.isDraggedItem);
+const mutateDropTargetsSwitchDropTargetPosition = (dropTargets, direction) => {
+  const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
+  const indexOfTarget = direction === "fwd" ? indexOfDraggedItem + 1 : indexOfDraggedItem - 1;
+  if (indexOfTarget < 0 || indexOfTarget >= dropTargets.length) {
+    throw Error("switchDropTargetPosition index out of range");
+  }
+  const draggedItem = dropTargets.at(indexOfDraggedItem);
+  const targetItem = dropTargets.at(indexOfTarget);
+  const diff = targetItem.size - draggedItem.size;
+  if (direction === "fwd") {
+    const draggedStart = targetItem.start + diff;
+    const draggedEnd = targetItem.end;
+    const newDraggedItem = {
+      ...draggedItem,
+      start: draggedStart,
+      mid: Math.floor(draggedStart + (draggedEnd - draggedStart) / 2),
+      end: draggedEnd
+    };
+    const targetStart = draggedItem.start;
+    const targetEnd = draggedItem.end + diff;
+    const newTargetItem = {
+      ...targetItem,
+      start: targetStart,
+      mid: Math.floor(targetStart + (targetEnd - targetStart) / 2),
+      end: targetEnd
+    };
+    dropTargets.splice(indexOfDraggedItem, 2, newTargetItem, newDraggedItem);
+  } else {
+    const draggedStart = targetItem.start;
+    const draggedEnd = targetItem.end - diff;
+    const newDraggedItem = {
+      ...draggedItem,
+      start: draggedStart,
+      mid: Math.floor(draggedStart + (draggedEnd - draggedStart) / 2),
+      end: draggedEnd
+    };
+    const targetStart = draggedItem.start - diff;
+    const targetEnd = draggedItem.end;
+    const newTargetItem = {
+      ...targetItem,
+      start: targetStart,
+      mid: Math.floor(targetStart + (targetEnd - targetStart) / 2),
+      end: targetEnd
+    };
+    dropTargets.splice(indexOfTarget, 2, newDraggedItem, newTargetItem);
+  }
+};
+const getNextDropTarget = (dropTargets, pos, draggedItemSize, mouseMoveDirection) => {
+  const len = dropTargets.length;
+  const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
+  const draggedItem = dropTargets[indexOfDraggedItem];
+  if (mouseMoveDirection === "fwd") {
+    const leadingEdge = Math.round(pos + draggedItemSize);
+    for (let index = len - 1; index >= 0; index--) {
+      const dropTarget = dropTargets[index];
+      if (leadingEdge > dropTarget.mid) {
+        if (draggedItem && index < indexOfDraggedItem) {
+          return draggedItem;
+        } else {
+          return dropTarget;
+        }
+      }
+    }
+  } else {
+    const leadingEdge = Math.round(pos);
+    for (let index = 0; index < len; index++) {
+      const dropTarget = dropTargets[index];
+      if (leadingEdge < dropTarget.mid) {
+        if (index > indexOfDraggedItem) {
+          return draggedItem;
+        } else {
+          return dropTarget;
+        }
+      }
+    }
+  }
+  throw Error("no dropTarget identified");
+};
+function constrainRect(targetRect, constraintRect) {
+  const { height, left, top, width } = targetRect;
+  const { height: constrainedHeight, width: constrainedWidth } = constraintRect;
+  return {
+    height: Math.min(height, constrainedHeight),
+    left,
+    top,
+    width: Math.min(width, constrainedWidth)
+  };
+}
+const dropTargetsDebugString = (dropTargets) => dropTargets.map(
+  (d, i) => `
+${d.isDraggedItem ? "*" : " "}[${i}] width : ${Math.floor(
+    d.size
+  )}    ${Math.floor(d.start)} - ${Math.floor(d.end)} (mid ${Math.floor(
+    d.mid
+  )})  ${d.element?.textContent} `
+).join("");
+const getItemParentContainer = (container, itemQuery) => {
+  const firstItem = container?.querySelector(
+    `${itemQuery}:not([aria-hidden="true"])`
+  );
+  if (firstItem) {
+    return firstItem.parentElement;
+  } else {
+    return null;
+  }
+};
+const getScrollableContainer = (container, itemQuery) => {
+  const immediateParent = getItemParentContainer(container, itemQuery);
+  if (immediateParent === container) {
+    return container;
+  } else {
+    return immediateParent?.parentElement;
+  }
+};
+const isContainerScrollable = (scrollableContainer, orientation) => {
+  if (scrollableContainer === null) {
+    return false;
+  } else {
+    const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
+    const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } = scrollableContainer;
+    return scrollSize > clientSize;
+  }
+};
+
+exports.NOT_HIDDEN = NOT_HIDDEN;
+exports.NOT_OVERFLOWED = NOT_OVERFLOWED;
+exports.cloneElement = cloneElement;
+exports.constrainRect = constrainRect;
+exports.dimensions = dimensions;
+exports.dropTargetsDebugString = dropTargetsDebugString;
+exports.getIndexOfDraggedItem = getIndexOfDraggedItem;
+exports.getItemById = getItemById;
+exports.getItemParentContainer = getItemParentContainer;
+exports.getNextDropTarget = getNextDropTarget;
+exports.getScrollableContainer = getScrollableContainer;
+exports.isContainerScrollable = isContainerScrollable;
+exports.measureDropTargets = measureDropTargets;
+exports.measureElementSizeAndPosition = measureElementSizeAndPosition;
+exports.mutateDropTargetsSwitchDropTargetPosition = mutateDropTargetsSwitchDropTargetPosition;
+exports.removeDraggedItem = removeDraggedItem;
+//# sourceMappingURL=drop-target-utils.js.map

package/cjs/drag-drop/drop-target-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-target-utils.js","sources":["../../src/drag-drop/drop-target-utils.ts"],"sourcesContent":["import { orientationType } from \"@vuu-ui/vuu-utils\";\nimport { ViewportRange } from \"./dragDropTypes\";\nimport { Direction, Rect } from \"./dragDropTypes\";\n\nconst LEFT_RIGHT = [\"left\", \"right\"];\nconst TOP_BOTTOM = [\"top\", \"bottom\"];\n// duplicated in repsonsive\n\nexport const NOT_OVERFLOWED = \":not(.wrapped)\";\nexport const NOT_HIDDEN = ':not([aria-hidden=\"true\"])';\n\n// TODO figure out which of these attributes we no longer need\nexport type MeasuredDropTarget = {\n  /** \n    The index position currently occupied by this item. If draggable \n    is dropped here, this will be the destination drop position.\n  */\n  currentIndex: number;\n  element: HTMLElement;\n  id: string;\n  index: number;\n  isDraggedItem: boolean;\n  isExternal?: boolean;\n  isLast?: boolean;\n  isOverflowIndicator?: boolean;\n  start: number;\n  end: number;\n  mid: number;\n  size: number;\n};\n\nexport type targetType = {\n  element: HTMLElement | null;\n  index: number;\n  isLast?: boolean;\n};\n\n/** clones and removes id */\nexport const cloneElement = <T extends HTMLElement>(element: T): T => {\n  const dolly = element.cloneNode(true) as T;\n  // TOSO should we care about nested id values - perhaps an additional param, defaulting to false ?\n  dolly.removeAttribute(\"id\");\n  // Set index to -1 in case a moueMove event as we wait for drop to take effect might set highlighted\n  // index to wrong value (see useList) -1 will be ignored;\n  dolly.dataset.index = \"-1\";\n  return dolly;\n};\n\ntype MousePosKey = keyof Pick<MouseEvent, \"clientX\" | \"clientY\">;\ntype DOMRectKey = keyof Omit<DOMRect, \"toJSON\">;\ntype DOMRectDimensionKey = keyof Pick<DOMRect, \"width\" | \"height\">;\ntype Dimension = keyof Pick<DOMRect, \"width\" | \"height\">;\ntype ElementDimension = keyof Pick<\n  HTMLElement,\n  | \"scrollHeight\"\n  | \"scrollWidth\"\n  | \"clientHeight\"\n  | \"clientWidth\"\n  | \"scrollTop\"\n  | \"scrollLeft\"\n>;\n\ntype ElementPosition = \"x\" | \"y\";\n\nexport const measureElementSizeAndPosition = (\n  element: HTMLElement,\n  dimension: Dimension = \"width\",\n  includeAutoMargin = false\n) => {\n  const pos = dimension === \"width\" ? \"left\" : \"top\";\n  const { [dimension]: size, [pos]: position } =\n    element.getBoundingClientRect();\n  const { padEnd = false, padStart = false } = element.dataset;\n  const style = getComputedStyle(element);\n  const [start, end] = dimension === \"width\" ? LEFT_RIGHT : TOP_BOTTOM;\n  const marginStart =\n    padStart && !includeAutoMargin\n      ? 0\n      : parseInt(style.getPropertyValue(`margin-${start}`), 10);\n  const marginEnd =\n    padEnd && !includeAutoMargin\n      ? 0\n      : parseInt(style.getPropertyValue(`margin-${end}`), 10);\n\n  let minWidth = size;\n  const flexShrink = parseInt(style.getPropertyValue(\"flex-shrink\"), 10);\n  if (flexShrink > 0) {\n    const flexBasis = parseInt(style.getPropertyValue(\"flex-basis\"), 10);\n    if (!isNaN(flexBasis) && flexBasis > 0) {\n      minWidth = flexBasis;\n    }\n  }\n  return [position, marginStart + minWidth + marginEnd];\n};\n\nconst DIMENSIONS = {\n  horizontal: {\n    CLIENT_POS: \"clientX\" as MousePosKey,\n    CLIENT_SIZE: \"clientWidth\" as ElementDimension,\n    CONTRA: \"top\" as DOMRectKey,\n    CONTRA_CLIENT_POS: \"clientY\" as MousePosKey,\n    CONTRA_END: \"bottom\" as DOMRectDimensionKey,\n    CONTRA_POS: \"y\" as ElementPosition,\n    DIMENSION: \"width\" as DOMRectDimensionKey,\n    END: \"right\" as DOMRectKey,\n    POS: \"x\" as ElementPosition,\n    SCROLL_POS: \"scrollLeft\" as ElementDimension,\n    SCROLL_SIZE: \"scrollWidth\" as ElementDimension,\n    START: \"left\" as DOMRectKey,\n  },\n  vertical: {\n    CLIENT_POS: \"clientY\" as MousePosKey,\n    CLIENT_SIZE: \"clientHeight\" as ElementDimension,\n    CONTRA: \"left\" as DOMRectKey,\n    CONTRA_CLIENT_POS: \"clientX\" as MousePosKey,\n    CONTRA_END: \"right\" as DOMRectDimensionKey,\n    CONTRA_POS: \"x\" as ElementPosition,\n    DIMENSION: \"height\" as DOMRectDimensionKey,\n    END: \"bottom\" as DOMRectKey,\n    POS: \"y\" as ElementPosition,\n    SCROLL_POS: \"scrollTop\" as ElementDimension,\n    SCROLL_SIZE: \"scrollHeight\" as ElementDimension,\n    START: \"top\" as DOMRectKey,\n  },\n};\nexport const dimensions = (orientation: orientationType) =>\n  DIMENSIONS[orientation];\n\nexport const getItemById = (\n  measuredItems: MeasuredDropTarget[],\n  id: string\n) => {\n  const result = measuredItems.find((item) => item.id === id);\n  if (result) {\n    return result;\n  }\n  // else {\n  //   throw Error(`measuredItems do not contain an item with id #${id}`);\n  // }\n};\n\nexport const removeDraggedItem = (\n  measuredItems: MeasuredDropTarget[],\n  index: number\n) => {\n  measuredItems.splice(index, 1);\n  for (let i = index; i < measuredItems.length; i++) {\n    measuredItems[i].currentIndex -= 1;\n  }\n};\n\nexport type dropZone = \"start\" | \"end\";\n\nexport const measureDropTargets = (\n  container: HTMLElement,\n  orientation: orientationType,\n  itemQuery?: string,\n  viewportRange?: ViewportRange,\n  draggedItemId?: string\n) => {\n  const dragThresholds: MeasuredDropTarget[] = [];\n  const { DIMENSION } = dimensions(orientation);\n  const children = Array.from(\n    itemQuery ? container.querySelectorAll(itemQuery) : container.children\n  );\n\n  const itemCount = children.length;\n  const start =\n    typeof viewportRange?.from === \"number\"\n      ? viewportRange.atEnd\n        ? Math.max(0, viewportRange.from - 1)\n        : viewportRange.from\n      : 0;\n  const end =\n    typeof viewportRange?.to === \"number\"\n      ? Math.min(viewportRange.to + 2, itemCount - 1)\n      : itemCount - 1;\n  for (let index = start; index <= end; index++) {\n    const element = children[index] as HTMLElement;\n    const [start, size] = measureElementSizeAndPosition(element, DIMENSION);\n    const isLast = index === itemCount - 1;\n    const id = element.id;\n\n    dragThresholds.push({\n      currentIndex: index,\n      id,\n      index,\n      isDraggedItem: draggedItemId === id,\n      isLast,\n      isOverflowIndicator: element.dataset.index === \"overflow\",\n      element: element as HTMLElement,\n      start,\n      end: start + size,\n      size,\n      mid: start + size / 2,\n    });\n  }\n  return dragThresholds;\n};\n\nexport const getIndexOfDraggedItem = (dropTargets: MeasuredDropTarget[]) =>\n  dropTargets.findIndex((d) => d.isDraggedItem);\n\n// As the draggedItem is moved, displacing existing items, mirror\n// the movements within the dropTargets collection\nexport const mutateDropTargetsSwitchDropTargetPosition = (\n  dropTargets: MeasuredDropTarget[],\n  direction: Direction\n) => {\n  const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);\n  const indexOfTarget =\n    direction === \"fwd\" ? indexOfDraggedItem + 1 : indexOfDraggedItem - 1;\n\n  if (indexOfTarget < 0 || indexOfTarget >= dropTargets.length) {\n    throw Error(\"switchDropTargetPosition index out of range\");\n  }\n\n  const draggedItem = dropTargets.at(indexOfDraggedItem) as MeasuredDropTarget;\n  const targetItem = dropTargets.at(indexOfTarget) as MeasuredDropTarget;\n\n  const diff = targetItem.size - draggedItem.size;\n\n  if (direction === \"fwd\") {\n    const draggedStart = targetItem.start + diff;\n    const draggedEnd = targetItem.end;\n\n    const newDraggedItem = {\n      ...draggedItem,\n      start: draggedStart,\n      mid: Math.floor(draggedStart + (draggedEnd - draggedStart) / 2),\n      end: draggedEnd,\n    } as MeasuredDropTarget;\n\n    const targetStart = draggedItem.start;\n    const targetEnd = draggedItem.end + diff;\n\n    const newTargetItem = {\n      ...targetItem,\n      start: targetStart,\n      mid: Math.floor(targetStart + (targetEnd - targetStart) / 2),\n      end: targetEnd,\n    } as MeasuredDropTarget;\n    dropTargets.splice(indexOfDraggedItem, 2, newTargetItem, newDraggedItem);\n  } else {\n    const draggedStart = targetItem.start;\n    const draggedEnd = targetItem.end - diff;\n\n    const newDraggedItem = {\n      ...draggedItem,\n      start: draggedStart,\n      mid: Math.floor(draggedStart + (draggedEnd - draggedStart) / 2),\n      end: draggedEnd,\n    } as MeasuredDropTarget;\n\n    const targetStart = draggedItem.start - diff;\n    const targetEnd = draggedItem.end;\n\n    const newTargetItem = {\n      ...targetItem,\n      start: targetStart,\n      mid: Math.floor(targetStart + (targetEnd - targetStart) / 2),\n      end: targetEnd,\n    } as MeasuredDropTarget;\n    dropTargets.splice(indexOfTarget, 2, newDraggedItem, newTargetItem);\n  }\n};\n\nexport const getNextDropTarget = (\n  dropTargets: MeasuredDropTarget[],\n  pos: number,\n  draggedItemSize: number,\n  mouseMoveDirection: Direction\n): MeasuredDropTarget => {\n  const len = dropTargets.length;\n  const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);\n  // draggedItem will be undefined if we are handling an external drag\n  const draggedItem = dropTargets[indexOfDraggedItem];\n  if (mouseMoveDirection === \"fwd\") {\n    const leadingEdge = Math.round(pos + draggedItemSize);\n    for (let index = len - 1; index >= 0; index--) {\n      const dropTarget = dropTargets[index];\n      if (leadingEdge > dropTarget.mid) {\n        if (draggedItem && index < indexOfDraggedItem) {\n          return draggedItem;\n        } else {\n          return dropTarget;\n        }\n      }\n    }\n  } else {\n    const leadingEdge = Math.round(pos);\n    for (let index = 0; index < len; index++) {\n      const dropTarget = dropTargets[index];\n      if (leadingEdge < dropTarget.mid) {\n        if (index > indexOfDraggedItem) {\n          return draggedItem;\n        } else {\n          return dropTarget;\n        }\n      }\n    }\n  }\n  throw Error(\"no dropTarget identified\");\n};\n\n/**\n * An item within a scrollable container might have a width or height greater than that of\n * the container. If we drag such an item, we don't want the draggable to be larger than\n * the container.\n */\nexport function constrainRect(targetRect: Rect, constraintRect: Rect): Rect {\n  const { height, left, top, width } = targetRect;\n  const { height: constrainedHeight, width: constrainedWidth } = constraintRect;\n  return {\n    height: Math.min(height, constrainedHeight),\n    left,\n    top,\n    width: Math.min(width, constrainedWidth),\n  };\n}\n\nexport const dropTargetsDebugString = (dropTargets: MeasuredDropTarget[]) =>\n  dropTargets\n    .map(\n      (d, i) =>\n        `\\n${d.isDraggedItem ? \"*\" : \" \"}[${i}] width : ${Math.floor(\n          d.size\n        )}    ${Math.floor(d.start)} - ${Math.floor(d.end)} (mid ${Math.floor(\n          d.mid\n        )})  ${d.element?.textContent} `\n    )\n    .join(\"\");\n\nexport const getItemParentContainer = (\n  container: HTMLElement | null,\n  itemQuery: string\n) => {\n  const firstItem = container?.querySelector(\n    `${itemQuery}:not([aria-hidden=\"true\"])`\n  );\n  if (firstItem) {\n    // generally, we expect the immediateParent to be a contentContainer, the\n    // parent of that will be the scrollable container. This may or may not be\n    // the outer container (likely not)\n    return firstItem.parentElement;\n  } else {\n    return null;\n  }\n};\n\nexport const getScrollableContainer = (\n  container: HTMLElement | null,\n  itemQuery: string\n) => {\n  const immediateParent = getItemParentContainer(container, itemQuery);\n  if (immediateParent === container) {\n    return container;\n  } else {\n    return immediateParent?.parentElement as HTMLElement;\n  }\n};\n\nexport const isContainerScrollable = (\n  scrollableContainer: HTMLElement | null,\n  orientation: orientationType\n) => {\n  if (scrollableContainer === null) {\n    return false;\n  } else {\n    const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);\n    const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } =\n      scrollableContainer;\n    return scrollSize > clientSize;\n  }\n};\n"],"names":["start"],"mappings":"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"}

package/cjs/drag-drop/useAutoScroll.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var React = require('react');
+var dropTargetUtils = require('./drop-target-utils.js');
+
+const useAutoScroll = ({
+  containerRef,
+  onScrollingStopped,
+  orientation = "vertical"
+}) => {
+  const scrollTimer = React.useRef(null);
+  const isScrolling = React.useRef(false);
+  const scrollPosRef = React.useRef(0);
+  const lastScrollDirectionRef = React.useRef("fwd");
+  const stopScrolling = React.useCallback(
+    (atEnd = false) => {
+      if (scrollTimer.current !== null) {
+        clearTimeout(scrollTimer.current);
+        scrollTimer.current = null;
+      }
+      isScrolling.current = false;
+      onScrollingStopped?.(
+        lastScrollDirectionRef.current,
+        scrollPosRef.current,
+        atEnd
+      );
+    },
+    [onScrollingStopped]
+  );
+  const startScrolling = React.useCallback(
+    (direction, scrollRate, scrollUnit = 100) => {
+      const { current: container } = containerRef;
+      if (container) {
+        const { SCROLL_POS, SCROLL_SIZE, CLIENT_SIZE } = dropTargetUtils.dimensions(orientation);
+        const {
+          [SCROLL_POS]: scrollPos,
+          [SCROLL_SIZE]: scrollSize,
+          [CLIENT_SIZE]: clientSize
+        } = container;
+        const maxScroll = direction === "fwd" ? scrollSize - clientSize - scrollPos : scrollPos;
+        const nextScroll = Math.min(maxScroll, scrollUnit);
+        if (direction === "fwd") {
+          lastScrollDirectionRef.current = "fwd";
+          container[SCROLL_POS] = scrollPosRef.current = scrollPos + nextScroll;
+        } else {
+          lastScrollDirectionRef.current = "bwd";
+          container[SCROLL_POS] = scrollPosRef.current = scrollPos - nextScroll;
+        }
+        if (nextScroll === maxScroll) {
+          requestAnimationFrame(() => {
+            stopScrolling(true);
+          });
+        } else {
+          isScrolling.current = true;
+          scrollTimer.current = window.setTimeout(() => {
+            startScrolling(direction, scrollRate, scrollUnit);
+          }, 100);
+        }
+      }
+    },
+    [containerRef, orientation, stopScrolling]
+  );
+  return {
+    isScrolling,
+    startScrolling,
+    stopScrolling
+  };
+};
+
+exports.useAutoScroll = useAutoScroll;
+//# sourceMappingURL=useAutoScroll.js.map

package/cjs/drag-drop/useAutoScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoScroll.js","sources":["../../src/drag-drop/useAutoScroll.ts"],"sourcesContent":["import { RefObject, useCallback, useRef } from \"react\";\nimport { dimensions } from \"./drop-target-utils\";\n\nexport type ScrollStopHandler = (\n  scrollDirection: \"fwd\" | \"bwd\",\n  scrollPos: number,\n  atEnd: boolean\n) => void;\n\nexport const useAutoScroll = ({\n  containerRef,\n  onScrollingStopped,\n  orientation = \"vertical\",\n}: {\n  containerRef: RefObject<HTMLElement>;\n  onScrollingStopped?: ScrollStopHandler;\n  orientation?: \"horizontal\" | \"vertical\";\n}) => {\n  const scrollTimer = useRef<number | null>(null);\n  const isScrolling = useRef(false);\n  const scrollPosRef = useRef(0);\n  const lastScrollDirectionRef = useRef<\"fwd\" | \"bwd\">(\"fwd\");\n\n  const stopScrolling = useCallback(\n    (atEnd = false) => {\n      if (scrollTimer.current !== null) {\n        clearTimeout(scrollTimer.current);\n        scrollTimer.current = null;\n      }\n      isScrolling.current = false;\n      onScrollingStopped?.(\n        lastScrollDirectionRef.current,\n        scrollPosRef.current,\n        atEnd\n      );\n    },\n    [onScrollingStopped]\n  );\n\n  const startScrolling = useCallback(\n    (direction: \"fwd\" | \"bwd\", scrollRate: number, scrollUnit = 100) => {\n      const { current: container } = containerRef;\n      if (container) {\n        const { SCROLL_POS, SCROLL_SIZE, CLIENT_SIZE } =\n          dimensions(orientation);\n        const {\n          [SCROLL_POS]: scrollPos,\n          [SCROLL_SIZE]: scrollSize,\n          [CLIENT_SIZE]: clientSize,\n        } = container;\n        const maxScroll =\n          direction === \"fwd\" ? scrollSize - clientSize - scrollPos : scrollPos;\n        const nextScroll = Math.min(maxScroll, scrollUnit);\n\n        if (direction === \"fwd\") {\n          lastScrollDirectionRef.current = \"fwd\";\n          container[SCROLL_POS as \"scrollTop\" | \"scrollLeft\"] =\n            scrollPosRef.current = scrollPos + nextScroll;\n        } else {\n          lastScrollDirectionRef.current = \"bwd\";\n          container[SCROLL_POS as \"scrollTop\" | \"scrollLeft\"] =\n            scrollPosRef.current = scrollPos - nextScroll;\n        }\n\n        if (nextScroll === maxScroll) {\n          // delay this to allow any scroll listeners to do their work\n          requestAnimationFrame(() => {\n            stopScrolling(true);\n          });\n        } else {\n          isScrolling.current = true;\n          scrollTimer.current = window.setTimeout(() => {\n            startScrolling(direction, scrollRate, scrollUnit);\n          }, 100);\n        }\n      }\n    },\n    [containerRef, orientation, stopScrolling]\n  );\n\n  return {\n    isScrolling,\n    startScrolling,\n    stopScrolling,\n  };\n};\n"],"names":["useRef","useCallback","dimensions"],"mappings":";;;;;AASO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,YAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAc,GAAA,UAAA;AAChB,CAIM,KAAA;AACJ,EAAM,MAAA,WAAA,GAAcA,aAAsB,IAAI,CAAA,CAAA;AAC9C,EAAM,MAAA,WAAA,GAAcA,aAAO,KAAK,CAAA,CAAA;AAChC,EAAM,MAAA,YAAA,GAAeA,aAAO,CAAC,CAAA,CAAA;AAC7B,EAAM,MAAA,sBAAA,GAAyBA,aAAsB,KAAK,CAAA,CAAA;AAE1D,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,QAAQ,KAAU,KAAA;AACjB,MAAI,IAAA,WAAA,CAAY,YAAY,IAAM,EAAA;AAChC,QAAA,YAAA,CAAa,YAAY,OAAO,CAAA,CAAA;AAChC,QAAA,WAAA,CAAY,OAAU,GAAA,IAAA,CAAA;AAAA,OACxB;AACA,MAAA,WAAA,CAAY,OAAU,GAAA,KAAA,CAAA;AACtB,MAAA,kBAAA;AAAA,QACE,sBAAuB,CAAA,OAAA;AAAA,QACvB,YAAa,CAAA,OAAA;AAAA,QACb,KAAA;AAAA,OACF,CAAA;AAAA,KACF;AAAA,IACA,CAAC,kBAAkB,CAAA;AAAA,GACrB,CAAA;AAEA,EAAA,MAAM,cAAiB,GAAAA,iBAAA;AAAA,IACrB,CAAC,SAAA,EAA0B,UAAoB,EAAA,UAAA,GAAa,GAAQ,KAAA;AAClE,MAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,YAAA,CAAA;AAC/B,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,MAAM,EAAE,UAAY,EAAA,WAAA,EAAa,WAAY,EAAA,GAC3CC,2BAAW,WAAW,CAAA,CAAA;AACxB,QAAM,MAAA;AAAA,UACJ,CAAC,UAAU,GAAG,SAAA;AAAA,UACd,CAAC,WAAW,GAAG,UAAA;AAAA,UACf,CAAC,WAAW,GAAG,UAAA;AAAA,SACb,GAAA,SAAA,CAAA;AACJ,QAAA,MAAM,SACJ,GAAA,SAAA,KAAc,KAAQ,GAAA,UAAA,GAAa,aAAa,SAAY,GAAA,SAAA,CAAA;AAC9D,QAAA,MAAM,UAAa,GAAA,IAAA,CAAK,GAAI,CAAA,SAAA,EAAW,UAAU,CAAA,CAAA;AAEjD,QAAA,IAAI,cAAc,KAAO,EAAA;AACvB,UAAA,sBAAA,CAAuB,OAAU,GAAA,KAAA,CAAA;AACjC,UAAA,SAAA,CAAU,UAAwC,CAAA,GAChD,YAAa,CAAA,OAAA,GAAU,SAAY,GAAA,UAAA,CAAA;AAAA,SAChC,MAAA;AACL,UAAA,sBAAA,CAAuB,OAAU,GAAA,KAAA,CAAA;AACjC,UAAA,SAAA,CAAU,UAAwC,CAAA,GAChD,YAAa,CAAA,OAAA,GAAU,SAAY,GAAA,UAAA,CAAA;AAAA,SACvC;AAEA,QAAA,IAAI,eAAe,SAAW,EAAA;AAE5B,UAAA,qBAAA,CAAsB,MAAM;AAC1B,YAAA,aAAA,CAAc,IAAI,CAAA,CAAA;AAAA,WACnB,CAAA,CAAA;AAAA,SACI,MAAA;AACL,UAAA,WAAA,CAAY,OAAU,GAAA,IAAA,CAAA;AACtB,UAAY,WAAA,CAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AAC5C,YAAe,cAAA,CAAA,SAAA,EAAW,YAAY,UAAU,CAAA,CAAA;AAAA,aAC/C,GAAG,CAAA,CAAA;AAAA,SACR;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,YAAc,EAAA,WAAA,EAAa,aAAa,CAAA;AAAA,GAC3C,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/cjs/drag-drop/useDragDisplacers.js

@@ -0,0 +1,160 @@
+'use strict';
+
+var React = require('react');
+var Draggable = require('./Draggable.js');
+var dropTargetUtils = require('./drop-target-utils.js');
+
+const useDragDisplacers = (orientation = "horizontal") => {
+  const animationFrame = React.useRef(0);
+  const transitioning = React.useRef(false);
+  const spacers = React.useMemo(
+    // We only need to listen for transition end on one of the spacers
+    () => [Draggable.createDragSpacer(transitioning), Draggable.createDragSpacer()],
+    []
+  );
+  const animateTransition = React.useCallback(
+    (size, propertyName = "width") => {
+      const [spacer1, spacer2] = spacers;
+      animationFrame.current = requestAnimationFrame(() => {
+        transitioning.current = true;
+        spacer1.style.cssText = `${propertyName}: 0px`;
+        spacer2.style.cssText = `${propertyName}: ${size}px`;
+        spacers[0] = spacer2;
+        spacers[1] = spacer1;
+      });
+    },
+    [spacers]
+  );
+  const clearSpacers = React.useCallback(
+    (useTransition = false) => {
+      if (useTransition === true) {
+        const [spacer] = spacers;
+        const cleanup = () => {
+          spacer.removeEventListener("transitionend", cleanup);
+          clearSpacers();
+        };
+        const propertyName = orientation === "horizontal" ? "width" : "height";
+        spacer.addEventListener("transitionend", cleanup);
+        animateTransition(0, propertyName);
+      } else {
+        spacers.forEach((spacer) => spacer.remove());
+      }
+    },
+    [animateTransition, orientation, spacers]
+  );
+  const setTerminalSpacer = React.useCallback(
+    (container, position, size) => {
+      clearSpacers();
+      const propertyName = orientation === "horizontal" ? "width" : "height";
+      const [spacer] = spacers;
+      spacer.style.cssText = `${propertyName}: ${size}px`;
+      if (position === "start") {
+        container.firstChild?.before(spacer);
+      } else {
+        container.lastChild?.after(spacer);
+      }
+    },
+    [clearSpacers, orientation, spacers]
+  );
+  const cancelAnyPendingAnimation = React.useCallback(() => {
+    if (animationFrame.current) {
+      cancelAnimationFrame(animationFrame.current);
+      animationFrame.current = 0;
+    }
+  }, []);
+  const displaceItem = React.useCallback(
+    (dropTargets, dropTarget, size, useTransition = false, direction = "static") => {
+      if (dropTarget) {
+        const propertyName = orientation === "horizontal" ? "width" : "height";
+        const [spacer1, spacer2] = spacers;
+        cancelAnyPendingAnimation();
+        if (useTransition) {
+          if (transitioning.current) {
+            clearSpacers();
+            spacer1.style.cssText = `${propertyName}: ${size}px`;
+            spacer2.style.cssText = `${propertyName}: 0px`;
+            if (direction === "fwd") {
+              dropTarget.element.before(spacer1);
+              dropTarget.element.after(spacer2);
+            } else {
+              dropTarget.element.after(spacer1);
+              dropTarget.element.before(spacer2);
+            }
+          } else {
+            if (direction === "fwd") {
+              dropTarget.element.after(spacer2);
+            } else {
+              dropTarget.element.before(spacer2);
+            }
+          }
+          animateTransition(size, propertyName);
+        } else if (direction === "static") {
+          spacer1.style.cssText = `${propertyName}: ${size}px`;
+          dropTarget.element.before(spacer1);
+        } else {
+          throw Error(
+            "useDragDisplacers currently only supports noTransition for static displacement"
+          );
+        }
+        if (direction !== "static") {
+          dropTargetUtils.mutateDropTargetsSwitchDropTargetPosition(dropTargets, direction);
+        }
+        return direction === "bwd" ? dropTarget.index : dropTarget.index + 1;
+      }
+      return -1;
+    },
+    [
+      animateTransition,
+      cancelAnyPendingAnimation,
+      clearSpacers,
+      orientation,
+      spacers
+    ]
+  );
+  const displaceLastItem = React.useCallback(
+    (dropTargets, dropTarget, size, useTransition = false, direction = "static") => {
+      const propertyName = orientation === "horizontal" ? "width" : "height";
+      const [spacer1, spacer2] = spacers;
+      cancelAnyPendingAnimation();
+      if (useTransition) {
+        if (transitioning.current) {
+          clearSpacers();
+          spacer1.style.cssText = `${propertyName}: ${size}px`;
+          spacer2.style.cssText = `${propertyName}: 0px`;
+          dropTarget.element.before(spacer1);
+          dropTarget.element.after(spacer2);
+        } else {
+          if (direction === "fwd") {
+            dropTarget.element.after(spacer2);
+          } else {
+            dropTarget.element.before(spacer2);
+          }
+        }
+        animateTransition(size, propertyName);
+      } else {
+        spacer1.style.cssText = `${propertyName}: ${size}px`;
+        dropTarget.element.after(spacer1);
+      }
+      if (direction !== "static") {
+        dropTargetUtils.mutateDropTargetsSwitchDropTargetPosition(dropTargets, direction);
+      }
+      return dropTarget.index;
+    },
+    [
+      animateTransition,
+      cancelAnyPendingAnimation,
+      clearSpacers,
+      orientation,
+      spacers
+    ]
+  );
+  return {
+    displaceItem,
+    displaceLastItem,
+    clearSpacers,
+    setTerminalSpacer
+  };
+};
+
+exports.useDragDisplacers = useDragDisplacers;
+//# sourceMappingURL=useDragDisplacers.js.map

package/cjs/drag-drop/useDragDisplacers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragDisplacers.js","sources":["../../src/drag-drop/useDragDisplacers.ts"],"sourcesContent":["import type { orientationType } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { Direction } from \"./dragDropTypes\";\nimport { createDragSpacer as createDragDisplacer } from \"./Draggable\";\nimport {\n  MeasuredDropTarget,\n  mutateDropTargetsSwitchDropTargetPosition,\n} from \"./drop-target-utils\";\n\nexport type DragDisplacersHookResult = {\n  displaceItem: (\n    dropTargets: MeasuredDropTarget[],\n    dropTarget: MeasuredDropTarget,\n    size: number,\n    useTransition?: boolean,\n    direction?: Direction | \"static\",\n    orientation?: \"horizontal\" | \"vertical\"\n  ) => number;\n  displaceLastItem: (\n    dropTargets: MeasuredDropTarget[],\n    dropTarget: MeasuredDropTarget,\n    size: number,\n    useTransition?: boolean,\n    direction?: Direction | \"static\",\n    orientation?: \"horizontal\" | \"vertical\"\n  ) => number;\n  clearSpacers: (useAnimation?: boolean) => void;\n  /** Insert the sized spacer at start or end of collection */\n  setTerminalSpacer: (\n    container: HTMLElement,\n    position: \"start\" | \"end\",\n    size: number\n  ) => void;\n};\n\nexport type DragDisplacersHook = (\n  orientation: orientationType\n) => DragDisplacersHookResult;\n/**\n * Manage a pair of displacer elements to smoothly display a moving gap between\n * list items of any kind. Designed to be used in a drag drop operation. The 'static'\n * direction option should be used at drag start or following scroll.\n */\nexport const useDragDisplacers: DragDisplacersHook = (\n  orientation = \"horizontal\"\n) => {\n  const animationFrame = useRef(0);\n  const transitioning = useRef(false);\n\n  const spacers = useMemo(\n    // We only need to listen for transition end on one of the spacers\n    () => [createDragDisplacer(transitioning), createDragDisplacer()],\n    []\n  );\n\n  const animateTransition = useCallback(\n    (size: number, propertyName = \"width\") => {\n      const [spacer1, spacer2] = spacers;\n      animationFrame.current = requestAnimationFrame(() => {\n        transitioning.current = true;\n        spacer1.style.cssText = `${propertyName}: 0px`;\n        spacer2.style.cssText = `${propertyName}: ${size}px`;\n        spacers[0] = spacer2;\n        spacers[1] = spacer1;\n      });\n    },\n    [spacers]\n  );\n\n  const clearSpacers = useCallback(\n    (useTransition = false) => {\n      if (useTransition === true) {\n        const [spacer] = spacers;\n        const cleanup = () => {\n          spacer.removeEventListener(\"transitionend\", cleanup);\n          clearSpacers();\n        };\n        const propertyName = orientation === \"horizontal\" ? \"width\" : \"height\";\n        spacer.addEventListener(\"transitionend\", cleanup);\n        animateTransition(0, propertyName);\n      } else {\n        spacers.forEach((spacer) => spacer.remove());\n      }\n    },\n    [animateTransition, orientation, spacers]\n  );\n\n  const setTerminalSpacer = useCallback(\n    (container: HTMLElement, position: \"start\" | \"end\", size: number) => {\n      clearSpacers();\n\n      const propertyName = orientation === \"horizontal\" ? \"width\" : \"height\";\n      const [spacer] = spacers;\n      spacer.style.cssText = `${propertyName}: ${size}px`;\n\n      if (position === \"start\") {\n        container.firstChild?.before(spacer);\n      } else {\n        container.lastChild?.after(spacer);\n      }\n    },\n    [clearSpacers, orientation, spacers]\n  );\n\n  const cancelAnyPendingAnimation = useCallback(() => {\n    if (animationFrame.current) {\n      cancelAnimationFrame(animationFrame.current);\n      animationFrame.current = 0;\n    }\n  }, []);\n\n  const displaceItem = useCallback(\n    (\n      dropTargets: MeasuredDropTarget[],\n      dropTarget: MeasuredDropTarget,\n      size: number,\n      useTransition = false,\n      direction: Direction | \"static\" = \"static\"\n    ): number => {\n      if (dropTarget) {\n        const propertyName = orientation === \"horizontal\" ? \"width\" : \"height\";\n        const [spacer1, spacer2] = spacers;\n        cancelAnyPendingAnimation();\n        if (useTransition) {\n          if (transitioning.current) {\n            clearSpacers();\n            spacer1.style.cssText = `${propertyName}: ${size}px`;\n            spacer2.style.cssText = `${propertyName}: 0px`;\n            if (direction === \"fwd\") {\n              dropTarget.element.before(spacer1);\n              dropTarget.element.after(spacer2);\n            } else {\n              dropTarget.element.after(spacer1);\n              dropTarget.element.before(spacer2);\n            }\n          } else {\n            if (direction === \"fwd\") {\n              dropTarget.element.after(spacer2);\n            } else {\n              dropTarget.element.before(spacer2);\n            }\n          }\n          animateTransition(size, propertyName);\n        } else if (direction === \"static\") {\n          spacer1.style.cssText = `${propertyName}: ${size}px`;\n          dropTarget.element.before(spacer1);\n        } else {\n          throw Error(\n            \"useDragDisplacers currently only supports noTransition for static displacement\"\n          );\n        }\n        if (direction !== \"static\") {\n          mutateDropTargetsSwitchDropTargetPosition(dropTargets, direction);\n        }\n        return direction === \"bwd\" ? dropTarget.index : dropTarget.index + 1;\n      }\n      return -1;\n    },\n    [\n      animateTransition,\n      cancelAnyPendingAnimation,\n      clearSpacers,\n      orientation,\n      spacers,\n    ]\n  );\n  const displaceLastItem = useCallback(\n    (\n      dropTargets: MeasuredDropTarget[],\n      dropTarget: MeasuredDropTarget,\n      size: number,\n      useTransition = false,\n      direction: Direction | \"static\" = \"static\"\n    ): number => {\n      const propertyName = orientation === \"horizontal\" ? \"width\" : \"height\";\n      const [spacer1, spacer2] = spacers;\n\n      cancelAnyPendingAnimation();\n\n      if (useTransition) {\n        if (transitioning.current) {\n          clearSpacers();\n          spacer1.style.cssText = `${propertyName}: ${size}px`;\n          spacer2.style.cssText = `${propertyName}: 0px`;\n          dropTarget.element.before(spacer1);\n          dropTarget.element.after(spacer2);\n        } else {\n          if (direction === \"fwd\") {\n            dropTarget.element.after(spacer2);\n          } else {\n            dropTarget.element.before(spacer2);\n          }\n        }\n        animateTransition(size, propertyName);\n      } else {\n        spacer1.style.cssText = `${propertyName}: ${size}px`;\n        dropTarget.element.after(spacer1);\n      }\n\n      if (direction !== \"static\") {\n        mutateDropTargetsSwitchDropTargetPosition(dropTargets, direction);\n      }\n\n      return dropTarget.index;\n    },\n    [\n      animateTransition,\n      cancelAnyPendingAnimation,\n      clearSpacers,\n      orientation,\n      spacers,\n    ]\n  );\n\n  return {\n    displaceItem,\n    displaceLastItem,\n    clearSpacers,\n    setTerminalSpacer,\n  };\n};\n"],"names":["useRef","useMemo","createDragDisplacer","useCallback","mutateDropTargetsSwitchDropTargetPosition"],"mappings":"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"}