@salt-ds/lab 1.0.0-alpha.0

package/dist-cjs/packages/lab/src/tabs/drag-drop/drag-utils.js

@@ -0,0 +1,147 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dragDropTypes = require('./dragDropTypes.js');
+
+const LEFT_RIGHT = ["left", "right"];
+const TOP_BOTTOM = ["top", "bottom"];
+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_SIZE: "clientWidth",
+    CONTRA: "top",
+    CONTRA_POS: "clientY",
+    DIMENSION: "width",
+    END: "right",
+    POS: "clientX",
+    SCROLL_POS: "scrollTop",
+    SCROLL_SIZE: "scrollWidth",
+    START: "left"
+  },
+  vertical: {
+    CLIENT_SIZE: "clientHeight",
+    CONTRA: "left",
+    CONTRA_POS: "clientX",
+    DIMENSION: "height",
+    END: "bottom",
+    POS: "clientY",
+    SCROLL_POS: "scrollLeft",
+    SCROLL_SIZE: "scrollHeight",
+    START: "top"
+  }
+};
+const dimensions = (orientation) => DIMENSIONS[orientation];
+const getDraggedItem = (measuredItems) => {
+  const result = measuredItems.find((item) => item.isDraggedElement);
+  if (result) {
+    return result;
+  } else {
+    throw Error("measuredItems do not contain a draggedElement");
+  }
+};
+const moveDragItem = (measuredItems, dropTarget) => {
+  const items = measuredItems.slice();
+  const draggedItem = getDraggedItem(items);
+  const draggedIndex = items.indexOf(draggedItem);
+  const targetIndex = items.indexOf(dropTarget);
+  const firstPos = Math.min(draggedIndex, targetIndex);
+  const lastPos = Math.max(draggedIndex, targetIndex);
+  let { start } = items[firstPos];
+  items[draggedIndex] = { ...dropTarget };
+  items[targetIndex] = { ...draggedItem };
+  for (let i = firstPos; i <= lastPos; i++) {
+    const item = items[i];
+    item.currentIndex = i;
+    item.start = start;
+    item.end = start + item.size;
+    item.mid = start + item.size / 2;
+    start = item.end;
+  }
+  return items;
+};
+const isDraggedElement = (item) => item.isDraggedElement;
+const measureDropTargets = (container, orientation, draggedItem, itemQuery) => {
+  var _a;
+  const dragThresholds = [];
+  const children = Array.from(
+    itemQuery ? container.querySelectorAll(itemQuery) : container.children
+  );
+  for (let index = 0; index < children.length; index++) {
+    const element = children[index];
+    const dimension = orientation === "horizontal" ? "width" : "height";
+    let [start, size] = measureElementSizeAndPosition(element, dimension);
+    dragThresholds.push(
+      {
+        currentIndex: index,
+        dataIndex: parseInt((_a = element.dataset.index) != null ? _a : "-1"),
+        index,
+        isDraggedElement: element === draggedItem,
+        isOverflowIndicator: element.dataset.overflowIndicator === "true",
+        element,
+        start,
+        end: start + size,
+        size,
+        mid: start + size / 2
+      }
+    );
+  }
+  return dragThresholds;
+};
+const getNextDropTarget = (dropTargets, pos, direction) => {
+  const len = dropTargets.length;
+  if (direction === dragDropTypes.FWD) {
+    for (let index = 0; index < len; index++) {
+      let dropTarget = dropTargets[index];
+      const { start, mid, end } = dropTarget;
+      if (pos > end) {
+        continue;
+      } else if (pos > mid) {
+        return dropTarget.isDraggedElement ? null : dropTarget;
+      } else if (pos > start) {
+        dropTarget = dropTargets[index - 1];
+        return dropTarget.isDraggedElement ? null : dropTarget;
+      }
+    }
+  } else {
+    for (let index = len - 1; index >= 0; index--) {
+      let dropTarget = dropTargets[index];
+      const { start, mid, end } = dropTarget;
+      if (pos < start) {
+        continue;
+      } else if (pos < mid) {
+        return dropTarget.isDraggedElement ? null : dropTarget;
+      } else if (pos < end) {
+        dropTarget = dropTargets[Math.min(len - 1, index + 1)];
+        return dropTarget.isDraggedElement ? null : dropTarget;
+      }
+    }
+  }
+  return null;
+};
+
+exports.dimensions = dimensions;
+exports.getDraggedItem = getDraggedItem;
+exports.getNextDropTarget = getNextDropTarget;
+exports.isDraggedElement = isDraggedElement;
+exports.measureDropTargets = measureDropTargets;
+exports.measureElementSizeAndPosition = measureElementSizeAndPosition;
+exports.moveDragItem = moveDragItem;
+//# sourceMappingURL=drag-utils.js.map

