@homebound/beam 3.89.0 → 3.90.0

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,
@@ -19785,11 +19786,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 +19822,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 +19854,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 +19937,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 +19968,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 +23449,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 +24536,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 +24548,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 +24568,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 +28719,7 @@ function getInitialStep(steps, defaultStep) {
   Loader,
   LoadingSkeleton,
   MaxLines,
+  ModalBanner,
   ModalBody,
   ModalFilterItem,
   ModalFooter,