@planningcenter/topbar 12.4.0 → 12.4.1

package/dist/topbar.module.js

@@ -34427,7 +34427,8 @@ function AskAIButton({
     onClick: () => onClick(),
     type: "button"
   }, /*#__PURE__*/React__default.createElement(SparkleIcon, {
-    className: styles.sparkle
+    className: styles.sparkle,
+    fill: "currentColor"
   }), /*#__PURE__*/React__default.createElement("span", {
     className: styles.label
   }, text));
@@ -34616,6 +34617,9 @@ function createPicobotIframe(picobotOrigin, {
     // Contact support) and picobot's own NEW_ROUTE_RENDERED reports—so it
     // always reflects the live conversation. See buildPicobotSrc.
     const [loadedPath, setLoadedPath] = React__default.useState(iframePath || "");
+    // Hidden until picobot paints so its blank first frame doesn't flash
+    // white against the drawer in dark mode.
+    const [isReady, setIsReady] = React__default.useState(false);
     const hasReportedErrorRef = React__default.useRef(false);
     const loadTimeoutRef = React__default.useRef();
     const reportLoadError = React__default.useCallback(() => {
@@ -34643,7 +34647,10 @@ function createPicobotIframe(picobotOrigin, {
           setLoadedPath(reportedPath);
           onIframeChangePath(reportedPath);
         }
-        if (((_c = e.data) === null || _c === void 0 ? void 0 : _c.type) === "READY") clearTimeout(loadTimeoutRef.current);
+        if (((_c = e.data) === null || _c === void 0 ? void 0 : _c.type) === "READY") {
+          clearTimeout(loadTimeoutRef.current);
+          setIsReady(true);
+        }
         if (onMessage) onMessage(e.data);
       }
       window.addEventListener("message", handleGuestMessage);
@@ -34653,12 +34660,15 @@ function createPicobotIframe(picobotOrigin, {
       setLoadedPath(iframePath || "");
     }, [iframePath]);
     // A one-way channel for sending messages to picobot. Topbar just
-    // forwards the envelope to the iframe and holds no message semantics of
-    // its own—the consumer decides what to send and when.
+    // forwards the envelope to the iframe—the consumer decides what to send
+    // and when. The one exception is PANE_VISIBLE: Safari ignores focus()
+    // from inside a cross-origin iframe, so the host has to focus the iframe
+    // before picobot can focus its composer.
     React__default.useImperativeHandle(ref, () => ({
       postMessage(message) {
-        var _a, _b;
-        (_b = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(message, picobotOrigin);
+        var _a, _b, _c;
+        if (message.type === "PANE_VISIBLE") (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_c = (_b = iframeRef.current) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.postMessage(message, picobotOrigin);
       }
     }), []);
     const iframeSrc = buildPicobotSrc(picobotOrigin, loadedPath, {
@@ -34672,6 +34682,7 @@ function createPicobotIframe(picobotOrigin, {
         border: 0,
         flex: 1,
         height: "100%",
+        visibility: isReady ? undefined : "hidden",
         width: "100%"
       },
       title: "Picobot"
@@ -35400,6 +35411,7 @@ function PicobotComponent({
   closeDrawer,
   currentPath,
   env,
+  isOpen,
   onChangePath,
   openTool,
   pending
@@ -35444,6 +35456,17 @@ function PicobotComponent({
     }
     clearPending();
   }, [pending, isPicobotReady, clearPending]);
+  // The drawer keeps the iframe mounted while it's closed, so picobot's
+  // autofocus is spent by the time the panel reopens. READY gates the signal
+  // because picobot has no listener before it.
+  React__default.useEffect(function tellPicobotThePanelIsVisible() {
+    var _a;
+    if (isOpen && isPicobotReady) {
+      (_a = picobotRef.current) === null || _a === void 0 ? void 0 : _a.postMessage({
+        type: "PANE_VISIBLE"
+      });
+    }
+  }, [isOpen, isPicobotReady]);
   const [iframeErrored, setIframeErrored] = React__default.useState(false);
   const [mountKey, setMountKey] = React__default.useState(0);
   const handleRetry = React__default.useCallback(() => {
@@ -35960,6 +35983,11 @@ const Profile = {
 };
 
 const DURATION = 100;
+const TOOLBAR_DRAWER_CHANGE_EVENT = "topbar:toolbar-drawer-change";
+const CLOSED_TOOLBAR_DRAWER = {
+  open: false,
+  tool: null
+};
 // Exempt paths match regardless of query, so `email?conversationId=…` is
 // exempt along with `email`.
 function isToolPathExemptFromStorage(toolName, path) {
@@ -36073,6 +36101,27 @@ function Toolbar({
       delete window.openHelpdesk; /* TODO: Remove when products have migrated to window.topbar.openHelpdesk */
     };
   }, [Profile, openHelpdeskAtRoot]);
+  const toolbarDrawerTool = open && currentContent ? currentContent.name.toLowerCase() : null;
+  const lastToolbarDrawer = React__default.useRef(CLOSED_TOOLBAR_DRAWER);
+  React__default.useEffect(() => {
+    const toolbarDrawer = {
+      open,
+      tool: toolbarDrawerTool
+    };
+    window.topbar = window.topbar || {};
+    window.topbar.toolbarDrawer = toolbarDrawer;
+    const last = lastToolbarDrawer.current;
+    if (last.open !== toolbarDrawer.open || last.tool !== toolbarDrawer.tool) {
+      lastToolbarDrawer.current = toolbarDrawer;
+      window.dispatchEvent(new CustomEvent(TOOLBAR_DRAWER_CHANGE_EVENT, {
+        detail: toolbarDrawer
+      }));
+    }
+    return () => {
+      var _a;
+      (_a = window.topbar) === null || _a === void 0 ? true : delete _a.toolbarDrawer;
+    };
+  }, [open, toolbarDrawerTool]);
   const loginSettingsUrl = getLoginProfilePath({
     appName: appName.replace(/[\s-]/, ""),
     env: env,