@planningcenter/topbar 11.0.1 → 11.0.2

package/dist/topbar.js

@@ -699,6 +699,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) {
@@ -779,6 +786,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] = 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;
+}
+
+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
@@ -805,23 +864,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,
@@ -841,6 +883,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";
@@ -892,6 +938,16 @@ const AppsProvider = ({
     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({
@@ -2060,8 +2116,6 @@ const useSetCurrentRouteInfo = ({
   }, [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({
@@ -2969,6 +3023,7 @@ function ColorModeSwitcher() {
         colorMode
       });
       document.documentElement.setAttribute("data-color-mode", colorMode);
+      document.documentElement.setAttribute(RESOLVED_COLOR_MODE_ATTRIBUTE, resolveColorMode(colorMode));
       updateColorMode(colorMode);
     }
   }), /*#__PURE__*/React.createElement(ColorModeIcon, {
@@ -4403,7 +4458,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