@firecms/core 3.0.0-canary.53 → 3.0.0-canary.55

package/dist/preview/components/ReferencePreview.d.ts

@@ -8,7 +8,8 @@ export type ReferencePreviewProps = {
     previewProperties?: string[];
     onClick?: (e: React.SyntheticEvent) => void;
     hover?: boolean;
-    allowEntityNavigation?: boolean;
+    includeEntityLink?: boolean;
+    includeId?: boolean;
 };
 /**
  * @group Preview components

package/dist/types/properties.d.ts

@@ -474,6 +474,14 @@ export interface ReferenceProperty extends BaseProperty<EntityReference> {
      * specified values are considered.
      */
     previewProperties?: string[];
+    /**
+     * Should the reference include the ID of the entity. Defaults to `true`
+     */
+    includeId?: boolean;
+    /**
+     * Should the reference include a link to the entity (open the entity details). Defaults to `true`
+     */
+    includeEntityLink?: boolean;
 }
 /**
  * Rules to validate any property. Some properties have specific rules

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.53",
+    "version": "3.0.0-canary.55",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,8 +46,8 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/formex": "^3.0.0-canary.53",
-        "@firecms/ui": "^3.0.0-canary.53",
+        "@firecms/formex": "^3.0.0-canary.55",
+        "@firecms/ui": "^3.0.0-canary.55",
         "@fontsource/jetbrains-mono": "^5.0.20",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.0.4",
@@ -70,8 +70,8 @@
     },
     "peerDependencies": {
         "firebase": "^10.5.2",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-router": "^6.22.0",
         "react-router-dom": "^6.22.0"
     },
@@ -111,7 +111,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "5d6f89260a9582eaac7ee9a77c48c8f340bc29d3",
+    "gitHead": "504f907bf8ecf1b7ed81fa1f84d3461c06efb39a",
     "publishConfig": {
         "access": "public"
     },

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -5,7 +5,6 @@ import { ErrorBoundary } from "../ErrorBoundary";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 import { CellRendererParams, VirtualTableColumn } from "../VirtualTable";
 import { getValueInPath } from "../../util";
-import { getRowHeight } from "../VirtualTable/common";
 import { EntityCollectionRowActions } from "./EntityCollectionRowActions";
 import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
 import { EntityCollectionTableProps } from "./EntityCollectionTableProps";
@@ -16,6 +15,7 @@ import { propertiesToColumns } from "./column_utils";
 import { ErrorView } from "../ErrorView";
 import { SelectableTable } from "../SelectableTable/SelectableTable";
 import { cn } from "@firecms/ui";
+import { getRowHeight } from "../common/table_height";
 
 /**
  * This component is in charge of rendering a collection table with a high

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -24,14 +24,13 @@ import { getPreviewSizeFrom } from "../../preview/util";
 import { isReadOnly } from "../../util";
 
 import { CustomFieldValidator, mapPropertyToYup } from "../../form/validation";
-import { useFireCMSContext } from "../../hooks";
 
 import { EntityTableCell } from "./internal/EntityTableCell";
 import { EntityTableCellActions } from "./internal/EntityTableCellActions";
 
-import { getRowHeight } from "../VirtualTable/common";
 import { useSelectableTableController } from "../SelectableTable/SelectableTableContext";
 import { useClearRestoreValue } from "../../form/useClearRestoreValue";
+import { getRowHeight } from "../common/table_height";
 
 export interface PropertyTableCellProps<T extends CMSType> {
     propertyKey: string;
@@ -348,6 +347,8 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                              path={property.path}
                                              multiselect={false}
                                              previewProperties={property.previewProperties}
+                                             includeId={property.includeId}
+                                             includeEntityLink={property.includeEntityLink}
                                              title={property.name}
                                              forceFilter={property.forceFilter}
                         />;
@@ -392,6 +393,8 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                     previewProperties={arrayProperty.of.previewProperties}
                                     title={arrayProperty.name}
                                     forceFilter={arrayProperty.of.forceFilter}
+                                    includeId={arrayProperty.of.includeId}
+                                    includeEntityLink={arrayProperty.of.includeEntityLink}
                                 />;
                         }
                         allowScroll = false;

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -22,6 +22,8 @@ type TableReferenceFieldProps = {
     title?: string;
     path: string;
     forceFilter?: FilterValues<string>;
+    includeId?: boolean;
+    includeEntityLink?: boolean;
 };
 
 export function TableReferenceField(props: TableReferenceFieldProps) {
@@ -55,7 +57,9 @@ export const TableReferenceFieldSuccess = React.memo(
             title,
             disabled,
             forceFilter,
-            collection
+            collection,
+            includeId,
+            includeEntityLink
         } = props;
 
         const onSingleEntitySelected = useCallback((entity: Entity<any>) => {
@@ -100,6 +104,8 @@ export const TableReferenceFieldSuccess = React.memo(
                     hover={!disabled}
                     disabled={!path}
                     previewProperties={previewProperties}
+                    includeId={includeId}
+                    includeEntityLink={includeEntityLink}
                 />;
             else
                 return <EntityPreviewContainer
@@ -122,6 +128,8 @@ export const TableReferenceFieldSuccess = React.memo(
                                 hover={!disabled}
                                 disabled={!path}
                                 previewProperties={previewProperties}
+                                includeId={includeId}
+                                includeEntityLink={includeEntityLink}
                             />
                         </div>
                     )

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

@@ -2,10 +2,9 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import useMeasure from "react-use-measure";
 
-import { VirtualTableSize } from "../../VirtualTable";
-import { getRowHeight } from "../../VirtualTable/common";
 import { cn, RemoveCircleIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../../components";
+import { getRowHeight, TableSize } from "../../common/table_height";
 
 interface EntityTableCellProps {
     children: React.ReactNode;
@@ -19,7 +18,7 @@ interface EntityTableCellProps {
     error?: Error;
     allowScroll?: boolean;
     align: "right" | "left" | "center";
-    size: VirtualTableSize;
+    size: TableSize;
     disabledTooltip?: string;
     width: number;
     showExpandIcon?: boolean;

package/src/components/EntityPreview.tsx

@@ -23,7 +23,8 @@ export type EntityPreviewProps = {
     previewProperties?: string[],
     disabled: undefined | boolean,
     entity: Entity<any>,
-    includeEntityNavigation?: boolean,
+    includeId?: boolean,
+    includeEntityLink?: boolean,
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
@@ -39,7 +40,8 @@ export function EntityPreview({
                                   previewProperties,
                                   onClick,
                                   size,
-                                  includeEntityNavigation,
+                                  includeId = true,
+                                  includeEntityLink = true,
                                   entity
                               }: EntityPreviewProps) {
 
@@ -85,7 +87,7 @@ export function EntityPreview({
 
         <div className={"flex flex-col flex-grow w-full m-1"}>
 
-            {size !== "tiny" && (
+            {size !== "tiny" && includeId && (
                 entity
                     ? <div className={`${
                         size !== "medium"
@@ -140,7 +142,7 @@ export function EntityPreview({
 
         </div>
 
-        {entity && includeEntityNavigation &&
+        {entity && includeEntityLink &&
             <Tooltip title={`See details for ${entity.id}`}
                      className={size !== "tiny" ? "self-start" : ""}>
                 <IconButton

package/src/components/FireCMSAppBar.tsx

@@ -31,6 +31,8 @@ export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
 
     includeDrawer?: boolean;
 
+    includeModeToggle?: boolean;
+
     drawerOpen: boolean;
 
     className?: string;
@@ -58,6 +60,7 @@ export const FireCMSAppBar = function FireCMSAppBar({
                                                         drawerOpen,
                                                         dropDownActions,
                                                         includeDrawer,
+                                                        includeModeToggle = true,
                                                         className,
                                                         style,
                                                         logo,
@@ -144,7 +147,7 @@ export const FireCMSAppBar = function FireCMSAppBar({
                         {endAdornment}
                     </ErrorBoundary>}
 
-                <IconButton
+                {includeModeToggle && <IconButton
                     color="inherit"
                     aria-label="Open drawer"
                     onClick={toggleMode}
@@ -152,7 +155,7 @@ export const FireCMSAppBar = function FireCMSAppBar({
                     {mode === "dark"
                         ? <DarkModeIcon/>
                         : <LightModeIcon/>}
-                </IconButton>
+                </IconButton>}
 
                 <Menu trigger={avatarComponent}>
                     {user && <div className={"px-4 py-2 mb-2"}>

package/src/components/ReferenceWidget.tsx

@@ -27,6 +27,8 @@ export type ReferenceWidgetProps<M extends Record<string, any>> = {
     forceFilter?: FilterValues<string>;
     size: PreviewSize;
     className?: string;
+    includeId?: boolean;
+    includeEntityLink?: boolean;
 };
 
 /**
@@ -43,7 +45,9 @@ export function ReferenceWidget<M extends Record<string, any>>({
                                                                    previewProperties,
                                                                    forceFilter,
                                                                    size,
-                                                                   className
+                                                                   className,
+                                                                   includeId,
+                                                                   includeEntityLink
                                                                }: ReferenceWidgetProps<M>) {
 
     const navigationController = useNavigationController();
@@ -52,16 +56,15 @@ export function ReferenceWidget<M extends Record<string, any>>({
         return navigationController.getCollection(path);
     }, [path, navigationController.getCollection]);
 
-    // if (!collection) {
-    //     throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
-    // }
-
     const onSingleEntitySelected = useCallback((entity: Entity<M> | null) => {
         if (disabled)
             return;
         if (onReferenceSelected) {
             const reference = entity ? getReferenceFrom(entity) : null;
-            onReferenceSelected?.({ reference, entity });
+            onReferenceSelected?.({
+                reference,
+                entity
+            });
         }
     }, [disabled, onReferenceSelected]);
 
@@ -70,7 +73,10 @@ export function ReferenceWidget<M extends Record<string, any>>({
             return;
         if (onMultipleReferenceSelected) {
             const references = entities ? entities.map(e => getReferenceFrom(e)) : null;
-            onMultipleReferenceSelected({ references, entities });
+            onMultipleReferenceSelected({
+                references,
+                entities
+            });
         }
     }, [disabled, onReferenceSelected]);
 
@@ -110,7 +116,9 @@ export function ReferenceWidget<M extends Record<string, any>>({
                     reference={ref}
                     disabled={disabled}
                     previewProperties={previewProperties}
-                    size={size}/>
+                    size={size}
+                    includeId={includeId}
+                    includeEntityLink={includeEntityLink}/>
             })}
         </div>
     } else if (value?.isEntityReference && value?.isEntityReference()) {
@@ -119,7 +127,9 @@ export function ReferenceWidget<M extends Record<string, any>>({
             onClick={onEntryClick}
             disabled={disabled}
             previewProperties={previewProperties}
-            size={size}/>
+            size={size}
+            includeId={includeId}
+            includeEntityLink={includeEntityLink}/>
 
     }
     return <div className={cn("text-sm font-medium",

package/src/components/SelectableTable/SelectableTable.tsx

@@ -18,6 +18,7 @@ import { BooleanFilterField } from "./filters/BooleanFilterField";
 import { DateTimeFilterField } from "./filters/DateTimeFilterField";
 import { useOutsideAlerter } from "@firecms/ui";
 import { SelectableTableContext } from "./SelectableTableContext";
+import { getRowHeight } from "../common/table_height";
 
 export type SelectableTableProps<M extends Record<string, any>> = {
 
@@ -115,7 +116,7 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
          onEntityClick,
          onColumnResize,
          hoverRow = true,
-         size,
+         size = "m",
          inlineEditing = false,
          tableController:
              {
@@ -224,7 +225,7 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                         error={dataLoadingError}
                         paginationEnabled={paginationEnabled}
                         onColumnResize={onColumnResize}
-                        size={size}
+                        rowHeight={getRowHeight(size)}
                         loading={dataLoading}
                         filter={filterValues}
                         onFilterUpdate={setFilterValues ? onFilterUpdate : undefined}
@@ -280,6 +281,7 @@ function createFilterField({
                                      isArray={isArray}
                                      path={baseProperty.path}
                                      title={resolvedProperty?.name}
+                                     includeId={baseProperty.includeId}
                                      previewProperties={baseProperty?.previewProperties}
                                      hidden={hidden}
                                      setHidden={setHidden}/>;

package/src/components/SelectableTable/filters/ReferenceFilterField.tsx

@@ -13,6 +13,7 @@ interface ReferenceFilterFieldProps {
     isArray?: boolean;
     path?: string;
     title?: string;
+    includeId?: boolean;
     previewProperties?: string[];
     hidden: boolean;
     setHidden: (hidden: boolean) => void;
@@ -40,6 +41,7 @@ export function ReferenceFilterField({
                                          isArray,
                                          path,
                                          title,
+                                         includeId = true,
                                          previewProperties,
                                          setHidden
                                      }: ReferenceFilterFieldProps) {
@@ -134,7 +136,8 @@ export function ReferenceFilterField({
                 onClick={doOpenDialog}
                 reference={reference}
                 hover={true}
-                allowEntityNavigation={false}
+                includeId={includeId}
+                includeEntityLink={false}
             />
         );
     };

package/src/components/VirtualTable/VirtualTable.tsx

@@ -15,7 +15,6 @@ import {
     VirtualTableWhereFilterOp
 } from "./VirtualTableProps";
 
-import { getRowHeight } from "./common";
 import { VirtualTableContextProps } from "./types";
 import { VirtualTableHeaderRow } from "./VirtualTableHeaderRow";
 import { VirtualTableRow } from "./VirtualTableRow";
@@ -92,7 +91,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              data,
                                                              onResetPagination,
                                                              onEndReached,
-                                                             size = "m",
+                                                             rowHeight = 54,
                                                              columns: columnsProp,
                                                              onRowClick,
                                                              onColumnResize,
@@ -187,7 +186,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                 onSortByUpdate(undefined);
         }, [onSortByUpdate]);
 
-        const maxScroll = Math.max((data?.length ?? 0) * getRowHeight(size) - bounds.height, 0);
+        const maxScroll = Math.max((data?.length ?? 0) * rowHeight - bounds.height, 0);
         const onEndReachedInternal = useCallback((scrollOffset: number) => {
             if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + 600) {
                 endReachCallbackThreshold.current = scrollOffset;
@@ -253,7 +252,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
 
         const virtualListController = {
             data,
-            size,
+            rowHeight: rowHeight,
             cellRenderer,
             columns,
             currentSort,
@@ -282,13 +281,13 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
 
                     <MemoizedList
                         outerRef={tableRef}
-                        key={size}
+                        key={rowHeight}
                         width={bounds.width}
                         height={bounds.height}
                         itemCount={(data?.length ?? 0) + (endAdornment ? 1 : 0)}
                         onScroll={onScroll}
                         includeAddColumn={Boolean(AddColumnComponent)}
-                        itemSize={getRowHeight(size)}/>
+                        itemSize={rowHeight}/>
 
                 </VirtualListContext.Provider>
             </div>
@@ -328,7 +327,7 @@ function MemoizedList({
                   onRowClick,
                   data,
                   columns,
-                  size = "m",
+                  rowHeight = 54,
                   cellRenderer,
                   hoverRow,
                   rowClassName,
@@ -361,7 +360,7 @@ function MemoizedList({
                             ...style,
                             top: `calc(${style.top}px + 48px)`
                         }}
-                        size={size}>
+                        rowHeight={rowHeight}>
 
                         {columns.map((column: VirtualTableColumn, columnIndex: number) => {
                             const cellData = rowData && rowData[column.key];

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -69,7 +69,7 @@ export interface VirtualTableProps<T extends Record<string, any>> {
     /**
      * Size of the table
      */
