@firecms/core 3.0.0-canary.211 → 3.0.0-canary.213

package/src/form/PropertyFieldBinding.tsx

@@ -17,7 +17,7 @@ import {
 import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
 
 import { isHidden, isPropertyBuilder, isReadOnly, resolveProperty } from "../util";
-import { useCustomizationController } from "../hooks";
+import { useAuthController, useCustomizationController } from "../hooks";
 import { Typography } from "@firecms/ui";
 import { getFieldConfig, getFieldId } from "../core";
 import { ErrorBoundary } from "../components";
@@ -90,6 +90,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
      onPropertyChange
  }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
 
     return (
@@ -107,7 +108,8 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     path: context.path,
                     entityId: context.entityId,
                     propertyConfigs: customizationController.propertyConfigs,
-                    index
+                    index,
+                    authController
                 });
 
                 const disabled = disabledProp || isReadOnly(resolvedProperty) || Boolean(resolvedProperty?.disabled);
@@ -139,7 +141,8 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                         path: context.path,
                         entityId: context.entityId,
                         propertyConfigs: customizationController.propertyConfigs,
-                        index
+                        index,
+                        authController
                     });
                     Component = configProperty.Field as ComponentType<FieldProps<T>>;
                 }

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -5,6 +5,7 @@ import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
 import { getArrayResolvedProperties, getIconForProperty, isReadOnly } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useAuthController } from "../../hooks";
 
 /**
  * Array field used for custom
@@ -27,6 +28,7 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
                                                                         disabled
                                                                     }: FieldProps<T, any, any>) {
 
+    const authController = useAuthController();
     const minimalistView = minimalistViewProp || property.minimalistView;
 
     let resolvedProperties = "resolvedProperties" in property ? property.resolvedProperties : undefined;
@@ -35,7 +37,8 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
             propertyValue: value,
             propertyKey,
             property,
-            ignoreMissingFields: false
+            ignoreMissingFields: false,
+            authController
         })
     }
 

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -88,7 +88,7 @@ export function BlockFieldBinding<T extends Array<any>>({
                                  buildEntry={buildEntry}
                                  onInternalIdAdded={setLastAddedId}
                                  disabled={isSubmitting || Boolean(property.disabled)}
-                                 includeAddButton={!property.disabled}
+                                 canAddElements={!property.disabled}
                                  onValueChange={(value) => setFieldValue(propertyKey, value)}
                                  newDefaultEntry={{
                                      [property.oneOf!.typeField ?? DEFAULT_ONE_OF_TYPE]: firstOneOfKey,

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -329,7 +329,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                                 addLabel={fieldKey ? `Add to ${fieldKey}` : "Add"}
                                 size={"small"}
                                 disabled={disabled || !fieldKey}
-                                includeAddButton={true}
+                                canAddElements={true}
                                 onValueChange={(newValue) => {
                                     setValue({
                                         ...value,

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -8,6 +8,7 @@ import {
     randomString,
     ResolvedArrayProperty,
     ResolvedStringProperty,
+    useAuthController,
     useStorageSource
 } from "../../index";
 import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
@@ -34,6 +35,7 @@ export function MarkdownEditorFieldBinding({
                                                customProps,
                                            }: FieldProps<string, MarkdownEditorFieldProps>) {
 
+    const authController = useAuthController();
     const disabled = disabledProp || isSubmitting;
     const highlight = customProps?.highlight;
     const editorProps = customProps?.editorProps;
@@ -62,7 +64,8 @@ export function MarkdownEditorFieldBinding({
 
     const resolvedProperty = resolveProperty({
         propertyOrBuilder: property as PropertyOrBuilder,
-        values: entityValues
+        values: entityValues,
+        authController
     }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
 
     const fileNameBuilder = useCallback(async (file: File) => {
@@ -89,7 +92,8 @@ export function MarkdownEditorFieldBinding({
         if (!storage) return "/";
         const resolvedProperty = resolveProperty({
             propertyOrBuilder: property,
-            values: entityValues
+            values: entityValues,
+            authController
         }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
         return resolveStoragePathString({
             input: storage.storagePath,

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -23,7 +23,7 @@ export function MultiSelectFieldBinding({
                                             disabled,
                                             property,
                                             includeDescription,
-                                            size = "medium",
+                                            size = "large",
                                             autoFocus
                                         }: FieldProps<EnumType[], any, any>) {
 
@@ -83,7 +83,7 @@ export function MultiSelectFieldBinding({
         <>
             <MultiSelect
                 className={"w-full mt-2"}
-                size={size === "medium" ? "medium" : "small"}
+                size={size}
                 value={validValue ? value.map((v) => v.toString()) : []}
                 disabled={disabled}
                 modalPopover={true}

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -6,6 +6,7 @@ import { getArrayResolvedProperties, getDefaultValueFor, getIconForProperty, mer
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useAuthController } from "../../hooks";
 
 /**
  * Generic array field that allows reordering and renders the child property
@@ -31,6 +32,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                              disabled
                                                          }: FieldProps<T>) {
 
+    const authController = useAuthController();
     const minimalistView = minimalistViewProp || property.minimalistView;
 
     if (!property.of)
@@ -42,7 +44,8 @@ export function RepeatFieldBinding<T extends Array<any>>({
             propertyValue: value,
             propertyKey,
             property,
-            ignoreMissingFields: false
+            ignoreMissingFields: false,
+            authController
         })
     }
 
@@ -81,13 +84,16 @@ export function RepeatFieldBinding<T extends Array<any>>({
         </ErrorBoundary>;
     };
 
+    const canAddElements = !property.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === undefined);
+    const sortable = property.sortable === undefined ? true : property.sortable;
     const arrayContainer = <ArrayContainer droppableId={propertyKey}
                                            addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
                                            value={value}
                                            buildEntry={buildEntry}
                                            onInternalIdAdded={setLastAddedId}
                                            disabled={isSubmitting || Boolean(property.disabled)}
-                                           includeAddButton={!property.disabled}
+                                           canAddElements={canAddElements}
+                                           sortable={sortable}
                                            newDefaultEntry={getDefaultValueFor(property.of)}
                                            onValueChange={(value) => setFieldValue(propertyKey, value)}
                                            className={property.widthPercentage !== undefined ? "mt-8" : undefined}

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -13,7 +13,7 @@ import { PreviewSize } from "../../preview";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 
 import { getIconForProperty, isReadOnly, resolveProperty } from "../../util";
-import { useSnackbarController, useStorageSource } from "../../hooks";
+import { useAuthController, useSnackbarController, useStorageSource } from "../../hooks";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { StorageFieldItem, useStorageUploadController } from "../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../components/StorageUploadProgress";
@@ -57,6 +57,8 @@ export function StorageUploadFieldBinding({
                                               isSubmitting,
                                           }: StorageUploadFieldProps) {
 
+    const authController = useAuthController();
+
     if (!context.entityId)
         throw new Error("StorageUploadFieldBinding: Entity id is null");
 
@@ -91,6 +93,7 @@ export function StorageUploadFieldBinding({
 
     const resolvedProperty = resolveProperty({
         propertyOrBuilder: property as PropertyOrBuilder,
+        authController
     }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
 
     return (

package/src/hooks/data/save.ts

@@ -1,12 +1,4 @@
-import {
-    DataSource,
-    Entity,
-    EntityCollection,
-    EntityValues,
-    FireCMSContext,
-    SaveEntityProps,
-    User
-} from "../../types";
+import { DataSource, Entity, EntityCollection, EntityValues, FireCMSContext, SaveEntityProps, User } from "../../types";
 import { useDataSource } from "./useDataSource";
 import { resolveCollection } from "../../util";
 
@@ -49,23 +41,23 @@ export type SaveEntityWithCallbacksProps<M extends Record<string, any>> =
  * @group Hooks and utilities
  */
 export async function saveEntityWithCallbacks<M extends Record<string, any>, USER extends User>({
-                                                                                                        collection,
-                                                                                                        path,
-                                                                                                        entityId,
-                                                                                                        values,
-                                                                                                        previousValues,
-                                                                                                        status,
-                                                                                                        dataSource,
-                                                                                                        context,
-                                                                                                        onSaveSuccess,
-                                                                                                        onSaveFailure,
-                                                                                                        onPreSaveHookError,
-                                                                                                        onSaveSuccessHookError
-                                                                                                    }: SaveEntityWithCallbacksProps<M> & {
-                                                                                                        collection: EntityCollection<M, USER>,
-                                                                                                        dataSource: DataSource,
-                                                                                                        context: FireCMSContext<USER>,
-                                                                                                    }
+                                                                                                    collection,
+                                                                                                    path,
+                                                                                                    entityId,
+                                                                                                    values,
+                                                                                                    previousValues,
+                                                                                                    status,
+                                                                                                    dataSource,
+                                                                                                    context,
+                                                                                                    onSaveSuccess,
+                                                                                                    onSaveFailure,
+                                                                                                    onPreSaveHookError,
+                                                                                                    onSaveSuccessHookError
+                                                                                                }: SaveEntityWithCallbacksProps<M> & {
+                                                                                                    collection: EntityCollection<M, USER>,
+                                                                                                    dataSource: DataSource,
+                                                                                                    context: FireCMSContext,
+                                                                                                }
 ): Promise<void> {
 
     if (status !== "new" && !entityId) {
@@ -85,7 +77,8 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, USE
                 path,
                 values: previousValues as EntityValues<M>,
                 entityId,
-                propertyConfigs: customizationController.propertyConfigs
+                propertyConfigs: customizationController.propertyConfigs,
+                authController: context.authController
             });
             updatedValues = await callbacks.onPreSave({
                 collection: resolvedCollection,
@@ -127,7 +120,8 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, USE
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    propertyConfigs: customizationController.propertyConfigs
+                    propertyConfigs: customizationController.propertyConfigs,
+                    authController: context.authController
                 });
                 callbacks.onSaveSuccess({
                     collection: resolvedCollection,
@@ -156,7 +150,8 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, USE
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    propertyConfigs: customizationController.propertyConfigs
+                    propertyConfigs: customizationController.propertyConfigs,
+                    authController: context.authController
                 });
                 callbacks.onSaveFailure({
                     collection: resolvedCollection,

package/src/hooks/useFireCMSContext.tsx

@@ -67,33 +67,3 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
 
     return fireCMSContextRef.current;
 }
-
-// export const useFireCMSContext = <USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>>(): FireCMSContext<USER, AuthControllerType> => {
-//
-//     const authController = useAuthController<USER, AuthControllerType>();
-//     const sideDialogsController = useSideDialogsController();
-//     const sideEntityController = useSideEntityController();
-//     const navigation = useNavigationController();
-//     const dataSource = useDataSource();
-//     const storageSource = useStorageSource();
-//     const snackbarController = useSnackbarController();
-//     const userConfigPersistence = useUserConfigurationPersistence();
-//     const dialogsController = useDialogsController();
-//     const customizationController = useCustomizationController();
-//     const analyticsController = useAnalyticsController();
-//
-//     return {
-//         authController,
-//         sideDialogsController,
-//         sideEntityController,
-//         navigation,
-//         dataSource,
-//         storageSource,
-//         snackbarController,
-//         userConfigPersistence,
-//         dialogsController,
-//         customizationController,
-//         analyticsController
-//     };
-//
-// };

package/src/internal/useBuildDataSource.ts

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import {
+    AuthController,
     DataSource,
     DataSourceDelegate,
     DeleteEntityProps,
@@ -27,11 +28,13 @@ import { resolveCollection, updateDateAutoValues } from "../util";
 export function useBuildDataSource({
                                        delegate,
                                        propertyConfigs,
-                                       navigationController
+                                       navigationController,
+                                       authController
                                    }: {
     delegate: DataSourceDelegate,
     propertyConfigs?: Record<string, PropertyConfig>;
     navigationController: NavigationController;
+    authController: AuthController;
 }): DataSource {
 
     return {
@@ -209,26 +212,27 @@ export function useBuildDataSource({
                     collection,
                     path,
                     entityId,
-                    propertyConfigs: propertyConfigs
+                    propertyConfigs: propertyConfigs,
+                    authController
                 })
                 : undefined;
 
             const properties: ResolvedProperties<M> | undefined = resolvedCollection?.properties;
 
-            const firestoreValues = usedDelegate.cmsToDelegateModel(
+            const delegateValues = usedDelegate.cmsToDelegateModel(
                 values,
             );
 
             const updatedValues: EntityValues<M> = properties
                 ? updateDateAutoValues(
                     {
-                        inputValues: firestoreValues,
+                        inputValues: delegateValues,
                         properties,
                         status,
                         timestampNowValue: usedDelegate.currentTime?.() ?? new Date(),
                         setDateToMidnight: usedDelegate.setDateToMidnight
                     })
-                : firestoreValues;
+                : delegateValues;
 
             return usedDelegate.saveEntity({
                 path,

package/src/internal/useBuildSideEntityController.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import {
+    AuthController,
     CustomizationController,
     EntityCollection,
     EntitySidePanelProps,
@@ -25,7 +26,7 @@ import { JSON_TAB_VALUE } from "../core/EntityEditView";
 const NEW_URL_HASH = "new_side";
 const SIDE_URL_HASH = "side";
 
-export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean, customizationController: CustomizationController): string {
+export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean, customizationController: CustomizationController, authController: AuthController): string {
     if (small) return CONTAINER_FULL_WIDTH;
 
     const {
@@ -49,21 +50,22 @@ export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: bool
         } else if (!props.collection) {
             return FORM_CONTAINER_WIDTH;
         } else {
-            return calculateCollectionDesiredWidth(props.collection);
+            return calculateCollectionDesiredWidth(props.collection, authController);
         }
     }
 }
 
 const collectionViewWidthCache: { [key: string]: string } = {};
 
-function calculateCollectionDesiredWidth(collection: EntityCollection<any>): string {
+function calculateCollectionDesiredWidth(collection: EntityCollection<any>, authController: AuthController): string {
     if (collectionViewWidthCache[collection.id]) {
         return collectionViewWidthCache[collection.id];
     }
     const resolvedCollection = resolveCollection({
         collection,
         path: "__ignored",
-        ignoreMissingFields: true
+        ignoreMissingFields: true,
+        authController
     });
 
     let result = FORM_CONTAINER_WIDTH
@@ -98,7 +100,9 @@ function getNestedPropertiesDepth(property: ResolvedProperty, accumulator: numbe
 }
 
 export const useBuildSideEntityController = (navigation: NavigationController,
-                                             sideDialogsController: SideDialogsController): SideEntityController => {
+                                             sideDialogsController: SideDialogsController,
+                                             authController: AuthController
+): SideEntityController => {
 
     const location = useLocation();
     const initialised = useRef<boolean>(false);
@@ -106,7 +110,6 @@ export const useBuildSideEntityController = (navigation: NavigationController,
 
     const smallLayout = !useLargeLayout();
 
-    // only on initialisation, create panels from URL
     useEffect(() => {
 
         const newFlag = location.hash === `#${NEW_URL_HASH}`;
@@ -119,9 +122,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                 for (let i = 0; i < panelsFromUrl.length; i++) {
                     const props = panelsFromUrl[i];
                     if (i === 0)
-                        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
+                        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController));
                     else
-                        sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController))
+                        sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController))
                 }
             }
             initialised.current = true;
@@ -141,7 +144,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                     return;
                 }
                 const lastPanel = panelsFromUrl[panelsFromUrl.length - 1];
-                const panelProps = propsToSidePanel(lastPanel, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController);
+                const panelProps = propsToSidePanel(lastPanel, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController);
                 const lastCurrentPanel = currentPanelKeys.length > 0 ? currentPanelKeys[currentPanelKeys.length - 1] : undefined;
                 if (!lastCurrentPanel || lastCurrentPanel !== panelProps.key) {
                     sideDialogsController.replace(panelProps);
@@ -154,7 +157,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
     useEffect(() => {
         const updatedSidePanels = sideDialogsController.sidePanels.map(sidePanelProps => {
             if (sidePanelProps.additional) {
-                return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController);
+                return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController);
             }
             return sidePanelProps;
         });
@@ -187,10 +190,11 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                 navigation.buildUrlCollectionPath,
                 navigation.resolveIdsFrom,
                 smallLayout,
-                customizationController
+                customizationController,
+                authController
             ));
 
-    }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout]);
+    }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, authController.user]);
 
     const replace = useCallback((props: EntitySidePanelProps<any>) => {
 
@@ -198,9 +202,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
             throw Error("If you want to copy an entity you need to provide an entityId");
         }
 
-        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController));
+        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, smallLayout, customizationController, authController));
 
