@firecms/core 3.0.0-alpha.8 → 3.0.0-alpha.81

package/src/internal/useBuildNavigationController.tsx

@@ -0,0 +1,371 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
+
+import {
+    AuthController,
+    CMSView,
+    CMSViewsBuilder,
+    DataSourceDelegate,
+    EntityCollection,
+    EntityCollectionsBuilder,
+    EntityReference,
+    FireCMSPlugin,
+    NavigationController,
+    TopNavigationEntry,
+    TopNavigationResult,
+    User,
+    UserConfigurationPersistence
+} from "../types";
+import {
+    getCollectionByPathOrId,
+    mergeDeep,
+    removeInitialAndTrailingSlashes,
+    resolveCollectionPathIds,
+    resolvePermissions
+} from "../util";
+import { getParentReferencesFromPath } from "../util/parent_references_from_path";
+
+const DEFAULT_BASE_PATH = "/";
+const DEFAULT_COLLECTION_PATH = "/c";
+
+type BuildNavigationContextProps<EC extends EntityCollection, UserType extends User> = {
+    basePath?: string,
+    baseCollectionPath?: string,
+    authController: AuthController<UserType>;
+    collections?: EC[] | EntityCollectionsBuilder<EC>;
+    views?: CMSView[] | CMSViewsBuilder;
+    userConfigPersistence?: UserConfigurationPersistence;
+    plugins?: FireCMSPlugin[];
+    dataSource: DataSourceDelegate;
+};
+
+export function useBuildNavigationController<EC extends EntityCollection, UserType extends User>({
+                                                                                                     basePath = DEFAULT_BASE_PATH,
+                                                                                                     baseCollectionPath = DEFAULT_COLLECTION_PATH,
+                                                                                                     authController,
+                                                                                                     collections: baseCollections,
+                                                                                                     views: baseViews,
+                                                                                                     userConfigPersistence,
+                                                                                                     plugins,
+                                                                                                     dataSource
+                                                                                                 }: BuildNavigationContextProps<EC, UserType>): NavigationController {
+
+    const location = useLocation();
+
+    const [collections, setCollections] = useState<EntityCollection[] | undefined>();
+    const [views, setViews] = useState<CMSView[] | undefined>();
+    const [initialised, setInitialised] = useState<boolean>(false);
+
+    const [topLevelNavigation, setTopLevelNavigation] = useState<TopNavigationResult | undefined>(undefined);
+    const [navigationLoading, setNavigationLoading] = useState<boolean>(true);
+    const [navigationLoadingError, setNavigationLoadingError] = useState<Error | undefined>(undefined);
+
+    const cleanBasePath = removeInitialAndTrailingSlashes(basePath);
+    const cleanBaseCollectionPath = removeInitialAndTrailingSlashes(baseCollectionPath);
+
+    const homeUrl = cleanBasePath ? `/${cleanBasePath}` : "/";
+
+    const fullCollectionPath = cleanBasePath ? `/${cleanBasePath}/${cleanBaseCollectionPath}` : `/${cleanBaseCollectionPath}`;
+
+    const buildCMSUrlPath = useCallback((path: string): string => cleanBasePath ? `/${cleanBasePath}/${encodePath(path)}` : `/${encodePath(path)}`,
+        [cleanBasePath]);
+
+    const buildUrlCollectionPath = useCallback((path: string): string => `${removeInitialAndTrailingSlashes(baseCollectionPath)}/${encodePath(path)}`,
+        [baseCollectionPath]);
+
+    const computeTopNavigation = useCallback((collections: EntityCollection[], views: CMSView[]): TopNavigationResult => {
+        // return (collection.editable && resolvePermissions(collection, authController, paths).editCollection) ?? DEFAULT_PERMISSIONS.editCollection;
+        const navigationEntries: TopNavigationEntry[] = [
+            ...(collections ?? []).map(collection => (!collection.hideFromNavigation
+                ? {
+                    url: buildUrlCollectionPath(collection.id ?? collection.path),
+                    type: "collection",
+                    name: collection.name.trim(),
+                    path: collection.id ?? collection.path,
+                    collection,
+                    description: collection.description?.trim(),
+                    group: collection.group?.trim()
+                }
+                : undefined))
+                .filter(Boolean) as TopNavigationEntry[],
+            ...(views ?? []).map(view =>
+                !view.hideFromNavigation
+                    ? ({
+                        url: buildCMSUrlPath(Array.isArray(view.path) ? view.path[0] : view.path),
+                        name: view.name.trim(),
+                        type: "view",
+                        view,
+                        description: view.description?.trim(),
+                        group: view.group?.trim()
+                    })
+                    : undefined)
+                .filter(Boolean) as TopNavigationEntry[]
+        ];
+
+        const groups: string[] = Object.values(navigationEntries)
+            .map(e => e.group)
+            .filter(Boolean)
+            .filter((value, index, array) => array.indexOf(value) === index) as string[];
+        return {
+            navigationEntries,
+            groups
+        };
+    }, [buildCMSUrlPath, buildUrlCollectionPath]);
+
+    const refreshNavigation = useCallback(async () => {
+
+        if (authController.initialLoading)
+            return;
+
+        try {
+            const [resolvedCollections = [], resolvedViews = []] = await Promise.all([
+                    resolveCollections(baseCollections, authController, dataSource, plugins),
+                    resolveCMSViews(baseViews, authController, dataSource)
+                ]
+            );
+
+            setCollections(resolvedCollections);
+            setViews(resolvedViews);
+            setTopLevelNavigation(computeTopNavigation(resolvedCollections ?? [], resolvedViews));
+        } catch (e) {
+            console.error(e);
+            setNavigationLoadingError(e as any);
+        }
+
+        setNavigationLoading(false);
+        setInitialised(true);
+    }, [baseCollections, authController.user, authController.initialLoading, plugins, baseViews, computeTopNavigation]);
+
+    useEffect(() => {
+        refreshNavigation();
+    }, [refreshNavigation]);
+
+    const getCollection = useCallback(<EC extends EntityCollection>(
+        idOrPath: string,
+        entityId?: string,
+        includeUserOverride = false
+    ): EC | undefined => {
+
+        if (!collections)
+            return undefined;
+
+        const baseCollection = getCollectionByPathOrId(removeInitialAndTrailingSlashes(idOrPath), collections);
+
+        const userOverride = includeUserOverride ? userConfigPersistence?.getCollectionConfig(idOrPath) : undefined;
+
+        const overriddenCollection = baseCollection ? mergeDeep(baseCollection, userOverride) : undefined;
+
+        let result: Partial<EntityCollection> | undefined = overriddenCollection;
+
+        if (overriddenCollection) {
+            const subcollections = overriddenCollection.subcollections;
+            const callbacks = overriddenCollection.callbacks;
+            const permissions = overriddenCollection.permissions;
+            result = {
+                ...result,
+                subcollections: result?.subcollections ?? subcollections,
+                callbacks: result?.callbacks ?? callbacks,
+                permissions: result?.permissions ?? permissions
+            };
+        }
+
+        if (!result) return undefined;
+
+        return { ...overriddenCollection, ...result } as EC;
+
+    }, [
+        basePath,
+        baseCollectionPath,
+        collections,
+    ]);
+
+    const getCollectionFromPaths = useCallback(<EC extends EntityCollection>(pathSegments: string[]): EC | undefined => {
+        let currentCollections = collections;
+        if (!currentCollections)
+            throw Error("Collections have not been initialised yet");
+
+        for (let i = 0; i < pathSegments.length; i++) {
+            const pathSegment = pathSegments[i];
+            const collection: EntityCollection | undefined = currentCollections!.find(c => c.id === pathSegment || c.path === pathSegment);
+            if (!collection)
+                return undefined;
+            currentCollections = collection.subcollections;
+            if (i === pathSegments.length - 1)
+                return collection as EC;
+        }
+
+        return undefined;
+
+    }, [collections]);
+
+    const getCollectionFromIds = useCallback(<EC extends EntityCollection>(ids: string[]): EC | undefined => {
+        let currentCollections = collections;
+        if (!currentCollections)
+            throw Error("Collections have not been initialised yet");
+
+        for (let i = 0; i < ids.length; i++) {
+            const id = ids[i];
+            const collection: EntityCollection | undefined = currentCollections!.find(c => c.id === id);
+            if (!collection)
+                return undefined;
+            currentCollections = collection.subcollections;
+            if (i === ids.length - 1)
+                return collection as EC;
+        }
+
+        return undefined;
+
+    }, [collections]);
+
+    const isUrlCollectionPath = useCallback(
+        (path: string): boolean => removeInitialAndTrailingSlashes(path + "/").startsWith(removeInitialAndTrailingSlashes(fullCollectionPath) + "/"),
+        [fullCollectionPath]);
+
+    const urlPathToDataPath = useCallback((path: string): string => {
+        if (path.startsWith(fullCollectionPath))
+            return path.replace(fullCollectionPath, "");
+        throw Error("Expected path starting with " + fullCollectionPath);
+    }, [fullCollectionPath]);
+
+    const buildUrlEditCollectionPath = useCallback(({
+                                                        path
+                                                    }: {
+            path: string
+        }): string => {
+            return `s/edit/${encodePath(path)}`;
+        },
+        []);
+
+    const resolveAliasesFrom = useCallback((path: string): string => {
+        if (!collections)
+            throw Error("Collections have not been initialised yet");
+        return resolveCollectionPathIds(path, collections);
+    }, [collections]);
+
+    const state = location.state as any;
+    /**
+     * The location can be overridden if `base_location` is set in the
+     * state field of the current location. This can happen if you open
+     * a side entity, like `products`, from a different one, like `users`
+     */
+    const baseLocation = state && state.base_location ? state.base_location : location;
+
+    const getAllParentCollectionsForPath = useCallback((path: string): EntityReference[] => {
+        return getParentReferencesFromPath({
+            path,
+            collections
+        });
+    }, [collections]);
+
+    const getParentCollectionIds = useCallback((path: string): string[] => {
+        return getAllParentCollectionsForPath(path).map(r => r.id);
+    }, [getAllParentCollectionsForPath])
+
+    const convertIdsToPaths = useCallback((ids: string[]): string[] => {
+            let currentCollections = collections;
+            const paths: string[] = [];
+            for (let i = 0; i < ids.length; i++) {
+                const id = ids[i];
+                const collection: EntityCollection | undefined = currentCollections!.find(c => c.id === id);
+                if (!collection)
+                    throw Error(`Collection with id ${id} not found`);
+                paths.push(collection.path);
+                currentCollections = collection.subcollections;
+            }
+            return paths;
+        }
+        , [getCollectionFromIds]);
+
+    return useMemo(() => ({
+        collections: collections ?? [],
+        views: views ?? [],
+        loading: !initialised || navigationLoading,
+        navigationLoadingError,
+        homeUrl,
+        basePath,
+        baseCollectionPath,
+        initialised,
+        getCollection,
+        getCollectionFromPaths,
+        getCollectionFromIds,
+        isUrlCollectionPath,
+        urlPathToDataPath,
+        buildUrlCollectionPath,
+        buildUrlEditCollectionPath,
+        buildCMSUrlPath,
+        resolveAliasesFrom,
+        topLevelNavigation,
+        baseLocation,
+        refreshNavigation,
+        getParentReferencesFromPath: getAllParentCollectionsForPath,
+        getParentCollectionIds,
+        convertIdsToPaths
+    }), [baseCollectionPath, baseLocation, basePath, buildCMSUrlPath, buildUrlCollectionPath, buildUrlEditCollectionPath, collections, getAllParentCollectionsForPath, getCollection, getCollectionFromPaths, homeUrl, initialised, isUrlCollectionPath, navigationLoading, navigationLoadingError, refreshNavigation, resolveAliasesFrom, topLevelNavigation, urlPathToDataPath, views]);
+}
+
+export function getSidePanelKey(path: string, entityId?: string) {
+    if (entityId)
+        return `${removeInitialAndTrailingSlashes(path)}/${removeInitialAndTrailingSlashes(entityId)}`;
+    else
+        return removeInitialAndTrailingSlashes(path);
+}
+
+function encodePath(input: string) {
+    return encodeURIComponent(removeInitialAndTrailingSlashes(input))
+        .replaceAll("%2F", "/")
+        .replaceAll("%23", "#");
+}
+
+function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[], authController: AuthController<User>): EntityCollection[] {
+    return resolvedCollections
+        .filter((c) => {
+            if (!c.permissions) return true;
+            const resolvedPermissions = resolvePermissions(c, authController, [c.path], null,)
+            return resolvedPermissions.read !== false;
+        })
+        .map((c) => {
+            if (!c.subcollections) return c;
+            return {
+                ...c,
+                subcollections: filterOutNotAllowedCollections(c.subcollections, authController)
+            }
+        });
+}
+
+async function resolveCollections(collections: undefined | EntityCollection[] | EntityCollectionsBuilder<any>, authController: AuthController, dataSource: DataSourceDelegate, plugins?: FireCMSPlugin[]) {
+    let resolvedCollections: EntityCollection[] = [];
+    if (typeof collections === "function") {
+        resolvedCollections = await collections({
+            user: authController.user,
+            authController,
+            dataSource
+        });
+    } else if (Array.isArray(collections)) {
+        resolvedCollections = collections;
+    }
+
+    resolvedCollections = filterOutNotAllowedCollections(resolvedCollections, authController);
+
+    if (plugins) {
+        plugins.forEach((plugin: FireCMSPlugin) => {
+            if (plugin.collections?.injectCollections) {
+                resolvedCollections = plugin.collections?.injectCollections(resolvedCollections ?? []);
+            }
+        });
+    }
+    return resolvedCollections;
+}
+
+async function resolveCMSViews(baseViews: CMSView[] | CMSViewsBuilder | undefined, authController: AuthController, dataSource: DataSourceDelegate) {
+    let resolvedViews: CMSView[] = [];
+    if (typeof baseViews === "function") {
+        resolvedViews = await baseViews({
+            user: authController.user,
+            authController,
+            dataSource
+        });
+    } else if (Array.isArray(baseViews)) {
+        resolvedViews = baseViews;
+    }
+    return resolvedViews;
+}

