@homebound/beam 2.390.0 → 2.391.0

package/dist/index.cjs

@@ -129,6 +129,7 @@ __export(index_exports, {
   Palette: () => Palette,
   PresentationProvider: () => PresentationProvider,
   PreventBrowserScroll: () => PreventBrowserScroll,
+  RIGHT_SIDEBAR_MIN_WIDTH: () => RIGHT_SIDEBAR_MIN_WIDTH,
   RadioGroupField: () => RadioGroupField,
   ResponsiveGrid: () => ResponsiveGrid,
   ResponsiveGridItem: () => ResponsiveGridItem,
@@ -15605,36 +15606,39 @@ function SubmitButton(props) {
   );
 }
 
+// src/components/Layout/FormPageLayout.tsx
+var import_use_debounce5 = require("use-debounce");
+
 // src/components/RightSidebar.tsx
 var import_framer_motion2 = require("framer-motion");
 var import_react84 = require("react");
 var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
+var RIGHT_SIDEBAR_MIN_WIDTH = "250px";
 function RightSidebar({ content }) {
   const [selectedIcon, setSelectedIcon] = (0, import_react84.useState)(void 0);
   const tid = useTestIds({}, "rightSidebar");
-  const width2 = 380;
   return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { css: Css.df.jcfe.relative.pr3.$, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { css: Css.df.gap2.z1.$, children: content.map(({ icon }) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-      IconButton,
+    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { css: Css.df.jcfe.absolute.right0.pr3.$, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_framer_motion2.AnimatePresence, { children: !selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+      import_framer_motion2.motion.div,
       {
-        circle: true,
-        active: icon === selectedIcon,
-        onClick: () => setSelectedIcon(icon),
-        icon,
-        inc: 3.5
-      },
-      `${icon}-${selectedIcon}`
-    )) }) }),
+        css: Css.df.fdc.gap2.z1.$,
+        initial: { x: "100%", opacity: 0 },
+        animate: { x: 0, opacity: 1 },
+        exit: { x: "100%", opacity: 0 },
+        transition: { ease: [0.51, 0.92, 0.24, 1], duration: 0.3, delay: 0.2 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon })
+      }
+    ) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_framer_motion2.AnimatePresence, { children: selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
       import_framer_motion2.motion.div,
       {
-        initial: { x: width2, opacity: 0 },
+        initial: { x: "100%", opacity: 0 },
         animate: { x: 0, opacity: 1 },
-        transition: { delay: 0.2, ease: "linear", duration: 0.2 },
-        exit: { transition: { ease: "linear", duration: 0.2 }, x: width2 },
-        css: Css.wPx(width2).z0.$,
-        children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { css: Css.relative.topPx(-48).z0.px3.$, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { css: Css.absolute.leftPx(-24).$, children: [
+        transition: { delay: 0.2, ease: [0.51, 0.92, 0.24, 1], duration: 0.3 },
+        exit: { transition: { ease: "linear", duration: 0.2 }, x: "100%" },
+        css: Css.w100.mw(RIGHT_SIDEBAR_MIN_WIDTH).z0.$,
+        children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { css: Css.relative.z0.px3.$, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { css: Css.absolute.leftPx(-24).top0.$, children: [
             /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
               IconButton,
               {
@@ -15647,13 +15651,27 @@ function RightSidebar({ content }) {
             ),
             /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { css: Css.absolute.topPx(48).leftPx(23).h("calc(100vh - 168px)").wPx(1).bgGray300.$ })
           ] }),
-          selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { ...tid.content, css: Css.ptPx(72).$, children: content.find((sidebar) => sidebar.icon === selectedIcon)?.render() })
+          /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { css: Css.df.aic.jcfe.gap2.mb3.$, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(IconButtonList, { content, selectedIcon, onIconClick: setSelectedIcon }) }),
+          selectedIcon && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { ...tid.content, children: content.find((sidebar) => sidebar.icon === selectedIcon)?.render() })
         ] })
       },
       "rightSidebar"
     ) })
   ] });
 }
