@firecms/core 3.0.0-canary.109 → 3.0.0-canary.110

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.109",
+    "version": "3.0.0-canary.110",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,9 +46,9 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/editor": "^3.0.0-canary.109",
-        "@firecms/formex": "^3.0.0-canary.109",
-        "@firecms/ui": "^3.0.0-canary.109",
+        "@firecms/editor": "^3.0.0-canary.110",
+        "@firecms/formex": "^3.0.0-canary.110",
+        "@firecms/ui": "^3.0.0-canary.110",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.1.1",
         "clsx": "^2.1.1",
@@ -100,7 +100,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "ad45014069302bfff4dfc61065f1d193742ac0ca",
+    "gitHead": "24781d95e840c68233d4529ff1f36f6cdc261f95",
     "publishConfig": {
         "access": "public"
     },

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -1,4 +1,4 @@
-import { ArrowForwardIcon, cardClickableMixin, cardMixin, cls, focusedMixin, Typography, } from "@firecms/ui";
+import { ArrowForwardIcon, cardClickableMixin, cardMixin, cls, Typography, } from "@firecms/ui";
 
 import { Link } from "react-router-dom";
 
@@ -21,7 +21,6 @@ export function SmallNavigationCard({
                 tabIndex={0}
                 className={cls(cardMixin,
                     cardClickableMixin,
-                    focusedMixin,
                     "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit visited:dark:text-inherit hover:text-inherit hover:dark:text-inherit ")}
                 to={url}
             >

package/src/core/DefaultAppBar.tsx

@@ -124,7 +124,7 @@ export const DefaultAppBar = function DefaultAppBar({
                             {typeof title === "string"
                                 ? <Typography variant="subtitle1"
                                               noWrap
-                                              className={cls("!font-medium", drawerOpen ? "ml-2" : "")}>
+                                              className={cls("transition-all", drawerOpen ? "ml-2" : "")}>
                                     {title}
                                 </Typography>
                                 : title}

package/src/core/EntityEditView.tsx

@@ -307,7 +307,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             sideEntityController.replace({
                 path,
                 entityId: updatedEntity.id,
-                selectedSubPath: selectedTabRef.current,
+                selectedSubPath: MAIN_TAB_VALUE === selectedTabRef.current ? undefined : selectedTabRef.current,
                 updateUrl: true,
                 collection,
             });
@@ -884,51 +884,54 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     function buildForm() {
 
-        let form = <div className="h-full overflow-auto">
+        let form = <>
 
             {pluginActions.length > 0 && <div
                 className={cls("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-slate-200 dark:bg-opacity-60 dark:bg-slate-800 backdrop-blur-md")}>
                 {pluginActions}
             </div>}
 
-            <div className="pt-12 pb-16 pl-8 pr-8 md:pl-10 md:pr-10">
-                <div
-                    className={`w-full py-2 flex flex-col items-start mt-${4 + (pluginActions ? 8 : 0)} lg:mt-${8 + (pluginActions ? 8 : 0)} mb-8`}>
+            <div className="h-full overflow-auto">
 
-                    <Typography
-                        className={"mt-4 flex-grow line-clamp-1 " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
-                        variant={"h4"}>{title ?? inputCollection.singularName ?? inputCollection.name}
-                    </Typography>
-                    <Alert color={"base"} className={"w-full"} size={"small"}>
-                        <code className={"text-xs select-all"}>{path}/{entityId}</code>
-                    </Alert>
-                </div>
+                <div className="pt-12 pb-16 pl-8 pr-8 md:pl-10 md:pr-10">
+                    <div
+                        className={`w-full py-2 flex flex-col items-start mt-${4 + (pluginActions ? 8 : 0)} lg:mt-${8 + (pluginActions ? 8 : 0)} mb-8`}>
+
+                        <Typography
+                            className={"mt-4 flex-grow line-clamp-1 " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
+                            variant={"h4"}>{title ?? inputCollection.singularName ?? inputCollection.name}
+                        </Typography>
+                        <Alert color={"base"} className={"w-full"} size={"small"}>
+                            <code className={"text-xs select-all"}>{path}/{entityId}</code>
+                        </Alert>
+                    </div>
 
-                {!collection.hideIdFromForm &&
-                    <CustomIdField customId={inputCollection.customId}
-                                   entityId={entityId}
-                                   status={status}
-                                   onChange={setEntityId}
-                                   error={entityIdError}
-                                   loading={customIdLoading}
-                                   entity={entity}/>}
+                    {!collection.hideIdFromForm &&
+                        <CustomIdField customId={inputCollection.customId}
+                                       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}>
+                    {entityId && formContext && <>
+                        <div className="mt-12 flex flex-col gap-8"
+                             ref={formRef}>
 
-                        {formFields}
+                            {formFields}
 
-                        <ErrorFocus containerRef={formRef}/>
+                            <ErrorFocus containerRef={formRef}/>
 
-                    </div>
+                        </div>
 
-                    <div className="h-14"/>
+                        <div className="h-14"/>
 
-                </>}
+                    </>}
 
+                </div>
             </div>
-        </div>;
+        </>;
 
         if (plugins) {
             plugins.forEach((plugin: FireCMSPlugin) => {
@@ -1058,7 +1061,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                         role="tabpanel"
                         hidden={!mainViewVisible}
                         id={`form_${path}`}
-                        className={" w-full"}>
+                        className={"relative w-full"}>
 
                         {globalLoading
                             ? <CircularProgressCenter/>

package/src/core/SideDialogs.tsx

@@ -94,6 +94,7 @@ function SideDialogView({
     const handleDrawerCloseOk = () => {
         setBlocked(false);
         setDrawerCloseRequested(false);
+        console.log("handleDrawerCloseOk");
         sideDialogsController.close();
         panel?.onClose?.();
     };
@@ -103,9 +104,11 @@ function SideDialogView({
     };
 
     const onCloseRequest = (force?: boolean) => {
+        console.log("onCloseRequest", blocked, force);
         if (blocked && !force) {
             setDrawerCloseRequested(true);
         } else {
+            console.log("onCloseRequest closing");
             sideDialogsController.close();
             panel?.onClose?.();
         }

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -1,3 +1,4 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
     FieldHelperText,
     FieldProps,
@@ -7,12 +8,12 @@ import {
     useStorageSource
 } from "../../index";
 import { cls, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
-import { FireCMSEditor } from "@firecms/editor";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { resolveStorageFilenameString, resolveStoragePathString } from "../../util/storage";
+import { FireCMSEditor, FireCMSEditorProps } from "@firecms/editor";
+import { resolveStorageFilenameString, resolveStoragePathString } from "../../util";
 
 interface MarkdownEditorFieldProps {
     highlight?: { from: number, to: number };
+    editorProps?: Partial<FireCMSEditorProps>
 }
 
 export function MarkdownEditorFieldBinding({
@@ -27,10 +28,10 @@ export function MarkdownEditorFieldBinding({
                                                isSubmitting,
                                                context,
                                                customProps,
-                                               ...props
                                            }: FieldProps<string, MarkdownEditorFieldProps>) {
 
     const highlight = customProps?.highlight;
+    const editorProps = customProps?.editorProps;
     const storageSource = useStorageSource();
     const storage = property.storage;
 
@@ -108,7 +109,9 @@ export function MarkdownEditorFieldBinding({
                 throw new Error("Error uploading image");
             }
             return url;
-        }}/>;
+        }}
+        {...editorProps}
+        />;
 
     if (minimalistView)
         return editor;

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -16,7 +16,6 @@ import {
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundMixin,
-    focusedMixin,
     Typography
 } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
@@ -198,7 +197,6 @@ function FileDropComponent({
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 dropZoneClasses,
                 multipleFilesSupported && internalValue.length ? "" : "flex",
-                focusedMixin,
                 {
                     [nonActiveDropClasses]: !isDragActive,
                     [activeDropClasses]: isDragActive,
@@ -256,7 +254,7 @@ function FileDropComponent({
                                     ref={provided.innerRef}
                                     {...provided.draggableProps}
                                     {...provided.dragHandleProps}
-                                    className={cls(focusedMixin, "rounded-md")}
+                                    className={cls("rounded-md")}
                                     style={{
                                         ...provided.draggableProps.style
                                     }}

package/src/hooks/data/save.ts

@@ -121,7 +121,6 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
         previousValues,
         status
     }).then((entity) => {
-        console.log("Entity saved");
         try {
             if (callbacks?.onSaveSuccess) {
                 const resolvedCollection = resolveCollection<M>({

package/src/internal/useBuildSideEntityController.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from "react";
 import {
     EntityCollection,
     EntitySidePanelProps,
-    NavigationController, PropertyConfig,
+    NavigationController,
     ResolvedProperty,
     SideDialogPanelProps,
     SideDialogsController,
@@ -227,12 +227,14 @@ const propsToSidePanel = (props: EntitySidePanelProps<any>,
             path: resolvedPath,
         };
 
+        const entityViewWidth = getEntityViewWidth(props, smallLayout);
+
         return {
             key: `${props.path}/${props.entityId}`,
             component: <EntitySidePanel {...resolvedPanelProps}/>,
             urlPath: newPath,
             parentUrlPath: buildUrlCollectionPath(collectionPath),
-            width: getEntityViewWidth(props, smallLayout),
+            width: entityViewWidth,
             onClose: props.onClose
         };
     }

package/src/internal/useUnsavedChangesDialog.tsx

@@ -84,8 +84,10 @@ export function UnsavedChangesDialog({
 
     return (
         <Dialog
+            onEscapeKeyDown={() => {
+                handleCancel();
+            }}
             open={open}
-            onOpenChange={(open) => open ? handleCancel() : handleOk()}
         >
             <DialogContent>
                 <Typography variant={"h6"}>{title}</Typography>