@homebound/beam 3.107.0 → 3.108.0

package/dist/index.d.cts

@@ -7917,6 +7917,8 @@ type DnDGridProps = {
     gridStyles?: GridStyles;
     /** Defines the styling for the GridItem that is actively being moved */
     activeItemStyles?: Properties;
+    /** Restrict drag movement to one axis. Omit to allow free 2D movement. */
+    lockAxis?: "x" | "y";
     /** Returns the new order of the GridItems. */
     onReorder: (items: string[]) => void;
 };

package/dist/index.d.ts

@@ -7917,6 +7917,8 @@ type DnDGridProps = {
     gridStyles?: GridStyles;
     /** Defines the styling for the GridItem that is actively being moved */
     activeItemStyles?: Properties;
+    /** Restrict drag movement to one axis. Omit to allow free 2D movement. */
+    lockAxis?: "x" | "y";
     /** Returns the new order of the GridItems. */
     onReorder: (items: string[]) => void;
 };

package/dist/index.js

@@ -20061,7 +20061,7 @@ function SuperDrawer() {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import React19, { createRef, useCallback as useCallback29, useEffect as useEffect26, useMemo as useMemo37, useRef as useRef53, useState as useState44 } from "react";
+import React19, { createRef, useCallback as useCallback29, useEffect as useEffect27, useMemo as useMemo37, useRef as useRef53, useState as useState44 } from "react";
 import { useButton as useButton9, useFocusRing as useFocusRing14 } from "react-aria";
 
 // src/forms/BoundCheckboxField.tsx
@@ -21245,7 +21245,7 @@ FormHeading.isFormHeading = true;
 
 // src/components/DnDGrid/DnDGrid.tsx
 import equal2 from "fast-deep-equal";
-import { useCallback as useCallback27, useRef as useRef50 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect26, useRef as useRef50 } from "react";
 
 // src/components/DnDGrid/DnDGridContext.tsx
 import { createContext as createContext9, useContext as useContext19 } from "react";
@@ -21266,7 +21266,8 @@ function DnDGrid(props) {
     children,
     gridStyles,
     onReorder,
-    activeItemStyles
+    activeItemStyles,
+    lockAxis
   } = props;
   const gridEl = useRef50(null);
   const dragEl = useRef50();
@@ -21333,15 +21334,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) {
@@ -21349,7 +21350,18 @@ function DnDGrid(props) {
         }
       }
     }