+function IconButtonList({ content, selectedIcon, onIconClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_jsx_runtime119.Fragment, { children: content.map(({ icon }) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    IconButton,
+    {
+      circle: true,
+      active: icon === selectedIcon,
+      onClick: () => onIconClick(icon),
+      icon,
+      inc: 3.5
+    },
+    `${icon}-${selectedIcon}`
+  )) });
+}
 
 // src/components/Layout/PageHeaderBreadcrumbs.tsx
 var import_react85 = require("react");
@@ -15669,14 +15687,9 @@ function PageHeaderBreadcrumbs({ breadcrumb }) {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-var import_jsx_runtime121 = (
-  // This page is `fixed` to the full screen to allow it to act as a full screen modal while content is mounted below
-  // since this layout will be replacing most superdrawers/sidebars, we keep the listing mounted below to preserve the users's
-  // scroll position & filters
-  // Adding "align-items: start" allows "position: sticky" to work within a grid for the sidebars
-  require("@emotion/react/jsx-runtime")
-);
+var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
 var headerHeightPx = 120;
+var maxContentWidthPx = 1600;
 function FormPageLayoutComponent(props) {
   const { formSections, formState, rightSideBar } = props;
   const tids = useTestIds(props, "formPageLayout");
@@ -15689,26 +15702,25 @@ function FormPageLayoutComponent(props) {
     })),
     [formSections]
   );
