@planningcenter/topbar 12.4.0 → 12.4.1

package/dist/topbar.umd.js

@@ -34437,7 +34437,8 @@ true;
       onClick: () => onClick(),
       type: "button"
     }, /*#__PURE__*/React.createElement(SparkleIcon, {
-      className: styles.sparkle
+      className: styles.sparkle,
+      fill: "currentColor"
     }), /*#__PURE__*/React.createElement("span", {
       className: styles.label
     }, text));
@@ -34626,6 +34627,9 @@ true;
       // Contact support) and picobot's own NEW_ROUTE_RENDERED reports—so it
       // always reflects the live conversation. See buildPicobotSrc.
       const [loadedPath, setLoadedPath] = React.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.useState(false);
       const hasReportedErrorRef = React.useRef(false);
       const loadTimeoutRef = React.useRef();
       const reportLoadError = React.useCallback(() => {
@@ -34653,7 +34657,10 @@ true;
             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);
@@ -34663,12 +34670,15 @@ true;
         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, {
@@ -34682,6 +34692,7 @@ true;
           border: 0,
           flex: 1,
           height: "100%",
+          visibility: isReady ? undefined : "hidden",
           width: "100%"
         },
         title: "Picobot"
@@ -35410,6 +35421,7 @@ true;
     closeDrawer,
     currentPath,
     env,
+    isOpen,
     onChangePath,
     openTool,
     pending
@@ -35454,6 +35466,17 @@ true;
       }
       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(() => {
@@ -35970,6 +35993,11 @@ true;
   };
 
   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) {
@@ -36083,6 +36111,27 @@ true;
         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,