@planningcenter/topbar 11.0.1-qa-755.0 → 11.0.2

package/dist/topbar.modern.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';
@@ -675,6 +675,13 @@ const useJoltEffect = (channelSubscription, eventName, callback) => {
 };
 
 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 +762,58 @@ const useNotificationsHasUnread = ({
   return storedValue;
 };
 
+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;
+}
+
+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 +840,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 +859,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 +914,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 +2092,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({
@@ -2945,6 +2999,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, {