-  const gridColumns = "minMax(0, auto) minMax(100px, 250px) minMax(350px, 1000px) minMax(min-content, 300px) minMax(0, auto)";
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
-    "div",
-    {
-      css: Css.fixed.top0.bottom0.left0.right0.z(1e3).oya.bgWhite.dg.gtc(gridColumns).gtr("auto 1fr").cg3.ais.$,
-      ...tids,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(PageHeader, { ...props, ...tids.pageHeader }),
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(LeftNav, { sectionsWithRefs, ...tids }),
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(FormSections, { sectionsWithRefs, formState, ...tids }),
-        rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("aside", { css: Css.gr(2).gc("4 / 5").sticky.topPx(headerHeightPx).$, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(RightSidebar, { content: rightSideBar }) })
-      ]
-    }
+  const gridColumns = `minMax(100px, 250px) minMax(350px, 1000px) minMax(${RIGHT_SIDEBAR_MIN_WIDTH}, 380px)`;
+  return (
+    // This page is `fixed` to the full screen to allow it to act as a full screen modal while content is mounted below
+    // since this layout will be replacing most superdrawers/sidebars, we keep the listing mounted below to preserve the users's
+    // scroll position & filters
+    // Adding "align-items: start" allows "position: sticky" to work within a grid for the sidebars
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { css: Css.fixed.top0.bottom0.left0.right0.z(1e3).oya.bgWhite.df.jcc.aifs.$, ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { css: Css.w100.maxwPx(maxContentWidthPx).dg.gtc(gridColumns).gtr("auto 1fr").cg3.ais.$, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(PageHeader, { ...props, ...tids.pageHeader }),
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(LeftNav, { sectionsWithRefs, ...tids }),
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(FormSections, { sectionsWithRefs, formState, ...tids }),
+      rightSideBar && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("aside", { css: Css.gr(2).gc("3 / 4").sticky.topPx(headerHeightPx).$, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(RightSidebar, { content: rightSideBar }) })
+    ] }) })
   );
 }
 var FormPageLayout = import_react86.default.memo(FormPageLayoutComponent);
 function PageHeader(props) {
   const { pageTitle, breadCrumb, submitAction, cancelAction, tertiaryAction, formState } = props;
   const tids = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("header", { css: Css.gr(1).gc("2 / 5").sticky.top0.hPx(headerHeightPx).bgWhite.z5.$, ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { css: Css.py2.px3.df.jcsb.aic.$, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("header", { css: Css.gr(1).gc("1 / 4").sticky.top0.hPx(headerHeightPx).bgWhite.z5.$, ...tids, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { css: Css.py2.px3.df.jcsb.aic.$, children: [
     /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { children: [
       breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
       /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("h1", { css: Css.xl3Sb.$, ...tids.pageTitle, children: pageTitle })
@@ -15741,14 +15753,15 @@ function PageHeader(props) {
 function FormSections(props) {
   const { sectionsWithRefs, formState } = props;
   const tids = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("article", { css: Css.gr(2).gc("3 / 4").$, children: sectionsWithRefs.map(({ section, ref, sectionKey }, i) => (
+  const bottomPaddingPx = sectionsWithRefs.length > 1 ? 200 : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("article", { css: Css.gr(2).gc("2 / 3").pbPx(bottomPaddingPx).pr2.$, children: sectionsWithRefs.map(({ section, ref, sectionKey }, i) => (
     // Subgrid here allows for icon placement to the left of the section content
     /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
       "section",
       {
         id: sectionKey,
         ref,
-        css: Css.dg.gtc("50px 1fr").gtr("auto").mb3.add("scrollMarginTop", `${headerHeightPx}px`).$,
+        css: Css.dg.gtc("50px 1fr").gtr("auto").mbPx(72).add("scrollMarginTop", `${headerHeightPx}px`).$,
         ...tids.formSection,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { css: Css.gc(1).$, children: section.icon && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Icon, { icon: section.icon, inc: 3.5 }) }),
@@ -15770,7 +15783,7 @@ function LeftNav(props) {
     [sectionsWithRefs]
   );
   const activeSection = useActiveSection(sectionWithTitles);
-  return /* @__PURE__ */ (0, import_jsx_runtime121.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_runtime121.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("aside", { css: Css.gr(2).gc("1 / 2").sticky.topPx(headerHeightPx).px3.df.fdc.gap1.$, ...tids.nav, children: sectionWithTitles.map((sectionWithRef) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     SectionNavLink,
     {
       sectionWithRef,
@@ -15815,18 +15828,36 @@ function SectionNavLink(props) {
 }
 function useActiveSection(sectionsWithRefs) {
   const [activeSection, setActiveSection] = (0, import_react86.useState)(null);
+  const debouncedIntersectionCallback = (0, import_use_debounce5.useDebouncedCallback)(
+    (entries) => {
+      const sectionsInView = entries.filter((entry) => entry.isIntersecting && entry.intersectionRatio > 0.2).sort((a, b) => {
+        const ratioDiff = b.intersectionRatio - a.intersectionRatio;
+        if (Math.abs(ratioDiff) > 0.05) return ratioDiff;
+        const aTop = a.boundingClientRect.top;
+        const bTop = b.boundingClientRect.top;
+        return aTop - bTop;
+      });
+      if (sectionsInView[0]) {
+        setActiveSection(sectionsInView[0].target.id);
+      }
+    },
+    200,
+    { maxWait: 500 }
+  );
   (0, import_react86.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 }
-    );
+    const observer2 = new IntersectionObserver((entries) => debouncedIntersectionCallback(entries), {
+      /**
+       * Creating rules to determine when a section is "in view" is a real challenge given the section sizes
+       * are unknown and will likely be mixed (optimizing for large sections makes tracking small sections
+       * more difficult and vice versa). This approach attempts to solve for this by creating a narrowed
+       * "focus zone" trying to approximate where a users attention is likely to be. In this case, blocking
+       * out the top 25% and bottom 35% of the viewport to focus on the middle-top 40%.
+       */
+      rootMargin: "-25% 0px -35% 0px",
+      // Multiple threshold points allow for more granular detection of section visibility
+      threshold: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
+    });
     sectionsWithRefs.forEach(({ ref }) => {
       if (ref.current) {
         observer2.observe(ref.current);
@@ -15839,7 +15870,7 @@ function useActiveSection(sectionsWithRefs) {
         }
       });
     };
-  }, [sectionsWithRefs]);
+  }, [sectionsWithRefs, debouncedIntersectionCallback]);
   return activeSection;
 }
 
@@ -18215,6 +18246,7 @@ function useToast() {
   Palette,
   PresentationProvider,
   PreventBrowserScroll,
+  RIGHT_SIDEBAR_MIN_WIDTH,
   RadioGroupField,
   ResponsiveGrid,
   ResponsiveGridItem,