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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.104",
+    "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.104",
-        "@firecms/formex": "^3.0.0-canary.104",
-        "@firecms/ui": "^3.0.0-canary.104",
+        "@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": "df5ac9be9439d01c0acf3666fad83bc87d236eb6",
+    "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.
@@ -84,9 +85,9 @@ function ReferenceFieldBindingInternal({
     return (
         <>
             {!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"}/>}
+                                               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"}/>}
@@ -105,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>}
             </>}