@homebound/beam 2.390.0 → 2.392.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,
@@ -5025,6 +5026,10 @@ var Icons = {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "12", y: "10", width: "10", height: "2" })
   ] }),
   cube: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19.406 4.08601L10.406 0.0860059C10.146 -0.0289941 9.853 -0.0289941 9.593 0.0860059L0.593 4.08601C0.573 4.09501 0.559 4.11001 0.539 4.12101C0.511 4.13501 0.481 4.14401 0.455 4.16101C0.433 4.17601 0.416 4.19501 0.395 4.21101C0.367 4.23201 0.34 4.25501 0.315 4.27901C0.274 4.31801 0.238 4.36001 0.205 4.40501C0.185 4.43301 0.164 4.45801 0.146 4.48601C0.115 4.53901 0.0919999 4.59401 0.0699999 4.65101C0.0609999 4.67801 0.047 4.70301 0.039 4.73001C0.015 4.81701 0 4.90701 0 5.00001V15C0 15.396 0.232 15.753 0.594 15.914L9.594 19.914C9.724 19.972 9.862 20 10 20C10.139 20 10.273 19.961 10.402 19.904L10.406 19.914L19.406 15.914C19.768 15.753 20 15.396 20 15V5.00001C20 4.60401 19.768 4.24701 19.406 4.08601ZM10 2.09501L16.538 5.00001L10 7.90501L8.692 7.32401L3.463 5.00001L10 2.09501ZM2 14.351V6.53901L9 9.65001V17.461L2 14.351ZM11 17.461V9.65001L18 6.53901V14.351L11 17.461Z" }),
+  history: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 8V13H17V11H14V8H12Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21.292 8.49699C21.066 7.96199 20.787 7.44699 20.463 6.96799C20.141 6.48999 19.772 6.04199 19.364 5.63499C18.956 5.22799 18.51 4.85999 18.032 4.53699C17.55 4.21099 17.035 3.93299 16.504 3.70799C15.959 3.47799 15.39 3.30099 14.814 3.18299C13.633 2.93999 12.37 2.93899 11.188 3.18299C10.609 3.30099 10.041 3.47799 9.498 3.70699C8.967 3.93199 8.453 4.20999 7.969 4.53699C7.492 4.85899 7.043 5.22899 6.636 5.63599C6.229 6.04299 5.859 6.49199 5.537 6.96799C5.211 7.45199 4.932 7.96599 4.708 8.49599C4.478 9.03999 4.301 9.60899 4.183 10.186C4.062 10.778 4 11.388 4 12C4 12.008 4.001 12.017 4.001 12.025H2L5 16L8 12.025H6.001C6.001 12.017 6 12.008 6 12C6 11.523 6.048 11.048 6.142 10.588C6.234 10.139 6.371 9.69799 6.55 9.27499C6.724 8.86299 6.941 8.46199 7.195 8.08699C7.445 7.71599 7.733 7.36799 8.05 7.04999C8.367 6.73199 8.716 6.44499 9.086 6.19499C9.462 5.94099 9.863 5.72399 10.276 5.54899C10.697 5.36999 11.139 5.23299 11.589 5.14099C12.508 4.95199 13.493 4.95299 14.412 5.14099C14.859 5.23299 15.302 5.36999 15.725 5.54899C16.138 5.72299 16.538 5.94099 16.913 6.19299C17.283 6.44399 17.633 6.73199 17.95 7.04899C18.267 7.36499 18.554 7.71399 18.805 8.08599C19.057 8.45799 19.274 8.85799 19.45 9.27499C19.628 9.69199 19.764 10.133 19.858 10.586C19.952 11.049 20 11.524 20 12C20 12.476 19.952 12.951 19.858 13.41C19.764 13.865 19.628 14.306 19.45 14.724C19.274 15.14 19.057 15.539 18.804 15.913C18.554 16.284 18.267 16.633 17.95 16.949C17.633 17.266 17.283 17.554 16.914 17.804C16.538 18.057 16.139 18.275 15.725 18.45C15.302 18.629 14.86 18.766 14.412 18.858C13.494 19.046 12.51 19.047 11.589 18.858C11.14 18.766 10.699 18.629 10.276 18.45C9.864 18.276 9.463 18.059 9.088 17.805C8.717 17.555 8.369 17.267 8.051 16.95L6.637 18.364C7.044 18.772 7.492 19.141 7.969 19.463C8.452 19.789 8.967 20.068 9.497 20.292C10.041 20.522 10.61 20.699 11.187 20.817C11.778 20.938 12.388 21 13 21C13.612 21 14.223 20.938 14.813 20.817C15.39 20.699 15.959 20.523 16.503 20.293C17.035 20.068 17.55 19.789 18.034 19.462C18.51 19.14 18.957 18.771 19.364 18.364C19.771 17.957 20.14 17.509 20.462 17.033C20.787 16.553 21.066 16.038 21.292 15.504C21.52 14.966 21.697 14.398 21.817 13.812C21.938 13.22 22 12.61 22 12C22 11.39 21.938 10.78 21.817 10.186C21.697 9.60199 21.52 9.03399 21.292 8.49699Z" })
+  ] }),
   // Navigation
   projects: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 6H6V8H4V6ZM4 11H6V13H4V11ZM4 16H6V18H4V16ZM20 8V6H18.8H9.2H8.023V8H9.2H18.8H20ZM8 11H20V13H8V11ZM8 16H20V18H8V16Z" }),
   tasks: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
@@ -15605,36 +15610,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 +15655,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 +15691,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 +15706,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 +15757,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 +15787,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 +15832,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 +15874,7 @@ function useActiveSection(sectionsWithRefs) {
         }
       });
     };
-  }, [sectionsWithRefs]);
+  }, [sectionsWithRefs, debouncedIntersectionCallback]);
   return activeSection;
 }
 
@@ -18215,6 +18250,7 @@ function useToast() {
   Palette,
   PresentationProvider,
   PreventBrowserScroll,
+  RIGHT_SIDEBAR_MIN_WIDTH,
   RadioGroupField,
   ResponsiveGrid,
   ResponsiveGridItem,