@planningcenter/topbar 12.5.0-rc.3 → 12.5.0

package/dist/topbar.umd.js

@@ -3346,6 +3346,25 @@ true;
     }));
   }
 
+  // With the search's own debounce, about 1.4 seconds after the last keystroke,
+  // as in GOV.UK's accessible-autocomplete.
+  const ANNOUNCEMENT_DELAY_MS = 1100;
+  // Screen readers echo typing themselves, as each person has set them to, so
+  // the message waits until typing settles instead of talking over it. Waiting
+  // also lets VoiceOver finish what focus had to say, since it often skips a
+  // change made as focus moves, as when a tab with cached results is selected,
+  // and only the tab someone stops on when arrowing through them is announced.
+  // The region empties at once, so a message that comes back is read again.
+  function useAnnouncement(message) {
+    const [announcement, setAnnouncement] = React.useState(null);
+    React.useEffect(() => {
+      setAnnouncement(null);
+      const timeout = setTimeout(() => setAnnouncement(message), ANNOUNCEMENT_DELAY_MS);
+      return () => clearTimeout(timeout);
+    }, [message]);
+    return announcement;
+  }
+
   // useId isn't available on React 17, which our peer range still supports.
   let instanceCount$1 = 0;
   function useInstanceId(prefix) {
@@ -4095,7 +4114,18 @@ true;
       return undefined;
     }
   }
