@firecms/core 3.2.0 → 3.3.0-canary.451aa49

package/dist/types/collections.d.ts

@@ -142,6 +142,30 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * the side dialog of an entity.
      */
     subcollections?: EntityCollection<any, any>[];
+    /**
+     * You can group subcollections and custom views into dropdown menus
+     * in the entity view tabs. Views listed in a group will be removed
+     * from the top-level tabs and shown under a single dropdown instead.
+     *
+     * @example
+     * ```tsx
+     * const productsCollection = buildCollection({
+     *     id: "products",
+     *     path: "products",
+     *     name: "Products",
+     *     properties: { ... },
+     *     subcollections: [localesCollection, reviewsCollection],
+     *     entityViews: [sampleView],
+     *     viewGroups: [
+     *         {
+     *             name: "Related data",
+     *             views: ["locales", "reviews", "sample_view"]
+     *         }
+     *     ]
+     * });
+     * ```
+     */
+    viewGroups?: ViewGroup[];
     /**
      * This interface defines all the callbacks that can be used when an entity
      * is being created, updated or deleted.
@@ -361,6 +385,20 @@ export interface KanbanConfig<M extends Record<string, any> = any> {
      */
     columnProperty: Extract<keyof M, string>;
 }
+/**
+ * You can group subcollections and custom views into dropdown menus in the entity view tabs.
+ * @group Collections
+ */
+export interface ViewGroup {
+    /**
+     * Name of the group
+     */
+    name: string;
+    /**
+     * Array of subcollection paths/ids or custom view keys
+     */
+    views: string[];
+}
 /**
  * View mode for displaying a collection.
  * @group Collections

package/dist/types/properties.d.ts

@@ -125,6 +125,15 @@ export interface BaseProperty<T extends CMSType, CustomProps = any> {
      * @see https://jsonlogic.com/ for JSON Logic syntax
      */
     conditions?: PropertyConditions;
+    /**
+     * Set this property to true to provide the UX to explicitly set the value to `null`.
+     * Defaults to `false`.
+     */
+    nullable?: boolean;
+    /**
+     * @deprecated Use `nullable` instead.
+     */
+    clearable?: boolean;
 }
 /**
  * @group Entity properties
@@ -473,10 +482,6 @@ export interface NumberProperty extends BaseProperty<number> {
      * Rules for validating this property
      */
     validation?: NumberPropertyValidationSchema;
-    /**
-     * Add an icon to clear the value and set it to `null`. Defaults to `false`
-     */
-    clearable?: boolean;
 }
 /**
  * @group Entity properties
@@ -569,10 +574,6 @@ export interface StringProperty extends BaseProperty<string> {
      * Rules for validating this property
      */
     validation?: StringPropertyValidationSchema;
-    /**
-     * Add an icon to clear the value and set it to `null`. Defaults to `false`
-     */
-    clearable?: boolean;
     /**
      * You can use this property (a string) to behave as a reference to another
      * collection. The stored value is the ID of the entity in the

package/dist/types/translations.d.ts

@@ -412,6 +412,8 @@ export interface FireCMSTranslations {
     cms_users: string;
     roles_menu: string;
     project_settings: string;
+    firestore_explorer: string;
+    explore_your_firestore_data: string;
     build_admin_panel_in_minutes: string;
     go_live_instantly: string;
     create_production_ready_back_offices: string;
@@ -643,4 +645,25 @@ export interface FireCMSTranslations {
     settings_appcheck_refresh_note: string;
     settings_appcheck_updated: string;
     settings_appcheck_error: string;
+    missing_firestore_security_rules: string;
+    firecms_cloud_requires_security_rule: string;
+    cannot_be_accessed_without_it: string;
+    required_security_rule: string;
+    fix_automatically: string;
+    open_firebase_rules: string;
+    security_rules_updated_successfully: string;
+    sec_rules_fixing: string;
+    sec_rules_fixed: string;
+    marketplace_managed_by_gcp: string;
+    marketplace_billing_note: string;
+    marketplace_manage_in_gcp_console: string;
+    marketplace_plan_changes_note: string;
+    marketplace_welcome_title: string;
+    marketplace_welcome_subtitle: string;
+    marketplace_select_or_create_project: string;
+    marketplace_link_project: string;
+    marketplace_linking: string;
+    marketplace_link_success: string;
+    marketplace_link_error: string;
+    marketplace_no_account_id: string;
 }

package/dist/util/index.d.ts

@@ -25,3 +25,4 @@ export * from "./useTraceUpdate";
 export * from "./storage";
 export * from "./callbacks";
 export * from "./conditions";
+export * from "./lazy_eager";

package/dist/util/lazy_eager.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * Returns a React.lazy component that is also preloaded immediately using
+ * requestIdleCallback or setTimeout.
+ * This ensures that chunks are split, but fetched in the background before they are actually needed.
+ */
+export declare function lazyEager<T extends React.ComponentType<any>>(factory: () => Promise<any>, exportName?: string): React.LazyExoticComponent<T>;

