@firecms/core 3.0.0-beta.11 → 3.0.0-beta.13

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -3,13 +3,15 @@ import {
     FieldHelperText,
     FieldProps,
     getIconForProperty,
-    LabelWithIconAndTooltip, PropertyOrBuilder,
+    LabelWithIconAndTooltip,
+    PropertyOrBuilder,
     randomString,
     ResolvedArrayProperty,
     ResolvedStringProperty,
+    useAuthController,
     useStorageSource
 } from "../../index";
-import { cls, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
+import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
 import { FireCMSEditor, FireCMSEditorProps } from "@firecms/editor";
 import { resolveProperty, resolveStorageFilenameString, resolveStoragePathString } from "../../util";
 
@@ -27,11 +29,14 @@ export function MarkdownEditorFieldBinding({
                                                showError,
                                                error,
                                                minimalistView,
+                                               disabled: disabledProp,
                                                isSubmitting,
                                                context,
                                                customProps,
                                            }: FieldProps<string, MarkdownEditorFieldProps>) {
 
+    const authController = useAuthController();
+    const disabled = disabledProp || isSubmitting;
     const highlight = customProps?.highlight;
     const editorProps = customProps?.editorProps;
     const storageSource = useStorageSource();
@@ -54,14 +59,13 @@ export function MarkdownEditorFieldBinding({
         if (internalValue.current !== value) {
             internalValue.current = value;
             setFieldVersion(fieldVersion + 1);
-            // fieldVersion.current = fieldVersion.current + 1;
         }
     }, [value]);
 
-
     const resolvedProperty = resolveProperty({
         propertyOrBuilder: property as PropertyOrBuilder,
-        values: entityValues
+        values: entityValues,
+        authController
     }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
 
     const fileNameBuilder = useCallback(async (file: File) => {
@@ -88,7 +92,8 @@ export function MarkdownEditorFieldBinding({
         if (!storage) return "/";
         const resolvedProperty = resolveProperty({
             propertyOrBuilder: property,
-            values: entityValues
+            values: entityValues,
+            authController
         }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
         return resolveStoragePathString({
             input: storage.storagePath,
@@ -107,6 +112,7 @@ export function MarkdownEditorFieldBinding({
         onMarkdownContentChange={onContentChange}
         version={context.formex.version + fieldVersion}
         highlight={highlight}
+        disabled={disabled}
         handleImageUpload={async (file: File) => {
             const storagePath = storagePathBuilder(file);
             const fileName = await fileNameBuilder(file);
@@ -135,8 +141,9 @@ export function MarkdownEditorFieldBinding({
                 icon={getIconForProperty(property, "small")}
                 required={property.validation?.required}
                 title={property.name}
-                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
-            <div className={cls("rounded-md", fieldBackgroundMixin, fieldBackgroundHoverMixin)}>
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            <div
+                className={cls("rounded-md", fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin)}>
                 {editor}
             </div>
             <FieldHelperText includeDescription={includeDescription}

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -23,7 +23,7 @@ export function MultiSelectFieldBinding({
                                             disabled,
                                             property,
                                             includeDescription,
-                                            size = "medium",
+                                            size = "large",
                                             autoFocus
                                         }: FieldProps<EnumType[], any, any>) {
 
@@ -83,7 +83,7 @@ export function MultiSelectFieldBinding({
         <>
             <MultiSelect
                 className={"w-full mt-2"}
-                size={size === "medium" ? "medium" : "small"}
+                size={size}
                 value={validValue ? value.map((v) => v.toString()) : []}
                 disabled={disabled}
                 modalPopover={true}
@@ -92,7 +92,7 @@ export function MultiSelectFieldBinding({
                     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"}/>}
                 onValueChange={(updatedValue: string[]) => {
                     let newValue: EnumType[] | null;
                     if (of && (of as ResolvedProperty)?.dataType === "number") {

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -39,11 +39,11 @@ export function ReadOnlyFieldBinding({
                 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"}/>
             }
 
             <div
-                className={cls(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+                className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
 
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={propertyKey}

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -90,7 +90,7 @@ function ReferenceFieldBindingInternal({
                 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"}/>}
 
             {!collection && <ErrorView
                 error={"The specified collection does not exist. Check console"}/>}

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -6,6 +6,7 @@ import { getArrayResolvedProperties, getDefaultValueFor, getIconForProperty, mer
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useAuthController } from "../../hooks";
 
 /**
  * Generic array field that allows reordering and renders the child property
@@ -23,7 +24,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                              isSubmitting,
                                                              setValue,
                                                              setFieldValue,
-                                                             minimalistView,
+                                                             minimalistView: minimalistViewProp,
                                                              property,
                                                              includeDescription,
                                                              underlyingValueHasChanged,
@@ -31,6 +32,9 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                              disabled
                                                          }: FieldProps<T>) {
 
+    const authController = useAuthController();
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
     if (!property.of)
         throw Error("RepeatFieldBinding misconfiguration. Property `of` not set");
 
@@ -40,7 +44,8 @@ export function RepeatFieldBinding<T extends Array<any>>({
             propertyValue: value,
             propertyKey,
             property,
-            ignoreMissingFields: false
+            ignoreMissingFields: false,
+            authController
         })
     }
 
@@ -79,15 +84,19 @@ export function RepeatFieldBinding<T extends Array<any>>({
         </ErrorBoundary>;
     };
 
+    const canAddElements = !property.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === undefined);
+    const sortable = property.sortable === undefined ? true : property.sortable;
     const arrayContainer = <ArrayContainer droppableId={propertyKey}
                                            addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
                                            value={value}
                                            buildEntry={buildEntry}
                                            onInternalIdAdded={setLastAddedId}
                                            disabled={isSubmitting || Boolean(property.disabled)}
-                                           includeAddButton={!property.disabled}
+                                           canAddElements={canAddElements}
+                                           sortable={sortable}
                                            newDefaultEntry={getDefaultValueFor(property.of)}
                                            onValueChange={(value) => setFieldValue(propertyKey, value)}
+                                           className={property.widthPercentage !== undefined ? "mt-8" : undefined}
     />;
 
     const title = (<>
@@ -96,7 +105,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
             icon={getIconForProperty(property, "small")}
             required={property.validation?.required}
             title={property.name}
-            className={"flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+            className={"h-8 flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
         {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
     </>);
 

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -62,11 +62,11 @@ 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
+                    property.clearable && !disabled && <IconButton
                         onClick={handleClearClick}>
                         <CloseIcon/>
                     </IconButton>

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -13,7 +13,7 @@ import { PreviewSize } from "../../preview";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 
 import { getIconForProperty, isReadOnly, resolveProperty } from "../../util";
-import { useSnackbarController, useStorageSource } from "../../hooks";
+import { useAuthController, useSnackbarController, useStorageSource } from "../../hooks";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { StorageFieldItem, useStorageUploadController } from "../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../components/StorageUploadProgress";
@@ -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"
@@ -57,11 +57,13 @@ export function StorageUploadFieldBinding({
                                               isSubmitting,
                                           }: StorageUploadFieldProps) {
 
+    const authController = useAuthController();
+
     if (!context.entityId)
         throw new Error("StorageUploadFieldBinding: Entity id is null");
 
     const storageSource = useStorageSource(context.collection);
-    const disabled = isReadOnly(property) || !!property.disabled || isSubmitting;
+    const disabled = isReadOnly(property) || !!property.disabled || isSubmitting || context.disabled;
 
     const {
         internalValue,
@@ -91,6 +93,7 @@ export function StorageUploadFieldBinding({
 
     const resolvedProperty = resolveProperty({
         propertyOrBuilder: property as PropertyOrBuilder,
+        authController
     }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
 
     return (
@@ -103,7 +106,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 +209,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 +252,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 +289,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>

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -43,6 +43,7 @@ export const SwitchFieldBinding = function SwitchFieldBinding({
                     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}

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -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}

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/save.ts

@@ -1,12 +1,4 @@
-import {
-    DataSource,
-    Entity,
-    EntityCollection,
-    EntityValues,
-    FireCMSContext,
-    SaveEntityProps,
-    User
-} from "../../types";
+import { DataSource, Entity, EntityCollection, EntityValues, FireCMSContext, SaveEntityProps, User } from "../../types";
 import { useDataSource } from "./useDataSource";
 import { resolveCollection } from "../../util";
 
@@ -49,23 +41,23 @@ export type SaveEntityWithCallbacksProps<M extends Record<string, any>> =
  * @group Hooks and utilities
  */
 export async function saveEntityWithCallbacks<M extends Record<string, any>, USER extends User>({
-                                                                                                        collection,
-                                                                                                        path,
-                                                                                                        entityId,
-                                                                                                        values,
-                                                                                                        previousValues,
-                                                                                                        status,
-                                                                                                        dataSource,
-                                                                                                        context,
-                                                                                                        onSaveSuccess,
-                                                                                                        onSaveFailure,
-                                                                                                        onPreSaveHookError,
-                                                                                                        onSaveSuccessHookError
-                                                                                                    }: SaveEntityWithCallbacksProps<M> & {
-                                                                                                        collection: EntityCollection<M, USER>,
-                                                                                                        dataSource: DataSource,
-                                                                                                        context: FireCMSContext<USER>,
-                                                                                                    }
+                                                                                                    collection,
+                                                                                                    path,
+                                                                                                    entityId,
+                                                                                                    values,
+                                                                                                    previousValues,
+                                                                                                    status,
+                                                                                                    dataSource,
+                                                                                                    context,
+                                                                                                    onSaveSuccess,
+                                                                                                    onSaveFailure,
+                                                                                                    onPreSaveHookError,
+                                                                                                    onSaveSuccessHookError
+                                                                                                }: SaveEntityWithCallbacksProps<M> & {
+                                                                                                    collection: EntityCollection<M, USER>,
+                                                                                                    dataSource: DataSource,
+                                                                                                    context: FireCMSContext,
+                                                                                                }
 ): Promise<void> {
 
     if (status !== "new" && !entityId) {
@@ -75,7 +67,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) {
@@ -85,7 +77,8 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, USE
                 path,
                 values: previousValues as EntityValues<M>,
                 entityId,
-                propertyConfigs: customizationController.propertyConfigs
+                propertyConfigs: customizationController.propertyConfigs,
+                authController: context.authController
             });
             updatedValues = await callbacks.onPreSave({
                 collection: resolvedCollection,
@@ -127,7 +120,8 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, USE
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    propertyConfigs: customizationController.propertyConfigs
+                    propertyConfigs: customizationController.propertyConfigs,
+                    authController: context.authController
                 });
                 callbacks.onSaveSuccess({
                     collection: resolvedCollection,
@@ -156,7 +150,8 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, USE
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    propertyConfigs: customizationController.propertyConfigs
+                    propertyConfigs: customizationController.propertyConfigs,
+                    authController: context.authController
                 });
                 callbacks.onSaveFailure({
                     collection: resolvedCollection,

package/src/hooks/data/useCollectionFetch.tsx

@@ -73,7 +73,7 @@ export function useCollectionFetch<M extends Record<string, any>, USER extends U
     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;

package/src/hooks/data/useEntityFetch.tsx

@@ -10,6 +10,7 @@ import { useFireCMSContext } from "../useFireCMSContext";
 export interface EntityFetchProps<M extends Record<string, any>, USER extends User = User> {
     path: string;
     entityId?: string;
+    databaseId?: string;
     collection: EntityCollection<M, USER>;
     useCache?: boolean;
 }
@@ -40,13 +41,14 @@ export function useEntityFetch<M extends Record<string, any>, USER extends User>
         path: inputPath,
         entityId,
         collection,
+        databaseId,
         useCache = false
     }: 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<USER> = useFireCMSContext();
 
@@ -96,6 +98,7 @@ export function useEntityFetch<M extends Record<string, any>, USER extends User>
                 return dataSource.listenEntity<M>({
                     path,
                     entityId,
+                    databaseId,
                     collection,
                     onUpdate: onEntityUpdate,
                     onError
@@ -104,6 +107,7 @@ export function useEntityFetch<M extends Record<string, any>, USER extends User>
                 dataSource.fetchEntity<M>({
                     path,
                     entityId,
+                    databaseId,
                     collection
                 })
                     .then(onEntityUpdate)

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
     };
 }