@homebound/beam 2.382.0 → 2.383.0

package/dist/index.cjs

@@ -6874,7 +6874,7 @@ function NavLink(props) {
   const { buttonProps, isPressed } = (0, import_react_aria7.useButton)({ ...ariaProps, elementType: href ? "a" : "button" }, ref);
   const { hoverProps, isHovered } = (0, import_react_aria7.useHover)({ isDisabled });
   const { isFocusVisible, focusProps } = (0, import_react_aria7.useFocusRing)(ariaProps);
-  const { baseStyles: baseStyles4, activeStyles: activeStyles2, focusRingStyles: focusRingStyles2, hoverStyles: hoverStyles3, disabledStyles: disabledStyles3, pressedStyles: pressedStyles3 } = (0, import_react21.useMemo)(
+  const { baseStyles: baseStyles4, activeStyles: activeStyles3, focusRingStyles: focusRingStyles2, hoverStyles: hoverStyles4, disabledStyles: disabledStyles3, pressedStyles: pressedStyles3 } = (0, import_react21.useMemo)(
     () => getNavLinkStyles(variant, contrast),
     [variant, contrast]
   );
@@ -6887,10 +6887,10 @@ function NavLink(props) {
     "aria-current": active ? "page" : void 0,
     css: {
       ...baseStyles4,
-      ...active && activeStyles2,
+      ...active && activeStyles3,
       ...isDisabled && disabledStyles3,
       ...isFocusVisible && focusRingStyles2,
-      ...isHovered && hoverStyles3,
+      ...isHovered && hoverStyles4,
       ...isPressed && pressedStyles3
     }
   };
@@ -7086,7 +7086,7 @@ function Button(props) {
   );
   const { isFocusVisible, focusProps } = (0, import_react_aria9.useFocusRing)(ariaProps);
   const { hoverProps, isHovered } = (0, import_react_aria9.useHover)(ariaProps);
-  const { baseStyles: baseStyles4, hoverStyles: hoverStyles3, disabledStyles: disabledStyles3, pressedStyles: pressedStyles3, focusStyles: focusStyles2 } = (0, import_react23.useMemo)(
+  const { baseStyles: baseStyles4, hoverStyles: hoverStyles4, disabledStyles: disabledStyles3, pressedStyles: pressedStyles3, focusStyles: focusStyles2 } = (0, import_react23.useMemo)(
     () => getButtonStyles(variant, size, contrast),
     [variant, size, contrast]
   );
@@ -7104,7 +7104,7 @@ function Button(props) {
     css: {
       ...Css.buttonBase.tt("inherit").$,
       ...baseStyles4,
-      ...isHovered && !isPressed ? hoverStyles3 : {},
+      ...isHovered && !isPressed ? hoverStyles4 : {},
       ...isPressed ? pressedStyles3 : {},
       ...isDisabled || asyncInProgress ? { ...disabledStyles3, ...Css.cursorNotAllowed.$ } : {},
       ...isFocusVisible || forceFocusStyles ? focusStyles2 : {}
@@ -14028,7 +14028,7 @@ var variantStyles2 = {
 
 // src/components/BeamContext.tsx
 var import_react91 = require("react");
-var import_react_aria43 = require("react-aria");
+var import_react_aria44 = require("react-aria");
 
 // src/components/Modal/Modal.tsx
 var import_utils71 = require("@react-aria/utils");
@@ -14364,6 +14364,7 @@ function SuperDrawer() {
 // src/components/Layout/FormPageLayout.tsx
 var import_mobx_react20 = require("mobx-react");
 var import_react84 = __toESM(require("react"), 1);
+var import_react_aria43 = require("react-aria");
 
 // src/forms/BoundCheckboxField.tsx
 var import_mobx_react2 = require("mobx-react");
@@ -15484,6 +15485,15 @@ var headerHeightPx = 120;
 function FormPageLayoutComponent(props) {
   const { formSections, formState } = props;
   const tids = useTestIds(props, "formPageLayout");
+  const sectionsWithRefs = (0, import_react84.useMemo)(
+    () => formSections.map((section, id) => ({
+      section,
+      ref: (0, import_react84.createRef)(),
+      // Unique key for each section to use in the observer
+      sectionKey: `section-${section.title ?? id}`
+    })),
+    [formSections]
+  );
   const gridColumns = "minMax(0, auto) minMax(100px, 250px) minMax(350px, 1000px) minMax(min-content, 300px) minMax(0, auto)";
   return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
     "div",
@@ -15492,8 +15502,8 @@ function FormPageLayoutComponent(props) {
       ...tids,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(PageHeader, { ...props, ...tids.pageHeader }),
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(LeftNav, { formSections, ...tids.nav }),
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(FormSections, { formSections, formState, ...tids }),
+        /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(LeftNav, { sectionsWithRefs, ...tids }),
+        /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(FormSections, { sectionsWithRefs, formState, ...tids }),
         /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(SidebarContent, {})
       ]
     }
@@ -15546,14 +15556,16 @@ function PageHeader(props) {
   ] }) });
 }
 function FormSections(props) {
-  const { formSections, formState } = props;
+  const { sectionsWithRefs, formState } = props;
   const tids = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("article", { css: Css.gr(2).gc("3 / 4").$, children: formSections.map((section, i) => (
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("article", { css: Css.gr(2).gc("3 / 4").$, children: sectionsWithRefs.map(({ section, ref, sectionKey }, i) => (
     // Subgrid here allows for icon placement to the left of the section content
     /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
       "section",
       {
-        css: Css.dg.gtc("50px 1fr").gtr("auto").mb3.$,
+        id: sectionKey,
+        ref,
+        css: Css.dg.gtc("50px 1fr").gtr("auto").mb3.add("scrollMarginTop", `${headerHeightPx}px`).$,
         ...tids.formSection,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { css: Css.gc(1).$, children: section.icon && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Icon, { icon: section.icon, inc: 3.5 }) }),
@@ -15563,17 +15575,93 @@ function FormSections(props) {
           ] })
         ]
       },
-      `section-${section.title ?? i}`
+      sectionKey
     )
   )) });
 }
 function LeftNav(props) {
+  const { sectionsWithRefs } = props;
   const tids = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("aside", { css: Css.gr(2).gc("2 / 3").sticky.topPx(headerHeightPx).px3.df.fdc.gap1.$, ...tids });
+  const sectionWithTitles = (0, import_react84.useMemo)(
+    () => sectionsWithRefs.filter(({ section }) => !!section.title),
+    [sectionsWithRefs]
+  );
+  const activeSection = useActiveSection(sectionWithTitles);
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("aside", { css: Css.gr(2).gc("2 / 3").sticky.topPx(headerHeightPx).px3.df.fdc.gap1.$, ...tids.nav, children: sectionWithTitles.map((sectionWithRef) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    SectionNavLink,
+    {
+      sectionWithRef,
+      activeSection,
+      ...tids
+    },
+    `nav-${sectionWithRef.sectionKey}`
+  )) });
+}
+var activeStyles = Css.smBd.boxShadow(`inset 3px 0px 0 0px ${"rgba(37, 99, 235, 1)" /* Blue600 */}`).$;
+var hoverStyles2 = Css.bgBlue50.smBd.blue900.boxShadow(`inset 3px 0px 0 0px ${"rgba(30, 58, 138, 1)" /* Blue900 */}`).$;
+var defaultFocusRingStyles = Css.relative.z2.bshFocus.$;
+function SectionNavLink(props) {
+  const { sectionWithRef, activeSection } = props;
+  const { section, ref: sectionRef } = sectionWithRef;
+  const active = activeSection === sectionWithRef.sectionKey;
+  const handleNavClick = (0, import_react84.useCallback)(() => {
+    sectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, [sectionRef]);
+  const tids = useTestIds(props);
+  const buttonRef = (0, import_react84.useRef)(null);
+  const { buttonProps, isPressed } = (0, import_react_aria43.useButton)({ onPress: handleNavClick }, buttonRef);
+  const { isFocusVisible, focusProps } = (0, import_react_aria43.useFocusRing)();
+  const { hoverProps, isHovered } = useHover({});
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    "button",
+    {
+      ref: buttonRef,
+      ...buttonProps,
+      ...focusProps,
+      ...hoverProps,
+      css: {
+        ...Css.buttonBase.wsn.tal.smMd.blue600.px2.py1.br0.h100.$,
+        ...isFocusVisible ? defaultFocusRingStyles : {},
+        ...active ? activeStyles : {},
+        ...isPressed ? activeStyles : isHovered ? hoverStyles2 : {}
+      },
+      ...tids.sectionNavLink,
+      children: section.title
+    }
+  );
 }
 function SidebarContent() {
   return null;
 }
