@firecms/core 3.0.0-canary.196 → 3.0.0-canary.198

package/dist/types/side_entity_controller.d.ts

@@ -1,6 +1,7 @@
 import { EntityCollection } from "./collections";
 import { ResolvedEntityCollection } from "./resolved_entities";
 import { Entity } from "./entities";
+import { EntityFormProps } from "../form";
 /**
  * Props used to open a side dialog
  * @group Hooks and utilities
@@ -55,6 +56,10 @@ export interface EntitySidePanelProps<M extends Record<string, any> = any> {
      * Should this panel close when saving
      */
     closeOnSave?: boolean;
+    /**
+     * Override some form properties
+     */
+    formProps?: Partial<EntityFormProps<M>>;
 }
 /**
  * Controller to open the side dialog displaying entity forms

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.196",
+  "version": "3.0.0-canary.198",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.196",
-    "@firecms/formex": "^3.0.0-canary.196",
-    "@firecms/ui": "^3.0.0-canary.196",
+    "@firecms/editor": "^3.0.0-canary.198",
+    "@firecms/formex": "^3.0.0-canary.198",
+    "@firecms/ui": "^3.0.0-canary.198",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -104,7 +104,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "e240d4d0920359c3eadf0dbecc895f791a205d84",
+  "gitHead": "c246dc2774f7ef1a91df3da792a217decbda700b",
   "publishConfig": {
     "access": "public"
   },

package/src/core/EntityEditView.tsx

@@ -13,7 +13,7 @@ import {
 } from "../hooks";
 import { CircularProgress, cls, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
 import { getEntityFromCache } from "../util/entity_cache";
-import { EntityForm, FormLayoutInner } from "../form";
+import { EntityForm, EntityFormProps, FormLayoutInner } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
@@ -47,6 +47,7 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     layout?: "side_panel" | "full_screen";
     barActions?: React.ReactNode;
+    formProps?: Partial<EntityFormProps<M>>
 }
 
 /**
@@ -172,6 +173,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        barActions,
                                                                        status,
                                                                        setStatus,
+                                                                       formProps,
                                                                    }: EntityEditViewProps<M> & {
     entity?: Entity<M>,
     cachedDirtyValues?: Partial<M>, // dirty cached entity in memory
@@ -331,20 +333,34 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         path={path}
         entityId={entityId ?? usedEntity?.id}
         onValuesModified={onValuesModified}
-        onSaved={onSaved ? (params) => onSaved({
-            ...params,
-            selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab,
-        }) : undefined}
         entity={entity}
-        cachedDirtyValues={cachedDirtyValues}
+        initialDirtyValues={cachedDirtyValues}
         openEntityMode={layout}
-        onFormContextReady={setFormContext}
         forceActionsAtTheBottom={actionsAtTheBottom}
         initialStatus={status}
-        onStatusChange={setStatus}
-        className={!mainViewVisible ? "hidden" : ""}
+        className={cls(!mainViewVisible ? "hidden" : "", formProps?.className)}
         EntityFormActionsComponent={EntityEditViewFormActions}
-        onEntityChange={setUsedEntity}
+        {...formProps}
+        onEntityChange={(entity) => {
+            setUsedEntity(entity);
+            formProps?.onEntityChange?.(entity);
+        }}
+        onStatusChange={(status) => {
+            setStatus(status);
+            formProps?.onStatusChange?.(status);
+        }}
+        onFormContextReady={(formContext) => {
+            setFormContext(formContext);
+            formProps?.onFormContextReady?.(formContext);
+        }}
+        onSaved={(params) => {
+            const res = {
+                ...params,
+                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab,
+            };
+            onSaved?.(res);
+            formProps?.onSaved?.(res);
+        }}
     />;
 
     const subcollectionTabs = subcollections && subcollections.map((subcollection) =>

package/src/core/EntityEditViewFormActions.tsx

@@ -18,7 +18,8 @@ export function EntityEditViewFormActions({
                                               disabled,
                                               status,
                                               pluginActions,
-                                              openEntityMode
+                                              openEntityMode,
+                                              showDefaultActions = true
                                           }: EntityFormActionsProps) {
 
     const authController = useAuthController();
@@ -40,7 +41,7 @@ export function EntityEditViewFormActions({
         return actions;
     }, [authController, collection, path]);
 
-    const formActions = entityActions.filter(a => a.includeInForm === undefined || a.includeInForm);
+    const formActions = showDefaultActions ? entityActions.filter(a => a.includeInForm === undefined || a.includeInForm) : [];
 
     return layout === "bottom"
         ? buildBottomActions({
@@ -55,7 +56,7 @@ export function EntityEditViewFormActions({
             status,
             sideDialogContext,
             pluginActions,
-            openEntityMode
+            openEntityMode,
         })
         : buildSideActions({
             savingError,
@@ -69,7 +70,7 @@ export function EntityEditViewFormActions({
             disabled,
             status,
             pluginActions,
-            openEntityMode
+            openEntityMode,
         });
 }
 
@@ -100,7 +101,7 @@ function buildBottomActions<M extends object>({
                                                   status,
                                                   sideDialogContext,
                                                   pluginActions,
-                                                  openEntityMode
+                                                  openEntityMode,
                                               }: ActionsViewProps<M>) {
 
     const canClose = openEntityMode === "side_panel";

package/src/core/EntitySidePanel.tsx

@@ -33,8 +33,6 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     const navigationController = useNavigationController();
     const sideDialogsController = useSideDialogContext();
 
-    console.log("sideDialogsController", sideDialogsController);
-
     const onClose = () => {
         if (props.onClose) {
             props.onClose();
@@ -153,6 +151,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                             collection
                         });
                     }}
+                    formProps={props.formProps}
                 />
             </ErrorBoundary>
 

package/src/form/EntityForm.tsx

@@ -25,11 +25,9 @@ import {
 
 import {
     saveEntityWithCallbacks,
-    useAuthController,
     useCustomizationController,
     useDataSource,
-    useFireCMSContext, useSideDialogsController,
-    useSideEntityController,
+    useFireCMSContext,
     useSnackbarController
 } from "../hooks";
 import { Alert, CheckIcon, Chip, cls, EditIcon, NotesIcon, paperMixin, Tooltip, Typography } from "@firecms/ui";
@@ -42,7 +40,6 @@ import { CustomIdField } from "../form/components/CustomIdField";
 import { ErrorFocus } from "../form/components/ErrorFocus";
 import { CustomFieldValidator, getYupEntitySchema } from "../form/validation";
 import { EntityFormActions, EntityFormActionsProps } from "./EntityFormActions";
-import { useSideDialogContext } from "../core";
 
 export type OnUpdateParams = {
     entity: Entity<any>,
@@ -53,7 +50,7 @@ export type OnUpdateParams = {
     collection: EntityCollection<any>
 };
 
-type EntityFormProps<M extends Record<string, any>> = {
+export type EntityFormProps<M extends Record<string, any>> = {
     path: string;
     collection: EntityCollection<M>;
     entityId?: string;
@@ -62,7 +59,7 @@ type EntityFormProps<M extends Record<string, any>> = {
     onIdChange?: (id: string) => void;
     onValuesModified?: (modified: boolean) => void;
     onSaved?: (params: OnUpdateParams) => void;
-    cachedDirtyValues?: Partial<M>; // dirty cached entity in memory
+    initialDirtyValues?: Partial<M>; // dirty cached entity in memory
     onFormContextReady?: (formContext: FormContext) => void;
     forceActionsAtTheBottom?: boolean;
     className?: string;
@@ -71,6 +68,16 @@ type EntityFormProps<M extends Record<string, any>> = {
     onEntityChange?: (entity: Entity<M>) => void;
     formex?: FormexController<M>;
     openEntityMode?: "side_panel" | "full_screen";
+    /**
+     * Include the copy and delete actions in the form
+     */
+    showDefaultActions?: boolean;
+
+    /**
+     * Display the entity path in the form
+     */
+    showEntityPath?: boolean;
+
     EntityFormActionsComponent?: React.FC<EntityFormActionsProps>;
 };
 
