@homebound/beam 3.105.1 → 3.106.0

package/dist/index.d.cts

@@ -10283,6 +10283,7 @@ type StepperTabProps = {
     /** Whether this step's content has been completed. */
     completed: boolean;
     onClick: (value: string) => void;
+    /** Tab isn't clickable. */
     disabled?: boolean;
     /** Collapses the tab down to its colored bottom border only, hiding the label — for the mobile view */
     collapsed?: boolean;
@@ -10303,8 +10304,8 @@ type WorkflowActionsProps = {
     completeLabel: "Create" | "Save";
     /** Called when the completion button is clicked. */
     onComplete: (e: PressEvent) => void | Promise<void>;
-    /** Disables whichever of Continue/Complete is currently shown, e.g. while the active step is invalid. */
-    primaryDisabled?: boolean;
+    /** Continue/Complete is disabled. A ReactNode is shown in Beam's tooltip. */
+    primaryDisabled?: boolean | ReactNode;
     /** When true, Continue/Complete use the `ai` button variant instead of `primary`. */
     aiMode?: boolean;
     isFirstStep?: boolean;
@@ -10680,8 +10681,8 @@ type PageHeaderLayoutProps<V extends string, X> = {
 declare function PageHeaderLayout<V extends string, X extends Only<TabsContentXss, X>>(props: PageHeaderLayoutProps<V, X>): JSX.Element;
 
 type FocusedFormLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuffix" | "breadcrumbs"> & Pick<WorkflowActionsProps, "onCancel" | "completeLabel" | "onComplete" | "onSaveAndExit"> & {
-    /** Gates the Create/Save CTA. */
-    isValid: boolean;
+    /** Create/Save is disabled. A ReactNode is shown in Beam's tooltip. */
+    primaryDisabled?: WorkflowActionsProps["primaryDisabled"];
     /** Read on Cancel / leave — a callback so flipping dirty does not re-render. */
     isDirty?: () => boolean;
     /** Full-bleed AI wash on the body and the `ai` Create/Save variant. Pair with body `aiMode` (e.g. FormSectionLayout). */
@@ -10697,15 +10698,15 @@ type FocusedFormLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuff
 declare function FocusedFormLayout(props: FocusedFormLayoutProps): JSX.Element;
 
 /**
- * A `StepperLayout` step: a `StepperTabsStep` (minus `value`, which is derived from `label`) plus
- * page content. Stepper chrome marks prior steps complete via current-step index; `isValid` only
- * gates the Continue/Complete CTA for the active step.
+ * A `StepperLayout` step: `StepperTabsStep` (minus `value`) plus page content.
  */
-type StepperLayoutStep = Omit<StepperTabsStep, "value"> & {
+type StepperLayoutStep = Omit<StepperTabsStep, "value" | "disabled"> & {
     /** Rendered as the page body while this is the active step. */
     content: ReactNode;
-    /** Gates Continue/Complete for the active step (form validity) */
-    isValid: boolean;
+    /** Tab isn't clickable. */
+    disabled?: boolean;
+    /** Continue/Complete is disabled. A ReactNode is shown in Beam's tooltip. */
+    primaryDisabled?: boolean | ReactNode;
 };
 type StepperLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuffix" | "breadcrumbs"> & Pick<WorkflowActionsProps, "onCancel" | "completeLabel" | "onComplete" | "onSaveAndExit"> & {
     /** The workflow's steps; the active step's `content` is the body, and it drives the header's tab strip. */
@@ -10740,6 +10741,9 @@ declare function defaultTestId(label: string): string;
  *
  * Keep values sparse so new layers can slot between existing ones without ripple
  * edits. Lower numbers sit behind higher numbers in the same stacking context.
+ *
+ * Global overlays (Modal, SuperDrawer, Snackbar) must portal to `document.body`, otherwise an app
+ * root that establishes a stacking context traps them below the layers listed here.
  */
 declare const zIndices: {
     readonly tableExpandableIcon: 10;

package/dist/index.d.ts

@@ -10283,6 +10283,7 @@ type StepperTabProps = {
     /** Whether this step's content has been completed. */
     completed: boolean;
     onClick: (value: string) => void;
+    /** Tab isn't clickable. */
     disabled?: boolean;
     /** Collapses the tab down to its colored bottom border only, hiding the label — for the mobile view */
     collapsed?: boolean;
@@ -10303,8 +10304,8 @@ type WorkflowActionsProps = {
     completeLabel: "Create" | "Save";
     /** Called when the completion button is clicked. */
     onComplete: (e: PressEvent) => void | Promise<void>;
-    /** Disables whichever of Continue/Complete is currently shown, e.g. while the active step is invalid. */
-    primaryDisabled?: boolean;
+    /** Continue/Complete is disabled. A ReactNode is shown in Beam's tooltip. */
+    primaryDisabled?: boolean | ReactNode;
     /** When true, Continue/Complete use the `ai` button variant instead of `primary`. */
     aiMode?: boolean;
     isFirstStep?: boolean;
@@ -10680,8 +10681,8 @@ type PageHeaderLayoutProps<V extends string, X> = {
 declare function PageHeaderLayout<V extends string, X extends Only<TabsContentXss, X>>(props: PageHeaderLayoutProps<V, X>): JSX.Element;
 
 type FocusedFormLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuffix" | "breadcrumbs"> & Pick<WorkflowActionsProps, "onCancel" | "completeLabel" | "onComplete" | "onSaveAndExit"> & {
-    /** Gates the Create/Save CTA. */
-    isValid: boolean;
+    /** Create/Save is disabled. A ReactNode is shown in Beam's tooltip. */
+    primaryDisabled?: WorkflowActionsProps["primaryDisabled"];
     /** Read on Cancel / leave — a callback so flipping dirty does not re-render. */
     isDirty?: () => boolean;
     /** Full-bleed AI wash on the body and the `ai` Create/Save variant. Pair with body `aiMode` (e.g. FormSectionLayout). */
@@ -10697,15 +10698,15 @@ type FocusedFormLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuff
 declare function FocusedFormLayout(props: FocusedFormLayoutProps): JSX.Element;
 
 /**
- * A `StepperLayout` step: a `StepperTabsStep` (minus `value`, which is derived from `label`) plus
- * page content. Stepper chrome marks prior steps complete via current-step index; `isValid` only
- * gates the Continue/Complete CTA for the active step.
+ * A `StepperLayout` step: `StepperTabsStep` (minus `value`) plus page content.
  */
-type StepperLayoutStep = Omit<StepperTabsStep, "value"> & {
+type StepperLayoutStep = Omit<StepperTabsStep, "value" | "disabled"> & {
     /** Rendered as the page body while this is the active step. */
     content: ReactNode;
-    /** Gates Continue/Complete for the active step (form validity) */
-    isValid: boolean;
+    /** Tab isn't clickable. */
+    disabled?: boolean;
+    /** Continue/Complete is disabled. A ReactNode is shown in Beam's tooltip. */
+    primaryDisabled?: boolean | ReactNode;
 };
 type StepperLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuffix" | "breadcrumbs"> & Pick<WorkflowActionsProps, "onCancel" | "completeLabel" | "onComplete" | "onSaveAndExit"> & {
     /** The workflow's steps; the active step's `content` is the body, and it drives the header's tab strip. */
@@ -10740,6 +10741,9 @@ declare function defaultTestId(label: string): string;
  *
  * Keep values sparse so new layers can slot between existing ones without ripple
  * edits. Lower numbers sit behind higher numbers in the same stacking context.
+ *
+ * Global overlays (Modal, SuperDrawer, Snackbar) must portal to `document.body`, otherwise an app
+ * root that establishes a stacking context traps them below the layers listed here.
  */
 declare const zIndices: {
     readonly tableExpandableIcon: 10;

package/dist/index.js

@@ -19715,6 +19715,9 @@ function getSize(size) {
 // src/components/Snackbar/SnackbarContext.tsx
 import { createContext as createContext8, useContext as useContext18, useMemo as useMemo32, useState as useState39 } from "react";
 
+// src/components/Snackbar/Snackbar.tsx
+import { createPortal as createPortal4 } from "react-dom";
+
 // src/components/Snackbar/SnackbarNotice.tsx
 import { useLayoutEffect as useLayoutEffect7, useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
 import { useCallback as useCallback25, useRef as useRef48, useState as useState38 } from "react";
@@ -19852,7 +19855,7 @@ function Snackbar({
   offset
 }) {
   const tid = useTestIds({});
-  return /* @__PURE__ */ jsx120("div", { ...tid.snackbarWrapper, ...trussProps82({
+  return createPortal4(/* @__PURE__ */ jsx120("div", { ...tid.snackbarWrapper, ...trussProps82({
     position: "fixed",
     zIndex: ["z_var", {
       "--zIndex": maybeCssVar40(zIndices.snackbar)
@@ -19865,7 +19868,7 @@ function Snackbar({
     flexDirection: "fdc",
     alignItems: "aifs",
     gap: "gap_12px"
-  }), children: notices.map((data) => /* @__PURE__ */ jsx120(SnackbarNotice, { ...data }, data.id)) });
+  }), children: notices.map((data) => /* @__PURE__ */ jsx120(SnackbarNotice, { ...data }, data.id)) }), document.body);
 }
 var defaultOffset = {
   bottom: 24
@@ -19892,7 +19895,7 @@ function useSnackbarContext() {
 // src/components/SuperDrawer/SuperDrawer.tsx
 import { AnimatePresence, motion } from "framer-motion";
 import { useEffect as useEffect25, useRef as useRef49 } from "react";
-import { createPortal as createPortal4 } from "react-dom";
+import { createPortal as createPortal5 } from "react-dom";
 
 // src/components/SuperDrawer/utils.ts
 var SuperDrawerWidth = /* @__PURE__ */ ((SuperDrawerWidth2) => {
@@ -19941,7 +19944,7 @@ function SuperDrawer() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [headerRef, content]
   );
-  return createPortal4(/* @__PURE__ */ jsx122(AnimatePresence, { children: content && /* @__PURE__ */ jsx122(Fragment27, { children: /* @__PURE__ */ createElement4(
+  return createPortal5(/* @__PURE__ */ jsx122(AnimatePresence, { children: content && /* @__PURE__ */ jsx122(Fragment27, { children: /* @__PURE__ */ createElement4(
     motion.div,
     {
       ...testId,
@@ -22507,7 +22510,7 @@ import { mergeProps as mergeProps27 } from "@homebound/truss/runtime";
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
 import { useEffect as useEffect27 } from "react";
 import { usePreventScroll as usePreventScroll2 } from "react-aria";
-import { createPortal as createPortal5 } from "react-dom";
+import { createPortal as createPortal6 } from "react-dom";
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayoutHeightContext.tsx
 import { createContext as createContext11, useContext as useContext21 } from "react";
@@ -22630,7 +22633,7 @@ function DocumentScrollRightPane({
     ease: "linear",
     duration: 0.2
   }, onAnimationComplete: (definition) => definition.x !== 0 && clearPane(), children: rightPaneContent }, "documentScrollRightPane") });
-  return sm ? createPortal5(pane, document.body) : pane;
+  return sm ? createPortal6(pane, document.body) : pane;
 }
 
 // src/components/Layout/RightPaneLayout/DocumentScrollRightPaneLayout.tsx
@@ -24159,7 +24162,7 @@ function useRightPane() {
 }
 
 // src/components/Layout/ScrollableFooter.tsx
-import { createPortal as createPortal6 } from "react-dom";
+import { createPortal as createPortal7 } from "react-dom";
 import { Fragment as Fragment42, jsx as jsx189 } from "react/jsx-runtime";
 function ScrollableFooter(props) {
   const { children } = props;
@@ -24167,7 +24170,7 @@ function ScrollableFooter(props) {
   if (!footerEl) {
     return /* @__PURE__ */ jsx189(Fragment42, { children });
   }
-  return createPortal6(/* @__PURE__ */ jsx189(Fragment42, { children }), footerEl);
+  return createPortal7(/* @__PURE__ */ jsx189(Fragment42, { children }), footerEl);
 }
 
 // src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
@@ -26029,7 +26032,7 @@ function AppNavItems(props) {
 import { AnimatePresence as AnimatePresence6, motion as motion6 } from "framer-motion";
 import { useEffect as useEffect35, useState as useState57 } from "react";
 import { FocusScope as FocusScope5, usePreventScroll as usePreventScroll3 } from "react-aria";
-import { createPortal as createPortal7 } from "react-dom";
+import { createPortal as createPortal8 } from "react-dom";
 import { useLocation } from "react-router-dom";
 
 // src/layouts/NavbarLayout/MobileSubNavContext.tsx
@@ -26091,7 +26094,7 @@ function NavbarMobileMenu(props) {
       setLevel("sub");
       setIsOpen(true);
     }, ...tid.mobileMenu }),
-    createPortal7(
+    createPortal8(
       /* AnimatePresence keeps the drawer mounted through its slide/fade-out before unmounting.*/
       /* @__PURE__ */ jsx212(AnimatePresence6, { children: isOpen && /* @__PURE__ */ jsx212(NavbarMobileDrawer, { items, mobileSubNav, level, onLevelChange: setLevel, onClose: close, tid }) }),
       document.body
@@ -27113,7 +27116,7 @@ var maxStepWidthPx = 280;
 var gapPx = 6;
 
 // src/components/SuperDrawer/components/SuperDrawerHeader.tsx
-import { createPortal as createPortal8 } from "react-dom";
+import { createPortal as createPortal9 } from "react-dom";
 import { trussProps as trussProps128 } from "@homebound/truss/runtime";
 import { jsx as jsx221, jsxs as jsxs114 } from "react/jsx-runtime";
 function SuperDrawerHeader(props) {
@@ -27132,7 +27135,7 @@ function SuperDrawerHeader(props) {
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const isDetail = currentContent !== firstContent;
   const tid = useTestIds({}, "superDrawerHeader");
-  return createPortal8(/* @__PURE__ */ jsxs114("div", { className: "df aic jcsb gap3", ...tid, children: [
+  return createPortal9(/* @__PURE__ */ jsxs114("div", { className: "df aic jcsb gap3", ...tid, children: [
     isStructuredProps(props) ? /* @__PURE__ */ jsxs114("div", { className: "df jcsb aic gap2 fg1", children: [
       /* @__PURE__ */ jsxs114("div", { className: "fg1 df aic gap2", children: [
         /* @__PURE__ */ jsx221("h1", { className: "fw6 fz_24px lh_32px", children: props.title }),
@@ -28644,7 +28647,17 @@ function WorkflowPageLayout(props) {
 // src/layouts/Workflow/FocusedFormLayout.tsx
 import { jsx as jsx240 } from "react/jsx-runtime";
 function FocusedFormLayout(props) {
-  const { onCancel, completeLabel, onComplete, onSaveAndExit, isValid, isDirty, aiMode, children, ...headerProps } = props;
+  const {
+    onCancel,
+    completeLabel,
+    onComplete,
+    onSaveAndExit,
+    primaryDisabled,
+    isDirty,
+    aiMode,
+    children,
+    ...headerProps
+  } = props;
   const tid = useTestIds(props, "focusedFormLayout");
   return /* @__PURE__ */ jsx240(
     WorkflowPageLayout,
@@ -28657,7 +28670,7 @@ function FocusedFormLayout(props) {
       onSaveAndExit,
       completeLabel,
       onComplete,
-      primaryDisabled: !isValid,
+      primaryDisabled,
       children
     }
   );
@@ -28693,7 +28706,7 @@ function StepperLayout(props) {
       onSaveAndExit,
       completeLabel,
       onComplete,
-      primaryDisabled: !activeStep?.isValid,
+      primaryDisabled: activeStep?.primaryDisabled,
       onContinue: async () => {
         const onContinue = activeStep?.onContinue;
         if (onContinue) {