+function useActiveSection(sectionsWithRefs) {
+  const [activeSection, setActiveSection] = (0, import_react84.useState)(null);
+  (0, import_react84.useEffect)(() => {
+    if (!("IntersectionObserver" in window)) return;
+    const observer2 = new IntersectionObserver(
+      (entries) => {
+        const sectionsInView = entries.filter((entry) => entry.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio);
+        if (sectionsInView[0]) {
+          setActiveSection(sectionsInView[0].target.id);
+        }
+      },
+      // Threshold defines when the observer callback should be triggered, we may need to refine this based on more real word layouts
+      { rootMargin: `-${headerHeightPx}px 0px 0px 0px`, threshold: 0.4 }
+    );
+    sectionsWithRefs.forEach(({ ref }) => {
+      if (ref.current) {
+        observer2.observe(ref.current);
+      }
+    });
+    return () => {
+      sectionsWithRefs.forEach(({ ref }) => {
+        if (ref.current) {
+          observer2.unobserve(ref.current);
+        }
+      });
+    };
+  }, [sectionsWithRefs]);
+  return activeSection;
+}
 
 // src/components/Layout/FullBleed.tsx
 var import_react86 = require("react");
@@ -15832,7 +15920,7 @@ function BeamProvider({ children, ...presentationProps }) {
     };
   }, [modalBodyDiv, modalFooterDiv, modalHeaderDiv, sdHeaderDiv]);
   return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(BeamContext.Provider, { value: { ...context }, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(PresentationProvider, { ...presentationProps, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(RightPaneProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(SnackbarProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(ToastProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_react_aria43.OverlayProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_react_aria44.OverlayProvider, { children: [
       children,
       modalRef.current && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Modal, { ...modalRef.current })
     ] }),
@@ -15858,14 +15946,14 @@ function useBeamContext() {
 
 // src/components/ButtonDatePicker.tsx
 var import_react92 = require("react");
-var import_react_aria44 = require("react-aria");
+var import_react_aria45 = require("react-aria");
 var import_react_stately17 = require("react-stately");
 var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
 function ButtonDatePicker(props) {
   const { defaultOpen, disabled, trigger, onSelect, ...datePickerProps } = props;
   const state = (0, import_react_stately17.useMenuTriggerState)({ isOpen: defaultOpen });
   const buttonRef = (0, import_react92.useRef)(null);
-  const { menuTriggerProps, menuProps } = (0, import_react_aria44.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
+  const { menuTriggerProps, menuProps } = (0, import_react_aria45.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
   const tid = useTestIds(
     props,
     isTextButton(trigger) ? defaultTestId(labelOr(trigger, "buttonDatePicker")) : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name
@@ -15885,7 +15973,7 @@ function ButtonDatePicker(props) {
 
 // src/components/ButtonGroup.tsx
 var import_react93 = require("react");
-var import_react_aria45 = require("react-aria");
+var import_react_aria46 = require("react-aria");
 var import_jsx_runtime128 = (
   // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
   require("@emotion/react/jsx-runtime")
@@ -15902,9 +15990,9 @@ function GroupButton(props) {
   const { icon, iconInc, iconColor, text, active, onClick: onPress, disabled, size, tooltip, ...otherProps } = props;
   const ariaProps = { onPress, isDisabled: !!disabled, ...otherProps };
   const ref = (0, import_react93.useRef)(null);
-  const { buttonProps, isPressed } = (0, import_react_aria45.useButton)(ariaProps, ref);
-  const { isFocusVisible, focusProps } = (0, import_react_aria45.useFocusRing)();
-  const { hoverProps, isHovered } = (0, import_react_aria45.useHover)(ariaProps);
+  const { buttonProps, isPressed } = (0, import_react_aria46.useButton)(ariaProps, ref);
+  const { isFocusVisible, focusProps } = (0, import_react_aria46.useFocusRing)();
+  const { hoverProps, isHovered } = (0, import_react_aria46.useHover)(ariaProps);
   const tid = useTestIds(props);
   return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { css: getButtonStyles2(), children: maybeTooltip({
     title: resolveTooltip(disabled, tooltip),
@@ -15919,9 +16007,9 @@ function GroupButton(props) {
         css: {
           ...Css.buttonBase.px2.br0.h100.$,
           "&:disabled": Css.gray400.cursorNotAllowed.bcGray300.$,
-          ...isFocusVisible ? defaultFocusRingStyles : {},
-          ...active ? activeStyles : {},
-          ...isPressed ? pressedStyles2 : isHovered ? hoverStyles2 : {},
+          ...isFocusVisible ? defaultFocusRingStyles2 : {},
+          ...active ? activeStyles2 : {},
+          ...isPressed ? pressedStyles2 : isHovered ? hoverStyles3 : {},
           ...icon ? iconStyles2[size] : {}
         },
         ...tid[defaultTestId(typeof text === "string" && text || icon || "button")],
@@ -15934,9 +16022,9 @@ function GroupButton(props) {
   }) });
 }
 var pressedStyles2 = Css.bgGray200.$;
-var activeStyles = Css.bgGray300.$;
-var hoverStyles2 = Css.bgGray100.$;
-var defaultFocusRingStyles = Css.relative.z2.bshFocus.$;
+var activeStyles2 = Css.bgGray300.$;
+var hoverStyles3 = Css.bgGray100.$;
+var defaultFocusRingStyles2 = Css.relative.z2.bshFocus.$;
 function getButtonStyles2() {
   return {
     ...Css.z1.bgWhite.bcGray300.bw1.ba.gray900.br0.oh.$,
@@ -15961,7 +16049,7 @@ var iconStyles2 = {
 
 // src/components/ButtonMenu.tsx
 var import_react94 = require("react");
-var import_react_aria46 = require("react-aria");
+var import_react_aria47 = require("react-aria");
 var import_react_stately18 = require("react-stately");
 var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
 function ButtonMenu(props) {
@@ -15973,7 +16061,7 @@ function ButtonMenu(props) {
   }
   const state = (0, import_react_stately18.useMenuTriggerState)({ isOpen: defaultOpen });
   const buttonRef = (0, import_react94.useRef)(null);
-  const { menuTriggerProps, menuProps } = (0, import_react_aria46.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
+  const { menuTriggerProps, menuProps } = (0, import_react_aria47.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
   const tid = useTestIds(
     props,
     isTextButton(trigger) ? labelOr(trigger, "buttonMenu") : isNavLinkButton(trigger) ? defaultTestId(trigger.navLabel) : isIconButton(trigger) ? trigger.icon : trigger.name
@@ -16234,12 +16322,12 @@ var gridCloneKey = "dndgrid-clone";
 var activeGridItemClass = "dndgrid-active";
 
 // src/components/DnDGrid/DnDGridItemHandle.tsx
-var import_react_aria47 = require("react-aria");
+var import_react_aria48 = require("react-aria");
 var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
 function DnDGridItemHandle(props) {
   const { dragHandleProps, icon = "move", compact = false, color } = props;
-  const { focusProps, isFocusVisible } = (0, import_react_aria47.useFocusRing)();
-  const { hoverProps, isHovered } = (0, import_react_aria47.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_react_aria48.useFocusRing)();
+  const { hoverProps, isHovered } = (0, import_react_aria48.useHover)({});
   const tid = useTestIds(props, "dragHandle");
   const iconButtonNormal2 = Css.hPx(28).wPx(28).br8.bw2.$;
   const iconButtonCompact2 = Css.hPx(18).wPx(18).br4.bw1.$;
@@ -16251,7 +16339,7 @@ function DnDGridItemHandle(props) {
         ...Css.cursor("grab").bcTransparent.bss.bgTransparent.outline0.dif.aic.jcc.transition.if(isFocusVisible).bcBlue700.$,
         ...isHovered && Css.bgGray200.$
       },
-      ...(0, import_react_aria47.mergeProps)(dragHandleProps, focusProps, hoverProps),
+      ...(0, import_react_aria48.mergeProps)(dragHandleProps, focusProps, hoverProps),
       ...tid,
       children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Icon, { icon, inc: compact ? 2 : void 0, color })
     }
@@ -17230,7 +17318,7 @@ var snackbarId = 1;
 
 // src/components/Stepper.tsx
 var import_react106 = require("react");
-var import_react_aria48 = require("react-aria");
+var import_react_aria49 = require("react-aria");
 var import_jsx_runtime152 = require("@emotion/react/jsx-runtime");
 function Stepper(props) {
   const { steps, currentStep, onChange } = props;
@@ -17274,9 +17362,9 @@ function StepButton(props) {
   const { label, disabled, state, isCurrent, onClick } = props;
   const ariaProps = { onPress: onClick, isDisabled: disabled };
   const ref = (0, import_react106.useRef)(null);
-  const { buttonProps, isPressed } = (0, import_react_aria48.useButton)(ariaProps, ref);
-  const { isFocusVisible, focusProps } = (0, import_react_aria48.useFocusRing)();
-  const { hoverProps, isHovered } = (0, import_react_aria48.useHover)(ariaProps);
+  const { buttonProps, isPressed } = (0, import_react_aria49.useButton)(ariaProps, ref);
+  const { isFocusVisible, focusProps } = (0, import_react_aria49.useFocusRing)();
+  const { hoverProps, isHovered } = (0, import_react_aria49.useHover)(ariaProps);
   const focusRingStyles2 = state === "error" ? Css.bshDanger.$ : Css.bshFocus.$;
   const tid = useTestIds(props, "stepButton");
   return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
@@ -17563,7 +17651,7 @@ var SuperDrawerContent = ({ children, actions }) => {
 // src/components/Tabs.tsx
 var import_change_case7 = require("change-case");
 var import_react108 = require("react");
-var import_react_aria49 = require("react-aria");
+var import_react_aria50 = require("react-aria");
 var import_react_router2 = require("react-router");
 var import_react_router_dom5 = require("react-router-dom");
 var import_jsx_runtime157 = require("@emotion/react/jsx-runtime");
@@ -17606,7 +17694,7 @@ function Tabs(props) {
   const selected = isRouteTabs(props) ? uniqueTabValue(
     props.tabs.find((t) => !!(0, import_react_router2.matchPath)(location.pathname, { path: t.path, exact: true })) || props.tabs[0]
   ) : props.selected;
-  const { isFocusVisible, focusProps } = (0, import_react_aria49.useFocusRing)();
+  const { isFocusVisible, focusProps } = (0, import_react_aria50.useFocusRing)();
   const tid = useTestIds(others, "tabs");
   const [active, setActive] = (0, import_react108.useState)(selected);
   const ref = (0, import_react108.useRef)(null);
@@ -17651,8 +17739,8 @@ function TabImpl(props) {
   const { tab, onClick, active, onKeyUp, onBlur, focusProps, isFocusVisible = false, ...others } = props;
   const { disabled = false, name: label, icon, endAdornment } = tab;
   const isDisabled = !!disabled;
-  const { hoverProps, isHovered } = (0, import_react_aria49.useHover)({ isDisabled });
-  const { baseStyles: baseStyles4, activeStyles: activeStyles2, focusRingStyles: focusRingStyles2, hoverStyles: hoverStyles3, disabledStyles: disabledStyles3, activeHoverStyles } = (0, import_react108.useMemo)(
+  const { hoverProps, isHovered } = (0, import_react_aria50.useHover)({ isDisabled });
+  const { baseStyles: baseStyles4, activeStyles: activeStyles3, focusRingStyles: focusRingStyles2, hoverStyles: hoverStyles4, disabledStyles: disabledStyles3, activeHoverStyles } = (0, import_react108.useMemo)(
     () => getTabStyles(),
     []
   );
@@ -17667,14 +17755,14 @@ function TabImpl(props) {
     ...others,
     css: {
       ...baseStyles4,
-      ...active && activeStyles2,
+      ...active && activeStyles3,
       ...isDisabled && disabledStyles3,
-      ...isHovered && hoverStyles3,
+      ...isHovered && hoverStyles4,
       ...isHovered && active && activeHoverStyles,
       ...isFocusVisible && active && focusRingStyles2
     }
   };
-  const interactiveProps = (0, import_react_aria49.mergeProps)(focusProps, hoverProps, {
+  const interactiveProps = (0, import_react_aria50.mergeProps)(focusProps, hoverProps, {
     onKeyUp,
     onBlur,
     ...isRouteTab(tab) ? {} : { onClick: () => onClick(tab.value) }