@firecms/core 3.3.0-canary.040c21c → 3.3.0-canary.1e1cce9

package/dist/types/collections.d.ts

@@ -232,6 +232,21 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * e.g. `initialFilter: { related_user: ["==", new EntityReference("sdc43dsw2", "users")] }`
      */
     initialFilter?: FilterValues<Extract<keyof M, string>>;
+    /**
+     * Array of property keys that are allowed for filtering. Allowed filters will be displayed in the collection view, table row headers
+     * and will be used to filter data.
+     *
+     * If not specified, all properties that are filterable will be allowed.
+     *
+     * If you specify this prop, the filters will be displayed in the collection view if they are filterable.
+     *
+     * If you set it as an empty array, no filters will be displayed.
+     *
+     * e.g. `allowedFilters: ["name", "category"]`
+     *
+     * e.g. `allowedFilters: []`
+     */
+    allowedFilters?: (keyof M)[];
     /**
      * Default sort applied to this collection.
      * When setting this prop, entities will have a default order
@@ -621,6 +636,8 @@ export type EntityTableController<M extends Record<string, any> = any> = {
     dataLoadingError?: Error;
     filterValues?: FilterValues<Extract<keyof M, string>>;
     setFilterValues?: (filterValues: FilterValues<Extract<keyof M, string>>) => void;
+    allowedFilters?: (keyof M)[];
+    forcedFilters?: (keyof M)[];
     sortBy?: [Extract<keyof M, string>, "asc" | "desc"];
     setSortBy?: (sortBy?: [Extract<keyof M, string>, "asc" | "desc"]) => void;
     searchString?: string;

package/dist/types/translations.d.ts

@@ -412,8 +412,8 @@ export interface FireCMSTranslations {
     cms_users: string;
     roles_menu: string;
     project_settings: string;
-    firestore_explorer: string;
-    explore_your_firestore_data: string;
+    firestore_manager: string;
+    manage_your_firestore_data: string;
     build_admin_panel_in_minutes: string;
     go_live_instantly: string;
     create_production_ready_back_offices: string;
@@ -481,10 +481,18 @@ export interface FireCMSTranslations {
     auto_setup_collections_button: string;
     auto_setup_collections_title: string;
     auto_setup_collections_desc: string;
-    this_can_take_a_minute: string;
+    setting_up_collections: string;
+    setting_up_collection: string;
     no_collections_found_to_setup: string;
     collections_have_been_setup: string;
     error_setting_up_collections: string;
+    setup_collections_title: string;
+    setup_collections_select_desc: string;
+    select_all: string;
+    deselect_all: string;
+    setup_collections_confirm: string;
+    collection_setup_success: string;
+    go_to_collection: string;
     add_your: string;
     database_collections: string;
     to_firecms: string;

package/dist/util/entities.d.ts

@@ -25,3 +25,4 @@ export declare function sanitizeData<M extends Record<string, any>>(values: Enti
 export declare function getReferenceFrom<M extends Record<string, any>>(entity: Entity<M>): EntityReference;
 export declare function traverseValuesProperties<M extends Record<string, any>>(inputValues: Partial<EntityValues<M>>, properties: ResolvedProperties<M>, operation: (value: any, property: Property) => any): EntityValues<M> | undefined;
 export declare function traverseValueProperty(inputValue: any, property: Property, operation: (value: any, property: Property) => any): any;
+export declare function isDataTypeFilterable(dataType: DataType, isPartOfArray?: boolean): boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.3.0-canary.040c21c",
+  "version": "3.3.0-canary.1e1cce9",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,8 +53,8 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/formex": "^3.3.0-canary.040c21c",
-    "@firecms/ui": "^3.3.0-canary.040c21c",
+    "@firecms/formex": "^3.3.0-canary.1e1cce9",
+    "@firecms/ui": "^3.3.0-canary.1e1cce9",
     "@floating-ui/dom": "^1.7.4",
     "@radix-ui/react-portal": "^1.1.10",
     "@radix-ui/react-slot": "^1.2.4",
@@ -65,7 +65,7 @@
     "history": "^5.3.0",
     "i18next": "^23.16.4",
     "json-logic-js": "^2.0.5",
-    "markdown-it": "^14.1.0",
+    "markdown-it": "^14.2.0",
     "markdown-it-ins": "^4.0.0",
     "markdown-it-mark": "^4.0.0",
     "markdown-it-task-lists": "^2.1.1",
@@ -123,7 +123,7 @@
     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.2.0",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^6.2.6",
     "react-router": "^6.30.2",
     "react-router-dom": "^6.30.2",
     "ts-jest": "^29.4.5",

package/src/app/Scaffold.tsx

@@ -70,7 +70,13 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
         const includeDrawer = drawerChildren.length > 0;
         const largeLayout = useLargeLayout();
 
-        const [drawerOpen, setDrawerOpen] = React.useState(false);
+        const [drawerOpen, setDrawerOpen] = React.useState(() => {
+            try {
+                return localStorage.getItem("firecms_drawer_open") === "true";
+            } catch {
+                return false;
+            }
+        });
         const [onHover, setOnHover] = React.useState(false);
 
         const setOnHoverTrue = useCallback(() => setOnHover(true), []);
@@ -78,10 +84,16 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
         const handleDrawerOpen = useCallback(() => {
             setDrawerOpen(true);
+            try {
+                localStorage.setItem("firecms_drawer_open", "true");
+            } catch { /* ignore */ }
         }, []);
 
         const handleDrawerClose = useCallback(() => {
             setDrawerOpen(false);
+            try {
+                localStorage.setItem("firecms_drawer_open", "false");
+            } catch { /* ignore */ }
         }, []);
 
         const computedDrawerOpen: boolean = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -245,7 +245,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
         const columnsResult: VirtualTableColumn[] = propertiesToColumns({
             properties,
             sortable,
-            forceFilter,
+            forcedFilters: tableController.forcedFilters,
+            allowedFilters: tableController.allowedFilters,
             AdditionalHeaderWidget
         });
 

