@firecms/core 3.0.0-canary.139 → 3.0.0-canary.140

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.139",
+    "version": "3.0.0-canary.140",
     "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.139",
-        "@firecms/formex": "^3.0.0-canary.139",
-        "@firecms/ui": "^3.0.0-canary.139",
+        "@firecms/editor": "^3.0.0-canary.140",
+        "@firecms/formex": "^3.0.0-canary.140",
+        "@firecms/ui": "^3.0.0-canary.140",
         "@hello-pangea/dnd": "^17.0.0",
         "@radix-ui/react-portal": "^1.1.2",
         "clsx": "^2.1.1",
@@ -100,7 +100,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "d53289afed32dfedf63a425a0c1af5f68c01800a",
+    "gitHead": "112132e315d1ae63babf9f53500c00bc37a2d8e4",
     "publishConfig": {
         "access": "public"
     },

package/src/components/ArrayContainer.tsx

@@ -7,7 +7,6 @@ import {
     AddIcon,
     Button,
     ContentCopyIcon,
-    fieldBackgroundHoverMixin,
     HandleIcon,
     IconButton,
     Menu,
@@ -17,11 +16,11 @@ import {
     useOutsideAlerter
 } from "@firecms/ui";
 
-interface ArrayContainerProps<T> {
+export interface ArrayContainerProps<T> {
     droppableId: string;
     value: T[];
     addLabel: string;
-    buildEntry: (index: number, internalId: number) => React.ReactNode;
+    buildEntry: (index: number, internalId: number, isDragging:boolean) => React.ReactNode;
     disabled?: boolean;
     size?: "small" | "medium";
     onInternalIdAdded?: (id: number) => void;
@@ -209,7 +208,7 @@ type ArrayContainerItemProps = {
     internalId: number,
     size?: "small" | "medium",
     disabled: boolean,
-    buildEntry: (index: number, internalId: number) => React.ReactNode,
+    buildEntry: (index: number, internalId: number, isDragging: boolean) => React.ReactNode,
     remove: (index: number) => void,
     copy: (index: number) => void,
     isDragging: boolean,
@@ -246,7 +245,7 @@ export function ArrayContainerItem({
             className="flex items-start">
             <div
                 className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
-                {buildEntry(index, internalId)}
+                {buildEntry(index, internalId, isDragging)}
             </div>
             <ArrayItemOptions direction={size === "small" ? "row" : "column"}
                               disabled={disabled}

package/src/core/EntityEditView.tsx

@@ -892,45 +892,42 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 {pluginActions}
             </div>}
 
-            <div className="h-full overflow-auto">
+            <div className="pt-12 pb-16 pl-4 sm:px-8 md:px-10">
+                <div
+                    className={`w-full py-2 flex flex-col items-start mt-${4 + (pluginActions ? 8 : 0)} lg:mt-${8 + (pluginActions ? 8 : 0)} mb-8`}>
 
-                <div className="pt-12 pb-16 pl-4 sm:px-8 md:px-10">
-                    <div
-                        className={`w-full py-2 flex flex-col items-start mt-${4 + (pluginActions ? 8 : 0)} lg:mt-${8 + (pluginActions ? 8 : 0)} mb-8`}>
-
-                        <Typography
-                            className={"mt-4 flex-grow line-clamp-1 " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
-                            variant={"h4"}>{title ?? inputCollection.singularName ?? inputCollection.name}
-                        </Typography>
-                        <Alert color={"base"} className={"w-full"} size={"small"}>
-                            <code className={"text-xs select-all"}>{path}/{entityId}</code>
-                        </Alert>
-                    </div>
+                    <Typography
+                        className={"mt-4 flex-grow line-clamp-1 " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
+                        variant={"h4"}>{title ?? inputCollection.singularName ?? inputCollection.name}
+                    </Typography>
+                    <Alert color={"base"} className={"w-full"} size={"small"}>
+                        <code className={"text-xs select-all"}>{path}/{entityId}</code>
+                    </Alert>
+                </div>
 
-                    {!collection.hideIdFromForm &&
-                        <CustomIdField customId={inputCollection.customId}
-                                       entityId={entityId}
-                                       status={status}
-                                       onChange={setEntityId}
-                                       error={entityIdError}
-                                       loading={customIdLoading}
-                                       entity={entity}/>}
+                {!collection.hideIdFromForm &&
+                    <CustomIdField customId={inputCollection.customId}
+                                   entityId={entityId}
+                                   status={status}
+                                   onChange={setEntityId}
+                                   error={entityIdError}
+                                   loading={customIdLoading}
+                                   entity={entity}/>}
 
-                    {entityId && formContext && <>
-                        <div className="mt-12 flex flex-col gap-8"
-                             ref={formRef}>
+                {entityId && formContext && <>
+                    <div className="mt-12 flex flex-col gap-8"
+                         ref={formRef}>
 
-                            {formFields}
+                        {formFields}
 
-                            <ErrorFocus containerRef={formRef}/>
+                        <ErrorFocus containerRef={formRef}/>
 
-                        </div>
+                    </div>
 
-                        <div className="h-14"/>
+                    <div className="h-14"/>
 
-                    </>}
+                </>}
 
-                </div>
             </div>
         </>;
 
@@ -1004,10 +1001,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     return (
         <Formex value={formex}>
 
-            <div className="flex flex-col h-full w-full transition-width duration-250 ease-in-out">
+            <div className="flex flex-col h-full w-full">
 
                 <div
-                    className={cls(defaultBorderMixin, "no-scrollbar border-b pl-2 pr-2 pt-1 flex items-end overflow-scroll bg-gray-50 dark:bg-gray-950")}>
+                    className={cls(defaultBorderMixin, "no-scrollbar h-16 border-b pl-2 pr-2 pt-1 flex items-end overflow-scroll bg-gray-50 dark:bg-gray-950")}>
 
                     <div
                         className="pb-1 self-center">

package/src/form/PropertyFieldBinding.tsx

@@ -81,7 +81,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
      context,
      includeDescription,
      underlyingValueHasChanged,
-     disabled,
+     disabled: disabledProp,
      partOfArray,
      minimalistView,
      autoFocus,
@@ -109,6 +109,8 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     index
                 });
 
+                const disabled = disabledProp || isReadOnly(resolvedProperty) || Boolean(resolvedProperty?.disabled);
+
                 if (resolvedProperty === null || isHidden(resolvedProperty)) {
                     return <></>;
                 } else if (isReadOnly(resolvedProperty)) {

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -3,7 +3,7 @@ import { FieldProps } from "../../types";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
-import { getArrayResolvedProperties, getIconForProperty } from "../../util";
+import { getArrayResolvedProperties, getIconForProperty, isReadOnly } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
@@ -57,9 +57,10 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
     </>);
 
     const body = resolvedProperties.map((childProperty, index) => {
+        const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
         const fieldProps = {
             propertyKey: `${propertyKey}[${index}]`,
-            disabled,
+            disabled: disabled || thisDisabled,
             property: childProperty,
             includeDescription,
             underlyingValueHasChanged,

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
 
 import { Field, useFormex } from "@firecms/formex";
 
-import { FieldHelperText, FormikArrayContainer, LabelWithIconAndTooltip } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { EnumValuesChip } from "../../preview";
 import { FieldProps, FormContext, PropertyFieldBindingProps, PropertyOrBuilder } from "../../types";
@@ -10,6 +10,7 @@ import { getDefaultValueFor, getIconForProperty, } from "../../util";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
 import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { ArrayContainer } from "../../components";
 
 /**
  * If the `oneOf` property is specified, this fields render each array entry as
@@ -47,9 +48,9 @@ export function BlockFieldBinding<T extends Array<any>>({
 
     const [lastAddedId, setLastAddedId] = useState<number | undefined>();
 
-    const buildEntry = useCallback((index: number, internalId: number) => {
+    const buildEntry = useCallback((index: number, internalId: number, isDragging:boolean) => {
         return <BlockEntry
-            key={`array_one_of_${index}`}
+            key={`array_one_of_${internalId}`}
             name={`${propertyKey}.${index}`}
             index={index}
             value={value[index]}
@@ -70,19 +71,19 @@ export function BlockFieldBinding<T extends Array<any>>({
     );
 
     const firstOneOfKey = Object.keys(property.oneOf.properties)[0];
-    const body = <FormikArrayContainer value={value}
-                                       className={"flex flex-col gap-3"}
-                                       name={propertyKey}
-                                       addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
-                                       buildEntry={buildEntry}
-                                       onInternalIdAdded={setLastAddedId}
-                                       disabled={isSubmitting || Boolean(property.disabled)}
-                                       includeAddButton={!property.disabled}
-                                       setFieldValue={setFieldValue}
-                                       newDefaultEntry={{
-                                           [property.oneOf!.typeField ?? DEFAULT_ONE_OF_TYPE]: firstOneOfKey,
-                                           [property.oneOf!.valueField ?? DEFAULT_ONE_OF_VALUE]: getDefaultValueFor(property.oneOf.properties[firstOneOfKey])
-                                       }}/>;
+    const body = <ArrayContainer value={value}
+                                 className={"flex flex-col gap-3"}
+                                 droppableId={propertyKey}
+                                 addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                 buildEntry={buildEntry}
+                                 onInternalIdAdded={setLastAddedId}
+                                 disabled={isSubmitting || Boolean(property.disabled)}
+                                 includeAddButton={!property.disabled}
+                                 onValueChange={(value) => setFieldValue(propertyKey, value)}
+                                 newDefaultEntry={{
+                                     [property.oneOf!.typeField ?? DEFAULT_ONE_OF_TYPE]: firstOneOfKey,
+                                     [property.oneOf!.valueField ?? DEFAULT_ONE_OF_VALUE]: getDefaultValueFor(property.oneOf.properties[firstOneOfKey])
+                                 }}/>;
     return (
 
         <>

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { FieldProps, Properties, ResolvedProperties } from "../../types";
 
 import { ErrorBoundary } from "../../components";
-import { getIconForProperty, isHidden, pick } from "../../util";
+import { getIconForProperty, isHidden, isReadOnly, pick } from "../../util";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
@@ -54,9 +54,10 @@ export function MapFieldBinding({
             {Object.entries(mapProperties)
                 .filter(([_, property]) => !isHidden(property))
                 .map(([entryKey, childProperty], index) => {
-                        const fieldBindingProps = {
+                    const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
+                    const fieldBindingProps = {
                             propertyKey: `${propertyKey}.${entryKey}`,
-                            disabled,
+                            disabled: disabled || thisDisabled,
                             property: childProperty,
                             includeDescription,
                             underlyingValueHasChanged,

package/src/hooks/data/save.ts

@@ -108,7 +108,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
         updatedValues = values;
     }
 
-    console.log("Saving entity", {
+    console.debug("Saving entity", {
         entityId,
         updatedValues,
         collection