@firecms/core 3.0.1 → 3.1.0-canary.1df3b2c

package/src/core/DrawerNavigationGroup.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { cls, ExpandMoreIcon, Typography } from "@firecms/ui";
+import { NavigationEntry } from "../types";
+import { IconForView } from "../util";
+import { DrawerNavigationItem } from "./DrawerNavigationItem";
+
+export interface DrawerNavigationGroupProps {
+    /**
+     * Group name to display in header
+     */
+    group: string;
+    /**
+     * Navigation entries in this group
+     */
+    entries: NavigationEntry[];
+    /**
+     * Whether the group is collapsed
+     */
+    collapsed: boolean;
+    /**
+     * Callback when collapse state should toggle
+     */
+    onToggleCollapsed: () => void;
+    /**
+     * Whether the drawer is in open (expanded) state
+     */
+    drawerOpen: boolean;
+    /**
+     * Whether tooltips should be shown (drawer closed + hovered)
+     */
+    tooltipsOpen: boolean;
+    /**
+     * Whether admin menu is open (used to control tooltip visibility)
+     */
+    adminMenuOpen?: boolean;
+    /**
+     * Optional actions to render in the group header (e.g., "Add collection" button)
+     */
+    headerActions?: React.ReactNode;
+    /**
+     * Optional callback when a navigation item is clicked
+     */
+    onItemClick?: (entry: NavigationEntry) => void;
+}
+
+/**
+ * Shared drawer navigation group component used by both DefaultDrawer and FireCMSCloudDrawer.
+ * Renders a collapsible group with header and navigation items.
+ */
+export function DrawerNavigationGroup({
+    group,
+    entries,
+    collapsed,
+    onToggleCollapsed,
+    drawerOpen,
+    tooltipsOpen,
+    adminMenuOpen,
+    headerActions,
+    onItemClick
+}: DrawerNavigationGroupProps) {
+    return (
+        <div
+            className={"bg-surface-50 dark:bg-surface-800/30 my-4 rounded-lg ml-3 mr-1"}
+            key={`drawer_group_${group}`}
+        >
+            {/* Group Header */}
+            {drawerOpen ? (
+                <div
+                    className="pl-4 pr-2 py-2 flex flex-row items-center cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-700/50 rounded-t-lg transition-colors"
+                    onClick={onToggleCollapsed}
+                >
+                    <ExpandMoreIcon
+                        size={"smallest"}
+                        className={cls(
+                            "text-surface-500 dark:text-surface-400 transition-transform duration-200 mr-1",
+                            collapsed ? "-rotate-90" : "rotate-0"
+                        )}
+                    />
+                    <Typography
+                        variant={"caption"}
+                        color={"secondary"}
+                        className="font-medium flex-grow line-clamp-1"
+                    >
+                        {(group || "Views").toUpperCase()}
+                    </Typography>
+                    {headerActions && (
+                        <div onClick={(e) => e.stopPropagation()}>
+                            {headerActions}
+                        </div>
+                    )}
+                </div>
+            ) : (
+                <div className="w-full" />
+            )}
+
+            {/* Collapsible Content */}
+            <div
+                className={cls(
+                    "overflow-hidden transition-all duration-200 ease-in-out",
+                    collapsed ? "max-h-0 opacity-0" : "max-h-[2000px] opacity-100"
+                )}
+            >
+                {entries.map((entry) => (
+                    <DrawerNavigationItem
+                        key={entry.id}
+                        icon={<IconForView collectionOrView={entry.collection ?? entry.view} size={18} />}
+                        tooltipsOpen={!collapsed && tooltipsOpen}
+                        adminMenuOpen={adminMenuOpen}
+                        drawerOpen={drawerOpen}
+                        onClick={() => onItemClick?.(entry)}
+                        url={entry.url}
+                        name={entry.name}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}

package/src/core/DrawerNavigationItem.tsx

@@ -34,13 +34,13 @@ export function DrawerNavigationItem({
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
             className={({ isActive }: any) => cls("rounded-lg truncate",
-                "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
+                "hover:bg-surface-accent-300 hover:bg-opacity-75 hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-800/75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800/75",
                 "flex flex-row items-center mr-8",
                 // "transition-all ease-in-out delay-100 duration-300",
                 // drawerOpen ? "w-full" : "w-18",
                 drawerOpen ? "pl-4 h-10" : "pl-4 h-9",
                 "font-semibold text-xs",
-                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
+                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50 bg-surface-accent-200/60 dark:bg-surface-800/50" : ""
             )}
             to={url}
         >
@@ -49,8 +49,9 @@ export function DrawerNavigationItem({
 
             <div
                 className={cls(
+                    "text-text-primary dark:text-surface-200",
                     drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                    "ml-4 font-inherit text-inherit"
+                    "ml-4 font-inherit"
                 )}>
                 {name.toUpperCase()}
             </div>

package/src/core/EntityEditView.tsx

@@ -75,7 +75,7 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
     copy?: boolean;
     selectedTab?: string;
     parentCollectionIds: string[];
-    onValuesModified?: (modified: boolean, values:M) => void;
+    onValuesModified?: (modified: boolean, values: M) => void;
     onSaved?: (params: OnUpdateParams) => void;
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     layout?: "side_panel" | "full_screen";
@@ -88,9 +88,9 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
  * an entity is opened.
  */
 export function EntityEditView<M extends Record<string, any>, USER extends User>({
-                                                                                     entityId,
-                                                                                     ...props
-                                                                                 }: EntityEditViewProps<M>) {
+    entityId,
+    ...props
+}: EntityEditViewProps<M>) {
 
     const {
         entity,
@@ -123,7 +123,7 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
     }, [authController, entity, status]);
 
     if ((dataLoading && !initialDirtyValues) || (!entity || canEdit === undefined) && (status === "existing" || status === "copy")) {
-        return <CircularProgressCenter/>;
+        return <CircularProgressCenter />;
     }
 
     if (entityId && !entity && !initialDirtyValues) {
@@ -131,36 +131,36 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
     }
 
     return <EntityEditViewInner<M> {...props}
-                                   entityId={entityId}
-                                   entity={entity}
-                                   initialDirtyValues={initialDirtyValues as Partial<M>}
-                                   dataLoading={dataLoading}
-                                   status={status}
-                                   setStatus={setStatus}
-                                   canEdit={canEdit}
+        entityId={entityId}
+        entity={entity}
+        initialDirtyValues={initialDirtyValues as Partial<M>}
+        dataLoading={dataLoading}
+        status={status}
+        setStatus={setStatus}
+        canEdit={canEdit}
     />;
 }
 
 export function EntityEditViewInner<M extends Record<string, any>>({
-                                                                       path,
-                                                                       fullIdPath,
-                                                                       entityId,
-                                                                       selectedTab: selectedTabProp,
-                                                                       collection,
-                                                                       parentCollectionIds,
-                                                                       onValuesModified,
-                                                                       onSaved,
-                                                                       onTabChange,
-                                                                       entity,
-                                                                       initialDirtyValues,
-                                                                       dataLoading,
-                                                                       layout = "side_panel",
-                                                                       barActions,
-                                                                       status,
-                                                                       setStatus,
-                                                                       formProps,
-                                                                       canEdit
-                                                                   }: EntityEditViewProps<M> & {
+    path,
+    fullIdPath,
+    entityId,
+    selectedTab: selectedTabProp,
+    collection,
+    parentCollectionIds,
+    onValuesModified,
+    onSaved,
+    onTabChange,
+    entity,
+    initialDirtyValues,
+    dataLoading,
+    layout = "side_panel",
+    barActions,
+    status,
+    setStatus,
+    formProps,
+    canEdit
+}: EntityEditViewProps<M> & {
     entity?: Entity<M>,
     initialDirtyValues?: Partial<M>, // dirty cached entity in memory
     dataLoading: boolean,
@@ -312,7 +312,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         role="tabpanel">
         <ErrorBoundary>
             <EntityJsonPreview
-                values={formContext?.values ?? entity?.values ?? {}}/>
+                values={formContext?.values ?? entity?.values ?? {}} />
         </ErrorBoundary>
     </div>;
 
@@ -328,7 +328,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 key={`subcol_${subcollectionId}`}
                 role="tabpanel">
 
-                {globalLoading && <CircularProgressCenter/>}
+                {globalLoading && <CircularProgressCenter />}
 
                 {!globalLoading &&
                     (usedEntity && newFullPath
@@ -339,7 +339,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                             isSubCollection={true}
                             updateUrl={false}
                             {...subcollection}
-                            openEntityMode={layout}/>
+                            openEntityMode={layout} />
                         : <div className="flex items-center justify-center w-full h-full p-3">
                             <Typography variant={"label"}>
                                 You need to save your entity before
@@ -375,8 +375,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 className={"px-8 h-full overflow-auto"}
                 entity={entity}
                 path={path}
-                collection={collection}/>
-            <div className="h-16"/>
+                collection={collection} />
+            <div className="h-16" />
         </div>
     </div> : null;
 
@@ -396,7 +396,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         disabled={!canEdit}
         {...formProps}
         onEntityChange={(entity) => {
-            console.log("333 EntityEditView onEntityChange:", entity);
             setUsedEntity(entity);
             formProps?.onEntityChange?.(entity);
         }}
@@ -452,7 +451,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-900">
 
         {shouldShowTopBar && <div
-            className={cls("h-14 items-center flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
+            className={cls("h-14 items-center overflow-visible overflow-x-scroll w-full no-scrollbar border-b pl-2 pr-2 flex gap-2 bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
 
             {barActions?.({
                 path: fullIdPath ?? path,
@@ -461,16 +460,15 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 status
             })}
 
-            <div className={"flex-grow"}/>
+            <div className={"flex-grow"} />
 
             {pluginActionsTop}
 
             {globalLoading && <div className="self-center">
-                <CircularProgress size={"small"}/>
+                <CircularProgress size={"small"} />
             </div>}
 
             {hasAdditionalViews && <Tabs
-                className={"self-end"}
                 value={selectedTab}
                 onValueChange={(value) => {
                     onSideTabClick(value);
@@ -480,7 +478,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     disabled={!hasAdditionalViews}
                     value={JSON_TAB_VALUE}
                     className={"text-sm"}>
-                    <CodeIcon size={"small"}/>
+                    <CodeIcon size={"small"} />
                 </Tab>}
 
                 {customViewTabsStart}
@@ -501,7 +499,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
         {globalLoading
             ? <div className="w-full pt-12 pb-16 px-4 sm:px-8 md:px-10">
-                <CircularProgressCenter/>
+                <CircularProgressCenter />
             </div>
             : <>
                 {entityReadOnlyView}

package/src/core/SideDialogs.tsx

@@ -1,10 +1,11 @@
 import React, { useContext, useEffect, useState } from "react";
 import { useSideDialogsController } from "../hooks";
-import { SideDialogPanelProps } from "../types";
+import { EntitySidePanelProps, SideDialogPanelProps } from "../types";
 import { Sheet } from "@firecms/ui";
 import { useNavigationUnsavedChangesDialog } from "../internal/useUnsavedChangesDialog";
 import { ErrorBoundary } from "../components";
 import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
+import { EntitySidePanel } from "./EntitySidePanel";
 
 export type SideDialogController = {
     blocked: boolean,
@@ -157,7 +158,8 @@ function SideDialogView({
                         }}
                     >
                         <ErrorBoundary>
-                            {panel.component}
+                            {/* Lazy render EntitySidePanel from props for better performance */}
+                            {panel.component ?? (panel.additional ? <EntitySidePanel {...(panel.additional as EntitySidePanelProps)} /> : null)}
                         </ErrorBoundary>
                     </div>}
 

package/src/core/index.tsx

@@ -2,6 +2,7 @@ export * from "./FireCMS";
 
 export * from "./DefaultDrawer";
 export * from "./DrawerNavigationItem";
+export * from "./DrawerNavigationGroup";
 
 export * from "./field_configs";
 

package/src/form/PropertyFieldBinding.tsx

@@ -75,21 +75,21 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
 }) as typeof PropertyFieldBindingInternal;
 
 function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = any>
-({
-     propertyKey,
-     property,
-     context,
-     includeDescription,
-     underlyingValueHasChanged,
-     disabled: disabledProp,
-     partOfArray,
-     partOfBlock,
-     minimalistView,
-     autoFocus,
-     index,
-     size,
-     onPropertyChange,
- }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
+    ({
+        propertyKey,
+        property,
+        context,
+        includeDescription,
+        underlyingValueHasChanged,
+        disabled: disabledProp,
+        partOfArray,
+        partOfBlock,
+        minimalistView,
+        autoFocus,
+        index,
+        size,
+        onPropertyChange,
+    }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
 
     const authController = useAuthController();
     const customizationController = useCustomizationController();
@@ -175,7 +175,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                 return <FieldInternal
                     Component={Component as ComponentType<FieldProps>}
                     componentProps={componentProps}
-                    formexFieldProps={fieldProps}/>;
+                    formexFieldProps={fieldProps} />;
             }}
         </Field>
     );
@@ -185,39 +185,54 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
 type ResolvedPropertyFieldBindingProps<T extends CMSType = CMSType, M extends Record<string, any> = any> =
     Omit<PropertyFieldBindingProps<T, M>, "property">
     & {
-    property: ResolvedProperty<T>
-};
+        property: ResolvedProperty<T>
+    };
 
 function FieldInternal<T extends CMSType, CustomProps, M extends Record<string, any>>
-({
-     Component,
-     componentProps: {
-         propertyKey,
-         property,
-         includeDescription,
-         underlyingValueHasChanged,
-         partOfArray,
-         partOfBlock,
-         minimalistView,
-         autoFocus,
-         context,
-         disabled,
-         size,
-         onPropertyChange
-     },
-     formexFieldProps
- }:
- {
-     Component: ComponentType<FieldProps<T, any, M>>,
-     componentProps: ResolvedPropertyFieldBindingProps<T, M>,
-     formexFieldProps: FormexFieldProps<T, any>
- }) {
+    ({
+        Component,
+        componentProps: {
+            propertyKey,
+            property,
+            includeDescription,
+            underlyingValueHasChanged,
+            partOfArray,
+            partOfBlock,
+            minimalistView,
+            autoFocus,
+            context,
+            disabled,
+            size,
+            onPropertyChange
+        },
+        formexFieldProps
+    }:
+        {
+            Component: ComponentType<FieldProps<T, any, M>>,
+            componentProps: ResolvedPropertyFieldBindingProps<T, M>,
+            formexFieldProps: FormexFieldProps<T, any>
+        }) {
 
     const { plugins } = useCustomizationController();
 
     const customFieldProps: any = property.customProps;
     const value = formexFieldProps.field.value;
-    const error = getIn(formexFieldProps.form.errors, propertyKey);
+
+    // Get error for this field path, but avoid string indexing issues
+    // When an array has a string error like "Tags should have unique values",
+    // accessing errors["tags"]["0"] returns "T" (string indexing).
+    // We traverse the path manually and stop if we hit a string.
+    let error: any = formexFieldProps.form.errors;
+    for (const part of propertyKey.split(".")) {
+        if (error === undefined || error === null) break;
+        if (typeof error === "string") {
+            // Parent is a string error, children shouldn't inherit individual characters
+            error = undefined;
+            break;
+        }
+        error = error[part];
+    }
+
     const touched = getIn(formexFieldProps.form.touched, propertyKey);
 
     const showError: boolean = error &&
@@ -272,7 +287,7 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
     return (
         <ErrorBoundary>
 
-            <UsedComponent {...cmsFieldProps}/>
+            <UsedComponent {...cmsFieldProps} />
 
             {underlyingValueHasChanged && !isSubmitting &&
                 <Typography variant={"caption"} className={"ml-3.5"}>

package/src/form/components/StorageItemPreview.tsx

@@ -29,9 +29,10 @@ export function StorageItemPreview({
                                    }: StorageItemPreviewProps) {
 
     return (
-        <div className={cls(paperMixin,
+        <div className={cls(
             "relative border-box flex items-center justify-center",
             size === "large" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]",
+            paperMixin,
             className)}>
 
             {!placeholder && !disabled &&

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -129,7 +129,6 @@ export function ArrayOfReferencesFieldBinding({
             <Button
                 className="ml-3.5 my-4 justify-center text-left"
                 variant="text"
-                color="primary"
                 disabled={isSubmitting}
                 onClick={onEntryClick}>
                 <EditIcon size={"small"}/>

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -19,17 +19,17 @@ type DateTimeFieldProps = FieldProps<Date>;
  * @group Form fields
  */
 export function DateTimeFieldBinding({
-                                         propertyKey,
-                                         value,
-                                         setValue,
-                                         autoFocus,
-                                         error,
-                                         showError,
-                                         disabled,
-                                         touched,
-                                         property,
-                                         includeDescription
-                                     }: DateTimeFieldProps) {
+    propertyKey,
+    value,
+    setValue,
+    autoFocus,
+    error,
+    showError,
+    disabled,
+    touched,
+    property,
+    includeDescription
+}: DateTimeFieldProps) {
 
     const { locale } = useCustomizationController();
     const internalValue = value || null;
@@ -50,21 +50,22 @@ export function DateTimeFieldBinding({
                     mode={property.mode}
                     clearable={property.clearable}
                     locale={locale}
+                    timezone={property.timezone}
                     error={showError}
                     disabled={disabled}
                     label={<LabelWithIcon
                         icon={getIconForProperty(property, "small")}
                         required={property.validation?.required}
                         className={showError ? "text-red-500 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark"}
-                        title={property.name}/>}
+                        title={property.name} />}
                 />
             </PropertyIdCopyTooltip>
 
             <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
-                             error={error}
-                             disabled={disabled}
-                             property={property}/>
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property} />
 
         </>
     );

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -215,7 +215,6 @@ function MapEditView<T extends Record<string, any>>({
 
         <Button variant={"text"}
                 size={"small"}
-                color="primary"
                 className="w-full"
                 disabled={disabled}
                 startIcon={<AddIcon/>}