@fibery/ui-kit 1.23.0 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -66,6 +66,7 @@
     "react-popper": "2.3.0",
     "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
+    "react-virtuoso": "4.6.0",
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",

package/src/emoji-picker/app-icon-picker.tsx

@@ -1,8 +1,9 @@
 import {CustomEmoji, EmojiItem} from "@fibery/emoji-data";
-import {useThemeMode} from "../theme-provider";
+import {useCallback} from "react";
 import {cardTypeColors, getIconColor} from "../design-system";
+import {useThemeMode} from "../theme-provider";
 import {$TSFixMe} from "../tsfixme";
-import {EmojiPickerContentWithColor} from "./emoji-picker-content-with-color";
+import {EmojiPickerContentWithColor, EmojiPickerContentWithColorProps} from "./emoji-picker-content-with-color";
 import {EmojiPickerContent} from "./primitives/content";
 import {EmojiPickerRoot} from "./primitives/root";
 import {LazyIconDataStore} from "./stores/lazy-icon-data-store";
@@ -28,6 +29,23 @@ export const AppIconPicker: React.FC<AppIconPickerProps> = ({
 }) => {
   const themeMode = useThemeMode();
 
+  const renderEmoji = useCallback<NonNullable<EmojiPickerContentWithColorProps["renderEmoji"]>>(
+    ({emoji}) => (
+      <svg
+        style={{
+          display: "block",
+          width: 20,
+          height: 20,
+          fill: color ? getIconColor(themeMode, color) : undefined,
+        }}
+        viewBox="0 0 24 24"
+      >
+        <use href={(emoji as CustomEmoji).imageUrl} />
+      </svg>
+    ),
+    [color, themeMode]
+  );
+
   return (
     <EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect}>
       <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={20}>
@@ -38,19 +56,7 @@ export const AppIconPicker: React.FC<AppIconPickerProps> = ({
             getHoverColor={getHoverColor}
             onColorSelect={onColorSelect}
             searchAutofocus={autoFocus}
-            renderEmoji={({emoji}) => (
-              <svg
-                style={{
-                  display: "block",
-                  width: 20,
-                  height: 20,
-                  fill: color ? getIconColor(themeMode, color) : undefined,
-                }}
-                viewBox="0 0 24 24"
-              >
-                <use href={(emoji as CustomEmoji).imageUrl} />
-              </svg>
-            )}
+            renderEmoji={renderEmoji}
           />
         </LazyIconDataStore>
       </EmojiPickerContent>

package/src/emoji-picker/emoji-picker-content-with-color.tsx

@@ -1,26 +1,22 @@
-import {css, cx} from "@linaria/core";
-import {useState} from "react";
+import {css} from "@linaria/core";
+import {useState, useRef} from "react";
 import {IconButton} from "../button/icon-button";
 import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../collapsible";
 import {ColorPicker} from "../color-picker";
-import {useThemeMode} from "../theme-provider";
 import {getIconColor, space} from "../design-system";
 import ColorCoding from "../icons/react/ColorCoding";
 import ColorCodingFilled from "../icons/react/ColorCodingFilled";
+import {useThemeMode} from "../theme-provider";
+import {Tooltip} from "../tooltip";
 import {$TSFixMe} from "../tsfixme";
-import {EmojiPickerGrid, EmojiPickerGridProps} from "./primitives/grid";
+import {EmojiPickerGrid, type EmojiPickerGridHandle, EmojiPickerGridProps} from "./primitives/grid";
 import {EmojiPickerHeader} from "./primitives/header";
 import {EmojiPickerSearch} from "./primitives/search";
-import {Tooltip} from "../tooltip";
 
 const colorPickerWrapperCss = css`
   padding-top: ${space.s12}px;
 `;
 
-const disableScrollCss = css`
-  overflow-y: hidden;
-`;
-
 type ColorPickerCollapsibleTrigger = {opened: boolean; color?: string};
 
 const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = ({opened, color}) => {
@@ -50,7 +46,7 @@ const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = (
 };
 
 const collapsibleWrapperCss = css`
-  max-height: 302px; // search + emoji grid
+  max-height: 308px; // search + emoji grid
   overflow: hidden;
 `;
 
@@ -74,6 +70,7 @@ export const EmojiPickerContentWithColor: React.FC<EmojiPickerContentWithColorPr
   renderEmoji,
 }) => {
   const [colorOpened, setColorOpened] = useState(false);
+  const gridRef = useRef<EmojiPickerGridHandle>(null);
 
   const showColorPicker = Boolean(onColorSelect);
 
@@ -87,6 +84,7 @@ export const EmojiPickerContentWithColor: React.FC<EmojiPickerContentWithColorPr
       <EmojiPickerHeader>
         <EmojiPickerSearch
           searchRef={searchRef}
+          gridRef={gridRef}
           autoFocus={searchAutofocus}
           extraAction={showColorPicker ? <ColorPickerCollapsibleTrigger opened={colorOpened} color={color} /> : null}
         />
@@ -104,7 +102,7 @@ export const EmojiPickerContentWithColor: React.FC<EmojiPickerContentWithColorPr
         ) : null}
       </EmojiPickerHeader>
 
-      <EmojiPickerGrid className={cx(colorOpened && disableScrollCss)} renderEmoji={renderEmoji} />
+      <EmojiPickerGrid ref={gridRef} disableScroll={colorOpened} renderEmoji={renderEmoji} />
     </CollapsibleRoot>
   );
 };