@@ -82,7 +89,7 @@ export function EntityForm<M extends Record<string, any>>({
                                                               onIdChange,
                                                               onSaved,
                                                               entity,
-                                                              cachedDirtyValues,
+                                                              initialDirtyValues,
                                                               onFormContextReady,
                                                               forceActionsAtTheBottom,
                                                               initialStatus,
@@ -91,7 +98,9 @@ export function EntityForm<M extends Record<string, any>>({
                                                               onEntityChange,
                                                               openEntityMode = "full_screen",
                                                               formex: formexProp,
-                                                              EntityFormActionsComponent = EntityFormActions
+                                                              EntityFormActionsComponent = EntityFormActions,
+                                                              showDefaultActions = true,
+                                                              showEntityPath = true
                                                           }: EntityFormProps<M>) {
 
     if (collection.customId && collection.formAutoSave) {
@@ -186,8 +195,8 @@ export function EntityForm<M extends Record<string, any>>({
     };
 
     const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
-        initialValues: (cachedDirtyValues ?? getInitialEntityValues(collection, path, status, entity)) as M,
-        initialDirty: Boolean(cachedDirtyValues),
+        initialValues: (initialDirtyValues ?? getInitialEntityValues(collection, path, status, entity)) as M,
+        initialDirty: Boolean(initialDirtyValues),
         onSubmit,
         onReset: () => {
             clearDirtyCache();
@@ -567,12 +576,12 @@ export function EntityForm<M extends Record<string, any>>({
                     variant={"h4"}>
                     {title ?? collection.singularName ?? collection.name}
                 </Typography>
-                <Alert color={"base"} className={"w-full"} size={"small"}>
+                {showEntityPath && <Alert color={"base"} className={"w-full"} size={"small"}>
                     <code
                         className={"text-xs select-all text-text-secondary dark:text-text-secondary-dark"}>
                         {entity?.path ?? path}/{entityId}
                     </code>
-                </Alert>
+                </Alert>}
             </div>
 
             {!collection.hideIdFromForm &&
@@ -608,7 +617,8 @@ export function EntityForm<M extends Record<string, any>>({
             pluginActions={pluginActions}
             forceActionsAtTheBottom={forceActionsAtTheBottom}
             EntityFormActionsComponent={EntityFormActionsComponent}
-            formContext={formContext}>
+            formContext={formContext}
+            showDefaultActions={showDefaultActions}>
             {formView}
         </FormLayoutInner>
     );
@@ -661,7 +671,8 @@ export function FormLayoutInner({
                                     className,
                                     forceActionsAtTheBottom,
                                     pluginActions,
-                                    EntityFormActionsComponent
+                                    EntityFormActionsComponent,
+                                    showDefaultActions
                                 }: {
     id?: string,
     formContext: FormContext,
@@ -670,6 +681,7 @@ export function FormLayoutInner({
     forceActionsAtTheBottom?: boolean,
     pluginActions?: React.ReactNode[],
     EntityFormActionsComponent: React.FC<EntityFormActionsProps>;
+    showDefaultActions?: boolean;
 }) {
 
     const formex = formContext.formex;
@@ -696,6 +708,7 @@ export function FormLayoutInner({
         status={status}
         pluginActions={pluginActions ?? []}
         openEntityMode={openEntityMode}
+        showDefaultActions={showDefaultActions}
     />;
 
     return (

package/src/form/EntityFormActions.tsx

@@ -15,6 +15,7 @@ export interface EntityFormActionsProps {
     status: "new" | "existing" | "copy";
     pluginActions: React.ReactNode[];
     openEntityMode: "side_panel" | "full_screen";
+    showDefaultActions?: boolean;
 }
 
 export function EntityFormActions({

package/src/internal/useBuildSideEntityController.tsx

@@ -260,6 +260,7 @@ const propsToSidePanel = (props: EntitySidePanelProps,
     const resolvedPanelProps: EntitySidePanelProps<any> = {
         ...props,
         path: resolvedPath,
+        formProps: props.formProps
     };
 
     const entityViewWidth = getEntityViewWidth(props, smallLayout);

package/src/types/side_dialogs_controller.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { EntityFormProps } from "../form";
 
 /**
  * Controller to open the side dialog
@@ -78,4 +79,5 @@ export interface SideDialogPanelProps {
      * Use this prop to store additional data in the panel
      */
     additional?: any;
+
 }

package/src/types/side_entity_controller.tsx

@@ -2,6 +2,7 @@ import { EntityCollection } from "./collections";
 import { ResolvedEntityCollection } from "./resolved_entities";
 import { Entity } from "./entities";
 import { EntityOverrides } from "./entity_overrides";
+import { EntityFormProps } from "../form";
 
 /**
  * Props used to open a side dialog
@@ -66,6 +67,10 @@ export interface EntitySidePanelProps<M extends Record<string, any> = any> {
      */
     closeOnSave?: boolean;
 
+    /**
+     * Override some form properties
+     */
+    formProps?: Partial<EntityFormProps<M>>;
 }
 
 /**