-  async function mintToken(personId) {
+  const minting = new Map();
+  function mintToken(personId) {
+    const running = minting.get(personId);
+    if (running) {
+      return running;
+    } else {
+      const run = mint(personId).finally(() => minting.delete(personId));
+      minting.set(personId, run);
+      return run;
+    }
+  }
+  async function mint(personId) {
     const {
       json,
       ok,
@@ -4119,6 +4149,10 @@ true;
     }
     return token;
   }
+  function currentToken(personId) {
+    var _a;
+    return (_a = cachedToken(personId)) !== null && _a !== void 0 ? _a : mintToken(personId).catch(() => null);
+  }
   async function request(personId, key, init = {}, isRetry = false) {
     var _a;
     const token = isRetry ? await mintToken(personId) : (_a = cachedToken(personId)) !== null && _a !== void 0 ? _a : await mintToken(personId);
@@ -4154,8 +4188,8 @@ true;
   // retrying when another tab or device wrote in between. `change` returns null
   // when there's nothing to write. A read-only token (staff impersonating
   // someone) only reads, so nothing is written into the person's history.
-  // Resolves to the value now stored, or null when the service couldn't be
-  // reached.
+  // Resolves to the value now stored, with whether the token was read-only, or
+  // null when the service couldn't be reached.
   async function updateStoredValue(personId, key, change, attemptsLeft = MAX_ATTEMPTS) {
     const read = await request(personId, key);
     if (read === null || read === void 0 ? void 0 : read.response.ok) {
@@ -4163,9 +4197,15 @@ true;
         value,
         version
       } = await read.response.json();
-      const next = read.token.readOnly ? null : change(value);
+      const {
+        readOnly
+      } = read.token;
+      const next = readOnly ? null : change(value);
       if (next === null) {
-        return Array.isArray(value) ? value : [];
+        return {
+          readOnly,
+          value: Array.isArray(value) ? value : []
+        };
       } else {
         const write = await request(personId, key, {
           body: JSON.stringify({
@@ -4178,7 +4218,10 @@ true;
           method: "PUT"
         });
         if (write === null || write === void 0 ? void 0 : write.response.ok) {
-          return next;
+          return {
+            readOnly,
+            value: next
+          };
         } else if ((write === null || write === void 0 ? void 0 : write.response.status) === 409 && attemptsLeft > 1) {
           return updateStoredValue(personId, key, change, attemptsLeft - 1);
         } else {
@@ -4230,7 +4273,8 @@ true;
         return isSameList(mergeEntries(shared, local), shared) ? null : mergeStored(stored, local);
       });
       if (synced) {
-        writeRecentlyVisited(scope, mergeEntries(entriesFrom(synced), readRecentlyVisited(scope)));
+        const shared = entriesFrom(synced.value);
+        writeRecentlyVisited(scope, synced.readOnly ? shared : mergeEntries(shared, readRecentlyVisited(scope)));
       }
     } catch {
       // The service is best-effort; the local copy stands on its own.
@@ -4261,11 +4305,23 @@ true;
   function syncRecentlyVisited(scope) {
     return sync(scope, false);
   }
+  function record(entry, scope, token) {
+    if (!(token === null || token === void 0 ? void 0 : token.readOnly)) {
+      writeRecentlyVisited(scope, addVisit(readRecentlyVisited(scope), entry));
+      if (token) sync(scope, true);
+    }
+  }
   function recordVisit(visit, scope) {
     const entry = toEntry(visit, new Date());
-    if (isEntry(entry)) {
-      writeRecentlyVisited(scope, addVisit(readRecentlyVisited(scope), entry));
-      sync(scope, true);
+    if (!isEntry(entry)) {
+      return Promise.resolve();
+    }
+    const token = isUserStoreSyncUnavailable() ? null : currentToken(scope.personId);
+    if (token instanceof Promise) {
+      return token.then(minted => record(entry, scope, minted));
+    } else {
+      record(entry, scope, token);
+      return Promise.resolve();
     }
   }
   function useRecentlyVisited({
@@ -4946,7 +5002,6 @@ true;
       role: "tablist"
     }, products.map(product => (/*#__PURE__*/React.createElement(Tab, {
       "aria-controls": `${id}-panel`,
-      "aria-describedby": `${tabId(product.slug)}-description`,
       "aria-selected": product === selected,
       id: tabId(product.slug),
       key: product.slug,
@@ -4964,11 +5019,6 @@ true;
     }), showAllNames || product === selected ? product.appName : (/*#__PURE__*/React.createElement("span", {
       className: styles$k.visuallyHidden
     }, product.appName)))))), /*#__PURE__*/React.createElement("div", {
-      className: styles$k.visuallyHidden
-    }, products.map(product => (/*#__PURE__*/React.createElement("span", {
-      id: `${tabId(product.slug)}-description`,
-      key: product.slug
-    }, "Planning Center ", product.appName)))), /*#__PURE__*/React.createElement("div", {
       "aria-labelledby": tabId(selected.slug),
       className: styles$k.panel,
       id: `${id}-panel`,
@@ -6063,9 +6113,9 @@ true;
         });
       case "done":
         if (sections.length === 0) {
+          // The panel's result count announces this, so it isn't read twice.
           return /*#__PURE__*/React.createElement(BlankState$1, {
             image: /*#__PURE__*/React.createElement(BlankStateNoResults, null),
-            role: "status",
             subtitle: "Clear search and try again.",
             title: `No results for “${term.trim()}”`
           });
@@ -6119,6 +6169,7 @@ true;
       highlightedIndex
     } = navigation;
     const inputRef = React.useRef(null);
+    const resultCount = useAnnouncement(hasTerm && search.status === "done" ? `${items.length === 0 ? "No results" : `${items.length} ${items.length === 1 ? "result" : "results"}`} for “${term.trim()}” in ${product.appName}` : null);
     const [announceHighlight, setAnnounceHighlight] = React.useState(false);
     // The tabs keep focus while arrowing through results, but only the focused
     // input can point screen readers at the highlight, so from the tabs it's
@@ -6177,7 +6228,7 @@ true;
       "aria-live": "polite",
       className: styles$k.visuallyHidden,
       "data-testid": "result-count"
-    }, hasTerm && search.status === "done" && items.length > 0 ? `${items.length} ${items.length === 1 ? "result" : "results"} for “${term.trim()}” in ${product.appName}` : null), mobile ? null : /*#__PURE__*/React.createElement(KeyboardHints, {
+    }, resultCount), mobile ? null : /*#__PURE__*/React.createElement(KeyboardHints, {
       copied: navigation.copied
     }));
   }