@firecms/core 3.0.0-canary.12 → 3.0.0-canary.120

package/src/components/EntityPreview.tsx

@@ -8,9 +8,10 @@ import {
     getEntityPreviewKeys,
     getEntityTitlePropertyKey,
     getValueInPath,
+    IconForView,
     resolveCollection
 } from "../util";
-import { cn, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { cls, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
 import { PreviewSize, PropertyPreview, SkeletonPropertyComponent } from "../preview";
 import { useCustomizationController, useNavigationController, useSideEntityController } from "../hooks";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
@@ -23,7 +24,8 @@ export type EntityPreviewProps = {
     previewProperties?: string[],
     disabled: undefined | boolean,
     entity: Entity<any>,
-    includeEntityNavigation?: boolean,
+    includeId?: boolean,
+    includeEntityLink?: boolean,
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
@@ -39,7 +41,8 @@ export function EntityPreview({
                                   previewProperties,
                                   onClick,
                                   size,
-                                  includeEntityNavigation,
+                                  includeId = true,
+                                  includeEntityLink = true,
                                   entity
                               }: EntityPreviewProps) {
 
@@ -49,7 +52,7 @@ export function EntityPreview({
 
     const navigationController = useNavigationController();
 
-    const collection = collectionProp ?? navigationController.getCollection<EntityCollection>(entity.path);
+    const collection = collectionProp ?? navigationController.getCollection(entity.path);
 
     if (!collection) {
         throw Error(`Couldn't find the corresponding collection view for the path: ${entity.path}`);
@@ -74,18 +77,18 @@ export function EntityPreview({
     return <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                                    hover={disabled ? undefined : hover}
                                    size={size}>
-        {imageProperty && (
-            <div className={cn("w-10 h-10 mr-2 shrink-0 grow-0", size === "tiny" ? "my-0.5" : "m-2 self-start")}>
-                <PropertyPreview property={imageProperty}
-                                 propertyKey={imagePropertyKey as string}
-                                 size={"tiny"}
-                                 value={getValueInPath(entity.values, imagePropertyKey as string)}/>
-            </div>
-        )}
+        <div className={cls("w-10 h-10 mr-2 shrink-0 grow-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={"mr-2"}/>}
+        </div>
+
 
         <div className={"flex flex-col flex-grow w-full m-1"}>
 
-            {size !== "tiny" && (
+            {size !== "smallest" && includeId && (
                 entity
                     ? <div className={`${
                         size !== "medium"
@@ -129,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>
                 );
@@ -140,12 +143,12 @@ export function EntityPreview({
 
         </div>
 
-        {entity && includeEntityNavigation &&
-            <Tooltip title={`See details for ${entity.id}`}
-                     className={size !== "tiny" ? "self-start" : ""}>
+        {entity && includeEntityLink &&
+            <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", {
@@ -168,24 +171,27 @@ export function EntityPreview({
     </EntityPreviewContainer>;
 }
 
-type EntityPreviewContainerProps = {
+export type EntityPreviewContainerProps = {
     children: React.ReactNode;
     hover?: boolean;
+    fullwidth?: boolean;
     size: PreviewSize;
     className?: string;
     style?: React.CSSProperties;
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
-const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
-                                                                                                       children,
-                                                                                                       hover,
-                                                                                                       onClick,
-                                                                                                       size,
-                                                                                                       style,
-                                                                                                       className,
-                                                                                                       ...props
-                                                                                                   }, ref) => {
+
+export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
+                                                                                                         children,
+                                                                                                         hover,
+                                                                                                         onClick,
+                                                                                                         size,
+                                                                                                         style,
+                                                                                                         className,
+                                                                                                         fullwidth = true,
+                                                                                                         ...props
+                                                                                                     }, ref) => {
     return <div
         ref={ref}
         style={{
@@ -193,11 +199,13 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
             // @ts-ignore
             tabindex: 0
         }}
-        className={cn(
+        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" : "p-2",
             "flex border rounded-lg",
             onClick ? "cursor-pointer" : "",
             defaultBorderMixin,
@@ -212,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/EntityView.tsx

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

package/src/components/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,16 @@ 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);
+                console.log("Search result", searchResult);
+                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 +146,7 @@ export function DefaultHomePage({
                     {additionalActions}
                 </div>
 
-                <FavouritesView hidden={Boolean(filteredUrls)}/>
+                <FavouritesView hidden={performingSearch}/>
 
                 {additionalChildrenStart}
 
@@ -163,7 +170,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
@@ -191,7 +198,7 @@ export function DefaultHomePage({
                                         />
                                     </div>
                                 ))}
-                                {AdditionalCards &&
+                                {group?.toLowerCase() !== "admin" && AdditionalCards &&
                                     AdditionalCards.map((AdditionalCard, i) => (
                                         <div key={`nav_${group}_add_${i}`}>
                                             <AdditionalCard {...actionProps} />

package/src/components/HomePage/NavigationCard.tsx

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

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

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,
@@ -291,8 +288,13 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                         displayedColumnIds={displayedColumnIds}
                         onEntityClick={onEntityClick}
                         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/ReferenceWidget.tsx

@@ -4,7 +4,7 @@ import { Entity, EntityCollection, EntityReference, FilterValues } from "../type
 import { getReferenceFrom } from "../util";
 import { PreviewSize, ReferencePreview } from "../preview";
 import { useNavigationController, useReferenceDialog } from "../hooks";
-import { Button, cn } from "@firecms/ui";
+import { Button, cls } from "@firecms/ui";
 
 export type ReferenceWidgetProps<M extends Record<string, any>> = {
     name?: string,
@@ -27,6 +27,8 @@ export type ReferenceWidgetProps<M extends Record<string, any>> = {
     forceFilter?: FilterValues<string>;
     size: PreviewSize;
     className?: string;
+    includeId?: boolean;
+    includeEntityLink?: boolean;
 };
 
 /**
@@ -43,25 +45,26 @@ export function ReferenceWidget<M extends Record<string, any>>({
                                                                    previewProperties,
                                                                    forceFilter,
                                                                    size,
-                                                                   className
+                                                                   className,
+                                                                   includeId,
+                                                                   includeEntityLink
                                                                }: ReferenceWidgetProps<M>) {
 
     const navigationController = useNavigationController();
 
     const collection: EntityCollection | undefined = useMemo(() => {
         return navigationController.getCollection(path);
-    }, [path, navigationController]);
-
-    // if (!collection) {
-    //     throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
-    // }
+    }, [path, navigationController.getCollection]);
 
     const onSingleEntitySelected = useCallback((entity: Entity<M> | null) => {
         if (disabled)
             return;
         if (onReferenceSelected) {
             const reference = entity ? getReferenceFrom(entity) : null;
-            onReferenceSelected?.({ reference, entity });
+            onReferenceSelected?.({
+                reference,
+                entity
+            });
         }
     }, [disabled, onReferenceSelected]);
 
@@ -70,7 +73,10 @@ export function ReferenceWidget<M extends Record<string, any>>({
             return;
         if (onMultipleReferenceSelected) {
             const references = entities ? entities.map(e => getReferenceFrom(e)) : null;
-            onMultipleReferenceSelected({ references, entities });
+            onMultipleReferenceSelected({
+                references,
+                entities
+            });
         }
     }, [disabled, onReferenceSelected]);
 
@@ -110,7 +116,9 @@ export function ReferenceWidget<M extends Record<string, any>>({
                     reference={ref}
                     disabled={disabled}
                     previewProperties={previewProperties}
-                    size={size}/>
+                    size={size}
+                    includeId={includeId}
+                    includeEntityLink={includeEntityLink}/>
             })}
         </div>
     } else if (value?.isEntityReference && value?.isEntityReference()) {
@@ -119,10 +127,12 @@ export function ReferenceWidget<M extends Record<string, any>>({
             onClick={onEntryClick}
             disabled={disabled}
             previewProperties={previewProperties}
-            size={size}/>
+            size={size}
+            includeId={includeId}
+            includeEntityLink={includeEntityLink}/>
 
     }
-    return <div className={cn("text-sm font-medium text-gray-500",
+    return <div className={cls("text-sm font-medium",
         "min-w-80 flex flex-col gap-4",
         "relative transition-colors duration-200 ease-in rounded font-medium",
         disabled ? "bg-opacity-50" : "hover:bg-opacity-75",

package/src/components/SearchIconsView.tsx

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