@firecms/core 3.0.0-canary.154 → 3.0.0-canary.156

package/dist/preview/PropertyPreviewProps.d.ts

@@ -2,7 +2,7 @@ import { CMSType, Property, ResolvedProperty } from "../types";
 /**
  * @group Preview components
  */
-export type PreviewSize = "large" | "medium" | "small";
+export type PreviewSize = "small" | "medium" | "large";
 /**
  * @group Preview components
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.154",
+  "version": "3.0.0-canary.156",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -10,7 +10,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/firecmsco/firecms.git",
+    "url": "https://github.com/firecmsco/firecms.git",
     "directory": "packages/firecms_core"
   },
   "main": "./dist/index.umd.js",
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.154",
-    "@firecms/formex": "^3.0.0-canary.154",
-    "@firecms/ui": "^3.0.0-canary.154",
+    "@firecms/editor": "^3.0.0-canary.156",
+    "@firecms/formex": "^3.0.0-canary.156",
+    "@firecms/ui": "^3.0.0-canary.156",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.2",
     "clsx": "^2.1.1",
@@ -62,7 +62,7 @@
     "markdown-it": "^14.1.0",
     "notistack": "^3.0.1",
     "object-hash": "^3.0.0",
-    "react-dropzone": "^14.2.10",
+    "react-dropzone": "^14.3.5",
     "react-fast-compare": "^3.2.2",
     "react-image-file-resizer": "^0.4.8",
     "react-transition-group": "^4.4.5",
@@ -82,29 +82,31 @@
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
-    "@types/node": "^20.16.11",
+    "@types/node": "^20.17.9",
     "@types/object-hash": "^3.0.6",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-measure": "^2.0.12",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "babel-plugin-react-compiler": "beta",
     "cross-env": "^7.0.3",
+    "eslint-plugin-react-compiler": "beta",
     "firebase": "^10.14.1",
     "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
-    "react-router": "^6.27.0",
-    "react-router-dom": "^6.27.0",
+    "react-router": "^6.28.0",
+    "react-router-dom": "^6.28.0",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "tsd": "^0.31.2",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10"
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11"
   },
   "files": [
     "dist",
     "src"
   ],
-  "gitHead": "52858cb15cdbbbb9c1b6ed8368e133304321cf49",
+  "gitHead": "78b61328121fb331b164ca96030419b9607971a1",
   "publishConfig": {
     "access": "public"
   },

package/src/components/ConfirmationDialog.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Button, Dialog, DialogActions, DialogContent, LoadingButton, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton, Typography } from "@firecms/ui";
 
 export function ConfirmationDialog({
                                              open,
@@ -22,8 +22,8 @@ export function ConfirmationDialog({
             open={open}
             onOpenChange={(open) => !open ? onCancel() : undefined}
         >
+            <DialogTitle variant={"h6"} className={"mb-2"}>{title}</DialogTitle>
             <DialogContent>
-                <Typography variant={"h6"} className={"mb-2"}>{title}</Typography>
                 {body}
             </DialogContent>
 

package/src/components/DeleteEntityDialog.tsx

@@ -1,6 +1,6 @@
 import { Entity, EntityCallbacks, EntityCollection } from "../types";
 import React, { useCallback, useMemo, useState } from "react";
-import { Button, CircularProgress, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle } from "@firecms/ui";
 import {
     deleteEntityWithCallbacks,
     useCustomizationController,
@@ -40,20 +40,12 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     const snackbarController = useSnackbarController();
     const [loading, setLoading] = useState(false);
 
-    const [entityOrEntities, setUsedEntityOrEntities] = React.useState<Entity<M> | Entity<M>[]>();
-
-    const [multipleEntities, setMultipleEntities] = React.useState<boolean>();
     const context = useFireCMSContext();
+    const entityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
+        ? entityOrEntitiesToDelete[0]
+        : entityOrEntitiesToDelete;
 
-    React.useEffect(() => {
-        if (entityOrEntitiesToDelete) {
-            const revisedEntityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
-                ? entityOrEntitiesToDelete[0]
-                : entityOrEntitiesToDelete;
-            setUsedEntityOrEntities(revisedEntityOrEntities);
-            setMultipleEntities(Array.isArray(revisedEntityOrEntities));
-        }
-    }, [entityOrEntitiesToDelete]);
+    const multipleEntities = Array.isArray(entityOrEntities);
 
     const resolvedCollection = useMemo(() => resolveCollection<M>({
         collection,
@@ -181,11 +173,10 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
             open={open}
             onOpenChange={(open) => !open ? onClose() : undefined}
         >
+            <DialogTitle id="delete-dialog-title">
+                {dialogTitle}
+            </DialogTitle>
             <DialogContent fullHeight={true}>
-                <Typography variant={"subtitle2"} className={"p-4"}>
-                    {dialogTitle}
-                </Typography>
-
                 {!multipleEntities && <div className={"p-4"}>{content}</div>}
             </DialogContent>
             <DialogActions>

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -176,12 +176,14 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             throw new Error("When using additional fields you need to provide a Builder or a value");
         }
 
-        const child = Builder
+        const child: React.ReactNode = Builder
             ? <Builder entity={entity} context={context}/>
-            : <>{additionalField.value?.({
-                entity,
-                context
-            })}</>;
+            : <>
+                {additionalField.value?.({
+                    entity,
+                    context
+                })?.toString()}
+            </>;
 
         return (
             <EntityTableCell

package/src/components/ErrorView.tsx

@@ -26,7 +26,7 @@ export function ErrorView({
                               tooltip
                           }: ErrorViewProps): React.ReactElement {
     const component = error instanceof Error ? error.message : error;
-    console.error("ErrorView", error)
+    console.warn("ErrorView", error)
 
     const body = (
         <div

package/src/components/HomePage/DefaultHomePage.tsx

@@ -140,6 +140,7 @@ export function DefaultHomePage({
                     <SearchBar onTextSearch={updateSearchResults}
                                placeholder={"Search collections"}
                                large={false}
+                               autoFocus={true}
                                innerClassName={"w-full"}
                                className={"w-full flex-grow"}/>
                     {additionalActions}

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

@@ -77,6 +77,7 @@ export function DateTimeFilterField({
             <div className="w-[80px]">
                 <Select value={operation}
                         size={"large"}
+                        fullWidth={true}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                         }}

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

@@ -148,6 +148,7 @@ export function ReferenceFilterField({
             <div className="w-[140px]">
                 <Select value={operation}
                         size={"large"}
+                        fullWidth={true}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                         }}

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

@@ -98,6 +98,7 @@ export function StringNumberFilterField({
         <div className="flex w-[440px]">
             <div className={"w-[80px]"}>
                 <Select value={operation}
+                        fullWidth={true}
                         position={"item-aligned"}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
@@ -131,6 +132,7 @@ export function StringNumberFilterField({
                 {enumValues && !multiple &&
                     <Select
                         position={"item-aligned"}
+                        fullWidth={true}
                         value={typeof internalValue === "string" ? internalValue : ""}
                         onValueChange={(value) => {
                             if (value !== "")

package/src/components/VirtualTable/fields/VirtualTableSelect.tsx

@@ -92,6 +92,7 @@ export function VirtualTableSelect(props: {
             : <Select
                 inputRef={ref}
                 size={"large"}
+                fullWidth={true}
                 className="w-full h-full p-0 bg-transparent"
                 position={"item-aligned"}
                 disabled={disabled}

package/src/core/EntityEditView.tsx

@@ -96,9 +96,9 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
  * side panel.
  */
 export function EntityEditView<M extends Record<string, any>, USER extends User>({
-                                                                                         entityId,
-                                                                                         ...props
-                                                                                     }: EntityEditViewProps<M>) {
+                                                                                     entityId,
+                                                                                     ...props
+                                                                                 }: EntityEditViewProps<M>) {
     const {
         entity,
         dataLoading,
@@ -778,10 +778,12 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
                         const child = Builder
                             ? <Builder entity={entity} context={context}/>
-                            : <>{additionalField.value?.({
-                                entity,
-                                context
-                            })}</>;
+                            : <>
+                                {additionalField.value?.({
+                                    entity,
+                                    context
+                                })?.toString()}
+                            </>;
                         return (
                             <div>
                                 <LabelWithIconAndTooltip

package/src/core/field_configs.tsx

@@ -300,7 +300,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
     block: {
         key: "block",
         name: "Block",
-        description: "A complex field that allows the user to compose different fields together, with a key->value format",
+        description: "A complex field that allows the user to compose different fields together, with a key/value format",
         Icon: ViewStreamIcon,
         color: "#ff9408",
         property: {

package/src/form/components/CustomIdField.tsx

@@ -102,6 +102,7 @@ export function CustomIdField<M extends Record<string, any>>({
                 <Select
                     size={"large"}
                     error={error}
+                    fullWidth={true}
                     onValueChange={(v) => onChange(v as string)}
                     {...fieldProps}
                     renderValue={(option) => {

package/src/form/components/StorageItemPreview.tsx

@@ -31,7 +31,7 @@ export function StorageItemPreview({
     return (
         <div className={cls(paperMixin,
             "relative m-4 border-box flex items-center justify-center",
-            size === "medium" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]",
+            size === "large" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]",
             className)}>
 
             {!placeholder && !disabled &&

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -226,6 +226,7 @@ function BlockEntry({
                                 placeholder={<Typography variant={"caption"}
                                                          className={"px-4 py-2 font-medium"}>Type</Typography>}
                                 size={"medium"}
+                                fullWidth={true}
                                 position={"item-aligned"}
                                 value={value1}
                                 renderValue={(enumKey: any) =>

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -146,6 +146,7 @@ const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue
         <Select
             value={""}
             size={"large"}
+            fullWidth={true}
             disabled={disabled}
             onValueChange={handleAddProperty}
             renderValue={(key) => (properties as Properties)[key].name || key}>

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -53,6 +53,7 @@ export function SelectFieldBinding<T extends EnumType>({
                 value={value !== undefined && value != null ? value.toString() : ""}
                 disabled={disabled}
                 size={size}
+                fullWidth={true}
                 position="item-aligned"
                 inputClassName={cls("w-full")}
                 label={

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -339,7 +339,7 @@ export function StorageUpload({
     }
 
     const metadata: Record<string, unknown> | undefined = storage?.metadata;
-    const size = multipleFilesSupported ? "small" : "medium";
+    const size = multipleFilesSupported ? "medium" : "large";
 
     const moveItem = useCallback((fromIndex: number, toIndex: number) => {
         if (!multipleFilesSupported) return;

package/src/internal/useUnsavedChangesDialog.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { Blocker, Transition } from "history";
 import { UNSAFE_NavigationContext, useNavigate } from "react-router-dom";
-import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 
 export function useNavigationUnsavedChangesDialog(when: boolean, onSuccess: () => void):
     {
@@ -89,8 +89,8 @@ export function UnsavedChangesDialog({
             }}
             open={open}
         >
+            <DialogTitle variant={"h6"}>{title}</DialogTitle>
             <DialogContent>
-                <Typography variant={"h6"}>{title}</Typography>
 
                 {body}
 

package/src/preview/PropertyPreviewProps.tsx

@@ -3,7 +3,7 @@ import { CMSType, Property, ResolvedProperty } from "../types";
 /**
  * @group Preview components
  */
-export type PreviewSize = "large" | "medium" | "small";
+export type PreviewSize = "small" | "medium" | "large";
 
 /**
  * @group Preview components

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -110,7 +110,7 @@ export function KeyValuePreview({ value }: { value: any }) {
     return <div
         className="flex flex-col gap-1 w-full">
         {
-            Object.entries(value).map(([key, childValue]) => (
+            Object.entries(value).map(([key, childValue]: [string, any]) => (
                 <div
                     key={`map_preview_table_${key}}`}
                     className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
@@ -127,9 +127,9 @@ export function KeyValuePreview({ value }: { value: any }) {
                         </div>
                         <div
                             className="flex-grow max-w-[75%]">
-                            {typeof childValue !== "object" && <Typography>
+                            {childValue && ("toString" in childValue) && <Typography>
                                 <ErrorBoundary>
-                                    {childValue && childValue.toString()}
+                                    {childValue.toString()}
                                 </ErrorBoundary>
                             </Typography>}
                         </div>

package/src/util/useStorageUploadController.tsx

@@ -70,7 +70,7 @@ export function useStorageUploadController<M extends object>({
         throw Error("Storage meta must be specified");
 
     const metadata: Record<string, any> | undefined = storage?.metadata;
-    const size = multipleFilesSupported ? "small" : "medium";
+    const size = multipleFilesSupported ? "medium" : "large";
 
     const compression: ImageCompression | undefined = storage?.imageCompression;