@firecms/core 3.0.0-canary.235 → 3.0.0-canary.239

package/dist/types/collections.d.ts

@@ -293,6 +293,11 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * If set to true, a tab including the JSON representation of the entity will be included.
      */
     includeJsonView?: boolean;
+    /**
+     * If set to true, changes to the entity will be saved in a subcollection.
+     * This prop has no effect if the history plugin is not enabled
+     */
+    history?: boolean;
 }
 /**
  * Parameter passed to the `Actions` prop in the collection configuration.
@@ -437,6 +442,10 @@ export type EntityCustomView<M extends Record<string, any> = any> = {
      * Name of this custom view.
      */
     name: string;
+    /**
+     * Render this custom view in the tab of the entity view, instead of the name
+     */
+    tabComponent?: React.ReactNode;
     /**
      * If set to true, the actions of the entity (save, discard,delete) will be
      * included in the view. By default the actions are located in the right or bottom,
@@ -448,6 +457,10 @@ export type EntityCustomView<M extends Record<string, any> = any> = {
      * Builder for rendering the custom view
      */
     Builder?: React.ComponentType<EntityCustomViewParams<M>>;
+    /**
+     * Position of this tab in the entity view. Defaults to `end`.
+     */
+    position?: "start" | "end";
 };
 /**
  * Parameters passed to the builder in charge of rendering a custom panel for

package/dist/types/plugins.d.ts

@@ -131,6 +131,18 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
         fieldBuilder?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T, any, EC>) => React.ComponentType<FieldProps<T>> | null;
         fieldBuilderEnabled?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T>) => boolean;
     };
+    collection?: {
+        /**
+         * Use this method to modify a single collection before it is rendered.
+         * @param collection
+         */
+        modifyCollection?: (collection: EntityCollection) => EntityCollection;
+        /**
+         * Use this method to modify, add or remove collections.
+         * @param collections
+         */
+        injectCollections?: (collections: EntityCollection[]) => EntityCollection[];
+    };
 };
 /**
  * Props passed to the {@link FireCMSPlugin.homePage.CollectionActions} method.

package/dist/types/side_entity_controller.d.ts

@@ -60,6 +60,10 @@ export interface EntitySidePanelProps<M extends Record<string, any> = any> {
      * Override some form properties
      */
     formProps?: Partial<EntityFormProps<M>>;
