@fibery/ui-kit 1.22.0 → 1.24.0

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

@@ -1,99 +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;
 
-  const emojiData = useEmojiDataStore();
-  const categories = useEmojiDataStoreSelector((store) => store.getCategories());
+  ${textStyles.regular};
+  color: ${themeVars.accentTextColor};
+`;
+
+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> = [];
 
-  useLayoutEffect(() => {
-    if (gridElement) {
-      gridElement.scrollTop = 0;
+  for (const {emojis, id} of allCategories) {
+    const rowsForCategory = Math.ceil(emojis.length / perLine);
+
+    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/stores/emoji-data-store.tsx

@@ -1,7 +1,7 @@
 import type {EmojiData} from "@fibery/emoji-data";
 import {PubSub, makePubSub} from "@fibery/helpers/utils/pub-sub";
 import {createContext} from "@fibery/react/src/create-context";
-import {useMemo, useSyncExternalStore} from "react";
+import {useSyncExternalStore} from "react";
 
 export type EmojiDataStore = EmojiData & {pubSub: PubSub};
 
@@ -11,6 +11,10 @@ export const makeEmojiDataStore = (emojiData: EmojiData): EmojiDataStore => {
   return {
     ...emojiData,
 
+    setData(...args: Parameters<EmojiData["setData"]>) {
+      emojiData.setData(...args);
+      pubSub.publish();
+    },
     setCustom(...args: Parameters<EmojiData["setCustom"]>) {
       emojiData.setCustom(...args);
       pubSub.publish();
@@ -30,20 +34,19 @@ export const makeEmojiDataStore = (emojiData: EmojiData): EmojiDataStore => {
 
 const [DataStoreProvider, useDataStoreCtx] = createContext<EmojiDataStore>("EmojiDataStore");
 
-export const EmojiDataStoreProvider: React.FC<
-  React.PropsWithChildren<{
-    data: EmojiData;
-  }>
-> = ({data, children}) => {
-  const emojiDataStore = useMemo(() => makeEmojiDataStore(data), [data]);
-
-  return <DataStoreProvider value={emojiDataStore}>{children}</DataStoreProvider>;
-};
+export const EmojiDataStoreProvider = DataStoreProvider;
 
 export const useEmojiDataStore = useDataStoreCtx;
 
+// TODO: this https://github.com/facebook/react/blob/main/packages/use-sync-external-store/with-selector.js can be used
+// for more flexible selections (e.g. getManyEmojis(ids: string[]){})
+// but it's not documented by react yet. Even though react-redux uses it in useSelector
 export const useEmojiDataStoreSelector = <Snapshot,>(getter: (emojiDataStore: EmojiDataStore) => Snapshot) => {
   const dataStore = useDataStoreCtx();
 
   return useSyncExternalStore(dataStore.pubSub.subscribe, () => getter(dataStore));
 };
+
+const getIsInitialized = (store: EmojiDataStore) => store.getIsInitialized();
+
+export const useIsInitializedEmojiDataStore = () => useEmojiDataStoreSelector(getIsInitialized);

package/src/emoji-picker/stores/lazy-icon-data-store.tsx

@@ -1,6 +1,6 @@
 import {RawCustomEmoji, makeEmojiData} from "@fibery/emoji-data";
 import {Suspense, lazy} from "react";
-import {EmojiDataStoreProvider} from "./emoji-data-store";
+import {EmojiDataStoreProvider, makeEmojiDataStore} from "./emoji-data-store";
 import {getImageUrl} from "../../app-icon-with-fallback";
 
 const EMPTY_DATA = {
@@ -24,9 +24,11 @@ const LazyAppIcons = lazy(async () => {
 
   appIconsEmojiData.setCustom(custom);
 
+  const appIconsEmojiStore = makeEmojiDataStore(appIconsEmojiData);
+
   return {
     default: function EmojiDataStore({children}: React.PropsWithChildren) {
-      return <EmojiDataStoreProvider data={appIconsEmojiData}>{children}</EmojiDataStoreProvider>;
+      return <EmojiDataStoreProvider value={appIconsEmojiStore}>{children}</EmojiDataStoreProvider>;
     },
   };
 });

package/src/emoji-picker/stores/static-emoji-data-store.tsx

@@ -1,16 +1,21 @@
-import {FC, ReactNode, useMemo} from "react";
 import {makeEmojiData} from "@fibery/emoji-data";
-import {getEmojiSet} from "../utils/emoji-set";
-import {EmojiDataStoreProvider} from "./emoji-data-store";
 import rawData from "@fibery/emoji-data/data/all.json";
-
-// Static means "preloaded", "non-lazy" here
+import {FC, ReactNode, useMemo} from "react";
+import {getEmojiSet} from "../utils/emoji-set";
+import {EmojiDataStoreProvider, makeEmojiDataStore} from "./emoji-data-store";
 
 interface EmojiDataProviderProps {
   children?: ReactNode;
 }
 
+/**
+ * @deprecated
+ * Static means "preloaded", "non-lazy" here
+ * Should Not outside of tests
+ */
 export const StaticEmojiDataStore: FC<EmojiDataProviderProps> = ({children}) => {
   const emojiData = useMemo(() => makeEmojiData(rawData, {set: getEmojiSet()}), []);
-  return <EmojiDataStoreProvider data={emojiData}>{children}</EmojiDataStoreProvider>;
+  const emojiDataStore = useMemo(() => makeEmojiDataStore(emojiData), [emojiData]);
+
+  return <EmojiDataStoreProvider value={emojiDataStore}>{children}</EmojiDataStoreProvider>;
 };