package/dist-cjs/packages/lab/src/tabs/drag-drop/drag-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-utils.js","sources":["../src/tabs/drag-drop/drag-utils.ts"],"sourcesContent":["import { orientationType } from \"../../responsive\";\nimport { Direction, FWD } from \"./dragDropTypes\";\n\nconst LEFT_RIGHT = [\"left\", \"right\"];\nconst TOP_BOTTOM = [\"top\", \"bottom\"];\n// duplicated in repsonsive\n\nexport type MeasuredDropTarget = {\n  currentIndex: number;\n  dataIndex?: number;\n  element: HTMLElement;\n  index: number;\n  isDraggedElement: 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\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\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_SIZE: \"clientWidth\" as ElementDimension,\n    CONTRA: \"top\" as DOMRectKey,\n    CONTRA_POS: \"clientY\" as MousePosKey,\n    DIMENSION: \"width\" as DOMRectDimensionKey,\n    END: \"right\" as DOMRectKey,\n    POS: \"clientX\" as MousePosKey,\n    SCROLL_POS: \"scrollTop\" as ElementDimension,\n    SCROLL_SIZE: \"scrollWidth\" as ElementDimension,\n    START: \"left\" as DOMRectKey,\n  },\n  vertical: {\n    CLIENT_SIZE: \"clientHeight\" as ElementDimension,\n    CONTRA: \"left\" as DOMRectKey,\n    CONTRA_POS: \"clientX\" as MousePosKey,\n    DIMENSION: \"height\" as DOMRectDimensionKey,\n    END: \"bottom\" as DOMRectKey,\n    POS: \"clientY\" as MousePosKey,\n    SCROLL_POS: \"scrollLeft\" 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 getDraggedItem = (\n  measuredItems: MeasuredDropTarget[]\n): MeasuredDropTarget => {\n  const result = measuredItems.find((item) => item.isDraggedElement);\n  if (result) {\n    return result;\n  } else {\n    throw Error(\"measuredItems do not contain a draggedElement\");\n  }\n};\n\nexport const moveDragItem = (\n  measuredItems: MeasuredDropTarget[],\n  dropTarget: MeasuredDropTarget\n): MeasuredDropTarget[] => {\n  const items: MeasuredDropTarget[] = measuredItems.slice();\n  const draggedItem = getDraggedItem(items);\n  const draggedIndex = items.indexOf(draggedItem!);\n  const targetIndex = items.indexOf(dropTarget);\n\n  const firstPos = Math.min(draggedIndex, targetIndex);\n  const lastPos = Math.max(draggedIndex, targetIndex);\n  let { start } = items[firstPos];\n\n  items[draggedIndex] = { ...dropTarget };\n  items[targetIndex] = { ...draggedItem };\n\n  for (let i = firstPos; i <= lastPos; i++) {\n    const item = items[i];\n    item.currentIndex = i;\n    item.start = start;\n    item.end = start + item.size;\n    item.mid = start + item.size / 2;\n    start = item.end;\n  }\n\n  return items;\n};\n\nexport const isDraggedElement = (item: MeasuredDropTarget) =>\n  item.isDraggedElement;\n\nexport const measureDropTargets = (\n  container: HTMLElement,\n  orientation: orientationType,\n  draggedItem: HTMLElement,\n  itemQuery?: string\n) => {\n  const dragThresholds: MeasuredDropTarget[] = [];\n\n  // TODO need to make sure we're including only the children we should\n  const children = Array.from(\n    itemQuery ? container.querySelectorAll(itemQuery) : container.children\n  );\n  let previousThreshold = null;\n  for (let index = 0; index < children.length; index++) {\n    const element = children[index] as HTMLElement;\n    const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n    let [start, size] = measureElementSizeAndPosition(element, dimension);\n\n    dragThresholds.push(\n      (previousThreshold = {\n        currentIndex: index,\n        dataIndex: parseInt(element.dataset.index ?? \"-1\"),\n        index,\n        isDraggedElement: element === draggedItem,\n        isOverflowIndicator: element.dataset.overflowIndicator === \"true\",\n        element: element as HTMLElement,\n        start,\n        end: start + size,\n        size,\n        mid: start + size / 2,\n      })\n    );\n  }\n  return dragThresholds;\n};\n\nexport const getNextDropTarget = (\n  dropTargets: MeasuredDropTarget[],\n  pos: number,\n  direction: Direction\n) => {\n  const len = dropTargets.length;\n  if (direction === FWD) {\n    for (let index = 0; index < len; index++) {\n      let dropTarget = dropTargets[index];\n      const { start, mid, end } = dropTarget;\n      if (pos > end) {\n        continue;\n      } else if (pos > mid) {\n        return dropTarget.isDraggedElement ? null : dropTarget;\n      } else if (pos > start) {\n        dropTarget = dropTargets[index - 1];\n        return dropTarget.isDraggedElement ? null : dropTarget;\n      }\n    }\n  } else {\n    for (let index = len - 1; index >= 0; index--) {\n      let dropTarget = dropTargets[index];\n      const { start, mid, end } = dropTarget;\n      if (pos < start) {\n        continue;\n      } else if (pos < mid) {\n        return dropTarget.isDraggedElement ? null : dropTarget;\n      } else if (pos < end) {\n        dropTarget = dropTargets[Math.min(len - 1, index + 1)];\n        return dropTarget.isDraggedElement ? null : dropTarget;\n      }\n    }\n  }\n  return null;\n};\n"],"names":["FWD"],"mappings":"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"}

package/dist-cjs/packages/lab/src/tabs/drag-drop/dragDropTypes.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const FWD = "fwd";
+
+exports.FWD = FWD;
+//# sourceMappingURL=dragDropTypes.js.map

