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

package/dist/internal/useBuildDataSource.d.ts

@@ -1,4 +1,4 @@
-import { DataSource, DataSourceDelegate, EntityReference, GeoPoint, NavigationController, PropertyConfig } from "../types";
+import { DataSource, DataSourceDelegate, NavigationController, PropertyConfig } from "../types";
 /**
  * Use this hook to build a {@link DataSource} based on Firestore
  * @param firebaseApp
@@ -9,18 +9,3 @@ export declare function useBuildDataSource({ delegate, propertyConfigs, navigati
     propertyConfigs?: Record<string, PropertyConfig>;
     navigationController: NavigationController;
 }): DataSource;
-/**
- * Recursive function that converts Firestore data types into CMS or plain
- * JS types.
- * FireCMS uses Javascript dates internally instead of Firestore timestamps.
- * This makes it easier to interact with the rest of the libraries and
- * bindings.
- * Also, Firestore references are replaced with {@link EntityReference}
- * @param data
- * @param buildReference
- * @param buildGeoPoint
- * @param buildDate
- * @param buildDelete
- * @group Firestore
- */
-export declare function cmsToDelegateModel(data: any, buildReference: (reference: EntityReference) => any, buildGeoPoint: (geoPoint: GeoPoint) => any, buildDate: (date: Date) => any, buildDelete: () => any): any;

package/dist/types/collections.d.ts

@@ -94,6 +94,10 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      *       `subcollection:`. e.g. `subcollection:orders`.
      *     - If you are using a collection group, you will also have an
      *       additional `collectionGroupParent` column.
+     * You can use this prop to hide some properties from the table view.
+     * Note that if you set this prop, other ways to hide fields, like
+     * `hidden` in the property definition,will be ignored.
+     * `propertiesOrder` has precedence over `hidden`.
      */
     propertiesOrder?: Extract<keyof M, string>[];
     /**
@@ -445,7 +449,7 @@ export type EntityTableController<M extends Record<string, any> = any> = {
     filterValues?: FilterValues<Extract<keyof M, string>>;
     setFilterValues?: (filterValues: FilterValues<Extract<keyof M, string>>) => void;
     sortBy?: [Extract<keyof M, string>, "asc" | "desc"];
-    setSortBy?: (sortBy: [Extract<keyof M, string>, "asc" | "desc"]) => void;
+    setSortBy?: (sortBy?: [Extract<keyof M, string>, "asc" | "desc"]) => void;
     searchString?: string;
     setSearchString?: (searchString?: string) => void;
     clearFilter?: () => void;

package/dist/types/datasource.d.ts

@@ -1,4 +1,4 @@
-import { Entity, EntityReference, EntityStatus, EntityValues, GeoPoint } from "./entities";
+import { Entity, EntityStatus, EntityValues } from "./entities";
 import { EntityCollection, FilterValues } from "./collections";
 import { ResolvedEntityCollection } from "./resolved_entities";
 /**
@@ -245,18 +245,15 @@ export interface DataSourceDelegate {
      * Convert a FireCMS reference to a reference that can be used by the datasource
      * @param reference
      */
-    buildReference: (reference: EntityReference) => any;
     /**
      * Convert a FireCMS GeoPoint to a GeoPoint that can be used by the datasource
      * @param geoPoint
      */
-    buildGeoPoint: (geoPoint: GeoPoint) => any;
     /**
      * Get the object to generate the current time in the datasource
      */
     currentTime(): any;
-    buildDate: (date: Date) => any;
-    buildDeleteFieldValue: () => any;
     delegateToCMSModel: (data: any) => any;
+    cmsToDelegateModel: (data: any) => any;
     setDateToMidnight: (input?: any) => any;
 }

package/dist/types/entities.d.ts

@@ -31,7 +31,7 @@ export type EntityValues<M extends object> = M;
 /**
  * Class used to create a reference to an entity in a different path
  */
