@homebound/beam 3.89.0 → 3.90.1

package/dist/index.cjs

@@ -137,6 +137,7 @@ __export(index_exports, {
   Loader: () => Loader,
   LoadingSkeleton: () => LoadingSkeleton,
   MaxLines: () => MaxLines,
+  ModalBanner: () => ModalBanner,
   ModalBody: () => ModalBody,
   ModalFilterItem: () => ModalFilterItem,
   ModalFooter: () => ModalFooter,
@@ -19534,7 +19535,7 @@ function AiLoadingPanel(props) {
   return (
     // `status` rather than `alert` so assistive tech waits for a pause instead of interrupting, and
     // `aria-busy` so it knows the surrounding content is still settling.
-    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(AiPanel, { role: "status", "aria-busy": true, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "df fdc aic gap1 w100", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(AiPanel, { role: "status", "aria-busy": true, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "df fdc aic gap1 w100 pl1 pr1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(AiLoader, {}),
       /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "fw6 fz_18px lh_28px purple700 aiBoldBg bgcl_text WebkitBackgroundClip_text wktfc_transparent", ...tid.title, children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { ...(0, import_runtime83.trussProps)({
@@ -19559,10 +19560,8 @@ function AiSlimBanner(props) {
     action
   } = props;
   const tid = useTestIds(props, "aiSlimBanner");
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { className: "df aic gap_4px w100 pl2 pr2 fw4 fz_12px lh_16px aiBackground", ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Icon, { icon: "aiStar", inc: 1.5, xss: {
-      flexShrink: "fs0"
-    } }),
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { className: "df ais gap2 w100 pl2 pr2 fw4 fz_12px lh_16px aiBackground", ...tid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("span", { className: "df aic fs0 pt1 pb1 h_32px", children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Icon, { icon: "aiStar", inc: 1.5 }) }),
     /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { className: "df aic jcsb gap2 fg1 mw0", children: [
       /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("span", { className: "fw6 fz_12px lh_16px purple700 aiBoldBg bgcl_text WebkitBackgroundClip_text wktfc_transparent pt1 pb1 mw0", ...tid.title, children: title }),
       action && /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: "fs0", children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Button, { ...action, variant: "text" }) })
@@ -19785,11 +19784,13 @@ function Modal(props) {
     forceScrolling,
     api,
     drawHeaderBorder = false,
-    allowClosing = true
+    allowClosing = true,
+    aiMode = false
   } = props;
   const isFixedHeight = typeof size !== "string";
   const ref = (0, import_react97.useRef)(null);
   const {
+    modalBannerDiv,
     modalBodyDiv,
     modalFooterDiv,
     modalHeaderDiv
@@ -19819,6 +19820,7 @@ function Modal(props) {
     role: "dialog"
   }, ref);
   const [[width2, height], setSize] = (0, import_react97.useState)(getSize(size));
+  const modalBannerRef = (0, import_react97.useRef)(null);
   const modalBodyRef = (0, import_react97.useRef)(null);
   const modalFooterRef = (0, import_react97.useRef)(null);
   const modalHeaderRef = (0, import_react97.useRef)(null);
@@ -19850,13 +19852,31 @@ function Modal(props) {
   (0, import_react97.useEffect)(
     () => {
       modalHeaderRef.current.appendChild(modalHeaderDiv);
+      modalBannerRef.current.appendChild(modalBannerDiv);
       modalBodyRef.current.appendChild(modalBodyDiv);
       modalFooterRef.current.appendChild(modalFooterDiv);
     },
     // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [modalBodyRef, modalFooterRef, modalHeaderRef]
+    [modalBannerRef, modalBodyRef, modalFooterRef, modalHeaderRef]
   );
+  const title = /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("h1", { ...(0, import_runtime86.trussProps)({
+    flexGrow: "fg1",
+    fontWeight: "fw6",
+    fontSize: "fz_30px",
+    lineHeight: "lh_36px",
+    ...aiMode ? {
+      color: "purple700",
+      backgroundImage: "aiBoldBg",
+      backgroundClip: "bgcl_text",
+      WebkitBackgroundClip: "WebkitBackgroundClip_text",
+      WebkitTextFillColor: "wktfc_transparent"
+    } : {
+      color: ["color_var", {
+        "--color": "var(--b-on-surface)"
+      }]
+    }
+  }), ref: modalHeaderRef, ...titleProps, ...testId.title });
   return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_aria50.OverlayContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { ...(0, import_runtime86.trussProps)({
     position: "fixed",
     top: "tp_0",
@@ -19915,16 +19935,12 @@ function Modal(props) {
       } : {}
     }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("span", { className: "fs0 pl1", children: allowClosing && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(IconButton, { icon: "x", onClick: closeModal, ...testId.titleClose }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("h1", { ...(0, import_runtime86.trussProps)({
-        flexGrow: "fg1",
-        fontWeight: "fw6",
-        fontSize: "fz_30px",
-        lineHeight: "lh_36px",
-        color: ["color_var", {
-          "--color": "var(--b-on-surface)"
-        }]
-      }), ref: modalHeaderRef, ...titleProps, ...testId.title })
+      aiMode ? /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "df fdc aifs gap_4px fg1 mw0", ...testId.aiTitle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(BlueprintAiLogo, { height: 2 }),
+        title
+      ] }) : title
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { ref: modalBannerRef, className: "fs0" }),
     /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("main", { ref: modalBodyRef, ...(0, import_runtime86.trussProps)({
       flexGrow: "fg1",
       overflowY: "oya",
@@ -19950,6 +19966,15 @@ function ModalHeader({
   } = useBeamContext();
   return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_jsx_runtime115.Fragment, { children }), modalHeaderDiv);
 }
+function ModalBanner({
+  children
+}) {
+  const {
+    modalBannerDiv
+  } = useBeamContext();
+  const testId = useTestIds({}, testIdPrefix);
+  return (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { className: "mb3", ...testId.banner, children }), modalBannerDiv);
+}
 function ModalBody({
   children,
   virtualized = false
@@ -23422,14 +23447,14 @@ var import_react119 = require("react");
 var import_jsx_runtime172 = require("react/jsx-runtime");
 function OpenModal(props) {
   const { openModal } = useModal();
-  const { size, children, keepOpen } = props;
+  const { size, children, keepOpen, aiMode } = props;
   (0, import_react119.useEffect)(() => {
     if (!keepOpen) {
-      openModal({ size, content: children });
+      openModal({ size, content: children, aiMode });
     }
-  }, [keepOpen, openModal, size, children]);
+  }, [keepOpen, openModal, size, children, aiMode]);
   if (keepOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Modal, { size, content: children });
+    return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Modal, { size, content: children, aiMode });
   } else {
     return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { children: "dummy content" });
   }
@@ -24509,6 +24534,7 @@ var BeamContext = (0, import_react129.createContext)({
   modalState: new EmptyRef(),
   modalCanCloseChecks: new EmptyRef(),
   modalHeaderDiv: void 0,
+  modalBannerDiv: void 0,
   modalBodyDiv: void 0,
   modalFooterDiv: void 0,
   drawerContentStack: new EmptyRef(),
@@ -24520,6 +24546,7 @@ function BeamProvider({ children, documentTitleConfig, ...presentationProps }) {
   const [, tick] = (0, import_react129.useReducer)((prev) => prev + 1, 0);
   const modalRef = (0, import_react129.useRef)();
   const modalHeaderDiv = (0, import_react129.useMemo)(() => document.createElement("div"), []);
+  const modalBannerDiv = (0, import_react129.useMemo)(() => document.createElement("div"), []);
   const modalBodyDiv = (0, import_react129.useMemo)(() => {
     const el = document.createElement("div");
     el.style.height = "100%";
@@ -24539,13 +24566,14 @@ function BeamProvider({ children, documentTitleConfig, ...presentationProps }) {
       // The rest we don't need to re-render when these are mutated, so just expose as-is
       modalCanCloseChecks: modalCanCloseChecksRef,
       modalHeaderDiv,
+      modalBannerDiv,
       modalBodyDiv,
       modalFooterDiv,
       drawerCanCloseChecks,
       drawerCanCloseDetailsChecks,
       sdHeaderDiv
     };
-  }, [modalBodyDiv, modalFooterDiv, modalHeaderDiv, sdHeaderDiv]);
+  }, [modalBannerDiv, modalBodyDiv, modalFooterDiv, modalHeaderDiv, sdHeaderDiv]);
   const beamTree = /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(PresentationProvider, { ...presentationProps, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(RightPaneProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(AutoSaveStatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(SnackbarProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(ToastProvider, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(import_react_aria56.OverlayProvider, { children: [
       children,
@@ -28689,6 +28717,7 @@ function getInitialStep(steps, defaultStep) {
   Loader,
   LoadingSkeleton,
   MaxLines,
+  ModalBanner,
   ModalBody,
   ModalFilterItem,
   ModalFooter,