package/dist-cjs/packages/lab/src/tabs/drag-drop/dragDropTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragDropTypes.js","sources":["../src/tabs/drag-drop/dragDropTypes.ts"],"sourcesContent":["import { MouseEventHandler, RefObject } from \"react\";\n\nimport { orientationType } from \"../../responsive\";\n\nexport type dragStrategy = \"drop-indicator\" | \"natural-movement\";\n\nexport type Direction = \"fwd\" | \"bwd\";\nexport const FWD: Direction = \"fwd\";\nexport const BWD: Direction = \"bwd\";\n\nexport type Rect = {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport type DragHookResult = {\n  draggable: JSX.Element | null;\n  dropIndicator: JSX.Element | null;\n  draggedItemIndex?: number;\n  isDragging: boolean;\n  onMouseDown?: MouseEventHandler;\n  revealOverflowedItems: boolean;\n  // tabProps?: Partial<TabProps>;\n};\n\nexport type DragDropHook = (props: {\n  allowDragDrop?: boolean | dragStrategy;\n  extendedDropZone?: boolean;\n  onDrop: (fromIndex: number, toIndex: number) => void;\n  orientation: orientationType;\n  containerRef: RefObject<HTMLElement>;\n  itemQuery?: string;\n}) => DragHookResult;\n"],"names":[],"mappings":";;;;AAOO,MAAM,GAAiB,GAAA;;;;"}

package/dist-cjs/packages/lab/src/tabs/drag-drop/useDragDrop.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useDragDropNaturalMovement = require('./useDragDropNaturalMovement.js');
+
+const NULL_DRAG_DROP_RESULT = {
+  draggable: null,
+  isDragging: false,
+  dropIndicator: null,
+  revealOverflowedItems: false
+};
+const noDragDrop = () => NULL_DRAG_DROP_RESULT;
+const useDragDrop = ({
+  allowDragDrop,
+  ...dragDropProps
+}) => {
+  const useDragDropHook = allowDragDrop ? useDragDropNaturalMovement.useDragDropNaturalMovement : noDragDrop;
+  return useDragDropHook(dragDropProps);
+};
+
+exports.useDragDrop = useDragDrop;
+//# sourceMappingURL=useDragDrop.js.map

package/dist-cjs/packages/lab/src/tabs/drag-drop/useDragDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragDrop.js","sources":["../src/tabs/drag-drop/useDragDrop.ts"],"sourcesContent":["import { DragDropHook } from \"./dragDropTypes\";\nimport { useDragDropNaturalMovement } from \"./useDragDropNaturalMovement\";\n\nconst NULL_DRAG_DROP_RESULT = {\n  draggable: null,\n  isDragging: false,\n  dropIndicator: null,\n  revealOverflowedItems: false,\n};\nconst noDragDrop: DragDropHook = () => NULL_DRAG_DROP_RESULT;\n\nexport const useDragDrop: DragDropHook = ({\n  allowDragDrop,\n  ...dragDropProps\n}) => {\n  const useDragDropHook: DragDropHook = allowDragDrop\n    ? useDragDropNaturalMovement\n    : noDragDrop;\n\n  return useDragDropHook(dragDropProps);\n};\n"],"names":["useDragDropNaturalMovement"],"mappings":";;;;;;AAGA,MAAM,qBAAwB,GAAA;AAAA,EAC5B,SAAW,EAAA,IAAA;AAAA,EACX,UAAY,EAAA,KAAA;AAAA,EACZ,aAAe,EAAA,IAAA;AAAA,EACf,qBAAuB,EAAA,KAAA;AACzB,CAAA,CAAA;AACA,MAAM,aAA2B,MAAM,qBAAA,CAAA;AAEhC,MAAM,cAA4B,CAAC;AAAA,EACxC,aAAA;AAAA,EACG,GAAA,aAAA;AACL,CAAM,KAAA;AACJ,EAAM,MAAA,eAAA,GAAgC,gBAClCA,qDACA,GAAA,UAAA,CAAA;AAEJ,EAAA,OAAO,gBAAgB,aAAa,CAAA,CAAA;AACtC;;;;"}

package/dist-cjs/packages/lab/src/tabs/drag-drop/useDragDropNaturalMovement.js

