@firecms/core 3.0.0-canary.161 → 3.0.0-canary.163

package/package.json

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

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -88,8 +88,6 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
     const [size, setSize] = React.useState<CollectionSize>(defaultSize ?? "m");
 
-    const selectedEntityIds = selectedEntities?.map(e => e.id);
-
     const updateSize = useCallback((size: CollectionSize) => {
         if (onSizeChanged)
             onSizeChanged(size);
@@ -204,7 +202,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             </EntityTableCell>
         );
 
-    }, [size, selectedEntityIds]);
+    }, [size]);
 
     const collectionColumns: VirtualTableColumn[] = (() => {
         const columnsResult: VirtualTableColumn[] = propertiesToColumns({
@@ -312,7 +310,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                              inlineEditing={inlineEditing}
                              cellRenderer={cellRenderer}
                              onEntityClick={onEntityClick}
-                             highlightedRow={useCallback((entity: Entity<M>) => selectedEntityIds?.includes(entity.id) ?? false, [selectedEntityIds])}
+                             highlightedRow={(entity: Entity<M>) => Boolean(selectedEntities?.find(e => e.id === entity.id && e.path === entity.path))}
                              tableController={tableController}
                              onValueChange={onValueChange}
                              onColumnResize={onColumnResize}

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -482,7 +482,7 @@ export const EntityCollectionView = React.memo(
             frozen?: boolean
         }) => {
 
-            const isSelected = usedSelectionController.selectedEntities.map(e => e.id).includes(entity.id);
+            const isSelected = Boolean(usedSelectionController.selectedEntities.find(e => e.id == entity.id && e.path == entity.path));
 
             const actions = getActionsForEntity({
                 entity,

package/src/components/EntityCollectionView/useSelectionController.tsx

@@ -10,9 +10,10 @@ export function useSelectionController<M extends Record<string, any> = any>(
     const toggleEntitySelection = useCallback((entity: Entity<M>, newSelectedState?: boolean) => {
         let newValue;
         if (newSelectedState === undefined) {
-            if (selectedEntities.map(e => e.id).includes(entity.id)) {
+            const isSelected = Boolean(selectedEntities.find(e => e.id === entity.id && e.path === entity.path));
+            if (isSelected) {
                 onSelectionChange?.(entity, false);
-                newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+                newValue = selectedEntities.filter((item: Entity<M>) => !(item.id === entity.id && item.path === entity.path));
             } else {
                 onSelectionChange?.(entity, true);
                 newValue = [...selectedEntities, entity];
@@ -23,14 +24,14 @@ export function useSelectionController<M extends Record<string, any> = any>(
                 newValue = [...selectedEntities, entity];
             } else {
                 onSelectionChange?.(entity, false);
-                newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+                newValue = selectedEntities.filter((item: Entity<M>) => !(item.id === entity.id && item.path === entity.path));
             }
         }
         setSelectedEntities(newValue);
     }, [selectedEntities]);
 
     const isEntitySelected = useCallback((entity: Entity<M>) => {
-        return selectedEntities.map(e => e.id).includes(entity.id);
+        return Boolean(selectedEntities.find(e => e.id === entity.id && e.path === entity.path));
     }, [selectedEntities]);
 
     return {

package/src/components/EntityPreview.tsx

@@ -71,11 +71,15 @@ export function EntityPreview({
     const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
     const imagePropertyKey = getEntityImagePreviewPropertyKey(resolvedCollection);
     const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : undefined;
-    const usedImageProperty = "of" in imageProperty ? imageProperty.of : imageProperty;
+    const usedImageProperty = imageProperty && "of" in imageProperty ? imageProperty.of : imageProperty;
     const restProperties = listProperties.filter(p => p !== titleProperty && p !== imagePropertyKey);
 
-    const imageValue = getValueInPath(entity.values, imagePropertyKey as string);
-    const usedImageValue = "of" in imageProperty ? ((imageValue ?? []).length > 0 ? imageValue[0] : undefined) : imageValue;
+    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}
@@ -108,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
@@ -129,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

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/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>