+    /**
+     * Allow the user to open the entity fullscreen
+     */
+    allowFullScreen?: boolean;
 }
 /**
  * Controller to open the side dialog displaying entity forms

package/dist/util/callbacks.d.ts

@@ -0,0 +1,2 @@
+import { EntityCallbacks } from "../types";
+export declare const mergeCallbacks: (baseCallbacks?: EntityCallbacks, pluginCallbacks?: EntityCallbacks) => EntityCallbacks | undefined;

package/dist/util/index.d.ts

@@ -23,3 +23,4 @@ export * from "./join_collections";
 export * from "./builders";
 export * from "./useTraceUpdate";
 export * from "./storage";
+export * from "./callbacks";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.235",
+  "version": "3.0.0-canary.239",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.235",
-    "@firecms/formex": "^3.0.0-canary.235",
-    "@firecms/ui": "^3.0.0-canary.235",
+    "@firecms/editor": "^3.0.0-canary.239",
+    "@firecms/formex": "^3.0.0-canary.239",
+    "@firecms/ui": "^3.0.0-canary.239",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -105,7 +105,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "d3f4ac352f53c76f2b8631e6d0cccec533dd5826",
+  "gitHead": "28e265bdb20ddd0d2eb813e9cbc2c082e17c2c65",
   "publishConfig": {
     "access": "public"
   },

package/src/components/ConfirmationDialog.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton } from "@firecms/ui";
 
 export function ConfirmationDialog({
-                                             open,
-                                             onAccept,
-                                             onCancel,
-                                             title,
-                                             loading,
-                                             body
-                                         }: {
+                                       open,
+                                       onAccept,
+                                       onCancel,
+                                       title,
+                                       loading,
+                                       body
+                                   }: {
     open: boolean,
     onAccept: () => void,
     onCancel: () => void,
@@ -38,7 +38,7 @@ export function ConfirmationDialog({
                     type="submit"
                     loading={loading}
                     onClick={onAccept}
-                >
+                    autoFocus>
                     Ok
                 </LoadingButton>
             </DialogActions>

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -394,7 +394,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                     size={size}
                                     multiselect={true}
                                     path={arrayProperty.of.path}
-                                    previewProperties={arrayProperty.of.previewProperties}
+                                    previewProperties={arrayProperty.of.previewKeys}
                                     title={arrayProperty.name}
                                     forceFilter={arrayProperty.of.forceFilter}
                                     includeId={arrayProperty.of.includeId}

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -55,7 +55,7 @@ export function CollectionTableToolbar({
         <Tooltip title={"Table row size"} side={"right"} sideOffset={4}>
             <Select
                 value={size as string}
-                className="w-16 h-10"
+                className="w-16 ml-2"
                 size={"small"}
                 onValueChange={(v) => onSizeChanged(v as CollectionSize)}
                 renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -753,6 +753,8 @@ export const EntityCollectionView = React.memo(
             equal(a.additionalFields, b.additionalFields) &&
             equal(a.sideDialogWidth, b.sideDialogWidth) &&
             equal(a.openEntityMode, b.openEntityMode) &&
+            equal(a.exportable, b.exportable) &&
+            equal(a.history, b.history) &&
             equal(a.forceFilter, b.forceFilter);
     }) as React.FunctionComponent<EntityCollectionViewProps<any>>
 

package/src/components/EntityPreview.tsx

@@ -7,6 +7,7 @@ import {
     getEntityImagePreviewPropertyKey,
     getEntityPreviewKeys,
     getEntityTitlePropertyKey,
+    getPropertyInPath,
     getValueInPath,
     IconForView,
     resolveCollection
@@ -26,11 +27,13 @@ export type EntityPreviewProps = {
     actions?: React.ReactNode,
     collection?: EntityCollection,
     hover?: boolean;
-    previewProperties?: string[],
+    previewKeys?: string[],
     disabled?: boolean,
     entity: Entity<any>,
     includeId?: boolean,
+    includeTitle?: boolean,
     includeEntityLink?: boolean,
+    includeImage?: boolean,
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
@@ -43,12 +46,14 @@ export function EntityPreview({
                                   disabled,
                                   hover,
                                   collection: collectionProp,
-                                  previewProperties,
+                                  previewKeys,
                                   onClick,
                                   size,
                                   includeId = true,
+                                  includeTitle = true,
                                   includeEntityLink = true,
-                                  entity
+                                  includeImage = true,
+                                  entity,
                               }: EntityPreviewProps) {
 
     const authController = useAuthController();
@@ -72,11 +77,11 @@ export function EntityPreview({
         authController
     }), [collection]);
 
-    const listProperties = useMemo(() => getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "medium" || size === "large" ? 3 : 1),
-        [previewProperties, resolvedCollection, size]);
+    const listProperties = useMemo(() => previewKeys ?? getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, previewKeys, size === "medium" || size === "large" ? 3 : 1),
+        [previewKeys, resolvedCollection, size]);
 
-    const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
-    const imagePropertyKey = getEntityImagePreviewPropertyKey(resolvedCollection);
+    const titleProperty = includeTitle ? getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs) : undefined;
+    const imagePropertyKey = includeImage ? getEntityImagePreviewPropertyKey(resolvedCollection) : undefined;
     const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : undefined;
     const usedImageProperty = imageProperty && "of" in imageProperty ? imageProperty.of : imageProperty;
     const restProperties = listProperties.filter(p => p !== titleProperty && p !== imagePropertyKey);
@@ -103,9 +108,7 @@ export function EntityPreview({
         </div>
 
 
-        <div className={"flex flex-col grow-1 w-full m-1 shrink-1"} style={{
-            "maxWidth": "calc(100% - 96px)"
-        }}>
+        <div className={"flex flex-col grow w-full m-1 shrink min-w-0"}>
 
             {size !== "small" && includeId && (
                 entity
@@ -135,9 +138,10 @@ export function EntityPreview({
             )}
 
             {restProperties && restProperties.map((key) => {
-                const childProperty = resolvedCollection.properties[key as string];
+                const childProperty = getPropertyInPath(resolvedCollection.properties, key);
                 if (!childProperty) return null;
 
+                const valueInPath = getValueInPath(entity.values, key);
                 return (
                     <div key={"ref_prev_" + key}
                          className={cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0")}>
@@ -145,7 +149,7 @@ export function EntityPreview({
                             entity
                                 ? <PropertyPreview
                                     propertyKey={key as string}
-                                    value={getValueInPath(entity.values, key)}
+                                    value={valueInPath}
                                     property={childProperty as ResolvedProperty}
                                     size={"small"}/>
                                 : <SkeletonPropertyComponent
@@ -162,7 +166,7 @@ export function EntityPreview({
             <Tooltip title={`See details for ${entity.id}`} className={"shrink-0"}>
                 <IconButton
                     color={"inherit"}
-                    size={"medium"}
+                    size={"small"}
                     className={size !== "small" ? "self-start" : ""}
                     onClick={(e) => {
                         e.stopPropagation();
@@ -177,7 +181,7 @@ export function EntityPreview({
                             updateUrl: true
                         });
                     }}>
-                    <KeyboardTabIcon size={"medium"}/>
+                    <KeyboardTabIcon size={"small"}/>
                 </IconButton>
             </Tooltip>}
 

package/src/components/ErrorView.tsx

@@ -26,7 +26,7 @@ export function ErrorView({
                               tooltip
                           }: ErrorViewProps): React.ReactElement {
     const component = error instanceof Error ? error.message : error;
-    console.warn("ErrorView", error)
+    // console.warn("ErrorView", error)
 
     const body = (
         <div

package/src/components/HomePage/DefaultHomePage.tsx

@@ -179,7 +179,7 @@ export function DefaultHomePage({
 
                             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                 {thisGroupCollections.map((entry) => (
-                                    <div key={`nav_${entry.group}_${entry.name}`} className="col-span-1">
+                                    <div key={`nav_${entry.group}_${entry.path}_${entry.name}`} className="col-span-1">
                                         <NavigationCardBinding
                                             {...entry}
                                             onClick={() => {

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

@@ -170,10 +170,13 @@ 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]);
+            if (debug) console.log("onColumnResizeInternal", params);
+            setColumns(prevColumns =>
+                prevColumns.map((column) =>
+                    column.key === params.column.key ? params.column : column
+                )
+            );
+        }, []);
 
         const onColumnResizeEndInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
             if (debug)

package/src/components/index.tsx

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