-    }, [navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, sideDialogsController, smallLayout]);
+    }, [navigation.buildUrlCollectionPath, navigation.resolveIdsFrom, sideDialogsController, smallLayout, authController.user]);
 
     return {
         close,
@@ -261,7 +265,9 @@ const propsToSidePanel = (props: EntitySidePanelProps,
                           buildUrlCollectionPath: (path: string) => string,
                           resolveIdsFrom: (pathWithAliases: string) => string,
                           smallLayout: boolean,
-                          customizationController: CustomizationController): SideDialogPanelProps => {
+                          customizationController: CustomizationController,
+                          authController: AuthController
+): SideDialogPanelProps => {
 
     const collectionPath = removeInitialAndTrailingSlashes(props.path);
 
@@ -276,7 +282,7 @@ const propsToSidePanel = (props: EntitySidePanelProps,
         formProps: props.formProps
     };
 
-    const entityViewWidth = getEntityViewWidth(props, smallLayout, customizationController);
+    const entityViewWidth = getEntityViewWidth(props, smallLayout, customizationController, authController);
 
     return {
         key: `${props.path}/${props.entityId}`,

package/src/preview/PropertyPreview.tsx

@@ -13,7 +13,7 @@ import {
 import { resolveProperty } from "../util";
 
 import { PropertyPreviewProps } from "./PropertyPreviewProps";
-import { useCustomizationController } from "../hooks";
+import { useAuthController, useCustomizationController } from "../hooks";
 import { EmptyValue } from "./components/EmptyValue";
 import { UrlComponentPreview } from "./components/UrlComponentPreview";
 import { StorageThumbnail } from "./components/StorageThumbnail";
@@ -37,6 +37,7 @@ import { ErrorView } from "../components";
  */
 export const PropertyPreview = React.memo(function PropertyPreview<T extends CMSType>(props: PropertyPreviewProps<T>) {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
 
     let content: React.ReactNode | any;
@@ -53,7 +54,8 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
     const property = resolveProperty({
         propertyKey,
         propertyOrBuilder: inputProperty,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (property === null) {

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ErrorBoundary } from "../../components";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { resolveArrayProperty } from "../../util";
@@ -15,12 +15,13 @@ export function ArrayOfMapsPreview({
                                        size,
                                        // entity
                                    }: PropertyPreviewProps<Record<string, any>[]>) {
-
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property?.of)) {

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -1,6 +1,6 @@
 import { ResolvedReferenceProperty } from "../../types";
 import { resolveArrayProperty } from "../../util";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { ReferencePreview } from "../components/ReferencePreview";
 
@@ -13,12 +13,13 @@ export function ArrayOfReferencesPreview({
                                              property: inputProperty,
                                              size
                                          }: PropertyPreviewProps<any[]>) {
-
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property?.of)) {

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
 
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { ErrorBoundary } from "../../components";
@@ -19,11 +19,13 @@ export function ArrayOfStorageComponentsPreview({
                                                     size
                                                 }: PropertyPreviewProps<any[]>) {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property.of)) {

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -3,7 +3,7 @@ import { ResolvedStringProperty } from "../../types";
 
 import { resolveArrayProperty } from "../../util";
 import { PropertyPreviewProps, StringPropertyPreview } from "../../preview";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { ErrorBoundary } from "../../components";
 
 /**
@@ -16,12 +16,13 @@ export function ArrayOfStringsPreview({
                                           // entity,
                                           size
                                       }: PropertyPreviewProps<string[]>) {
-
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property.of)) {