package/src/emoji-picker/emoji-picker-preview-footer.tsx

@@ -0,0 +1,94 @@
+import type {EmojiItem} from "@fibery/emoji-data";
+import {measureScrollbar} from "@fibery/helpers/utils/measure-scrollbar";
+import {css} from "@linaria/core";
+import {Button} from "../button";
+import {fontFamily, space, themeVars, typeSizes} from "../design-system";
+import {Emoji} from "./primitives/emoji";
+import {EmojiPickerFooter} from "./primitives/footer";
+import {useEmojiPreview} from "./primitives/preview-provider";
+import {useEmojiPickerCtx} from "./primitives/root";
+import {useEmojiSkin} from "./primitives/skin-provider";
+import {EmojiPickerSkinTone} from "./primitives/skin-tone";
+
+const previewCss = css`
+  display: flex;
+  align-items: center;
+  gap: ${space.s8}px;
+  overflow: hidden;
+`;
+const previewTitleWrapperCss = css`
+  max-width: 230px;
+`;
+const previewTitleCss = css`
+  font-family: ${fontFamily};
+  font-size: ${typeSizes[5]}px;
+  line-height: 1.25;
+  color: ${themeVars.textColor};
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const previewSubtitleCss = css`
+  font-family: ${fontFamily};
+  letter-spacing: 0.5px;
+  font-size: ${typeSizes[6]}px;
+  line-height: 1.25;
+  color: ${themeVars.accentTextColor};
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const EmojiPreview: React.FC<{emoji: EmojiItem}> = ({emoji}) => {
+  const emojiPickerCtx = useEmojiPickerCtx();
+  const skin = useEmojiSkin();
+
+  const title = emoji.name;
+  const subTitle = emoji.shortNames.map((short) => `:${short}:`).join(" ");
+
+  return (
+    <div className={previewCss}>
+      <Emoji emoji={emoji.id} size={24} version={emojiPickerCtx.version} skin={skin} native={emojiPickerCtx.native} />
+      <div className={previewTitleWrapperCss}>
+        <div className={previewTitleCss}>{title}</div>
+        <div className={previewSubtitleCss}>{subTitle}</div>
+      </div>
+    </div>
+  );
+};
+
+export const EmojiPickerPreviewFooter: React.FC<{
+  onAddCustomEmoji?: () => void;
+  showSkinTones?: boolean;
+}> = ({onAddCustomEmoji, showSkinTones}) => {
+  const emojiPreview = useEmojiPreview();
+
+  return (
+    <EmojiPickerFooter>
+      {emojiPreview ? (
+        <EmojiPreview emoji={emojiPreview.emoji} />
+      ) : onAddCustomEmoji ? (
+        <Button size=":button-size/small" onClick={onAddCustomEmoji}>
+          Add Emoji
+        </Button>
+      ) : null}
+
+      {showSkinTones ? (
+        <div
+          className={css`
+            position: absolute;
+            top: 4px;
+            right: ${space.s12}px;
+          `}
+          style={{
+            right: space.s12 + measureScrollbar(),
+          }}
+        >
+          <EmojiPickerSkinTone />
+        </div>
+      ) : null}
+    </EmojiPickerFooter>
+  );
+};

package/src/emoji-picker/emoji-picker.tsx

@@ -1,14 +1,10 @@
 import {EmojiItem} from "@fibery/emoji-data";
-import {css} from "@linaria/core";
-import {Button} from "../button";
-import {cardTypeColors, space} from "../design-system";
+import {cardTypeColors} from "../design-system";
 import {$TSFixMe} from "../tsfixme";
 import {EmojiPickerContentWithColor} from "./emoji-picker-content-with-color";
+import {EmojiPickerPreviewFooter} from "./emoji-picker-preview-footer";
 import {EmojiPickerContent} from "./primitives/content";
-import {EmojiPickerFooter} from "./primitives/footer";
 import {EmojiPickerRoot} from "./primitives/root";
-import {EmojiPickerSkinTone} from "./primitives/skin-tone";
-import {measureScrollbar} from "@fibery/helpers/utils/measure-scrollbar";
 
 const i18n = {search: "Search emoji..."};
 
