@firecms/core 3.0.0-canary.289 → 3.0.0-canary.290

package/src/form/PropertyFieldBinding.tsx

@@ -83,6 +83,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
      underlyingValueHasChanged,
      disabled: disabledProp,
      partOfArray,
+     partOfBlock,
      minimalistView,
      autoFocus,
      index,
@@ -93,10 +94,6 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
     const authController = useAuthController();
     const customizationController = useCustomizationController();
 
-    if(propertyKey === "created_by"){
-        console.log("Rendering field for created_by", {propertyKey, property, context});
-    }
-
     return (
         <Field
             key={propertyKey}
@@ -168,6 +165,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     context,
                     disabled,
                     partOfArray,
+                    partOfBlock,
                     minimalistView,
                     autoFocus,
                     size,
@@ -199,6 +197,7 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
          includeDescription,
          underlyingValueHasChanged,
          partOfArray,
+         partOfBlock,
          minimalistView,
          autoFocus,
          context,
@@ -261,6 +260,7 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
         disabled: disabled ?? false,
         underlyingValueHasChanged: underlyingValueHasChanged ?? false,
         partOfArray: partOfArray ?? false,
+        partOfBlock: partOfBlock ?? false,
         minimalistView: minimalistView ?? false,
         autoFocus: autoFocus ?? false,
         customProps: customFieldProps,

package/src/form/components/LocalChangesMenu.tsx

@@ -7,9 +7,12 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
+    DialogTitle,
     KeyboardArrowDownIcon,
     Menu,
-    MenuItem, VisibilityIcon,
+    MenuItem,
+    Typography,
+    VisibilityIcon,
     WarningIcon
 } from "@firecms/ui";
 import { FormexController } from "@firecms/formex";
