@firecms/core 3.0.0-beta.10 → 3.0.0-beta.11

package/src/core/DefaultAppBar.tsx

@@ -77,19 +77,21 @@ export const DefaultAppBar = function DefaultAppBar({
 
     const user = userProp ?? authController.user;
 
-    let avatarComponent: JSX.Element;
-    if (user && user.photoURL) {
-        avatarComponent = <Avatar
-            src={user.photoURL}/>;
+    let avatarComponent: JSX.Element | null;
+
+    if (user) {
+        const initial = user?.displayName
+            ? user.displayName[0].toUpperCase()
+            : (user?.email ? user.email[0].toUpperCase() : "A");
+        avatarComponent = <Avatar src={user.photoURL ?? undefined}>
+            {initial}
+        </Avatar>;
     } else if (user === undefined || authController.initialLoading) {
         avatarComponent = <div className={"p-1 flex justify-center"}>
             <Skeleton className={"w-10 h-10 rounded-full"}/>
         </div>;
     } else {
-        const initial = user?.displayName
-            ? user.displayName[0].toUpperCase()
-            : (user?.email ? user.email[0].toUpperCase() : "A");
-        avatarComponent = <Avatar>{initial}</Avatar>;
+        avatarComponent = null;
     }
 
     return (
@@ -108,7 +110,7 @@ export const DefaultAppBar = function DefaultAppBar({
 
             {navigation && <div className="mr-8 hidden lg:block">
                 <ReactLink
-                    className="visited:text-inherit visited:dark:text-inherit"
+                    className="visited:text-inherit visited:dark:text-inherit block"
                     to={navigation?.basePath ?? "/"}
                 >
                     <div className={"flex flex-row gap-4"}>
@@ -120,8 +122,7 @@ export const DefaultAppBar = function DefaultAppBar({
 
                         {typeof title === "string"
                             ? <Typography variant="subtitle1"
-                                          noWrap
-                                          className={cls("transition-all", drawerOpen ? "ml-2" : "")}>
+                                          noWrap>
                                 {title}
                             </Typography>
                             : title}

package/src/core/DefaultDrawer.tsx

@@ -79,13 +79,13 @@ export function DefaultDrawer({
                 <DrawerLogo logo={logo}/>
 
                 <div className={"mt-4 flex-grow overflow-scroll no-scrollbar"}
-                style={{
-                    maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
-                }}>
+                     style={{
+                         maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
+                     }}>
 
                     {groupsWithoutAdmin.map((group) => (
                         <div
-                            className={"bg-gray-50 dark:bg-gray-800 dark:bg-opacity-30 my-4 rounded-lg ml-4"}
+                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-3 mr-1"}
                             key={`drawer_group_${group}`}>
                             {buildGroupHeader(group)}
                             {Object.values(navigationEntries)
@@ -93,7 +93,8 @@ export function DefaultDrawer({
                                 .map((view, index) =>
                                     <DrawerNavigationItem
                                         key={`navigation_${index}`}
-                                        icon={<IconForView collectionOrView={view.collection ?? view.view} size={"small"}/>}
+                                        icon={<IconForView collectionOrView={view.collection ?? view.view}
+                                                           size={"small"}/>}
                                         tooltipsOpen={tooltipsOpen}
                                         adminMenuOpen={adminMenuOpen}
                                         drawerOpen={drawerOpen}
@@ -112,7 +113,7 @@ export function DefaultDrawer({
                     trigger={
                         <IconButton
                             shape={"square"}
-                            className={"m-4 text-gray-900 dark:text-white w-fit"}>
+                            className={"m-4 text-surface-900 dark:text-white w-fit"}>
                             <Tooltip title={"Admin"}
                                      open={tooltipsOpen}
                                      side={"right"} sideOffset={28}>
@@ -163,18 +164,19 @@ export function DrawerLogo({ logo }: {
             transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
             padding: drawerOpen ? "32px 144px 0px 24px" : "72px 12px 0px 12px"
         }}
-        className={cls("cursor-pointer ml-4")}>
+        className={cls("cursor-pointer rounded ml-3 mr-1")}>
 
         <Tooltip title={"Home"}
                  sideOffset={20}
                  side="right">
             <Link
+                className={"block"}
                 to={navigation.basePath}>
                 {logo
                     ? <img src={logo}
                            alt="Logo"
-                           className={cls("max-w-full max-h-full",
-                               drawerOpen ?? "w-[112px] h-[112px]")}/>
+                           className={cls("max-w-full max-h-full transition-all",
+                               drawerOpen ? "w-[96px] h-[96px]" : "w-[32px] h-[32px]")}/>
                     : <FireCMSLogo/>}
 
             </Link>

package/src/core/DrawerNavigationItem.tsx

@@ -22,7 +22,7 @@ export function DrawerNavigationItem({
 }) {
 
     const iconWrap = <div
-        className={"text-gray-600 dark:text-gray-500"}>
+        className={"text-text-secondary dark:text-text-secondary-dark"}>
         {icon}
     </div>;
 
@@ -34,13 +34,13 @@ export function DrawerNavigationItem({
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
             className={({ isActive }: any) => cls("rounded-lg truncate",
-                "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-slate-800 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-white",
+                "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
                 "flex flex-row items-center mr-8",
                 // "transition-all ease-in-out delay-100 duration-300",
                 // drawerOpen ? "w-full" : "w-18",
                 drawerOpen ? "pl-4 h-12" : "pl-4 h-11",
-                "font-medium text-sm",
-                isActive ? "bg-slate-200 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-50" : ""
+                "font-semibold text-xs",
+                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
             )}
             to={url}
         >

package/src/core/EntityEditView.tsx

@@ -95,16 +95,16 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
  * You probably don't want to use this view directly since it is bound to the
  * side panel.
  */
-export function EntityEditView<M extends Record<string, any>, UserType extends User>({
-                                                                                         entityId,
-                                                                                         ...props
-                                                                                     }: EntityEditViewProps<M>) {
+export function EntityEditView<M extends Record<string, any>, USER extends User>({
+                                                                                     entityId,
+                                                                                     ...props
+                                                                                 }: EntityEditViewProps<M>) {
     const {
         entity,
         dataLoading,
         // eslint-disable-next-line no-unused-vars
         dataLoadingError
-    } = useEntityFetch<M, UserType>({
+    } = useEntityFetch<M, USER>({
         path: props.path,
         entityId: entityId,
         collection: props.collection,
@@ -185,7 +185,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         collection: inputCollection,
         path,
         values: entity?.values,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     }), [entity?.values, path, customizationController.propertyConfigs]);
 
     const initialStatus = copy ? "copy" : (entityIdProp ? "existing" : "new");
@@ -431,10 +431,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     return {};
                 })
                 .catch((e: any) => {
-                    const errors: Record<string, string> = {};
-                    e.inner.forEach((error: any) => {
-                        errors[error.path] = error.message;
-                    });
+                    // const errors: Record<string, string> = {};
+                    // e.inner.forEach((error: any) => {
+                    //     errors[error.path] = error.message;
+                    // });
                     return yupToFormErrors(e);
                 });
         }
@@ -446,7 +446,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         entityId,
         values: formex.values,
         previousValues: formex.initialValues,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
     const lastSavedValues = useRef<EntityValues<M> | undefined>(entity?.values);
@@ -778,12 +778,14 @@ 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>
+                            <div key={`additional_${key}`}>
                                 <LabelWithIconAndTooltip
                                     propertyKey={key}
                                     icon={<NotesIcon size={"small"}/>}
@@ -806,8 +808,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 })
                 .filter(Boolean)}
 
-        </>
-    );
+        </>);
 
     const disabled = formex.isSubmitting || (!modified && status === "existing");
     const formRef = React.useRef<HTMLDivElement>(null);
@@ -888,49 +889,46 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         let form = <>
 
             {pluginActions.length > 0 && <div
-                className={cls("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-slate-200 dark:bg-opacity-60 dark:bg-slate-800 backdrop-blur-md")}>
+                className={cls("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-surface-accent-200 dark:bg-opacity-60 dark:bg-surface-accent-800 backdrop-blur-md")}>
                 {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 +1002,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-surface-50 dark:bg-surface-950")}>
 
                     <div
                         className="pb-1 self-center">
@@ -1032,7 +1030,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                         onValueChange={(value) => {
                             onSideTabClick(value);
                         }}
-                        className="pl-4 pr-4 pt-0">
+                        innerClassName="pl-4 pr-4 pt-0">
 
                         <Tab
                             disabled={!hasAdditionalViews}

package/src/core/FireCMS.tsx

@@ -1,5 +1,7 @@
-import React, { useMemo } from "react";
+"use client";
 
+import React, { useMemo } from "react";
+import { CenteredView, Typography } from "@firecms/ui";
 import { CustomizationController, EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
 import { AuthControllerContext } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
@@ -12,7 +14,6 @@ import { DataSourceContext } from "../contexts/DataSourceContext";
 import { SideEntityControllerContext } from "../contexts/SideEntityControllerContext";
 import { NavigationContext } from "../contexts/NavigationContext";
 import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerContext";
-import { CenteredView, Typography, useLocaleConfig } from "@firecms/ui";
 import { DialogsProvider } from "../contexts/DialogsProvider";
 import { useBuildDataSource } from "../internal/useBuildDataSource";
 import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
@@ -31,7 +32,7 @@ import { useProjectLog } from "../hooks/useProjectLog";
 
  * @group Core
  */
-export function FireCMS<UserType extends User, EC extends EntityCollection>(props: FireCMSProps<UserType, EC>) {
+export function FireCMS<USER extends User, EC extends EntityCollection>(props: FireCMSProps<USER, EC>) {
 
     const {
         children,
@@ -51,8 +52,6 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         apiKey
     } = props;
 
-    useLocaleConfig(locale);
-
     /**
      * Controller in charge of fetching and persisting data
      */
@@ -89,6 +88,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         dataSourceDelegate,
         plugins
     });
+
     if (accessResponse?.message) {
         console.warn(accessResponse.message);
     }

package/src/core/SideDialogs.tsx

@@ -130,7 +130,7 @@ function SideDialogView({
             >
                 {panel &&
                     <div
-                        className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-gray-900 "}
+                        className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-surface-900 "}
                         style={{
                             width: panel.width,
                             transform: `translateX(-${offsetPosition * 200}px)`

package/src/core/field_configs.tsx

@@ -23,7 +23,6 @@ import {
     AddLinkIcon,
     BallotIcon,
     DriveFolderUploadIcon,
-    EmailIcon,
     FlagIcon,
     FormatListNumberedIcon,
     FormatQuoteIcon,
@@ -31,6 +30,7 @@ import {
     LinkIcon,
     ListAltIcon,
     ListIcon,
+    MailIcon,
     NumbersIcon,
     RepeatIcon,
     ScheduleIcon,
@@ -96,7 +96,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
         key: "email",
         name: "Email",
         description: "Text with email validation",
-        Icon: EmailIcon,
+        Icon: MailIcon,
         color: "#154fb3",
         property: {
             dataType: "string",
@@ -129,7 +129,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
     },
     multi_select: {
         key: "multi_select",
-        name: "Multi select",
+        name: "Multi select (enum)",
         description: "Select multiple text values from within an enumeration",
         Icon: ListAltIcon,
         color: "#4223c9",
@@ -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/PropertyFieldBinding.tsx

@@ -81,12 +81,13 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
      context,
      includeDescription,
      underlyingValueHasChanged,
-     disabled,
+     disabled: disabledProp,
      partOfArray,
      minimalistView,
      autoFocus,
      index,
-     size
+     size,
+     onPropertyChange
  }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
 
     const customizationController = useCustomizationController();
@@ -105,10 +106,12 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     values: fieldProps.form.values,
                     path: context.path,
                     entityId: context.entityId,
-                    fields: customizationController.propertyConfigs,
+                    propertyConfigs: customizationController.propertyConfigs,
                     index
                 });
 
+                const disabled = disabledProp || isReadOnly(resolvedProperty) || Boolean(resolvedProperty?.disabled);
+
                 if (resolvedProperty === null || isHidden(resolvedProperty)) {
                     return <></>;
                 } else if (isReadOnly(resolvedProperty)) {
@@ -122,6 +125,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     if (!propertyConfig) {
                         console.log("INTERNAL: Could not find field config for property", {
                             propertyKey,
+                            property,
                             resolvedProperty,
                             fields: customizationController.propertyConfigs,
                             propertyConfig
@@ -134,7 +138,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                         values: fieldProps.form.values,
                         path: context.path,
                         entityId: context.entityId,
-                        fields: customizationController.propertyConfigs,
+                        propertyConfigs: customizationController.propertyConfigs,
                         index
                     });
                     Component = configProperty.Field as ComponentType<FieldProps<T>>;
@@ -157,13 +161,14 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     partOfArray,
                     minimalistView,
                     autoFocus,
-                    size
+                    size,
+                    onPropertyChange
                 };
 
                 return <FieldInternal
                     Component={Component as ComponentType<FieldProps>}
                     componentProps={componentProps}
-                    fieldProps={fieldProps}/>;
+                    formexFieldProps={fieldProps}/>;
             }}
         </Field>
     );
@@ -189,26 +194,27 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
          autoFocus,
          context,
          disabled,
-         size
+         size,
+         onPropertyChange
      },
-     fieldProps
+     formexFieldProps
  }:
      {
          Component: ComponentType<FieldProps<T, any, M>>,
          componentProps: ResolvedPropertyFieldBindingProps<T, M>,
-         fieldProps: FormexFieldProps<T, any>
+         formexFieldProps: FormexFieldProps<T, any>
      }) {
 
     const { plugins } = useCustomizationController();
 
     const customFieldProps: any = property.customProps;
-    const value = fieldProps.field.value;
-    // const initialValue = fieldProps.meta.initialValue;
-    const error = getIn(fieldProps.form.errors, propertyKey);
-    const touched = getIn(fieldProps.form.touched, propertyKey);
+    const value = formexFieldProps.field.value;
+    // const initialValue = formexFieldProps.meta.initialValue;
+    const error = getIn(formexFieldProps.form.errors, propertyKey);
+    const touched = getIn(formexFieldProps.form.touched, propertyKey);
 
     const showError: boolean = error &&
-        (fieldProps.form.submitCount > 0 || property.validation?.unique) &&
+        (formexFieldProps.form.submitCount > 0 || property.validation?.unique) &&
         (!Array.isArray(error) || !!error.filter((e: any) => !!e).length);
 
     const WrappedComponent: ComponentType<FieldProps<T, any, M>> | null = useWrappedComponent({
@@ -221,16 +227,16 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
     });
     const UsedComponent: ComponentType<FieldProps<T>> = WrappedComponent ?? Component;
 
-    const isSubmitting = fieldProps.form.isSubmitting;
+    const isSubmitting = formexFieldProps.form.isSubmitting;
 
     const setValue = useCallback((value: T | null, shouldValidate?: boolean) => {
-        fieldProps.form.setFieldTouched(propertyKey, true, false);
-        fieldProps.form.setFieldValue(propertyKey, value, shouldValidate);
+        formexFieldProps.form.setFieldTouched(propertyKey, true, false);
+        formexFieldProps.form.setFieldValue(propertyKey, value, shouldValidate);
     }, []);
 
     const setFieldValue = useCallback((otherPropertyKey: string, value: CMSType | null, shouldValidate?: boolean) => {
-        fieldProps.form.setFieldTouched(propertyKey, true, false);
-        fieldProps.form.setFieldValue(otherPropertyKey, value, shouldValidate);
+        formexFieldProps.form.setFieldTouched(propertyKey, true, false);
+        formexFieldProps.form.setFieldValue(otherPropertyKey, value, shouldValidate);
     }, []);
 
     const cmsFieldProps: FieldProps<T, CustomProps, M> = {
@@ -251,7 +257,8 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
         autoFocus: autoFocus ?? false,
         customProps: customFieldProps,
         context,
-        size
+        size,
+        onPropertyChange
     };
 
     return (

package/src/form/components/CustomIdField.tsx

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

package/src/form/components/StorageItemPreview.tsx

@@ -31,12 +31,12 @@ 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 &&
                 <div
-                    className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-gray-900">
+                    className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-surface-900">
 
                     <Tooltip
                         asChild={true}
@@ -67,7 +67,7 @@ export function StorageItemPreview({
                 <div
                     onClick={(e) => e.stopPropagation()}
                     className="flex flex-col items-center justify-center w-full h-full">
-                    <DescriptionIcon className="text-gray-700 dark:text-gray-300"/>
+                    <DescriptionIcon className="text-surface-700 dark:text-surface-300"/>
                 </div>
             }
 

package/src/form/components/index.tsx

@@ -1,4 +1,3 @@
-export * from "./FormikArrayContainer";
 export * from "./FieldHelperText";
 export * from "./LabelWithIcon";
 export * from "./LabelWithIconAndTooltip";

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,