@homebound/beam 3.107.0 → 3.108.0

package/dist/index.cjs

@@ -21774,7 +21774,8 @@ function DnDGrid(props) {
     children,
     gridStyles,
     onReorder,
-    activeItemStyles
+    activeItemStyles,
+    lockAxis
   } = props;
   const gridEl = (0, import_react107.useRef)(null);
   const dragEl = (0, import_react107.useRef)();
@@ -21841,15 +21842,15 @@ function DnDGrid(props) {
       const clientY = "clientY" in e ? e.clientY : e.touches[0].clientY;
       const left = dragEl.current.style.left ? parseInt(dragEl.current.style.left) : 0;
       const top = dragEl.current.style.top ? parseInt(dragEl.current.style.top) : 0;
-      const x = clientX - transformFrom.current.x - left;
-      const y = clientY - transformFrom.current.y - top;
+      const x = lockAxis === "y" ? 0 : clientX - transformFrom.current.x - left;
+      const y = lockAxis === "x" ? 0 : clientY - transformFrom.current.y - top;
       dragEl.current.style.transform = `translate(${x}px, ${y}px)`;
       const maybeTarget = "touches" in e ? document.elementFromPoint(clientX, clientY) : e.target;
       const target = maybeTarget instanceof HTMLElement ? maybeTarget?.closest(`[${gridItemIdKey}]`) : void 0;
       if (target instanceof HTMLElement && target !== cloneEl.current && target !== dragEl.current) {
         const targetPos = target.getBoundingClientRect();
         const clonePos = cloneEl.current.getBoundingClientRect();
-        const useYAxis = Math.abs(targetPos.top - clonePos.top) >= Math.abs(targetPos.left - clonePos.left);
+        const useYAxis = lockAxis === "y" ? true : lockAxis === "x" ? false : Math.abs(targetPos.top - clonePos.top) >= Math.abs(targetPos.left - clonePos.left);
         const isHalfwayPassedTarget = useYAxis ? (clientY - targetPos.top) / (targetPos.bottom - targetPos.top) > 0.5 : (clientX - targetPos.left) / (targetPos.right - targetPos.left) > 0.5;
         const shouldInsert = isHalfwayPassedTarget && target.nextSibling !== cloneEl.current || !isHalfwayPassedTarget && target.previousSibling !== cloneEl.current;
         if (shouldInsert) {
@@ -21857,7 +21858,18 @@ function DnDGrid(props) {
         }
       }
     }
-  }, []);
+  }, [lockAxis]);
+  const onDragEnd = (0, import_react107.useCallback)((e) => {
+    if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
+      e.preventDefault();
+      cloneEl.current.replaceWith(dragEl.current);
+      gridEl.current.querySelectorAll(`[${gridCloneKey}]`).forEach((el) => el.remove());
+      gridEl.current.style.cursor = "auto";
+      cloneEl.current = void 0;
+      commitReorder();
+      removePointerDragListeners(onMove, onDragEnd);
+    }
+  }, [commitReorder, onMove]);
   const onDragStart = (0, import_react107.useCallback)((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && gridEl.current) {
       const rect = dragEl.current.getBoundingClientRect();
@@ -21883,22 +21895,12 @@ function DnDGrid(props) {
       dragEl.current.style.width = `${rect.width}px`;
       dragEl.current.style.height = `${rect.height}px`;
       gridEl.current.style.cursor = "grabbing";
-      gridEl.current.addEventListener("mousemove", onMove);
-      gridEl.current.addEventListener("touchmove", onMove);
+      addPointerDragListeners(onMove, onDragEnd);
     }
-  }, [initReorder, onMove]);
-  const onDragEnd = (0, import_react107.useCallback)((e) => {
-    if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
-      e.preventDefault();
-      cloneEl.current.replaceWith(dragEl.current);
-      gridEl.current.querySelectorAll(`[${gridCloneKey}]`).forEach((el) => el.remove());
-      gridEl.current.style.cursor = "auto";
-      cloneEl.current = void 0;
-      commitReorder();
-      gridEl.current.removeEventListener("mousemove", onMove);
-      gridEl.current.removeEventListener("touchmove", onMove);
-    }
-  }, [commitReorder, onMove]);
+  }, [initReorder, onMove, onDragEnd]);
+  (0, import_react107.useEffect)(() => {
+    return () => removePointerDragListeners(onMove, onDragEnd);
+  }, [onMove, onDragEnd]);
   const onDragHandleKeyDown = (0, import_react107.useCallback)((e) => {
     const moveHandle = e.target;
     if (dragEl.current instanceof HTMLElement && moveHandle instanceof HTMLElement && gridEl.current) {
@@ -21932,8 +21934,8 @@ function DnDGrid(props) {
         document.removeEventListener("pointerdown", cancelReorder);
         return;
       }
-      const movingLeft = ["ArrowLeft", "ArrowUp"].includes(e.key);
-      const movingRight = ["ArrowRight", "ArrowDown"].includes(e.key);
+      const movingLeft = lockAxis !== "x" && e.key === "ArrowUp" || lockAxis !== "y" && e.key === "ArrowLeft";
+      const movingRight = lockAxis !== "x" && e.key === "ArrowDown" || lockAxis !== "y" && e.key === "ArrowRight";
       if (movingLeft || movingRight) {
         e.preventDefault();
         const gridItems = getGridItems();
@@ -21946,7 +21948,7 @@ function DnDGrid(props) {
         moveHandle.focus();
       }
     }
-  }, [cancelReorder, commitReorder, initReorder, getGridItems]);
+  }, [cancelReorder, commitReorder, initReorder, getGridItems, lockAxis]);
   return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(DnDGridContext.Provider, { value: {
     dragEl,
     onDragHandleKeyDown
@@ -21960,6 +21962,22 @@ function DnDGrid(props) {
 }
 var gridItemIdKey = "dndgrid-itemid";
 var gridCloneKey = "dndgrid-clone";
+function addPointerDragListeners(onMove, onEnd) {
+  document.addEventListener("mousemove", onMove);
+  document.addEventListener("touchmove", onMove);
+  document.addEventListener("mouseup", onEnd);
+  document.addEventListener("touchend", onEnd);
+  document.addEventListener("pointercancel", onEnd);
+  document.addEventListener("touchcancel", onEnd);
+}
+function removePointerDragListeners(onMove, onEnd) {
+  document.removeEventListener("mousemove", onMove);
+  document.removeEventListener("touchmove", onMove);
+  document.removeEventListener("mouseup", onEnd);
+  document.removeEventListener("touchend", onEnd);
+  document.removeEventListener("pointercancel", onEnd);
+  document.removeEventListener("touchcancel", onEnd);
+}
 function applyActiveStyles(el, activeStyles3) {
   const {
     className,
@@ -22348,7 +22366,7 @@ function DraggableChildren(props) {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(DnDGrid, { onReorder: handleReorder, gridStyles: {
+  return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(DnDGrid, { onReorder: handleReorder, lockAxis: "y", gridStyles: {
     gridTemplateColumns: "gtc_minmax_0_1fr",
     gap: "gap3"
   }, children: sorted.map((child) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(FormSectionChild, { ...child, ...tid }, child.id)) });