@firecms/core 3.0.0-beta.8 → 3.0.0-beta.9

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -45,7 +45,7 @@ import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import {
     AddIcon,
     Button,
-    cls,
+    cls, focusedDisabled,
     IconButton,
     KeyboardTabIcon,
     Markdown,
@@ -117,7 +117,7 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
  *
  * @param fullPath
  * @param collection
- * @constructor
+
  * @group Components
  */
 export const EntityCollectionView = React.memo(
@@ -153,7 +153,7 @@ export const EntityCollectionView = React.memo(
         }, [collection]);
 
         const canCreateEntities = canCreateEntity(collection, authController, fullPath, null);
-        const [selectedNavigationEntity, setSelectedNavigationEntity] = useState<Entity<M> | undefined>(undefined);
+        const [highlightedEntity, setHighlightedEntity] = useState<Entity<M> | undefined>(undefined);
         const [deleteEntityClicked, setDeleteEntityClicked] = React.useState<Entity<M> | Entity<M>[] | undefined>(undefined);
 
         const [lastDeleteTimestamp, setLastDeleteTimestamp] = React.useState<number>(0);
@@ -162,12 +162,12 @@ export const EntityCollectionView = React.memo(
         const [docsCount, setDocsCount] = useState<number>(0);
 
         const unselectNavigatedEntity = useCallback(() => {
-            const currentSelection = selectedNavigationEntity;
+            const currentSelection = highlightedEntity;
             setTimeout(() => {
-                if (currentSelection === selectedNavigationEntity)
-                    setSelectedNavigationEntity(undefined);
+                if (currentSelection === highlightedEntity)
+                    setHighlightedEntity(undefined);
             }, 2400);
-        }, [selectedNavigationEntity]);
+        }, [highlightedEntity]);
 
         const checkInlineEditing = useCallback((entity?: Entity<any>): boolean => {
             const collection = collectionRef.current;
@@ -186,13 +186,12 @@ export const EntityCollectionView = React.memo(
         const usedSelectionController = collection.selectionController ?? selectionController;
         const {
             selectedEntities,
-            isEntitySelected,
             setSelectedEntities
         } = usedSelectionController;
 
-        useEffect(() => {
-            setDeleteEntityClicked(undefined);
-        }, [selectedEntities]);
+        // useEffect(() => {
+        //     setDeleteEntityClicked(undefined);
+        // }, [selectedEntities]);
 
         const tableController = useDataSourceEntityCollectionTableController<M>({
             fullPath,
@@ -208,9 +207,8 @@ export const EntityCollectionView = React.memo(
         }, [tableController.setPopupCell]);
 
         const onEntityClick = useCallback((clickedEntity: Entity<M>) => {
-            console.log("Entity clicked", clickedEntity)
             const collection = collectionRef.current;
-            setSelectedNavigationEntity(clickedEntity);
+            setHighlightedEntity(clickedEntity);
             analyticsController.onAnalyticsEvent?.("edit_entity_clicked", {
                 path: clickedEntity.path,
                 entityId: clickedEntity.id
@@ -307,7 +305,7 @@ export const EntityCollectionView = React.memo(
                  value,
                  property,
                  entityId
-             }) => dataSource.checkUniqueField(fullPath, name, value, entityId),
+             }) => dataSource.checkUniqueField(fullPath, name, value, entityId, collection),
             [fullPath]);
 
         const onValueChange: OnCellValueChange<any, any> = ({
@@ -420,7 +418,7 @@ export const EntityCollectionView = React.memo(
                                         <ReferencePreview
                                             key={reference.path + "/" + reference.id}
                                             reference={reference}
-                                            size={"tiny"}/>
+                                            size={"smallest"}/>
                                     );
                                 })}
                             </div>
@@ -468,7 +466,7 @@ export const EntityCollectionView = React.memo(
             return (largeLayout ? (80 + actionsWidth) : (70 + actionsWidth)) + (collapsedActions.length > 0 ? (largeLayout ? 40 : 30) : 0);
         };
 
-        const tableRowActionsBuilder = ({
+        const tableRowActionsBuilder = useCallback(({
                                             entity,
                                             size,
                                             width,
@@ -480,7 +478,7 @@ export const EntityCollectionView = React.memo(
             frozen?: boolean
         }) => {
 
-            const isSelected = isEntitySelected(entity);
+            const isSelected = usedSelectionController.selectedEntities.map(e => e.id).includes(entity.id);
 
             const actions = getActionsForEntity({
                 entity,
@@ -495,7 +493,7 @@ export const EntityCollectionView = React.memo(
                     isSelected={isSelected}
                     selectionEnabled={selectionEnabled}
                     size={size}
-                    highlightEntity={setSelectedNavigationEntity}
+                    highlightEntity={setHighlightedEntity}
                     unhighlightEntity={unselectNavigatedEntity}
                     collection={collection}
                     fullPath={fullPath}
@@ -506,7 +504,7 @@ export const EntityCollectionView = React.memo(
                 />
             );
 
-        };
+        }, [updateLastDeleteTimestamp, usedSelectionController]);
 
         const title = <Popover
             open={popOverOpen}
@@ -610,7 +608,7 @@ export const EntityCollectionView = React.memo(
                     uniqueFieldValidator={uniqueFieldValidator}
                     title={title}
                     selectionController={usedSelectionController}
-                    highlightedEntities={selectedNavigationEntity ? [selectedNavigationEntity] : []}
+                    highlightedEntities={highlightedEntity ? [highlightedEntity] : []}
                     defaultSize={collection.defaultSize}
                     properties={resolvedCollection.properties}
                     getPropertyFor={getPropertyFor}
@@ -662,19 +660,19 @@ export const EntityCollectionView = React.memo(
                         collection={collection}/>}
                 />
 
-                <PopupFormField
+                {popupCell && <PopupFormField
                     key={`popup_form_${popupCell?.propertyKey}_${popupCell?.entity?.id}`}
                     open={Boolean(popupCell)}
                     onClose={onPopupClose}
                     cellRect={popupCell?.cellRect}
                     propertyKey={popupCell?.propertyKey}
                     collection={collection}
-                    entity={popupCell?.entity}
+                    entity={popupCell.entity}
                     tableKey={tableKey.current}
                     customFieldValidator={uniqueFieldValidator}
                     path={resolvedFullPath}
                     onCellValueChange={onValueChange}
-                    container={containerRef.current}/>
+                    container={containerRef.current}/>}
 
                 {deleteEntityClicked &&
                     <DeleteEntityDialog
@@ -782,10 +780,13 @@ function EntityIdHeaderWidget({
     const [searchString, setSearchString] = React.useState("");
     const sideEntityController = useSideEntityController();
     return (
-        <Tooltip title={!openPopup ? "Find by ID" : undefined}>
+        <Tooltip title={!openPopup ? "Find by ID" : undefined} asChild={false}>
             <Popover
                 open={openPopup}
                 onOpenChange={setOpenPopup}
+                sideOffset={0}
+                align={"start"}
+                alignOffset={-117}
                 trigger={
                     <IconButton size={"small"}>
                         <SearchIcon size={"small"}/>
@@ -815,7 +816,7 @@ function EntityIdHeaderWidget({
                                 setSearchString(e.target.value);
                             }}
                             value={searchString}
-                            className={"flex-grow bg-transparent outline-none p-1"}/>
+                            className={"flex-grow bg-transparent outline-none p-1 " + focusedDisabled}/>
                         <Button variant={"outlined"}
                                 disabled={!(searchString.trim())}
                                 type={"submit"}

package/src/components/EntityCollectionView/useSelectionController.tsx

@@ -7,19 +7,31 @@ export function useSelectionController<M extends Record<string, any> = any>(
 
     const [selectedEntities, setSelectedEntities] = useState<Entity<M>[]>([]);
 
-    const toggleEntitySelection = useCallback((entity: Entity<M>) => {
+    const toggleEntitySelection = useCallback((entity: Entity<M>, newSelectedState?: boolean) => {
         let newValue;
-        if (selectedEntities.map(e => e.id).includes(entity.id)) {
-            onSelectionChange?.(entity, false);
-            newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+        if (newSelectedState === undefined) {
+            if (selectedEntities.map(e => e.id).includes(entity.id)) {
+                onSelectionChange?.(entity, false);
+                newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+            } else {
+                onSelectionChange?.(entity, true);
+                newValue = [...selectedEntities, entity];
+            }
         } else {
-            onSelectionChange?.(entity, true);
-            newValue = [...selectedEntities, entity];
+            if (newSelectedState) {
+                onSelectionChange?.(entity, true);
+                newValue = [...selectedEntities, entity];
+            } else {
+                onSelectionChange?.(entity, false);
+                newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+            }
         }
         setSelectedEntities(newValue);
     }, [selectedEntities]);
 
-    const isEntitySelected = useCallback((entity: Entity<M>) => selectedEntities.map(e => e.id).includes(entity.id), [selectedEntities]);
+    const isEntitySelected = useCallback((entity: Entity<M>) => {
+        return selectedEntities.map(e => e.id).includes(entity.id);
+    }, [selectedEntities]);
 
     return {
         selectedEntities,

package/src/components/EntityPreview.tsx

@@ -8,6 +8,7 @@ import {
     getEntityPreviewKeys,
     getEntityTitlePropertyKey,
     getValueInPath,
+    IconForView,
     resolveCollection
 } from "../util";
 import { cls, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
@@ -76,18 +77,18 @@ export function EntityPreview({
     return <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                                    hover={disabled ? undefined : hover}
                                    size={size}>
-        {imageProperty && (
-            <div className={cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "tiny" ? "my-0.5" : "m-2 self-start")}>
-                <PropertyPreview property={imageProperty}
-                                 propertyKey={imagePropertyKey as string}
-                                 size={"tiny"}
-                                 value={getValueInPath(entity.values, imagePropertyKey as string)}/>
-            </div>
-        )}
-
-        <div className={"flex flex-col flex-grow w-full m-1"}>
-
-            {size !== "tiny" && includeId && (
+        <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>
+
+
+        <div className={"flex flex-col grow-1 w-full max-w-full m-1"}>
+
+            {size !== "smallest" && includeId && (
                 entity
                     ? <div className={`${
                         size !== "medium"
@@ -131,10 +132,10 @@ export function EntityPreview({
                                     propertyKey={key as string}
                                     value={getValueInPath(entity.values, key)}
                                     property={childProperty as ResolvedProperty}
-                                    size={"tiny"}/>
+                                    size={"smallest"}/>
                                 : <SkeletonPropertyComponent
                                     property={childProperty as ResolvedProperty}
-                                    size={"tiny"}/>
+                                    size={"smallest"}/>
                         }
                     </div>
                 );
@@ -143,11 +144,11 @@ export function EntityPreview({
         </div>
 
         {entity && includeEntityLink &&
-            <Tooltip title={`See details for ${entity.id}`}
-                     className={size !== "tiny" ? "self-start" : ""}>
+            <Tooltip title={`See details for ${entity.id}`}>
                 <IconButton
                     color={"inherit"}
                     size={"small"}
+                    className={size !== "smallest" ? "self-start" : ""}
                     onClick={(e) => {
                         e.stopPropagation();
                         analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
@@ -180,16 +181,17 @@ export type EntityPreviewContainerProps = {
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
-const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
-                                                                                                       children,
-                                                                                                       hover,
-                                                                                                       onClick,
-                                                                                                       size,
-                                                                                                       style,
-                                                                                                       className,
-                                                                                                       fullwidth = true,
-                                                                                                       ...props
-                                                                                                   }, ref) => {
+
+export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
+                                                                                                         children,
+                                                                                                         hover,
+                                                                                                         onClick,
+                                                                                                         size,
+                                                                                                         style,
+                                                                                                         className,
+                                                                                                         fullwidth = true,
+                                                                                                         ...props
+                                                                                                     }, ref) => {
     return <div
         ref={ref}
         style={{
@@ -199,10 +201,11 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
         }}
         className={cls(
             "bg-white dark:bg-gray-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 === "tiny" ? "p-1" : "p-2",
+            size === "smallest" ? "p-1" : "px-2 py-1",
             "flex border rounded-lg",
             onClick ? "cursor-pointer" : "",
             defaultBorderMixin,
@@ -217,7 +220,3 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
         {children}
     </div>;
 });
-
-EntityPreviewContainerInner.displayName = "EntityPreviewContainer";
-
-export const EntityPreviewContainer = React.memo(EntityPreviewContainerInner) as React.FC<EntityPreviewContainerProps>;

package/src/components/ErrorView.tsx

@@ -17,7 +17,7 @@ export interface ErrorViewProps {
  * @param title
  * @param error
  * @param tooltip
- * @constructor
+
  * @group Components
  */
 export function ErrorView({

package/src/components/HomePage/DefaultHomePage.tsx

@@ -1,29 +1,27 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import { useCustomizationController, useFireCMSContext, useNavigationController } from "../../hooks";
-import { CMSAnalyticsEvent, PluginGenericProps, PluginHomePageAdditionalCardsProps } from "../../types";
+import {
+    CMSAnalyticsEvent,
+    PluginGenericProps,
+    PluginHomePageAdditionalCardsProps,
+    TopNavigationEntry
+} from "../../types";
 
 import { toArray } from "../../util/arrays";
 import { NavigationGroup } from "./NavigationGroup";
 import { NavigationCardBinding } from "./NavigationCardBinding";
 
-// @ts-ignore
-import * as JsSearch from "js-search";
+import Fuse from "fuse.js"
 
 import { Container, SearchBar } from "@firecms/ui";
 import { FavouritesView } from "./FavouritesView";
 import { useRestoreScroll } from "../../internal/useRestoreScroll";
 
-const search = new JsSearch.Search("url");
-search.addIndex("name");
-search.addIndex("description");
-search.addIndex("group");
-search.addIndex("path");
-
 /**
  * Default entry view for the CMS. This component renders navigation cards
  * for each collection defined in the navigation.
- * @constructor
+
  * @group Components
  */
 export function DefaultHomePage({
@@ -49,6 +47,8 @@ export function DefaultHomePage({
     const customizationController = useCustomizationController();
     const navigationController = useNavigationController();
 
+    const fuse = useRef<Fuse<TopNavigationEntry> | null>(null);
+
     if (!navigationController.topLevelNavigation)
         throw Error("Navigation not ready in FireCMSHomePage");
 
@@ -64,13 +64,16 @@ export function DefaultHomePage({
     } = navigationController.topLevelNavigation;
 
     const [filteredUrls, setFilteredUrls] = useState<string[] | null>(null);
+    const performingSearch = Boolean(filteredUrls);
 
     const filteredNavigationEntries = filteredUrls
-        ? navigationEntries.filter((entry) => filteredUrls.includes(entry.url))
+        ? filteredUrls.map(url => navigationEntries.find(e => e.url === url)).filter(Boolean) as TopNavigationEntry[]
         : navigationEntries;
 
     useEffect(() => {
-        search.addDocuments(navigationEntries);
+        fuse.current = new Fuse(navigationEntries, {
+            keys: ["name", "description", "group", "path"]
+        });
     }, [navigationEntries]);
 
     const updateSearchResults = useCallback(
@@ -78,12 +81,15 @@ export function DefaultHomePage({
             if (!value || value === "") {
                 setFilteredUrls(null);
             } else {
-                const searchResult = search.search(value);
-                setFilteredUrls(searchResult.map((e: any) => e.url));
+                const searchResult = fuse.current?.search(value);
+                if (searchResult) {
+                    setFilteredUrls(searchResult.map((e) => e.item.url));
+                }
             }
         }, []);
 
-    const allGroups: Array<string | undefined> = [...groups];
+    const filteredGroups = filteredUrls ? filteredNavigationEntries.map(entry => entry.group) : [];
+    const allGroups: Array<string | undefined> = filteredUrls ? filteredGroups.filter((group, index) => filteredGroups.indexOf(group) === index) : [...groups];
     if (filteredNavigationEntries.filter(e => !e.group).length > 0 || filteredNavigationEntries.length === 0) {
         allGroups.push(undefined);
     }
@@ -139,7 +145,7 @@ export function DefaultHomePage({
                     {additionalActions}
                 </div>
 
-                <FavouritesView hidden={Boolean(filteredUrls)}/>
+                <FavouritesView hidden={performingSearch}/>
 
                 {additionalChildrenStart}
 
@@ -163,7 +169,7 @@ export function DefaultHomePage({
 
                     const thisGroupCollections = filteredNavigationEntries
                         .filter((entry) => entry.group === group || (!entry.group && group === undefined));
-                    if (thisGroupCollections.length === 0 && AdditionalCards.length === 0)
+                    if (thisGroupCollections.length === 0 && (AdditionalCards.length === 0 || performingSearch))
                         return null;
                     return (
                         <NavigationGroup

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -19,7 +19,7 @@ import { SmallNavigationCard } from "./SmallNavigationCard";
  * @param name
  * @param description
  * @param onClick
- * @constructor
+
  */
 export function NavigationCardBinding({
                                           path,

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -1,4 +1,4 @@
-import { ArrowForwardIcon, cardClickableMixin, cardMixin, cls, focusedMixin, Typography, } from "@firecms/ui";
+import { ArrowForwardIcon, cardClickableMixin, cardMixin, cls, Typography, } from "@firecms/ui";
 
 import { Link } from "react-router-dom";
 
@@ -21,7 +21,6 @@ export function SmallNavigationCard({
                 tabIndex={0}
                 className={cls(cardMixin,
                     cardClickableMixin,
-                    focusedMixin,
                     "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit visited:dark:text-inherit hover:text-inherit hover:dark:text-inherit ")}
                 to={url}
             >

package/src/components/PropertyIdCopyTooltip.tsx

@@ -0,0 +1,48 @@
+import { ContentCopyIcon, IconButton, Tooltip, Typography } from "@firecms/ui";
+import { useCallback, useState } from "react";
+
+export function PropertyIdCopyTooltip({
+                                          propertyKey,
+                                          className,
+                                          children
+                                      }: {
+    propertyKey: string,
+    className?: string,
+    children: React.ReactNode
+}) {
+    return <Tooltip title={<PropertyIdCopyTooltipContent propertyKey={propertyKey}/>}
+                    delayDuration={800}
+                    side={"top"}
+                    asChild={false}
+                    align={"start"}
+                    sideOffset={8}
+                    className={className}>
+        {children}
+    </Tooltip>
+
+}
+
+export function PropertyIdCopyTooltipContent({ propertyKey }: { propertyKey: string }) {
+
+    const [copied, setCopied] = useState(false);
+
+    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"}
+                            color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
+                <Typography variant={"caption"} className={"text-white"}><code>{propertyKey}</code></Typography>
+            </div>
+            <IconButton size={"small"}>
+                <ContentCopyIcon size={"smallest"}
+                                 className={"text-white"}
+                                 onClick={useCallback(() => {
+                                     navigator.clipboard.writeText(propertyKey);
+                                     setCopied(true);
+                                     setTimeout(() => setCopied(false), 2000);
+                                 }, [propertyKey])}
+                />
+            </IconButton>
+        </div>
+    );
+}

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -16,7 +16,7 @@ import {
 } from "../../hooks";
 import { ErrorView } from "../ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
-import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } from "../../util";
+import { canCreateEntity, IconForView, resolveCollection } from "../../util";
 import { useSelectionController } from "../EntityCollectionView/useSelectionController";
 import { useColumnIds, useTableSearchHelper } from "../common";
 import { useSideDialogContext } from "../../core";
@@ -109,6 +109,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
 
     const fullPath = navigation.resolveAliasesFrom(pathInput);
 
+    console.trace("Opening reference dialog for path " + fullPath);
     const dataSource = useDataSource(collection);
 
     const [entitiesDisplayedFirst, setEntitiesDisplayedFirst] = useState<Entity<any>[]>([]);
@@ -247,7 +248,6 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
             error={"Could not find collection with id " + collection}/>
     }
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const resolvedCollection = useMemo(() => resolveCollection({
         collection: collection,
         path: fullPath,
@@ -255,10 +255,8 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         fields: customizationController.propertyConfigs
     }), [collection, customizationController.propertyConfigs, fullPath]);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const displayedColumnIds = useColumnIds(resolvedCollection, false);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const tableController = useDataSourceEntityCollectionTableController<M>({
         fullPath,
         collection,
@@ -272,7 +270,6 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         onTextSearchClick,
         textSearchEnabled
     } =
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         useTableSearchHelper({
             collection,
             fullPath,
@@ -293,7 +290,11 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                         tableController={tableController}
                         enablePopupIcon={false}
                         tableRowActionsBuilder={tableRowActionsBuilder}
-                        title={<Typography variant={"subtitle2"}>
+                        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}`}
                         </Typography>}
                         defaultSize={collection.defaultSize}

package/src/components/SearchIconsView.tsx

@@ -31,7 +31,9 @@ export function SearchIconsView({
                 setKeys(null);
             } else {
                 const searchResult = iconsSearch.search(value);
-                setKeys(searchResult.map((e: any) => e.key));
+                const limit = 50;
+                const limited = searchResult.slice(0, limit);
+                setKeys(limited.map((e) => e.item.key));
             }
         }, UPDATE_SEARCH_INDEX_WAIT_MS), []
     );
@@ -57,7 +59,8 @@ export function SearchIconsView({
             <div className={"flex max-w-full flex-wrap mt-4"}>
                 {icons.map((icon: string) => {
                     return (
-                        <Tooltip title={icon} key={icon}>
+                        <Tooltip title={icon} key={icon}
+                                 asChild={true}>
                             <IconButton
                                 shape={"square"}
                                 toggled={selectedIcon === icon}

package/src/components/SelectableTable/SelectableTable.tsx

@@ -128,8 +128,6 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                  setFilterValues,
                  sortBy,
                  setSortBy,
-                 setSearchString,
-                 clearFilter,
                  itemCount,
                  setItemCount,
                  pageSize = 50,
@@ -223,7 +221,6 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                         onEndReached={loadNextPage}
                         onResetPagination={resetPagination}
                         error={dataLoadingError}
-                        paginationEnabled={paginationEnabled}
                         onColumnResize={onColumnResize}
                         rowHeight={getRowHeight(size)}
                         loading={dataLoading}
@@ -248,7 +245,8 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
         );
 
     },
-    equal
+    () => false,
+    // equal
 );
 
 function createFilterField({

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

@@ -95,7 +95,7 @@ export function DateTimeFilterField({
                     size={"medium"}
                     locale={locale}
                     value={internalValue ?? undefined}
-                    onChange={(dateValue: Date | undefined) => {
+                    onChange={(dateValue: Date | null) => {
                         updateFilter(operation, dateValue === null ? undefined : dateValue);
                     }}
                     clearable={true}