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

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.155",
   "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.155",
+    "@firecms/formex": "^3.0.0-canary.155",
+    "@firecms/ui": "^3.0.0-canary.155",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.2",
     "clsx": "^2.1.1",
@@ -88,7 +88,9 @@
     "@types/react-dom": "^18.3.1",
     "@types/react-measure": "^2.0.12",
     "@vitejs/plugin-react": "^4.3.3",
+    "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",
@@ -104,7 +106,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "52858cb15cdbbbb9c1b6ed8368e133304321cf49",
+  "gitHead": "c9b71679d709242ff3a47ec56a0ecf980ec76564",
   "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/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/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/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;