@planningcenter/topbar 11.0.1 → 11.0.3-rc.0

package/dist/topbar.module.js

@@ -1,6 +1,6 @@
 import { Link } from '@planningcenter/tapestry';
 import * as React from 'react';
-import React__default, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import React__default, { useState, useEffect, useMemo, useLayoutEffect, useCallback, useRef } from 'react';
 import pcoUrl from '@planningcenter/url';
 import * as general from '@planningcenter/icons/paths/general';
 import Jolt from '@planningcenter/jolt-client';
@@ -345,7 +345,7 @@ const X = ({
   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__default.createElement("svg", {
@@ -413,11 +413,14 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React__default.Compo
   render() {
     const {
       style,
+      variant,
       ...platformProps
     } = this.props;
+    const isPromo = variant === "promo";
     return /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles$b["announcement"], styles$b["announcement--platform"])
-    }, /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.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__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", {
       className: styles$b["announcement-content"],
       style: style,
       ...platformProps
@@ -440,10 +443,12 @@ class PlatformAnnouncements extends React__default.Component {
       env: this.props.env,
       initialAnnouncements: this.props.data,
       configuredFetch: this.props.configuredFetch
-    }, (data, actions) => Boolean(data.announcements.length > 0) ? (/*#__PURE__*/React__default.createElement("div", null, data.announcements.map(announcement => this.props.renderItem({
-      actions,
-      announcement
-    })))) : null));
+    }, (data, actions) => {
+      return data.announcements.length > 0 ? (/*#__PURE__*/React__default.createElement("div", null, data.announcements.map(announcement => this.props.renderItem({
+        actions,
+        announcement
+      })))) : null;
+    }));
   }
 }
 PlatformAnnouncements.defaultProps = {
@@ -451,33 +456,39 @@ PlatformAnnouncements.defaultProps = {
   renderItem: ({
     announcement,
     actions
-  }) => (/*#__PURE__*/React__default.createElement(DissmissibleAnnouncement, {
+  }) => (/*#__PURE__*/React__default.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__default.createElement("button", {
     type: "button",
-    className: styles$b.dismiss,
+    className: classnames(styles$b.dismiss, isPromo && styles$b["dismiss--promo"]),
     ...props
   }, /*#__PURE__*/React__default.createElement(X, {
-    fill: "white",
+    fill: isPromo ? "currentColor" : "white",
     style: {
       height: 20,
       width: 20
     }
   }));
 }
-function DissmissibleAnnouncement(props) {
-  return /*#__PURE__*/React__default.createElement(StyledAnnouncement$1, null, /*#__PURE__*/React__default.createElement("span", {
+function DismissibleAnnouncement(props) {
+  return /*#__PURE__*/React__default.createElement(StyledAnnouncement$1, {
+    variant: props.variant
+  }, /*#__PURE__*/React__default.createElement("span", {
     dangerouslySetInnerHTML: {
       __html: props.html
     }
   }), /*#__PURE__*/React__default.createElement(StyledDismissButton$1, {
+    variant: props.variant,
     onClick: props.onClick
   }));
 }
@@ -674,7 +685,47 @@ const useJoltEffect = (channelSubscription, eventName, callback) => {
   }, [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] = useState(getMatches(query));
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+  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) {
@@ -755,6 +806,25 @@ const useNotificationsHasUnread = ({
   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) => useSyncExternalStore(store$1.subscribe, () => selector(store$1.getState()));
+
 const useTopbarAPI = ({
   configuredFetch,
   env
@@ -781,23 +851,6 @@ const useTopbarAPI = ({
   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,
@@ -817,6 +870,10 @@ const AppsProvider = ({
   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";
@@ -868,6 +925,16 @@ const AppsProvider = ({
     enabled: true,
     joltChannel: notificationsJoltChannel
   });
+  useLayoutEffect(() => {
+    if (colorMode) {
+      document.documentElement.setAttribute(RESOLVED_COLOR_MODE_ATTRIBUTE, resolveColorMode(colorMode));
+    }
+  }, [colorMode]);
+  useEffect(() => {
+    if (currentColorMode === "system") {
+      document.documentElement.setAttribute(RESOLVED_COLOR_MODE_ATTRIBUTE, prefersDark ? "dark" : "light");
+    }
+  }, [currentColorMode, prefersDark]);
   useEffect(() => {
     const state = store$1.getState();
     store$1.setState({
@@ -2036,8 +2103,6 @@ const useSetCurrentRouteInfo = ({
   }, [routes, app]);
 };
 
-const useStore = (selector = state => state) => useSyncExternalStore(store$1.subscribe, () => selector(store$1.getState()));
-
 const useUpdateStore = () => useCallback(updates => {
   const currentState = store$1.getState();
   store$1.setState({
@@ -2403,7 +2468,7 @@ function AccountSettingsLink({
     width: 24,
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React__default.createElement(Accounts$1, {
-    color: "var(--t-icon-color-secondary",
+    color: "var(--t-icon-color-secondary)",
     key: "key2"
   })), /*#__PURE__*/React__default.createElement("span", null, "Account settings"));
 }
@@ -2651,8 +2716,8 @@ function useFragmentKey(key) {
     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];
 }
@@ -2666,9 +2731,9 @@ function useFragmentRouting() {
   }, [updateFragment]);
   const route = useMemo(() => {
     if (toolbarFragment) {
-      const [tool, ...rest] = toolbarFragment.split('/');
+      const [tool, ...rest] = toolbarFragment.split("/");
       return {
-        path: rest.join('/'),
+        path: rest.join("/"),
         tool
       };
     } else {
@@ -2945,6 +3010,7 @@ function ColorModeSwitcher() {
         colorMode
       });
       document.documentElement.setAttribute("data-color-mode", colorMode);
+      document.documentElement.setAttribute(RESOLVED_COLOR_MODE_ATTRIBUTE, resolveColorMode(colorMode));
       updateColorMode(colorMode);
     }
   }), /*#__PURE__*/React__default.createElement(ColorModeIcon, {
@@ -4201,11 +4267,11 @@ function useStableIframeSrcAttributeAndSyncFragmentRoute({
   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;
 }
 
@@ -4379,7 +4445,7 @@ function Toolbar({
       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