@@ -0,0 +1,235 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useDragSpacers = require('./useDragSpacers.js');
+var dragUtils = require('./drag-utils.js');
+var Draggable = require('./Draggable.js');
+
+const dragThreshold = 3;
+const useDragDropNaturalMovement = ({
+  onDrop,
+  orientation = "horizontal",
+  containerRef,
+  itemQuery = "*"
+}) => {
+  const [showOverflow, setShowOverflow] = React.useState(false);
+  const overflowMenuShowingRef = React.useRef(false);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [dragPortal, setDragPortal] = React.useState(null);
+  const draggableRef = React.useRef(null);
+  const startPos = React.useRef(0);
+  const previousPos = React.useRef(0);
+  const mouseOffset = React.useRef(0);
+  const mouseDownTimer = React.useRef(null);
+  const dragLimits = React.useRef({ start: 0, end: 0 });
+  const dragDirection = React.useRef();
+  const dropTarget = React.useRef(null);
+  const measuredDropTargets = React.useRef([]);
+  const { clearSpacers, displaceItem, displaceLastItem } = useDragSpacers.useDragSpacers();
+  const dragMouseMoveHandler = React.useCallback(
+    (evt) => {
+      const { POS } = dragUtils.dimensions(orientation);
+      const { [POS]: clientPos } = evt;
+      const { current: lastClientPos } = previousPos;
+      const { current: currentDropTarget } = dropTarget;
+      const { current: dropTargets } = measuredDropTargets;
+      const draggedItem = dragUtils.getDraggedItem(dropTargets);
+      if (Math.abs(lastClientPos - clientPos) > 0) {
+        previousPos.current = clientPos;
+        const moveDistance = clientPos - startPos.current;
+        const pos = startPos.current - mouseOffset.current + moveDistance;
+        const renderPos = Math.max(
+          dragLimits.current.start,
+          Math.min(dragLimits.current.end, pos)
+        );
+        if (draggableRef.current && containerRef.current) {
+          const START = orientation === "horizontal" ? "left" : "top";
+          draggableRef.current.style[START] = `${renderPos}px`;
+          const direction = lastClientPos < clientPos ? "fwd" : "bwd";
+          const offsetPos = clientPos - mouseOffset.current;
+          const leadingEdge = direction === "fwd" ? offsetPos + draggedItem.size : offsetPos;
+          const nextDropTarget = dragUtils.getNextDropTarget(
+            measuredDropTargets.current,
+            leadingEdge,
+            direction
+          );
+          if (nextDropTarget && (nextDropTarget.index !== (currentDropTarget == null ? void 0 : currentDropTarget.index) || direction !== dragDirection.current)) {
+            if (nextDropTarget.isOverflowIndicator) {
+              setShowOverflow(overflowMenuShowingRef.current = true);
+            } else {
+              const newDropTargets = dragUtils.moveDragItem(dropTargets, nextDropTarget);
+              const draggedItem2 = dragUtils.getDraggedItem(newDropTargets);
+              const nextDisplacedItem = newDropTargets[draggedItem2.currentIndex + 1];
+              if (nextDisplacedItem) {
+                displaceItem(
+                  nextDisplacedItem,
+                  draggedItem2.size,
+                  true,
+                  direction
+                );
+              } else {
+                const displacedItem = newDropTargets[draggedItem2.currentIndex - 1];
+                displaceLastItem(displacedItem, draggedItem2.size, true);
+              }
+              measuredDropTargets.current = newDropTargets;
+              setShowOverflow(overflowMenuShowingRef.current = false);
+            }
+            dropTarget.current = nextDropTarget;
+            dragDirection.current = direction;
+          }
+        }
+      }
+    },
+    [containerRef, displaceItem, displaceLastItem, orientation]
+  );
+  const dragMouseUpHandler = React.useCallback(() => {
+    document.removeEventListener("mousemove", dragMouseMoveHandler, false);
+    document.removeEventListener("mouseup", dragMouseUpHandler, false);
+    clearSpacers();
+    const { current: dropTargets } = measuredDropTargets;
+    const draggedItem = dragUtils.getDraggedItem(dropTargets);
+    const { dataIndex = -1, index, currentIndex: toIndex } = draggedItem;
+    const fromIndex = dataIndex !== -1 ? dataIndex : index;
+    dropTarget.current = null;
+    dragDirection.current = void 0;
+    setDragPortal(null);
+    if (overflowMenuShowingRef.current) {
+      onDrop(fromIndex, -1);
+    } else if (fromIndex !== toIndex) {
+      onDrop(fromIndex, toIndex);
+    }
+    setShowOverflow(false);
+    setIsDragging(false);
+  }, [clearSpacers, dragMouseMoveHandler, onDrop]);
+  const enterDraggingState = React.useCallback(
+    (evt) => {
+      const { POS, START } = dragUtils.dimensions(orientation);
+      const { [POS]: clientPos } = evt;
+      const evtTarget = evt.target;
+      const dragElement = evtTarget.closest(itemQuery);
+      if (dragElement) {
+        const query = `:is(${itemQuery}:not([data-overflowed="true"]),[data-overflow-indicator])`;
+        const dropTargets = dragUtils.measureDropTargets(
+          containerRef.current,
+          orientation,
+          dragElement,
+          query
+        );
+        const draggedItem = dropTargets.find(dragUtils.isDraggedElement);
+        if (draggedItem && containerRef.current) {
+          measuredDropTargets.current = dropTargets;
+          dropTarget.current = draggedItem;
+          const containerRect = containerRef.current.getBoundingClientRect();
+          const draggableRect = draggedItem.element.getBoundingClientRect();
+          mouseOffset.current = clientPos - draggedItem.start;
+          const [lastItem] = dropTargets.slice(-1);
+          const lastChildEnd = lastItem.end;
+          console.log({ lastItem });
+          dragLimits.current.start = containerRect[START];
+          dragLimits.current.end = lastItem.isOverflowIndicator ? Math.max(lastItem.start, containerRect.right - draggedItem.size) : lastChildEnd - draggedItem.size;
+          setDragPortal(
+            /* @__PURE__ */ jsxRuntime.jsx(Draggable.Draggable, {
+              wrapperClassName: `tabstrip-${orientation}`,
+              ref: draggableRef,
+              rect: draggableRect,
+              element: dragElement.cloneNode(true)
+            })
+          );
+          if (draggedItem !== lastItem) {
+            const nextItem = dropTargets[draggedItem.index + 1];
+            displaceItem(nextItem, draggedItem.size, false);
+          } else {
+            const displacedItem = dropTargets[draggedItem.index];
+            displaceLastItem(displacedItem, draggedItem.size, false);
+          }
+          setIsDragging(true);
+        }
+        document.addEventListener("mousemove", dragMouseMoveHandler, false);
+        document.addEventListener("mouseup", dragMouseUpHandler, false);
+      }
+    },
+    [
+      containerRef,
+      displaceItem,
+      displaceLastItem,
+      dragMouseMoveHandler,
+      dragMouseUpHandler,
+      itemQuery,
+      orientation,
+      setIsDragging
+    ]
+  );
+  const preDragMouseMoveHandler = React.useCallback(
+    (evt) => {
+      const { POS } = dragUtils.dimensions(orientation);
+      const { [POS]: clientPos } = evt;
+      const mouseMoveDistance = Math.abs(clientPos - startPos.current);
+      if (mouseMoveDistance > dragThreshold && containerRef.current) {
+        if (mouseDownTimer.current) {
+          window.clearTimeout(mouseDownTimer.current);
+          mouseDownTimer.current = null;
+        }
+        document.removeEventListener(
+          "mousemove",
+          preDragMouseMoveHandler,
+          false
+        );
+        document.removeEventListener("mouseup", preDragMouseUpHandler, false);
+        enterDraggingState(evt);
+      }
+    },
+    [containerRef, enterDraggingState, orientation]
+  );
+  const preDragMouseUpHandler = React.useCallback(() => {
+    if (mouseDownTimer.current) {
+      window.clearTimeout(mouseDownTimer.current);
+      mouseDownTimer.current = null;
+    }
+    document.removeEventListener("mousemove", preDragMouseMoveHandler, false);
+    document.removeEventListener("mouseup", preDragMouseUpHandler, false);
+  }, [preDragMouseMoveHandler]);
+  const mouseDownHandler = React.useCallback(
+    (evt) => {
+      if (containerRef.current && !evt.defaultPrevented) {
+        const { POS } = dragUtils.dimensions(orientation);
+        const { [POS]: clientPos } = evt;
+        startPos.current = clientPos;
+        previousPos.current = clientPos;
+        document.addEventListener("mousemove", preDragMouseMoveHandler, false);
+        document.addEventListener("mouseup", preDragMouseUpHandler, false);
+        evt.persist();
+        mouseDownTimer.current = window.setTimeout(() => {
+          document.removeEventListener(
+            "mousemove",
+            preDragMouseMoveHandler,
+            false
+          );
+          document.removeEventListener("mouseup", preDragMouseUpHandler, false);
+          enterDraggingState(evt.nativeEvent);
+        }, 500);
+      }
+    },
+    [
+      containerRef,
+      enterDraggingState,
+      orientation,
+      preDragMouseMoveHandler,
+      preDragMouseUpHandler
+    ]
+  );
+  const draggedItemIndex = isDragging ? dragUtils.getDraggedItem(measuredDropTargets.current).dataIndex : -1;
+  return {
+    draggable: dragPortal,
+    dropIndicator: null,
+    draggedItemIndex,
+    isDragging,
+    onMouseDown: mouseDownHandler,
+    revealOverflowedItems: showOverflow
+  };
+};
+
+exports.useDragDropNaturalMovement = useDragDropNaturalMovement;
+//# sourceMappingURL=useDragDropNaturalMovement.js.map

