@firecms/core 3.0.0-canary.160 → 3.0.0-canary.162

package/dist/util/icon_synonyms.d.ts

@@ -1222,7 +1222,6 @@ export declare const iconSynonyms: {
     picture_in_picture_alt: string;
     pie_chart: string;
     pie_chart_outline: string;
-    pie_chart_outlined: string;
     pin: string;
     pinch: string;
     pin_drop: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.160",
+  "version": "3.0.0-canary.162",
   "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.160",
-    "@firecms/formex": "^3.0.0-canary.160",
-    "@firecms/ui": "^3.0.0-canary.159",
+    "@firecms/editor": "^3.0.0-canary.162",
+    "@firecms/formex": "^3.0.0-canary.162",
+    "@firecms/ui": "^3.0.0-canary.162",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.2",
     "clsx": "^2.1.1",
@@ -106,7 +106,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "840f2733672a90a6a56aed89259eaa5365589512",
+  "gitHead": "a1b322b8cdcd05a1598baefce37c89124d96cd79",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionTable/fields/TableStorageUpload.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 
 import { Entity, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig } from "../../../types";
 import { useDropzone } from "react-dropzone";
@@ -140,9 +140,7 @@ function StorageUpload({
                            storagePathBuilder,
                        }: StorageUploadProps) {
 
-    const [onHover, setOnHover] = useState(false);
-
-    const previewSize = multipleFilesSupported && previewSizeInput === "medium" ? "small" : previewSizeInput;
+    const previewSize = previewSizeInput;
     if (multipleFilesSupported) {
         const arrayProperty = property as ResolvedArrayProperty<string[]>;
         if (Array.isArray(arrayProperty.of)) {
@@ -212,9 +210,6 @@ function StorageUpload({
 
     return (
         <div {...rootProps}
-             onMouseEnter={() => setOnHover(true)}
-             onMouseMove={() => setOnHover(true)}
-             onMouseLeave={() => setOnHover(false)}
              className={cls(dropZoneClasses,
                  "relative w-full h-full flex",
                  `justify-${hasValue ? "start" : "center"}`,
@@ -252,8 +247,7 @@ function StorageUpload({
                 }
 
                 return child;
-            })
-            }
+            })}
 
             {!internalValue && <div
                 className="flex-grow m-2 max-w-[200px]"

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import useMeasure from "react-use-measure";
 
-import { cls, RemoveCircleIcon, Tooltip } from "@firecms/ui";
+import { cls, DoNotDisturbOnIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../../components";
 import { getRowHeight, TableSize } from "../../common/table_height";
 
@@ -236,7 +236,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 {disabled && onHover && disabledTooltip &&
                     <div className="absolute top-1 right-1 text-xs">
                         <Tooltip title={disabledTooltip}>
-                            <RemoveCircleIcon size={"smallest"} color={"disabled"} className={"text-surface-500"}/>
+                            <DoNotDisturbOnIcon size={"smallest"} color={"disabled"} className={"text-surface-500"}/>
                         </Tooltip>
                     </div>}
 

package/src/components/EntityCollectionTable/internal/EntityTableCellActions.tsx

@@ -1,4 +1,4 @@
-import { ErrorOutlineIcon, IconButton } from "@firecms/ui";
+import { ErrorIcon, IconButton } from "@firecms/ui";
 import { ErrorTooltip } from "../../ErrorTooltip";
 import { useCallback, useEffect, useRef } from "react";
 
@@ -68,7 +68,7 @@ export function EntityTableCellActions({
                             width: 32,
                             height: 32
                         }}>
-                        <ErrorOutlineIcon
+                        <ErrorIcon
                             size={"small"}
                             color={"error"}
                         />

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -19,7 +19,7 @@ import { CustomFieldValidator, getYupEntitySchema } from "../../../../form/valid
 import { useWindowSize } from "./useWindowSize";
 import { ElementResizeListener } from "./ElementResizeListener";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
-import { Button, ClearIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
+import { Button, CloseIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
 import { PropertyFieldBinding } from "../../../../form";
 import { useCustomizationController, useDataSource, useFireCMSContext } from "../../../../hooks";
 import { OnCellValueChangeParams } from "../../../common";
@@ -394,7 +394,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                             event.stopPropagation();
                             onClose();
                         }}>
-                        <ClearIcon className="text-white"
+                        <CloseIcon className="text-white"
                                    size={"small"}/>
                     </IconButton>
                 </div>

package/src/components/EntityPreview.tsx

@@ -71,21 +71,28 @@ export function EntityPreview({
     const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
     const imagePropertyKey = getEntityImagePreviewPropertyKey(resolvedCollection);
     const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : undefined;
-
+    const usedImageProperty = imageProperty && "of" in imageProperty ? imageProperty.of : imageProperty;
     const restProperties = listProperties.filter(p => p !== titleProperty && p !== imagePropertyKey);
 
+    const imageValue = imagePropertyKey ? getValueInPath(entity.values, imagePropertyKey) : undefined;
+    const usedImageValue = imageProperty !== undefined ? ("of" in imageProperty
+            ? ((imageValue ?? []).length > 0
+                ? imageValue[0] : undefined)
+            : imageValue)
+        : undefined;
+
     return <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                                    hover={disabled ? undefined : hover}
                                    size={size}>
         <div className={cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "small" ? "my-0.5" : "m-2 self-start")}>
-            {imageProperty && <PropertyPreview property={imageProperty}
-                                               propertyKey={imagePropertyKey as string}
-                                               size={"small"}
-                                               value={getValueInPath(entity.values, imagePropertyKey as string)}/>}
-            {!imageProperty && <IconForView collectionOrView={collection}
-                                            color={"primary"}
-                                            size={size}
-                                            className={"m-auto p-1"}/>}
+            {usedImageProperty && usedImageValue && <PropertyPreview property={usedImageProperty}
+                                                                     propertyKey={imagePropertyKey as string}
+                                                                     size={"small"}
+                                                                     value={usedImageValue}/>}
+            {(!usedImageProperty || !usedImageValue) && <IconForView collectionOrView={collection}
+                                                                     color={"primary"}
+                                                                     size={size}
+                                                                     className={"m-auto p-1"}/>}
         </div>
 
 
@@ -105,7 +112,7 @@ export function EntityPreview({
                     : <Skeleton/>)}
 
             {titleProperty && (
-                <div className={"my-0.5 text-sm font-medium"}>
+                <div className={"truncate my-0.5 text-sm font-medium"}>
                     {
                         entity
                             ? <PropertyPreview
@@ -126,7 +133,7 @@ export function EntityPreview({
 
                 return (
                     <div key={"ref_prev_" + key}
-                         className={restProperties.length > 1 ? "my-0.5" : "my-0"}>
+                         className={cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0")}>
                         {
                             entity
                                 ? <PropertyPreview
@@ -220,3 +227,5 @@ export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPre
         {children}
     </div>;
 });
+
+EntityPreviewContainer.displayName = "EntityPreviewContainer";

package/src/components/HomePage/FavouritesView.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 import { useNavigationController } from "../../hooks";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
 import { TopNavigationEntry } from "../../types";
-import { Chip, Collapse, StarBorderIcon, StarIcon } from "@firecms/ui";
+import { Chip, Collapse, StarIcon } from "@firecms/ui";
 
 function NavigationChip({ entry }: { entry: TopNavigationEntry }) {
 
@@ -29,16 +29,11 @@ function NavigationChip({ entry }: { entry: TopNavigationEntry }) {
     return <Chip
         key={entry.path}
         onClick={() => navigate(entry.url)}
-        icon={
-            favourite
-                ? <StarIcon
-                    onClick={onIconClick}
-                    size={18}
-                    className={"text-secondary"}/>
-                : <StarBorderIcon
-                    onClick={onIconClick}
-                    size={18}
-                    className={"text-surface-400 dark:text-surface-500"}/>}>
+        icon={<StarIcon
+            onClick={onIconClick}
+            size={18}
+            className={favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500"}/>
+        }>
         {entry.name}
     </Chip>;
 }

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -4,7 +4,7 @@ import { useCustomizationController, useFireCMSContext } from "../../hooks";
 import { PluginHomePageActionsProps, TopNavigationEntry } from "../../types";
 import { IconForView } from "../../util";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
-import { IconButton, StarBorderIcon, StarIcon } from "@firecms/ui";
+import { IconButton, StarIcon } from "@firecms/ui";
 import { NavigationCard } from "./NavigationCard";
 import { SmallNavigationCard } from "./SmallNavigationCard";
 
@@ -60,14 +60,9 @@ export function NavigationCardBinding({
                         );
                     }
                 }}>
-                {
-                    favourite
-                        ? <StarIcon
-                            size={18}
-                            className={"text-secondary"}/>
-                        : <StarBorderIcon
-                            size={18}
-                            className={"text-surface-400 dark:text-surface-500"}/>}
+                <StarIcon
+                    size={18}
+                    className={favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500"}/>
             </IconButton>
         ]
         : [];

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -3,7 +3,7 @@ import { EnumValuesChip } from "../../../preview";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
 import {
     Checkbox,
-    ClearIcon,
+    CloseIcon,
     IconButton,
     Label,
     MultiSelect,
@@ -125,7 +125,7 @@ export function StringNumberFilterField({
                     }}
                     endAdornment={internalValue && <IconButton
                         onClick={(e) => updateFilter(operation, undefined)}>
-                        <ClearIcon/>
+                        <CloseIcon/>
                     </IconButton>}
                 />}
 
@@ -141,7 +141,7 @@ export function StringNumberFilterField({
                         endAdornment={internalValue && <IconButton
                             className="absolute right-2 top-3"
                             onClick={(e) => updateFilter(operation, undefined)}>
-                            <ClearIcon/>
+                            <CloseIcon/>
                         </IconButton>}
                         renderValue={(enumKey) => {
                             if (enumKey === null)
@@ -178,7 +178,7 @@ export function StringNumberFilterField({
                         endAdornment={internalValue && <IconButton
                             className="absolute right-2 top-3"
                             onClick={(e) => updateFilter(operation, undefined)}>
-                            <ClearIcon/>
+                            <CloseIcon/>
                         </IconButton>}
                         // renderValues={(enumKeys) => {
                         //     console.log("renderValues", enumKeys);

package/src/core/DefaultDrawer.tsx

@@ -79,9 +79,9 @@ export function DefaultDrawer({
                 <DrawerLogo logo={logo}/>
 
                 <div className={"mt-4 flex-grow overflow-scroll no-scrollbar"}
-                style={{
-                    maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
-                }}>
+                     style={{
+                         maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
+                     }}>
 
                     {groupsWithoutAdmin.map((group) => (
                         <div
@@ -93,7 +93,8 @@ export function DefaultDrawer({
                                 .map((view, index) =>
                                     <DrawerNavigationItem
                                         key={`navigation_${index}`}
-                                        icon={<IconForView collectionOrView={view.collection ?? view.view} size={"small"}/>}
+                                        icon={<IconForView collectionOrView={view.collection ?? view.view}
+                                                           size={"small"}/>}
                                         tooltipsOpen={tooltipsOpen}
                                         adminMenuOpen={adminMenuOpen}
                                         drawerOpen={drawerOpen}
@@ -173,8 +174,8 @@ export function DrawerLogo({ logo }: {
                 {logo
                     ? <img src={logo}
                            alt="Logo"
-                           className={cls("max-w-full max-h-full",
-                               drawerOpen ?? "w-[112px] h-[112px]")}/>
+                           className={cls("max-w-full max-h-full transition-all",
+                               drawerOpen ? "w-[96px] h-[96px]" : "w-[32px] h-[32px]")}/>
                     : <FireCMSLogo/>}
 
             </Link>

package/src/core/EntityEditView.tsx

@@ -785,7 +785,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                 })?.toString()}
                             </>;
                         return (
-                            <div>
+                            <div key={`additional_${key}`}>
                                 <LabelWithIconAndTooltip
                                     propertyKey={key}
                                     icon={<NotesIcon size={"small"}/>}
@@ -808,8 +808,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 })
                 .filter(Boolean)}
 
-        </>
-    );
+        </>);
 
     const disabled = formex.isSubmitting || (!modified && status === "existing");
     const formRef = React.useRef<HTMLDivElement>(null);

package/src/core/field_configs.tsx

@@ -23,7 +23,6 @@ import {
     AddLinkIcon,
     BallotIcon,
     DriveFolderUploadIcon,
-    EmailIcon,
     FlagIcon,
     FormatListNumberedIcon,
     FormatQuoteIcon,
@@ -31,6 +30,7 @@ import {
     LinkIcon,
     ListAltIcon,
     ListIcon,
+    MailIcon,
     NumbersIcon,
     RepeatIcon,
     ScheduleIcon,
@@ -96,7 +96,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
         key: "email",
         name: "Email",
         description: "Text with email validation",
-        Icon: EmailIcon,
+        Icon: MailIcon,
         color: "#154fb3",
         property: {
             dataType: "string",

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -4,7 +4,7 @@ import { EnumType, FieldProps } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { getIconForProperty, resolveEnumValues } from "../../util";
-import { ClearIcon, cls, IconButton, Select, SelectItem } from "@firecms/ui";
+import { CloseIcon, cls, IconButton, Select, SelectItem } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { PropertyIdCopyTooltip } from "../../components";
 
@@ -68,7 +68,7 @@ export function SelectFieldBinding<T extends EnumType>({
                 endAdornment={
                     property.clearable && <IconButton
                         onClick={handleClearClick}>
-                        <ClearIcon/>
+                        <CloseIcon/>
                     </IconButton>
                 }
                 onValueChange={(updatedValue: string) => {

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 
-import { ClearIcon, Collapse, IconButton, TextField } from "@firecms/ui";
+import { CloseIcon, Collapse, IconButton, TextField } from "@firecms/ui";
 import { FieldProps, PreviewType } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { getIconForProperty } from "../../util";
@@ -85,7 +85,7 @@ export function TextFieldBinding<T extends string | number>({
                     endAdornment={
                         property.clearable && <IconButton
                             onClick={handleClearClick}>
-                            <ClearIcon/>
+                            <CloseIcon/>
                         </IconButton>
                     }
                     error={showError ? error : undefined}

package/src/hooks/useBuildNavigationController.tsx

@@ -202,6 +202,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
             let shouldUpdateTopLevelNav = false;
             if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
                 collectionsRef.current = resolvedCollections;
+                console.log("Collections have changed", resolvedCollections);
                 shouldUpdateTopLevelNav = true;
             }
             if (collectionsRef.current === undefined) {

package/src/preview/components/ImagePreview.tsx

@@ -56,7 +56,6 @@ export function ImagePreview({
                  className={"rounded-md"}
                  style={imageStyle}/>
 
-
             <div className={"flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible"}>
                 {navigator && <Tooltip
                     asChild={true}

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -127,7 +127,7 @@ export function KeyValuePreview({ value }: { value: any }) {
                         </div>
                         <div
                             className="flex-grow max-w-[75%]">
-                            {childValue && ("toString" in childValue) && <Typography>
+                            {childValue && <Typography>
                                 <ErrorBoundary>
                                     {childValue.toString()}
                                 </ErrorBoundary>

package/src/util/icon_list.ts

@@ -15,6 +15,7 @@ const map = iconKeys
 export const iconsSearch = new Fuse(map, {
     isCaseSensitive: false,
     shouldSort: true,
+    ignoreLocation: true,
     distance: 0,
     keys: ["key", "synonyms"]
 })

package/src/util/icon_synonyms.ts

@@ -1222,7 +1222,6 @@ export const iconSynonyms = {
     picture_in_picture_alt: "cropped overlap photo position shape",
     pie_chart: "analytics bars data diagram infographic measure metrics statistics tracking",
     pie_chart_outline: "analytics bars data diagram infographic measure metrics statistics tracking",
-    pie_chart_outlined: "graph",
     pin: "1 2 3 digit key login logout number password pattern security star symbol unlock",
     pinch: "arrows compress direction finger grasp hand navigation nip squeeze tweak",
     pin_drop: "destination direction gps location maps navigation place stop",

package/src/util/references.ts

@@ -42,13 +42,19 @@ export function getEntityTitlePropertyKey<M extends Record<string, any>>(collect
 
 export function getEntityImagePreviewPropertyKey<M extends object>(collection: ResolvedEntityCollection<M>): string | undefined {
 
-    // find first text field property
+    // find first storage property of type image
     for (const key in collection.properties) {
         const property = collection.properties[key];
         if (property.dataType === "string" && property.storage?.acceptedFiles?.includes("image/*")) {
             return key;
         }
-
+    }
+    // alternatively, look for the first array of images
+    for (const key in collection.properties) {
+        const property = collection.properties[key];
+        if (property.dataType === "array" && property.of?.dataType === "string" && property.of.storage?.acceptedFiles?.includes("image/*")) {
+            return key;
+        }
     }
     return undefined;
 }