package/src/internal/useBuildSideDialogsController.tsx

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { SideDialogPanelProps, SideDialogsController } from "../types";
+import equal from "react-fast-compare"
+
+export function useBuildSideDialogsController(): SideDialogsController {
+    console.log("useBuildSideDialogsController");
+
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const [sidePanels, setSidePanels] = useState<SideDialogPanelProps[]>([]);
+    const sidePanelsRef = useRef<SideDialogPanelProps[]>(sidePanels);
+
+    const routesStore = useRef<Record<string, SideDialogPanelProps>>({});
+    const routesCount = useRef<number>(0);
+
+    const updateSidePanels = (newPanels: SideDialogPanelProps[]) => {
+        sidePanelsRef.current = newPanels;
+        setSidePanels(newPanels);
+    };
+
+    useEffect(() => {
+        const state = location.state as any;
+        const panelKeys: string[] = state?.panels ?? [];
+        const newPanels = panelKeys
+            .map(key => routesStore.current[key])
+            .filter(p => Boolean(p)) as SideDialogPanelProps[];
+        if (!equal(sidePanelsRef.current.map(p => p.key), newPanels.map(p => p.key)))
+            updateSidePanels(newPanels);
+    }, [location]);
+
+    const close = useCallback(() => {
+
+        if (sidePanels.length === 0)
+            return;
+
+        const lastSidePanel = sidePanels[sidePanels.length - 1];
+        const updatedPanels = [...sidePanels.slice(0, -1)];
+        updateSidePanels(updatedPanels);
+
+        if (routesCount.current > 0) {
+            if (lastSidePanel.urlPath)
+                navigate(-1);
+            routesCount.current--;
+        } else if (lastSidePanel.parentUrlPath) {
+            const baseLocation = (location.state as any)?.base_location ?? location;
+            navigate(
+                lastSidePanel.parentUrlPath,
+                {
+                    replace: true,
+                    state: {
+                        base_location: baseLocation,
+                        panels: updatedPanels.map(p => p.key)
+                    }
+                }
+            );
+        }
+    }, [sidePanels, navigate, location]);
+
+    const open = useCallback((panelProps: SideDialogPanelProps | SideDialogPanelProps[]) => {
+
+        const newPanels: SideDialogPanelProps[] = Array.isArray(panelProps) ? panelProps : [panelProps];
+
+        newPanels.forEach((panel) => {
+            routesStore.current[panel.key] = panel;
+        });
+        routesCount.current = routesCount.current + newPanels.length;
+
+        const baseLocation = (location.state as any)?.base_location ?? location;
+
+        const updatedPanels = [...sidePanels, ...newPanels];
+        updateSidePanels(updatedPanels);
+
+        newPanels.forEach((panel) => {
+            if (panel.urlPath) {
+                navigate(
+                    panel.urlPath,
+                    {
+                        state: {
+                            base_location: baseLocation,
+                            panels: updatedPanels.map(p => p.key)
+                        }
+                    }
+                );
+            }
+        });
+
+    }, [location, navigate, sidePanels]);
+
+    const replace = useCallback((panelProps: SideDialogPanelProps | SideDialogPanelProps[]) => {
+
+        const newPanels: SideDialogPanelProps[] = Array.isArray(panelProps) ? panelProps : [panelProps];
+        newPanels.forEach((panel) => {
+            routesStore.current[panel.key] = panel;
+        });
+
+        const baseLocation = (location.state as any)?.base_location ?? location;
+
+        const updatedPanels = [...sidePanels.slice(0, -newPanels.length), ...newPanels];
+        updateSidePanels(updatedPanels);
+
+        newPanels.forEach((panel) => {
+            if (panel.urlPath) {
+                navigate(
+                    panel.urlPath,
+                    {
+                        replace: true,
+                        state: {
+                            base_location: baseLocation,
+                            panels: updatedPanels.map(p => p.key)
+                        }
+                    }
+                );
+            }
+        });
+
+    }, [location, navigate, sidePanels]);
+
+    return {
+        sidePanels,
+        close,
+        open,
+        replace
+    };
+}