package/dist-cjs/packages/lab/src/tabs/drag-drop/useDragDropNaturalMovement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragDropNaturalMovement.js","sources":["../src/tabs/drag-drop/useDragDropNaturalMovement.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback, useRef, useState } from \"react\";\n\nimport { DragDropHook, Direction } from \"./dragDropTypes\";\nimport { useDragSpacers } from \"./useDragSpacers\";\n\nimport {\n  dimensions,\n  isDraggedElement,\n  MeasuredDropTarget,\n  measureDropTargets,\n  moveDragItem,\n  getDraggedItem,\n  getNextDropTarget,\n} from \"./drag-utils\";\n\nimport { Draggable } from \"./Draggable\";\n\nconst dragThreshold = 3;\n\nexport const useDragDropNaturalMovement: DragDropHook = ({\n  onDrop,\n  orientation = \"horizontal\",\n  containerRef,\n  itemQuery = \"*\",\n}) => {\n  const [showOverflow, setShowOverflow] = useState(false);\n  const overflowMenuShowingRef = useRef(false);\n  const [isDragging, setIsDragging] = useState(false);\n  const [dragPortal, setDragPortal] = useState<JSX.Element | null>(null);\n  const draggableRef = useRef<HTMLDivElement>(null);\n  const startPos = useRef(0);\n  const previousPos = useRef(0);\n  const mouseOffset = useRef(0);\n  const mouseDownTimer = useRef<number | null>(null);\n  const dragLimits = useRef({ start: 0, end: 0 });\n  const dragDirection = useRef<Direction | undefined>();\n  const dropTarget = useRef<MeasuredDropTarget | null>(null);\n  const measuredDropTargets = useRef<MeasuredDropTarget[]>([]);\n  const { clearSpacers, displaceItem, displaceLastItem } = useDragSpacers();\n\n  const dragMouseMoveHandler = useCallback(\n    (evt: MouseEvent) => {\n      const { POS } = dimensions(orientation);\n      const { [POS]: clientPos } = evt;\n      const { current: lastClientPos } = previousPos;\n      const { current: currentDropTarget } = dropTarget;\n      const { current: dropTargets } = measuredDropTargets;\n      const draggedItem = getDraggedItem(dropTargets);\n\n      if (Math.abs(lastClientPos - clientPos) > 0) {\n        previousPos.current = clientPos;\n\n        const moveDistance = clientPos - startPos.current;\n\n        const pos = startPos.current - mouseOffset.current + moveDistance;\n        const renderPos = Math.max(\n          dragLimits.current.start,\n          Math.min(dragLimits.current.end, pos)\n        );\n\n        if (draggableRef.current && containerRef.current) {\n          // Have to redefine the following here as we're using it as a style type not a DOMRect type\n          const START = orientation === \"horizontal\" ? \"left\" : \"top\";\n          draggableRef.current.style[START] = `${renderPos}px`;\n\n          const direction = lastClientPos < clientPos ? \"fwd\" : \"bwd\";\n          const offsetPos = clientPos - mouseOffset.current;\n          const leadingEdge =\n            direction === \"fwd\" ? offsetPos + draggedItem.size : offsetPos;\n\n          const nextDropTarget = getNextDropTarget(\n            measuredDropTargets.current,\n            leadingEdge,\n            direction\n          );\n\n          if (\n            nextDropTarget &&\n            (nextDropTarget.index !== currentDropTarget?.index ||\n              direction !== dragDirection.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 {\n              const newDropTargets = moveDragItem(dropTargets, nextDropTarget);\n              const draggedItem = getDraggedItem(newDropTargets);\n\n              const nextDisplacedItem =\n                newDropTargets[draggedItem.currentIndex + 1];\n              if (nextDisplacedItem) {\n                displaceItem(\n                  nextDisplacedItem,\n                  draggedItem.size,\n                  true,\n                  direction\n                );\n              } else {\n                const displacedItem =\n                  newDropTargets[draggedItem.currentIndex - 1];\n                displaceLastItem(displacedItem, draggedItem.size, true);\n              }\n              measuredDropTargets.current = newDropTargets;\n              setShowOverflow((overflowMenuShowingRef.current = false));\n            }\n\n            dropTarget.current = nextDropTarget;\n            dragDirection.current = direction;\n          }\n        }\n      }\n    },\n    [containerRef, displaceItem, displaceLastItem, orientation]\n  );\n\n  const dragMouseUpHandler = useCallback(() => {\n    document.removeEventListener(\"mousemove\", dragMouseMoveHandler, false);\n    document.removeEventListener(\"mouseup\", dragMouseUpHandler, false);\n\n    clearSpacers();\n\n    const { current: dropTargets } = measuredDropTargets;\n    const draggedItem = getDraggedItem(dropTargets);\n    const { dataIndex = -1, index, currentIndex: toIndex } = draggedItem;\n\n    const fromIndex = dataIndex !== -1 ? dataIndex : index;\n    dropTarget.current = null;\n    dragDirection.current = undefined;\n\n    setDragPortal(null);\n\n    if (overflowMenuShowingRef.current) {\n      onDrop(fromIndex, -1);\n    } else if (fromIndex !== toIndex) {\n      onDrop(fromIndex, toIndex);\n    }\n    setShowOverflow(false);\n    setIsDragging(false);\n  }, [clearSpacers, dragMouseMoveHandler, onDrop]);\n\n  const enterDraggingState = useCallback(\n    (evt: MouseEvent) => {\n      const { POS, START } = dimensions(orientation);\n      const { [POS]: clientPos } = evt;\n\n      const evtTarget = evt.target as HTMLElement;\n      const dragElement = evtTarget.closest(itemQuery) as HTMLElement;\n      if (dragElement) {\n        // TODO this is very specific to responsive Container\n        const query = `:is(${itemQuery}:not([data-overflowed=\"true\"]),[data-overflow-indicator])`;\n        const dropTargets = measureDropTargets(\n          containerRef.current as HTMLElement,\n          orientation,\n          dragElement,\n          query\n        );\n\n        const draggedItem = dropTargets.find(isDraggedElement);\n        if (draggedItem && containerRef.current) {\n          measuredDropTargets.current = dropTargets;\n          dropTarget.current = draggedItem;\n\n          const containerRect = containerRef.current.getBoundingClientRect();\n          const draggableRect = draggedItem.element.getBoundingClientRect();\n          mouseOffset.current = clientPos - draggedItem.start;\n          const [lastItem] = dropTargets.slice(-1);\n          const lastChildEnd = lastItem.end;\n\n          console.log({ lastItem });\n\n          dragLimits.current.start = containerRect[START];\n          dragLimits.current.end = lastItem.isOverflowIndicator\n            ? Math.max(lastItem.start, containerRect.right - draggedItem.size)\n            : lastChildEnd - draggedItem.size;\n\n          setDragPortal(\n            <Draggable\n              wrapperClassName={`tabstrip-${orientation}`}\n              ref={draggableRef}\n              rect={draggableRect}\n              element={dragElement.cloneNode(true) as HTMLElement}\n            />\n          );\n\n          if (draggedItem !== lastItem) {\n            const nextItem = dropTargets[draggedItem.index + 1];\n            displaceItem(nextItem, draggedItem.size, false);\n          } else {\n            const displacedItem = dropTargets[draggedItem.index];\n            displaceLastItem(displacedItem, draggedItem.size, false);\n          }\n\n          setIsDragging(true);\n        }\n\n        document.addEventListener(\"mousemove\", dragMouseMoveHandler, false);\n        document.addEventListener(\"mouseup\", dragMouseUpHandler, false);\n      }\n    },\n    [\n      containerRef,\n      displaceItem,\n      displaceLastItem,\n      dragMouseMoveHandler,\n      dragMouseUpHandler,\n      itemQuery,\n      orientation,\n      setIsDragging,\n    ]\n  );\n\n  const preDragMouseMoveHandler = useCallback(\n    (evt: MouseEvent) => {\n      const { POS } = dimensions(orientation);\n      const { [POS]: clientPos } = evt;\n      const mouseMoveDistance = Math.abs(clientPos - startPos.current);\n      if (mouseMoveDistance > dragThreshold && containerRef.current) {\n        if (mouseDownTimer.current) {\n          window.clearTimeout(mouseDownTimer.current);\n          mouseDownTimer.current = null;\n        }\n        document.removeEventListener(\n          \"mousemove\",\n          preDragMouseMoveHandler,\n          false\n        );\n        document.removeEventListener(\"mouseup\", preDragMouseUpHandler, false);\n\n        enterDraggingState(evt);\n      }\n    },\n    [containerRef, enterDraggingState, orientation]\n  );\n\n  const preDragMouseUpHandler = useCallback(() => {\n    if (mouseDownTimer.current) {\n      window.clearTimeout(mouseDownTimer.current);\n      mouseDownTimer.current = null;\n    }\n    document.removeEventListener(\"mousemove\", preDragMouseMoveHandler, false);\n    document.removeEventListener(\"mouseup\", preDragMouseUpHandler, false);\n  }, [preDragMouseMoveHandler]);\n\n  const mouseDownHandler: MouseEventHandler = useCallback(\n    (evt) => {\n      if (containerRef.current && !evt.defaultPrevented) {\n        const { POS } = dimensions(orientation);\n        const { [POS]: clientPos } = evt;\n        startPos.current = clientPos;\n        previousPos.current = clientPos;\n\n        document.addEventListener(\"mousemove\", preDragMouseMoveHandler, false);\n        document.addEventListener(\"mouseup\", preDragMouseUpHandler, false);\n\n        evt.persist();\n\n        mouseDownTimer.current = window.setTimeout(() => {\n          document.removeEventListener(\n            \"mousemove\",\n            preDragMouseMoveHandler,\n            false\n          );\n          document.removeEventListener(\"mouseup\", preDragMouseUpHandler, false);\n\n          enterDraggingState(evt.nativeEvent);\n        }, 500);\n      }\n    },\n    [\n      containerRef,\n      enterDraggingState,\n      orientation,\n      preDragMouseMoveHandler,\n      preDragMouseUpHandler,\n    ]\n  );\n\n  const draggedItemIndex = isDragging\n    ? getDraggedItem(measuredDropTargets.current).dataIndex\n    : -1;\n\n  return {\n    draggable: dragPortal,\n    dropIndicator: null,\n    draggedItemIndex,\n    isDragging,\n    onMouseDown: mouseDownHandler,\n    revealOverflowedItems: showOverflow,\n  };\n};\n"],"names":["useState","useRef","useDragSpacers","useCallback","dimensions","getDraggedItem","getNextDropTarget","moveDragItem","draggedItem","measureDropTargets","isDraggedElement","jsx","Draggable"],"mappings":"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"}

