@firecms/core 3.0.1 → 3.1.0-canary.7d91b7c

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

@@ -105,7 +105,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     }, [collection?.name, setBlocked, setBlockedNavigationMessage]);
 
     if (!props || !collection) {
-        return <div className={"w-full"}/>;
+        return <div className={"w-full"} />;
     }
 
     return (
@@ -120,32 +120,34 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                     onValuesModified={onValuesModified}
                     onSaved={onUpdate}
                     barActions={({
-                                     status,
-                                     values
-                                 }) => <>
-                        <IconButton
-                            className="self-center"
-                            onClick={onClose}>
-                            <CloseIcon size={"small"}/>
-                        </IconButton>
-                        {allowFullScreen && <IconButton
-                            className="self-center"
-                            onClick={() => {
-                                const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
-                                saveEntityToMemoryCache(key, values);
-                                if (entityId)
-                                    navigate(location.pathname);
-                                else
-                                    navigate(location.pathname + "#new");
-                            }}>
-                            <OpenInFullIcon size={"small"}/>
-                        </IconButton>}
-                    </>}
+                        status,
+                        values
+                    }) => <>
+                            <IconButton
+                                className="self-center"
+                                size={"smallest"}
+                                onClick={onClose}>
+                                <CloseIcon size={"smallest"} />
+                            </IconButton>
+                            {allowFullScreen && <IconButton
+                                className="self-center"
+                                size={"smallest"}
+                                onClick={() => {
+                                    const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+                                    saveEntityToMemoryCache(key, values);
+                                    if (entityId)
+                                        navigate(location.pathname);
+                                    else
+                                        navigate(location.pathname + "#new");
+                                }}>
+                                <OpenInFullIcon size={"smallest"} />
+                            </IconButton>}
+                        </>}
                     onTabChange={({
-                                      entityId,
-                                      selectedTab,
-                                      collection,
-                                  }) => {
+                        entityId,
+                        selectedTab,
+                        collection,
+                    }) => {
                         sideEntityController.replace({
                             path,
                             entityId,

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ArrayProperty, FieldProps, Property, PropertyConfig, ResolvedProperty } from "../types";
+import { ArrayProperty, FieldProps, NumberProperty, Property, PropertyConfig, ResolvedProperty, StringProperty } from "../types";
 import {
     ArrayCustomShapedFieldBinding,
     ArrayOfReferencesFieldBinding,
@@ -397,14 +397,19 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
             return "custom_array";
         } else if (isPropertyBuilder(of)) {
             return "repeat";
-        } else if (of?.dataType === "string" && of.enumValues) {
-            return "multi_select";
-        } else if (of?.dataType === "number" && of.enumValues) {
-            return "multi_number_select";
-        } else if (of?.dataType === "string" && of.storage) {
-            return "multi_file_upload";
-        } else if (of?.dataType === "reference") {
-            return "multi_references";
+        } else if (of) {
+            const ofProperty = of as Property;
+            if (ofProperty.dataType === "string" && (ofProperty as StringProperty).enumValues) {
+                return "multi_select";
+            } else if (ofProperty.dataType === "number" && (ofProperty as NumberProperty).enumValues) {
+                return "multi_number_select";
+            } else if (ofProperty.dataType === "string" && (ofProperty as StringProperty).storage) {
+                return "multi_file_upload";
+            } else if (ofProperty.dataType === "reference") {
+                return "multi_references";
+            } else {
+                return "repeat";
+            }
         } else {
             return "repeat";
         }

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

@@ -181,30 +181,30 @@ export function getChanges<T extends object>(source: Partial<T>, comparison: Par
 }
 
 export function EntityForm<M extends Record<string, any>>({
-                                                              path,
-                                                              fullIdPath,
-                                                              entityId: entityIdProp,
-                                                              collection,
-                                                              onValuesModified,
-                                                              onIdChange,
-                                                              onSaved,
-                                                              entity,
-                                                              initialDirtyValues,
-                                                              onFormContextReady,
-                                                              forceActionsAtTheBottom,
-                                                              initialStatus,
-                                                              className,
-                                                              onStatusChange,
-                                                              onEntityChange,
-                                                              openEntityMode = "full_screen",
-                                                              formex: formexProp,
-                                                              disabled: disabledProp,
-                                                              Builder,
-                                                              EntityFormActionsComponent = EntityFormActions,
-                                                              showDefaultActions = true,
-                                                              showEntityPath = true,
-                                                              children
-                                                          }: EntityFormProps<M>) {
+    path,
+    fullIdPath,
+    entityId: entityIdProp,
+    collection,
+    onValuesModified,
+    onIdChange,
+    onSaved,
+    entity,
+    initialDirtyValues,
+    onFormContextReady,
+    forceActionsAtTheBottom,
+    initialStatus,
+    className,
+    onStatusChange,
+    onEntityChange,
+    openEntityMode = "full_screen",
+    formex: formexProp,
+    disabled: disabledProp,
+    Builder,
+    EntityFormActionsComponent = EntityFormActions,
+    showDefaultActions = true,
+    showEntityPath = true,
+    children
+}: EntityFormProps<M>) {
 
     if (collection.customId && collection.formAutoSave) {
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
@@ -455,12 +455,12 @@ export function EntityForm<M extends Record<string, any>>({
     }, [entityId, path, snackbarController]);
 
     const saveEntity = ({
-                            values,
-                            previousValues,
-                            entityId,
-                            collection,
-                            path
-                        }: {
+        values,
+        previousValues,
+        entityId,
+        collection,
+        path
+    }: {
         collection: EntityCollection<M>,
         path: string,
         entityId: string | undefined,
@@ -493,13 +493,13 @@ export function EntityForm<M extends Record<string, any>>({
     };
 
     const onSaveEntityRequest = async ({
-                                           collection,
-                                           path,
-                                           entityId,
-                                           values,
-                                           previousValues,
-                                           autoSave
-                                       }: EntityFormSaveParams<M>): Promise<void> => {
+        collection,
+        path,
+        entityId,
+        values,
+        previousValues,
+        autoSave
+    }: EntityFormSaveParams<M>): Promise<void> => {
         if (!status)
             return;
         if (autoSave) {
@@ -567,6 +567,7 @@ export function EntityForm<M extends Record<string, any>>({
     }, [snackbarController]);
 
     const pluginActions: React.ReactNode[] = [];
+    const pluginBeforeTitle: React.ReactNode[] = [];
     const plugins = customizationController.plugins;
 
     const actionsDisabled = disabled || formex.isSubmitting || (status === "existing" && !formex.dirty) || Boolean(disabledProp);
@@ -590,6 +591,12 @@ export function EntityForm<M extends Record<string, any>>({
                     key={`actions_${plugin.key}`} {...actionProps} />
                 : null
         )).filter(Boolean));
+        pluginBeforeTitle.push(...plugins.map((plugin) => (
+            plugin.form?.BeforeTitle
+                ? <plugin.form.BeforeTitle
+                    key={`before_title_${plugin.key}`} {...actionProps} />
+                : null
+        )).filter(Boolean));
     }
 
     const titlePropertyKey = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
@@ -631,17 +638,17 @@ export function EntityForm<M extends Record<string, any>>({
     const modified = formex.dirty;
 
     const uniqueFieldValidator: CustomFieldValidator = useCallback(({
-                                                                        name,
-                                                                        value
-                                                                    }) => dataSource.checkUniqueField(path, name, value, entityId, collection),
+        name,
+        value
+    }) => dataSource.checkUniqueField(path, name, value, entityId, collection),
         [dataSource, path, entityId]);
 
     const validationSchema = useMemo(() => entityId
-            ? getYupEntitySchema(
-                entityId,
-                resolvedCollection.properties,
-                uniqueFieldValidator)
-            : undefined,
+        ? getYupEntitySchema(
+            entityId,
+            resolvedCollection.properties,
+            uniqueFieldValidator)
+        : undefined,
         [entityId, resolvedCollection.properties, uniqueFieldValidator]);
 
     useOnAutoSave(autoSave, formex, lastSavedValues, save);
@@ -699,8 +706,8 @@ export function EntityForm<M extends Record<string, any>>({
 
                         return (
                             <FormEntry propertyKey={key}
-                                       widthPercentage={widthPercentage}
-                                       key={`field_${key}`}>
+                                widthPercentage={widthPercentage}
+                                key={`field_${key}`}>
                                 <PropertyFieldBinding {...cmsFormFieldProps} />
                             </FormEntry>
                         );
@@ -713,7 +720,7 @@ export function EntityForm<M extends Record<string, any>>({
                             throw new Error("When using additional fields you need to provide a Builder or a value");
                         }
                         const child = Builder
-                            ? <Builder entity={entity} context={context}/>
+                            ? <Builder entity={entity} context={context} />
                             : <div className={"w-full"}>
                                 {additionalField.value?.({
                                     entity,
@@ -725,9 +732,9 @@ export function EntityForm<M extends Record<string, any>>({
                             <div key={`additional_${key}`} className={"w-full"}>
                                 <LabelWithIconAndTooltip
                                     propertyKey={key}
-                                    icon={<NotesIcon size={"small"}/>}
+                                    icon={<NotesIcon size={"small"} />}
                                     title={additionalField.name}
-                                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"} />
                                 <div
                                     className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
                                     <ErrorBoundary>
@@ -749,6 +756,8 @@ export function EntityForm<M extends Record<string, any>>({
 
     const formView = <ErrorBoundary>
         <>
+            {pluginBeforeTitle}
+
             {!Builder && <div className={"w-full py-2 flex flex-col items-start my-4 lg:my-6"}>
                 <Typography
                     className={"my-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-6" : "")}
@@ -777,22 +786,22 @@ export function EntityForm<M extends Record<string, any>>({
 
             {!Builder && !collection.hideIdFromForm &&
                 <CustomIdField customId={collection.customId}
-                               entityId={entityId}
-                               status={status}
-                               onChange={setEntityId}
-                               error={entityIdError}
-                               loading={customIdLoading}
-                               entity={entity}/>
+                    entityId={entityId}
+                    status={status}
+                    onChange={setEntityId}
+                    error={entityIdError}
+                    loading={customIdLoading}
+                    entity={entity} />
             }
 
             {entityId && formContext && <>
                 <div className="mt-12 flex flex-col gap-8" ref={formRef}>
                     {formFields()}
-                    <ErrorFocus containerRef={formRef}/>
+                    <ErrorFocus containerRef={formRef} />
                 </div>
             </>}
 
-            {forceActionsAtTheBottom && <div className="h-16"/>}
+            {forceActionsAtTheBottom && <div className="h-16" />}
         </>
     </ErrorBoundary>;
 
@@ -852,12 +861,12 @@ export function EntityForm<M extends Record<string, any>>({
                             {formex.dirty
                                 ? <Tooltip title={"This form has been modified"}>
                                     <Chip size={"small"} className={"py-1"} colorScheme={"orangeDarker"}>
-                                        <EditIcon size={"smallest"}/>
+                                        <EditIcon size={"smallest"} />
                                     </Chip>
                                 </Tooltip>
                                 : <Tooltip title={"The current form is in sync with the database"}>
                                     <Chip size={"small"} className={"py-1"}>
-                                        <CheckIcon size={"smallest"}/>
+                                        <CheckIcon size={"smallest"} />
                                     </Chip>
                                 </Tooltip>}
                         </div>