@firecms/core 3.0.0-canary.103 → 3.0.0-canary.105

package/dist/types/collections.d.ts

@@ -58,7 +58,8 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * Icon key to use in this collection.
      * You can use any of the icons in the Material specs:
      * https://fonts.google.com/icons
-     * e.g. 'account_tree' or 'person'
+     * e.g. 'account_tree' or 'person'.
+     * Find all the icons in https://firecms.co/docs/icons
      */
     icon?: string;
     /**
@@ -270,6 +271,10 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * Width of the side dialog (in pixels) when opening an entity in this collection.
      */
     sideDialogWidth?: number | string;
+    /**
+     * Default preview properties displayed when this collection is referenced to.
+     */
+    previewProperties?: string[];
 }
 /**
  * Parameter passed to the `Actions` prop in the collection configuration.

package/dist/types/navigation.d.ts

@@ -144,6 +144,7 @@ export interface CMSView {
      * You can use any of the icons in the Material specs:
      * https://fonts.google.com/icons
      * e.g. 'account_tree' or 'person'
+     * Find all the icons in https://firecms.co/docs/icons
      */
     icon?: string;
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.103",
+    "version": "3.0.0-canary.105",
     "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.103",
-        "@firecms/formex": "^3.0.0-canary.103",
-        "@firecms/ui": "^3.0.0-canary.103",
+        "@firecms/editor": "^3.0.0-canary.105",
+        "@firecms/formex": "^3.0.0-canary.105",
+        "@firecms/ui": "^3.0.0-canary.105",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.1.1",
         "clsx": "^2.1.1",
@@ -100,7 +100,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "c33fe736fee99aaf30789aed66e4385563011783",
+    "gitHead": "e5b79b1a4af2fd750b9e8c8f73052322aa3e86ab",
     "publishConfig": {
         "access": "public"
     },

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

@@ -1,14 +1,14 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import equal from "react-fast-compare"
 
-import { ReferencePreview } from "../../../preview";
+import { EmptyValue, ReferencePreview } from "../../../preview";
 import { CollectionSize, Entity, EntityCollection, EntityReference, FilterValues } from "../../../types";
 
 import { getPreviewSizeFrom } from "../../../preview/util";
 import { getReferenceFrom } from "../../../util";
 import { useCustomizationController, useNavigationController, useReferenceDialog } from "../../../hooks";
 import { ErrorView } from "../../ErrorView";
