@planningcenter/topbar 11.0.1 → 11.0.2

package/dist/topbar.umd.js

@@ -686,6 +686,13 @@
   };
 
   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 +773,58 @@
     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
@@ -792,23 +851,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 +870,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 +925,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 +2103,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({
@@ -2956,6 +3010,7 @@
           colorMode
         });
         document.documentElement.setAttribute("data-color-mode", colorMode);
+        document.documentElement.setAttribute(RESOLVED_COLOR_MODE_ATTRIBUTE, resolveColorMode(colorMode));
         updateColorMode(colorMode);
       }
     }), /*#__PURE__*/React.createElement(ColorModeIcon, {
@@ -4390,7 +4445,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