@@ -108,17 +111,18 @@ export function LocalChangesMenu<M extends object>({
                 onOpenChange={setPreviewDialogOpen}
                 maxWidth={"4xl"}
             >
-                <DialogContent>
-                    <h3 className={"text-2xl mb-4"}>Preview Local Changes</h3>
-                    <p className={"mb-4"}>
+                <DialogTitle variant={"h6"}>Preview Local Changes</DialogTitle>
+                <DialogContent className={"my-4"}>
+                    <Typography variant={"body2"} className={"mb-4"}>
                         These are the local changes that will be applied to the form.
-                    </p>
+                    </Typography>
                     <div className={`border rounded-lg ${defaultBorderMixin}`} style={{
                         maxHeight: 520,
                         overflow: "auto"
                     }}>
                         <div className="p-4">
-                            <PropertyCollectionView data={localChangesData} properties={properties as ResolvedProperties}/>
+                            <PropertyCollectionView data={localChangesData}
+                                                    properties={properties as ResolvedProperties}/>
                         </div>
                     </div>
                 </DialogContent>

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -200,6 +200,7 @@ function BlockEntry({
             context,
             autoFocus,
             partOfArray: false,
+            partOfBlock: true,
             minimalistView: true,
             onPropertyChange: storeProps,
         }

package/src/hooks/useBuildNavigationController.tsx

@@ -149,26 +149,10 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
     const allPluginGroups = plugins?.flatMap(plugin => plugin.homePage?.navigationEntries ? plugin.homePage.navigationEntries.map(e => e.name) : []) ?? [];
     const pluginGroups = [...new Set(allPluginGroups)];
 
-    const onNavigationEntriesOrderUpdate = useCallback((entries: NavigationGroupMapping[]) => {
-        if (!plugins) {
-            return;
-        }
-        // remove all groups that have no entries
-        const filteredEntries = entries.filter(entry => entry.entries.length > 0);
-        if (plugins.some(plugin => plugin.homePage?.onNavigationEntriesUpdate)) {
-            plugins.forEach(plugin => {
-                if (plugin.homePage?.onNavigationEntriesUpdate) {
-                    plugin.homePage.onNavigationEntriesUpdate(filteredEntries);
-                }
-            });
-        }
-
-    }, [plugins]);
-
-    const computeTopNavigation = useCallback((collections: EntityCollection[], views: CMSView[], adminViews: CMSView[], viewsOrder?: string[]): NavigationResult => {
+    const computeTopNavigation = useCallback((collections: EntityCollection[], views: CMSView[], adminViews: CMSView[], viewsOrder?: string[], navigationGroupMappingsOverride?: NavigationGroupMapping[], onNavigationEntriesUpdateCallback?: (entries: NavigationGroupMapping[]) => void): NavigationResult => {
 
         const finalNavigationGroupMappings: NavigationGroupMapping[] = computeNavigationGroups({
-            navigationGroupMappings: navigationGroupMappings,
+            navigationGroupMappings: navigationGroupMappingsOverride ?? navigationGroupMappings,
             collections,
             views,
             plugins: plugins
@@ -209,7 +193,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
             ...(views ?? []).reduce((acc, view) => {
                 if (view.hideFromNavigation) return acc;
 
-                const pathKey = Array.isArray(view.path) ? view.path[0] : view.path;
+                const pathKey = view.path;
                 let groupName = getGroup(view); // Initial group
 
                 if (finalNavigationGroupMappings) {
@@ -237,7 +221,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
             ...(adminViews ?? []).reduce((acc, view) => {
                 if (view.hideFromNavigation) return acc;
 
-                const pathKey = Array.isArray(view.path) ? view.path[0] : view.path;
+                const pathKey = view.path;
                 const groupName = NAVIGATION_ADMIN_GROUP_NAME;
 
                 acc.push({
@@ -280,21 +264,62 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
             .map(e => e.group)
             .filter(Boolean) as string[];
 
+        // Preserve order from finalNavigationGroupMappings (persisted order)
+        const groupsFromMappings = finalNavigationGroupMappings.map(g => g.name);
+
+        // Add any additional groups not in mappings
+        const additionalGroups = collectedGroupsFromEntries.filter(g => !groupsFromMappings.includes(g));
+
         const allDefinedGroups = [
             ...(pluginGroups ?? []),
-            ...collectedGroupsFromEntries
+            ...groupsFromMappings,
+            ...additionalGroups
         ];
 
-        const uniqueGroups = [...new Set(allDefinedGroups)]
-            .sort((a, b) => groupOrderValue(a) - groupOrderValue(b));
+        // Remove duplicates while preserving order, then separate admin to the end
+        const uniqueGroupsArray = [...new Set(allDefinedGroups)];
+        const adminGroups = uniqueGroupsArray.filter(g => g === NAVIGATION_ADMIN_GROUP_NAME);
+        const nonAdminGroups = uniqueGroupsArray.filter(g => g !== NAVIGATION_ADMIN_GROUP_NAME);
+        const uniqueGroups = [...nonAdminGroups, ...adminGroups];
 
         return {
             allowDragAndDrop: plugins?.some(plugin => plugin.homePage?.allowDragAndDrop) ?? false,
             navigationEntries,
             groups: uniqueGroups,
-            onNavigationEntriesUpdate: onNavigationEntriesOrderUpdate,
+            onNavigationEntriesUpdate: onNavigationEntriesUpdateCallback!,
         };
-    }, [navigationGroupMappings, buildCMSUrlPath, buildUrlCollectionPath, pluginGroups, onNavigationEntriesOrderUpdate]);
+    }, [navigationGroupMappings, buildCMSUrlPath, buildUrlCollectionPath, pluginGroups]);
+
+    const onNavigationEntriesOrderUpdate = useCallback((entries: NavigationGroupMapping[]) => {
+        if (!plugins) {
+            return;
+        }
+        // remove all groups that have no entries
+        const filteredEntries = entries.filter(entry => entry.entries.length > 0);
+
+        // Immediately update the local topLevelNavigation with new mappings
+        if (collectionsRef.current && viewsRef.current) {
+            const updatedNav = computeTopNavigation(
+                collectionsRef.current,
+                viewsRef.current,
+                adminViewsRef.current ?? [],
+                viewsOrder,
+                filteredEntries,
+                onNavigationEntriesOrderUpdate
+            );
+            setTopLevelNavigation(updatedNav);
+        }
+
+        // Then persist to backend
+        if (plugins.some(plugin => plugin.homePage?.onNavigationEntriesUpdate)) {
+            plugins.forEach(plugin => {
+                if (plugin.homePage?.onNavigationEntriesUpdate) {
+                    plugin.homePage.onNavigationEntriesUpdate(filteredEntries);
+                }
+            });
+        }
+
+    }, [plugins, computeTopNavigation, viewsOrder]);
 
     const refreshNavigation = useCallback(async () => {
 
@@ -312,7 +337,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
                 ]
             );
 
-            const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder);
+            const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder, undefined, onNavigationEntriesOrderUpdate);
 
             let shouldUpdateTopLevelNav = false;
             if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
@@ -717,6 +742,7 @@ function computeNavigationGroups({
 
     let result = navigationGroupMappings;
 
+    // Merge plugin navigation entries
     result = plugins ? plugins?.reduce((acc, plugin) => {
         if (plugin.homePage?.navigationEntries) {
             plugin.homePage.navigationEntries.forEach((entry) => {
@@ -739,8 +765,54 @@ function computeNavigationGroups({
         return acc;
     }, [...(result ?? [])] as NavigationGroupMapping[]) : result;
 
+    // Track all entries that are already assigned to groups
+    const assignedEntries = new Set<string>();
+    if (result) {
+        result.forEach(group => {
+            group.entries.forEach(entry => assignedEntries.add(entry));
+        });
+    }
+
+    // Find collections and views that are NOT in any persisted group
+    const unassignedGroupMap: Record<string, string[]> = {};
+
+    // Check collections
+    (collections ?? []).forEach(collection => {
+        const entry = collection.id ?? collection.path;
+        if (!assignedEntries.has(entry)) {
+            const groupName = getGroup(collection);
+            if (!unassignedGroupMap[groupName]) unassignedGroupMap[groupName] = [];
+            unassignedGroupMap[groupName].push(entry);
+        }
+    });
+
+    // Check views
+    (views ?? []).forEach(view => {
+        const entry = view.path;
+        if (!assignedEntries.has(entry)) {
+            const groupName = getGroup(view);
+            if (!unassignedGroupMap[groupName]) unassignedGroupMap[groupName] = [];
+            unassignedGroupMap[groupName].push(entry);
+        }
+    });
+
+    // Merge unassigned entries into existing groups or create new groups
+    Object.entries(unassignedGroupMap).forEach(([groupName, entries]) => {
+        if (result) {
+            const existingGroup = result.find(g => g.name === groupName);
+            if (existingGroup) {
+                existingGroup.entries.push(...entries);
+            } else {
+                result.push({
+                    name: groupName,
+                    entries
+                });
+            }
+        }
+    });
+
     if (!result) {
-        // Convert views and collections to navigation group mappings, grouped by their group name
+        // No persisted data at all - create from scratch
         result = [];
         const groupMap: Record<string, string[]> = {};
 
@@ -755,12 +827,12 @@ function computeNavigationGroups({
         // Add views
         (views ?? []).forEach(view => {
             const name = getGroup(view);
-            const entry = Array.isArray(view.path) ? view.path[0] : view.path;
+            const entry = view.path;
             if (!groupMap[name]) groupMap[name] = [];
             groupMap[name].push(entry);
         });
 
-        // Convert groupMap to initialGroupMappings array
+        // Convert groupMap to result array
         result = Object.entries(groupMap).map(([name, entries]) => ({
             name,
             entries

package/src/types/fields.tsx

@@ -81,6 +81,11 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
      */
     partOfArray?: boolean;
 
+    /**
+     * Is this field part of a block
+     */
+    partOfBlock?: boolean;
+
     /**
      * Display the child properties directly, without being wrapped in an
      * extendable panel. Note that this will also hide the title of this property.
@@ -220,6 +225,11 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
      */
     partOfArray?: boolean;
 
+    /**
+     * Is this field part of a block
+     */
+    partOfBlock?: boolean;
+
     /**
      * Display the child properties directly, without being wrapped in an
      * extendable panel. Note that this will also hide the title of this property.

package/src/types/properties.ts

@@ -155,6 +155,10 @@ export interface BaseProperty<T extends CMSType, CustomProps = any> {
     /**
      * Should this property be editable. If set to true, the user will be able to modify the property and
      * save the new config. The saved config will then become the source of truth.
+     * Defaults to `true.
+     * This props is only useful when you are using the collection editor to modify collection
+     * configurations from the CMS itself. You can also use the `editable` prop in the
+     * `EntityCollection` interface to disable the edition of all properties in a collection.
      */
     editable?: boolean;
 
@@ -775,8 +779,16 @@ export type StorageConfig = {
     /**
      * Use client side image compression and resizing
      * Will only be applied to these MIME types: image/jpeg, image/png and image/webp
+     * @deprecated Use `imageResize` instead
      */
-    imageCompression?: ImageCompression;
+    imageCompression?: ImageResize;
+
+    /**
+     * Advanced image resizing and cropping configuration.
+     * Applied before upload to optimize storage and bandwidth.
+     * Only applies to image MIME types: image/jpeg, image/png, image/webp
+     */
+    imageResize?: ImageResize;
 
     /**
      * Specific metadata set in your uploaded file.
@@ -913,19 +925,36 @@ export type FileType =
     | "font/*"
     | string;
 
-export interface ImageCompression {
+export interface ImageResize {
     /**
-     * New image max height (ratio is preserved)
+     * Maximum width in pixels. Image will be scaled down proportionally if wider.
+     */
+    maxWidth?: number;
+
+    /**
+     * Maximum height in pixels. Image will be scaled down proportionally if taller.
      */
     maxHeight?: number;
 
     /**
-     * New image max width (ratio is preserved)
+     * Resize mode determines how the image fits within maxWidth/maxHeight bounds.
+     * - `contain`: Scale down to fit within bounds, preserving aspect ratio (default)
+     * - `cover`: Scale to fill bounds, preserving aspect ratio (may crop)
      */
-    maxWidth?: number;
+    mode?: 'contain' | 'cover';
+
+    /**
+     * Output format for the resized image.
+     * - `original`: Keep the original format (default)
+     * - `jpeg`: Convert to JPEG
+     * - `png`: Convert to PNG
+     * - `webp`: Convert to WebP
+     */
+    format?: 'original' | 'jpeg' | 'png' | 'webp';
 
     /**
-     * A number between 0 and 100. Used for the JPEG compression.(if no compress is needed, just set it to 100)
+     * Quality for lossy formats (JPEG, WebP). Number between 0 and 100.
+     * Higher is better quality but larger file size. Defaults to 80.
      */
     quality?: number;
 }

package/src/util/join_collections.ts

@@ -78,7 +78,6 @@ export function mergeCollection(target: EntityCollection,
                                 modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void
 ): EntityCollection {
 
-
     const subcollectionsMerged = joinCollectionLists(
         target?.subcollections ?? [],
         source?.subcollections ?? [],
@@ -132,8 +131,9 @@ function mergePropertyOrBuilder(target: PropertyOrBuilder, source: PropertyOrBui
         return target;
     } else {
         const mergedProperty = mergeDeep(target, source);
-        const targetEditable = Boolean(target.editable);
-        const sourceEditable = Boolean(source.editable);
+        const targetEditable = target.editable === undefined ? true : Boolean(target.editable);
+        const sourceEditable = source.editable === undefined ? true : Boolean(source.editable);
+
         if (source.dataType === "map" && source.properties) {
             const targetProperties = ("properties" in target ? target.properties : {}) as PropertiesOrBuilders;
             const sourceProperties = ("properties" in source ? source.properties : {}) as PropertiesOrBuilders;

package/src/util/make_properties_editable.ts

@@ -13,25 +13,3 @@ export function makePropertiesEditable(properties: Properties) {
     });
     return properties;
 }
-
-export function makePropertiesNonEditable(properties: PropertiesOrBuilders): PropertiesOrBuilders {
-    return Object.entries(properties).reduce((acc, [key, property]) => {
-        if (!isPropertyBuilder(property) && property.dataType === "map" && property.properties) {
-            const updated = {
-                ...property,
-                properties: makePropertiesNonEditable(property.properties as PropertiesOrBuilders)
-            };
-            acc[key] = updated;
-        }
-        if (isPropertyBuilder(property)) {
-            acc[key] = property;
-        } else {
-            acc[key] = {
-                ...property,
-                editable: false
-            };
-        }
-        return acc;
-    }, {} as PropertiesOrBuilders);
-
-}

package/src/util/useStorageUploadController.tsx

@@ -1,10 +1,10 @@
-import Resizer from "react-image-file-resizer";
+import Compressor from "compressorjs";
 import equal from "react-fast-compare";
 
 import {
     ArrayProperty,
     EntityValues,
-    ImageCompression,
+    ImageResize,
     Property,
     PropertyOrBuilder,
     ResolvedArrayProperty,
@@ -76,7 +76,9 @@ export function useStorageUploadController<M extends object>({
     const metadata: Record<string, any> | undefined = storage?.metadata;
     const size = multipleFilesSupported ? "medium" : "large";
 
-    const compression: ImageCompression | undefined = storage?.imageCompression;
+    // Support both new imageResize and deprecated imageCompression
+    const imageResize = storage?.imageResize;
+    const legacyCompression = storage?.imageCompression;
 
     const internalInitialValue: StorageFieldItem[] =
         getInternalInitialValue(multipleFilesSupported, value, metadata, size);
@@ -169,6 +171,14 @@ export function useStorageUploadController<M extends object>({
         }
     }, [internalValue, multipleFilesSupported, onChange, storage, storageSource]);
 
+    const onFileUploadError = useCallback((entry: StorageFieldItem) => {
+        console.debug("onFileUploadError", entry);
+
+        // Remove the failed entry from internalValue
+        const newValue = internalValue.filter(item => item.id !== entry.id);
+        setInternalValue(newValue);
+    }, [internalValue]);
+
     const onFilesAdded = useCallback(async (acceptedFiles: File[]) => {
 
         if (!acceptedFiles.length || disabled)
@@ -193,8 +203,8 @@ export function useStorageUploadController<M extends object>({
         if (multipleFilesSupported) {
             newInternalValue = [...internalValue,
                 ...(await Promise.all(acceptedFiles.map(async file => {
-                    if (compression && compressionFormat(file)) {
-                        file = await resizeAndCompressImage(file, compression)
+                    if ((imageResize || legacyCompression) && isImageFile(file)) {
+                        file = await resizeImage(file, imageResize, legacyCompression);
                     }
 
                     return {
@@ -206,9 +216,9 @@ export function useStorageUploadController<M extends object>({
                     } as StorageFieldItem;
                 })))];
         } else {
-            let file = acceptedFiles[0]
-            if (compression && compressionFormat(file)) {
-                file = await resizeAndCompressImage(file, compression)
+            let file = acceptedFiles[0];
+            if ((imageResize || legacyCompression) && isImageFile(file)) {
+                file = await resizeImage(file, imageResize, legacyCompression);
             }
 
             newInternalValue = [{
@@ -223,7 +233,7 @@ export function useStorageUploadController<M extends object>({
         // Remove either storage path or file duplicates
         newInternalValue = removeDuplicates(newInternalValue);
         setInternalValue(newInternalValue);
-    }, [disabled, fileNameBuilder, internalValue, metadata, multipleFilesSupported, size]);
+    }, [disabled, fileNameBuilder, internalValue, metadata, multipleFilesSupported, size, imageResize, legacyCompression]);
 
     return {
         internalValue,
@@ -232,6 +242,7 @@ export function useStorageUploadController<M extends object>({
         fileNameBuilder,
         storagePathBuilder,
         onFileUploadComplete,
+        onFileUploadError,
         onFilesAdded,
         multipleFilesSupported
     }
@@ -276,31 +287,57 @@ function getRandomId() {
     return Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER));
 }
 
-const supportedTypes: Record<string, string> = {
-    "image/jpeg": "JPEG",
-    "image/png": "PNG",
-    "image/webp": "WEBP"
+/**
+ * Check if a file is an image type supported for resizing
+ */
+function isImageFile(file: File): boolean {
+    return file.type === "image/jpeg" ||
+        file.type === "image/png" ||
+        file.type === "image/webp";
 }
-const compressionFormat = (file: File) => supportedTypes[file.type] ? supportedTypes[file.type] : null;
-
-const defaultQuality = 100;
-const resizeAndCompressImage = (file: File, compression: ImageCompression) => new Promise<File>((resolve) => {
 
-    const inputQuality = compression.quality === undefined ? defaultQuality : compression.quality;
-    const quality = inputQuality >= 0 ? inputQuality <= 100 ? inputQuality : 100 : 100;
-
-    const format = compressionFormat(file);
-    if (!format) {
-        throw Error("resizeAndCompressImage: Unsupported image format");
+/**
+ * Resize and compress an image using compressorjs.
+ * Supports both the new imageResize API and legacy imageCompression for backward compatibility.
+ */
+async function resizeImage(
+    file: File,
+    imageResize?: StorageConfig["imageResize"],
+    legacyCompression?: ImageResize
+): Promise<File> {
+    // Determine configuration (new API takes precedence)
+    const maxWidth = imageResize?.maxWidth ?? legacyCompression?.maxWidth;
+    const maxHeight = imageResize?.maxHeight ?? legacyCompression?.maxHeight;
+    const quality = (imageResize?.quality ?? legacyCompression?.quality ?? 80) / 100;
+    const mode = imageResize?.mode ?? "contain";
+
+    // Determine output format
+    let mimeType = file.type;
+    if (imageResize?.format && imageResize.format !== "original") {
+        mimeType = `image/${imageResize.format}`;
     }
-    Resizer.imageFileResizer(
-        file,
-        compression.maxWidth || Number.MAX_VALUE,
-        compression.maxHeight || Number.MAX_VALUE,
-        format,
-        quality,
-        0,
-        (file: string | Blob | File | ProgressEvent<FileReader>) => resolve(file as File),
-        "file"
-    )
-});
+
+    return new Promise<File>((resolve, reject) => {
+        new Compressor(file, {
+            quality,
+            maxWidth,
+            maxHeight,
+            mimeType,
+            // Use cover mode if specified (crops to fit)
+            // Otherwise use contain mode (scales to fit)
+            ...(mode === "cover" || mode === undefined ? {
+                width: maxWidth,
+                height: maxHeight,
+                resize: "cover" as const
+            } : {}),
+            success: (result) => {
+                const compressedFile = new File([result], file.name, {
+                    type: result.type,
+                    lastModified: Date.now(),
+                });
+                resolve(compressedFile);
+            },
+            error: reject,
+        });
+    });
+}