@planningcenter/topbar 12.4.0-rc.2 → 12.4.1

package/dist/topbar.js

@@ -34684,12 +34684,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.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, {
@@ -35432,6 +35435,7 @@ function PicobotComponent({
   closeDrawer,
   currentPath,
   env,
+  isOpen,
   onChangePath,
   openTool,
   pending
@@ -35476,6 +35480,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.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.useState(false);
   const [mountKey, setMountKey] = React.useState(0);
   const handleRetry = React.useCallback(() => {
@@ -35992,6 +36007,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) {
@@ -36105,6 +36125,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.useRef(CLOSED_TOOLBAR_DRAWER);
+  React.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,