@@ -49,28 +45,7 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({
         />
 
         {showFooter ? (
-          <EmojiPickerFooter>
-            {onAddCustomEmoji ? (
-              <Button size=":button-size/small" onClick={onAddCustomEmoji}>
-                Add Emoji
-              </Button>
-            ) : null}
-
-            {showSkinTones ? (
-              <div
-                className={css`
-                  position: absolute;
-                  top: 4px;
-                  right: ${space.s12}px;
-                `}
-                style={{
-                  right: space.s12 + measureScrollbar(),
-                }}
-              >
-                <EmojiPickerSkinTone />
-              </div>
-            ) : null}
-          </EmojiPickerFooter>
+          <EmojiPickerPreviewFooter onAddCustomEmoji={onAddCustomEmoji} showSkinTones={showSkinTones} />
         ) : null}
       </EmojiPickerContent>
     </EmojiPickerRoot>

package/src/emoji-picker/primitives/category-label.tsx

@@ -0,0 +1,42 @@
+import type {Category} from "@fibery/emoji-data";
+
+import {css} from "@linaria/core";
+import {space, textStyles, themeVars} from "../../design-system";
+import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
+import {IconButton} from "../../button/icon-button";
+import Settings from "../../icons/react/Settings";
+
+const categoryLabelCss = css`
+  ${textStyles.heading6}
+  /* in designs it's 31px but we make it equal to emoji size just to make virtualization easier */
+  height: var(--fibery-emoji-container-size, 32px);
+  color: ${themeVars.accentTextColor};
+  background-color: ${themeVars.actionMenuBg};
+  padding: ${space.s12}px ${space.s6}px ${space.s4}px ${space.s6}px;
+
+  display: flex;
+  align-items: center;
+  gap: ${space.s4}px;
+`;
+
+type EmojiPickerCategoryLabelProps = {
+  category: Category;
+};
+export const EmojiPickerCategoryLabel: React.FC<EmojiPickerCategoryLabelProps> = ({category}) => {
+  const i18n = useEmojiPickerI18N();
+  const emojiPickerCtx = useEmojiPickerCtx();
+
+  const label = i18n.categories[category.id as keyof (typeof i18n)["categories"]] || category.name;
+
+  return (
+    <div className={categoryLabelCss}>
+      <span>{label}</span>
+
+      {category.id === "custom" && emojiPickerCtx.onCustomCategorySettings && (
+        <IconButton onClick={emojiPickerCtx.onCustomCategorySettings}>
+          <Settings iconSize={16} />
+        </IconButton>
+      )}
+    </div>
+  );
+};

package/src/emoji-picker/primitives/content.tsx

@@ -12,6 +12,7 @@ const emojiPickerCss = css`
 type EmojiPickerContentSettings = {
   perLine: number;
   emojiSize: number;
+  emojiContainerSize: number;
 };
 
 const [Provider, useCtx] = createContext<EmojiPickerContentSettings>("EmojiPickerContentSettings");
@@ -28,18 +29,29 @@ export const EmojiPickerContent: React.FC<React.PropsWithChildren<EmojiPickerCon
   children,
 }) => {
   const width = perLine * (emojiSize + emojiPadding * 2) + contentHorizontalPadding * 2 + measureScrollbar();
+  const emojiContainerSize = emojiSize + emojiPadding * 2;
 
-  const contentSettings = useMemo(
+  const contentSettings = useMemo<EmojiPickerContentSettings>(
     () => ({
+      emojiContainerSize,
       emojiSize,
       perLine,
     }),
-    [emojiSize, perLine]
+    [emojiContainerSize, emojiSize, perLine]
   );
 
   return (
     <Provider value={contentSettings}>
-      <div style={{"--fibery-emoji-hover-color": emojiHoverColor, width} as CSSProperties} className={emojiPickerCss}>
+      <div
+        style={
+          {
+            "--fibery-emoji-container-size": `${emojiContainerSize}px`,
+            "--fibery-emoji-hover-color": emojiHoverColor,
+            width,
+          } as CSSProperties
+        }
+        className={emojiPickerCss}
+      >
         {children}
       </div>
     </Provider>

package/src/emoji-picker/primitives/footer.tsx

@@ -4,11 +4,13 @@ import {space} from "../../design-system";
 const footerCss = css`
   position: relative;
   border-top: 1px solid var(--fibery-color-separatorColor);
-  padding: ${space.s8}px ${space.s12}px;
+  padding: ${space.s6}px ${space.s12}px;
   min-height: 40px;
+
+  display: flex;
+  align-items: center;
 `;
 
 export const EmojiPickerFooter: React.FC<React.PropsWithChildren> = ({children}) => {
-  // TODO: Preview + ColorPicker + Skin Tone
   return <div className={footerCss}>{children}</div>;
 };

package/src/emoji-picker/primitives/grid-item.tsx

@@ -0,0 +1,73 @@
+import type {EmojiItem} from "@fibery/emoji-data";
+import {css} from "@linaria/core";
+import {memo} from "react";
+import {IconButton} from "../../button/icon-button";
+import {themeVars} from "../../design-system";
+import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
+import {useEmojiPickerContentSettings} from "./content";
+import {Emoji} from "./emoji";
+import {useSetEmojiPreview} from "./preview-provider";
+import {useEmojiPickerCtx} from "./root";
+import {useEmojiSkin} from "./skin-provider";
+
+export type EmojiPickerGridItemProps = {
+  id: string;
+  categoryId: string;
+  highlighted?: boolean;
+  /** Custom renderer for emoji items */
+  renderEmoji?: (args: {emoji: EmojiItem}) => React.ReactNode;
+};
+
+export const EmojiPickerGridItem = memo<EmojiPickerGridItemProps>(({id, categoryId, renderEmoji, highlighted}) => {
+  const setEmojiPreview = useSetEmojiPreview();
+  const skin = useEmojiSkin();
+  const emojiPickerCtx = useEmojiPickerCtx();
+  const emojiContentSettings = useEmojiPickerContentSettings();
+
+  const emoji = useEmojiDataStoreSelector((store) => store.get(id, {skin}));
+
+  if (!emoji) {
+    return null;
+  }
+
+  // TODO: title should be shown in preview in footer
+  const title = emoji.shortNames ? emoji.shortNames[0] : undefined;
+
+  return (
+    <IconButton
+      style={{
+        width: emojiContentSettings.emojiContainerSize,
+        height: emojiContentSettings.emojiContainerSize,
+      }}
+      size="big"
+      onClick={() => emojiPickerCtx.onEmojiSelect(emoji)}
+      onMouseEnter={() => setEmojiPreview({emoji, categoryId})}
+      onMouseLeave={() => setEmojiPreview(null)}
+      data-highlighted={highlighted}
+      className={css`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &:hover:not(:disabled),
+        &:focus-visible,
+        &[data-highlighted="true"] {
+          background-color: var(--fibery-emoji-hover-color, ${themeVars.badgeBgColor});
+        }
+      `}
+      title={title}
+      aria-label={emoji.name}
+    >
+      {renderEmoji ? (
+        renderEmoji({emoji})
+      ) : (
+        <Emoji
+          emoji={id}
+          size={emojiContentSettings.emojiSize}
+          version={emojiPickerCtx.version}
+          skin={skin}
+          native={emojiPickerCtx.native}
+        />
+      )}
+    </IconButton>
+  );
+});

package/src/emoji-picker/primitives/grid.tsx

@@ -1,101 +1,355 @@
 import {css, cx} from "@linaria/core";
-import {useLayoutEffect, useMemo, useState} from "react";
-import {useEmojiDataStore, useEmojiDataStoreSelector} from "../stores/emoji-data-store";
+import {useMemo, useRef, forwardRef, useImperativeHandle} from "react";
+import {GroupedVirtuoso, GroupedVirtuosoHandle, CalculateViewLocation} from "react-virtuoso";
+import {textStyles, themeVars} from "../../design-system";
+import {EmojiDataStore, useEmojiDataStore, useEmojiDataStoreSelector} from "../stores/emoji-data-store";
 import {get as getFrequentlyUsed} from "../utils/frequently";
-import {EmojiPickerCategory, EmojiPickerCategoryProps} from "./category";
+import {EmojiPickerGridItem, EmojiPickerGridItemProps} from "./grid-item";
+import {EmojiPickerCategoryLabel} from "./category-label";
 import {useEmojiPickerContentSettings} from "./content";
+import {Emoji} from "./emoji";
 import {contentHorizontalPadding} from "./layout";
+import {useEmojiPickerI18N} from "./root";
 import {useFoundEmojis} from "./search-provider";
+import {useEmojiPreview, useSetEmojiPreview} from "./preview-provider";
+import type {Category, EmojiItem} from "@fibery/emoji-data";
 
 const gridWrapperCss = css`
-  height: 258px;
-  overflow-y: scroll;
   overflow-x: hidden;
 
   padding: 0 ${contentHorizontalPadding}px;
 `;
 
-type AllCategoriesProps = Pick<EmojiPickerCategoryProps, "renderEmoji" | "scrollParent">;
-const AllCategories: React.FC<AllCategoriesProps> = ({renderEmoji, scrollParent}) => {
-  const contentSettings = useEmojiPickerContentSettings();
+const disableScrollCss = css`
+  overflow-y: hidden !important;
+`;
+
+const makeSearchCategory = ({emojis}: {emojis: string[]}) => ({
+  id: "search",
+  name: "Search",
+  emojis,
+});
+
+const makeRecentCategory = ({emojis}: {emojis: string[]}) => ({
+  id: "recent",
+  name: "Recent",
+  emojis,
+});
+
+const notFoundCss = css`
+  padding-top: 102px;
+  text-align: center;
 
-  // TODO: accessing emojiData inside useMemo is not reactive so it won't be re-rendered when emojis are modified
-  const emojiData = useEmojiDataStore();
+  ${textStyles.regular};
+  color: ${themeVars.accentTextColor};
+`;
 
-  const categories = useEmojiDataStoreSelector((store) => store.getCategories());
+const NotFound = () => {
+  const i18n = useEmojiPickerI18N();
 
-  const recentCategory = useMemo(
-    () => ({
-      id: "recent",
-      name: "Recent",
-      emojis: getFrequentlyUsed(contentSettings.perLine).filter((id) => {
+  return (
+    <div className={notFoundCss}>
+      <Emoji emoji="sleuth_or_spy" size={38} />
+      <div>{i18n.notfound}</div>
+    </div>
+  );
+};
+
+type ListItem = {
+  categoryId: string;
+  emojis: string[];
+};
+
+const makeData = ({
+  emojiData,
+  foundEmojis,
+  categories,
+  perLine,
+}: {
+  emojiData: EmojiDataStore;
+  foundEmojis: EmojiItem[] | null;
+  categories: readonly Category[];
+  perLine: number;
+}) => {
+  let allCategories = [];
+
+  if (foundEmojis) {
+    allCategories = [makeSearchCategory({emojis: foundEmojis.map(({id}) => id)})];
+  } else {
+    const recentCategory = makeRecentCategory({
+      emojis: getFrequentlyUsed(perLine).filter((id) => {
         const emoji = emojiData.get(id);
         const hidden = emoji && "hidden" in emoji ? emoji.hidden : false;
         return emoji && !hidden;
       }),
-    }),
-    [contentSettings, emojiData]
-  );
+    });
 
-  return (
-    <>
-      {recentCategory.emojis.length > 0 ? (
-        <EmojiPickerCategory
-          preRender
-          category={recentCategory}
-          scrollParent={scrollParent}
-          renderEmoji={renderEmoji}
-        />
-      ) : null}
-      {categories
-        .filter((category) => category.emojis.length !== 0)
-        .map((category, idx) => {
-          return (
-            <EmojiPickerCategory
-              preRender={idx < 2}
-              key={category.id}
-              category={category}
-              scrollParent={scrollParent}
-              renderEmoji={renderEmoji}
-            />
-          );
-        })}
-    </>
-  );
-};
-export type EmojiPickerGridProps = {
-  className?: string;
-} & Pick<EmojiPickerCategoryProps, "renderEmoji">;
-
-export const EmojiPickerGrid: React.FC<EmojiPickerGridProps> = ({className, renderEmoji}) => {
-  const foundEmojis = useFoundEmojis();
-  const [gridElement, setGridElement] = useState<HTMLDivElement | null>(null);
-
-  const searchCategory = useMemo(
-    () =>
-      foundEmojis
-        ? {
-            id: "search",
-            name: "Search",
-            emojis: foundEmojis.map(({id}) => id),
-          }
-        : null,
-    [foundEmojis]
-  );
+    allCategories = [recentCategory, ...categories].filter((c) => c.emojis.length > 0);
+  }
+
+  const counts = [];
+
+  const dataByRows: Array<ListItem> = [];
+
+  for (const {emojis, id} of allCategories) {
+    const rowsForCategory = Math.ceil(emojis.length / perLine);
 
-  useLayoutEffect(() => {
-    if (gridElement) {
-      gridElement.scrollTop = 0;
+    let tmp: string[] = [];
+    emojis.forEach((em) => {
+      tmp.push(em);
+
+      if (tmp.length === perLine) {
+        dataByRows.push({categoryId: id, emojis: tmp});
+        tmp = [];
+      }
+    });
+    if (tmp.length > 0) {
+      dataByRows.push({categoryId: id, emojis: tmp});
     }
-  }, [foundEmojis, gridElement]);
 
-  return (
-    <div ref={setGridElement} className={cx(gridWrapperCss, className)}>
-      {searchCategory ? (
-        <EmojiPickerCategory preRender scrollParent={gridElement} category={searchCategory} renderEmoji={renderEmoji} />
-      ) : (
-        <AllCategories scrollParent={gridElement} renderEmoji={renderEmoji} />
-      )}
-    </div>
-  );
+    counts.push(rowsForCategory);
+  }
+
+  return {allCategories, counts, dataByRows};
+};
+
+// workaround for https://github.com/petyosi/react-virtuoso/issues/1019
+const calculateViewLocation: CalculateViewLocation = ({
+  itemTop,
+  itemBottom,
+  viewportTop,
+  viewportBottom,
+  locationParams: {behavior, ...rest},
+}) => {
+  if (itemTop - 32 < viewportTop) {
+    return {...rest, behavior, align: "start"};
+  }
+  if (itemBottom > viewportBottom) {
+    return {...rest, behavior, align: "end"};
+  }
+  return null;
 };
+
+export type EmojiPickerGridHandle = {
+  navigate: (direction: "up" | "down" | "left" | "right") => boolean;
+  scrollToTop: () => void;
+};
+
+export type EmojiPickerGridProps = {
+  disableScroll?: boolean;
+} & Pick<EmojiPickerGridItemProps, "renderEmoji">;
+
+export const EmojiPickerGrid = forwardRef<EmojiPickerGridHandle, EmojiPickerGridProps>(
+  ({disableScroll, renderEmoji}, ref) => {
+    const setEmojiPreview = useSetEmojiPreview();
+    const foundEmojis = useFoundEmojis();
+    const virtuosoRef = useRef<GroupedVirtuosoHandle>(null);
+    // const [gridElement, setGridElement] = useState<HTMLDivElement | null>(null);
+
+    const contentSettings = useEmojiPickerContentSettings();
+
+    // TODO: accessing emojiData inside useMemo is not reactive so it won't be re-rendered if emojis are modified
+    const emojiData = useEmojiDataStore();
+
+    const categories = useEmojiDataStoreSelector((store) => store.getCategories());
+
+    const {counts, allCategories, dataByRows} = useMemo(
+      () => makeData({categories, emojiData, foundEmojis, perLine: contentSettings.perLine}),
+      [categories, contentSettings.perLine, emojiData, foundEmojis]
+    );
+
+    const emojiPreview = useEmojiPreview();
+
+    useImperativeHandle(
+      ref,
+      () => {
+        return {
+          scrollToTop: () => {
+            virtuosoRef.current?.scrollToIndex(0);
+          },
+          navigate(direction) {
+            const virtuoso = virtuosoRef.current;
+            if (!virtuoso) {
+              return false;
+            }
+
+            // TODO: not optimal. Probably better to lift up in context and store focused index separately instead of calculating it every time
+            let colIdx = -1;
+            let rowIdx = emojiPreview
+              ? dataByRows.findIndex(
+                  ({categoryId, emojis}) =>
+                    categoryId === emojiPreview.categoryId &&
+                    (colIdx = emojis.findIndex((id) => id === emojiPreview.emoji.id)) > -1
+                )
+              : -1;
+
+            switch (direction) {
+              case "down": {
+                rowIdx++;
+                const nextRow = dataByRows[rowIdx];
+                if (nextRow) {
+                  colIdx = Math.min(Math.max(colIdx, 0), nextRow.emojis.length - 1);
+
+                  virtuoso.scrollIntoView({
+                    index: rowIdx,
+                    done: () =>
+                      setEmojiPreview({
+                        categoryId: nextRow.categoryId,
+                        emoji: emojiData.get(nextRow.emojis[colIdx]) as EmojiItem,
+                      }),
+                  });
+                  return true;
+                }
+
+                break;
+              }
+              case "up": {
+                rowIdx--;
+                const nextRow = dataByRows[rowIdx];
+                if (nextRow) {
+                  colIdx = Math.min(Math.max(colIdx, 0), nextRow.emojis.length - 1);
+
+                  virtuoso.scrollIntoView({
+                    index: rowIdx,
+                    calculateViewLocation: calculateViewLocation,
+                    done: () =>
+                      setEmojiPreview({
+                        categoryId: nextRow.categoryId,
+                        emoji: emojiData.get(nextRow.emojis[colIdx]) as EmojiItem,
+                      }),
+                  });
+
+                  return true;
+                }
+
+                break;
+              }
+              case "right": {
+                let nextRow = dataByRows[rowIdx];
+                colIdx++;
+
+                if (!nextRow?.emojis[colIdx]) {
+                  rowIdx++;
+                  nextRow = dataByRows[rowIdx];
+
+                  if (nextRow) {
+                    colIdx = 0;
+                    virtuoso.scrollIntoView({
+                      index: rowIdx,
+                      done: () =>
+                        setEmojiPreview({
+                          categoryId: nextRow.categoryId,
+                          emoji: emojiData.get(nextRow.emojis[colIdx]) as EmojiItem,
+                        }),
+                    });
+                    return true;
+                  } else {
+                    return false;
+                  }
+                }
+
+                setEmojiPreview({
+                  categoryId: nextRow.categoryId,
+                  emoji: emojiData.get(nextRow.emojis[colIdx]) as EmojiItem,
+                });
+                return true;
+              }
+              case "left": {
+                const row = dataByRows[rowIdx];
+                colIdx--;
+
+                if (!row?.emojis[colIdx]) {
+                  rowIdx--;
+                  const nextRow = dataByRows[rowIdx];
+
+                  if (nextRow) {
+                    colIdx = nextRow.emojis.length - 1;
+                    virtuoso.scrollIntoView({
+                      index: rowIdx,
+                      calculateViewLocation,
+                      done: () =>
+                        setEmojiPreview({
+                          categoryId: nextRow.categoryId,
+                          emoji: emojiData.get(nextRow.emojis[colIdx]) as EmojiItem,
+                        }),
+                    });
+                    return true;
+                  } else {
+                    return false;
+                  }
+                }
+
+                setEmojiPreview({
+                  categoryId: row.categoryId,
+                  emoji: emojiData.get(row.emojis[colIdx]) as EmojiItem,
+                });
+                return true;
+              }
+              default:
+                break;
+            }
+
+            return false;
+          },
+        };
+      },
+      [dataByRows, emojiData, emojiPreview, setEmojiPreview]
+    );
+
+    return (
+      <div
+        className={css`
+          height: 258px;
+          position: relative;
+        `}
+      >
+        <GroupedVirtuoso
+          ref={virtuosoRef}
+          className={cx(gridWrapperCss, disableScroll && disableScrollCss)}
+          defaultItemHeight={contentSettings.emojiContainerSize}
+          fixedItemHeight={contentSettings.emojiContainerSize}
+          increaseViewportBy={130}
+          groupCounts={counts}
+          groupContent={(i) => <EmojiPickerCategoryLabel category={allCategories[i]} />}
+          itemContent={(rowIdx) => {
+            const row = dataByRows[rowIdx];
+
+            return (
+              <div
+                className={css`
+                  display: flex;
+                `}
+              >
+                {row.emojis.map((id) => {
+                  return (
+                    <EmojiPickerGridItem
+                      key={`${row.categoryId}-${id}`}
+                      id={id}
+                      categoryId={row.categoryId}
+                      renderEmoji={renderEmoji}
+                      highlighted={Boolean(
+                        emojiPreview && emojiPreview.emoji.id === id && emojiPreview.categoryId === row.categoryId
+                      )}
+                    />
+                  );
+                })}
+              </div>
+            );
+          }}
+        />
+
+        {/* don't want to remount GroupedVirtuoso that's why I positioned NotFound as absolute */}
+        {foundEmojis && foundEmojis.length === 0 ? (
+          <div
+            className={css`
+              position: absolute;
+              inset: 0;
+            `}
+          >
+            <NotFound />
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+);

package/src/emoji-picker/primitives/preview-provider.tsx

@@ -0,0 +1,27 @@
+import {useCallback, useState} from "react";
+import {createContext} from "@fibery/react/src/create-context";
+import type {EmojiItem} from "@fibery/emoji-data";
+
+type EmojiPreview = {emoji: EmojiItem; categoryId: string} | null;
+
+type Setter = (v: EmojiPreview) => void;
+
+const [SetterProvider, useSetterCtx] = createContext<Setter>("EmojiPreviewSetterProvider");
+const [ValueProvider, useValueCtx] = createContext<EmojiPreview>("EmojiPreviewProvider");
+
+export const EmojiPreviewProvider: React.FC<React.PropsWithChildren> = ({children}) => {
+  const [preview, setPreview] = useState<EmojiPreview>(null);
+
+  const setter = useCallback<Setter>((v) => {
+    setPreview(v);
+  }, []);
+
+  return (
+    <SetterProvider value={setter}>
+      <ValueProvider value={preview}>{children}</ValueProvider>
+    </SetterProvider>
+  );
+};
+
+export const useSetEmojiPreview = useSetterCtx;
+export const useEmojiPreview = useValueCtx;

package/src/emoji-picker/primitives/root.tsx

@@ -7,6 +7,7 @@ import {EmojiSkinProvider} from "./skin-provider";
 import {add as addToFrequentlyUsed} from "../utils/frequently";
 import {isApple} from "../utils/emoji-set";
 import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
+import {EmojiPreviewProvider} from "./preview-provider";
 
 type EmojiPickerCtx = {
   version: number;
@@ -76,11 +77,13 @@ export const EmojiPickerRoot: React.FC<
 
   return (
     <Provider value={emojiPickerCtx}>
-      <EmojiSkinProvider>
-        <EmojiPickerSearchProvider>
-          <I18NProvider value={mergedI18N}>{children}</I18NProvider>
-        </EmojiPickerSearchProvider>
-      </EmojiSkinProvider>
+      <EmojiPreviewProvider>
+        <EmojiSkinProvider>
+          <EmojiPickerSearchProvider>
+            <I18NProvider value={mergedI18N}>{children}</I18NProvider>
+          </EmojiPickerSearchProvider>
+        </EmojiSkinProvider>
+      </EmojiPreviewProvider>
     </Provider>
   );
 };

package/src/emoji-picker/primitives/search.tsx

@@ -10,6 +10,8 @@ import {useEmojiDataStore} from "../stores/emoji-data-store";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useFoundEmojis, useSetFoundEmojis} from "./search-provider";
 import {useEmojiSkin} from "./skin-provider";
+import {useEmojiPreview, useSetEmojiPreview} from "./preview-provider";
+import type {EmojiPickerGridHandle} from "./grid";
 
 const searchCss = css`
   ${textStyles.regular}
@@ -72,10 +74,19 @@ export type EmojiPickerSearchProps = {
 
   searchRef?: React.RefObject<HTMLInputElement>;
 
+  // TODO: it's better to pass it via context
+  gridRef?: React.RefObject<EmojiPickerGridHandle>;
+
   extraAction?: React.ReactNode;
 };
 
-export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus, className, searchRef, extraAction}) => {
+export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({
+  autoFocus,
+  className,
+  searchRef,
+  gridRef,
+  extraAction,
+}) => {
   const ref = useRef<HTMLInputElement>(null);
 
   const setRefs = useComposedRefs(ref, searchRef);
@@ -86,11 +97,16 @@ export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus,
   const foundEmojis = useFoundEmojis();
   const skin = useEmojiSkin();
   const _setFoundEmojis = useSetFoundEmojis();
+  const setEmojiPreview = useSetEmojiPreview();
+  const emojiPreview = useEmojiPreview();
 
   const setFoundEmojis = (emojis: EmojiItem[] | null) => {
+    gridRef?.current?.scrollToTop();
     // improves responsiveness of input.
-    // TODO: better just implement a proper virtualization
-    startTransition(() => _setFoundEmojis(emojis));
+    startTransition(() => {
+      _setFoundEmojis(emojis);
+      setEmojiPreview(emojis?.[0] ? {emoji: emojis[0], categoryId: "search"} : null);
+    });
   };
 
   const inputId = `emoji-picker-search-${useId()}`;
@@ -104,10 +120,38 @@ export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus,
   };
 
   const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
-    if (e.key === "Enter" && foundEmojis && foundEmojis.length > 0) {
-      emojiPicker.onEmojiSelect(foundEmojis[0]);
-
+    if (e.key === "Enter" && emojiPreview) {
       e.preventDefault();
+      emojiPicker.onEmojiSelect(emojiPreview.emoji);
+    }
+
+    const cursorAtEnd = ref.current && ref.current.selectionStart === ref.current.value.length;
+
+    if (gridRef?.current && cursorAtEnd) {
+      let handled = false;
+      if (e.key === "ArrowDown") {
+        handled = gridRef.current.navigate("down");
+      }
+      if (e.key === "ArrowUp" && emojiPreview) {
+        handled = gridRef.current.navigate("up");
+        if (!handled) {
+          setEmojiPreview(null);
+          e.preventDefault();
+        }
+      }
+      if (e.key === "ArrowLeft" && emojiPreview) {
+        handled = gridRef.current.navigate("left");
+        if (!handled) {
+          setEmojiPreview(null);
+          e.preventDefault();
+        }
+      }
+      if (e.key === "ArrowRight") {
+        handled = gridRef.current.navigate("right");
+      }
+      if (handled) {
+        e.preventDefault();
+      }
     }
   };
 

package/src/emoji-picker/primitives/category.tsx

@@ -1,177 +0,0 @@
-import {Category, EmojiItem} from "@fibery/emoji-data";
-import {css} from "@linaria/core";
-import {memo} from "react";
-import {useInView} from "react-intersection-observer";
-import {IconButton} from "../../button/icon-button";
-import {space, textStyles, themeVars} from "../../design-system";
-import Settings from "../../icons/react/Settings";
-import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
-import {useEmojiPickerContentSettings} from "./content";
-import {Emoji} from "./emoji";
-import {emojiPadding} from "./layout";
-import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
-import {useEmojiSkin} from "./skin-provider";
-
-const categoryCss = css``;
-
-const categoryLabelCss = css`
-  ${textStyles.heading6}
-  color: ${themeVars.accentTextColor};
-  background-color: ${themeVars.actionMenuBg};
-  padding: ${space.s12}px ${space.s6}px ${space.s4}px ${space.s6}px;
-  position: sticky;
-  top: 0;
-
-  display: flex;
-  align-items: center;
-  gap: ${space.s4}px;
-
-  z-index: 1;
-`;
-
-const categoryListCss = css`
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0;
-  padding: 0;
-
-  & li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    line-height: 1;
-  }
-`;
-
-const notFoundCss = css`
-  padding-top: 70px;
-  text-align: center;
-
-  ${textStyles.regular};
-  color: ${themeVars.accentTextColor};
-`;
-
-const NotFound = () => {
-  const i18n = useEmojiPickerI18N();
-
-  return (
-    <div className={notFoundCss}>
-      <Emoji emoji="sleuth_or_spy" size={38} />
-      <div>{i18n.notfound}</div>
-    </div>
-  );
-};
-
-type CategoryItemProps = {
-  id: string;
-  /** Custom renderer for emoji items */
-  renderEmoji?: (args: {emoji: EmojiItem}) => React.ReactNode;
-};
-
-const CategoryItem: React.FC<CategoryItemProps> = ({id, renderEmoji}) => {
-  const skin = useEmojiSkin();
-  const emojiPickerCtx = useEmojiPickerCtx();
-  const emojiContentSettings = useEmojiPickerContentSettings();
-
-  const emoji = useEmojiDataStoreSelector((store) => store.get(id, {skin}));
-
-  if (!emoji) {
-    return null;
-  }
-
-  // TODO: title should be shown in preview in footer
-  const title = emoji.shortNames ? emoji.shortNames[0] : undefined;
-
-  return (
-    <IconButton
-      size="big"
-      onClick={() => emojiPickerCtx.onEmojiSelect(emoji)}
-      className={css`
-        &:hover:not(:disabled),
-        &:focus-visible {
-          background-color: var(--fibery-emoji-hover-color, ${themeVars.badgeBgColor});
-        }
-      `}
-      title={title}
-      aria-label={emoji.name}
-    >
-      {renderEmoji ? (
-        renderEmoji({emoji})
-      ) : (
-        <Emoji
-          emoji={id}
-          size={emojiContentSettings.emojiSize}
-          version={emojiPickerCtx.version}
-          skin={skin}
-          native={emojiPickerCtx.native}
-        />
-      )}
-    </IconButton>
-  );
-};
-
-export type EmojiPickerCategoryProps = {
-  category: Category;
-
-  preRender?: boolean;
-  scrollParent: Element | null;
-} & Pick<CategoryItemProps, "renderEmoji">;
-
-export const EmojiPickerCategory = memo<EmojiPickerCategoryProps>(function EmojiPickerCategoryComponent({
-  category,
-  renderEmoji,
-  scrollParent,
-  preRender = false,
-}) {
-  const i18n = useEmojiPickerI18N();
-  const emojiPickerCtx = useEmojiPickerCtx();
-  const emojiContentSettings = useEmojiPickerContentSettings();
-
-  const {ref, inView} = useInView({
-    root: scrollParent,
-    rootMargin: `129px 0px`, // grid height / 2
-    initialInView: preRender,
-    fallbackInView: true,
-    triggerOnce: true,
-  });
-
-  const label = i18n.categories[category.id as keyof (typeof i18n)["categories"]] || category.name;
-
-  const emojiSize = emojiContentSettings.emojiSize + emojiPadding * 2;
-
-  return (
-    <section className={categoryCss} aria-label={label}>
-      <div className={categoryLabelCss}>
-        {/* already labeled by the section aria-label */}
-        <span aria-hidden={true}>{label}</span>
-
-        {category.id === "custom" && emojiPickerCtx.onCustomCategorySettings && (
-          <IconButton onClick={emojiPickerCtx.onCustomCategorySettings}>
-            <Settings iconSize={16} />
-          </IconButton>
-        )}
-      </div>
-
-      {category.emojis.length > 0 ? (
-        <ul ref={ref} className={categoryListCss}>
-          {category.emojis.map((id) => {
-            return (
-              <li
-                key={id}
-                style={{
-                  width: emojiSize,
-                  height: emojiSize,
-                }}
-              >
-                {inView ? <CategoryItem id={id} renderEmoji={renderEmoji} /> : null}
-              </li>
-            );
-          })}
-        </ul>
-      ) : (
-        <NotFound />
-      )}
-    </section>
-  );
-});