@planningcenter/topbar 11.0.1 → 11.0.3-rc.0

package/dist/topbar.umd.js

@@ -356,7 +356,7 @@
     fill: fill
   })));
 
-  var styles$b = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU"};
+  var styles$b = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement--promo":"announcement--promo-FarUk","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU","dismiss--promo":"dismiss--promo-7zvO4"};
 
   function AnnouncementIcon() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -424,11 +424,14 @@
     render() {
       const {
         style,
+        variant,
         ...platformProps
       } = this.props;
+      const isPromo = variant === "promo";
       return /*#__PURE__*/React.createElement("div", {
-        className: classnames(styles$b["announcement"], styles$b["announcement--platform"])
-      }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
+        className: classnames(styles$b["announcement"], styles$b[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
+        "data-announcement-variant": variant !== null && variant !== void 0 ? variant : "platform"
+      }, !isPromo && /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
         className: styles$b["announcement-content"],
         style: style,
         ...platformProps
@@ -451,10 +454,12 @@
         env: this.props.env,
         initialAnnouncements: this.props.data,
         configuredFetch: this.props.configuredFetch
-      }, (data, actions) => Boolean(data.announcements.length > 0) ? (/*#__PURE__*/React.createElement("div", null, data.announcements.map(announcement => this.props.renderItem({
-        actions,
-        announcement
-      })))) : null));
+      }, (data, actions) => {
+        return data.announcements.length > 0 ? (/*#__PURE__*/React.createElement("div", null, data.announcements.map(announcement => this.props.renderItem({
+          actions,
+          announcement
+        })))) : null;
+      }));
     }
   }
   PlatformAnnouncements.defaultProps = {
@@ -462,33 +467,39 @@
     renderItem: ({
       announcement,
       actions
-    }) => (/*#__PURE__*/React.createElement(DissmissibleAnnouncement, {
+    }) => (/*#__PURE__*/React.createElement(DismissibleAnnouncement, {
       key: announcement.id,
       html: announcement.data.html,
+      variant: announcement.data.style,
       onClick: () => actions.dismissAnnouncements(announcement.id)
     }))
   };
   function StyledDismissButton$1({
+    variant,
     ...props
   }) {
+    const isPromo = variant === "promo";
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$b.dismiss,
+      className: classnames(styles$b.dismiss, isPromo && styles$b["dismiss--promo"]),
       ...props
     }, /*#__PURE__*/React.createElement(X, {
-      fill: "white",
+      fill: isPromo ? "currentColor" : "white",
       style: {
         height: 20,
         width: 20
       }
     }));
   }
-  function DissmissibleAnnouncement(props) {
-    return /*#__PURE__*/React.createElement(StyledAnnouncement$1, null, /*#__PURE__*/React.createElement("span", {
+  function DismissibleAnnouncement(props) {
+    return /*#__PURE__*/React.createElement(StyledAnnouncement$1, {
+      variant: props.variant
+    }, /*#__PURE__*/React.createElement("span", {
       dangerouslySetInnerHTML: {
         __html: props.html
       }
     }), /*#__PURE__*/React.createElement(StyledDismissButton$1, {
+      variant: props.variant,
       onClick: props.onClick
     }));
   }
@@ -685,7 +696,47 @@
     }, [channelSubscription, callback]);
   };
 
+  function useMediaQuery(query) {
+    const getMatches = query => {
+      // Prevents SSR issues
+      if (typeof window !== "undefined") {
+        return window.matchMedia(query).matches;
+      }
+      return false;
+    };
+    const [matches, setMatches] = React.useState(getMatches(query));
+    function handleChange() {
+      setMatches(getMatches(query));
+    }
+    React.useEffect(() => {
+      const matchMedia = window.matchMedia(query);
+      // Triggered at the first client-side load and if query changes
+      handleChange();
+      // Listen matchMedia
+      if (matchMedia.addListener) {
+        matchMedia.addListener(handleChange);
+      } else {
+        matchMedia.addEventListener("change", handleChange);
+      }
+      return () => {
+        if (matchMedia.removeListener) {
+          matchMedia.removeListener(handleChange);
+        } else {
+          matchMedia.removeEventListener("change", handleChange);
+        }
+      };
+    }, [query]);
+    return matches;
+  }
+
   const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1);
