@firecms/core 3.0.0-canary.1 → 3.0.0-canary.100

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import { CMSType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText, FormikArrayContainer } from "../components";
-import { ErrorBoundary, LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
-import { getIconForProperty } from "../../util";
+import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { ErrorBoundary } from "../../components";
+import { getDefaultValueFor, getIconForProperty } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { ExpandablePanel } from "@firecms/ui";
+import { ExpandablePanel, Typography } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * Generic array field that allows reordering and renders the child property
@@ -63,7 +63,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
             autoFocus: internalId === lastAddedId
         };
         return <ErrorBoundary>
-            <PropertyFieldBinding {...fieldProps}/>
+            <PropertyFieldBinding {...fieldProps} index={index}/>
         </ErrorBoundary>;
     };
 
@@ -75,12 +75,15 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                  onInternalIdAdded={setLastAddedId}
                                                  disabled={isSubmitting || Boolean(property.disabled)}
                                                  includeAddButton={!property.disabled}
-                                                 newDefaultEntry={property.of.defaultValue}/>;
+                                                 newDefaultEntry={getDefaultValueFor(property.of)}/>;
 
-    const title = (<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                  required={property.validation?.required}
-                                  title={property.name}
-                                  className={"text-text-secondary dark:text-text-secondary-dark"}/>);
+    const title = (<>
+        <LabelWithIcon icon={getIconForProperty(property, "small")}
+                       required={property.validation?.required}
+                       title={property.name}
+                       className={"flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
+    </>);
 
     return (
 

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback } from "react";
 
 import { EnumType, FieldProps } from "../../types";
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { getIconForProperty } from "../../util";
-import { ClearIcon, cn, IconButton, Select, SelectItem } from "@firecms/ui";
+import { ClearIcon, cls, IconButton, Select, SelectItem } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type SelectProps<T extends EnumType> = FieldProps<T>;
 
@@ -49,10 +48,10 @@ export function SelectFieldBinding<T extends EnumType>({
         <>
 
             <Select
-                value={value ? value.toString() : ""}
+                value={value !== undefined && value != null ? value.toString() : ""}
                 disabled={disabled}
                 position="item-aligned"
-                inputClassName={cn("w-full")}
+                inputClassName={cls("w-full")}
                 label={<LabelWithIcon icon={getIconForProperty(property, "small")}
                                       required={property.validation?.required}
                                       title={property.name}

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -1,36 +1,29 @@
 import React, { useCallback } from "react";
 
-import {
-    ArrayProperty,
-    Entity,
-    FieldProps,
-    ResolvedArrayProperty,
-    ResolvedStringProperty,
-    StorageConfig
-} from "../../types";
+import { ArrayProperty, FieldProps, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig } from "../../types";
 import { useDropzone } from "react-dropzone";
 import { PreviewSize } from "../../preview";
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
 
 import { getIconForProperty, isReadOnly } from "../../util";
-import { useClearRestoreValue, useSnackbarController, useStorageSource } from "../../hooks";
+import { useSnackbarController, useStorageSource } from "../../hooks";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { StorageFieldItem, useStorageUploadController } from "../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../components/StorageUploadProgress";
 import { StorageItemPreview } from "../components/StorageItemPreview";
 import {
-    cn,
+    cls,
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundMixin,
     focusedMixin,
     Typography
 } from "@firecms/ui";
+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 nonActiveDropClasses = "hover:bg-field-hover dark:hover:bg-field-hover-dark"
+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"
 const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-red-500"
@@ -55,13 +48,13 @@ export function StorageUploadFieldBinding({
                                               property,
                                               includeDescription,
                                               context,
-                                              isSubmitting
+                                              isSubmitting,
                                           }: StorageUploadFieldProps) {
 
     if (!context.entityId)
         throw new Error("StorageUploadFieldBinding: Entity id is null");
 
-    const storageSource = useStorageSource();
+    const storageSource = useStorageSource(context.collection);
     const disabled = isReadOnly(property) || !!property.disabled || isSubmitting;
 
     const {
@@ -80,7 +73,7 @@ export function StorageUploadFieldBinding({
         propertyKey,
         value,
         storageSource,
-        disabled,
+        disabled: disabled ?? false,
         onChange: setValue
     });
 
@@ -90,12 +83,6 @@ export function StorageUploadFieldBinding({
         setValue
     });
 
-    const entity: Entity<any> = {
-        id: context.entityId,
-        values: context.values,
-        path: context.path
-    };
-
     return (
 
         <>
@@ -109,13 +96,12 @@ export function StorageUploadFieldBinding({
             <StorageUpload
                 value={internalValue}
                 name={propertyKey}
-                disabled={disabled}
-                autoFocus={autoFocus}
+                disabled={disabled ?? false}
+                autoFocus={autoFocus ?? false}
                 property={property}
                 onChange={setValue}
                 setInternalValue={setInternalValue}
                 onFilesAdded={onFilesAdded}
-                entity={entity}
                 onFileUploadComplete={onFileUploadComplete}
                 storagePathBuilder={storagePathBuilder}
                 storage={storage}
@@ -141,7 +127,6 @@ function FileDropComponent({
                                autoFocus,
                                internalValue,
                                property,
-                               entity,
                                onClear,
                                metadata,
                                storagePathBuilder,
@@ -161,7 +146,6 @@ function FileDropComponent({
     property: ResolvedStringProperty,
     onClear: (clearedStoragePathOrDownloadUrl: string) => void,
     metadata: any,
-    entity: Entity<any>;
     storagePathBuilder: (file: File) => string,
     onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>,
     size: PreviewSize,
@@ -186,10 +170,18 @@ function FileDropComponent({
             onDropRejected: (fileRejections, event) => {
                 for (const fileRejection of fileRejections) {
                     for (const error of fileRejection.errors) {
-                        snackbarContext.open({
-                            type: "error",
-                            message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
-                        });
+                        console.log("Error uploading file: ", error);
+                        if (error.code === "file-too-large") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
+                            });
+                        } else if (error.code === "file-invalid-type") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: "Error uploading file: File type is not supported"
+                            });
+                        }
                     }
                 }
             }
@@ -199,7 +191,7 @@ function FileDropComponent({
     return (
         <div
             {...getRootProps()}
-            className={cn(
+            className={cls(
                 fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 dropZoneClasses,
@@ -216,7 +208,7 @@ function FileDropComponent({
             <div
                 {...droppableProvided.droppableProps}
                 ref={droppableProvided.innerRef}
-                className={cn("flex items-center p-1 no-scrollbar",
+                className={cls("flex items-center p-1 no-scrollbar",
                     multipleFilesSupported && internalValue.length ? "overflow-auto" : "",
                     multipleFilesSupported && internalValue.length ? "min-h-[180px]" : "min-h-[250px]"
                 )}
@@ -234,7 +226,6 @@ function FileDropComponent({
                                 name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
                                 property={property}
                                 disabled={disabled}
-                                entity={entity}
                                 value={entry.storagePathOrDownloadUrl}
                                 onRemove={onClear}
                                 size={entry.size}/>
@@ -263,7 +254,7 @@ function FileDropComponent({
                                     ref={provided.innerRef}
                                     {...provided.draggableProps}
                                     {...provided.dragHandleProps}
-                                    className={cn(focusedMixin, "rounded-md")}
+                                    className={cls(focusedMixin, "rounded-md")}
                                     style={{
                                         ...provided.draggableProps.style
                                     }}
@@ -301,7 +292,6 @@ export interface StorageUploadProps {
     multipleFilesSupported: boolean;
     autoFocus: boolean;
     disabled: boolean;
-    entity: Entity<any>;
     storage: StorageConfig;
     onFilesAdded: (acceptedFiles: File[]) => void;
     storagePathBuilder: (file: File) => string;
@@ -320,8 +310,7 @@ export function StorageUpload({
                                   onFilesAdded,
                                   autoFocus,
                                   storage,
-                                  entity,
-                                  storagePathBuilder
+                                  storagePathBuilder,
                               }: StorageUploadProps) {
 
     if (multipleFilesSupported) {
@@ -402,9 +391,9 @@ export function StorageUpload({
                         >
                             <StorageItemPreview
                                 name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
+                                placeholder={true}
                                 property={renderProperty}
                                 disabled={true}
-                                entity={entity}
                                 value={entry.storagePathOrDownloadUrl as string}
                                 onRemove={onClear}
                                 size={entry.size}/>
@@ -422,7 +411,6 @@ export function StorageUpload({
                                               autoFocus={autoFocus}
                                               internalValue={value}
                                               property={renderProperty}
-                                              entity={entity}
                                               onClear={onClear}
                                               metadata={metadata}
                                               storagePathBuilder={storagePathBuilder}

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 
 import { FieldProps } from "../../types";
-import { useClearRestoreValue } from "../../hooks";
 import { getIconForProperty } from "../../util";
-import { FieldHelperText } from "../components/FieldHelperText";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { BooleanSwitchWithLabel } from "@firecms/ui";
-import { LabelWithIcon } from "../../components";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type SwitchFieldProps = FieldProps<boolean>;
 
@@ -47,7 +46,7 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
                                       title={property.name}/>}
                 disabled={disabled}
                 autoFocus={autoFocus}
-                size={"medium"}
+                size={"large"}
             />
 
             <FieldHelperText includeDescription={includeDescription}

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -1,14 +1,13 @@
 import React, { useCallback } from "react";
 
+import { ClearIcon, Collapse, IconButton, TextField } from "@firecms/ui";
 import { FieldProps, PreviewType } from "../../types";
-import { FieldHelperText } from "../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { getIconForProperty } from "../../util";
-import { ClearIcon, Collapse, IconButton, TextField } from "@firecms/ui";
 import { PropertyPreview } from "../../preview";
-import { LabelWithIcon } from "../../components";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
-interface TextFieldProps<T extends string | number> extends FieldProps<T> {
+interface TextFieldBindingProps<T extends string | number> extends FieldProps<T> {
     allowInfinity?: boolean
 }
 
@@ -19,6 +18,7 @@ interface TextFieldProps<T extends string | number> extends FieldProps<T> {
  * @group Form fields
  */
 export function TextFieldBinding<T extends string | number>({
+                                                                context,
                                                                 propertyKey,
                                                                 value,
                                                                 setValue,
@@ -28,7 +28,7 @@ export function TextFieldBinding<T extends string | number>({
                                                                 autoFocus,
                                                                 property,
                                                                 includeDescription,
-                                                            }: TextFieldProps<T>) {
+                                                            }: TextFieldBindingProps<T>) {
 
     let multiline: boolean | undefined;
     let url: boolean | PreviewType | undefined;
@@ -97,9 +97,10 @@ export function TextFieldBinding<T extends string | number>({
             {url && <Collapse
                 className="mt-1 ml-1"
                 in={Boolean(value)}>
-                <PropertyPreview value={value}
-                                 property={property}
-                                 size={"medium"}/>
+                <PropertyPreview
+                    value={value}
+                    property={property}
+                    size={"medium"}/>
             </Collapse>}
 
         </>

package/src/form/index.tsx

@@ -34,9 +34,10 @@ export {
 
 export * from "./components";
 
-export type { EntityFormProps } from "./EntityForm";
-export {
-    EntityForm
-} from "./EntityForm";
+// export type { EntityFormProps } from "./EntityForm";
+// export {
+//     EntityForm
+// } from "./EntityForm";
 
 export { PropertyFieldBinding } from "./PropertyFieldBinding";
+export * from "./useClearRestoreValue";

package/src/form/validation.ts

@@ -9,8 +9,7 @@ import {
 } from "../types";
 import * as yup from "yup";
 import { AnySchema, ArraySchema, BooleanSchema, DateSchema, NumberSchema, ObjectSchema, StringSchema } from "yup";
-import { enumToObjectEntries } from "../util/enums";
-import { getValueInPath, hydrateRegExp, isPropertyBuilder } from "../util";
+import { enumToObjectEntries, getValueInPath, hydrateRegExp, isPropertyBuilder } from "../util";
 
 // Add custom unique function for array values
 declare module "yup" {
@@ -90,12 +89,12 @@ export function mapPropertyToYup<T extends CMSType>(propertyContext: PropertyCon
     throw Error("Unsupported data type in yup mapping");
 }
 
-export function getYupMapObjectSchema<M extends Record<string, any>>({
+export function getYupMapObjectSchema({
                                                                          property,
                                                                          entityId,
                                                                          customFieldValidator,
                                                                          name
-                                                                     }: PropertyContext<M>): ObjectSchema<any> {
+                                                                     }: PropertyContext<Record<string, any>>): ObjectSchema<any> {
     const objectSchema: any = {};
     const validation = property.validation;
     if (property.properties)
@@ -113,23 +112,7 @@ export function getYupMapObjectSchema<M extends Record<string, any>>({
     if (validation?.required) {
         return shape.required(validation?.requiredMessage ? validation.requiredMessage : "Required").nullable(true);
     }
-    return shape.nullable(true);
-    // const object: ObjectSchema<any> = yup.object().shape(objectSchema);
-    // return validation?.required
-    //     ? object.required(validation?.requiredMessage ? validation.requiredMessage : "Required").nullable(true)
-    //     : yup.object().optional().default(undefined).notRequired().nullable(true).test(
-    //         "empty-check",
-    //         "Optional map can be empty",
-    //         (o: any, testContext: any) => {
-    //             try {
-    //                 if (!o || Object.keys(o).length === 0) return true;
-    //                 return object.validateSync(o);
-    //             } catch (e) {
-    //                 testContext.createError(e);
-    //                 console.error(e);
-    //                 return false;
-    //             }
-    //         });
+    return yup.object().shape(shape.fields).default(undefined).notRequired().nullable(true);
 }
 
 function getYupStringSchema({

package/src/hooks/data/delete.ts

@@ -12,10 +12,10 @@ import {
 /**
  * @group Hooks and utilities
  */
-export type DeleteEntityWithCallbacksProps<M extends Record<string, any>> =
+export type DeleteEntityWithCallbacksProps<M extends Record<string, any>, UserType extends User = User> =
     DeleteEntityProps<M>
     & {
-    callbacks?: EntityCallbacks<M>;
+    callbacks?: EntityCallbacks<M, UserType>;
     onDeleteSuccess?: (entity: Entity<M>) => void;
     onDeleteFailure?: (entity: Entity<M>, e: Error) => void;
     onPreDeleteHookError?: (entity: Entity<M>, e: Error) => void;
@@ -62,7 +62,7 @@ export async function deleteEntityWithCallbacks<M extends Record<string, any>, U
 
     console.debug("Deleting entity", entity.path, entity.id);
 
-    const entityDeleteProps: EntityOnDeleteProps<M, UserType> = {
+    const entityDeleteProps: EntityOnDeleteProps<M, any> = {
         entity,
         collection,
         entityId: entity.id,

package/src/hooks/data/save.ts

@@ -17,7 +17,6 @@ import { resolveCollection } from "../../util";
 export type SaveEntityWithCallbacksProps<M extends Record<string, any>> =
     SaveEntityProps<M> &
     {
-        callbacks?: EntityCallbacks<M>;
         onSaveSuccess?: (updatedEntity: Entity<M>) => void,
         onSaveFailure?: (e: Error) => void,
         onPreSaveHookError?: (e: Error) => void,
@@ -64,7 +63,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                                                                                                         onPreSaveHookError,
                                                                                                         onSaveSuccessHookError
                                                                                                     }: SaveEntityWithCallbacksProps<M> & {
-                                                                                                        collection: EntityCollection<M>,
+                                                                                                        collection: EntityCollection<M, UserType>,
                                                                                                         dataSource: DataSource,
                                                                                                         context: FireCMSContext<UserType>,
                                                                                                     }
@@ -109,6 +108,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
         updatedValues = values;
     }
 
+    console.log("Saving entity", entityId, updatedValues);
     return dataSource.saveEntity({
         collection,
         path: resolvedPath,
@@ -117,6 +117,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
         previousValues,
         status
     }).then((entity) => {
+        console.log("Entity saved");
         try {
             if (callbacks?.onSaveSuccess) {
                 const resolvedCollection = resolveCollection<M>({
@@ -145,6 +146,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
             onSaveSuccess(entity);
     })
         .catch((e) => {
+            console.error("!!!", e);
             if (callbacks?.onSaveFailure) {
 
                 const resolvedCollection = resolveCollection<M>({

package/src/hooks/data/useCollectionFetch.tsx

@@ -70,7 +70,7 @@ export function useCollectionFetch<M extends Record<string, any>, UserType exten
         searchString
     }: CollectionFetchProps<M>): CollectionFetchResult<M> {
 
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
     const navigationController = useNavigationController();
 
     const path = navigationController.resolveAliasesFrom(inputPath);

package/src/hooks/data/useDataSource.tsx

@@ -1,9 +1,14 @@
 import { useContext } from "react";
-import { DataSource } from "../../types";
+import { DataSource, EntityCollection } from "../../types";
 import { DataSourceContext } from "../../contexts/DataSourceContext";
 
 /**
  * Use this hook to get the datasource being used
  * @group Hooks and utilities
  */
-export const useDataSource = (): DataSource => useContext(DataSourceContext);
+export const useDataSource = (collection?: EntityCollection<any, any>): DataSource => {
+    const defaultDataSource = useContext(DataSourceContext);
+    if (collection?.overrides?.dataSource)
+        return collection?.overrides.dataSource;
+    return defaultDataSource;
+};

package/src/hooks/data/useEntityFetch.tsx

@@ -7,10 +7,10 @@ import { useFireCMSContext } from "../useFireCMSContext";
 /**
  * @group Hooks and utilities
  */
-export interface EntityFetchProps<M extends Record<string, any>> {
+export interface EntityFetchProps<M extends Record<string, any>, UserType extends User = User> {
     path: string;
     entityId?: string;
-    collection: EntityCollection<M>;
+    collection: EntityCollection<M, UserType>;
     useCache?: boolean;
 }
 
@@ -41,9 +41,9 @@ export function useEntityFetch<M extends Record<string, any>, UserType extends U
         entityId,
         collection,
         useCache = false
-    }: EntityFetchProps<M>): EntityFetchResult<M> {
+    }: EntityFetchProps<M, UserType>): EntityFetchResult<M> {
 
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
     const navigationController = useNavigationController();
 
     const path = navigationController.resolveAliasesFrom(inputPath);

package/src/hooks/index.tsx

@@ -4,13 +4,13 @@ export * from "./data/useEntityFetch";
 export * from "./data/save";
 export * from "./data/delete";
 
-export * from "../form/useClearRestoreValue";
 export * from "./useNavigationController";
 
 export * from "./useResolvedNavigationFrom";
 
 export * from "./useStorageSource";
 export * from "./useAuthController";
+export * from "./useDialogsController";
 export * from "./useSideDialogsController";
 export * from "./useSideEntityController";
 export * from "./useFireCMSContext";
@@ -23,3 +23,8 @@ export * from "./useReferenceDialog";
 export * from "./useBrowserTitleAndIcon";
 export * from "./useCustomizationController";
 export * from "./useBuildNavigationController";
+
+export * from "./useBuildLocalConfigurationPersistence";
+export * from "./useBuildModeController";
+
+export * from "./useValidateAuthenticator";

package/src/{core → hooks}/useBuildLocalConfigurationPersistence.tsx

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { PartialEntityCollection, UserConfigurationPersistence } from "../types";
 import { mergeDeep, stripCollectionPath } from "../util";
 
 export function useBuildLocalConfigurationPersistence(): UserConfigurationPersistence {
 
-    const [configCache, setConfigCache] = useState<Record<string, PartialEntityCollection>>({});
+    const configCache = useRef<Record<string, PartialEntityCollection>>({});
 
     const getCollectionFromStorage = useCallback((storageKey: string) => {
         const item = localStorage.getItem(storageKey);
@@ -13,20 +13,18 @@ export function useBuildLocalConfigurationPersistence(): UserConfigurationPersis
 
     const getCollectionConfig = useCallback(<M extends Record<string, any>>(path: string): PartialEntityCollection<M> => {
         const storageKey = `collection_config::${stripCollectionPath(path)}`;
-        if (configCache[storageKey]) {
-            return configCache[storageKey] as PartialEntityCollection<M>;
+        if (configCache.current[storageKey]) {
+            return configCache.current[storageKey] as PartialEntityCollection<M>;
         }
         return getCollectionFromStorage(storageKey);
-    }, [configCache, getCollectionFromStorage]);
+    }, [getCollectionFromStorage]);
 
     const onCollectionModified = useCallback(<M extends Record<string, any>>(path: string, data: PartialEntityCollection<M>) => {
         const storageKey = `collection_config::${stripCollectionPath(path)}`;
         localStorage.setItem(storageKey, JSON.stringify(data));
-        setConfigCache((currentCache) => {
-            const cachedConfig = currentCache[storageKey];
-            const newConfig = mergeDeep(cachedConfig ?? getCollectionFromStorage(path), data);
-            return (mergeDeep(currentCache, newConfig));
-        });
+        const cachedConfig = configCache.current[storageKey];
+        const newConfig = mergeDeep(cachedConfig ?? getCollectionFromStorage(path), data);
+        configCache.current[storageKey] = mergeDeep(configCache.current[storageKey], newConfig);
     }, [getCollectionFromStorage]);
 
     const [recentlyVisitedPaths, _setRecentlyVisitedPaths] = useState<string[]>([]);

package/src/{core → hooks}/useBuildModeController.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 
-import { ModeController } from "../hooks";
+import { ModeController } from "./index";
 
 /**
  * Use this hook to build a color mode controller that determines
@@ -8,8 +8,13 @@ import { ModeController } from "../hooks";
  */
 export function useBuildModeController(): ModeController {
 
-    const prefersDarkModeQuery = typeof window !== "undefined" &&
-        window.matchMedia("(prefers-color-scheme: dark)");
+    const prefersDarkModeQuery = useCallback((): boolean => {
+        if (typeof window === "undefined")
+            return false;
+        const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+        return mediaQueryList.matches;
+    }, []);
+
     const prefersDarkModeStorage: boolean | null = localStorage.getItem("prefers-dark-mode") != null ? localStorage.getItem("prefers-dark-mode") === "true" : null;
     const prefersDarkMode = prefersDarkModeStorage ?? prefersDarkModeQuery;
     const [mode, setMode] = useState<"light" | "dark">(prefersDarkMode ? "dark" : "light");
@@ -23,7 +28,7 @@ export function useBuildModeController(): ModeController {
     const setDarkMode = useCallback(() => {
         setMode("dark");
         setDocumentMode("dark");
-    }, [prefersDarkModeQuery]);
+    }, []);
 
     const setLightMode = useCallback(() => {
         setMode("light");
@@ -37,14 +42,15 @@ export function useBuildModeController(): ModeController {
 
     const toggleMode = useCallback(() => {
 
+        const prefersDarkModeQueryResult = prefersDarkModeQuery();
         if (mode === "light") {
-            if (!prefersDarkModeQuery)
+            if (!prefersDarkModeQueryResult)
                 localStorage.setItem("prefers-dark-mode", "true");
             else
                 localStorage.removeItem("prefers-dark-mode");
             setDarkMode();
         } else {
-            if (prefersDarkModeQuery)
+            if (prefersDarkModeQueryResult)
                 localStorage.setItem("prefers-dark-mode", "false");
             else
                 localStorage.removeItem("prefers-dark-mode");