package/src/internal/useBuildSideEntityController.tsx

@@ -0,0 +1,172 @@
+import { useCallback, useEffect, useRef } from "react";
+import {
+    EntityCollection,
+    EntitySidePanelProps,
+    NavigationController,
+    SideDialogPanelProps,
+    SideDialogsController,
+    SideEntityController
+} from "../types";
+import { getNavigationEntriesFromPathInternal, NavigationViewInternal } from "../util/navigation_from_path";
+import { useLocation } from "react-router-dom";
+import { removeInitialAndTrailingSlashes, resolveDefaultSelectedView } from "../util";
+import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "./common";
+import { useLargeLayout } from "../hooks";
+import { EntitySidePanel } from "../core/EntitySidePanel";
+
+const NEW_URL_HASH = "new";
+
+export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean): string {
+    if (small) return CONTAINER_FULL_WIDTH;
+    const mainViewSelected = !props.selectedSubPath;
+    const resolvedWidth: string | undefined = typeof props.width === "number" ? `${props.width}px` : props.width;
+    return !mainViewSelected ? `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})` : resolvedWidth ?? FORM_CONTAINER_WIDTH
+}
+
+export const useBuildSideEntityController = (navigation: NavigationController,
+                                             sideDialogsController: SideDialogsController): SideEntityController => {
+
+    const location = useLocation();
+    const initialised = useRef<boolean>(false);
+
+    const smallLayout = !useLargeLayout();
+
+    // only on initialisation, create panels from URL
+    useEffect(() => {
+        if (!navigation.loading && !initialised.current) {
+            if (navigation.isUrlCollectionPath(location.pathname)) {
+                const newFlag = location.hash === `#${NEW_URL_HASH}`;
+                const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
+                const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections, newFlag);
+                for (let i = 0; i < panelsFromUrl.length; i++) {
+                    const panel = panelsFromUrl[i];
+                    setTimeout(() => {
+                        if (i === 0)
+                            sideDialogsController.replace(propsToSidePanel(panel, navigation, smallLayout));
+                        else
+                            sideDialogsController.open(propsToSidePanel(panel, navigation, smallLayout))
+                    }, 1);
+                }
+            }
+            initialised.current = true;
+        }
+    }, [location, navigation, sideDialogsController, smallLayout]);
+
+    const close = useCallback(() => {
+        sideDialogsController.close();
+    }, [sideDialogsController]);
+
+    const open = useCallback((props: EntitySidePanelProps<any>) => {
+
+        if (props.copy && !props.entityId) {
+            throw Error("If you want to copy an entity you need to provide an entityId");
+        }
+
+        const defaultSelectedView = resolveDefaultSelectedView(
+            props.collection ? props.collection.defaultSelectedView : undefined,
+            {
+                status: props.copy ? "copy" : (props.entityId ? "existing" : "new"),
+                entityId: props.entityId
+            }
+        );
+
+        sideDialogsController.open(propsToSidePanel({
+            selectedSubPath: defaultSelectedView,
+            ...props,
+        }, navigation, smallLayout));
+
+    }, [sideDialogsController, navigation, smallLayout]);
+
+    const replace = useCallback((props: EntitySidePanelProps<any>) => {
+
+        if (props.copy && !props.entityId) {
+            throw Error("If you want to copy an entity you need to provide an entityId");
+        }
+
+        sideDialogsController.replace(propsToSidePanel(props, navigation, smallLayout));
+
+    }, [navigation, sideDialogsController, smallLayout]);
+
+    return {
+        close,
+        open,
+        replace
+    };
+};
+
+export function buildSidePanelsFromUrl(path: string, collections: EntityCollection[], newFlag: boolean): EntitySidePanelProps<any>[] {
+
+    const navigationViewsForPath: NavigationViewInternal<any>[] = getNavigationEntriesFromPathInternal({
+        path,
+        collections
+    });
+
+    const sidePanels: EntitySidePanelProps<any>[] = [];
+    let lastCollectionPath = "";
+    for (let i = 0; i < navigationViewsForPath.length; i++) {
+        const navigationEntry = navigationViewsForPath[i];
+
+        if (navigationEntry.type === "collection") {
+            lastCollectionPath = navigationEntry.path;
+        }
+
+        if (i > 0) { // the first collection is handled by the main navigation
+            const previousEntry = navigationViewsForPath[i - 1];
+            if (navigationEntry.type === "entity") {
+                sidePanels.push({
+                        path: navigationEntry.path,
+                        entityId: navigationEntry.entityId,
+                        copy: false
+                    }
+                );
+            } else if (navigationEntry.type === "custom_view") {
+                if (previousEntry.type === "entity") {
+                    const lastSidePanel: EntitySidePanelProps<any> = sidePanels[sidePanels.length - 1];
+                    if (lastSidePanel)
+                        lastSidePanel.selectedSubPath = navigationEntry.view.key;
+                }
+            } else if (navigationEntry.type === "collection") {
+                if (previousEntry.type === "entity") {
+                    const lastSidePanel: EntitySidePanelProps<any> = sidePanels[sidePanels.length - 1];
+                    if (lastSidePanel)
+                        lastSidePanel.selectedSubPath = navigationEntry.collection.id ?? navigationEntry.collection.path;
+                }
+            }
+        }
+
+    }
+
+    if (newFlag) {
+        sidePanels.push({
+            path: lastCollectionPath,
+            copy: false
+        });
+    }
+
+    return sidePanels;
+}
+
+const propsToSidePanel = (props: EntitySidePanelProps<any>, navigation: NavigationController, smallLayout: boolean): SideDialogPanelProps => {
+
+        const collectionPath = removeInitialAndTrailingSlashes(props.path);
+
+        const newPath = props.entityId
+            ? navigation.buildUrlCollectionPath(`${collectionPath}/${props.entityId}/${props.selectedSubPath || ""}`)
+            : navigation.buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
+        const resolvedPath = navigation.resolveAliasesFrom(props.path);
+
+        const resolvedPanelProps: EntitySidePanelProps<any> = {
+            ...props,
+            path: resolvedPath
+        };
+
+        return ({
+            key: `${props.path}/${props.entityId}`,
+            component: <EntitySidePanel {...resolvedPanelProps}/>,
+            urlPath: newPath,
+            parentUrlPath: navigation.buildUrlCollectionPath(collectionPath),
+            width: getEntityViewWidth(props, smallLayout),
+            onClose: props.onClose
+        });
+    }
+;

package/src/internal/useLocaleConfig.tsx

@@ -0,0 +1,18 @@
+import * as locales from "date-fns/locale";
+// @ts-ignore
+import { registerLocale, setDefaultLocale } from "react-datepicker";
+import { useEffect } from "react";
+
+export function useLocaleConfig(locale?: string) {
+    useEffect(() => {
+        if (!locale) {
+            return;
+        }
+        // @ts-ignore
+        const dateFnsLocale = locales[locale];
+        if (dateFnsLocale) {
+            registerLocale(locale, dateFnsLocale);
+            setDefaultLocale(locale);
+        }
+    }, [locale])
+}