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

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

@@ -328,14 +328,7 @@ export function EntityForm<M extends Record<string, any>>({
         return [initialValues, initialDirty];
     }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues, initialDirtyValues]);
 
-    const localChangesData = useMemo(() => {
-        if (!localChangesDataRaw) {
-            return undefined;
-        }
-        return getChanges(localChangesDataRaw, initialValues);
-    }, [localChangesDataRaw, initialValues]);
-
-    const hasLocalChanges = !localChangesCleared && localChangesData && Object.keys(localChangesData).length > 0;
+    const hasLocalChanges = !localChangesCleared && localChangesDataRaw && Object.keys(localChangesDataRaw).length > 0;
 
     const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
         initialValues: initialValues as M,
@@ -851,7 +844,7 @@ export function EntityForm<M extends Record<string, any>>({
                                 <LocalChangesMenu
                                     cacheKey={status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId}
                                     properties={resolvedCollection.properties}
-                                    localChangesData={localChangesData as Partial<M>}
+                                    cachedData={localChangesDataRaw as Partial<M>}
                                     formex={formex}
                                     onClearLocalChanges={() => setLocalChangesCleared(true)}
                                 />}
@@ -863,7 +856,7 @@ export function EntityForm<M extends Record<string, any>>({
                                     </Chip>
                                 </Tooltip>
                                 : <Tooltip title={"The current form is in sync with the database"}>
-                                    <Chip size={"small"} className={"py-1"} >
+                                    <Chip size={"small"} className={"py-1"}>
                                         <CheckIcon size={"smallest"}/>
                                     </Chip>
                                 </Tooltip>}

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

@@ -24,14 +24,14 @@ import { PropertyCollectionView } from "../../components/PropertyCollectionView"
 
 interface LocalChangesMenuProps<M extends object> {
     cacheKey: string;
-    localChangesData: Partial<M>;
+    cachedData: Partial<M>;
     formex: FormexController<M>;
     onClearLocalChanges?: () => void;
     properties: ResolvedProperties<M>;
 }
 
 export function LocalChangesMenu<M extends object>({
-                                                       localChangesData,
+                                                       cachedData,
                                                        formex,
                                                        onClearLocalChanges,
                                                        cacheKey,
@@ -51,10 +51,10 @@ export function LocalChangesMenu<M extends object>({
     };
 
     const handleApply = () => {
-        const mergedValues = mergeDeep(formex.values, localChangesData);
+        const mergedValues = mergeDeep(formex.values, cachedData);
         const touched = { ...formex.touched };
-        const previewKeys = flattenKeys(localChangesData);
-        previewKeys.forEach((key) => {
+        const cachedKeys = flattenKeys(cachedData);
+        cachedKeys.forEach((key) => {
             touched[key] = true;
         });
 
@@ -121,7 +121,7 @@ export function LocalChangesMenu<M extends object>({
                         overflow: "auto"
                     }}>
                         <div className="p-4">
-                            <PropertyCollectionView data={localChangesData}
+                            <PropertyCollectionView data={cachedData}
                                                     properties={properties as ResolvedProperties}/>
                         </div>
                     </div>

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/components/StorageUploadProgress.tsx

@@ -11,7 +11,8 @@ export interface StorageUploadItemProps {
     entry: StorageFieldItem,
     onFileUploadComplete: (value: string,
                            entry: StorageFieldItem,
-                           metadata?: any) => Promise<void>;
+                           metadata?: any,
+                           uploadedUrl?: string) => Promise<void>;
     imageSize: number;
     simple: boolean;
 }
@@ -47,9 +48,9 @@ export function StorageUploadProgress({
             path: storagePath,
             metadata
         })
-            .then(async ({ path }) => {
+            .then(async ({ path, storageUrl }) => {
                 console.debug("Upload successful", path);
-                await onFileUploadComplete(path, entry, metadata);
+                await onFileUploadComplete(path, entry, metadata, storageUrl);
                 if (mounted.current)
                     setLoading(false);
             })

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/>}