-    size?: VirtualTableSize,
+    rowHeight?: number,
 
     /**
      * In case this table should have some filters set by default
@@ -232,11 +232,6 @@ export type OnVirtualTableColumnResizeParams = {
     column: VirtualTableColumn
 };
 
-/**
- * @see Table
- * @group Components
- */
-export type VirtualTableSize = "xs" | "s" | "m" | "l" | "xl";
 
 /**
  * @see Table

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -2,7 +2,6 @@ import React, { useCallback } from "react";
 
 import equal from "react-fast-compare"
 
-import { getRowHeight } from "./common";
 import { VirtualTableRowProps } from "./types";
 import { cn } from "@firecms/ui";
 
@@ -12,7 +11,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
                                     rowIndex,
                                     children,
                                     onRowClick,
-                                    size,
+                                    rowHeight,
                                     style,
                                     hoverRow,
                                     rowClassName
@@ -40,7 +39,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
                 onClick={onClick}
                 style={{
                     ...(style),
-                    height: getRowHeight(size),
+                    height: rowHeight,
                     width: "fit-content"
                 }}
             >

package/src/components/VirtualTable/types.tsx

@@ -5,14 +5,13 @@ import {
     OnVirtualTableColumnResizeParams,
     VirtualTableColumn,
     VirtualTableFilterValues,
-    VirtualTableSize,
     VirtualTableWhereFilterOp
 } from "./VirtualTableProps";
 import { FilterFormFieldProps } from "./VirtualTableHeader";
 
 export type VirtualTableRowProps<T> = {
     style: any,
-    size: VirtualTableSize,
+    rowHeight: number,
     rowData: T;
     rowIndex: number;
     onRowClick?: (props: OnRowClickParams<any>) => void;
@@ -24,7 +23,7 @@ export type VirtualTableRowProps<T> = {
 
 export type VirtualTableContextProps<T extends any> = {
     data?: T[];
-    size?: VirtualTableSize,
+    rowHeight?: number,
     columns: VirtualTableColumn[];
     cellRenderer: React.ComponentType<CellRendererParams<T>>;
     currentSort: "asc" | "desc" | undefined;

package/src/components/{VirtualTable/common.tsx → common/table_height.tsx}

@@ -1,6 +1,9 @@
-import { VirtualTableSize } from "./VirtualTableProps";
+/**
+ * @group Components
+ */
+export type TableSize = "xs" | "s" | "m" | "l" | "xl";
 