package/dist-cjs/packages/lab/src/tabs/drag-drop/useDragSpacers.js

@@ -0,0 +1,107 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Draggable = require('./Draggable.js');
+
+const useDragSpacers = () => {
+  const animationFrame = React.useRef(0);
+  const transitioning = React.useRef(false);
+  const spacers = React.useMemo(
+    () => [Draggable.createDragSpacer(transitioning), Draggable.createDragSpacer()],
+    []
+  );
+  const clearSpacers = React.useCallback(
+    () => spacers.forEach((spacer) => {
+      var _a;
+      return (_a = spacer.parentElement) == null ? void 0 : _a.removeChild(spacer);
+    }),
+    []
+  );
+  const animateTransition = React.useCallback((size) => {
+    const [spacer1, spacer2] = spacers;
+    animationFrame.current = requestAnimationFrame(() => {
+      transitioning.current = true;
+      spacer1.style.cssText = "width: 0px";
+      spacer2.style.cssText = `width: ${size}px`;
+      spacers[0] = spacer2;
+      spacers[1] = spacer1;
+    });
+  }, []);
+  const cancelAnyPendingAnimation = React.useCallback(() => {
+    if (animationFrame.current) {
+      cancelAnimationFrame(animationFrame.current);
+      animationFrame.current = 0;
+    }
+  }, []);
+  const displaceItem = React.useCallback(
+    (item = null, size, useTransition = false, direction) => {
+      var _a, _b, _c, _d;
+      if (item) {
+        const [spacer1, spacer2] = spacers;
+        cancelAnyPendingAnimation();
+        if (useTransition) {
+          if (transitioning.current) {
+            clearSpacers();
+            spacer1.style.cssText = `width: ${size}px`;
+            spacer2.style.cssText = `width: 0px`;
+            const target = direction === "fwd" ? item.element.previousElementSibling : item.element.nextElementSibling;
+            (_a = item.element.parentElement) == null ? void 0 : _a.insertBefore(spacer1, target);
+            (_b = item.element.parentElement) == null ? void 0 : _b.insertBefore(spacer2, item.element);
+          } else {
+            (_c = item.element.parentElement) == null ? void 0 : _c.insertBefore(spacer2, item.element);
+          }
+          animateTransition(size);
+        } else {
+          spacer1.style.cssText = `width: ${size}px`;
+          (_d = item.element.parentElement) == null ? void 0 : _d.insertBefore(spacer1, item.element);
+        }
+      }
+    },
+    []
+  );
+  const displaceLastItem = React.useCallback(
+    (item, size, useTransition = false) => {
+      var _a, _b, _c, _d;
+      const [spacer1, spacer2] = spacers;
+      cancelAnyPendingAnimation();
+      if (useTransition) {
+        if (transitioning.current) {
+          clearSpacers();
+          spacer1.style.cssText = `width: ${size}px`;
+          spacer2.style.cssText = `width: 0px`;
+          (_a = item.element.parentElement) == null ? void 0 : _a.insertBefore(
+            spacer1,
+            item.element.previousElementSibling
+          );
+          (_b = item.element.parentElement) == null ? void 0 : _b.insertBefore(
+            spacer2,
+            item.element.nextElementSibling
+          );
+        } else {
+          (_c = item.element.parentElement) == null ? void 0 : _c.insertBefore(
+            spacer2,
+            item.element.nextElementSibling
+          );
+        }
+        animateTransition(size);
+      } else {
+        spacer1.style.cssText = `width: ${size}px`;
+        (_d = item.element.parentElement) == null ? void 0 : _d.insertBefore(
+          spacer1,
+          item.element.nextElementSibling
+        );
+      }
+    },
+    []
+  );
+  return {
+    displaceItem,
+    displaceLastItem,
+    clearSpacers
+  };
+};
+
+exports.useDragSpacers = useDragSpacers;
+//# sourceMappingURL=useDragSpacers.js.map

