@firecms/core 3.0.0-canary.250 → 3.0.0-canary.251

package/dist/types/collections.d.ts

@@ -61,7 +61,7 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * e.g. 'account_tree' or 'person'.
      * Find all the icons in https://firecms.co/docs/icons
      */
-    icon?: string;
+    icon?: string | React.ReactNode;
     /**
      * Optional field used to group top level navigation entries under a~
      * navigation view. If you set this value in a subcollection it has no

package/dist/types/navigation.d.ts

@@ -172,7 +172,7 @@ export interface CMSView {
      * e.g. 'account_tree' or 'person'
      * Find all the icons in https://firecms.co/docs/icons
      */
-    icon?: string;
+    icon?: string | React.ReactNode;
     /**
      * Should this view be hidden from the main navigation panel.
      * It will still be accessible if you reach the specified path

package/dist/util/icons.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import { IconColor } from "@firecms/ui";
-export declare function getIcon(iconKey?: string, className?: string, color?: IconColor, size?: "smallest" | "small" | "medium" | "large" | number): React.ReactElement | undefined;
+export declare function getIcon(iconKey?: string | React.ReactNode, className?: string, color?: IconColor, size?: "smallest" | "small" | "medium" | "large" | number): React.ReactElement | undefined;
 export type IconViewProps = {
     path: string;
     name: string;
     singularName?: string;
     group?: string;
-    icon?: string;
+    icon?: string | React.ReactNode;
 };
 export declare const IconForView: React.NamedExoticComponent<{
     collectionOrView?: IconViewProps;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.250",
+  "version": "3.0.0-canary.251",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,9 +53,9 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.0-canary.250",
-    "@firecms/formex": "^3.0.0-canary.250",
-    "@firecms/ui": "^3.0.0-canary.250",
+    "@firecms/editor": "^3.0.0-canary.251",
+    "@firecms/formex": "^3.0.0-canary.251",
+    "@firecms/ui": "^3.0.0-canary.251",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -107,7 +107,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "946e1f4f5695190e903af3a71dd7111accfc1efa",
+  "gitHead": "b7b0d3730e3c3bea284f1d6f482ca038282fb554",
   "publishConfig": {
     "access": "public"
   },

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 
 import { useCustomizationController, useFireCMSContext } from "../../hooks";
-import { PluginHomePageActionsProps, NavigationEntry } from "../../types";
+import { NavigationEntry, PluginHomePageActionsProps } from "../../types";
 import { IconForView } from "../../util";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
 import { IconButton, StarIcon } from "@firecms/ui";
@@ -31,7 +31,7 @@ export function NavigationCardBinding({
                                           description,
                                           onClick,
                                           type,
-                                          shrink // <-- add shrink prop
+                                          shrink
                                       }: NavigationEntry & {
     onClick?: () => void,
     shrink?: boolean // <-- add shrink prop type

package/src/form/components/StorageItemPreview.tsx

@@ -30,7 +30,7 @@ export function StorageItemPreview({
 
     return (
         <div className={cls(paperMixin,
-            "relative m-4 border-box flex items-center justify-center",
+            "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]",
             className)}>
 

package/src/form/components/StorageUploadProgress.tsx

@@ -79,7 +79,7 @@ export function StorageUploadProgress({
     }, [entry.file, entry.fileName, upload]);
 
     if (simple) {
-        return <div className={`m-4 w-${imageSize} h-${imageSize}`}>
+        return <div className={`w-${imageSize} h-${imageSize}`}>
 
             {loading && <Skeleton className={`w-${imageSize} h-${imageSize}`}/>}
 
@@ -88,11 +88,11 @@ export function StorageUploadProgress({
     return (
 
         <div className={cls(paperMixin,
-            "relative m-4 border-box flex items-center justify-center",
+            "p-4 relative border-box flex items-center justify-center",
             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 
             {loading &&
-                <Skeleton className="m-4 w-full h-full"/>}
+                <Skeleton className="w-full h-full"/>}
 
             {error && <ErrorView title={"Error uploading file"}
                                  error={error}/>}

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -157,13 +157,11 @@ function SortableStorageItem({
                                  id,
                                  entry,
                                  property,
-                                 name,
                                  metadata,
                                  storagePathBuilder,
                                  onFileUploadComplete,
                                  onClear,
                                  disabled,
-                                 isSortable // This prop might be redundant if SortableContext is always used for multiple items
                              }: SortableStorageItemProps) {
 
     const {
@@ -178,8 +176,7 @@ function SortableStorageItem({
     const style: React.CSSProperties = {
         transform: CSS.Transform.toString(transform),
         transition,
-        zIndex: isDragging ? 100 : undefined, // Higher z-index when dragging
-        opacity: isDragging ? 0.8 : 1 // Slight opacity for dragged item
+        zIndex: isDragging ? 100 : undefined
     };
 
     const getImageSizeNumber = (previewSize: PreviewSize): number => {
@@ -187,9 +184,9 @@ function SortableStorageItem({
             case "small":
                 return 40;
             case "medium":
-                return 118; // As per original logic for multiple items
+                return 118;
             case "large":
-                return 220; // As per original logic for single item
+                return 220;
             default:
                 return 118;
         }
@@ -225,7 +222,7 @@ function SortableStorageItem({
             style={style}
             {...attributes}
             {...listeners}
-            className={cls("rounded-md m-1")} // Added margin for spacing between items
+            className={cls("rounded-md m-1")}
             tabIndex={-1}
         >
             {child}
@@ -247,11 +244,11 @@ function FileDropComponent({
                                onFileUploadComplete,
                                name,
                                helpText,
-                               isDndItemDragging // New prop to disable dropzone when internal D&D is active
+                               isDndItemDragging
                            }: {
     storage: StorageConfig,
     disabled: boolean,
-    onFilesAdded: (acceptedFiles: File[]) => Promise<void>, // useStorageUploadController returns Promise<void>
+    onFilesAdded: (acceptedFiles: File[]) => Promise<void>,
     multipleFilesSupported: boolean,
     autoFocus: boolean,
     internalValue: StorageFieldItem[],
@@ -278,7 +275,7 @@ function FileDropComponent({
                 ...acc,
                 [ext]: []
             }), {}) : undefined,
-            disabled: disabled || isDndItemDragging, // Disable if form field is disabled OR an internal item is being dragged
+            disabled: disabled || isDndItemDragging,
             noDragEventsBubbling: true,
             maxSize: storage.maxSize,
             onDrop: onFilesAdded,
@@ -311,7 +308,7 @@ function FileDropComponent({
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "",
                 dropZoneClasses,
-                multipleFilesSupported && internalValue.length === 0 && "flex", // Keep flex for empty state centering
+                multipleFilesSupported && internalValue.length ? "" : "flex",
                 {
                     [nonActiveDropClasses]: !isDragActive,
                     [activeDropClasses]: isDragActive, // OS file drag active
@@ -321,11 +318,9 @@ function FileDropComponent({
                 })}
         >
             <div
-                className={cls("flex items-center p-1 no-scrollbar",
-                    multipleFilesSupported && internalValue.length ? "flex-row overflow-x-auto" : "flex-col", // flex-col for single or empty
-                    internalValue.length === 0 && "min-h-[250px] justify-center", // Centering for empty dropzone
-                    multipleFilesSupported && internalValue.length > 0 && "min-h-[180px]", // Min height for multiple items
-                    !multipleFilesSupported && internalValue.length > 0 && "min-h-[250px]" // Min height for single item
+                className={cls("flex items-center p-1 px-4 no-scrollbar",
+                    multipleFilesSupported && internalValue.length ? "overflow-auto" : "",
+                    multipleFilesSupported && internalValue.length ? "min-h-[180px]" : "min-h-[250px]"
                 )}
             >
                 <input

package/src/types/collections.ts

@@ -70,7 +70,7 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * e.g. 'account_tree' or 'person'.
      * Find all the icons in https://firecms.co/docs/icons
      */
