@planningcenter/topbar 12.5.0-rc.3 → 12.5.0

package/dist/topbar.js

@@ -3362,6 +3362,25 @@ function SearchButton({
   }));
 }
 
+// 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) {
@@ -4111,7 +4130,18 @@ function subject(token) {
     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,
@@ -4135,6 +4165,10 @@ async function mintToken(personId) {
   }
   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);
@@ -4170,8 +4204,8 @@ function ifMatch(version) {
 // 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) {
@@ -4179,9 +4213,15 @@ async function updateStoredValue(personId, key, change, attemptsLeft = MAX_ATTEM
       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({
@@ -4194,7 +4234,10 @@ async function updateStoredValue(personId, key, change, attemptsLeft = MAX_ATTEM
         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 {
@@ -4246,7 +4289,8 @@ async function syncOnce(scope) {
       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.
@@ -4277,11 +4321,23 @@ function sync(scope, followUp) {
 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({
@@ -4962,7 +5018,6 @@ function ProductTabs({
     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,
@@ -4980,11 +5035,6 @@ function ProductTabs({
   }), 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`,
@@ -6079,9 +6129,9 @@ function SearchResults({
       });
     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()}”`
         });
@@ -6135,6 +6185,7 @@ function SearchPanel({
     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
@@ -6193,7 +6244,7 @@ function SearchPanel({
     "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
   }));
 }