@firecms/core 3.0.0-beta.13 → 3.0.0-beta.14

package/src/components/SelectableTable/SelectableTable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import {
     CollectionSize,
     Entity,
@@ -119,150 +119,147 @@ export type SelectableTableProps<M extends Record<string, any>> = {
  * @see VirtualTable
  * @group Components
  */
-export const SelectableTable = React.memo<SelectableTableProps<any>>(
-    function SelectableTable<M extends Record<string, any>>
-    ({
-         onValueChange,
-         cellRenderer,
-         onEntityClick,
-         onColumnResize,
-         hoverRow = true,
-         size = "m",
-         inlineEditing = false,
-         tableController:
-             {
-                 data,
-                 dataLoading,
-                 noMoreToLoad,
-                 dataLoadingError,
-                 filterValues,
-                 setFilterValues,
-                 sortBy,
-                 setSortBy,
-                 itemCount,
-                 setItemCount,
-                 pageSize = 50,
-                 paginationEnabled,
-                 checkFilterCombination,
-                 setPopupCell
-             },
-         filterable = true,
-         onScroll,
-         initialScroll,
-         emptyComponent,
-         columns,
-         forceFilter,
-         highlightedRow,
-         endAdornment,
-         AddColumnComponent
-     }: SelectableTableProps<M>) {
-
-        const ref = useRef<HTMLDivElement>(null);
-
-        const [selectedCell, setSelectedCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
-
-        const loadNextPage = () => {
-            if (!paginationEnabled || dataLoading || noMoreToLoad)
-                return;
-            if (itemCount !== undefined)
-                setItemCount?.(itemCount + pageSize);
+export const SelectableTable = function SelectableTable<M extends Record<string, any>>
+({
+     onValueChange,
+     cellRenderer,
+     onEntityClick,
+     onColumnResize,
+     hoverRow = true,
+     size = "m",
+     inlineEditing = false,
+     tableController:
+         {
+             data,
+             dataLoading,
+             noMoreToLoad,
+             dataLoadingError,
+             filterValues,
+             setFilterValues,
+             sortBy,
+             setSortBy,
+             itemCount,
+             setItemCount,
+             pageSize = 50,
+             paginationEnabled,
+             checkFilterCombination,
+             setPopupCell
+         },
+     filterable = true,
+     onScroll,
+     initialScroll,
+     emptyComponent,
+     columns,
+     forceFilter,
+     highlightedRow,
+     endAdornment,
+     AddColumnComponent
+ }: SelectableTableProps<M>) {
+
+    const ref = useRef<HTMLDivElement>(null);
+
+    const [selectedCell, setSelectedCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
+
+    const loadNextPage = () => {
+        if (!paginationEnabled || dataLoading || noMoreToLoad)
+            return;
+        if (itemCount !== undefined)
+            setItemCount?.(itemCount + pageSize);
+    };
+
+    const resetPagination = useCallback(() => {
+        setItemCount?.(pageSize);
+    }, [pageSize]);
+
+    const onRowClick = useCallback(({ rowData }: {
+        rowData: Entity<M>
+    }) => {
+        if (inlineEditing)
+            return;
+        return onEntityClick && onEntityClick(rowData);
+    }, [onEntityClick, inlineEditing]);
+
+    useOutsideAlerter(ref,
+        () => {
+            if (selectedCell) {
+                unselect();
+            }
+        },
+        Boolean(selectedCell));
+
+    const select = useCallback((cell?: SelectedCellProps<M>) => {
+        setSelectedCell(cell);
+    }, []);
+
+    const unselect = useCallback(() => {
+        setSelectedCell(undefined);
+    }, []);
+
+    // on ESC key press
+    useEffect(() => {
+        const escFunction = (event: any) => {
+            if (event.keyCode === 27) {
+                unselect();
+            }
         };
+        document.addEventListener("keydown", escFunction, false);
+        return () => {
+            document.removeEventListener("keydown", escFunction, false);
+        };
+    }, [unselect]);
+
+    const onFilterUpdate = useCallback((updatedFilterValues?: FilterValues<any>) => {
+        setFilterValues?.({ ...updatedFilterValues, ...forceFilter } as FilterValues<any>);
+    }, [forceFilter]);
+
+    const contextValue = useMemo(() => ({
+        setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
+        select,
+        onValueChange,
+        size: size ?? "m",
+        selectedCell
+    }), [setPopupCell, select, onValueChange, size, selectedCell]);
+
+    return (
+        <SelectableTableContext.Provider
+            value={contextValue}>
+            <div className="h-full w-full flex flex-col bg-white dark:bg-surface-950"
+                 ref={ref}>
+
+                <VirtualTable
+                    data={data}
+                    columns={columns}
+                    cellRenderer={cellRenderer}
+                    onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
+                    onEndReached={loadNextPage}
+                    onResetPagination={resetPagination}
+                    error={dataLoadingError}
+                    onColumnResize={onColumnResize}
+                    rowHeight={getRowHeight(size)}
+                    loading={dataLoading}
+                    filter={filterValues}
+                    onFilterUpdate={setFilterValues ? onFilterUpdate : undefined}
+                    sortBy={sortBy}
+                    onSortByUpdate={setSortBy as ((sortBy?: [string, "asc" | "desc"]) => void)}
+                    hoverRow={hoverRow}
+                    initialScroll={initialScroll}
+                    onScroll={onScroll}
+                    checkFilterCombination={checkFilterCombination}
+                    createFilterField={filterable ? createFilterField : undefined}
+                    rowClassName={useCallback((entity: Entity<M>) => {
+                        return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
+                    }, [highlightedRow])}
+                    className="flex-grow"
+                    emptyComponent={emptyComponent}
+                    endAdornment={endAdornment}
+                    AddColumnComponent={AddColumnComponent}
+                />
+
+            </div>
+        </SelectableTableContext.Provider>
+    );
 
-        const resetPagination = useCallback(() => {
-            setItemCount?.(pageSize);
-        }, [pageSize]);
-
-        const onRowClick = useCallback(({ rowData }: {
-            rowData: Entity<M>
-        }) => {
-            if (inlineEditing)
-                return;
-            return onEntityClick && onEntityClick(rowData);
-        }, [onEntityClick, inlineEditing]);
-
-        useOutsideAlerter(ref,
-            () => {
-                if (selectedCell) {
-                    unselect();
-                }
-            },
-            Boolean(selectedCell));
-
-        // on ESC key press
-        useEffect(() => {
-            const escFunction = (event: any) => {
-                if (event.keyCode === 27) {
-                    unselect();
-                }
-            };
-            document.addEventListener("keydown", escFunction, false);
-            return () => {
-                document.removeEventListener("keydown", escFunction, false);
-            };
-        });
-
-        const select = useCallback((cell?: SelectedCellProps<M>) => {
-            setSelectedCell(cell);
-        }, []);
-
-        const unselect = useCallback(() => {
-            setSelectedCell(undefined);
-        }, []);
-
-        const onFilterUpdate = useCallback((updatedFilterValues?: FilterValues<any>) => {
-            setFilterValues?.({ ...updatedFilterValues, ...forceFilter } as FilterValues<any>);
-        }, [forceFilter]);
-
-        return (
-            <SelectableTableContext.Provider
-                value={{
-                    setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
-                    select,
-                    onValueChange,
-                    size: size ?? "m",
-                    selectedCell,
-                }}
-            >
-                <div className="h-full w-full flex flex-col bg-white dark:bg-surface-950"
-                     ref={ref}>
-
-                    <VirtualTable
-                        data={data}
-                        columns={columns}
-                        cellRenderer={cellRenderer}
-                        onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
-                        onEndReached={loadNextPage}
-                        onResetPagination={resetPagination}
-                        error={dataLoadingError}
-                        onColumnResize={onColumnResize}
-                        rowHeight={getRowHeight(size)}
-                        loading={dataLoading}
-                        filter={filterValues}
-                        onFilterUpdate={setFilterValues ? onFilterUpdate : undefined}
-                        sortBy={sortBy}
-                        onSortByUpdate={setSortBy as ((sortBy?: [string, "asc" | "desc"]) => void)}
-                        hoverRow={hoverRow}
-                        initialScroll={initialScroll}
-                        onScroll={onScroll}
-                        checkFilterCombination={checkFilterCombination}
-                        createFilterField={filterable ? createFilterField : undefined}
-                        rowClassName={useCallback((entity: Entity<M>) => {
-                            return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
-                        }, [highlightedRow])}
-                        className="flex-grow"
-                        emptyComponent={emptyComponent}
-                        endAdornment={endAdornment}
-                        AddColumnComponent={AddColumnComponent}
-                    />
-
-                </div>
-            </SelectableTableContext.Provider>
-        );
-
-    },
-    () => false,
-    // equal
-);
+};
 
 function createFilterField({
                                id,

package/src/components/VirtualTable/VirtualTable.tsx

@@ -115,7 +115,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              endAdornment,
                                                              AddColumnComponent,
                                                              initialScroll = 0,
-                                                             debug
                                                          }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
@@ -131,7 +130,8 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         // Set initial scroll position
         useEffect(() => {
             if (tableRef.current && initialScroll) {
-                tableRef.current.scrollTo(0, initialScroll);
+                const { scrollLeft } = tableRef.current;
+                tableRef.current.scrollTo(scrollLeft, initialScroll);
             }
         }, [tableRef, initialScroll]);
 
@@ -170,14 +170,14 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         });
 
         const onColumnResizeInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
-            if (debug)
-                console.log("onColumnResizeInternal", params);
-            setColumns(columns.map((column) => column.key === params.column.key ? params.column : column));
-        }, [columns]);
+            setColumns(prevColumns =>
+                prevColumns.map((column) =>
+                    column.key === params.column.key ? params.column : column
+                )
+            );
+        }, []);
 
         const onColumnResizeEndInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