-  }, []);
+  }, [lockAxis]);
+  const onDragEnd = useCallback27((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 = useCallback27((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && gridEl.current) {
       const rect = dragEl.current.getBoundingClientRect();
@@ -21375,22 +21387,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 = useCallback27((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]);
+  useEffect26(() => {
+    return () => removePointerDragListeners(onMove, onDragEnd);
+  }, [onMove, onDragEnd]);
   const onDragHandleKeyDown = useCallback27((e) => {
     const moveHandle = e.target;
     if (dragEl.current instanceof HTMLElement && moveHandle instanceof HTMLElement && gridEl.current) {
@@ -21424,8 +21426,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();
@@ -21438,7 +21440,7 @@ function DnDGrid(props) {
         moveHandle.focus();
       }
     }
-  }, [cancelReorder, commitReorder, initReorder, getGridItems]);
+  }, [cancelReorder, commitReorder, initReorder, getGridItems, lockAxis]);
   return /* @__PURE__ */ jsx147(DnDGridContext.Provider, { value: {
     dragEl,
     onDragHandleKeyDown
@@ -21452,6 +21454,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,
@@ -21840,7 +21858,7 @@ function DraggableChildren(props) {
       }
     });
   };
-  return /* @__PURE__ */ jsx153(DnDGrid, { onReorder: handleReorder, gridStyles: {
+  return /* @__PURE__ */ jsx153(DnDGrid, { onReorder: handleReorder, lockAxis: "y", gridStyles: {
     gridTemplateColumns: "gtc_minmax_0_1fr",
     gap: "gap3"
   }, children: sorted.map((child) => /* @__PURE__ */ jsx153(FormSectionChild, { ...child, ...tid }, child.id)) });
@@ -22404,7 +22422,7 @@ function useActiveSection(sectionsWithRefs) {
   }, 200, {
     maxWait: 500
   });
-  useEffect26(() => {
+  useEffect27(() => {
     if (!("IntersectionObserver" in window)) return;
     const observer3 = new IntersectionObserver((entries) => debouncedIntersectionCallback(entries), {
       /**
@@ -22497,7 +22515,7 @@ function invertSpacing(value) {
 
 // src/components/Layout/GridTableLayout/GridTableLayout.tsx
 import { useResizeObserver as useResizeObserver7 } from "@react-aria/utils";
-import React21, { useCallback as useCallback33, useEffect as useEffect29, useLayoutEffect as useLayoutEffect9, useMemo as useMemo43, useRef as useRef55, useState as useState49 } from "react";
+import React21, { useCallback as useCallback33, useEffect as useEffect30, useLayoutEffect as useLayoutEffect9, useMemo as useMemo43, useRef as useRef55, useState as useState49 } from "react";
 
 // src/components/Filters/utils.tsx
 function getActiveFilterCount(filter) {
@@ -22523,7 +22541,7 @@ import { mergeProps as mergeProps27 } from "@homebound/truss/runtime";
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
-import { useEffect as useEffect27 } from "react";
+import { useEffect as useEffect28 } from "react";
 import { usePreventScroll as usePreventScroll2 } from "react-aria";
 import { createPortal as createPortal6 } from "react-dom";
 
@@ -22597,7 +22615,7 @@ function DocumentScrollRightPane({
   usePreventScroll2({
     isDisabled: !isMobileOverlay
   });
-  useEffect27(() => closePane, [closePane]);
+  useEffect28(() => closePane, [closePane]);
   const slideX = sm ? "100%" : paneWidth;
   const pane = /* @__PURE__ */ jsx163(AnimatePresence3, { children: isRightPaneOpen && /* @__PURE__ */ jsx163(motion3.div, { ...tid, ...mergeProps26(void 0, sm ? {
     top: bannerHeightPx
@@ -23259,12 +23277,12 @@ function ConfirmCloseModal(props) {
 }
 
 // src/components/Modal/OpenModal.tsx
-import { useEffect as useEffect28 } from "react";
+import { useEffect as useEffect29 } from "react";
 import { jsx as jsx175 } from "react/jsx-runtime";
 function OpenModal(props) {
   const { openModal } = useModal();
   const { size, children, keepOpen, aiMode } = props;
-  useEffect28(() => {
+  useEffect29(() => {
     if (!keepOpen) {
       openModal({ size, content: children, aiMode });
     }
@@ -23886,7 +23904,7 @@ function GridTableLayoutComponent(props) {
   const tableWrapperRef = useRef55(null);
   useSetTableActionsHeight(tableWrapperRef, tableActionsRef, inDocumentScrollLayout && showTableActions);
   const visibleColumnIds = useComputed(() => api.getVisibleColumnIds(), [api]);
-  useEffect29(() => {
+  useEffect30(() => {
     if (layoutState?.setVisibleColumnIds) {
       layoutState.setVisibleColumnIds(visibleColumnIds);
     }
@@ -24059,7 +24077,7 @@ function PreventBrowserScroll({
 
 // src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion4 } from "framer-motion";
-import { useEffect as useEffect30 } from "react";
+import { useEffect as useEffect31 } from "react";
 import { trussProps as trussProps105, maybeCssVar as maybeCssVar52 } from "@homebound/truss/runtime";
 import { Fragment as Fragment41, jsx as jsx188, jsxs as jsxs92 } from "react/jsx-runtime";
 var __maybeInc24 = (inc) => {
@@ -24078,7 +24096,7 @@ function RightPaneLayout(props) {
     clearPane,
     closePane
   } = useRightPaneContext();
-  useEffect30(() => closePane, [closePane]);
+  useEffect31(() => closePane, [closePane]);
   return /* @__PURE__ */ jsx188("div", { className: "h100 df oxh", children: /* @__PURE__ */ jsxs92(Fragment41, { children: [
     /* @__PURE__ */ jsx188("div", { ...trussProps105({
       ...{
@@ -24190,7 +24208,7 @@ function ScrollableFooter(props) {
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
 import { AnimatePresence as AnimatePresence5, motion as motion5 } from "framer-motion";
-import { useEffect as useEffect31, useState as useState50 } from "react";
+import { useEffect as useEffect32, useState as useState50 } from "react";
 
 // src/components/Layout/TableReviewLayout/SidePanel.tsx
 import { jsx as jsx190, jsxs as jsxs93 } from "react/jsx-runtime";
@@ -24231,7 +24249,7 @@ function TableReviewLayout(props) {
   } = props;
   const tid = useTestIds(props, "tableReviewLayout");
   const [isPanelVisible, setIsPanelVisible] = useState50(!!panelContent);
-  useEffect31(() => {
+  useEffect32(() => {
     setIsPanelVisible(!!panelContent);
   }, [panelContent]);
   function handleClosePanel() {
@@ -25316,7 +25334,7 @@ function useResponsiveGrid(props) {
 }
 
 // src/components/Grid/useResponsiveGridItem.ts
-import { useContext as useContext24, useEffect as useEffect32, useMemo as useMemo48 } from "react";
+import { useContext as useContext24, useEffect as useEffect33, useMemo as useMemo48 } from "react";
 var injectedResponsiveGridClasses = /* @__PURE__ */ new Set();
 var responsiveGridStyleEl;
 function useResponsiveGridItem(props) {
@@ -25346,7 +25364,7 @@ function useResponsiveGridItem(props) {
   };
 }
 function useResponsiveGridItemStyle(className, cssText) {
-  useEffect32(
+  useEffect33(
     function() {
       if (!className || !cssText || typeof document === "undefined") return;
       if (!responsiveGridStyleEl) {
@@ -25608,7 +25626,7 @@ var jumpLinkStyles = {
 
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect10, useResizeObserver as useResizeObserver9 } from "@react-aria/utils";
-import { useCallback as useCallback34, useEffect as useEffect33, useRef as useRef61, useState as useState53 } from "react";
+import { useCallback as useCallback34, useEffect as useEffect34, useRef as useRef61, useState as useState53 } from "react";
 import { trussProps as trussProps116, maybeCssVar as maybeCssVar57 } from "@homebound/truss/runtime";
 import { jsx as jsx205, jsxs as jsxs103 } from "react/jsx-runtime";
 function MaxLines({
@@ -25622,7 +25640,7 @@ function MaxLines({
     if (!elRef.current) return;
     setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, []);
-  useEffect33(() => {
+  useEffect34(() => {
     setExpanded(false);
   }, [children]);
   const onResize = useCallback34(() => {
@@ -25655,7 +25673,7 @@ import { camelCase as camelCase6 } from "change-case";
 // src/components/AppNav/AppNavGroup.tsx
 import { useResizeObserver as useResizeObserver10 } from "@react-aria/utils";
 import { camelCase as camelCase5, kebabCase } from "change-case";
-import { useCallback as useCallback36, useEffect as useEffect34, useMemo as useMemo51, useState as useState55 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect35, useMemo as useMemo51, useState as useState55 } from "react";
 
 // src/components/AppNav/AppNavGroupTrigger.tsx
 import { useMemo as useMemo50, useRef as useRef62 } from "react";
@@ -25895,7 +25913,7 @@ function AppNavGroupDisclosure(props) {
     current: contentEl
   }), [contentEl]);
   const [contentHeight, setContentHeight] = useState55(expanded ? "auto" : "0");
-  useEffect34(() => {
+  useEffect35(() => {
     setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
   }, [expanded, contentEl]);
   const onResize = useCallback36(() => {
@@ -26045,7 +26063,7 @@ function AppNavItems(props) {
 
 // src/components/Navbar/NavbarMobileMenu.tsx
 import { AnimatePresence as AnimatePresence6, motion as motion6 } from "framer-motion";
-import { useEffect as useEffect35, useState as useState57 } from "react";
+import { useEffect as useEffect36, useState as useState57 } from "react";
 import { FocusScope as FocusScope5, usePreventScroll as usePreventScroll3 } from "react-aria";
 import { createPortal as createPortal8 } from "react-dom";
 import { useLocation } from "react-router-dom";
@@ -26097,7 +26115,7 @@ function NavbarMobileMenu(props) {
     isDisabled: !isOpen
   });
   const close = () => setIsOpen(false);
-  useEffect35(() => {
+  useEffect36(() => {
     close();
   }, [pathname, search]);
   return /* @__PURE__ */ jsxs107(Fragment47, { children: [
@@ -26554,7 +26572,7 @@ import {
   createContext as createContext15,
   useCallback as useCallback38,
   useContext as useContext27,
-  useEffect as useEffect36,
+  useEffect as useEffect37,
   useMemo as useMemo54,
   useRef as useRef64,
   useState as useState59
@@ -26588,7 +26606,7 @@ function SideNavLayoutProvider(props) {
   );
   const bp = useBreakpoint();
   const prevMdAndUp = useRef64(bp.mdAndUp);
-  useEffect36(() => {
+  useEffect37(() => {
     if (prevMdAndUp.current && !bp.mdAndUp) {
       setNavStateInternal((prev) => prev === "expanded" ? "collapse" : prev);
     }
@@ -26675,7 +26693,7 @@ function SideNav(props) {
 }
 
 // src/components/Snackbar/useSnackbar.tsx
-import { useCallback as useCallback39, useEffect as useEffect37 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect38 } from "react";
 function useSnackbar() {
   const { setNotices, setOffset } = useSnackbarContext();
   const onClose = useCallback39(
@@ -26725,7 +26743,7 @@ function useSnackbar() {
     [onClose, setNotices]
   );
   const closeNotice = useCallback39((id) => onClose(id), [onClose]);
-  const useSnackbarOffset = ({ bottom }) => useEffect37(() => {
+  const useSnackbarOffset = ({ bottom }) => useEffect38(() => {
     setOffset({ bottom });
     return () => setOffset({});
   }, [bottom]);
@@ -27445,7 +27463,7 @@ function visit(rows, fn) {
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase7 } from "change-case";
-import { useEffect as useEffect38, useMemo as useMemo56, useRef as useRef67, useState as useState60 } from "react";
+import { useEffect as useEffect39, useMemo as useMemo56, useRef as useRef67, useState as useState60 } from "react";
 import { mergeProps as mergeProps35, useFocusRing as useFocusRing20, useHover as useHover23 } from "react-aria";
 import { matchPath } from "react-router";
 import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
@@ -27508,7 +27526,7 @@ function Tabs(props) {
   const tid = useTestIds(others, "tabs");
   const [active, setActive] = useState60(selected);
   const ref = useRef67(null);
-  useEffect38(() => setActive(selected), [selected]);
+  useEffect39(() => setActive(selected), [selected]);
   function onKeyUp(e) {
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
       const nextTabValue = getNextTabValue(active, e.key, tabs);
@@ -28459,7 +28477,7 @@ function WorkflowHeader(props) {
 }
 
 // src/layouts/Workflow/useUnsavedChangesGuard.tsx
-import { useEffect as useEffect39, useRef as useRef71 } from "react";
+import { useEffect as useEffect40, useRef as useRef71 } from "react";
 import { useBlocker } from "react-router-dom";
 import { jsx as jsx237 } from "react/jsx-runtime";
 function useUnsavedChangesGuard(options) {
@@ -28467,7 +28485,7 @@ function useUnsavedChangesGuard(options) {
   const { openModal } = useModal();
   const isDirtyRef = useRef71(isDirty);
   isDirtyRef.current = isDirty;
-  useEffect39(() => {
+  useEffect40(() => {
     const onBeforeUnload = (e) => {
       if (isDirtyRef.current?.()) {
         e.preventDefault();
@@ -28493,7 +28511,7 @@ function useUnsavedChangesGuard(options) {
 function UnsavedChangesNavigationModal(props) {
   const { proceed, cancelNavigation } = props;
   const { openModal, closeModal } = useModal();
-  useEffect39(() => {
+  useEffect40(() => {
     openModal({
       allowClosing: false,
       content: /* @__PURE__ */ jsx237(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })