@homebound/beam 4.14.4 → 4.14.5

package/dist/index.cjs

@@ -7615,6 +7615,10 @@ var pageContentPaddingX = {
     "--mdandup_paddingRight": (0, import_runtime15.maybeCssVar)(__maybeInc6(pageContentPaddingXValue))
   }]
 };
+var selfTopSpacedAttr = "data-self-top-spaced";
+var selfTopSpaced = {
+  [selfTopSpacedAttr]: true
+};
 function headerContentPaddingX(compact = false) {
   return compact ? {
     paddingLeft: "pl1",
@@ -24484,7 +24488,9 @@ function useScrollPinnedViewportBounds(anchorRef, enabled, getPinTopPx) {
     const isPinned = rect.top <= pinTopPx + 1;
     const topPx = isPinned ? pinTopPx : Math.round(rect.top);
     const heightPx = Math.max(0, Math.round(window.innerHeight - topPx));
-    setBounds((prev) => prev?.topPx === topPx && prev?.heightPx === heightPx ? prev : { topPx, heightPx });
+    setBounds(
+      (prev) => prev?.topPx === topPx && prev?.heightPx === heightPx && prev?.isPinned === isPinned ? prev : { topPx, heightPx, isPinned }
+    );
   }, [anchorRef]);
   (0, import_react120.useLayoutEffect)(() => {
     getPinTopPxRef.current = getPinTopPx;
@@ -24703,7 +24709,10 @@ function DocumentScrollRightPane({
         borderLeftWidth: "blw_1px",
         borderColor: ["bc_var", {
           "--borderColor": "var(--b-surface-separator)"
-        }]
+        }],
+        ...!!paneBounds?.isPinned ? {
+          transition: "tsn_top_200ms_cubic_bezier_0_4_0_0_2_1_height_200ms_cubic_bezier_0_4_0_0_2_1"
+        } : {}
       }),
       initial: {
         x: slideX
@@ -25167,6 +25176,7 @@ function GridTableLayoutActionsComponent(props) {
     display: "df",
     flexDirection: "fdc",
     gap: "g_1",
+    paddingTop: "pt3",
     paddingBottom: "pb2",
     ...view === "card" ? {
       paddingBottom: "pb3"
@@ -25359,7 +25369,7 @@ function GridTableLayoutComponent(props) {
     } : {
       display: "df",
       flexDirection: "fdc"
-    }), ...tid.tableWrapper, children: tableScrollContent })
+    }), ...showTableActions ? selfTopSpaced : {}, ...tid.tableWrapper, children: tableScrollContent })
   );
 }
 var GridTableLayout = import_react130.default.memo(GridTableLayoutComponent);
@@ -29659,7 +29669,7 @@ function FormSectionLayout(props) {
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-var import_react165 = require("react");
+var import_react166 = require("react");
 var import_runtime153 = require("@homebound/truss/runtime");
 
 // src/layouts/useAutoHideOnScroll.ts
@@ -29667,49 +29677,41 @@ var import_react162 = require("react");
 var THRESHOLD = 80;
 function getInitialAutoHideState() {
   if (typeof window === "undefined" || window.scrollY <= 0) {
-    return { state: "static", atTop: true };
+    return "resting";
   }
-  return { state: "hidden", atTop: false };
+  return "hidden";
 }
 function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
   const initial = getInitialAutoHideState();
-  const [state, setState] = (0, import_react162.useState)(initial.state);
-  const stateRef = (0, import_react162.useRef)(initial.state);
-  const [atTop, setAtTop] = (0, import_react162.useState)(initial.atTop);
-  const atTopRef = (0, import_react162.useRef)(initial.atTop);
+  const [state, setState] = (0, import_react162.useState)(initial);
+  const stateRef = (0, import_react162.useRef)(initial);
   const getTopOffsetRef = (0, import_react162.useRef)(getTopOffset);
   getTopOffsetRef.current = getTopOffset;
   const lastScrollY = (0, import_react162.useRef)(Number.POSITIVE_INFINITY);
   const lastScrollHeight = (0, import_react162.useRef)(0);
   (0, import_react162.useLayoutEffect)(() => {
     if (!enabled) {
-      stateRef.current = "static";
-      atTopRef.current = true;
+      stateRef.current = "resting";
       lastScrollY.current = Number.POSITIVE_INFINITY;
       lastScrollHeight.current = 0;
-      setState("static");
-      setAtTop(true);
+      setState("resting");
       return;
     }
-    const commit = (nextState, nextAtTop) => {
+    const commit = (nextState) => {
       if (nextState !== stateRef.current) {
         stateRef.current = nextState;
         setState(nextState);
       }
-      if (nextAtTop !== atTopRef.current) {
-        atTopRef.current = nextAtTop;
-        setAtTop(nextAtTop);
-      }
     };
     const autoHideStateOnLayoutChange = (rect, topOffset) => {
       const nextAtTop = rect.top >= topOffset;
       let next = stateRef.current;
       if (nextAtTop) {
-        next = "static";
+        next = "resting";
       } else if (rect.bottom < -THRESHOLD && next !== "revealed") {
         next = "hidden";
       }
-      return { next, nextAtTop };
+      return next;
     };
     const updateAutoHideState = () => {
       const el = spacerRef.current;
@@ -29720,7 +29722,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
       lastScrollHeight.current = currentScrollHeight;
       if (window.scrollY <= 0) {
         lastScrollY.current = 0;
-        commit("static", true);
+        commit("resting");
         return;
       }
       const currentY = window.scrollY;
@@ -29728,8 +29730,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
       const topOffset = getTopOffsetRef.current?.() ?? 0;
       if (scrollHeightChanged) {
         lastScrollY.current = currentY;
-        const { next: next2, nextAtTop: nextAtTop2 } = autoHideStateOnLayoutChange(rect, topOffset);
-        commit(next2, nextAtTop2);
+        commit(autoHideStateOnLayoutChange(rect, topOffset));
         return;
       }
       const dy = currentY - lastScrollY.current;
@@ -29738,18 +29739,18 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
       const nextAtTop = rect.top >= topOffset;
       let next = stateRef.current;
       if (nextAtTop) {
-        next = "static";
+        next = "resting";
       } else if (rect.bottom < -THRESHOLD) {
         if (dy < 0 && !atBottom) next = "revealed";
         else if (dy > 0) next = "hidden";
       }
-      commit(next, nextAtTop);
+      commit(next);
     };
     updateAutoHideState();
     window.addEventListener("scroll", updateAutoHideState, { passive: true });
     return () => window.removeEventListener("scroll", updateAutoHideState);
   }, [enabled, spacerRef]);
-  return { state, atTop };
+  return { state };
 }
 
 // src/layouts/useMeasuredHeight.ts
@@ -29769,15 +29770,28 @@ function useMeasuredHeight(ref, enabled) {
   return height;
 }
 
-// src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
+// src/layouts/useTransitionAfterPaint.ts
 var import_react164 = require("react");
+function useTransitionAfterPaint(ref, transition) {
+  (0, import_react164.useLayoutEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    const id = requestAnimationFrame(() => {
+      el.style.transition = transition;
+    });
+    return () => cancelAnimationFrame(id);
+  }, [ref, transition]);
+}
+
+// src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
+var import_react165 = require("react");
 var import_jsx_runtime232 = require("react/jsx-runtime");
-var NavbarLayoutHeightContext = (0, import_react164.createContext)(0);
+var NavbarLayoutHeightContext = (0, import_react165.createContext)(0);
 function NavbarLayoutHeightProvider({ value, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
-  return (0, import_react164.useContext)(NavbarLayoutHeightContext);
+  return (0, import_react165.useContext)(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
@@ -29791,14 +29805,13 @@ function NavbarLayout(props) {
     children
   } = props;
   const tid = useTestIds(props, "navbarLayout");
-  const navMetricsRef = (0, import_react165.useRef)(null);
-  const spacerRef = (0, import_react165.useRef)(null);
+  const navMetricsRef = (0, import_react166.useRef)(null);
+  const spacerRef = (0, import_react166.useRef)(null);
   const navHeight = useMeasuredHeight(navMetricsRef, true);
   const {
-    state: autoHideState,
-    atTop
+    state: autoHideState
   } = useAutoHideOnScroll(spacerRef, true);
-  const navOccupiesViewportTop = autoHideState === "revealed" || atTop;
+  const navOccupiesViewportTop = autoHideState !== "hidden";
   const navbarOffsetPx = navHeight > 0 && navOccupiesViewportTop ? navHeight : 0;
   const cssVars = navbarOffsetPx > 0 ? {
     [beamNavbarLayoutHeightVar]: `${navbarOffsetPx}px`
@@ -29812,14 +29825,14 @@ function NavbarLayout(props) {
     }],
     width: ["w_var", {
       "--width": (0, import_runtime153.maybeCssVar)(__maybeInc33(innerWidth))
-    }],
-    transition: "transitionTop"
+    }]
   };
