@firecms/core 3.0.0-beta.10 → 3.0.0-beta.12

package/src/components/EntityCollectionView/useSelectionController.tsx

@@ -10,9 +10,10 @@ export function useSelectionController<M extends Record<string, any> = any>(
     const toggleEntitySelection = useCallback((entity: Entity<M>, newSelectedState?: boolean) => {
         let newValue;
         if (newSelectedState === undefined) {
-            if (selectedEntities.map(e => e.id).includes(entity.id)) {
+            const isSelected = Boolean(selectedEntities.find(e => e.id === entity.id && e.path === entity.path));
+            if (isSelected) {
                 onSelectionChange?.(entity, false);
-                newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+                newValue = selectedEntities.filter((item: Entity<M>) => !(item.id === entity.id && item.path === entity.path));
             } else {
                 onSelectionChange?.(entity, true);
                 newValue = [...selectedEntities, entity];
@@ -23,14 +24,14 @@ export function useSelectionController<M extends Record<string, any> = any>(
                 newValue = [...selectedEntities, entity];
             } else {
                 onSelectionChange?.(entity, false);
-                newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+                newValue = selectedEntities.filter((item: Entity<M>) => !(item.id === entity.id && item.path === entity.path));
             }
         }
         setSelectedEntities(newValue);
     }, [selectedEntities]);
 
     const isEntitySelected = useCallback((entity: Entity<M>) => {
-        return selectedEntities.map(e => e.id).includes(entity.id);
+        return Boolean(selectedEntities.find(e => e.id === entity.id && e.path === entity.path));
     }, [selectedEntities]);
 
     return {

package/src/components/EntityPreview.tsx

@@ -62,39 +62,47 @@ export function EntityPreview({
         collection,
         path: entity.path,
         values: entity.values,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     }), [collection]);
 
-    const listProperties = useMemo(() => getEntityPreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
+    const listProperties = useMemo(() => getEntityPreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "medium" || size === "large" ? 3 : 1),
         [previewProperties, resolvedCollection, size]);
 
     const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
     const imagePropertyKey = getEntityImagePreviewPropertyKey(resolvedCollection);
     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);
 
+    const imageValue = imagePropertyKey ? getValueInPath(entity.values, imagePropertyKey) : undefined;
+    const usedImageValue = imageProperty !== undefined ? ("of" in imageProperty
+            ? ((imageValue ?? []).length > 0
+                ? imageValue[0] : undefined)
+            : imageValue)
+        : undefined;
+
     return <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                                    hover={disabled ? undefined : hover}
                                    size={size}>
-        <div className={cls("flex w-10 h-10 mr-2 shrink-0", size === "smallest" ? "my-0.5" : "m-2 self-start")}>
-            {imageProperty && <PropertyPreview property={imageProperty}
-                                               propertyKey={imagePropertyKey as string}
-                                               size={"smallest"}
-                                               value={getValueInPath(entity.values, imagePropertyKey as string)}/>}
-            {!imageProperty && <IconForView collectionOrView={collection} size={size} className={"m-auto"}/>}
+        <div className={cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "small" ? "my-0.5" : "m-2 self-start")}>
+            {usedImageProperty && usedImageValue && <PropertyPreview property={usedImageProperty}
+                                                                     propertyKey={imagePropertyKey as string}
+                                                                     size={"small"}
+                                                                     value={usedImageValue}/>}
+            {(!usedImageProperty || !usedImageValue) && <IconForView collectionOrView={collection}
+                                                                     color={"primary"}
+                                                                     size={size}
+                                                                     className={"m-auto p-1"}/>}
         </div>
 
 
-        <div className={"flex flex-col grow-1 w-full max-w-full m-1"}>
+        <div className={"flex flex-col grow-1 w-full m-1 shrink-1"} style={{
+            "maxWidth": "calc(100% - 96px)"
+        }}>
 
-            {size !== "smallest" && includeId && (
+            {size !== "small" && includeId && (
                 entity
-                    ? <div className={`${
-                        size !== "medium"
-                            ? "block whitespace-nowrap overflow-hidden truncate"
-                            : ""
-                    }`}>
+                    ? <div className={"block whitespace-nowrap overflow-hidden truncate"}>
                         <Typography variant={"caption"}
                                     color={"disabled"}
                                     className={"font-mono"}>
@@ -104,17 +112,17 @@ export function EntityPreview({
                     : <Skeleton/>)}
 
             {titleProperty && (
-                <div className={"my-0.5 text-sm font-medium"}>
+                <div className={"truncate my-0.5 text-sm font-medium"}>
                     {
                         entity
                             ? <PropertyPreview
                                 propertyKey={titleProperty as string}
                                 value={getValueInPath(entity.values, titleProperty)}
                                 property={resolvedCollection.properties[titleProperty as string] as ResolvedProperty}
-                                size={"medium"}/>
+                                size={"large"}/>
                             : <SkeletonPropertyComponent
                                 property={resolvedCollection.properties[titleProperty as string] as ResolvedProperty}
-                                size={"medium"}/>
+                                size={"large"}/>
                     }
                 </div>
             )}
@@ -125,17 +133,17 @@ export function EntityPreview({
 
                 return (
                     <div key={"ref_prev_" + key}
-                         className={restProperties.length > 1 ? "my-0.5" : "my-0"}>
+                         className={cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0")}>
                         {
                             entity
                                 ? <PropertyPreview
                                     propertyKey={key as string}
                                     value={getValueInPath(entity.values, key)}
                                     property={childProperty as ResolvedProperty}
-                                    size={"smallest"}/>
+                                    size={"small"}/>
                                 : <SkeletonPropertyComponent
                                     property={childProperty as ResolvedProperty}
-                                    size={"smallest"}/>
+                                    size={"small"}/>
                         }
                     </div>
                 );
@@ -144,11 +152,11 @@ export function EntityPreview({
         </div>
 
         {entity && includeEntityLink &&
-            <Tooltip title={`See details for ${entity.id}`}>
+            <Tooltip title={`See details for ${entity.id}`} className={"shrink-0"}>
                 <IconButton
                     color={"inherit"}
-                    size={"small"}
-                    className={size !== "smallest" ? "self-start" : ""}
+                    size={"medium"}
+                    className={size !== "small" ? "self-start" : ""}
                     onClick={(e) => {
                         e.stopPropagation();
                         analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
@@ -162,7 +170,7 @@ export function EntityPreview({
                             updateUrl: true
                         });
                     }}>
-                    <KeyboardTabIcon size={"small"}/>
+                    <KeyboardTabIcon size={"medium"}/>
                 </IconButton>
             </Tooltip>}
 
@@ -181,7 +189,6 @@ export type EntityPreviewContainerProps = {
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
-
 export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
                                                                                                          children,
                                                                                                          hover,
@@ -200,12 +207,12 @@ export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPre
             tabindex: 0
         }}
         className={cls(
-            "bg-white dark:bg-gray-900",
+            "bg-white dark:bg-surface-900",
             "min-h-[42px]",
             fullwidth ? "w-full" : "",
             "items-center",
-            hover ? "hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800" : "",
-            size === "smallest" ? "p-1" : "px-2 py-1",
+            hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "",
+            size === "small" ? "p-1" : "px-2 py-1",
             "flex border rounded-lg",
             onClick ? "cursor-pointer" : "",
             defaultBorderMixin,
@@ -220,3 +227,5 @@ export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPre
         {children}
     </div>;
 });
+
+EntityPreviewContainer.displayName = "EntityPreviewContainer";

package/src/components/EntityView.tsx

@@ -30,7 +30,7 @@ export function EntityView<M extends Record<string, any>>(
         path,
         entityId: entity.id,
         values: entity.values,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     }), [collection, path, entity, customizationController.propertyConfigs]);
 
     const properties: ResolvedProperties = resolvedCollection.properties;
@@ -40,10 +40,10 @@ export function EntityView<M extends Record<string, any>>(
             <div className={"w-full mb-4"}>
                 <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>
+                        <span className="pl-2 text-sm text-surface-600">Id</span>
                     </div>
                     <div
-                        className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
+                        className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
                         <span className="flex-grow mr-2">{entity.id}</span>
                         {customizationController?.entityLinkBuilder &&
                             <a href={customizationController.entityLinkBuilder({ entity })}
@@ -64,10 +64,10 @@ export function EntityView<M extends Record<string, any>>(
                                 key={`reference_previews_${key}`}
                                 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>
+                                    <span className="pl-2 text-sm text-surface-600">{property.name}</span>
                                 </div>
                                 <div
-                                    className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
+                                    className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
                                     <PropertyPreview
                                         propertyKey={key}
                                         value={value}

package/src/components/ErrorView.tsx

@@ -26,13 +26,13 @@ export function ErrorView({
                               tooltip
                           }: ErrorViewProps): React.ReactElement {
     const component = error instanceof Error ? error.message : error;
-    console.error("ErrorView", error)
+    console.warn("ErrorView", error)
 
     const body = (
         <div
             className="flex items-center m-2">
-            <ErrorIcon size={"small"} color={"error"}/>
-            <div className="pl-2">
+            <ErrorIcon className={"mx-2"} size={"small"} color={"error"}/>
+            <div className="pl-4">
                 {title && <Typography
                     variant={"body2"}
                     className="font-medium">{title}</Typography>}

package/src/components/HomePage/DefaultHomePage.tsx

@@ -140,6 +140,7 @@ export function DefaultHomePage({
                     <SearchBar onTextSearch={updateSearchResults}
                                placeholder={"Search collections"}
                                large={false}
+                               autoFocus={true}
                                innerClassName={"w-full"}
                                className={"w-full flex-grow"}/>
                     {additionalActions}

package/src/components/HomePage/FavouritesView.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 import { useNavigationController } from "../../hooks";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
 import { TopNavigationEntry } from "../../types";
-import { Chip, Collapse, StarBorderIcon, StarIcon } from "@firecms/ui";
+import { Chip, Collapse, StarIcon } from "@firecms/ui";
 
 function NavigationChip({ entry }: { entry: TopNavigationEntry }) {
 
@@ -29,16 +29,11 @@ function NavigationChip({ entry }: { entry: TopNavigationEntry }) {
     return <Chip
         key={entry.path}
         onClick={() => navigate(entry.url)}
-        icon={
-            favourite
-                ? <StarIcon
-                    onClick={onIconClick}
-                    size={18}
-                    className={"text-secondary"}/>
-                : <StarBorderIcon
-                    onClick={onIconClick}
-                    size={18}
-                    className={"text-gray-400 dark:text-gray-500"}/>}>
+        icon={<StarIcon
+            onClick={onIconClick}
+            size={18}
+            className={favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500"}/>
+        }>
         {entry.name}
     </Chip>;
 }

package/src/components/HomePage/NavigationCard.tsx

@@ -27,7 +27,7 @@ export function NavigationCard({
                 className="flex-grow w-full">
 
                 <div
-                    className="h-10 flex items-center w-full justify-between text-gray-300 dark:text-gray-600">
+                    className="h-10 flex items-center w-full justify-between text-surface-300 dark:text-surface-600">
 
                     {icon}
 

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -4,7 +4,7 @@ import { useCustomizationController, useFireCMSContext } from "../../hooks";
 import { PluginHomePageActionsProps, TopNavigationEntry } from "../../types";
 import { IconForView } from "../../util";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
-import { IconButton, StarBorderIcon, StarIcon } from "@firecms/ui";
+import { IconButton, StarIcon } from "@firecms/ui";
 import { NavigationCard } from "./NavigationCard";
 import { SmallNavigationCard } from "./SmallNavigationCard";
 
@@ -60,14 +60,9 @@ export function NavigationCardBinding({
                         );
                     }
                 }}>
-                {
-                    favourite
-                        ? <StarIcon
-                            size={18}
-                            className={"text-secondary"}/>
-                        : <StarBorderIcon
-                            size={18}
-                            className={"text-gray-400 dark:text-gray-500"}/>}
+                <StarIcon
+                    size={18}
+                    className={favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500"}/>
             </IconButton>
         ]
         : [];

package/src/components/HomePage/NavigationGroup.tsx

@@ -12,7 +12,7 @@ export function NavigationGroup({
     return (
         <ExpandablePanel
             invisible={true}
-            titleClassName={"font-medium text-sm text-gray-600 dark:text-gray-400"}
+            titleClassName={"font-medium text-sm text-surface-600 dark:text-surface-400"}
             innerClassName={"py-4"}
             initiallyExpanded={!(userConfigurationPersistence?.collapsedGroups ?? []).includes(group ?? "ungrouped")}
             onExpandedChange={expanded => {

package/src/components/NotFoundPage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link as ReactLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { Button, Typography } from "@firecms/ui";
 
 export function NotFoundPage() {
@@ -17,7 +17,7 @@ export function NotFoundPage() {
                 </Typography>
                 <Button
                     variant={"text"}
-                    component={ReactLink}
+                    component={Link}
                     to={"/"}>Back to home</Button>
             </div>
         </div>

package/src/components/PropertyConfigBadge.tsx

@@ -9,7 +9,7 @@ export function PropertyConfigBadge({
     propertyConfig: PropertyConfig | undefined,
     disabled?: boolean
 }): React.ReactNode {
-    const classes = "h-8 w-8 p-1 rounded-full shadow text-white " + (disabled ? "bg-gray-400 dark:bg-gray-600" : "");
+    const classes = "h-8 w-8 p-1 rounded-full shadow text-white " + (disabled ? "bg-surface-400 dark:bg-surface-600" : "");
 
     const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property) : undefined;
 

package/src/components/PropertyIdCopyTooltip.tsx

@@ -4,7 +4,7 @@ import { useCallback, useState } from "react";
 export function PropertyIdCopyTooltip({
                                           propertyKey,
                                           className,
-                                          children
+                                          children,
                                       }: {
     propertyKey: string,
     className?: string,
@@ -13,11 +13,10 @@ export function PropertyIdCopyTooltip({
     return <Tooltip title={<PropertyIdCopyTooltipContent propertyKey={propertyKey}/>}
                     delayDuration={800}
                     side={"top"}
-                    asChild={false}
                     align={"start"}
                     sideOffset={8}
                     className={className}>
-        {children}
+            {children}
     </Tooltip>
 
 }
@@ -29,7 +28,7 @@ export function PropertyIdCopyTooltipContent({ propertyKey }: { propertyKey: str
     return (
         <div className={"flex flex-row gap-2 items-center justify-center text-white"}>
             <div>
-                <Typography variant={"caption"} className={"min-w-20 text-slate-400"}
+                <Typography variant={"caption"} className={"min-w-20 text-surface-accent-400"}
                             color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
                 <Typography variant={"caption"} className={"text-white"}><code>{propertyKey}</code></Typography>
             </div>

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -4,7 +4,7 @@ import { CollectionSize, Entity, EntityCollection, FilterValues } from "../../ty
 import {
     EntityCollectionRowActions,
     EntityCollectionTable,
-    useDataSourceEntityCollectionTableController
+    useDataSourceTableController
 } from "../EntityCollectionTable";
 import {
     useAuthController,
@@ -107,7 +107,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
     const analyticsController = useAnalyticsController();
     const customizationController = useCustomizationController();
 
-    const fullPath = navigation.resolveAliasesFrom(pathInput);
+    const fullPath = navigation.resolveIdsFrom(pathInput);
 
     const dataSource = useDataSource(collection);
 
@@ -233,7 +233,9 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
             selectionEnabled={multiselect}
             hideId={collection?.hideIdFromCollection}
             fullPath={fullPath}
-            selectionController={selectionController}/>;
+            selectionController={selectionController}
+            openEntityMode={"side_panel"}
+        />;
 
     };
 
@@ -251,16 +253,17 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         collection: collection,
         path: fullPath,
         values: {},
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     }), [collection, customizationController.propertyConfigs, fullPath]);
 
     const displayedColumnIds = useColumnIds(resolvedCollection, false);
 
-    const tableController = useDataSourceEntityCollectionTableController<M>({
+    const tableController = useDataSourceTableController<M>({
         fullPath,
         collection,
         entitiesDisplayedFirst,
-        forceFilter
+        forceFilter,
+        updateUrl: false,
     });
 
     const {
@@ -289,12 +292,14 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                         tableController={tableController}
                         enablePopupIcon={false}
                         tableRowActionsBuilder={tableRowActionsBuilder}
+                        openEntityMode={"side_panel"}
                         title={<Typography variant={"subtitle2"} className={"flex flex-row gap-2"}>
                             <IconForView
                                 size={"small"}
                                 collectionOrView={collection}
-                                className={"text-gray-300 dark:text-gray-600"}/>
-                            {collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}`}
+                                className={"text-surface-300 dark:text-surface-600"}/>
+                            {collection.singularName ? `Select ${collection.singularName}` : `Select
+                                                                                              from ${collection.name}`}
                         </Typography>}
                         defaultSize={collection.defaultSize}
                         properties={resolvedCollection.properties}

package/src/components/SelectableTable/SelectableTable.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef } from "react";
-import equal from "react-fast-compare";
 import {
     CollectionSize,
     Entity,
@@ -60,7 +59,7 @@ export type SelectableTableProps<M extends Record<string, any>> = {
 
     /**
      * Controller holding the logic for the table
-     * {@link useDataSourceEntityCollectionTableController}
+     * {@link useDataSourceTableController}
      * {@link EntityTableController}
      */
     tableController: EntityTableController<M>;
@@ -77,6 +76,18 @@ export type SelectableTableProps<M extends Record<string, any>> = {
 
     size?: CollectionSize;
 
+    initialScroll?: number;
+
+    /**
+     * Callback when the table is scrolled
+     * @param props
+     */
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => void;
+
     emptyComponent?: React.ReactNode;
 
     endAdornment?: React.ReactNode;
@@ -101,7 +112,7 @@ export type SelectableTableProps<M extends Record<string, any>> = {
  *
  * The data displayed in the table is managed by a {@link EntityTableController}.
  * You can build the default, bound to a path in the datasource, by using the hook
- * {@link useDataSourceEntityCollectionTableController}
+ * {@link useDataSourceTableController}
  *
  * @see EntityCollectionTableProps
  * @see EntityCollectionView
@@ -136,6 +147,8 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                  setPopupCell
              },
          filterable = true,
+         onScroll,
+         initialScroll,
          emptyComponent,
          columns,
          forceFilter,
@@ -210,7 +223,7 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                     selectedCell,
                 }}
             >
-                <div className="h-full w-full flex flex-col bg-white dark:bg-gray-950"
+                <div className="h-full w-full flex flex-col bg-white dark:bg-surface-950"
                      ref={ref}>
 
                     <VirtualTable
@@ -229,10 +242,12 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                         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-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "";
+                            return highlightedRow?.(entity) ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "";
                         }, [highlightedRow])}
                         className="flex-grow"
                         emptyComponent={emptyComponent}

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

@@ -76,6 +76,8 @@ export function DateTimeFilterField({
         <div className="flex w-[440px]">
             <div className="w-[80px]">
                 <Select value={operation}
+                        size={"large"}
+                        fullWidth={true}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                         }}
@@ -92,7 +94,7 @@ export function DateTimeFilterField({
 
                 <DateTimeField
                     mode={mode}
-                    size={"medium"}
+                    size={"large"}
                     locale={locale}
                     value={internalValue ?? undefined}
                     onChange={(dateValue: Date | null) => {
@@ -102,7 +104,7 @@ export function DateTimeFilterField({
                 />
 
                 <Label
-                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800"
                     htmlFor="null-filter"
                 >
                     <Checkbox id="null-filter"

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

@@ -35,12 +35,10 @@ const operationLabels = {
 const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
 
 export function ReferenceFilterField({
-                                         name,
                                          value,
                                          setValue,
                                          isArray,
                                          path,
-                                         title,
                                          includeId = true,
                                          previewProperties,
                                          setHidden
@@ -50,9 +48,11 @@ export function ReferenceFilterField({
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];
 
-    isArray
-        ? possibleOperations.push("array-contains-any")
-        : possibleOperations.push("in", "not-in");
+    if (isArray) {
+        possibleOperations.push("array-contains-any");
+    } else {
+        possibleOperations.push("in", "not-in");
+    }
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
@@ -144,9 +144,11 @@ export function ReferenceFilterField({
 
     return (
 
-        <div className="flex w-[440px] flex-row">
+        <div className="flex w-[480px] flex-row">
             <div className="w-[140px]">
                 <Select value={operation}
+                        size={"large"}
+                        fullWidth={true}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                         }}
@@ -159,7 +161,7 @@ export function ReferenceFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2 h-full gap-2 flex flex-col">
+            <div className="flex-grow ml-2 h-full gap-2 flex flex-col w-[340px]">
 
                 {internalValue && Array.isArray(internalValue) && <div>
                     {internalValue.map((ref, index) => buildEntry(ref))}
@@ -179,7 +181,7 @@ export function ReferenceFilterField({
                 }
 
                 {!isArray && <Label
-                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-surface-100 dark:[&:has(:checked)]:bg-surface-800"
                     htmlFor="null-filter"
                 >
                     <Checkbox id="null-filter"