@firecms/core 3.0.0-canary.27 → 3.0.0-canary.270

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -5,6 +5,7 @@ import { getIconForProperty } from "../../util";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { BooleanSwitchWithLabel } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components";
 
 type SwitchFieldProps = FieldProps<boolean>;
 
@@ -15,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,
-                                                                                   touched,
-                                                                                   property,
-                                                                                   includeDescription
-                                                                               }: SwitchFieldProps, ref) {
+export const SwitchFieldBinding = function SwitchFieldBinding({
+                                                                  propertyKey,
+                                                                  value,
+                                                                  setValue,
+                                                                  error,
+                                                                  showError,
+                                                                  autoFocus,
+                                                                  disabled,
+                                                                  size = "large",
+                                                                  property,
+                                                                  includeDescription
+                                                              }: SwitchFieldProps) {
 
     useClearRestoreValue({
         property,
@@ -37,17 +38,21 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
     return (
         <>
 
-            <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={"medium"}
-            />
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <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}
                              showError={showError}
@@ -57,4 +62,4 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
         </>
 
     );
-});
+};

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -1,11 +1,12 @@
 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";
 import { PropertyPreview } from "../../preview";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
 
 interface TextFieldBindingProps<T extends string | number> extends FieldProps<T> {
     allowInfinity?: boolean
@@ -18,7 +19,6 @@ interface TextFieldBindingProps<T extends string | number> extends FieldProps<T>
  * @group Form fields
  */
 export function TextFieldBinding<T extends string | number>({
-                                                                context,
                                                                 propertyKey,
                                                                 value,
                                                                 setValue,
@@ -28,6 +28,7 @@ export function TextFieldBinding<T extends string | number>({
                                                                 autoFocus,
                                                                 property,
                                                                 includeDescription,
+                                                                size = "large"
                                                             }: TextFieldBindingProps<T>) {
 
     let multiline: boolean | undefined;
@@ -67,27 +68,30 @@ export function TextFieldBinding<T extends string | number>({
     const isMultiline = Boolean(multiline);
 
     const inputType = property.dataType === "number" ? "number" : undefined;
-    return (
-        <>
-            <TextField
-                value={value}
-                onChange={onChange}
-                autoFocus={autoFocus}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}/>}
-                type={inputType}
-                multiline={isMultiline}
-                disabled={disabled}
-                endAdornment={
-                    property.clearable && <IconButton
-                        onClick={handleClearClick}>
-                        <ClearIcon/>
-                    </IconButton>
-                }
-                error={showError ? error : undefined}
-                inputClassName={error ? "text-red-500 dark:text-red-600" : ""}/>
-
+    return (<>
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <TextField
+                    size={size}
+                    value={value}
+                    onChange={onChange}
+                    autoFocus={autoFocus}
+                    className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                    label={<LabelWithIcon
+                        icon={getIconForProperty(property, "small")}
+                        required={property.validation?.required}
+                        title={property.name}/>}
+                    type={inputType}
+                    multiline={isMultiline}
+                    disabled={disabled}
+                    endAdornment={
+                        property.clearable && <IconButton
+                            onClick={handleClearClick}>
+                            <CloseIcon/>
+                        </IconButton>
+                    }
+                    error={showError ? error : undefined}
+                    inputClassName={error ? "text-red-500 dark:text-red-600" : ""}/>
+            </PropertyIdCopyTooltip>
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
                              error={error}
@@ -100,7 +104,7 @@ export function TextFieldBinding<T extends string | number>({
                 <PropertyPreview
                     value={value}
                     property={property}
-                    size={"medium"}/>
+                    size={size}/>
             </Collapse>}
 
         </>

package/src/form/index.tsx

@@ -1,43 +1,23 @@
-import { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
-import { MultiSelectBinding } from "./field_bindings/MultiSelectBinding";
-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 { MarkdownFieldBinding } from "./field_bindings/MarkdownFieldBinding";
-import { ArrayCustomShapedFieldBinding } from "./field_bindings/ArrayCustomShapedFieldBinding";
+export * from "./EntityForm";
 
-export {
-    ArrayCustomShapedFieldBinding,
-    RepeatFieldBinding,
-    MultiSelectBinding,
-    ArrayOfReferencesFieldBinding,
-    BlockFieldBinding,
-    DateTimeFieldBinding,
-    ReadOnlyFieldBinding,
-    MapFieldBinding,
-    KeyValueFieldBinding,
-    ReferenceFieldBinding,
-    SelectFieldBinding,
-    StorageUploadFieldBinding,
-    SwitchFieldBinding,
-    MarkdownFieldBinding,
-    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 { ReferenceAsStringFieldBinding } from "./field_bindings/ReferenceAsStringFieldBinding";
+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";
 
-export type { EntityFormProps } from "./EntityForm";
-export {
-    EntityForm
-} from "./EntityForm";
-
 export { PropertyFieldBinding } from "./PropertyFieldBinding";
 export * from "./useClearRestoreValue";

package/src/form/useClearRestoreValue.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { CMSType, ResolvedProperty } from "../types";
+import { CMSType, Property, ResolvedProperty } from "../types";
 
 /**
  * Hook we use to restore a value after it has been cleared
@@ -14,7 +14,7 @@ export function useClearRestoreValue<T extends CMSType>({
                                                             setValue
                                                         }:
                                                             {
-                                                                property: ResolvedProperty<T>,
+                                                                property: Property<T> | ResolvedProperty<T>,
                                                                 value: T,
                                                                 setValue: (value: T | null, shouldValidate?: boolean) => void
                                                             }) {

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)
@@ -112,23 +112,7 @@ export function getYupMapObjectSchema({
     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({
@@ -175,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> {
 
@@ -81,7 +81,8 @@ export async function deleteEntityWithCallbacks<M extends Record<string, any>, U
         }
     }
     return dataSource.deleteEntity({
-        entity
+        entity,
+        collection
     }).then(() => {
         onDeleteSuccess && onDeleteSuccess(entity);
         try {

package/src/hooks/data/save.ts

@@ -1,13 +1,4 @@
-import {
-    DataSource,
-    Entity,
-    EntityCallbacks,
-    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";
 
@@ -17,7 +8,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,
@@ -50,24 +40,24 @@ 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>({
-                                                                                                        collection,
-                                                                                                        path,
-                                                                                                        entityId,
-                                                                                                        values,
-                                                                                                        previousValues,
-                                                                                                        status,
-                                                                                                        dataSource,
-                                                                                                        context,
-                                                                                                        onSaveSuccess,
-                                                                                                        onSaveFailure,
-                                                                                                        onPreSaveHookError,
-                                                                                                        onSaveSuccessHookError
-                                                                                                    }: SaveEntityWithCallbacksProps<M> & {
-                                                                                                        collection: EntityCollection<M, UserType>,
-                                                                                                        dataSource: DataSource,
-                                                                                                        context: FireCMSContext<UserType>,
-                                                                                                    }
+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,
+                                                                                                }
 ): Promise<void> {
 
     if (status !== "new" && !entityId) {
@@ -77,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) {
@@ -87,7 +77,8 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                 path,
                 values: previousValues as EntityValues<M>,
                 entityId,
-                fields: customizationController.propertyConfigs
+                propertyConfigs: customizationController.propertyConfigs,
+                authController: context.authController
             });
             updatedValues = await callbacks.onPreSave({
                 collection: resolvedCollection,
@@ -124,7 +115,8 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    fields: customizationController.propertyConfigs
+                    propertyConfigs: customizationController.propertyConfigs,
+                    authController: context.authController
                 });
                 callbacks.onSaveSuccess({
                     collection: resolvedCollection,
@@ -152,7 +144,8 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    fields: customizationController.propertyConfigs
+                    propertyConfigs: customizationController.propertyConfigs,
+                    authController: context.authController
                 });
                 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/useDataSource.tsx

@@ -1,4 +1,4 @@
-import { useContext, useMemo } from "react";
+import { useContext } from "react";
 import { DataSource, EntityCollection } from "../../types";
 import { DataSourceContext } from "../../contexts/DataSourceContext";
 
@@ -7,8 +7,16 @@ import { DataSourceContext } from "../../contexts/DataSourceContext";
  * @group Hooks and utilities
  */
 export const useDataSource = (collection?: EntityCollection<any, any>): DataSource => {
+    // const customizationController = useCustomizationController();
+    // const navigationController = useNavigationController();
     const defaultDataSource = useContext(DataSourceContext);
-    if (collection?.overrides?.dataSource)
-        return collection?.overrides.dataSource;
+    // if (collection?.overrides?.dataSourceDelegate) {
+    //     console.trace("Using custom data source for collection " + collection.id);
+    //     return useBuildDataSource({
+    //         delegate: collection.overrides.dataSourceDelegate,
+    //         propertyConfigs: customizationController?.propertyConfigs,
+    //         navigationController: navigationController
+    //     });
+    // }
     return defaultDataSource;
 };

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/index.tsx

@@ -10,6 +10,7 @@ export * from "./useResolvedNavigationFrom";
 
 export * from "./useStorageSource";
 export * from "./useAuthController";
+export * from "./useDialogsController";
 export * from "./useSideDialogsController";
 export * from "./useSideEntityController";
 export * from "./useFireCMSContext";
@@ -17,6 +18,7 @@ export * from "./useSnackbarController";
 export * from "./useModeController";
 export * from "./useClipboard";
 export * from "./useLargeLayout";
+export * from "./useCollapsedGroups";
 
 export * from "./useReferenceDialog";
 export * from "./useBrowserTitleAndIcon";

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/useBrowserTitleAndIcon.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 
-const fireCMSLogo = "data:image/png;base64,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\n";
+const fireCMSLogo = "data:image/png;base64,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";
 
 /**
  * Internal hook to handle the browser title and icon