+  const RESOLVED_COLOR_MODE_ATTRIBUTE = "data-resolved-color-mode";
+  function resolveColorMode(colorMode) {
+    if (colorMode === "system") {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    return colorMode;
+  }
   const debounce = (func, wait) => {
     let timeout;
     return function (...args) {
@@ -766,6 +817,25 @@
     return storedValue;
   };
 
+  function createStore(initialState) {
+    let currentState = initialState;
+    const listeners = new Set();
+    return {
+      getState: () => currentState,
+      setState: newState => {
+        currentState = newState;
+        listeners.forEach(listener => listener(currentState));
+      },
+      subscribe: listener => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      }
+    };
+  }
+  const store$1 = createStore({});
+
+  const useStore = (selector = state => state) => shim.useSyncExternalStore(store$1.subscribe, () => selector(store$1.getState()));
+
   const useTopbarAPI = ({
     configuredFetch,
     env
@@ -792,23 +862,6 @@
     return resp;
   };
 
-  function createStore(initialState) {
-    let currentState = initialState;
-    const listeners = new Set();
-    return {
-      getState: () => currentState,
-      setState: newState => {
-        currentState = newState;
-        listeners.forEach(listener => listener(currentState));
-      },
-      subscribe: listener => {
-        listeners.add(listener);
-        return () => listeners.delete(listener);
-      }
-    };
-  }
-  const store$1 = createStore({});
-
   const AppsProvider = ({
     configuredFetch = defaultFetch,
     enableJoltLogging,
@@ -828,6 +881,10 @@
     const hasConnectedPeople = (_b = (_a = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b.has_connected_people;
     const mfaConfigured = !!((_d = (_c = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _c === void 0 ? void 0 : _c.attributes) === null || _d === void 0 ? void 0 : _d.mfa_configured);
     const colorMode = (_f = (_e = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _e === void 0 ? void 0 : _e.attributes) === null || _f === void 0 ? void 0 : _f.color_mode;
+    const {
+      colorMode: currentColorMode
+    } = useStore();
+    const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
     const name = (_h = (_g = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _g === void 0 ? void 0 : _g.attributes) === null || _h === void 0 ? void 0 : _h.name;
     const notificationsEnabled = !window.notificationsDisabled;
     const organizationTimeZone = ((_k = (_j = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _j === void 0 ? void 0 : _j.attributes) === null || _k === void 0 ? void 0 : _k.org_time_zone) || "America/Los_Angeles";
@@ -879,6 +936,16 @@
       enabled: true,
       joltChannel: notificationsJoltChannel
     });
+    React.useLayoutEffect(() => {
+      if (colorMode) {
+        document.documentElement.setAttribute(RESOLVED_COLOR_MODE_ATTRIBUTE, resolveColorMode(colorMode));
+      }
+    }, [colorMode]);
+    React.useEffect(() => {
+      if (currentColorMode === "system") {
+        document.documentElement.setAttribute(RESOLVED_COLOR_MODE_ATTRIBUTE, prefersDark ? "dark" : "light");
+      }
+    }, [currentColorMode, prefersDark]);
     React.useEffect(() => {
       const state = store$1.getState();
       store$1.setState({
@@ -2047,8 +2114,6 @@
     }, [routes, app]);
   };
 
-  const useStore = (selector = state => state) => shim.useSyncExternalStore(store$1.subscribe, () => selector(store$1.getState()));
-
   const useUpdateStore = () => React.useCallback(updates => {
     const currentState = store$1.getState();
     store$1.setState({
@@ -2414,7 +2479,7 @@
       width: 24,
       xmlns: "http://www.w3.org/2000/svg"
     }, /*#__PURE__*/React.createElement(Accounts$1, {
-      color: "var(--t-icon-color-secondary",
+      color: "var(--t-icon-color-secondary)",
       key: "key2"
     })), /*#__PURE__*/React.createElement("span", null, "Account settings"));
   }
@@ -2662,8 +2727,8 @@
       function onHashChange() {
         updateFragment(location.hash);
       }
-      window.addEventListener('hashchange', onHashChange);
-      return () => window.removeEventListener('hashchange', onHashChange);
+      window.addEventListener("hashchange", onHashChange);
+      return () => window.removeEventListener("hashchange", onHashChange);
     }, [updateFragment]);
     return [value, updateFragment];
   }
@@ -2677,9 +2742,9 @@
     }, [updateFragment]);
     const route = React.useMemo(() => {
       if (toolbarFragment) {
-        const [tool, ...rest] = toolbarFragment.split('/');
+        const [tool, ...rest] = toolbarFragment.split("/");
         return {
-          path: rest.join('/'),
+          path: rest.join("/"),
           tool
         };
       } else {
@@ -2956,6 +3021,7 @@
           colorMode
         });
         document.documentElement.setAttribute("data-color-mode", colorMode);
+        document.documentElement.setAttribute(RESOLVED_COLOR_MODE_ATTRIBUTE, resolveColorMode(colorMode));
         updateColorMode(colorMode);
       }
     }), /*#__PURE__*/React.createElement(ColorModeIcon, {
@@ -4212,11 +4278,11 @@
     return iframeSrc;
   }
   function encodeQueryString(path) {
-    const [pathPart, queryPart] = path.split('?', 2);
+    const [pathPart, queryPart] = path.split("?", 2);
     return queryPart ? `${pathPart}?${encodeURIComponent(queryPart)}` : pathPart;
   }
   function decodeQueryString(path) {
-    const [pathPart, queryPart] = path.split('?', 2);
+    const [pathPart, queryPart] = path.split("?", 2);
     return queryPart ? `${pathPart}?${decodeURIComponent(queryPart)}` : pathPart;
   }
 
@@ -4390,7 +4456,7 @@
         document.body.style.overflow = "hidden";
         window.scrollTo(0, 0);
       } else {
-        document.body.style.overflow = "auto";
+        document.body.style.overflow = "";
       }
     }, [open]);
     // Listen for external close requests from store