-    icon?: string;
+    icon?: string | React.ReactNode;
 
     /**
      * Optional field used to group top level navigation entries under a~

package/src/types/navigation.ts

@@ -206,7 +206,7 @@ export interface CMSView {
      * e.g. 'account_tree' or 'person'
      * Find all the icons in https://firecms.co/docs/icons
      */
-    icon?: string;
+    icon?: string | React.ReactNode;
 
     /**
      * Should this view be hidden from the main navigation panel.

package/src/util/icons.tsx

@@ -4,17 +4,28 @@ import { coolIconKeys, Icon, IconColor, iconKeys } from "@firecms/ui";
 import { slugify } from "./strings";
 import equal from "react-fast-compare"
 
-export function getIcon(iconKey?: string,
+export function getIcon(iconKey?: string | React.ReactNode,
                         className?: string,
                         color?: IconColor,
                         size?: "smallest" | "small" | "medium" | "large" | number,): React.ReactElement | undefined {
+
+    if (React.isValidElement(iconKey)) {
+        return iconKey;
+    }
+
     if (!iconKey) return undefined;
-    iconKey = slugify(iconKey);
-    if (!(iconKey in iconKeysMap)) {
-        return undefined;
+    if (typeof iconKey === "string") {
+
+        const usedIconKey = slugify(iconKey);
+        if (!(usedIconKey in iconKeysMap)) {
+            return undefined;
+        }
+        return usedIconKey in iconKeysMap ?
+            <Icon iconKey={usedIconKey} size={size} className={className} color={color}/> : undefined;
     }
-    return iconKey in iconKeysMap ?
-        <Icon iconKey={iconKey} size={size} className={className} color={color}/> : undefined;
+
+    console.warn("Invalid icon key provided:", iconKey);
+    return undefined;
 }
 
 export type IconViewProps = {
@@ -22,7 +33,7 @@ export type IconViewProps = {
     name: string;
     singularName?: string;
     group?: string;
-    icon?: string;
+    icon?: string | React.ReactNode;
 }
 
 export const IconForView = React.memo(