package/dist-cjs/packages/lab/src/tabs/drag-drop/useDragSpacers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragSpacers.js","sources":["../src/tabs/drag-drop/useDragSpacers.ts"],"sourcesContent":["import { useCallback, useMemo, useRef } from \"react\";\nimport { MeasuredDropTarget } from \"./drag-utils\";\nimport { createDragSpacer } from \"./Draggable\";\nimport { Direction } from \"./dragDropTypes\";\n\nexport const useDragSpacers = () => {\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    () => [createDragSpacer(transitioning), createDragSpacer()],\n    []\n  );\n\n  const clearSpacers = useCallback(\n    () =>\n      spacers.forEach((spacer) => spacer.parentElement?.removeChild(spacer)),\n    []\n  );\n\n  const animateTransition = useCallback((size: number) => {\n    const [spacer1, spacer2] = spacers;\n    animationFrame.current = requestAnimationFrame(() => {\n      transitioning.current = true;\n      spacer1.style.cssText = \"width: 0px\";\n      spacer2.style.cssText = `width: ${size}px`;\n      spacers[0] = spacer2;\n      spacers[1] = spacer1;\n    });\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      item: MeasuredDropTarget | null = null,\n      size: number,\n      useTransition = false,\n      direction?: Direction\n    ) => {\n      if (item) {\n        const [spacer1, spacer2] = spacers;\n        cancelAnyPendingAnimation();\n        if (useTransition) {\n          if (transitioning.current) {\n            clearSpacers();\n\n            spacer1.style.cssText = `width: ${size}px`;\n            spacer2.style.cssText = `width: 0px`;\n\n            const target =\n              direction === \"fwd\"\n                ? item.element.previousElementSibling\n                : item.element.nextElementSibling;\n\n            item.element.parentElement?.insertBefore(spacer1, target);\n            item.element.parentElement?.insertBefore(spacer2, item.element);\n          } else {\n            item.element.parentElement?.insertBefore(spacer2, item.element);\n          }\n          animateTransition(size);\n        } else {\n          spacer1.style.cssText = `width: ${size}px`;\n          item.element.parentElement?.insertBefore(spacer1, item.element);\n        }\n      }\n    },\n    []\n  );\n  const displaceLastItem = useCallback(\n    (item: MeasuredDropTarget, size: number, useTransition = false) => {\n      const [spacer1, spacer2] = spacers;\n      cancelAnyPendingAnimation();\n      if (useTransition) {\n        if (transitioning.current) {\n          clearSpacers();\n\n          spacer1.style.cssText = `width: ${size}px`;\n          spacer2.style.cssText = `width: 0px`;\n\n          item.element.parentElement?.insertBefore(\n            spacer1,\n            item.element.previousElementSibling\n          );\n          item.element.parentElement?.insertBefore(\n            spacer2,\n            item.element.nextElementSibling\n          );\n        } else {\n          item.element.parentElement?.insertBefore(\n            spacer2,\n            item.element.nextElementSibling\n          );\n        }\n        animateTransition(size);\n      } else {\n        spacer1.style.cssText = `width: ${size}px`;\n        item.element.parentElement?.insertBefore(\n          spacer1,\n          item.element.nextElementSibling\n        );\n      }\n    },\n    []\n  );\n\n  return {\n    displaceItem,\n    displaceLastItem,\n    clearSpacers,\n  };\n};\n"],"names":["useRef","useMemo","createDragSpacer","useCallback"],"mappings":"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"}