@firecms/core 3.0.0-canary.4 → 3.0.0-canary.41

package/src/core/Drawer.tsx

@@ -2,10 +2,10 @@ import React, { useCallback } from "react";
 
 import { useLargeLayout, useNavigationController } from "../hooks";
 
-import { NavLink } from "react-router-dom";
+import { NavLink, useNavigate } from "react-router-dom";
 import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
 import { IconForView } from "../util";
-import { cn, Tooltip, Typography } from "@firecms/ui";
+import { cn, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 
 /**
@@ -33,6 +33,9 @@ export function Drawer({
 
     const tooltipsOpen = hovered && !drawerOpen;
     const largeLayout = useLargeLayout();
+    const navigate = useNavigate();
+
+    const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
 
     if (!navigation.topLevelNavigation)
         throw Error("Navigation not ready in Drawer");
@@ -42,7 +45,8 @@ export function Drawer({
         groups
     }: TopNavigationResult = navigation.topLevelNavigation;
 
-    const ungroupedNavigationViews = Object.values(navigationEntries).filter(e => !e.group);
+    const adminViews = navigationEntries.filter(e => e.type === "admin") ?? [];
+    const groupsWithoutAdmin = groups.filter(g => g !== "Admin");
 
     const buildGroupHeader = useCallback((group?: string) => {
         if (!drawerOpen) return <div className="h-12 w-full"/>;
@@ -67,41 +71,64 @@ export function Drawer({
     };
 
     return (
-        <div className={"flex-grow overflow-scroll no-scrollbar"}>
-
-            {groups.map((group) => (
-                <React.Fragment
-                    key={`drawer_group_${group}`}>
-                    {buildGroupHeader(group)}
-                    {Object.values(navigationEntries)
-                        .filter(e => e.group === group)
-                        .map((view, index) =>
-                            <DrawerNavigationItem
-                                key={`navigation_${index}`}
-                                icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
-                                tooltipsOpen={tooltipsOpen}
-                                drawerOpen={drawerOpen}
-                                onClick={() => onClick(view)}
-                                url={view.url}
-                                name={view.name}/>)}
-                </React.Fragment>
-            ))}
-
-            {ungroupedNavigationViews.length > 0 && buildGroupHeader()}
-
-            {ungroupedNavigationViews.map((view, index) => {
-
-                return <DrawerNavigationItem
-                    key={`navigation_${index}`}
-                    icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
-                    tooltipsOpen={tooltipsOpen}
-                    onClick={() => onClick(view)}
-                    drawerOpen={drawerOpen}
-                    url={view.url}
-                    name={view.name}/>;
-            })}
-
-        </div>
+        <>
+
+            <div className={"flex-grow overflow-scroll no-scrollbar"}>
+
+                {groupsWithoutAdmin.map((group) => (
+                    <React.Fragment
+                        key={`drawer_group_${group}`}>
+                        {buildGroupHeader(group)}
+                        {Object.values(navigationEntries)
+                            .filter(e => e.group === group)
+                            .map((view, index) =>
+                                <DrawerNavigationItem
+                                    key={`navigation_${index}`}
+                                    icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
+                                    tooltipsOpen={tooltipsOpen}
+                                    drawerOpen={drawerOpen}
+                                    onClick={() => onClick(view)}
+                                    url={view.url}
+                                    name={view.name}/>)}
+                    </React.Fragment>
+                ))}
+
+            </div>
+
+            {adminViews.length > 0 && <Menu
+                open={adminMenuOpen}
+                onOpenChange={setAdminMenuOpen}
+                trigger={
+                    <IconButton
+                        shape={"square"}
+                        className={"m-4 text-gray-900 dark:text-white w-fit"}>
+                        <Tooltip title={"Admin"}
+                                 open={tooltipsOpen}
+                                 side={"right"} sideOffset={28}>
+                            <MoreVertIcon/>
+                        </Tooltip>
+                        {drawerOpen && <div
+                            className={cn(
+                                drawerOpen ? "opacity-100" : "opacity-0 hidden",
+                                "mx-4 font-inherit text-inherit"
+                            )}>
+                            ADMIN
+                        </div>}
+                    </IconButton>}
+            >
+                {adminViews.map((entry, index) =>
+                    <MenuItem
+                        onClick={(event) => {
+                            event.preventDefault();
+                            navigate(entry.path);
+                        }}
+                        key={`navigation_${index}`}>
+                        {<IconForView collectionOrView={entry.view}/>}
+                        {entry.name}
+                    </MenuItem>)}
+
+            </Menu>}
+        </>
     );
 }
 
@@ -133,7 +160,7 @@ export function DrawerNavigationItem({
             transition: drawerOpen ? "width 150ms ease-in" : undefined
         }}
         className={({ isActive }: any) => cn("rounded-r-xl truncate",
-            "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-gray-100",
+            "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-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",

package/src/{internal/EntityView.tsx → core/EntityEditView.tsx}

@@ -9,10 +9,9 @@ import {
     FormContext,
     User
 } from "../types";
-import { CircularProgressCenter, EntityCollectionView, EntityPreview, ErrorBoundary, } from "../components";
+import { CircularProgressCenter, EntityCollectionView, EntityView, ErrorBoundary, } from "../components";
 import {
     canEditEntity,
-    fullPathToCollectionSegments,
     removeInitialAndTrailingSlashes,
     resolveDefaultSelectedView,
     resolveEntityView,
@@ -32,12 +31,12 @@ import {
 import { EntityForm } from "../form";
 import { CircularProgress, CloseIcon, cn, defaultBorderMixin, IconButton, Tab, Tabs, Typography } from "@firecms/ui";
 import { EntityFormSaveParams } from "../form/EntityForm";
-import { FORM_CONTAINER_WIDTH } from "./common";
-import { useSideDialogContext } from "../core";
+import { FORM_CONTAINER_WIDTH } from "../internal/common";
+import { useSideDialogContext } from "./index";
 
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
 
-export interface EntityViewProps<M extends Record<string, any>> {
+export interface EntityEditViewProps<M extends Record<string, any>> {
     path: string;
     collection: EntityCollection<M>;
     entityId?: string;
@@ -56,18 +55,18 @@ export interface EntityViewProps<M extends Record<string, any>> {
  * You probably don't want to use this view directly since it is bound to the
  * side panel. Instead, you might want to use {@link EntityForm} or {@link EntityCollectionView}
  */
-export function EntityView<M extends Record<string, any>, UserType extends User>({
-                                                                                     path,
-                                                                                     entityId,
-                                                                                     selectedSubPath,
-                                                                                     copy,
-                                                                                     collection,
-                                                                                     parentCollectionIds,
-                                                                                     onValuesAreModified,
-                                                                                     formWidth,
-                                                                                     onUpdate,
-                                                                                     onClose
-                                                                                 }: EntityViewProps<M>) {
+export function EntityEditView<M extends Record<string, any>, UserType extends User>({
+                                                                                         path,
+                                                                                         entityId,
+                                                                                         selectedSubPath,
+                                                                                         copy,
+                                                                                         collection,
+                                                                                         parentCollectionIds,
+                                                                                         onValuesAreModified,
+                                                                                         formWidth,
+                                                                                         onUpdate,
+                                                                                         onClose,
+                                                                                     }: EntityEditViewProps<M>) {
 
     if (collection.customId && collection.formAutoSave) {
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
@@ -95,7 +94,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
 
     const resolvedFormWidth: string = typeof formWidth === "number" ? `${formWidth}px` : formWidth ?? FORM_CONTAINER_WIDTH;
 
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
     const sideDialogContext = useSideDialogContext();
     const sideEntityController = useSideEntityController();
     const snackbarController = useSnackbarController();
@@ -154,29 +153,12 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
         if (status === "new") {
             setReadOnly(false);
         } else {
-            const editEnabled = usedEntity ? canEditEntity(collection, authController, fullPathToCollectionSegments(path), usedEntity ?? null) : false;
+            const editEnabled = usedEntity ? canEditEntity(collection, authController, path, usedEntity ?? null) : false;
             if (usedEntity)
                 setReadOnly(!editEnabled);
         }
     }, [authController, usedEntity, status]);
 
-    // useEffect(() => {
-    //     if (largeLayoutTabSelected.current === largeLayout)
-    //         return;
-    //     // open first tab by default in large layouts
-    //     if (selectedSubPath !== defaultSelectedView) {
-    //         console.log("Replacing url 1", defaultSelectedView);
-    //         sideEntityController.replace({
-    //             path,
-    //             entityId,
-    //             selectedSubPath: defaultSelectedView,
-    //             updateUrl: true,
-    //             collection
-    //         });
-    //     }
-    //     largeLayoutTabSelected.current = largeLayout;
-    // }, [defaultSelectedView, largeLayout, selectedSubPath]);
-
     const onPreSaveHookError = useCallback((e: Error) => {
         setSaving(false);
         snackbarController.open({
@@ -222,7 +204,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
                 entityId: updatedEntity.id,
                 selectedSubPath: selectedTabRef.current,
                 updateUrl: true,
-                collection
+                collection,
             });
         }
 
@@ -302,6 +284,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
             .map(e => resolveEntityView(e, customizationController.entityViews))
             .filter(Boolean) as EntityCustomView[]
         : [];
+
     const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
         .map(
             (customView, colIndex) => {
@@ -382,7 +365,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
             entityId,
             selectedSubPath: value === MAIN_TAB_VALUE ? undefined : value,
             updateUrl: true,
-            collection
+            collection,
         });
     };
 
@@ -463,7 +446,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
                         className={"mt-16 mb-8 mx-8"}
                         variant={"h4"}>{collection.singularName ?? collection.name}
                     </Typography>
-                    <EntityPreview
+                    <EntityView
                         className={"px-12"}
                         entity={usedEntity as Entity<M>}
                         path={path}

package/src/core/EntitySidePanel.tsx

@@ -4,7 +4,7 @@ import { EntitySidePanelProps } from "../types";
 import { useNavigationController } from "../hooks";
 
 import { ErrorBoundary } from "../components";
-import { EntityView } from "../internal/EntityView";
+import { EntityEditView } from "./EntityEditView";
 import { useSideDialogContext } from "./SideDialogs";
 
 /**
@@ -77,7 +77,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     return (
         <>
             <ErrorBoundary>
-                <EntityView
+                <EntityEditView
                     {...props}
                     formWidth={props.width}
                     collection={collection}

package/src/core/FireCMS.tsx

@@ -12,8 +12,7 @@ import { DataSourceContext } from "../contexts/DataSourceContext";
 import { SideEntityControllerContext } from "../contexts/SideEntityControllerContext";
 import { NavigationContext } from "../contexts/NavigationContext";
 import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerContext";
-import { useLocaleConfig } from "../internal/useLocaleConfig";
-import { CenteredView } from "@firecms/ui";
+import { CenteredView, Typography, useLocaleConfig } from "@firecms/ui";
 import { DialogsProvider } from "../contexts/DialogsProvider";
 import { useBuildDataSource } from "../internal/useBuildDataSource";
 import { useBuildCustomizationController } from "../internal/useBuildCustomizationController";
@@ -85,7 +84,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         onAnalyticsEvent
     }), []);
 
-    useProjectLog(authController);
+    const accessResponse = useProjectLog(authController, plugins);
 
     if (navigationController.navigationLoadingError) {
         return (
@@ -107,6 +106,22 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         );
     }
 
+    if (accessResponse?.blocked) {
+        return (
+            <CenteredView maxWidth={"md"} fullScreen={true}>
+                <Typography variant={"h4"}>
+                    Access blocked
+                </Typography>
+                <Typography>
+                    This app has been blocked. Please reach out at <a
+                    href={"mailto:hello@firecms.co"}>hello@firecms.co</a> for more information.
+                </Typography>
+                {accessResponse?.message &&
+                    <Typography>Response from the server: {accessResponse?.message}</Typography>}
+            </CenteredView>
+        );
+    }
+
     return (
         <ModeControllerContext.Provider value={modeController}>
             <AnalyticsContext.Provider value={analyticsController}>

package/src/core/NavigationRoutes.tsx

@@ -59,6 +59,14 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
                     cmsViews.push(buildCMSViewRoute(cmsView.path, cmsView));
             });
         }
+        if (navigation.adminViews) {
+            navigation.adminViews.forEach((cmsView) => {
+                if (Array.isArray(cmsView.path))
+                    cmsViews.push(...cmsView.path.map(path => buildCMSViewRoute(path, cmsView)));
+                else
+                    cmsViews.push(buildCMSViewRoute(cmsView.path, cmsView));
+            });
+        }
 
         // we reorder collections so that nested paths are included first
         const sortedCollections = [...(navigation.collections ?? [])]

package/src/core/SideEntityView.tsx

@@ -0,0 +1,38 @@
+import { User } from "../types";
+import { useSideDialogContext } from "./SideDialogs";
+import { useSideEntityController } from "../hooks";
+import { FORM_CONTAINER_WIDTH } from "../internal/common";
+import { EntityEditViewProps } from "./EntityEditView";
+
+export type SideEntityViewProps<M extends Record<string, any>> = EntityEditViewProps<M> & {
+    formWidth?: number | string;
+    onClose?: () => void;
+}
+
+export function SideEntityView<M extends Record<string, any>, UserType extends User>({
+                                                                                         path,
+                                                                                         entityId,
+                                                                                         selectedSubPath,
+                                                                                         copy,
+                                                                                         collection,
+                                                                                         parentCollectionIds,
+                                                                                         onValuesAreModified,
+                                                                                         formWidth,
+                                                                                         onUpdate,
+                                                                                         onClose
+                                                                                     }: SideEntityViewProps<M>) {
+
+    const sideDialogContext = useSideDialogContext();
+    const sideEntityController = useSideEntityController();
+    const resolvedFormWidth: string = typeof formWidth === "number" ? `${formWidth}px` : formWidth ?? FORM_CONTAINER_WIDTH;
+
+    const onCloseHandler = () => {
+        if (onClose) {
+            onClose();
+        } else {
+            sideDialogContext.close();
+        }
+    }
+
+    return <></>;
+}

package/src/core/field_configs.tsx

@@ -359,8 +359,7 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
     } else if (property.dataType === "map") {
         if (property.keyValue)
             return "key_value";
-        if (property.properties)
-            return "group";
+        return "group";
     } else if (property.dataType === "array") {
         const of = (property as ArrayProperty).of;
         const oneOf = (property as ArrayProperty).oneOf;

package/src/core/index.tsx

@@ -10,5 +10,3 @@ export * from "./field_configs";
 
 export * from "./SideDialogs";
 export * from "./NavigationRoutes";
-export * from "./useBuildModeController";
-export * from "./useBuildLocalConfigurationPersistence";

package/src/form/EntityForm.tsx

@@ -19,8 +19,9 @@ import equal from "react-fast-compare"
 import {
     canCreateEntity,
     canDeleteEntity,
-    fullPathToCollectionSegments,
     getDefaultValuesFor,
+    getEntityTitlePropertyKey,
+    getValueInPath,
     isHidden,
     isReadOnly,
     resolveCollection
@@ -171,7 +172,7 @@ function EntityFormInternal<M extends Record<string, any>>({
                                                                onFormContextChange,
                                                                hideId,
                                                                autoSave,
-                                                               onIdUpdateError
+                                                               onIdUpdateError,
                                                            }: EntityFormProps<M>) {
 
     const analyticsController = useAnalyticsController();
@@ -179,7 +180,7 @@ function EntityFormInternal<M extends Record<string, any>>({
     const customizationController = useCustomizationController();
 
     const context = useFireCMSContext();
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(inputCollection);
     const plugins = customizationController.plugins;
 
     const initialResolvedCollection = useMemo(() => resolveCollection({
@@ -344,6 +345,9 @@ function EntityFormInternal<M extends Record<string, any>>({
         fields: customizationController.propertyConfigs
     });
 
+    const titlePropertyKey = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
+    const title = internalValues && titlePropertyKey ? getValueInPath(internalValues, titlePropertyKey) : undefined;
+
     const onIdUpdate = inputCollection.callbacks?.onIdUpdate;
 
     const doOnIdUpdate = useCallback(async () => {
@@ -389,12 +393,15 @@ function EntityFormInternal<M extends Record<string, any>>({
 
     const authController = useAuthController();
 
-    const getActionsForEntity = useCallback(({ entity, customEntityActions }: {
+    const getActionsForEntity = useCallback(({
+                                                 entity,
+                                                 customEntityActions
+                                             }: {
         entity?: Entity<M>,
         customEntityActions?: EntityAction[]
     }): EntityAction[] => {
-        const createEnabled = canCreateEntity(inputCollection, authController, fullPathToCollectionSegments(path), null);
-        const deleteEnabled = entity ? canDeleteEntity(inputCollection, authController, fullPathToCollectionSegments(path), entity) : true;
+        const createEnabled = canCreateEntity(inputCollection, authController, path, null);
+        const deleteEnabled = entity ? canDeleteEntity(inputCollection, authController, path, entity) : true;
         const actions: EntityAction[] = [];
         if (createEnabled)
             actions.push(copyEntityAction);
@@ -436,7 +443,7 @@ function EntityFormInternal<M extends Record<string, any>>({
         pluginActions.push(...plugins.map((plugin, i) => (
             plugin.form?.Actions
                 ? <plugin.form.Actions
-                    key={`actions_${plugin.name}`} {...actionProps}/>
+                    key={`actions_${plugin.key}`} {...actionProps}/>
                 : null
         )).filter(Boolean));
     }
@@ -454,8 +461,8 @@ function EntityFormInternal<M extends Record<string, any>>({
                     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 " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
-                        variant={"h4"}>{inputCollection.singularName ?? inputCollection.name}
+                        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>
@@ -508,7 +515,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
     savingError?: Error,
     closeAfterSaveRef: MutableRefObject<boolean>,
     autoSave?: boolean,
-    entityActions: EntityAction[]
+    entityActions: EntityAction[],
 }) {
 
     const {
@@ -530,7 +537,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
         dirty,
         closeAfterSaveRef,
         autoSave,
-        entityActions
+        entityActions,
     } = props;
 
     const context = useFireCMSContext();
@@ -598,6 +605,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
                                 <Tooltip title={<PropertyIdCopyTooltipContent propertyId={key}/>}
                                          delayDuration={800}
                                          side={"left"}
+                                         align={"start"}
                                          sideOffset={16}>
                                     <PropertyFieldBinding {...cmsFormFieldProps}/>
                                 </Tooltip>
@@ -655,7 +663,7 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
                                         fullPath: resolvedCollection.path,
                                         collection: resolvedCollection,
                                         context,
-                                        sideEntityController
+                                        sideEntityController,
                                     });
                             }}>
                             {action.icon}

package/src/form/components/StorageItemPreview.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Entity, ResolvedStringProperty } from "../../types";
+import { Entity, EntityCollection, ResolvedStringProperty } from "../../types";
 import { PreviewSize, PropertyPreview } from "../../preview";
 
 import { cn, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
@@ -14,6 +14,7 @@ interface StorageItemPreviewProps {
     onRemove: (value: string) => void;
     size: PreviewSize;
     disabled: boolean;
+    collection: EntityCollection;
 }
 
 export function StorageItemPreview({
@@ -23,7 +24,8 @@ export function StorageItemPreview({
                                        entity,
                                        onRemove,
                                        disabled,
-                                       size
+                                       size,
+                                       collection
                                    }: StorageItemPreviewProps) {
 
     return (
@@ -54,7 +56,7 @@ export function StorageItemPreview({
                     <PropertyPreview propertyKey={name}
                                      value={value}
                                      property={property}
-                                     // entity={entity}
+                        // entity={entity}
                                      size={size}/>
                 </ErrorBoundary>
             }

package/src/form/components/StorageUploadProgress.tsx

@@ -4,6 +4,7 @@ import { useSnackbarController, useStorageSource } from "../../hooks";
 import { StorageFieldItem } from "../../util/useStorageUploadController";
 import { ErrorView } from "../../components";
 import { cn, paperMixin, Skeleton } from "@firecms/ui";
+import { EntityCollection, StorageSource } from "../../types";
 
 export interface StorageUploadItemProps {
     storagePath: string;
@@ -22,10 +23,10 @@ export function StorageUploadProgress({
                                           metadata,
                                           onFileUploadComplete,
                                           imageSize,
-                                          simple
+                                          simple,
                                       }: StorageUploadItemProps) {
 
-    const storage = useStorageSource();
+    const storageSource = useStorageSource();
 
     const snackbarController = useSnackbarController();
 
@@ -41,7 +42,7 @@ export function StorageUploadProgress({
         setError(undefined);
         setLoading(true);
 
-        storage.uploadFile({
+        storageSource.uploadFile({
             file,
             fileName,
             path: storagePath,
@@ -67,7 +68,7 @@ export function StorageUploadProgress({
             .finally(() => {
                 uploading.current = false;
             });
-    }, [entry, metadata, onFileUploadComplete, storage, storagePath]);
+    }, [entry, metadata, onFileUploadComplete, storageSource, storagePath]);
 
     React.useEffect(() => {
         mounted.current = true;
@@ -89,7 +90,7 @@ export function StorageUploadProgress({
 
         <div className={cn(paperMixin,
             "relative m-4 border-box flex items-center justify-center",
-             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
+            `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 
             {loading &&
                 <Skeleton className="w-full h-full"/>}

package/src/form/components/index.tsx

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

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import { FieldProps } from "../../types";
-import { FieldHelperText } from "../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { useClearRestoreValue } from "../../hooks";
 import { ExpandablePanel } from "@firecms/ui";
 import { getIconForProperty } from "../../util";
-import { LabelWithIcon } from "../../components";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * Array field used for custom