+  useTransitionAfterPaint(navMetricsRef, "top 200ms cubic-bezier(0.4, 0, 0.2, 1)");
   const bannerTop = `var(${beamEnvironmentBannerLayoutHeightVar}, 0px)`;
   const innerStyle = {
     top: autoHideState === "hidden" ? `calc(${bannerTop} - ${navHeight}px)` : bannerTop
   };
-  const navbarEl = (0, import_react165.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Navbar, { ...navbar }), [navbar]);
+  const navbarEl = (0, import_react166.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Navbar, { ...navbar }), [navbar]);
   return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("div", { ...(0, import_runtime153.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
@@ -29837,14 +29850,14 @@ function NavbarLayout(props) {
 }
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
-var import_react167 = require("react");
+var import_react168 = require("react");
 
 // src/hooks/useDocumentTitle.tsx
-var import_react166 = require("react");
+var import_react167 = require("react");
 function useDocumentTitle(...titleSegments) {
   const config = useDocumentTitleConfig();
   const pageTitle = joinDocumentTitleSegments(...titleSegments);
-  (0, import_react166.useLayoutEffect)(() => {
+  (0, import_react167.useLayoutEffect)(() => {
     if (!config || !pageTitle || typeof document === "undefined") {
       return;
     }
@@ -29967,17 +29980,16 @@ function PageHeaderLayout(props) {
   } = props;
   const tid = useTestIds(props, "pageHeaderLayout");
   const bannerAndNavbarHeight = useBannerAndNavbarHeight();
-  const bannerAndNavbarHeightRef = (0, import_react167.useRef)(bannerAndNavbarHeight);
+  const bannerAndNavbarHeightRef = (0, import_react168.useRef)(bannerAndNavbarHeight);
   bannerAndNavbarHeightRef.current = bannerAndNavbarHeight;
-  const getBannerAndNavbarHeight = (0, import_react167.useCallback)(() => bannerAndNavbarHeightRef.current, []);
-  const headerMetricsRef = (0, import_react167.useRef)(null);
-  const spacerRef = (0, import_react167.useRef)(null);
+  const getBannerAndNavbarHeight = (0, import_react168.useCallback)(() => bannerAndNavbarHeightRef.current, []);
+  const headerMetricsRef = (0, import_react168.useRef)(null);
+  const spacerRef = (0, import_react168.useRef)(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const {
-    state: autoHideState,
-    atTop
+    state: autoHideState
   } = useAutoHideOnScroll(spacerRef, true, getBannerAndNavbarHeight);
-  const headerOccupiesPosition = autoHideState === "revealed" || atTop;
+  const headerOccupiesPosition = autoHideState !== "hidden";
   const cssVars = headerHeight > 0 && headerOccupiesPosition ? {
     [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
   } : void 0;
@@ -29994,13 +30006,13 @@ function PageHeaderLayout(props) {
     }],
     zIndex: ["z_var", {
       "--zIndex": (0, import_runtime156.maybeCssVar)(zIndices.pageStickyHeader)
-    }],
-    transition: "transitionAll"
+    }]
   };
+  useTransitionAfterPaint(headerMetricsRef, "all 200ms cubic-bezier(0.4, 0, 0.2, 1)");
   const innerStyle = {
     top: autoHideState === "hidden" ? `calc(${outerTop} - ${headerHeight}px)` : outerTop
   };
-  const pageHeaderEl = (0, import_react167.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
+  const pageHeaderEl = (0, import_react168.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
   return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)("div", { ...(0, import_runtime156.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
@@ -30012,12 +30024,12 @@ function PageHeaderLayout(props) {
       flexShrink: "fs0",
       width: "w100"
     }), children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime156.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime236.jsx)("div", { className: "df fdc fg1 mh0 w100 mt3", ...tid.body, children })
+    /* @__PURE__ */ (0, import_jsx_runtime236.jsx)("div", { className: "df fdc fg1 mh0 w100 first_child_n_data_self_top_spaced_mt3", ...tid.body, children })
   ] }) });
 }
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
-var import_react170 = require("react");
+var import_react171 = require("react");
 
 // src/components/Headers/WorkflowHeader.tsx
 var import_jsx_runtime237 = require("react/jsx-runtime");
@@ -30034,7 +30046,7 @@ function WorkflowHeader(props) {
 }
 
 // src/layouts/Workflow/RightPaneTriggers.tsx
-var import_react168 = require("react");
+var import_react169 = require("react");
 var import_runtime157 = require("@homebound/truss/runtime");
 var import_jsx_runtime238 = require("react/jsx-runtime");
 var __maybeInc35 = (inc) => {
@@ -30055,7 +30067,7 @@ function WorkflowPageRightPaneTriggers(props) {
   } = useRightPaneActions();
   const tid = useTestIds(props, "rightPaneTriggers");
   const pageTriggerInsetPx = 24;
-  const onClick = (0, import_react168.useCallback)((trigger) => {
+  const onClick = (0, import_react169.useCallback)((trigger) => {
     openRightPane({
       content: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(RightPanePanel, { title: trigger.label, children: trigger.content })
     });
@@ -30098,18 +30110,18 @@ function WorkflowPageRightPaneTriggers(props) {
 }
 
 // src/layouts/Workflow/useUnsavedChangesGuard.tsx
-var import_react169 = require("react");
+var import_react170 = require("react");
 var import_react_router_dom9 = require("react-router-dom");
 var import_jsx_runtime239 = require("react/jsx-runtime");
 function useUnsavedChangesGuard(options) {
   const { isDirty, allowNavigation, onCancel } = options;
   const { openModal } = useModal();
-  const isDirtyRef = (0, import_react169.useRef)(isDirty);
+  const isDirtyRef = (0, import_react170.useRef)(isDirty);
   isDirtyRef.current = isDirty;
-  const allowNavigationRef = (0, import_react169.useRef)(allowNavigation);
+  const allowNavigationRef = (0, import_react170.useRef)(allowNavigation);
   allowNavigationRef.current = allowNavigation;
-  const allowCancelNavigationRef = (0, import_react169.useRef)(false);
-  (0, import_react169.useEffect)(() => {
+  const allowCancelNavigationRef = (0, import_react170.useRef)(false);
+  (0, import_react170.useEffect)(() => {
     const onBeforeUnload = (e) => {
       if (isDirtyRef.current?.()) {
         e.preventDefault();
@@ -30145,7 +30157,7 @@ function useUnsavedChangesGuard(options) {
 function UnsavedChangesNavigationModal(props) {
   const { proceed, cancelNavigation } = props;
   const { openModal, closeModal } = useModal();
-  (0, import_react169.useEffect)(() => {
+  (0, import_react170.useEffect)(() => {
     openModal({
       allowClosing: false,
       content: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
@@ -30222,7 +30234,7 @@ function WorkflowPageLayout(props) {
   const actions = /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
   const triggers = rightPaneTriggers ?? [];
   const pageTriggers = triggers.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(WorkflowPageRightPaneTriggers, { triggers }) : void 0;
-  const headerMetricsRef = (0, import_react170.useRef)(null);
+  const headerMetricsRef = (0, import_react171.useRef)(null);
   const headerHeight = useMeasuredHeight(headerMetricsRef, true);
   const headerWidth = documentScrollChromeWidth();
   const outerTop = bannerAndNavbarChromeTop();
@@ -30230,7 +30242,7 @@ function WorkflowPageLayout(props) {
     [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
   } : void 0;
   const showFooter = isMobile;
-  (0, import_react170.useLayoutEffect)(() => {
+  (0, import_react171.useLayoutEffect)(() => {
     const root = document.documentElement;
     const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
     root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
@@ -30360,7 +30372,7 @@ function FocusedFormLayout(props) {
 }
 
 // src/layouts/Workflow/StepperLayout.tsx
-var import_react171 = require("react");
+var import_react172 = require("react");
 var import_jsx_runtime243 = require("react/jsx-runtime");
 function StepperLayout(props) {
   const {
@@ -30376,7 +30388,7 @@ function StepperLayout(props) {
     ...headerProps
   } = props;
   const stepTabs = steps.map((step) => ({ ...step, value: defaultTestId(step.label) }));
-  const [currentStep, setCurrentStep] = (0, import_react171.useState)(() => getInitialStep(stepTabs, defaultStep));
+  const [currentStep, setCurrentStep] = (0, import_react172.useState)(() => getInitialStep(stepTabs, defaultStep));
   const tid = useTestIds(props, "stepperLayout");
   const { closeRightPane } = useRightPaneActions();
   const currentIndex = hasStep(stepTabs, currentStep) ? stepTabs.findIndex((step) => step.value === currentStep) : 0;
@@ -30579,9 +30591,9 @@ function StaticField(props) {
 }
 
 // src/hooks/useFilter.ts
-var import_react172 = require("react");
+var import_react173 = require("react");
 function useFilter4({ filterDefs }) {
-  const [filter, setFilter] = (0, import_react172.useState)(
+  const [filter, setFilter] = (0, import_react173.useState)(
     Object.fromEntries(
       safeEntries(filterDefs).filter(([key, def]) => def(key).defaultValue !== void 0).map(([key, def]) => [key, def(key).defaultValue])
     )
@@ -30590,7 +30602,7 @@ function useFilter4({ filterDefs }) {
 }
 
 // src/inputs/Autocomplete.tsx
-var import_react173 = require("react");
+var import_react174 = require("react");
 var import_react_aria66 = require("react-aria");
 var import_react_stately18 = require("react-stately");
 var import_jsx_runtime248 = require("react/jsx-runtime");
@@ -30610,7 +30622,7 @@ function Autocomplete(props) {
   } = props;
   const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
-  const comboBoxChildren = (0, import_react173.useCallback)(
+  const comboBoxChildren = (0, import_react174.useCallback)(
     (item) => /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(import_react_stately18.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
     [getOptionValue, getOptionLabel, getOptionMenuLabel]
   );
@@ -30635,10 +30647,10 @@ function Autocomplete(props) {
     ...others
   };
   const state = (0, import_react_stately18.useComboBoxState)(comboBoxProps);
-  const inputWrapRef = (0, import_react173.useRef)(null);
-  const inputRef = (0, import_react173.useRef)(null);
-  const listBoxRef = (0, import_react173.useRef)(null);
-  const popoverRef = (0, import_react173.useRef)(null);
+  const inputWrapRef = (0, import_react174.useRef)(null);
+  const inputRef = (0, import_react174.useRef)(null);
+  const listBoxRef = (0, import_react174.useRef)(null);
+  const popoverRef = (0, import_react174.useRef)(null);
   const { inputProps, listBoxProps, labelProps } = (0, import_react_aria66.useComboBox)(
     {
       ...comboBoxProps,
@@ -30706,7 +30718,7 @@ function Autocomplete(props) {
 }
 
 // src/inputs/ToggleButton.tsx
-var import_react174 = require("react");
+var import_react175 = require("react");
 var import_react_aria67 = require("react-aria");
 var import_react_stately19 = require("react-stately");
 var import_runtime161 = require("@homebound/truss/runtime");
@@ -30721,7 +30733,7 @@ function ToggleButton(props) {
     __storyState,
     ...otherProps
   } = props;
-  const [asyncInProgress, setAsyncInProgress] = (0, import_react174.useState)(false);
+  const [asyncInProgress, setAsyncInProgress] = (0, import_react175.useState)(false);
   const isDisabled = !!disabled || asyncInProgress;
   const ariaProps = {
     "aria-label": label,
@@ -30740,8 +30752,8 @@ function ToggleButton(props) {
       return result;
     }
   });
-  const labelRef = (0, import_react174.useRef)(null);
-  const ref = (0, import_react174.useRef)(null);
+  const labelRef = (0, import_react175.useRef)(null);
+  const ref = (0, import_react175.useRef)(null);
   const tid = useTestIds(otherProps, label);
   const {
     isPressed: isPressedFromEvents,