-            if (debug)
-                console.log("onColumnResizeEndInternal", params);
             setColumns(columns.map((column) => column.key === params.column.key ? params.column : column));
             if (onColumnResize) {
                 onColumnResize(params);
@@ -188,14 +188,10 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const filterRef = useRef<VirtualTableFilterValues<any> | undefined>();
 
         useEffect(() => {
-            if (debug)
-                console.log("Filter updated", filterInput);
             filterRef.current = filterInput;
         }, [filterInput]);
 
         const scrollToTop = useCallback(() => {
-            if (debug)
-                console.log("scrollToTop");
             endReachCallbackThreshold.current = 0;
             if (tableRef.current) {
                 tableRef.current.scrollTo(tableRef.current?.scrollLeft, 0);
@@ -204,9 +200,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
 
         const onColumnSort = useCallback((key: string) => {
 
-            if (debug)
-                console.log("onColumnSort", key);
-
             const isDesc = sortByProperty === key && currentSort === "desc";
             const isAsc = sortByProperty === key && currentSort === "asc";
             const newSort = isAsc ? "desc" : (isDesc ? undefined : "asc");
@@ -234,12 +227,8 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [checkFilterCombination, currentSort, onFilterUpdate, onResetPagination, onSortByUpdate, scrollToTop, sortByProperty]);
 
         const maxScroll = Math.max((data?.length ?? 0) * rowHeight - bounds.height, 0);
-        if (debug)
-            console.log("maxScroll", maxScroll);
 
         const onEndReachedInternal = useCallback((scrollOffset: number) => {
-            if (debug)
-                console.log("onEndReachedInternal", scrollOffset, endReachCallbackThreshold.current + endOffset);
             if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + endOffset) {
                 endReachCallbackThreshold.current = scrollOffset;
                 onEndReached();
@@ -255,12 +244,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             scrollOffset: number,
             scrollUpdateWasRequested: boolean;
         }) => {
-            if (debug)
-                console.log("onScroll", {
-                    scrollDirection,
-                    scrollOffset,
-                    scrollUpdateWasRequested
-                });
             if (onScrollProp) {
                 debouncedScroll({
                     scrollDirection,
@@ -273,8 +256,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [maxScroll, onEndReachedInternal]);
 
         const onFilterUpdateInternal = useCallback((column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => {
-            if (debug)
-                console.log("onFilterUpdateInternal", column, filterForProperty);
 
             endReachCallbackThreshold.current = 0;
             const filter = filterRef.current;
@@ -337,9 +318,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             AddColumnComponent
         };
 
-        if (debug)
-            console.log("VirtualTable render", virtualListController);
-
         return (
             <div
                 ref={measureRef}

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -162,11 +162,6 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     initialScroll?: number;
 
-    /**
-     * Debug mode
-     */
-    debug?: boolean;
-
 }
 
 export type CellRendererParams<T = any> = {

package/src/components/VirtualTable/fields/VirtualTableInput.tsx

@@ -66,7 +66,6 @@ export function VirtualTableInput(props: {
                 width: "100%",
                 color: "unset",
                 fontWeight: "unset",
-                lineHeight: 1.7142857,
                 fontSize: "unset",
                 fontFamily: "unset",
                 background: "unset",

package/src/components/index.tsx

@@ -36,3 +36,5 @@ export * from "./ArrayContainer";
 export * from "./ReferenceWidget";
 export * from "./SearchIconsView";
 export * from "./FieldCaption";
+
+export * from "./EntityPreview";

package/src/core/EntityEditView.tsx

@@ -182,11 +182,13 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const subcollections = (collection.subcollections ?? []).filter(c => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
-    const customViews = collection.entityViews;
+    const customViews = collection.entityViews ?? [];
     const customViewsCount = customViews?.length ?? 0;
     const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
 
+    const plugins = customizationController.plugins;
+
     const {
         resolvedEntityViews,
         selectedEntityView,
@@ -212,7 +214,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             }
 
             if (!entityId) {
-                console.error("INTERNAL: entityId is not defined");
                 return null;
             }
 
@@ -254,6 +255,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 <ErrorBoundary>
                     {usedFormContext && <Builder
                         collection={collection}
+                        parentCollectionIds={parentCollectionIds}
                         entity={usedEntity}
                         modifiedValues={usedFormContext?.formex?.values ?? usedEntity?.values}
                         formContext={usedFormContext}
@@ -335,6 +337,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 entity={entity}
                 path={path}
                 collection={collection}/>
+            <div className="h-16"/>
         </div>
     </div> : null;
 
@@ -384,14 +387,24 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         </Tab>
     );
 
-    const customViewTabs = resolvedEntityViews.map((view) =>
-        <Tab
-            className="text-sm min-w-[120px]"
-            value={view.key}
-            key={`entity_detail_collection_tab_${view.name}`}>
-            {view.name}
-        </Tab>
-    );
+    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
+        .map((view) =>
+            <Tab
+                className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
+                value={view.key}
+                key={`entity_detail_collection_tab_${view.name}`}>
+                {view.tabComponent ?? view.name}
+            </Tab>
+        );
+    const customViewTabsEnd = resolvedEntityViews.filter(view => !view.position || view.position === "end")
+        .map((view) =>
+            <Tab
+                className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
+                value={view.key}
+                key={`entity_detail_collection_tab_${view.name}`}>
+                {view.tabComponent ?? view.name}
+            </Tab>
+        );
 
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
 
@@ -417,11 +430,12 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 {includeJsonView && <Tab
                     disabled={!hasAdditionalViews}
                     value={JSON_TAB_VALUE}
-                    innerClassName={"block"}
                     className={"text-sm"}>
                     <CodeIcon size={"small"}/>
                 </Tab>}
 
+                {customViewTabsStart}
+
                 <Tab
                     disabled={!hasAdditionalViews}
                     value={MAIN_TAB_VALUE}
@@ -430,7 +444,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 </Tab>
 
 
-                {customViewTabs}
+                {customViewTabsEnd}
 
                 {subcollectionTabs}
             </Tabs>}
@@ -453,8 +467,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     </div>;
 
-    const plugins = customizationController.plugins;
-
     if (plugins) {
         plugins.forEach((plugin: FireCMSPlugin) => {
             if (plugin.form?.provider) {

package/src/core/EntitySidePanel.tsx

@@ -19,11 +19,18 @@ import { useLocation, useNavigate } from "react-router-dom";
  */
 export function EntitySidePanel(props: EntitySidePanelProps) {
 
+    const {
+        allowFullScreen = true,
+        path,
+        entityId,
+        formProps,
+    } = props;
+
     const {
         blocked,
         setBlocked,
         setBlockedNavigationMessage,
-        close
+        close,
     } = useSideDialogContext();
 
     const navigate = useNavigate();
@@ -64,22 +71,10 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     }
 
     const parentCollectionIds = useMemo(() => {
-        return navigationController.getParentCollectionIds(props.path);
-    }, [navigationController, props.path]);
-
-    const collection = useMemo(() => {
-        if (props.collection) {
-            return props.collection;
-        }
+        return navigationController.getParentCollectionIds(path);
+    }, [navigationController, path]);
 
-        const registryCollection = navigationController.getCollection(props.path);
-        if (registryCollection) {
-            return registryCollection;
-        }
-
-        console.error("ERROR: No collection found in path `", props.path, "`. Entity id: ", props.entityId);
-        throw Error("ERROR: No collection found in path `" + props.path + "`. Make sure you have defined a collection for this path in the root navigation.");
-    }, [navigationController, props.collection]);
+    const collection = props.collection ?? navigationController.getCollection(path);
 
     useEffect(() => {
         function beforeunload(e: any) {
@@ -126,16 +121,16 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                             onClick={onClose}>
                             <CloseIcon size={"small"}/>
                         </IconButton>
-                        <IconButton
+                        {allowFullScreen && <IconButton
                             className="self-center"
                             onClick={() => {
-                                if (props.entityId)
+                                if (entityId)
                                     navigate(location.pathname);
                                 else
                                     navigate(location.pathname + "#new");
                             }}>
                             <OpenInFullIcon size={"small"}/>
-                        </IconButton>
+                        </IconButton>}
                     </>}
                     onTabChange={({
                                       path,
@@ -151,7 +146,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                             collection,
                         });
                     }}
-                    formProps={props.formProps}
+                    formProps={formProps}
                 />
             </ErrorBoundary>
 

package/src/core/FireCMS.tsx

@@ -44,7 +44,7 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         authController,
         storageSource,
         dataSourceDelegate,
-        plugins,
+        plugins: pluginsProp,
         onAnalyticsEvent,
         propertyConfigs,
         entityViews,
@@ -53,6 +53,12 @@ export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
         apiKey
     } = props;
 
+    if (pluginsProp) {
+        console.warn("The `plugins` prop is deprecated in the FireCMS component. You should pass your plugins to `useBuildNavigationController` instead.");
+    }
+
+    const plugins = navigationController.plugins ?? pluginsProp;
+
     const sideDialogsController = useBuildSideDialogsController();
     const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController, authController);
 

package/src/form/EntityForm.tsx

@@ -621,7 +621,7 @@ export function EntityForm<M extends Record<string, any>>({
         <>
             {!Builder && <div className={"w-full py-2 flex flex-col items-start my-4 lg:my-6"}>
                 <Typography
-                    className={"py-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-2" : "mb-0")}
+                    className={"my-4 flex-grow line-clamp-1 " + (collection.hideIdFromForm ? "mb-6" : "")}
                     variant={"h4"}>
                     {title ?? collection.singularName ?? collection.name}
                 </Typography>

package/src/form/PropertyFieldBinding.tsx

@@ -214,7 +214,6 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
 
     const customFieldProps: any = property.customProps;
     const value = formexFieldProps.field.value;
-    // const initialValue = formexFieldProps.meta.initialValue;
     const error = getIn(formexFieldProps.form.errors, propertyKey);
     const touched = getIn(formexFieldProps.form.touched, propertyKey);
 

package/src/form/components/CustomIdField.tsx

@@ -103,7 +103,9 @@ export function CustomIdField<M extends Record<string, any>>({
                     size={"large"}
                     error={error}
                     fullWidth={true}
-                    onValueChange={(v) => onChange(v as string)}
+                    onValueChange={(v) => {
+                        onChange(v as string);
+                    }}
                     {...fieldProps}
                     renderValue={(option) => {
                         const enumConfig = enumValues.find(e => e.id === option);

package/src/form/components/LabelWithIcon.tsx

@@ -24,7 +24,7 @@ export const LabelWithIcon = forwardRef<HTMLDivElement, LabelWithIconProps>(
         return (
             <div
                 ref={ref}
-                className={cls("inline-flex items-center my-0.5",
+                className={cls("align-middle inline-flex items-center my-0.5",
                     small ? "gap-1" : "gap-2",
                     className)}
             >