@homebound/beam 3.107.0 → 3.108.1

package/dist/index.cjs

@@ -19541,7 +19541,7 @@ function AiCard(props) {
         "--backgroundColor": "var(--b-surface)"
       }],
       boxShadow: "bshBasic"
-    }), ...tid.card, children })
+    }), ...others, ...tid.card, children })
   ] });
 }
 var aiBackgroundPaddingCss = {
@@ -19727,13 +19727,14 @@ var import_jsx_runtime113 = require("react/jsx-runtime");
 function AiLoadingPanel(props) {
   const {
     title = "Importing Details...",
-    message = defaultMessage
+    message = defaultMessage,
+    omitBg = false
   } = props;
   const tid = useTestIds(props, "aiLoadingPanel");
-  return (
+  const card = (
     // `status` rather than `alert` so assistive tech waits for a pause instead of interrupting, and
     // `aria-busy` so it knows the surrounding content is still settling.
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(AiPanel, { role: "status", "aria-busy": true, padding: "lg", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(AiCard, { size: "lg", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "df fdc aic gap1 w100 pt2 pb2 pl3 pr3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(AiCard, { role: "status", "aria-busy": true, size: "lg", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "df fdc aic gap1 w100 pt2 pb2 pl3 pr3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(AiLoader, {}),
       /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: "fw6 fz_18px lh_28px purple700 aiBoldBg bgcl_text WebkitBackgroundClip_text wktfc_transparent", ...tid.title, children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { ...(0, import_runtime85.trussProps)({
@@ -19745,8 +19746,9 @@ function AiLoadingPanel(props) {
         }],
         textAlign: "tac"
       }), ...tid.message, children: message })
-    ] }) }) })
+    ] }) })
   );
+  return omitBg ? card : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(AiPanel, { padding: "lg", ...tid, children: card });
 }
 var defaultMessage = "This process can take a few minutes. Feel free to keep working in another tab. Once imported, you may edit or add to content before saving.";
 
@@ -21774,7 +21776,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 +21844,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 +21860,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 +21897,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);
-    }
-  }, [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);
+      addPointerDragListeners(onMove, onDragEnd);
     }
-  }, [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 +21936,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 +21950,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 +21964,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 +22368,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)) });