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

package/dist/hooks/useModeController.d.ts

@@ -4,8 +4,7 @@
  */
 export interface ModeController {
     mode: "light" | "dark";
-    setMode: (mode: "light" | "dark") => void;
-    toggleMode: () => void;
+    setMode: (mode: "light" | "dark" | "system") => void;
 }
 /**
  * Hook to retrieve the current mode ("light" | "dark"), and `setMode`

package/dist/index.es.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
 import * as React from "react";
 import React__default, { forwardRef, useState, useRef, useEffect, useContext, useCallback, useMemo, createRef, createContext, useLayoutEffect, useDeferredValue, createElement } from "react";
-import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, IconButton, InfoIcon, Typography, cls, ContentCopyIcon, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, ErrorIcon, defaultBorderMixin, OpenInNewIcon, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, Skeleton, paperMixin, EditIcon, KeyboardTabIcon, DoNotDisturbOnIcon, Menu, MoreVertIcon, MenuItem, Checkbox, Chip, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, ExpandablePanel, Markdown, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, StarIcon, Collapse, Container, NotesIcon, Alert, Tab, Tabs, LoadingButton, CheckIcon, FilterListOffIcon, SearchIcon, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, HandleIcon, RemoveIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, DescriptionIcon, fieldBackgroundMixin, fieldBackgroundHoverMixin, fieldBackgroundDisabledMixin, ArrowDropDownIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, MailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, Sheet, OpenInFullIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
+import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, IconButton, InfoIcon, Typography, cls, ContentCopyIcon, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, ErrorIcon, defaultBorderMixin, OpenInNewIcon, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, Skeleton, paperMixin, EditIcon, KeyboardTabIcon, DoNotDisturbOnIcon, Menu, MoreVertIcon, MenuItem, Checkbox, Chip, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, ExpandablePanel, Markdown, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, StarIcon, Collapse, Container, NotesIcon, Alert, Tab, Tabs, LoadingButton, CheckIcon, FilterListOffIcon, SearchIcon, Avatar, DarkModeIcon, LightModeIcon, BrightnessMediumIcon, LogoutIcon, HandleIcon, RemoveIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, DescriptionIcon, fieldBackgroundMixin, fieldBackgroundHoverMixin, fieldBackgroundDisabledMixin, ArrowDropDownIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, MailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, Sheet, OpenInFullIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import hash from "object-hash";
 import { useFormex, setIn, getIn, useCreateFormex, Formex, Field } from "@firecms/formex";
@@ -38,8 +38,6 @@ const SnackbarProvider = (t0) => {
 const DEFAULT_MODE_STATE = {
   mode: "light",
   setMode: (mode) => {
-  },
-  toggleMode: () => {
   }
 };
 const ModeControllerContext = React__default.createContext(DEFAULT_MODE_STATE);
@@ -13586,7 +13584,7 @@ const DefaultAppBar = function DefaultAppBar2(t0) {
   const authController = useAuthController();
   const {
     mode,
-    toggleMode
+    setMode
   } = useModeController();
   const navigate = useNavigate();
   const largeLayout = useLargeLayout();
@@ -13686,11 +13684,25 @@ const DefaultAppBar = function DefaultAppBar2(t0) {
     t9 = $[22];
   }
   let t10;
-  if ($[23] !== includeModeToggle || $[24] !== mode || $[25] !== toggleMode) {
-    t10 = includeModeToggle && /* @__PURE__ */ jsx(IconButton, { color: "inherit", "aria-label": "Open drawer", onClick: toggleMode, size: "large", children: mode === "dark" ? /* @__PURE__ */ jsx(DarkModeIcon, {}) : /* @__PURE__ */ jsx(LightModeIcon, {}) });
+  if ($[23] !== includeModeToggle || $[24] !== mode || $[25] !== setMode) {
+    t10 = includeModeToggle && /* @__PURE__ */ jsxs(Menu, { trigger: /* @__PURE__ */ jsx(IconButton, { color: "inherit", "aria-label": "Open drawer", size: "large", children: mode === "dark" ? /* @__PURE__ */ jsx(DarkModeIcon, {}) : /* @__PURE__ */ jsx(LightModeIcon, {}) }), children: [
+      /* @__PURE__ */ jsxs(MenuItem, { onClick: () => setMode("dark"), children: [
+        /* @__PURE__ */ jsx(DarkModeIcon, { size: "smallest" }),
+        " Dark"
+      ] }),
+      /* @__PURE__ */ jsxs(MenuItem, { onClick: () => setMode("light"), children: [
+        /* @__PURE__ */ jsx(LightModeIcon, { size: "smallest" }),
+        " Light "
+      ] }),
+      /* @__PURE__ */ jsxs(MenuItem, { onClick: () => setMode("system"), children: [
+        " ",
+        /* @__PURE__ */ jsx(BrightnessMediumIcon, { size: "smallest" }),
+        "System"
+      ] })
+    ] });
     $[23] = includeModeToggle;
     $[24] = mode;
-    $[25] = toggleMode;
+    $[25] = setMode;
     $[26] = t10;
   } else {
     t10 = $[26];
@@ -14824,40 +14836,35 @@ function useBuildModeController() {
     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] = useState(prefersDarkMode ? "dark" : "light");
   useEffect(() => {
     setMode(prefersDarkMode ? "dark" : "light");
     setDocumentMode(prefersDarkMode ? "dark" : "light");
   }, [prefersDarkMode]);
-  const setDarkMode = useCallback(() => {
-    setMode("dark");
-    setDocumentMode("dark");
-  }, []);
-  const setLightMode = 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 = useCallback(() => {
-    const prefersDarkModeQueryResult = prefersDarkModeQuery();
-    if (mode === "light") {
-      if (!prefersDarkModeQueryResult) localStorage.setItem("prefers-dark-mode", "true");
-      else localStorage.removeItem("prefers-dark-mode");
-      setDarkMode();
+  const setModeInternal = 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) {