@firecms/core 3.0.0-canary.184 → 3.0.0-canary.186

package/dist/index.umd.js

@@ -40,8 +40,6 @@
   const DEFAULT_MODE_STATE = {
     mode: "light",
     setMode: (mode) => {
-    },
-    toggleMode: () => {
     }
   };
   const ModeControllerContext = React.createContext(DEFAULT_MODE_STATE);
@@ -13588,7 +13586,7 @@
     const authController = useAuthController();
     const {
       mode,
-      toggleMode
+      setMode
     } = useModeController();
     const navigate = reactRouterDom.useNavigate();
     const largeLayout = useLargeLayout();
@@ -13688,11 +13686,25 @@
       t9 = $[22];
     }
     let t10;
-    if ($[23] !== includeModeToggle || $[24] !== mode || $[25] !== toggleMode) {
-      t10 = includeModeToggle && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "inherit", "aria-label": "Open drawer", onClick: toggleMode, size: "large", children: mode === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(ui.DarkModeIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ui.LightModeIcon, {}) });
+    if ($[23] !== includeModeToggle || $[24] !== mode || $[25] !== setMode) {
+      t10 = includeModeToggle && /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, { trigger: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "inherit", "aria-label": "Open drawer", size: "large", children: mode === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(ui.DarkModeIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ui.LightModeIcon, {}) }), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { onClick: () => setMode("dark"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.DarkModeIcon, { size: "smallest" }),
+          " Dark"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { onClick: () => setMode("light"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.LightModeIcon, { size: "smallest" }),
+          " Light "
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { onClick: () => setMode("system"), children: [
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(ui.BrightnessMediumIcon, { size: "smallest" }),
+          "System"
+        ] })
+      ] });
       $[23] = includeModeToggle;
       $[24] = mode;
-      $[25] = toggleMode;
+      $[25] = setMode;
       $[26] = t10;
     } else {
       t10 = $[26];
@@ -14826,40 +14838,35 @@
       return mediaQueryList.matches;
     }, []);
     const prefersDarkModeStorage = localStorage.getItem("prefers-dark-mode") != null ? localStorage.getItem("prefers-dark-mode") === "true" : null;
-    const prefersDarkMode = prefersDarkModeStorage ?? prefersDarkModeQuery;
+    const prefersDarkMode = prefersDarkModeStorage ?? prefersDarkModeQuery();
     const [mode, setMode] = React.useState(prefersDarkMode ? "dark" : "light");
     React.useEffect(() => {
       setMode(prefersDarkMode ? "dark" : "light");
       setDocumentMode(prefersDarkMode ? "dark" : "light");
     }, [prefersDarkMode]);
-    const setDarkMode = React.useCallback(() => {
-      setMode("dark");
-      setDocumentMode("dark");
-    }, []);
-    const setLightMode = React.useCallback(() => {
-      setMode("light");
-      setDocumentMode("light");
-    }, []);
     const setDocumentMode = (mode_0) => {
       document.body.style.setProperty("color-scheme", mode_0);
       document.documentElement.dataset.theme = mode_0;
     };
-    const toggleMode = React.useCallback(() => {
-      const prefersDarkModeQueryResult = prefersDarkModeQuery();
-      if (mode === "light") {
-        if (!prefersDarkModeQueryResult) localStorage.setItem("prefers-dark-mode", "true");
-        else localStorage.removeItem("prefers-dark-mode");
-        setDarkMode();
+    const setModeInternal = React.useCallback((mode_1) => {
+      if (mode_1 === "light") {
+        setDocumentMode("light");
+        localStorage.setItem("prefers-dark-mode", "false");
+        setMode("light");
+      } else if (mode_1 === "dark") {
+        setDocumentMode("dark");
+        localStorage.setItem("prefers-dark-mode", "true");
+        setMode("dark");
       } else {
-        if (prefersDarkModeQueryResult) localStorage.setItem("prefers-dark-mode", "false");
-        else localStorage.removeItem("prefers-dark-mode");
-        setLightMode();
+        const preferredMode = prefersDarkModeQuery() ? "dark" : "light";
+        setDocumentMode(preferredMode);
+        localStorage.removeItem("prefers-dark-mode");
+        setMode(preferredMode);
       }
-    }, [mode, prefersDarkModeQuery]);
+    }, [prefersDarkModeQuery]);
     return {
       mode,
-      setMode,
-      toggleMode
+      setMode: setModeInternal
     };
   }
   function useValidateAuthenticator(t0) {