@firecms/core 3.0.0-beta.6 → 3.0.0-beta.7

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -41,7 +41,7 @@ interface PopupFormFieldProps<M extends Record<string, any>> {
      * Callback when the value of a cell has been edited
      * @param params
      */
-    onCellValueChange?: (params: OnCellValueChangeParams<any, M>) => Promise<void> | void;
+    onCellValueChange?: (params: OnCellValueChangeParams<any, any>) => Promise<void> | void;
 }
 
 export function PopupFormField<M extends Record<string, any>>(props: PopupFormFieldProps<M>) {
@@ -205,12 +205,10 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             return onCellValueChange({
                 value: values[propertyKey as string],
                 propertyKey: propertyKey as string,
-                entity,
+                data: entity,
                 setError: setSavingError,
                 onValueUpdated: () => {
                 },
-                fullPath: path,
-                context: fireCMSContext
             });
         }
         return Promise.resolve();

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -35,6 +35,7 @@ import {
     useAuthController,
     useCustomizationController,
     useDataSource,
+    useFireCMSContext,
     useLargeLayout,
     useNavigationController,
     useSideEntityController
@@ -44,7 +45,7 @@ import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import {
     AddIcon,
     Button,
-    cn,
+    cls,
     IconButton,
     KeyboardTabIcon,
     Markdown,
@@ -65,11 +66,7 @@ import {
 } from "../common";
 import { PopupFormField } from "../EntityCollectionTable/internal/popup_field/PopupFormField";
 import { GetPropertyForProps } from "../EntityCollectionTable/EntityCollectionTableProps";
-import {
-    copyEntityAction,
-    deleteEntityAction,
-    editEntityAction
-} from "../EntityCollectionTable/internal/default_entity_actions";
+import { copyEntityAction, deleteEntityAction, editEntityAction } from "../common/default_entity_actions";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 import { useSelectionController } from "./useSelectionController";
@@ -94,7 +91,9 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
      * Whether this is a subcollection or not.
      */
     isSubCollection?: boolean;
+
     className?: string;
+
 } & EntityCollection<M>;
 
 /**
@@ -131,6 +130,7 @@ export const EntityCollectionView = React.memo(
                                                                  }: EntityCollectionViewProps<M>
     ) {
 
+        const context = useFireCMSContext();
         const fullPath = fullPathProp ?? collectionProp.path;
         const dataSource = useDataSource(collectionProp);
         const navigation = useNavigationController();
@@ -196,8 +196,7 @@ export const EntityCollectionView = React.memo(
 
         const tableController = useDataSourceEntityCollectionTableController<M>({
             fullPath,
-            collection: collectionRef.current,
-            entitiesDisplayedFirst: [],
+            collection,
             lastDeleteTimestamp
         });
 
@@ -311,13 +310,11 @@ export const EntityCollectionView = React.memo(
             [fullPath]);
 
         const onValueChange: OnCellValueChange<any, any> = ({
-                                                                fullPath,
-                                                                context,
                                                                 value,
                                                                 propertyKey,
                                                                 onValueUpdated,
                                                                 setError,
-                                                                entity,
+                                                                data: entity,
                                                             }) => {
 
             const updatedValues = setIn({ ...entity.values }, propertyKey, value);
@@ -334,7 +331,6 @@ export const EntityCollectionView = React.memo(
             return saveEntityWithCallbacks({
                 ...saveProps,
                 collection,
-                callbacks: collection.callbacks,
                 dataSource,
                 context,
                 onSaveSuccess: () => {
@@ -359,7 +355,6 @@ export const EntityCollectionView = React.memo(
 
         const getPropertyFor = useCallback(({
                                                 propertyKey,
-                                                propertyValue,
                                                 entity
                                             }: GetPropertyForProps<M>) => {
             let propertyOrBuilder: PropertyOrBuilder<any, M> | undefined = getPropertyInPath<M>(collection.properties, propertyKey);
@@ -374,7 +369,6 @@ export const EntityCollectionView = React.memo(
                 propertyKey,
                 propertyOrBuilder,
                 path: fullPath,
-                propertyValue,
                 values: entity.values,
                 entityId: entity.id,
                 fields: customizationController.propertyConfigs
@@ -419,7 +413,7 @@ export const EntityCollectionView = React.memo(
                     Builder: ({ entity }) => {
                         const collectionsWithPath = navigation.getParentReferencesFromPath(entity.path);
                         return (
-                            <>
+                            <div className={"flex flex-col gap-2 w-full"}>
                                 {collectionsWithPath.map((reference) => {
                                     return (
                                         <ReferencePreview
@@ -428,7 +422,7 @@ export const EntityCollectionView = React.memo(
                                             size={"tiny"}/>
                                     );
                                 })}
-                            </>
+                            </div>
                         );
                     }
                 }]
@@ -597,12 +591,13 @@ export const EntityCollectionView = React.memo(
         });
 
         return (
-            <div className={cn("overflow-hidden h-full w-full rounded-md", className)}
+            <div className={cls("overflow-hidden h-full w-full rounded-md", className)}
                  ref={containerRef}>
                 <EntityCollectionTable
                     key={`collection_table_${fullPath}`}
                     additionalFields={additionalFields}
                     tableController={tableController}
+                    enablePopupIcon={true}
                     displayedColumnIds={displayedColumnIds}
                     onSizeChanged={onSizeChanged}
                     onEntityClick={onEntityClick}
@@ -708,6 +703,7 @@ export const EntityCollectionView = React.memo(
             equal(a.initialSort, b.initialSort) &&
             equal(a.textSearchEnabled, b.textSearchEnabled) &&
             equal(a.additionalFields, b.additionalFields) &&
+            equal(a.sideDialogWidth, b.sideDialogWidth) &&
             equal(a.forceFilter, b.forceFilter);
     }) as React.FunctionComponent<EntityCollectionViewProps<any>>
 
@@ -747,6 +743,7 @@ function EntitiesCount({
 
     useEffect(() => {
         if (onCountChange) {
+            setError(undefined);
             onCountChange(count ?? 0);
         }
     }, [onCountChange, count]);
@@ -798,7 +795,7 @@ function EntityIdHeaderWidget({
                           if (!searchString) return;
                           setOpenPopup(false);
                           return sideEntityController.open({
-                              entityId: searchString,
+                              entityId: searchString.trim(),
                               path,
                               collection,
                               updateUrl: true,
@@ -811,11 +808,13 @@ function EntityIdHeaderWidget({
                             autoFocus={openPopup}
                             placeholder={"Find entity by ID"}
                             // size={"small"}
-                            onChange={(e) => setSearchString(e.target.value)}
+                            onChange={(e) => {
+                                setSearchString(e.target.value);
+                            }}
                             value={searchString}
                             className={"flex-grow bg-transparent outline-none p-1"}/>
                         <Button variant={"outlined"}
-                                disabled={!searchString}
+                                disabled={!(searchString.trim())}
                                 type={"submit"}
                         >Go</Button>
                     </div>

package/src/components/EntityPreview.tsx

@@ -10,7 +10,7 @@ import {
     getValueInPath,
     resolveCollection
 } from "../util";
-import { cn, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { cls, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
 import { PreviewSize, PropertyPreview, SkeletonPropertyComponent } from "../preview";
 import { useCustomizationController, useNavigationController, useSideEntityController } from "../hooks";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
@@ -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) {
 
@@ -75,7 +77,7 @@ export function EntityPreview({
                                    hover={disabled ? undefined : hover}
                                    size={size}>
         {imageProperty && (
-            <div className={cn("w-10 h-10 mr-2 shrink-0 grow-0", size === "tiny" ? "my-0.5" : "m-2 self-start")}>
+            <div className={cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "tiny" ? "my-0.5" : "m-2 self-start")}>
                 <PropertyPreview property={imageProperty}
                                  propertyKey={imagePropertyKey as string}
                                  size={"tiny"}
@@ -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
@@ -195,7 +197,7 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
             // @ts-ignore
             tabindex: 0
         }}
-        className={cn(
+        className={cls(
             "bg-white dark:bg-gray-900",
             fullwidth ? "w-full" : "",
             "items-center",

package/src/components/EntityView.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { PropertyPreview } from "../preview";
 import { Entity, EntityCollection, ResolvedEntityCollection, ResolvedProperties } from "../types";
 import { resolveCollection } from "../util";
-import { cn, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
+import { cls, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
 import { CustomizationController } from "../types/customization_controller";
 import { useCustomizationController } from "../hooks/useCustomizationController";
 
@@ -31,14 +31,14 @@ export function EntityView<M extends Record<string, any>>(
         entityId: entity.id,
         values: entity.values,
         fields: customizationController.propertyConfigs
-    }), [collection, path, entity]);
+    }), [collection, path, entity, customizationController.propertyConfigs]);
 
     const properties: ResolvedProperties = resolvedCollection.properties;
 
     return (
         <div className={"w-full " + className}>
             <div className={"w-full mb-4"}>
-                <div className={cn(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
+                <div className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
                     <div className="flex items-center w-1/4">
                         <span className="pl-2 text-sm text-gray-600">Id</span>
                     </div>
@@ -62,7 +62,7 @@ export function EntityView<M extends Record<string, any>>(
                         return (
                             <div
                                 key={`reference_previews_${key}`}
-                                className={cn(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
+                                className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
                                 <div className="flex items-center w-1/4">
                                     <span className="pl-2 text-sm text-gray-600">{property.name}</span>
                                 </div>

package/src/components/FireCMSAppBar.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
 import { Link as ReactLink } from "react-router-dom";
-import { ErrorBoundary } from "../components";
+import { ErrorBoundary, FireCMSLogo } from "../components";
 import {
     Avatar,
-    cn,
+    cls,
     DarkModeIcon,
     IconButton,
     LightModeIcon,
@@ -18,7 +18,8 @@ import { useAuthController, useLargeLayout, useModeController, useNavigationCont
 import { User } from "../types";
 
 export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
-    title: string;
+
+    title?: React.ReactNode;
     /**
      * A component that gets rendered on the upper side of the main toolbar
      */
@@ -30,12 +31,16 @@ export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
 
     includeDrawer?: boolean;
 
+    includeModeToggle?: boolean;
+
     drawerOpen: boolean;
 
     className?: string;
 
     style?: React.CSSProperties;
 
+    logo?: string;
+
     user?: User;
 } & ADDITIONAL_PROPS;
 