-export declare class EntityReference<M extends Record<string, any> = any> {
+export declare class EntityReference {
     /**
      * ID of the entity
      */
@@ -56,3 +56,7 @@ export declare class GeoPoint {
     readonly longitude: number;
     constructor(latitude: number, longitude: number);
 }
+export declare class Vector {
+    readonly value: number[];
+    constructor(value: number[]);
+}

package/dist/types/index.d.ts

@@ -23,7 +23,6 @@ export * from "./plugins";
 export * from "./analytics";
 export * from "./firecms";
 export * from "./roles";
-export * from "./appcheck";
 export * from "./export_import";
 export * from "./modify_collections";
 export * from "./analytics_controller";

package/dist/types/navigation.d.ts

@@ -47,7 +47,7 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      * Get the collection configuration for a given path.
      * The collection is resolved from the given path or alias.
      */
-    getCollection: (pathOrAlias: string, entityId?: string, includeUserOverride?: boolean) => EC | undefined;
+    getCollection: (pathOrId: string, entityId?: string, includeUserOverride?: boolean) => EC | undefined;
     /**
      * Get the collection configuration from its parent path segments.
      */

package/dist/types/plugins.d.ts

@@ -11,7 +11,7 @@ import { ResolvedProperty } from "./resolved_entities";
  * NOTE: This is a work in progress and the API is not stable yet.
  * @group Core
  */
-export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollection = EntityCollection, COL_ACTIONS_PROPS = any> = {
+export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollection = EntityCollection, COL_ACTIONS_PROPS = any, COL_ACTIONS_START__PROPS = any> = {
     /**
      * Key of the plugin. This is used to identify the plugin in the CMS.
      */
@@ -78,6 +78,8 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
          */
         CollectionActions?: React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_PROPS> | React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_PROPS>[];
         collectionActionsProps?: COL_ACTIONS_PROPS;
+        CollectionActionsStart?: React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_START__PROPS> | React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_START__PROPS>[];
+        collectionActionsStartProps?: COL_ACTIONS_START__PROPS;
         showTextSearchBar?: (props: {
             context: FireCMSContext;
             path: string;

package/dist/types/properties.d.ts

@@ -1,14 +1,14 @@
 import React from "react";
 import { FieldProps } from "./fields";
 import { PropertyPreviewProps } from "../preview";
-import { EntityReference, EntityValues, GeoPoint } from "./entities";
+import { EntityReference, EntityValues, GeoPoint, Vector } from "./entities";
 import { ResolvedArrayProperty, ResolvedStringProperty } from "./resolved_entities";
 import { FilterValues } from "./collections";
 import { ChipColorKey, ChipColorScheme } from "@firecms/ui";
 /**
  * @group Entity properties
  */
-export type DataType<T extends CMSType = CMSType> = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extends Date ? "date" : T extends GeoPoint ? "geopoint" : T extends EntityReference ? "reference" : T extends Array<CMSType> ? "array" : T extends Record<string, any> ? "map" : never;
+export type DataType<T extends CMSType = CMSType> = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extends Date ? "date" : T extends GeoPoint ? "geopoint" : T extends Vector ? "vector" : T extends EntityReference ? "reference" : T extends Array<CMSType> ? "array" : T extends Record<string, any> ? "map" : never;
 /**
  * @group Entity properties
  */

package/dist/util/entities.d.ts

@@ -23,6 +23,6 @@ export declare function updateDateAutoValues<M extends Record<string, any>>({ in
  * @group Datasource
  */
 export declare function sanitizeData<M extends Record<string, any>>(values: EntityValues<M>, properties: ResolvedProperties<M>): any;
-export declare function getReferenceFrom<M extends Record<string, any>>(entity: Entity<M>): EntityReference<M>;
+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;

package/dist/util/navigation_utils.d.ts

@@ -8,10 +8,10 @@ export declare function resolveCollectionPathIds(path: string, allCollections: E
 /**
  * Find the corresponding view at any depth for a given path.
  * Note that path or segments of the paths can be collection aliases.
- * @param pathOrAlias
+ * @param pathOrId
  * @param collections
  */
-export declare function getCollectionByPathOrId(pathOrAlias: string, collections: EntityCollection[]): EntityCollection | undefined;
+export declare function getCollectionByPathOrId(pathOrId: string, collections: EntityCollection[]): EntityCollection | undefined;
 /**
  * Get the subcollection combinations from a path:
  * "sites/es/locales" => ["sites/es/locales", "sites"]

package/dist/util/resolutions.d.ts

@@ -2,11 +2,11 @@ import { ArrayProperty, CMSType, EntityCollection, EntityCustomView, EntityValue
 export declare const resolveCollection: <M extends Record<string, any>>({ collection, path, entityId, values, previousValues, userConfigPersistence, fields }: {
     collection: EntityCollection<M> | ResolvedEntityCollection<M>;
     path: string;
-    entityId?: string | undefined;
-    values?: Partial<M> | undefined;
-    previousValues?: Partial<M> | undefined;
-    userConfigPersistence?: UserConfigurationPersistence | undefined;
-    fields?: Record<string, PropertyConfig> | undefined;
+    entityId?: string;
+    values?: Partial<EntityValues<M>>;
+    previousValues?: Partial<EntityValues<M>>;
+    userConfigPersistence?: UserConfigurationPersistence;
+    fields?: Record<string, PropertyConfig>;
 }) => ResolvedEntityCollection<M>;
 /**
  * Resolve property builders, enums and arrays.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-beta.5",
+  "version": "3.0.0-beta.6",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -46,17 +46,20 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/formex": "^3.0.0-beta.5",
-    "@firecms/ui": "^3.0.0-beta.5",
-    "@fontsource/ibm-plex-mono": "^5.0.12",
-    "@fontsource/roboto": "^5.0.12",
-    "@hello-pangea/dnd": "^16.5.0",
+    "@firecms/formex": "^3.0.0-beta.6",
+    "@firecms/ui": "^3.0.0-beta.6",
+    "@fontsource/jetbrains-mono": "^5.0.19",
+    "@hello-pangea/dnd": "^16.6.0",
+    "@radix-ui/react-portal": "^1.0.4",
+    "clsx": "^2.1.0",
     "date-fns": "^3.6.0",
     "history": "^5.3.0",
     "js-search": "^2.0.1",
     "markdown-it": "^14.1.0",
     "notistack": "^3.0.1",
     "object-hash": "^3.0.0",
+    "react-dropzone": "^14.2.3",
+    "react-fast-compare": "^3.2.2",
     "react-image-file-resizer": "^0.4.8",
     "react-markdown-editor-lite": "^1.3.4",
     "react-transition-group": "^4.4.5",
@@ -81,16 +84,16 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.30",
+    "@types/node": "^20.12.7",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "@types/react-measure": "^2.0.12",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "@vitejs/plugin-react": "^4.2.1",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
@@ -100,22 +103,22 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "firebase": "^10.9.0",
+    "firebase": "^10.11.0",
     "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
-    "react-router": "^6.22.0",
-    "react-router-dom": "^6.22.0",
+    "react-router": "^6.22.3",
+    "react-router-dom": "^6.22.3",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "tsd": "^0.30.7",
-    "typescript": "^5.4.2",
-    "vite": "^5.2.3"
+    "tsd": "^0.31.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.9"
   },
   "files": [
     "dist",
     "src"
   ],
-  "gitHead": "8bf864185c9617aa3f120e59c873c8b8bda8dac4",
+  "gitHead": "ffcbddbd73211bb644ff7503c2c62790bff6202a",
   "publishConfig": {
     "access": "public"
   }

package/src/components/ClearFilterSortButton.tsx

@@ -0,0 +1,41 @@
+import { Button, FilterListOffIcon } from "@firecms/ui";
+import { EntityTableController } from "../types";
+
+export function ClearFilterSortButton({
+                                          tableController,
+                                          enabled
+                                      }: {
+    enabled: boolean;
+    tableController: EntityTableController
+}) {
+    if (!enabled) {
+        return null;
+    }
+
+    const filterIsSet = !!tableController.filterValues && Object.keys(tableController.filterValues).length > 0;
+    const sortIsSet = !!tableController.sortBy && tableController.sortBy.length > 0;
+
+    if ((filterIsSet || sortIsSet) && (tableController.clearFilter || tableController.setSortBy)) {
+        let label;
+        if (filterIsSet && sortIsSet) {
+            label = "Clear filter and sort";
+        } else if (filterIsSet) {
+            label = "Clear filter";
+        } else {
+            label = "Clear sort";
+        }
+        return <Button
+            variant={"outlined"}
+            className="h-fit-content"
+            aria-label="filter clear"
+            onClick={() => {
+                tableController.clearFilter?.();
+                tableController.setSortBy?.(undefined);
+            }}
+            size={"small"}>
+            <FilterListOffIcon/>
+            {label}
+        </Button>
+    }
+    return null;
+}

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -16,7 +16,6 @@ import { propertiesToColumns } from "./column_utils";
 import { ErrorView } from "../ErrorView";
 import { SelectableTable } from "../SelectableTable/SelectableTable";
 
-
 /**
  * This component is in charge of rendering a collection table with a high
  * degree of customization.
@@ -88,8 +87,6 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
     const selectedEntityIds = selectedEntities?.map(e => e.id);
 
-    const filterIsSet = !!tableController.filterValues && Object.keys(tableController.filterValues).length > 0;
-
     const updateSize = useCallback((size: CollectionSize) => {
         if (onSizeChanged)
             onSizeChanged(size);
@@ -179,7 +176,10 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
         const child = Builder
             ? <Builder entity={entity} context={context}/>
-            : <>{additionalField.value?.({ entity, context })}</>;
+            : <>{additionalField.value?.({
+                entity,
+                context
+            })}</>;
 
         return (
             <EntityTableCell
@@ -237,10 +237,12 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
     const columns: VirtualTableColumn[] = [
         idColumn,
-        ...displayedColumnIds
-            .map((p) => {
-                return collectionColumns.find(c => c.key === p.key);
-            }).filter(Boolean) as VirtualTableColumn[]
+        ...(displayedColumnIds
+            ? displayedColumnIds
+                .map((p) => {
+                    return collectionColumns.find(c => c.key === p.key);
+                }).filter(Boolean)
+            : collectionColumns) as VirtualTableColumn[]
     ];
 
     const cellRenderer = (props: CellRendererParams<any>) => {
@@ -291,12 +293,9 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
              className="h-full w-full flex flex-col bg-white dark:bg-gray-950">
 
             <CollectionTableToolbar
-                forceFilter={disabledFilterChange}
-                filterIsSet={filterIsSet}
                 onTextSearch={textSearchEnabled ? onTextSearch : undefined}
                 textSearchLoading={textSearchLoading}
                 onTextSearchClick={textSearchEnabled ? onTextSearchClick : undefined}
-                clearFilter={tableController.clearFilter}
                 size={size}
                 onSizeChanged={updateSize}
                 title={title}

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -92,7 +92,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
      */
     tableController: EntityTableController<M>;
 
-    displayedColumnIds: PropertyColumnConfig[];
+    displayedColumnIds?: PropertyColumnConfig[];
 
     forceFilter?: FilterValues<Extract<keyof M, string>>;
 

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -95,6 +95,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
         const internalValueRef = useRef(value);
 
         const [error, setError] = useState<Error | undefined>();
+        const [validationError, setValidationError] = useState<Error | undefined>();
         const [saved, setSaved] = useState<boolean>(false);
 
         const onValueUpdated = useCallback(() => {
@@ -120,7 +121,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
         useEffect(
             () => {
                 if (!equal(value, internalValueRef.current)) {
-                    setError(undefined);
+                    setValidationError(undefined);
                     setInternalValue(value);
                     internalValueRef.current = value;
                     onValueUpdated();
@@ -136,7 +137,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             validation
                 .validate(value)
                 .then(() => {
-                    setError(undefined);
+                    setValidationError(undefined);
                     internalValueRef.current = value;
                     if (onValueChange) {
                         onValueChange({
@@ -151,17 +152,15 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                     }
                 })
                 .catch((e) => {
-                    setError(e);
+                    setValidationError(e);
                 });
         };
 
         useEffect(() => {
             validation
                 .validate(internalValue)
-                .then(() => setError(undefined))
-                .catch((e) => {
-                    setError(e);
-                });
+                .then(() => setValidationError(undefined))
+                .catch(setValidationError);
         }, [internalValue, validation, propertyKey, property, entity]);
 
         const updateValue = (newValue: any | null) => {
@@ -237,7 +236,6 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                     height={getRowHeight(size)}
                     propertyKey={propertyKey}
                     property={property}
-                    // entity={entity}
                     value={internalValue}
                     size={getPreviewSizeFrom(size)}
                 />
@@ -247,7 +245,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
         if (!customField && (!customPreview || selected)) {
             const isAStorageProperty = isStorageProperty(property);
             if (isAStorageProperty) {
-                innerComponent = <TableStorageUpload error={error}
+                innerComponent = <TableStorageUpload error={validationError ?? error}
                                                      disabled={disabled}
                                                      focused={selected}
                                                      selected={selected}
@@ -274,7 +272,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                          valueType={"number"}
                                                          small={getPreviewSizeFrom(size) !== "medium"}
                                                          enumValues={numberProperty.enumValues}
-                                                         error={error}
+                                                         error={validationError ?? error}
                                                          internalValue={internalValue as string | number}
                                                          updateValue={updateValue}
                     />;
@@ -282,7 +280,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 } else {
                     innerComponent = <VirtualTableNumberInput
                         align={align}
-                        error={error}
+                        error={validationError ?? error}
                         focused={selected}
                         disabled={disabled}
                         value={internalValue as number}
@@ -300,14 +298,14 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                          valueType={"string"}
                                                          small={getPreviewSizeFrom(size) !== "medium"}
                                                          enumValues={stringProperty.enumValues}
-                                                         error={error}
+                                                         error={validationError ?? error}
                                                          internalValue={internalValue as string | number}
                                                          updateValue={updateValue}
                     />;
                     fullHeight = true;
                 } else if (!stringProperty.storage) {
                     const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
-                    innerComponent = <VirtualTableInput error={error}
+                    innerComponent = <VirtualTableInput error={validationError ?? error}
                                                         disabled={disabled}
                                                         multiline={multiline}
                                                         focused={selected}
@@ -317,7 +315,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                     allowScroll = true;
                 }
             } else if (property.dataType === "boolean") {
-                innerComponent = <VirtualTableSwitch error={error}
+                innerComponent = <VirtualTableSwitch error={validationError ?? error}
                                                      disabled={disabled}
                                                      focused={selected}
                                                      internalValue={internalValue as boolean}
@@ -325,7 +323,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 />;
             } else if (property.dataType === "date") {
                 innerComponent = <VirtualTableDateField name={propertyKey as string}
-                                                        error={error}
+                                                        error={validationError ?? error}
                                                         disabled={disabled}
                                                         mode={property.mode}
                                                         focused={selected}
@@ -368,7 +366,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                     small={getPreviewSizeFrom(size) !== "medium"}
                                                     valueType={arrayProperty.of.dataType}
                                                     enumValues={arrayProperty.of.enumValues}
-                                                    error={error}
+                                                    error={validationError ?? error}
                                                     internalValue={internalValue as string | number}
                                                     updateValue={updateValue}
                                 />;
@@ -403,9 +401,8 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             allowScroll = false;
             showExpandIcon = selected && !innerComponent && !disabled && !readOnlyProperty;
             innerComponent = (
-                <PropertyPreview                                  width={width}
+                <PropertyPreview width={width}
                                  height={height}
-                    // entity={entity}
                                  propertyKey={propertyKey as string}
                                  value={internalValue}
                                  property={property}
@@ -426,7 +423,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 removePadding={removePadding}
                 fullHeight={fullHeight}
                 saved={saved}
-                error={error}
+                error={validationError ?? error}
                 align={align}
                 allowScroll={allowScroll}
                 showExpandIcon={showExpandIcon}

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

@@ -16,20 +16,27 @@ import { useLargeLayout } from "../../../hooks";
 
 interface CollectionTableToolbarProps {
     size: CollectionSize;
-    filterIsSet: boolean;
     loading: boolean;
-    forceFilter?: boolean;
     actionsStart?: React.ReactNode;
     actions?: React.ReactNode;
     title?: React.ReactNode,
     onTextSearchClick?: () => void;
     onTextSearch?: (searchString?: string) => void;
     onSizeChanged: (size: CollectionSize) => void;
-    clearFilter?: () => void;
     textSearchLoading?: boolean;
 }
 
-export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
+export function CollectionTableToolbar({
+                                           actions,
+                                           actionsStart,
+                                           loading,
+                                           onSizeChanged,
+                                           onTextSearch,
+                                           onTextSearchClick,
+                                           size,
+                                           textSearchLoading,
+                                           title
+                                       }: CollectionTableToolbarProps) {
 
     const searchInputRef = React.useRef<HTMLInputElement>(null);
     const largeLayout = useLargeLayout();
@@ -37,30 +44,20 @@ export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
     const searchLoading = React.useRef<boolean>(false);
 
     useEffect(() => {
-        if (searchInputRef.current && searchLoading.current && !props.textSearchLoading) {
+        if (searchInputRef.current && searchLoading.current && !textSearchLoading) {
             searchInputRef.current.focus();
         }
-        searchLoading.current = props.textSearchLoading ?? false;
-    }, [props.textSearchLoading]);
-
-    const clearFilterButton = !props.forceFilter && props.filterIsSet && props.clearFilter &&
-        <Button
-            variant={"outlined"}
-            className="h-fit-content"
-            aria-label="filter clear"
-            onClick={props.clearFilter}
-            size={"small"}>
-            <FilterListOffIcon/>
-            Clear filter
-        </Button>;
+        searchLoading.current = textSearchLoading ?? false;
+    }, [textSearchLoading]);
+
 
     const sizeSelect = (
         <Tooltip title={"Table row size"} side={"right"} sideOffset={4}>
             <Select
-                value={props.size as string}
+                value={size as string}
                 className="w-16 h-10"
                 size={"small"}
-                onValueChange={(v) => props.onSizeChanged(v as CollectionSize)}
+                onValueChange={(v) => onSizeChanged(v as CollectionSize)}
                 renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
             >
                 {["xs", "s", "m", "l", "xl"].map((size) => (
@@ -78,36 +75,34 @@ export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
 
             <div className="flex items-center gap-2 md:mr-4 mr-2">
 
-                {props.title && <div className={"hidden lg:block"}>
-                    {props.title}
+                {title && <div className={"hidden lg:block"}>
+                    {title}
                 </div>}
 
                 {sizeSelect}
 
-                {props.actionsStart}
-
-                {clearFilterButton}
+                {actionsStart}
 
             </div>
 
             <div className="flex items-center gap-2">
 
                 {largeLayout && <div className="w-[22px]">
-                    {props.loading &&
+                    {loading &&
                         <CircularProgress size={"small"}/>}
                 </div>}
 
-                {(props.onTextSearch || props.onTextSearchClick) &&
+                {(onTextSearch || onTextSearchClick) &&
                     <SearchBar
                         key={"search-bar"}
                         inputRef={searchInputRef}
-                        loading={props.textSearchLoading}
-                        disabled={Boolean(props.onTextSearchClick)}
-                        onClick={props.onTextSearchClick}
-                        onTextSearch={props.onTextSearchClick ? undefined : props.onTextSearch}
+                        loading={textSearchLoading}
+                        disabled={Boolean(onTextSearchClick)}
+                        onClick={onTextSearchClick}
+                        onTextSearch={onTextSearchClick ? undefined : onTextSearch}
                         expandable={true}/>}
 
-                {props.actions}
+                {actions}
 
             </div>