package/src/components/EntityCollectionTable/column_utils.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { getTableCellAlignment, getTablePropertyColumnWidth } from "./internal/common";
 import { FilterValues, ResolvedProperties, ResolvedProperty } from "../../types";
 import { VirtualTableColumn } from "../VirtualTable";
-import { getIconForProperty, getResolvedPropertyInPath } from "../../util";
+import { getIconForProperty, getResolvedPropertyInPath, isDataTypeFilterable } from "../../util";
 import { getColumnKeysForProperty } from "../common/useColumnsIds";
 
 export function buildIdColumn(largeLayout?: boolean): VirtualTableColumn {
@@ -20,7 +20,8 @@ export function buildIdColumn(largeLayout?: boolean): VirtualTableColumn {
 export interface PropertiesToColumnsParams<M extends Record<string, any>> {
     properties: ResolvedProperties<M>;
     sortable?: boolean;
-    forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
+    forcedFilters?: (keyof M)[];
+    allowedFilters?: (keyof M)[];
     AdditionalHeaderWidget?: React.ComponentType<{
         property: ResolvedProperty,
         propertyKey: string,
@@ -28,8 +29,7 @@ export interface PropertiesToColumnsParams<M extends Record<string, any>> {
     }>;
 }
 
-export function propertiesToColumns<M extends Record<string, any>>({ properties, sortable, forceFilter, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
-    const disabledFilter = Boolean(forceFilter);
+export function propertiesToColumns<M extends Record<string, any>>({ properties, sortable, forcedFilters, AdditionalHeaderWidget, allowedFilters }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
     return Object.entries<ResolvedProperty>(properties)
         .flatMap(([key, property]) => getColumnKeysForProperty(property, key))
         .map(({
@@ -39,14 +39,19 @@ export function propertiesToColumns<M extends Record<string, any>>({ properties,
             const property = getResolvedPropertyInPath(properties, key);
             if (!property)
                 throw Error("Internal error: no property found in path " + key);
-            const filterable = filterableProperty(property);
+
+            const filterable = property.dataType === 'array' ? isDataTypeFilterable(property.of?.dataType, true) : isDataTypeFilterable(property.dataType);
+            const isFilterForced = forcedFilters?.includes(key) ?? false;
+            const isFilterAllowed = allowedFilters ? allowedFilters.includes(key) : filterable;
+
+            const filterEnabled = filterable && isFilterAllowed && !isFilterForced;
             return {
                 key: key as string,
                 align: getTableCellAlignment(property),
                 icon: getIconForProperty(property, "small"),
                 title: property.name ?? key as string,
                 sortable: sortable,
-                filter: !disabledFilter && filterable,
+                filter: filterEnabled,
                 width: getTablePropertyColumnWidth(property),
                 resizable: true,
                 custom: {
@@ -59,16 +64,3 @@ export function propertiesToColumns<M extends Record<string, any>>({ properties,
             } satisfies VirtualTableColumn;
         });
 }
-
-function filterableProperty(property: ResolvedProperty, partOfArray = false): boolean {
-    if (partOfArray) {
-        return ["string", "number", "date", "reference"].includes(property.dataType);
-    }
-    if (property.dataType === "array") {
-        if (property.of)
-            return filterableProperty(property.of, true);
-        else
-            return false;
-    }
-    return ["string", "number", "boolean", "date", "reference", "array"].includes(property.dataType);
-}

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

@@ -70,7 +70,7 @@ export const TableReferenceFieldInternal = React.memo(
         }, [updateValue]);
 
         const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
-            updateValue(entities.map((e) => getReferenceFrom(e)));
+            updateValue(entities.filter(Boolean).map((e) => getReferenceFrom(e)));
         }, [updateValue]);
 
         const selectedEntityIds = internalValue

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -178,7 +178,9 @@ export const EntityCollectionView = React.memo(
 
         const collection = useMemo(() => {
             const userOverride = userConfigPersistence?.getCollectionConfig<M>(fullPath);
-            return (userOverride ? mergeDeep(collectionProp, userOverride) : collectionProp) as EntityCollection<M>;
+            if (!userOverride) return collectionProp;
+            const { properties, ...rest } = userOverride;
+            return mergeDeep(collectionProp, rest) as EntityCollection<M>;
         }, [collectionProp, fullPath, userConfigPersistence?.getCollectionConfig]);
 
         const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
@@ -507,7 +509,8 @@ export const EntityCollectionView = React.memo(
             path: fullPath,
             propertyConfigs: customizationController.propertyConfigs,
             authController,
-        }), [collection, fullPath]);
+            userConfigPersistence,
+        }), [collection, fullPath, userConfigPersistence]);
 
         // Check if Kanban view is possible (collection has at least one string enum property)
         const hasEnumProperty = useMemo(() => {

package/src/components/EntityCollectionView/EntityCollectionViewStartActions.tsx

@@ -66,8 +66,10 @@ export function EntityCollectionViewStartActions<M extends Record<string, any>>(
         collectionEntitiesCount
     };
 
+    const hasAnyAllowedFilters = !tableController.allowedFilters || tableController.allowedFilters.length > 0;
+
     // Filters button
-    const filtersButton = resolvedProperties && tableController.setFilterValues && (
+    const filtersButton = resolvedProperties && tableController.setFilterValues && hasAnyAllowedFilters && (
         <Tooltip title={t("filters")}
             key={"filters_tooltip"}>
             <Badge
@@ -131,6 +133,7 @@ export function EntityCollectionViewStartActions<M extends Record<string, any>>(
                     filterValues={tableController.filterValues}
                     setFilterValues={(filterValues) => tableController.setFilterValues?.(filterValues ?? {})}
                     forceFilter={collection.forceFilter}
+                    allowedFilters={tableController.allowedFilters?.map(key => key.toString())}
                 />
             )}
         </>

package/src/components/EntityCollectionView/FiltersDialog.tsx

@@ -12,7 +12,6 @@ import {
     DialogActions,
     DialogContent,
     DialogTitle,
-    FilterListIcon,
     Typography
 } from "@firecms/ui";
 import { useTranslation } from "../../hooks/useTranslation";
@@ -30,6 +29,7 @@ export interface FiltersDialogProps {
     filterValues: FilterValues<any> | undefined;
     setFilterValues: (filterValues?: FilterValues<any>) => void;
     forceFilter?: FilterValues<any>;
+    allowedFilters?: string[];
 }
 
 /**
@@ -42,7 +42,8 @@ export function FiltersDialog({
     properties,
     filterValues,
     setFilterValues,
-    forceFilter
+    forceFilter,
+    allowedFilters
 }: FiltersDialogProps) {
     const { t } = useTranslation();
     
@@ -59,18 +60,18 @@ export function FiltersDialog({
         }
     }, [open, filterValues]);
 
-    // Get list of filterable properties
-    const filterableProperties = useMemo(() => {
-        return Object.entries(properties).filter(([key, property]) => {
-            if (!property) return false;
-            // Force filter properties should not be editable
-            if (forceFilter && key in forceFilter) return false;
-            // Check if property type is filterable
-            const baseProperty = property.dataType === "array" ? property.of : property;
-            if (!baseProperty) return false;
-            return ["string", "number", "boolean", "date", "reference"].includes(baseProperty.dataType);
+    // Get list of editable filter properties
+    const editableFilterProperties = useMemo(() => {
+        return Object.entries(properties).filter(([key]) => {
+            const isFilterAllowed = !allowedFilters || allowedFilters.includes(key);
+
+            const isFilterForced = Boolean(forceFilter && Object.keys(forceFilter).includes(key));
+
+            return isFilterAllowed && !isFilterForced;
         });
-    }, [properties, forceFilter]);
+    }, [properties, allowedFilters, forceFilter]);
+
+    const hasEditableFilterProperties = editableFilterProperties.length > 0;
 
     const handleFilterChange = useCallback((propertyKey: string, value?: [VirtualTableWhereFilterOp, any]) => {
         setLocalFilters(prev => {
@@ -103,7 +104,13 @@ export function FiltersDialog({
 
     // Check if any reference field's dialog is currently open (should hide this dialog)
     const isAnyFieldHidden = Object.values(hiddenFields).some(hidden => hidden);
-    const activeFilterCount = Object.keys(localFilters).length;
+
+    const getActiveFilterCount = () => {
+        const editableLocalFilters = Object.keys(localFilters).filter((key) => !forceFilter || !(key in forceFilter));
+        return editableLocalFilters.length;
+    }
+
+    const activeFilterCount = getActiveFilterCount();
 
     const renderFilterField = useCallback((propertyKey: string, property: ResolvedProperty) => {
         const isArray = property.dataType === "array";
@@ -185,14 +192,14 @@ export function FiltersDialog({
             </DialogTitle>
 
             <DialogContent >
-                {filterableProperties.length === 0 ? (
+                {!hasEditableFilterProperties ? (
                     <Typography color="secondary" className="py-8 text-center">
                         {t("no_filterable_properties")}
                     </Typography>
                 ) : (
                     <table className="w-full border-collapse">
                         <tbody>
-                            {filterableProperties.map(([propertyKey, property], index) => {
+                            {editableFilterProperties.map(([propertyKey, property], index) => {
                                 const hasFilter = propertyKey in localFilters;
 
                                 return (
@@ -234,18 +241,22 @@ export function FiltersDialog({
                     {t("clear")}
                 </Button>
                 <div className="flex-grow" />
-                <Button
-                    variant="text"
-                    onClick={() => onOpenChange(false)}
-                >
-                    {t("cancel")}
-                </Button>
-                <Button
-                    variant="filled"
-                    onClick={handleApply}
-                >
-                    {t("apply_filters")}
-                </Button>
+                {hasEditableFilterProperties && (
+                    <>
+                        <Button
+                            variant="text"
+                            onClick={() => onOpenChange(false)}
+                        >
+                            {t("cancel")}
+                        </Button>
+                        <Button
+                            variant="filled"
+                            onClick={handleApply}
+                        >
+                            {t("apply_filters")}
+                        </Button>
+                    </>
+                )}
             </DialogActions>
         </Dialog>
     );

package/src/components/EntityPreview.tsx

@@ -200,43 +200,44 @@ export type EntityPreviewContainerProps = {
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
-export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
-                                                                                                         children,
-                                                                                                         hover,
-                                                                                                         onClick,
-                                                                                                         size = "medium",
-                                                                                                         style,
-                                                                                                         className,
-                                                                                                         fullwidth = true,
-                                                                                                         ...props
-                                                                                                     }, ref) => {
-    return <div
-        ref={ref}
-        style={{
-            ...style,
-            // @ts-ignore
-            tabindex: 0
-        }}
-        className={cls(
-            "bg-white dark:bg-surface-900",
-            "min-h-[44px]",
-            fullwidth ? "w-full" : "",
-            "items-center",
-            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,
-            className)}
-        onClick={(event) => {
-            if (onClick) {
-                event.preventDefault();
-                onClick(event);
-            }
-        }}
-        {...props}>
-        {children}
-    </div>;
-});
-
-EntityPreviewContainer.displayName = "EntityPreviewContainer";
+export function EntityPreviewContainer({
+                                            children,
+                                            hover,
+                                            onClick,
+                                            size = "medium",
+                                            style,
+                                            className,
+                                            fullwidth = true,
+                                            ref
+                                        }: EntityPreviewContainerProps & { ref?: React.Ref<HTMLDivElement> }) {
+    const divClassName = cls(
+        "bg-white dark:bg-surface-900",
+        "min-h-[44px]",
+        fullwidth ? "w-full" : "",
+        "items-center",
+        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,
+        className
+    );
+
+    const handleClick = onClick
+        ? (event: React.MouseEvent<HTMLDivElement>) => {
+            event.preventDefault();
+            onClick(event);
+        }
+        : undefined;
+
+    const divProps: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> } = {
+        ref,
+        tabIndex: 0,
+        style,
+        className: divClassName,
+        onClick: handleClick,
+    };
+
+    return <div {...divProps}>{children}</div>;
+}
+

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 
-import { useCustomizationController, useFireCMSContext } from "../../hooks";
+import { useCustomizationController, useFireCMSContext, useTranslation } from "../../hooks";
 import { NavigationEntry, PluginHomePageActionsProps } from "../../types";
 import { IconForView } from "../../util";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
@@ -38,6 +38,7 @@ export function NavigationCardBinding({
 }) {
 
     const userConfigurationPersistence = useUserConfigurationPersistence();
+    const { t } = useTranslation();
     const collectionIcon = <IconForView collectionOrView={collection ?? view}/>;
 
     const navigate = useNavigate();
@@ -92,15 +93,17 @@ export function NavigationCardBinding({
         {actionsArray}
     </>
 
+    const translatedName = t(name);
+
     if (type === "admin") {
         return <SmallNavigationCard icon={collectionIcon}
-                                    name={name}
+                                    name={translatedName}
                                     url={url}/>;
     }
 
     return <NavigationCard
         icon={collectionIcon}
-        name={name}
+        name={translatedName}
         description={description}
         actions={actions}
         onClick={() => {

package/src/components/ReferenceWidget.tsx

@@ -73,7 +73,7 @@ export function ReferenceWidget<M extends Record<string, any>>({
         if (disabled)
             return;
         if (onMultipleReferenceSelected) {
-            const references = entities ? entities.map(e => getReferenceFrom(e)) : null;
+            const references = entities ? entities.filter(Boolean).map(e => getReferenceFrom(e)) : null;
             onMultipleReferenceSelected({
                 references,
                 entities

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

@@ -113,11 +113,11 @@ export function ReferenceFilterField({
     }, [path]);
 
     const onSingleEntitySelected = (entity: Entity<any>) => {
-        updateFilter(operation, getReferenceFrom(entity));
+        if (entity) updateFilter(operation, getReferenceFrom(entity));
     };
 
     const onMultipleEntitiesSelected = (entities: Entity<any>[]) => {
-        updateFilter(operation, entities.map(e => getReferenceFrom(e)));
+        updateFilter(operation, entities.filter(Boolean).map(e => getReferenceFrom(e)));
     };
 
     const multiple = multipleSelectOperations.includes(operation);

package/src/components/common/useDataSourceTableController.tsx

@@ -4,6 +4,7 @@ import { useLocation } from "react-router-dom";
 import { useDataSource, useFireCMSContext, useNavigationController } from "../../hooks";
 import { useDataOrder } from "../../hooks/data/useDataOrder";
 import {
+    DataType,
     Entity,
     EntityCollection,
     EntityReference,
@@ -16,6 +17,7 @@ import {
 } from "../../types";
 import { useDebouncedData } from "./useDebouncedData";
 import { ScrollRestorationController } from "./useScrollRestoration";
+import { isDataTypeFilterable } from "../../util";
 
 const DEFAULT_PAGE_SIZE = 50;
 
@@ -135,8 +137,41 @@ export function useDataSourceTableController<M extends Record<string, any> = any
         filterValues: initialFilterUrl,
         sortBy: initialSortUrl,
     } = parseFilterAndSort(location.search);
+    
+    const availableFilterKeys = collection.allowedFilters ?? Object.keys(collection.properties);
+    const forcedFilterKeys = collection.forceFilter ? Object.keys(collection.forceFilter) : [];
 
-    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? (updateUrl ? initialFilterUrl : undefined) ?? initialFilter ?? undefined);
+    const allowedFilterKeys = useMemo(() => {
+        const availableKeys = availableFilterKeys.filter((key) => {
+            const property = collection.properties[key];
+
+            if (!property) return false;
+
+            if (typeof property === "function") return false;
+
+            const dataType = property.dataType;
+            const filterable = dataType === "array"
+                ? isDataTypeFilterable((property as { of?: { dataType: DataType } }).of?.dataType as DataType, true)
+                : isDataTypeFilterable(dataType);
+
+            return filterable;
+        });
+
+        const forcedKeys = forcedFilterKeys.filter((key) => !availableKeys.includes(key));
+
+        return [...availableKeys, ...forcedKeys];
+
+    }, [collection.properties, availableFilterKeys, forcedFilterKeys]);
+
+    const removeUnallowedFilters = useCallback((filters?: FilterValues<Extract<keyof M, string>>) => {
+        if (!filters) return;
+
+        return Object.fromEntries(Object.entries(filters).filter(([key]) => allowedFilterKeys.includes(key as keyof M)))  as FilterValues<Extract<keyof M, string>>;
+    }, [allowedFilterKeys]);
+
+    const initFilters = forceFilter ?? (updateUrl ? initialFilterUrl : undefined) ?? initialFilter ?? undefined
+
+    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(removeUnallowedFilters(initFilters));
     const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>((updateUrl ? initialSortUrl : undefined) ?? initialSortInternal);
 
     useUpdateUrl(filterValues, sortBy, searchString, updateUrl);
@@ -168,7 +203,7 @@ export function useDataSourceTableController<M extends Record<string, any> = any
     const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
     const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
 
-    const clearFilter = useCallback(() => setFilterValues(forceFilter ?? undefined), [forceFilter]);
+    const clearFilter = useCallback(() => setFilterValues(removeUnallowedFilters(forceFilter)), [forceFilter, removeUnallowedFilters]);
 
     const updateFilterValues = useCallback((updatedFilter: FilterValues<Extract<keyof M, string>> | undefined) => {
         if (forceFilter) {
@@ -178,9 +213,9 @@ export function useDataSourceTableController<M extends Record<string, any> = any
         if (updatedFilter && Object.keys(updatedFilter).length === 0) {
             setFilterValues(undefined);
         } else {
-            setFilterValues(updatedFilter);
+            setFilterValues(removeUnallowedFilters(updatedFilter));
         }
-    }, [forceFilter]);
+    }, [forceFilter, removeUnallowedFilters]);
 
     useEffect(() => {
 
@@ -268,6 +303,8 @@ export function useDataSourceTableController<M extends Record<string, any> = any
         dataLoadingError,
         filterValues,
         setFilterValues: updateFilterValues,
+        allowedFilters: allowedFilterKeys,
+        forcedFilters: forcedFilterKeys,
         sortBy,
         setSortBy,
         searchString,

package/src/core/DefaultDrawer.tsx

@@ -128,7 +128,7 @@ export function DefaultDrawer({
                             }}
                             key={entry.id}>
                             {<IconForView collectionOrView={entry.view} />}
-                            {t(entry.name as any)}
+                            {t(entry.name)}
                         </MenuItem>)}
 
                 </Menu>}

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -58,7 +58,7 @@ export function ArrayOfReferencesFieldBinding({
     }
 
     const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
-        setValue(entities.map(e => getReferenceFrom(e)));
+        setValue(entities.filter(Boolean).map(e => getReferenceFrom(e)));
     }, [setValue]);
 
     const referenceDialogController = useReferenceDialog({