-export function getRowHeight(size: VirtualTableSize): number {
+export function getRowHeight(size: TableSize): number {
     switch (size) {
         case "xl":
             return 400;

package/src/components/index.tsx

@@ -13,6 +13,7 @@ export * from "./common";
 
 export * from "./HomePage";
 export * from "./SelectableTable/SelectableTable";
+export * from "./SelectableTable/SelectableTableContext";
 export * from "./EntityCollectionView/EntityCollectionView";
 export * from "./EntityCollectionView/EntityCollectionViewActions";
 export * from "./EntityCollectionView/useSelectionController";

package/src/core/EntityEditView.tsx

@@ -193,6 +193,7 @@ export function EntityEditView<M extends Record<string, any>, UserType extends U
             onUpdate({ entity: updatedEntity });
 
         if (closeAfterSave) {
+            console.log("Closing side dialog")
             sideDialogContext.setBlocked(false);
             sideDialogContext.close(true);
             onClose?.();
@@ -236,7 +237,7 @@ export function EntityEditView<M extends Record<string, any>, UserType extends U
         closeAfterSave: boolean,
     }) => {
         setSaving(true);
-        saveEntityWithCallbacks({
+        return saveEntityWithCallbacks({
             path,
             entityId,
             values,
@@ -267,7 +268,7 @@ export function EntityEditView<M extends Record<string, any>, UserType extends U
         if (autoSave) {
             setValuesToBeSaved(values);
         } else {
-            saveEntity({
+            return saveEntity({
                 collection,
                 path,
                 entityId,