@firecms/core 3.0.0-beta.10 → 3.0.0-beta.12

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -4,7 +4,7 @@ import { EnumType, FieldProps } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { getIconForProperty, resolveEnumValues } from "../../util";
-import { ClearIcon, cls, IconButton, Select, SelectItem } from "@firecms/ui";
+import { CloseIcon, cls, IconButton, Select, SelectItem } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { PropertyIdCopyTooltip } from "../../components";
 
@@ -29,7 +29,7 @@ export function SelectFieldBinding<T extends EnumType>({
                                                            touched,
                                                            property,
                                                            includeDescription,
-                                                           size = "medium"
+                                                           size = "large"
                                                        }: SelectProps<T>) {
 
     const enumValues = resolveEnumValues(property.enumValues ?? []);
@@ -50,9 +50,10 @@ export function SelectFieldBinding<T extends EnumType>({
         <>
 
             <Select
-                size={size === "medium" ? "medium" : "small"}
                 value={value !== undefined && value != null ? value.toString() : ""}
                 disabled={disabled}
+                size={size}
+                fullWidth={true}
                 position="item-aligned"
                 inputClassName={cls("w-full")}
                 label={
@@ -61,13 +62,13 @@ export function SelectFieldBinding<T extends EnumType>({
                             icon={getIconForProperty(property, "small")}
                             required={property.validation?.required}
                             title={property.name}
-                            className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}
+                            className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0"}
                         />
                     </PropertyIdCopyTooltip>}
                 endAdornment={
                     property.clearable && <IconButton
                         onClick={handleClearClick}>
-                        <ClearIcon/>
+                        <CloseIcon/>
                     </IconButton>
                 }
                 onValueChange={(updatedValue: string) => {

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -28,7 +28,7 @@ import {
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
-const disabledClasses = "border-dotted-gray"
+const disabledClasses = fieldBackgroundDisabledMixin;
 const nonActiveDropClasses = fieldBackgroundHoverMixin
 const activeDropClasses = "pt-0 border-2 border-solid"
 const acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-green-500"
@@ -103,7 +103,7 @@ export function StorageUploadFieldBinding({
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name}
-                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                    className={"h-8text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             <StorageUpload
                 value={internalValue}
@@ -206,6 +206,7 @@ function FileDropComponent({
             className={cls(
                 fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "",
                 dropZoneClasses,
                 multipleFilesSupported && internalValue.length ? "" : "flex",
                 {
@@ -248,7 +249,7 @@ function FileDropComponent({
                                 metadata={metadata}
                                 storagePath={storagePathBuilder(entry.file)}
                                 onFileUploadComplete={onFileUploadComplete}
-                                imageSize={size === "medium" ? 220 : 118}
+                                imageSize={size === "large" ? 220 : 118}
                                 simple={false}
                             />
                         );
@@ -285,7 +286,8 @@ function FileDropComponent({
             <div
                 className="flex-grow min-h-[38px] box-border m-2 text-center">
                 <Typography align={"center"}
-                            variant={"label"}>
+                            variant={"label"}
+                            className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
                     {helpText}
                 </Typography>
             </div>
@@ -339,7 +341,7 @@ export function StorageUpload({
     }
 
     const metadata: Record<string, unknown> | undefined = storage?.metadata;
-    const size = multipleFilesSupported ? "small" : "medium";
+    const size = multipleFilesSupported ? "medium" : "large";
 
     const moveItem = useCallback((fromIndex: number, toIndex: number) => {
         if (!multipleFilesSupported) return;

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -16,18 +16,18 @@ type SwitchFieldProps = FieldProps<boolean>;
  * and tables to the specified properties.
  * @group Form fields
  */
-export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
-                                                                                   propertyKey,
-                                                                                   value,
-                                                                                   setValue,
-                                                                                   error,
-                                                                                   showError,
-                                                                                   autoFocus,
-                                                                                   disabled,
-                                                                                   size = "medium",
-                                                                                   property,
-                                                                                   includeDescription
-                                                                               }: SwitchFieldProps, ref) {
+export const SwitchFieldBinding = function SwitchFieldBinding({
+                                                                  propertyKey,
+                                                                  value,
+                                                                  setValue,
+                                                                  error,
+                                                                  showError,
+                                                                  autoFocus,
+                                                                  disabled,
+                                                                  size = "large",
+                                                                  property,
+                                                                  includeDescription
+                                                              }: SwitchFieldProps) {
 
     useClearRestoreValue({
         property,
@@ -39,18 +39,19 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
         <>
 
             <PropertyIdCopyTooltip propertyKey={propertyKey}>
-            <BooleanSwitchWithLabel
-                value={value}
-                onValueChange={(v) => setValue(v)}
-                error={showError}
-                label={<LabelWithIcon
-                    icon={getIconForProperty(property, "small")}
-                    required={property.validation?.required}
-                    title={property.name}/>}
-                disabled={disabled}
-                autoFocus={autoFocus}
-                size={size}
-            />
+                <BooleanSwitchWithLabel
+                    value={value}
+                    onValueChange={(v) => setValue(v)}
+                    error={showError}
+                    className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                    label={<LabelWithIcon
+                        icon={getIconForProperty(property, "small")}
+                        required={property.validation?.required}
+                        title={property.name}/>}
+                    disabled={disabled}
+                    autoFocus={autoFocus}
+                    size={size}
+                />
             </PropertyIdCopyTooltip>
 
             <FieldHelperText includeDescription={includeDescription}
@@ -61,4 +62,4 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
         </>
 
     );
-});
+};

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 
-import { ClearIcon, Collapse, IconButton, TextField } from "@firecms/ui";
+import { CloseIcon, Collapse, IconButton, TextField } from "@firecms/ui";
 import { FieldProps, PreviewType } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { getIconForProperty } from "../../util";
@@ -28,7 +28,7 @@ export function TextFieldBinding<T extends string | number>({
                                                                 autoFocus,
                                                                 property,
                                                                 includeDescription,
-                                                                size = "medium"
+                                                                size = "large"
                                                             }: TextFieldBindingProps<T>) {
 
     let multiline: boolean | undefined;
@@ -75,6 +75,7 @@ export function TextFieldBinding<T extends string | number>({
                     value={value}
                     onChange={onChange}
                     autoFocus={autoFocus}
+                    className={property.widthPercentage !== undefined ? "mt-8" : undefined}
                     label={<LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required}
@@ -85,7 +86,7 @@ export function TextFieldBinding<T extends string | number>({
                     endAdornment={
                         property.clearable && <IconButton
                             onClick={handleClearClick}>
-                            <ClearIcon/>
+                            <CloseIcon/>
                         </IconButton>
                     }
                     error={showError ? error : undefined}

package/src/form/index.tsx

@@ -1,36 +1,20 @@
-import { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
-import { MultiSelectFieldBinding } from "./field_bindings/MultiSelectFieldBinding";
-import { ArrayOfReferencesFieldBinding } from "./field_bindings/ArrayOfReferencesFieldBinding";
-import { StorageUploadFieldBinding } from "./field_bindings/StorageUploadFieldBinding";
-import { TextFieldBinding } from "./field_bindings/TextFieldBinding";
-import { SwitchFieldBinding } from "./field_bindings/SwitchFieldBinding";
-import { DateTimeFieldBinding } from "./field_bindings/DateTimeFieldBinding";
-import { ReferenceFieldBinding } from "./field_bindings/ReferenceFieldBinding";
-import { MapFieldBinding } from "./field_bindings/MapFieldBinding";
-import { KeyValueFieldBinding } from "./field_bindings/KeyValueFieldBinding";
-import { RepeatFieldBinding } from "./field_bindings/RepeatFieldBinding";
-import { BlockFieldBinding } from "./field_bindings/BlockFieldBinding";
-import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
-import { MarkdownEditorFieldBinding } from "./field_bindings/MarkdownEditorFieldBinding";
-import { ArrayCustomShapedFieldBinding } from "./field_bindings/ArrayCustomShapedFieldBinding";
+export * from "./EntityForm";
 
-export {
-    ArrayCustomShapedFieldBinding,
-    RepeatFieldBinding,
-    MultiSelectFieldBinding,
-    ArrayOfReferencesFieldBinding,
-    BlockFieldBinding,
-    DateTimeFieldBinding,
-    ReadOnlyFieldBinding,
-    MapFieldBinding,
-    KeyValueFieldBinding,
-    ReferenceFieldBinding,
-    SelectFieldBinding,
-    StorageUploadFieldBinding,
-    SwitchFieldBinding,
-    MarkdownEditorFieldBinding,
-    TextFieldBinding
-};
+export { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
+export { MultiSelectFieldBinding } from "./field_bindings/MultiSelectFieldBinding";
+export { ArrayOfReferencesFieldBinding } from "./field_bindings/ArrayOfReferencesFieldBinding";
+export { StorageUploadFieldBinding } from "./field_bindings/StorageUploadFieldBinding";
+export { TextFieldBinding } from "./field_bindings/TextFieldBinding";
+export { SwitchFieldBinding } from "./field_bindings/SwitchFieldBinding";
+export { DateTimeFieldBinding } from "./field_bindings/DateTimeFieldBinding";
+export { ReferenceFieldBinding } from "./field_bindings/ReferenceFieldBinding";
+export { MapFieldBinding } from "./field_bindings/MapFieldBinding";
+export { KeyValueFieldBinding } from "./field_bindings/KeyValueFieldBinding";
+export { RepeatFieldBinding } from "./field_bindings/RepeatFieldBinding";
+export { BlockFieldBinding } from "./field_bindings/BlockFieldBinding";
+export { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
+export { MarkdownEditorFieldBinding } from "./field_bindings/MarkdownEditorFieldBinding";
+export { ArrayCustomShapedFieldBinding } from "./field_bindings/ArrayCustomShapedFieldBinding";
 
 export * from "./components";
 

package/src/form/validation.ts

@@ -90,11 +90,11 @@ export function mapPropertyToYup<T extends CMSType>(propertyContext: PropertyCon
 }
 
 export function getYupMapObjectSchema({
-                                                                         property,
-                                                                         entityId,
-                                                                         customFieldValidator,
-                                                                         name
-                                                                     }: PropertyContext<Record<string, any>>): ObjectSchema<any> {
+                                          property,
+                                          entityId,
+                                          customFieldValidator,
+                                          name
+                                      }: PropertyContext<Record<string, any>>): ObjectSchema<any> {
     const objectSchema: any = {};
     const validation = property.validation;
     if (property.properties)
@@ -159,7 +159,13 @@ function getYupStringSchema({
         if (validation.lowercase) collection = collection.lowercase();
         if (validation.uppercase) collection = collection.uppercase();
         if (property.email) collection = collection.email(`${property.name} must be an email`);
-        if (property.url) collection = collection.url(`${property.name} must be a url`);
+        if (property.url) {
+            if (!property.storage || property.storage?.storeUrl) {
+                collection = collection.url(`${property.name} must be a url`);
+            } else {
+                console.warn(`Property ${property.name} has a url validation but its storage configuration is not set to store urls`);
+            }
+        }
     } else {
         collection = collection.notRequired().nullable(true);
     }

package/src/hooks/data/delete.ts

@@ -12,10 +12,10 @@ import {
 /**
  * @group Hooks and utilities
  */
-export type DeleteEntityWithCallbacksProps<M extends Record<string, any>, UserType extends User = User> =
+export type DeleteEntityWithCallbacksProps<M extends Record<string, any>, USER extends User = User> =
     DeleteEntityProps<M>
     & {
-    callbacks?: EntityCallbacks<M, UserType>;
+    callbacks?: EntityCallbacks<M, USER>;
     onDeleteSuccess?: (entity: Entity<M>) => void;
     onDeleteFailure?: (entity: Entity<M>, e: Error) => void;
     onPreDeleteHookError?: (entity: Entity<M>, e: Error) => void;
@@ -43,7 +43,7 @@ export type DeleteEntityWithCallbacksProps<M extends Record<string, any>, UserTy
  * @param context
  * @group Hooks and utilities
  */
-export async function deleteEntityWithCallbacks<M extends Record<string, any>, UserType extends User>({
+export async function deleteEntityWithCallbacks<M extends Record<string, any>, USER extends User>({
                                                                                                           dataSource,
                                                                                                           entity,
                                                                                                           collection,
@@ -56,7 +56,7 @@ export async function deleteEntityWithCallbacks<M extends Record<string, any>, U
                                                                                                       }: DeleteEntityWithCallbacksProps<M> & {
                                                                                                           collection: ResolvedEntityCollection<M>,
                                                                                                           dataSource: DataSource,
-                                                                                                          context: FireCMSContext<UserType>
+                                                                                                          context: FireCMSContext<USER>
                                                                                                       }
 ): Promise<boolean> {
 

package/src/hooks/data/save.ts

@@ -1,7 +1,6 @@
 import {
     DataSource,
     Entity,
-    EntityCallbacks,
     EntityCollection,
     EntityValues,
     FireCMSContext,
@@ -49,7 +48,7 @@ export type SaveEntityWithCallbacksProps<M extends Record<string, any>> =
  * @see useDataSource
  * @group Hooks and utilities
  */
-export async function saveEntityWithCallbacks<M extends Record<string, any>, UserType extends User>({
+export async function saveEntityWithCallbacks<M extends Record<string, any>, USER extends User>({
                                                                                                         collection,
                                                                                                         path,
                                                                                                         entityId,
@@ -63,9 +62,9 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                                                                                                         onPreSaveHookError,
                                                                                                         onSaveSuccessHookError
                                                                                                     }: SaveEntityWithCallbacksProps<M> & {
-                                                                                                        collection: EntityCollection<M, UserType>,
+                                                                                                        collection: EntityCollection<M, USER>,
                                                                                                         dataSource: DataSource,
-                                                                                                        context: FireCMSContext<UserType>,
+                                                                                                        context: FireCMSContext<USER>,
                                                                                                     }
 ): Promise<void> {
 
@@ -76,7 +75,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
 
     const customizationController = context.customizationController;
 
-    const resolvedPath = context.navigation.resolveAliasesFrom(path);
+    const resolvedPath = context.navigation.resolveIdsFrom(path);
 
     const callbacks = collection.callbacks;
     if (callbacks?.onPreSave) {
@@ -86,7 +85,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                 path,
                 values: previousValues as EntityValues<M>,
                 entityId,
-                fields: customizationController.propertyConfigs
+                propertyConfigs: customizationController.propertyConfigs
             });
             updatedValues = await callbacks.onPreSave({
                 collection: resolvedCollection,
@@ -108,7 +107,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
         updatedValues = values;
     }
 
-    console.log("Saving entity", {
+    console.debug("Saving entity", {
         entityId,
         updatedValues,
         collection
@@ -128,7 +127,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    fields: customizationController.propertyConfigs
+                    propertyConfigs: customizationController.propertyConfigs
                 });
                 callbacks.onSaveSuccess({
                     collection: resolvedCollection,
@@ -157,7 +156,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    fields: customizationController.propertyConfigs
+                    propertyConfigs: customizationController.propertyConfigs
                 });
                 callbacks.onSaveFailure({
                     collection: resolvedCollection,

package/src/hooks/data/useCollectionFetch.tsx

@@ -60,7 +60,7 @@ export interface CollectionFetchResult<M extends Record<string, any>> {
  * @param searchString
  * @group Hooks and utilities
  */
-export function useCollectionFetch<M extends Record<string, any>, UserType extends User>(
+export function useCollectionFetch<M extends Record<string, any>, USER extends User>(
     {
         path: inputPath,
         collection,
@@ -73,12 +73,12 @@ export function useCollectionFetch<M extends Record<string, any>, UserType exten
     const dataSource = useDataSource(collection);
     const navigationController = useNavigationController();
 
-    const path = navigationController.resolveAliasesFrom(inputPath);
+    const path = navigationController.resolveIdsFrom(inputPath);
 
     const sortByProperty = sortBy ? sortBy[0] : undefined;
     const currentSort = sortBy ? sortBy[1] : undefined;
 
-    const context: FireCMSContext<UserType> = useFireCMSContext();
+    const context: FireCMSContext<USER> = useFireCMSContext();
 
     const [data, setData] = useState<Entity<M>[]>([]);
 

package/src/hooks/data/useEntityFetch.tsx

@@ -7,10 +7,11 @@ import { useFireCMSContext } from "../useFireCMSContext";
 /**
  * @group Hooks and utilities
  */
-export interface EntityFetchProps<M extends Record<string, any>, UserType extends User = User> {
+export interface EntityFetchProps<M extends Record<string, any>, USER extends User = User> {
     path: string;
     entityId?: string;
-    collection: EntityCollection<M, UserType>;
+    databaseId?: string;
+    collection: EntityCollection<M, USER>;
     useCache?: boolean;
 }
 
@@ -35,20 +36,21 @@ const CACHE: Record<string, Entity<any> | undefined> = {};
  * @group Hooks and utilities
  */
 
-export function useEntityFetch<M extends Record<string, any>, UserType extends User>(
+export function useEntityFetch<M extends Record<string, any>, USER extends User>(
     {
         path: inputPath,
         entityId,
         collection,
+        databaseId,
         useCache = false
-    }: EntityFetchProps<M, UserType>): EntityFetchResult<M> {
+    }: EntityFetchProps<M, USER>): EntityFetchResult<M> {
 
     const dataSource = useDataSource(collection);
     const navigationController = useNavigationController();
 
-    const path = navigationController.resolveAliasesFrom(inputPath);
+    const path = navigationController.resolveIdsFrom(inputPath);
 
-    const context: FireCMSContext<UserType> = useFireCMSContext();
+    const context: FireCMSContext<USER> = useFireCMSContext();
 
     const [entity, setEntity] = useState<Entity<M> | undefined>();
     const [dataLoading, setDataLoading] = useState<boolean>(true);
@@ -96,6 +98,7 @@ export function useEntityFetch<M extends Record<string, any>, UserType extends U
                 return dataSource.listenEntity<M>({
                     path,
                     entityId,
+                    databaseId,
                     collection,
                     onUpdate: onEntityUpdate,
                     onError
@@ -104,6 +107,7 @@ export function useEntityFetch<M extends Record<string, any>, UserType extends U
                 dataSource.fetchEntity<M>({
                     path,
                     entityId,
+                    databaseId,
                     collection
                 })
                     .then(onEntityUpdate)

package/src/hooks/useAuthController.tsx

@@ -11,4 +11,4 @@ import { AuthControllerContext } from "../contexts/AuthControllerContext";
  * @see AuthController
  * @group Hooks and utilities
  */
-export const useAuthController = <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>(): AuthControllerType => useContext(AuthControllerContext) as AuthControllerType;
+export const useAuthController = <USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>>(): AuthControllerType => useContext(AuthControllerContext) as AuthControllerType;

package/src/hooks/useBreadcrumbsController.tsx

@@ -0,0 +1,31 @@
+import { useContext } from "react";
+import { BreadcrumbContext } from "../contexts/BreacrumbsContext";
+
+/**
+ * @group Hooks and utilities
+ */
+export interface BreadcrumbsController {
+    breadcrumbs: BreadcrumbEntry[];
+    set: (props: {
+        breadcrumbs: BreadcrumbEntry[];
+    }) => void;
+}
+
+/**
+ * @group Hooks and utilities
+ */
+export interface BreadcrumbEntry {
+    title: string;
+    url: string;
+}
+
+/**
+ * Hook to retrieve the BreadcrumbsController.
+ *
+ * Consider that in order to use this hook you need to have a parent
+ * `FireCMS`
+ *
+ * @see BreadcrumbsController
+ * @group Hooks and utilities
+ */
+export const useBreadcrumbsController = (): BreadcrumbsController => useContext(BreadcrumbContext);

package/src/hooks/useBuildModeController.tsx

@@ -16,7 +16,7 @@ export function useBuildModeController(): ModeController {
     }, []);
 
     const prefersDarkModeStorage: boolean | null = 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<"light" | "dark">(prefersDarkMode ? "dark" : "light");
 
     useEffect(() => {
@@ -24,43 +24,30 @@ export function useBuildModeController(): ModeController {
         setDocumentMode(prefersDarkMode ? "dark" : "light");
     }, [prefersDarkMode]);
 
-    // color-scheme: dark;
-    const setDarkMode = useCallback(() => {
-        setMode("dark");
-        setDocumentMode("dark");
-    }, []);
-
-    const setLightMode = useCallback(() => {
-        setMode("light");
-        setDocumentMode("light");
-    }, []);
-
     const setDocumentMode = (mode: "light" | "dark") => {
         document.body.style.setProperty("color-scheme", mode);
         document.documentElement.dataset.theme = mode;
     };
 
-    const toggleMode = useCallback(() => {
-
-        const prefersDarkModeQueryResult = prefersDarkModeQuery();
+    const setModeInternal = useCallback((mode: "light" | "dark" | "system") => {
         if (mode === "light") {
-            if (!prefersDarkModeQueryResult)
-                localStorage.setItem("prefers-dark-mode", "true");
-            else
-                localStorage.removeItem("prefers-dark-mode");
-            setDarkMode();
+            setDocumentMode("light");
+            localStorage.setItem("prefers-dark-mode", "false");
+            setMode("light");
+        } else if (mode === "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
     };
 }