@firecms/core 3.0.1 → 3.1.0-canary.24c8270

package/src/components/common/useColumnsIds.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { EntityCollection, ResolvedEntityCollection, ResolvedProperty } from "../../types";
+import { getPropertyInPath } from "../../util";
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
 import { PropertyColumnConfig } from "../EntityCollectionTable/EntityCollectionTableProps";
 
@@ -16,15 +17,45 @@ export function useColumnIds<M extends Record<string, any>>(collection: Resolved
 
 function hideAndExpandKeys<M extends Record<string, any>>(collection: ResolvedEntityCollection<M>, keys: string[]): PropertyColumnConfig[] {
 
-    return keys.flatMap((key) => {
+    // First, figure out which spread map roots have individual child keys in the order
+    // If so, we should NOT auto-expand them - just use the explicit child keys
+    const rootsWithExplicitChildren = new Set<string>();
+    for (const key of keys) {
+        if (key.includes(".")) {
+            const rootKey = key.split(".")[0];
+            const rootProperty = collection.properties[rootKey];
+            if (rootProperty && rootProperty.dataType === "map" && rootProperty.spreadChildren && rootProperty.properties) {
+                rootsWithExplicitChildren.add(rootKey);
+            }
+        }
+    }
+
+    // Track processed keys to avoid duplicates
+    const processedPropertyKeys = new Set<string>();
+
+    const result = keys.flatMap((key) => {
+        // Skip if already processed (handles duplicates in propertiesOrder)
+        if (processedPropertyKeys.has(key)) return [null];
+
+        // Check if it's a top-level property
         const property = collection.properties[key];
         if (property) {
+            processedPropertyKeys.add(key);
             if (property.hideFromCollection)
                 return [null];
             if (property.disabled && typeof property.disabled === "object" && property.disabled.hidden)
                 return [null];
+
             if (property.dataType === "map" && property.spreadChildren && property.properties) {
-                return getColumnKeysForProperty(property, key);
+                // Check if this spread map has explicit child keys in propertiesOrder
+                if (rootsWithExplicitChildren.has(key)) {
+                    // DON'T auto-expand - the children are explicitly listed elsewhere
+                    return [null];
+                }
+                // Auto-expand all children
+                const childConfigs = getColumnKeysForProperty(property, key);
+                childConfigs.forEach(c => processedPropertyKeys.add(c.key));
+                return childConfigs;
             }
             return [{
                 key,
@@ -32,6 +63,33 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: ResolvedEn
             }];
         }
 
+        // Check if it's a nested key like "data.mode" (for spread map properties)
+        if (key.includes(".")) {
+            const rootKey = key.split(".")[0];
+            const rootProperty = collection.properties[rootKey];
+
+            if (rootProperty && rootProperty.dataType === "map" && rootProperty.properties) {
+                const nestedProperty = getPropertyInPath(collection.properties, key) as ResolvedProperty | undefined;
+                if (nestedProperty) {
+                    processedPropertyKeys.add(key);
+                    // Mark root as seen
+                    processedPropertyKeys.add(rootKey);
+
+                    if (nestedProperty.hideFromCollection)
+                        return [null];
+                    if (nestedProperty.disabled && typeof nestedProperty.disabled === "object" && nestedProperty.disabled.hidden)
+                        return [null];
+
+                    return [{
+                        key,
+                        disabled: Boolean(rootProperty.disabled) || Boolean(rootProperty.readOnly) ||
+                            Boolean(nestedProperty.disabled) || Boolean(nestedProperty.readOnly)
+                    }];
+                }
+            }
+        }
+
+        // Check additional fields
         const additionalField = collection.additionalFields?.find(field => field.key === key);
         if (additionalField) {
             return [{
@@ -40,6 +98,7 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: ResolvedEn
             }];
         }
 
+        // Check subcollections
         if (collection.subcollections) {
             const subCollection = collection.subcollections.find(subCol => getSubcollectionColumnId(subCol) === key);
             if (subCollection) {
@@ -50,6 +109,7 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: ResolvedEn
             }
         }
 
+        // Check collection group parent
         if (collection.collectionGroup && key === COLLECTION_GROUP_PARENT_ID) {
             return [{
                 key,
@@ -59,6 +119,37 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: ResolvedEn
 
         return [null];
     }).filter(Boolean) as PropertyColumnConfig[];
+
+    // Add any missing properties that weren't in propertiesOrder
+    // This ensures properties NEVER disappear
+    for (const propKey of Object.keys(collection.properties)) {
+        // Skip if already processed
+        if (processedPropertyKeys.has(propKey)) continue;
+
+        const property = collection.properties[propKey];
+        if (!property) continue;
+        if (property.hideFromCollection) continue;
+        if (property.disabled && typeof property.disabled === "object" && property.disabled.hidden) continue;
+
+        if (property.dataType === "map" && property.spreadChildren && property.properties) {
+            // For spread maps, add all children that weren't already added
+            const allChildConfigs = getColumnKeysForProperty(property, propKey);
+            for (const childConfig of allChildConfigs) {
+                if (!processedPropertyKeys.has(childConfig.key)) {
+                    result.push(childConfig);
+                    processedPropertyKeys.add(childConfig.key);
+                }
+            }
+        } else {
+            result.push({
+                key: propKey,
+                disabled: Boolean(property.disabled) || Boolean(property.readOnly)
+            });
+            processedPropertyKeys.add(propKey);
+        }
+    }
+
+    return result;
 }
 
 function getDefaultColumnKeys<M extends Record<string, any> = any>(collection: ResolvedEntityCollection<M>, includeSubCollections: boolean) {
@@ -69,7 +160,8 @@ function getDefaultColumnKeys<M extends Record<string, any> = any>(collection: R
 
     const columnIds: string[] = [
         ...propertyKeys,
-        ...additionalFields.map((field) => field.key)
+        // Filter out additional fields whose key already exists in propertyKeys to avoid duplicate column keys
+        ...additionalFields.filter((field) => !propertyKeys.includes(field.key)).map((field) => field.key)
     ];
 
     if (includeSubCollections) {

package/src/components/common/useDataSourceTableController.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
 
 import { useDataSource, useFireCMSContext, useNavigationController } from "../../hooks";
 import { useDataOrder } from "../../hooks/data/useDataOrder";
@@ -94,7 +95,7 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     const [searchString, setSearchString] = React.useState<string | undefined>();
 
     const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
-                                                sortBy?: [string, "asc" | "desc"]) => {
+        sortBy?: [string, "asc" | "desc"]) => {
         if (!dataSource.isFilterCombinationValid)
             return true;
         return dataSource.isFilterCombinationValid({
@@ -106,8 +107,8 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     }, []);
 
     const onScroll = ({
-                          scrollOffset
-                      }: {
+        scrollOffset
+    }: {
         scrollOffset: number
     }) => {
         if (scrollRestoration) {
@@ -128,14 +129,30 @@ export function useDataSourceTableController<M extends Record<string, any> = any
         return initialSort;
     }, [initialSort, forceFilter]);
 
+    const location = useLocation();
+
     const {
         filterValues: initialFilterUrl,
         sortBy: initialSortUrl,
-    } = parseFilterAndSort(window.location.search);
+    } = parseFilterAndSort(location.search);
 
     const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? (updateUrl ? initialFilterUrl : undefined) ?? initialFilter ?? undefined);
     const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>((updateUrl ? initialSortUrl : undefined) ?? initialSortInternal);
 
+    useEffect(() => {
+        if (updateUrl) {
+            const { filterValues: urlFilterValues, sortBy: urlSortBy } = parseFilterAndSort(location.search);
+            if (!forceFilter) {
+                setFilterValues(urlFilterValues as any);
+            }
+            if (urlSortBy && forceFilter && !checkFilterCombination(forceFilter, urlSortBy)) {
+                console.warn("URL sort is not compatible with the force filter.");
+            } else {
+                setSortBy(urlSortBy as any);
+            }
+        }
+    }, [location.search, updateUrl, forceFilter, checkFilterCombination]);
+
     useUpdateUrl(filterValues, sortBy, searchString, updateUrl);
 
     const collectionScroll = scrollRestoration?.getCollectionScroll(fullPath, filterValues);

package/src/components/index.tsx

@@ -16,6 +16,8 @@ export * from "./SelectableTable/SelectableTable";
 export * from "./SelectableTable/SelectableTableContext";
 export * from "./EntityCollectionView/EntityCollectionView";
 export * from "./EntityCollectionView/EntityCollectionViewActions";
+export * from "./EntityCollectionView/EntityCollectionCardView";
+export * from "./EntityCollectionView/EntityCard";
 export * from "./EntityCollectionView/useSelectionController";
 
 export * from "./PropertyConfigBadge";
@@ -38,3 +40,5 @@ export * from "./SearchIconsView";
 export * from "./FieldCaption";
 
 export * from "./EntityPreview";
+
+export * from "./AIIcon";

package/src/contexts/BreacrumbsContext.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import { BreadcrumbEntry, BreadcrumbsController } from "../hooks/useBreadcrumbsController";
 
-const DEFAULT_BREADCRUMBS_CONTROLLER = {
+const DEFAULT_BREADCRUMBS_CONTROLLER: BreadcrumbsController = {
     breadcrumbs: [],
-    set: (props: {
-        breadcrumbs: BreadcrumbEntry[];
-    }) => {
+    set: () => {
+    },
+    updateCount: () => {
     }
 };
 
@@ -19,17 +19,24 @@ export const BreadcrumbsProvider: React.FC<BreadcrumbsProviderProps> = ({ childr
 
     const [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbEntry[]>([]);
 
-    const set = (props: {
+    const set = useCallback((props: {
         breadcrumbs: BreadcrumbEntry[];
     }) => {
         setBreadcrumbs(props.breadcrumbs);
-    };
+    }, []);
+
+    const updateCount = useCallback((id: string, count: number | null | undefined) => {
+        setBreadcrumbs(prev => prev.map(entry =>
+            entry.id === id ? { ...entry, count } : entry
+        ));
+    }, []);
 
     return (
         <BreadcrumbContext.Provider
             value={{
                 breadcrumbs,
-                set
+                set,
+                updateCount
             }}
         >
             {children}

package/src/contexts/index.ts

@@ -1,3 +1,13 @@
 export * from "./SnackbarProvider";
 export * from "./ModeController";
 export * from "./AuthControllerContext";
+export * from "./DataSourceContext";
+export * from "./NavigationContext";
+export * from "./CustomizationControllerContext";
+export * from "./SideEntityControllerContext";
+export * from "./SideDialogsControllerContext";
+export * from "./AnalyticsContext";
+export * from "./StorageSourceContext";
+export * from "./UserConfigurationPersistenceContext";
+export * from "./DialogsProvider";
+export * from "./InternalUserManagementContext";

package/src/core/DefaultAppBar.tsx

@@ -57,16 +57,16 @@ export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
  */
 export const DefaultAppBar = function DefaultAppBar({
-                                                        title,
-                                                        endAdornment,
-                                                        startAdornment,
-                                                        dropDownActions,
-                                                        includeModeToggle = true,
-                                                        className,
-                                                        style,
-                                                        user: userProp,
-                                                        logo: logoProp,
-                                                    }: DefaultAppBarProps) {
+    title,
+    endAdornment,
+    startAdornment,
+    dropDownActions,
+    includeModeToggle = true,
+    className,
+    style,
+    user: userProp,
+    logo: logoProp,
+}: DefaultAppBarProps) {
 
     const {
         hasDrawer,
@@ -92,7 +92,7 @@ export const DefaultAppBar = function DefaultAppBar({
 
     const user = userProp ?? authController.user;
 
-    let avatarComponent: JSX.Element | null;
+    let avatarComponent: React.ReactElement | null;
 
     if (user) {
         const initial = user?.displayName
@@ -103,7 +103,7 @@ export const DefaultAppBar = function DefaultAppBar({
         </Avatar>;
     } else if (user === undefined || authController.initialLoading) {
         avatarComponent = <div className={"p-1 flex justify-center"}>
-            <Skeleton className={"w-10 h-10 rounded-full"}/>
+            <Skeleton className={"w-10 h-10 rounded-full"} />
         </div>;
     } else {
         avatarComponent = null;
@@ -131,13 +131,13 @@ export const DefaultAppBar = function DefaultAppBar({
                     <div className={"flex flex-row gap-4"}>
                         {!hasDrawer && (logo
                             ? <img src={logo}
-                                   alt="Logo"
-                                   className={cls("w-[32px] h-[32px] object-contain")}/>
-                            : <FireCMSLogo width={"32px"} height={"32px"}/>)}
+                                alt="Logo"
+                                className={cls("w-[32px] h-[32px] object-contain")} />
+                            : <FireCMSLogo width={"32px"} height={"32px"} />)}
 
                         {typeof title === "string"
                             ? <Typography variant="subtitle1"
-                                          noWrap>
+                                noWrap>
                                 {title}
                             </Typography>
                             : title}
@@ -146,7 +146,7 @@ export const DefaultAppBar = function DefaultAppBar({
             </div>}
 
             {(breadcrumbs.breadcrumbs ?? []).length > 0 && <div className="mr-8 hidden lg:block">
-                <div className={"flex flex-row gap-2"}>
+                <div className={"flex flex-row gap-2 items-center"}>
                     {breadcrumbs.breadcrumbs.map((breadcrumb, index) => {
                         return <React.Fragment key={breadcrumb.url + "_" + index}>
                             <Typography variant={"caption"} color={"secondary"}>
@@ -157,18 +157,31 @@ export const DefaultAppBar = function DefaultAppBar({
                                 className="visited:text-inherit visited:dark:text-inherit block"
                                 to={breadcrumb.url}
                             >
-                                <Typography variant={"caption"} color={"secondary"}>
-                                    {breadcrumb.title}
-                                </Typography>
+                                <div className="flex flex-row items-center gap-2 whitespace-nowrap">
+                                    <Typography variant={"body2"}>
+                                        {breadcrumb.title}
+                                    </Typography>
+                                    {/* Show count badge for collection breadcrumbs: undefined = not applicable, null = loading, number = count */}
+                                    {breadcrumb.count !== undefined && (
+                                        breadcrumb.count !== null ? (
+                                            <span className="text-xs text-surface-accent-500 dark:text-surface-accent-400 bg-surface-100 dark:bg-surface-700 px-1 py-0 rounded">
+                                                {breadcrumb.count}
+                                            </span>
+                                        ) : (
+                                            <Skeleton className="w-8 h-4 rounded-md" />
+                                        )
+                                    )}
+                                </div>
                             </Link>
                         </React.Fragment>;
                     })}
                 </div>
             </div>}
 
+
             {startAdornment}
 
-            <div className={"flex-grow"}/>
+            <div className={"flex-grow"} />
 
             {endAdornment &&
                 <ErrorBoundary>
@@ -182,13 +195,13 @@ export const DefaultAppBar = function DefaultAppBar({
                         aria-label="Open drawer"
                         size="large">
                         {mode === "dark"
-                            ? <DarkModeIcon/>
-                            : <LightModeIcon/>}
+                            ? <DarkModeIcon />
+                            : <LightModeIcon />}
                     </IconButton>}>
-                    <MenuItem onClick={() => setMode("dark")}><DarkModeIcon size={"smallest"}/> Dark</MenuItem>
-                    <MenuItem onClick={() => setMode("light")}><LightModeIcon size={"smallest"}/> Light </MenuItem>
+                    <MenuItem onClick={() => setMode("dark")}><DarkModeIcon size={"smallest"} /> Dark</MenuItem>
+                    <MenuItem onClick={() => setMode("light")}><LightModeIcon size={"smallest"} /> Light </MenuItem>
                     <MenuItem onClick={() => setMode("system")}> <BrightnessMediumIcon
-                        size={"smallest"}/>System</MenuItem>
+                        size={"smallest"} />System</MenuItem>
                 </Menu>}
 
             <Menu trigger={avatarComponent}>
@@ -208,7 +221,7 @@ export const DefaultAppBar = function DefaultAppBar({
                     // replace current route with home
                     navigate("/");
                 }}>
-                    <LogoutIcon/>
+                    <LogoutIcon />
                     Log Out
                 </MenuItem>}
 

package/src/core/DefaultDrawer.tsx

@@ -1,13 +1,13 @@
-import React, { useCallback } from "react";
+import React from "react";
 
-import { useLargeLayout, useNavigationController } from "../hooks";
+import { useCollapsedGroups, useLargeLayout, useNavigationController } from "../hooks";
 
 import { Link, useNavigate } from "react-router-dom";
 import { CMSAnalyticsEvent, NavigationEntry, NavigationResult } from "../types";
 import { IconForView } from "../util";
-import { cls, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
+import { cls, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip } from "@firecms/ui";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
-import { DrawerNavigationItem } from "./DrawerNavigationItem";
+import { DrawerNavigationGroup } from "./DrawerNavigationGroup";
 import { FireCMSLogo } from "../components";
 import { useApp } from "../app/useApp";
 
@@ -16,9 +16,9 @@ import { useApp } from "../app/useApp";
  * @group Core
  */
 export function DefaultDrawer({
-                                  className,
-                                  style,
-                              }: {
+    className,
+    style,
+}: {
     className?: string
     style?: React.CSSProperties,
 }) {
@@ -50,20 +50,10 @@ export function DefaultDrawer({
     const adminViews = navigationEntries.filter(e => e.type === "admin") ?? [];
     const groupsWithoutAdmin = groups.filter(g => g !== "Admin");
 
-    const buildGroupHeader = useCallback((group?: string) => {
-        if (!drawerOpen) return <div className="w-full"/>;
-        return <div
-            className="pl-6 pr-8 py-4 flex flex-row items-center">
-            <Typography variant={"caption"}
-                        color={"secondary"}
-                        className="font-medium flex-grow line-clamp-1">
-                {group ? group.toUpperCase() : "Views".toUpperCase()}
-            </Typography>
+    // Collapsible groups state - using "drawer" namespace for independent state from home page
+    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupsWithoutAdmin, "drawer");
 
-        </div>;
-    }, [drawerOpen]);
-
-    const onClick = (view: NavigationEntry) => {
+    const onItemClick = (view: NavigationEntry) => {
         const eventName: CMSAnalyticsEvent = view.type === "collection"
             ? "drawer_navigate_to_collection"
             : (view.type === "view" ? "drawer_navigate_to_view" : "unmapped_event");
@@ -76,33 +66,29 @@ export function DefaultDrawer({
         <>
             <div className={cls("flex flex-col h-full relative flex-grow w-full", className)} style={style}>
 
-                <DrawerLogo logo={logo}/>
+                <DrawerLogo logo={logo} />
 
                 <div className={"mt-4 flex-grow overflow-scroll no-scrollbar"}
-                     style={{
-                         maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
-                     }}>
-
-                    {groupsWithoutAdmin.map((group) => (
-                        <div
-                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-3 mr-1"}
-                            key={`drawer_group_${group}`}>
-                            {buildGroupHeader(group)}
-                            {Object.values(navigationEntries)
-                                .filter(e => e.group === group)
-                                .map((view) =>
-                                    <DrawerNavigationItem
-                                        key={view.id}
-                                        icon={<IconForView collectionOrView={view.collection ?? view.view}
-                                                           size={"small"}/>}
-                                        tooltipsOpen={tooltipsOpen}
-                                        adminMenuOpen={adminMenuOpen}
-                                        drawerOpen={drawerOpen}
-                                        onClick={() => onClick(view)}
-                                        url={view.url}
-                                        name={view.name}/>)}
-                        </div>
-                    ))}
+                    style={{
+                        maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
+                    }}>
+
+                    {groupsWithoutAdmin.map((group) => {
+                        const entriesInGroup = Object.values(navigationEntries).filter(e => e.group === group);
+                        return (
+                            <DrawerNavigationGroup
+                                key={`drawer_group_${group}`}
+                                group={group}
+                                entries={entriesInGroup}
+                                collapsed={isGroupCollapsed(group)}
+                                onToggleCollapsed={() => toggleGroupCollapsed(group)}
+                                drawerOpen={drawerOpen}
+                                tooltipsOpen={tooltipsOpen}
+                                adminMenuOpen={adminMenuOpen}
+                                onItemClick={onItemClick}
+                            />
+                        );
+                    })}
 
                 </div>
 
@@ -115,9 +101,9 @@ export function DefaultDrawer({
                             shape={"square"}
                             className={"m-4 text-surface-900 dark:text-white w-fit"}>
                             <Tooltip title={"Admin"}
-                                     open={tooltipsOpen}
-                                     side={"right"} sideOffset={28}>
-                                <MoreVertIcon/>
+                                open={tooltipsOpen}
+                                side={"right"} sideOffset={28}>
+                                <MoreVertIcon />
                             </Tooltip>
                             {drawerOpen && <div
                                 className={cls(
@@ -132,10 +118,10 @@ export function DefaultDrawer({
                         <MenuItem
                             onClick={(event) => {
                                 event.preventDefault();
-                                navigate(entry.url); // Consistent use of entry.url for navigation
+                                navigate(entry.url);
                             }}
                             key={entry.id}>
-                            {<IconForView collectionOrView={entry.view}/>}
+                            {<IconForView collectionOrView={entry.view} />}
                             {entry.name}
                         </MenuItem>)}
 
@@ -167,17 +153,17 @@ export function DrawerLogo({ logo }: {
         className={cls("cursor-pointer rounded ml-3 mr-1")}>
 
         <Tooltip title={"Home"}
-                 sideOffset={20}
-                 side="right">
+            sideOffset={20}
+            side="right">
             <Link
                 className={"block"}
                 to={navigation.basePath}>
                 {logo
                     ? <img src={logo}
-                           alt="Logo"
-                           className={cls("max-w-full max-h-full transition-all object-contain",
-                               drawerOpen ? "w-[96px] h-[96px]" : "w-[32px] h-[32px]")}/>
-                    : <FireCMSLogo/>}
+                        alt="Logo"
+                        className={cls("max-w-full max-h-full transition-all object-contain",
+                            drawerOpen ? "w-[96px] h-[96px]" : "w-[32px] h-[32px]")} />
+                    : <FireCMSLogo />}
 
             </Link>
         </Tooltip>