@planningcenter/topbar 12.3.0-qa-952.0 → 12.3.0-qa-953.0

package/dist/topbar.js

@@ -3390,6 +3390,45 @@ function saveLastProduct(slug) {
   }
 }
 
+// Products open modals from many libraries, not all of which mark themselves
+// with roles, so a modal is recognized by what it does: cover the page.
+function isModalOpen() {
+  const {
+    clientHeight,
+    clientWidth
+  } = document.documentElement;
+  const element = document.elementFromPoint(clientWidth / 2, clientHeight / 2);
+  return element !== null && (isInNativeDialog(element) || hasBackdrop(element, clientWidth, clientHeight));
+}
+// A native modal's backdrop is drawn by the browser rather than being an
+// element; hit-testing it lands on the dialog itself.
+function isInNativeDialog(element) {
+  return element.closest("dialog[open]") !== null;
+}
+function hasBackdrop(element, width, height) {
+  let current = element;
+  while (current && !isBackdrop(current, width, height)) {
+    current = current.parentElement;
+  }
+  return current !== null;
+}
+// Some backdrops start below the topbar rather than at the top of the screen,
+// so the layer only has to span the width and reach from the center to the
+// bottom. Its own box has to reach the center: a bar along the bottom can
+// hold a panel that pops up over the center, like Services' media player.
+// react-aria leaves a closed modal's backdrop up while it fades out, search's
+// own included, so one that's on its way out doesn't count.
+function isBackdrop(element, width, height) {
+  const rect = element.getBoundingClientRect();
+  return !element.matches("[data-exiting]") && getComputedStyle(element).position === "fixed" && rect.width >= width - SCROLLBAR_SLACK && rect.top <= height / 2 && rect.bottom >= height - ROUNDING_SLACK;
+}
+// react-aria keeps a classic scrollbar's gutter reserved while its modals lock
+// scrolling, so their backdrops stop short of the right edge by its width.
+const SCROLLBAR_SLACK = 24;
+// Rects are fractional at non-100% zoom, but clientWidth and clientHeight are
+// rounded to whole pixels.
+const ROUNDING_SLACK = 1;
+
 var styles$e = {"visuallyHidden":"visuallyHidden-C28ju","searchButton":"searchButton-YAeJ1","modal":"modal-NR3TO","header":"header-c3SLe","input":"input-DkZNI","clearButton":"clearButton-t5hFs"};
 
 var styles$d = {"icon":"icon-XKLvN","squircle":"squircle-JCHr6"};
@@ -4623,13 +4662,15 @@ function SearchButtonAndDialog({
   const [open, setOpen] = React.useState(false);
   React.useEffect(() => {
     // Rich text editors like Trix bind ⌘K to "insert link"; capturing at the
-    // window and stopping propagation keeps them from ever seeing it.
+    // window and stopping propagation keeps them from ever seeing it. Under a
+    // product's modal, search stays shut rather than stacking a second modal,
+    // and the keystroke goes on to the product.
     const handleKeyDown = event => {
-      if (isSearchShortcut(event)) {
+      if (open && isSearchShortcut(event)) {
         event.preventDefault();
         event.stopPropagation();
-        setOpen(wasOpen => !wasOpen);
-      } else if (isLegacySearchShortcut(event)) {
+        setOpen(false);
+      } else if (!open && (isSearchShortcut(event) || isLegacySearchShortcut(event)) && !isModalOpen()) {
         event.preventDefault();
         event.stopPropagation();
         setOpen(true);
@@ -4641,7 +4682,7 @@ function SearchButtonAndDialog({
     return () => window.removeEventListener("keydown", handleKeyDown, {
       capture: true
     });
-  }, []);
+  }, [open]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     "aria-keyshortcuts": `${isMac() ? "Meta+K" : "Control+K"} /`,
     "aria-label": "Search",