@@ -55,8 +60,10 @@ export const FireCMSAppBar = function FireCMSAppBar({
                                                         drawerOpen,
                                                         dropDownActions,
                                                         includeDrawer,
+                                                        includeModeToggle = true,
                                                         className,
                                                         style,
+                                                        logo,
                                                         user: userProp
                                                     }: FireCMSAppBarProps) {
     const navigation = useNavigationController();
@@ -89,10 +96,10 @@ export const FireCMSAppBar = function FireCMSAppBar({
     return (
         <div
             style={style}
-            className={cn("pr-2",
+            className={cls("pr-2",
                 {
                     "ml-[17rem]": drawerOpen && largeLayout,
-                    "ml-16": includeDrawer && !(drawerOpen && largeLayout) && !startAdornment,
+                    "ml-16": includeDrawer && !(drawerOpen && largeLayout),
                     "h-16": true,
                     "z-10": largeLayout,
                     "transition-all": true,
@@ -102,27 +109,37 @@ export const FireCMSAppBar = function FireCMSAppBar({
                     "w-[calc(100%-64px)]": includeDrawer && !(drawerOpen && largeLayout),
                     "w-[calc(100%-17rem)]": includeDrawer && (drawerOpen && largeLayout),
                     "duration-150": drawerOpen && largeLayout,
-                    fixed: true,
+                    fixed: true
                 },
                 className)}>
 
             <div className="flex flex-row gap-2 px-4 h-full items-center">
 
-                {startAdornment}
-
                 {navigation && <div className="mr-8 hidden lg:block">
                     <ReactLink
                         className="visited:text-inherit visited:dark:text-inherit"
                         to={navigation?.basePath ?? "/"}
                     >
-                        <Typography variant="subtitle1"
-                                    noWrap
-                                    className={"ml-2 !font-medium"}>
-                            {title}
-                        </Typography>
+                        <div className={"flex flex-row gap-4"}>
+                            {!includeDrawer && (logo
+                                ? <img src={logo}
+                                       alt="Logo"
+                                       className={cls("w-[32px] h-[32px]")}/>
+                                : <FireCMSLogo width={"32px"} height={"32px"}/>)}
+
+                            {typeof title === "string"
+                                ? <Typography variant="subtitle1"
+                                              noWrap
+                                              className={"ml-2 !font-medium"}>
+                                    {title}
+                                </Typography>
+                                : title}
+                        </div>
                     </ReactLink>
                 </div>}
 
+                {startAdornment}
+
                 <div className={"flex-grow"}/>
 
                 {endAdornment &&
@@ -130,7 +147,7 @@ export const FireCMSAppBar = function FireCMSAppBar({
                         {endAdornment}
                     </ErrorBoundary>}
 
-                <IconButton
+                {includeModeToggle && <IconButton
                     color="inherit"
                     aria-label="Open drawer"
                     onClick={toggleMode}
@@ -138,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/HomePage/NavigationCard.tsx

@@ -1,4 +1,4 @@
-import { ArrowForwardIcon, Card, cn, Markdown, Typography, } from "@firecms/ui";
+import { ArrowForwardIcon, Card, cls, Markdown, Typography, } from "@firecms/ui";
 
 export type NavigationCardProps = {
     name: string,
@@ -17,7 +17,7 @@ export function NavigationCard({
                                }: NavigationCardProps) {
 
     return (<Card
-        className={cn("h-full p-4 cursor-pointer min-h-[230px]")}
+        className={cls("h-full p-4 cursor-pointer min-h-[230px]")}
         onClick={() => {
             onClick?.();
         }}>

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -1,6 +1,6 @@
-import { ArrowForwardIcon, cardClickableMixin, cardMixin, cn, focusedMixin, Typography, } from "@firecms/ui";
+import { ArrowForwardIcon, cardClickableMixin, cardMixin, cls, focusedMixin, Typography, } from "@firecms/ui";
 
-import { Link as ReactLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 export type SmallNavigationCardProps = {
     name: string,
@@ -17,9 +17,9 @@ export function SmallNavigationCard({
     return (
         <>
 
-            <ReactLink
+            <Link
                 tabIndex={0}
-                className={cn(cardMixin,
+                className={cls(cardMixin,
                     cardClickableMixin,
                     focusedMixin,
                     "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit visited:dark:text-inherit hover:text-inherit hover:dark:text-inherit ")}
@@ -39,7 +39,7 @@ export function SmallNavigationCard({
                 <div className={"p-4"}>
                     <ArrowForwardIcon color="primary"/>
                 </div>
-            </ReactLink>
+            </Link>
 
         </>);
 }

package/src/components/PropertyIdCopyTooltipContent.tsx

@@ -1,4 +1,4 @@
-import { ContentPasteIcon, IconButton, Typography } from "@firecms/ui";
+import { ContentCopyIcon, IconButton, Typography } from "@firecms/ui";
 import { useCallback, useState } from "react";
 
 export function PropertyIdCopyTooltipContent({ propertyId }: { propertyId: string }) {
@@ -12,9 +12,8 @@ export function PropertyIdCopyTooltipContent({ propertyId }: { propertyId: strin
                             color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
                 <Typography variant={"caption"} className={"text-white"}><code>{propertyId}</code></Typography>
             </div>
-            {/*    Copy to clipboard button*/}
             <IconButton size={"small"}>
-                <ContentPasteIcon size={"smallest"}
+                <ContentCopyIcon size={"smallest"}
                                   className={"text-white"}
                                   onClick={useCallback(() => {
                                       navigator.clipboard.writeText(propertyId);

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -291,6 +291,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                         displayedColumnIds={displayedColumnIds}
                         onEntityClick={onEntityClick}
                         tableController={tableController}
+                        enablePopupIcon={false}
                         tableRowActionsBuilder={tableRowActionsBuilder}
                         title={<Typography variant={"subtitle2"}>
                             {collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}`}

package/src/components/ReferenceWidget.tsx

@@ -4,7 +4,7 @@ import { Entity, EntityCollection, EntityReference, FilterValues } from "../type
 import { getReferenceFrom } from "../util";
 import { PreviewSize, ReferencePreview } from "../preview";
 import { useNavigationController, useReferenceDialog } from "../hooks";
-import { Button, cn } from "@firecms/ui";
+import { Button, cls } from "@firecms/ui";
 
 export type ReferenceWidgetProps<M extends Record<string, any>> = {
     name?: string,
@@ -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,10 +127,12 @@ 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 text-gray-500",
+    return <div className={cls("text-sm font-medium",
         "min-w-80 flex flex-col gap-4",
         "relative transition-colors duration-200 ease-in rounded font-medium",
         disabled ? "bg-opacity-50" : "hover:bg-opacity-75",

package/src/components/SearchIconsView.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 
 import { coolIconKeys, debounce, Icon, IconButton, iconKeys, SearchBar, Tooltip } from "@firecms/ui";
-import { icon_synonyms, iconsSearch } from "../util";
+import { iconSynonyms, iconsSearch } from "../util";
 
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 
-if (process.env.NODE_ENV !== "production") {
-    Object.keys(icon_synonyms).forEach((icon: string) => {
+if (iconSynonyms && process.env.NODE_ENV !== "production") {
+    Object.keys(iconSynonyms).forEach((icon: string) => {
         if (!iconKeys.includes(icon)) {
-            console.warn(`The icon ${icon} no longer exists. Remove it from \`icon_synonyms\``);
+            console.warn(`The icon ${icon} no longer exists. Remove it from \`iconSynonyms\``);
         }
     });
 }
@@ -48,7 +48,7 @@ export function SearchIconsView({
     return (
         <>
             <SearchBar
-                autoFocus
+                autoFocus={false}
                 innerClassName={"w-full sticky top-0 z-10"}
                 onTextSearch={(value?: string) => setQuery(value ?? "")}
                 placeholder="Search for more icons…"

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}
             />
         );
     };