-import { Button } from "@firecms/ui";
+import { cls } from "@firecms/ui";
 import { EntityPreviewContainer } from "../../EntityPreview";
 
 type TableReferenceFieldProps = {
@@ -151,13 +151,14 @@ export const TableReferenceFieldSuccess = React.memo(
                 {internalValue && multiselect && buildMultipleReferenceField()}
 
                 {valueNotSet &&
-                    <Button
-                        onClick={handleOpen}
-                        size={"small"}
-                        variant="outlined"
-                        color="primary">
+                    <EntityPreviewContainer className={cls("p-4 text-sm font-medium flex items-center gap-4 uppercase",
+                        disabled
+                            ? "text-slate-500"
+                            : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800")}
+                                            onClick={handleOpen}
+                                            size={"medium"}>
                         Edit {title}
-                    </Button>}
+                    </EntityPreviewContainer>}
 
             </div>
         );

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -16,7 +16,7 @@ import {
 } from "../../hooks";
 import { ErrorView } from "../ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
-import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } from "../../util";
+import { canCreateEntity, resolveCollection } from "../../util";
 import { useSelectionController } from "../EntityCollectionView/useSelectionController";
 import { useColumnIds, useTableSearchHelper } from "../common";
 import { useSideDialogContext } from "../../core";
@@ -247,7 +247,6 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
             error={"Could not find collection with id " + collection}/>
     }
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const resolvedCollection = useMemo(() => resolveCollection({
         collection: collection,
         path: fullPath,
@@ -255,10 +254,8 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         fields: customizationController.propertyConfigs
     }), [collection, customizationController.propertyConfigs, fullPath]);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const displayedColumnIds = useColumnIds(resolvedCollection, false);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const tableController = useDataSourceEntityCollectionTableController<M>({
         fullPath,
         collection,
@@ -272,7 +269,6 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         onTextSearchClick,
         textSearchEnabled
     } =
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         useTableSearchHelper({
             collection,
             fullPath,

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -5,10 +5,11 @@ import { useNavigationController, useReferenceDialog } from "../../hooks";
 import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { ErrorView } from "../../components";
-import { ReferencePreview } from "../../preview";
+import { EmptyValue, ReferencePreview } from "../../preview";
 import { getIconForProperty, getReferenceFrom } from "../../util";
-import { Button } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { EntityPreviewContainer } from "../../components/EntityPreview";
+import { cls } from "@firecms/ui";
 
 /**
  * Field that opens a reference selection dialog.
@@ -34,6 +35,7 @@ function ReferenceFieldBindingInternal({
                                            showError,
                                            isSubmitting,
                                            disabled,
+                                           minimalistView,
                                            touched,
                                            autoFocus,
                                            property,
@@ -82,10 +84,10 @@ function ReferenceFieldBindingInternal({
 
     return (
         <>
-            <LabelWithIcon icon={getIconForProperty(property, "small")}
-                           required={property.validation?.required}
-                           title={property.name}
-                           className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            {!minimalistView && <LabelWithIcon icon={getIconForProperty(property, "small")}
+                                               required={property.validation?.required}
+                                               title={property.name}
+                                               className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             {!collection && <ErrorView
                 error={"The specified collection does not exist. Check console"}/>}
@@ -104,12 +106,15 @@ function ReferenceFieldBindingInternal({
                 />}
 
                 {!value && <div className="justify-center text-left">
-                    <Button variant="outlined"
-                            color="primary"
-                            disabled={disabled || isSubmitting}
-                            onClick={onEntryClick}>
-                        Edit {property.name}
-                    </Button>
+                    <EntityPreviewContainer className={cls("p-6 text-sm font-medium flex items-center gap-6",
+                        disabled || isSubmitting
+                            ? "text-slate-500"
+                            : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800")}
+                                            onClick={onEntryClick}
+                                            size={"medium"}>
+                        <EmptyValue/>
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
                 </div>}
             </>}
 

package/src/types/collections.ts

@@ -67,7 +67,8 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * Icon key to use in this collection.
      * You can use any of the icons in the Material specs:
      * https://fonts.google.com/icons
-     * e.g. 'account_tree' or 'person'
+     * e.g. 'account_tree' or 'person'.
+     * Find all the icons in https://firecms.co/docs/icons
      */
     icon?: string;
 
@@ -310,6 +311,11 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * Width of the side dialog (in pixels) when opening an entity in this collection.
      */
     sideDialogWidth?: number | string;
+
+    /**
+     * Default preview properties displayed when this collection is referenced to.
+     */
+    previewProperties?: string[];
 }
 
 /**

package/src/types/navigation.ts

@@ -173,6 +173,7 @@ export interface CMSView {
      * You can use any of the icons in the Material specs:
      * https://fonts.google.com/icons
      * e.g. 'account_tree' or 'person'
+     * Find all the icons in https://firecms.co/docs/icons
      */
     icon?: string;
 

package/src/util/references.ts

@@ -9,6 +9,9 @@ export function getEntityPreviewKeys(targetCollection: EntityCollection<any>,
                                      limit = 3) {
     const allProperties = Object.keys(targetCollection.properties);
     let listProperties = previewProperties?.filter(p => allProperties.includes(p as string));
+    if (!listProperties && targetCollection.previewProperties) {
+        listProperties = targetCollection.previewProperties?.filter(p => allProperties.includes(p as string));
+    }
     if (listProperties && listProperties.length > 0) {
         return listProperties;
     } else {