package/dist/util/objects.d.ts

@@ -10,3 +10,4 @@ export declare function removeUndefined(value: any, removeEmptyStrings?: boolean
 export declare function removeNulls(value: any): any;
 export declare function isEmptyObject(obj: object): boolean;
 export declare function removePropsIfExisting(source: any, comparison: any): any;
+export declare function jsonStringifyReplacer(key: string, value: any): any;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.2.0",
+  "version": "3.3.0-canary.451aa49",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,8 +53,8 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/formex": "3.2.0",
-    "@firecms/ui": "3.2.0",
+    "@firecms/formex": "^3.3.0-canary.451aa49",
+    "@firecms/ui": "^3.3.0-canary.451aa49",
     "@floating-ui/dom": "^1.7.4",
     "@radix-ui/react-portal": "^1.1.10",
     "@radix-ui/react-slot": "^1.2.4",
@@ -136,7 +136,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "4c3b8f2c16265fcdd6bf443cf5b420a7a7332d9d",
+  "gitHead": "772b4a7f64893038f0cc13669d6bc66ec858fc49",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -5,6 +5,7 @@ import { Badge, Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleto
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 import { getEntityFromCache } from "../../util/entity_cache";
 import { getLocalChangesBackup } from "../../util";
+import { getChanges } from "../../form/EntityForm";
 
 /**
  *
@@ -81,13 +82,18 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
     const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
-    const hasDraft = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : false;
+    const cachedData = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : undefined;
+    const hasDraft = (() => {
+        if (!cachedData || typeof cachedData !== "object" || Object.keys(cachedData).length === 0) return false;
+        const realChanges = getChanges(cachedData as any, (entity?.values ?? {}) as any);
+        return Object.keys(realChanges).length > 0;
+    })();
     const iconSize = largeLayout && (size === "m" || size === "l" || size == "xl") ? "medium" : "small";
 
     const content = (
         <div
             className={cls(
-                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 bg-surface-50/90 dark:bg-opacity-90 dark:bg-surface-900/90 z-10",
+                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 bg-surface-50/90 dark:bg-opacity-90 dark:bg-surface-900/90 z-10 shrink-0",
                 frozen ? "sticky left-0" : ""
             )}
             onClick={useCallback((event: any) => {
@@ -101,7 +107,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
             }}>
 
             {(hasActions || selectionEnabled) &&
-                <div className="w-34 flex justify-center">
+                <div className="w-full flex justify-center">
 
                     {uncollapsedActions.map((action, index) => {
                         const isEditAction = action.key === "edit";

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -904,11 +904,9 @@ export const EntityCollectionView = React.memo(
                 />
 
                 {/* View content - only the view-specific content changes */}
-                {tableController.dataLoadingError && pluginErrorView}
-                {tableController.dataLoadingError && !pluginErrorView && (
-                    <CollectionDataErrorBanner error={tableController.dataLoadingError} />
-                )}
-                {viewMode === "kanban" && enabledViews.includes("kanban") ? (
+                {tableController.dataLoadingError ? (
+                    pluginErrorView ?? <CollectionDataErrorBanner error={tableController.dataLoadingError} />
+                ) : viewMode === "kanban" && enabledViews.includes("kanban") ? (
                     <EntityCollectionBoardView
                         key={`kanban-view-${fullPath}-${selectedKanbanProperty}`}
                         collection={collection}

package/src/components/EntityJsonPreview.tsx

@@ -1,9 +1,10 @@
 import React, { useRef } from "react";
 import { Highlight, themes } from "prism-react-renderer";
 import { useModeController } from "../hooks";
+import { jsonStringifyReplacer } from "../util/objects";
 
 export function EntityJsonPreview({ values }: { values: object }) {
-    const code = JSON.stringify(values, null, "\t");
+    const code = JSON.stringify(values, jsonStringifyReplacer, "\t");
     const { mode } = useModeController();
     const preRef = useRef<HTMLPreElement>(null);
 

package/src/components/ErrorBoundary.tsx

@@ -35,10 +35,10 @@ export class ErrorBoundary extends React.Component<PropsWithChildren<Record<stri
 function FallbackView({ message }: { message?: string }) {
     const { t } = useTranslation();
     return (
-        <div className="h-full w-full bg-slate-100 flex items-center justify-center p-4">
+        <div className="h-full w-full bg-slate-100 dark:bg-surface-900 flex items-center justify-center p-4">
             <div
-                className="flex flex-col items-center justify-center m-4 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
-                <div className="flex items-center mb-4 text-red-500">
+                className="flex flex-col items-center justify-center m-4 bg-white dark:bg-surface-800 p-8 rounded-lg shadow-sm border border-gray-200 dark:border-surface-700">
+                <div className="flex items-center mb-4 text-red-500 dark:text-red-400">
                     <ErrorIcon/>
                     <div className="ml-4">{t("error")}</div>
                 </div>

package/src/components/VirtualTable/VirtualTable.tsx

@@ -126,6 +126,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         AddColumnComponent,
         initialScroll = 0,
         onColumnsOrderChange,
+        headerIconSize,
     }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
@@ -211,7 +212,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [tableRef]);
 
         const [measureRef, bounds] = useMeasure({
-            debounce: 50,
+            debounce: 0,
             polyfill: ResizeObserver,
             scroll: true,
             // This is important for handling zooming in react-flow
@@ -369,8 +370,9 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                 setColumns(newColumns);
                 onColumnsOrderChange(newColumns);
             } : undefined,
-            draggingColumnId
-        }), [data, rowHeight, cellRenderer, columns, currentSort, onRowClick, customView, onColumnResizeInternal, onColumnResizeEndInternal, filterInput, onColumnSort, onFilterUpdateInternal, sortByProperty, hoverRow, createFilterField, rowClassName, endAdornment, AddColumnComponent, onColumnsOrderChange, draggingColumnId]);
+            draggingColumnId,
+            headerIconSize,
+        }), [data, rowHeight, cellRenderer, columns, currentSort, onRowClick, customView, onColumnResizeInternal, onColumnResizeEndInternal, filterInput, onColumnSort, onFilterUpdateInternal, sortByProperty, hoverRow, createFilterField, rowClassName, endAdornment, AddColumnComponent, onColumnsOrderChange, draggingColumnId, headerIconSize]);
 
         // Get sortable column keys (excluding frozen columns)
         const sortableColumnKeys = columns

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -48,6 +48,7 @@ type VirtualTableHeaderProps<M extends Record<string, any>> = {
     AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
     isDragging?: boolean;
     isDraggable?: boolean;
+    headerIconSize?: "small" | "smallest";
 };
 
 export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
@@ -64,7 +65,8 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
         createFilterField,
         AdditionalHeaderWidget,
         isDragging,
-        isDraggable
+        isDraggable,
+        headerIconSize = "small",
     }: VirtualTableHeaderProps<M>) {
 
         const [onHover, setOnHover] = useState(false);
@@ -136,18 +138,17 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                             <Badge color="secondary"
                                 invisible={!sort}>
                                 <IconButton
-                                    size={"small"}
+                                    size={headerIconSize}
                                     className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
                                     onClick={() => {
                                         onColumnSort(column.key as Extract<keyof M, string>);
                                     }}
                                 >
-                                    {!sort &&
-                                        <ArrowUpwardIcon />}
-                                    {sort === "asc" &&
-                                        <ArrowUpwardIcon />}
-                                    {sort === "desc" &&
-                                        <ArrowUpwardIcon className={"rotate-180"} />}
+                                    <ArrowUpwardIcon size={headerIconSize}
+                                                     className={cls(
+                                                         "transition-transform duration-200",
+                                                         sort === "desc" ? "rotate-180" : "rotate-0"
+                                                     )} />
                                 </IconButton>
                             </Badge>
                         }

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -22,7 +22,8 @@ const SortableColumnHeader = ({
     onClickResizeColumn,
     createFilterField,
     isDragging,
-    isDraggable
+    isDraggable,
+    headerIconSize
 }: {
     column: VirtualTableColumn;
     columnIndex: number;
@@ -37,6 +38,7 @@ const SortableColumnHeader = ({
     createFilterField: any;
     isDragging: boolean;
     isDraggable: boolean;
+    headerIconSize?: "small" | "smallest";
 }) => {
     const [isPressing, setIsPressing] = useState(false);
 
@@ -103,7 +105,8 @@ const SortableColumnHeader = ({
                 createFilterField={createFilterField}
                 AdditionalHeaderWidget={column.AdditionalHeaderWidget}
                 isDragging={isDragging || isPressing}
-                isDraggable={isDraggable} />
+                isDraggable={isDraggable}
+                headerIconSize={headerIconSize} />
         </div>
     );
 };
@@ -123,7 +126,8 @@ export const VirtualTableHeaderRow = ({
     data,
     cellRenderer: CellRenderer,
     rowHeight = 54,
-    draggingColumnId
+    draggingColumnId,
+    headerIconSize,
 }: VirtualTableContextProps<any>) => {
 
     const columnRefs = useMemo(() => columns.map(() => createRef<HTMLDivElement>()), [columns.length]);
@@ -234,6 +238,7 @@ export const VirtualTableHeaderRow = ({
                                 createFilterField={createFilterField}
                                 isDragging={isDragging}
                                 isDraggable={isDraggable}
+                                headerIconSize={headerIconSize}
                             />
                         </ErrorBoundary>
                     );

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -168,6 +168,12 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
 
+    /**
+     * Size of icons in column headers (sort, filter).
+     * @default "small"
+     */
+    headerIconSize?: "small" | "smallest";
+
 }
 
 export type CellRendererParams<T = any> = {
@@ -206,7 +212,7 @@ export interface VirtualTableColumn<CustomProps = any> {
     /**
      * Label displayed in the header
      */
-    title?: string;
+    title?: React.ReactNode;
 
     /**
      * This column is frozen to the left

package/src/components/VirtualTable/types.tsx

@@ -42,4 +42,5 @@ export type VirtualTableContextProps<T extends any> = {
     AddColumnComponent?: React.ComponentType;
     onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
     draggingColumnId?: string | null;
+    headerIconSize?: "small" | "smallest";
 };

package/src/core/DrawerNavigationGroup.tsx

@@ -83,7 +83,7 @@ export function DrawerNavigationGroup({
                         color={"secondary"}
                         className="font-medium flex-grow line-clamp-1"
                     >
-                        {(group || t("views_group")).toUpperCase()}
+                        {(group && group !== "__default__" ? group : t("views_group")).toUpperCase()}
                     </Typography>
                     {headerActions && (
                         <div onClick={(e) => e.stopPropagation()}>

package/src/core/EntityEditView.tsx

@@ -26,7 +26,7 @@ import {
     useFireCMSContext,
     useLargeLayout
 } from "../hooks";
-import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
+import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography, Menu, MenuItem, ExpandMoreIcon } from "@firecms/ui";
 import { getEntityFromMemoryCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
@@ -230,6 +230,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
 
+    const groupedViews = useMemo(() => {
+        return (collection.viewGroups ?? []).flatMap(g => g.views);
+    }, [collection.viewGroups]);
+
     const {
         resolvedEntityViews,
         selectedEntityView,
@@ -419,16 +423,18 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         Builder={selectedSecondaryForm?.Builder}
     />;
 
-    const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
+    const subcollectionTabs = subcollections && subcollections
+        .filter(sub => !groupedViews.includes(sub.id ?? sub.path))
+        .map((subcollection) =>
         <Tab
             className="text-sm min-w-[120px]"
-            value={subcollection.id}
+            value={subcollection.id ?? subcollection.path}
             key={`entity_detail_collection_tab_${subcollection.name}`}>
             {subcollection.name}
         </Tab>
     );
 
-    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
+    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start" && !groupedViews.includes(view.key))
         .map((view) =>
             <Tab
                 className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
@@ -437,7 +443,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 {view.tabComponent ?? view.name}
             </Tab>
         );
-    const customViewTabsEnd = resolvedEntityViews.filter(view => !view.position || view.position === "end")
+    const customViewTabsEnd = resolvedEntityViews.filter(view => (!view.position || view.position === "end") && !groupedViews.includes(view.key))
         .map((view) =>
             <Tab
                 className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
@@ -447,6 +453,43 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             </Tab>
         );
 
+    const viewGroupMenus = collection.viewGroups?.map(group => {
+        const isActive = group.views.includes(selectedTab);
+        return (
+            <Menu
+                key={`view_group_${group.name}`}
+                trigger={
+                    <button
+                        type="button"
+                        className={cls(
+                            "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all",
+                            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2",
+                            "disabled:pointer-events-none disabled:opacity-50",
+                            isActive ? "bg-white text-surface-900 dark:bg-surface-950 dark:text-surface-50" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800"
+                        )}
+                    >
+                        {group.name}
+                        <ExpandMoreIcon className="ml-1 -mr-1" size="small" />
+                    </button>
+                }>
+                {group.views.map(viewId => {
+                    const subcollection = subcollections.find(s => (s.id ?? s.path) === viewId);
+                    const customView = resolvedEntityViews.find(v => v.key === viewId);
+                    const name = subcollection?.name ?? customView?.name ?? viewId;
+                    return (
+                        <MenuItem 
+                            key={`view_group_${group.name}_${viewId}`} 
+                            onClick={() => onSideTabClick(viewId)}
+                            className={selectedTab === viewId ? "bg-surface-accent-100 dark:bg-surface-accent-900" : ""}
+                        >
+                            {name}
+                        </MenuItem>
+                    );
+                })}
+            </Menu>
+        );
+    });
+
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
 
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-900">
@@ -494,6 +537,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
                 {customViewTabsEnd}
 
+                {viewGroupMenus}
+
                 {subcollectionTabs}
             </Tabs>}
         </div>}

package/src/core/EntitySidePanel.tsx

@@ -78,7 +78,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         return navigationController.getParentCollectionIds(path);
     }, [navigationController, path]);
 
-    const collection = navigationController.getCollection(fullIdPath ?? path) ?? props.collection;
+    const collection = props.collection ?? navigationController.getCollection(fullIdPath ?? path);
 
     useEffect(() => {
         function beforeunload(e: any) {
@@ -112,6 +112,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     return (
         <>
             <ErrorBoundary>
+
                 <EntityEditView
                     {...props}
                     fullIdPath={fullIdPath}

package/src/core/field_configs.tsx

@@ -8,16 +8,18 @@ import {
     DateTimeFieldBinding,
     KeyValueFieldBinding,
     MapFieldBinding,
-    MarkdownEditorFieldBinding,
     MultiSelectFieldBinding,
     ReferenceAsStringFieldBinding,
     ReferenceFieldBinding,
     RepeatFieldBinding,
     SelectFieldBinding,
-    StorageUploadFieldBinding,
     SwitchFieldBinding,
     TextFieldBinding
 } from "../form";
+import { lazyEager } from "../util/lazy_eager";
+
+const MarkdownEditorFieldBinding = lazyEager<typeof import("../form/field_bindings/MarkdownEditorFieldBinding")["MarkdownEditorFieldBinding"]>(() => import("../form/field_bindings/MarkdownEditorFieldBinding"), "MarkdownEditorFieldBinding");
+const StorageUploadFieldBinding = lazyEager<typeof import("../form/field_bindings/StorageUploadFieldBinding")["StorageUploadFieldBinding"]>(() => import("../form/field_bindings/StorageUploadFieldBinding"), "StorageUploadFieldBinding");
 import { isPropertyBuilder, mergeDeep } from "../util";
 
 import {