@fibery/ui-kit 1.14.0 → 1.16.0

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

@@ -1,6 +1,11 @@
-import {Category} from "@fibery/emoji-data";
-import {CSSProperties, css} from "@linaria/core";
+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 "../../designSystem";
+import {Settings} from "../../icons/react";
+import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
 import {useEmojiPickerContentSettings} from "./content";
 import {Emoji} from "./emoji";
 import {emojiPadding} from "./layout";
@@ -17,7 +22,10 @@ const categoryLabelCss = css`
   position: sticky;
   top: 0;
 
-  /* is required only because contentVisibility lifts emoji up */
+  display: flex;
+  align-items: center;
+  gap: ${space.xs}px;
+
   z-index: 1;
 `;
 
@@ -55,46 +63,108 @@ const NotFound = () => {
   );
 };
 
-type EmojiPickerCategoryProps = {
-  category: Category;
+type CategoryItemProps = {
+  id: string;
+  /** Custom renderer for emoji items */
+  renderEmoji?: (args: {emoji: EmojiItem}) => React.ReactNode;
 };
-export const EmojiPickerCategory: React.FC<EmojiPickerCategoryProps> = ({category}) => {
+
+const CategoryItem: React.FC<CategoryItemProps> = ({id, renderEmoji}) => {
+  const skin = useEmojiSkin();
+  const emojiPickerCtx = useEmojiPickerCtx();
+  const emojiContentSettings = useEmojiPickerContentSettings();
+
+  const emoji = useEmojiDataStoreSelector((store) => store.get(id));
+
+  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 skin = useEmojiSkin();
+  const emojiSize = emojiContentSettings.emojiSize + emojiPadding * 2;
 
   return (
     <section className={categoryCss} aria-label={label}>
       <div className={categoryLabelCss}>
-        <span aria-hidden={true /* already labeled by the section aria-label */}>{label}</span>
+        {/* 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 className={categoryListCss}>
+        <ul ref={ref} className={categoryListCss}>
           {category.emojis.map((id) => {
             return (
               <li
-                style={
-                  // css-only virtualization until implementing the real one
-                  {
-                    contentVisibility: "auto",
-                    containIntrinsicSize: `${emojiContentSettings.emojiSize + emojiPadding * 2}px`,
-                  } as CSSProperties
-                }
                 key={id}
+                style={{
+                  width: emojiSize,
+                  height: emojiSize,
+                }}
               >
-                <Emoji
-                  onClick={emojiPickerCtx.onEmojiSelect}
-                  emoji={id}
-                  forceSize
-                  version={emojiPickerCtx.version}
-                  skin={skin}
-                  tooltip
-                />
+                {inView ? <CategoryItem id={id} renderEmoji={renderEmoji} /> : null}
               </li>
             );
           })}
@@ -104,4 +174,4 @@ export const EmojiPickerCategory: React.FC<EmojiPickerCategoryProps> = ({categor
       )}
     </section>
   );
-};
+});

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

@@ -1,57 +1,48 @@
 import {EmojiItem, EmojiSkin} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
-import {border, themeVars} from "../../designSystem";
+import {themeVars} from "../../designSystem";
 import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
-import {emojiPadding} from "./layout";
 
 const emojiWrapperCss = css`
+  color: ${themeVars.textColor};
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla",
+    "Noto Color Emoji", "Android Emoji";
+  line-height: 1;
+`;
+const emojiWrapperSizedCss = css`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: ${themeVars.textColor};
 `;
 
-const clickableCss = css`
-  padding: ${emojiPadding}px;
-  cursor: pointer;
-  margin: 0;
-  border: none;
-  background: none;
-  box-shadow: none;
-  border-radius: ${border.radius8}px;
-
-  &:hover {
-    background-color: var(--fibery-emoji-hover-color, ${themeVars.badgeBgColor});
-  }
+const emojiInlineImgCss = css`
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.1em;
+  object-fit: contain;
+`;
+const emojiSizedImgCss = css`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 `;
 
-const getSizeStyle = (size: number) => ({
-  display: "inline-block",
-  width: size,
-  height: size,
-});
+// This is needed to keep text-selection working for image based emojis Details: https://the.fibery.io/SoftDev/bug/Improve-selection-text-with-emojis-8963
+const emptyPixel = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
 
 export type EmojiProps = {
   size?: number;
   /** id or colons */
   emoji: string;
-  tooltip?: boolean;
   /** max supported version of emojis */
   version?: number;
   onClick?: (emoji: EmojiItem, event: React.MouseEvent) => void;
   skin?: EmojiSkin;
-
-  forceSize?: boolean;
+  /** render emoji as native unicode if possible */
+  native?: boolean;
 };
-export const Emoji: React.FC<EmojiProps> = ({
-  emoji: idOrColons,
-  size = 20,
-  tooltip,
-  forceSize = false,
-  onClick,
-  version = 14,
-  skin,
-}) => {
+export const Emoji: React.FC<EmojiProps> = ({emoji: idOrColons, size, version = 14, skin, native}) => {
   const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
 
   if (!emoji) {
@@ -61,33 +52,15 @@ export const Emoji: React.FC<EmojiProps> = ({
   let emojiNode: React.ReactNode;
 
   if ("native" in emoji) {
-    if (version >= emoji.version) {
-      emojiNode = (
-        <span
-          style={{
-            fontSize: size,
-            fontFamily:
-              '"Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji"',
-
-            ...(forceSize
-              ? {
-                  ...getSizeStyle(size),
-                  textAlign: "center",
-                  lineHeight: 1,
-                  wordBreak: "keep-all",
-                }
-              : {}),
-          }}
-        >
-          {emoji.native}
-        </span>
-      );
+    if (native && version >= emoji.version) {
+      emojiNode = emoji.native;
     } else {
       emojiNode = (
-        <span
+        <img
+          alt={emoji.name}
+          className={cx(size ? emojiSizedImgCss : emojiInlineImgCss)}
+          src={emptyPixel}
           style={{
-            ...getSizeStyle(size),
-
             backgroundImage: `url(${emoji.sprite.src})`,
             backgroundSize: emoji.sprite.size,
             backgroundPosition: emoji.sprite.position,
@@ -97,33 +70,19 @@ export const Emoji: React.FC<EmojiProps> = ({
     }
   } else {
     emojiNode = (
-      <span
-        style={{
-          ...getSizeStyle(size),
-          backgroundImage: `url(${emoji.imageUrl})`,
-          backgroundSize: "contain",
-          backgroundRepeat: "no-repeat",
-          backgroundPosition: "center",
-        }}
+      <img
+        alt={emoji.name}
+        loading="lazy"
+        className={cx(size ? emojiSizedImgCss : emojiInlineImgCss)}
+        src={emoji.imageUrl}
       />
     );
   }
 
-  // TODO: use fibery's tooltip?
-  const title = tooltip ? emoji.id : undefined;
+  const style = size ? {fontSize: size, width: size, height: size} : {};
 
-  return onClick ? (
-    <button
-      type="button"
-      onClick={(e) => onClick(emoji, e)}
-      className={cx(emojiWrapperCss, clickableCss)}
-      title={title}
-      aria-label={emoji.name}
-    >
-      {emojiNode}
-    </button>
-  ) : (
-    <span className={emojiWrapperCss} title={title} aria-label={emoji.name}>
+  return (
+    <span style={style} className={cx(emojiWrapperCss, size && emojiWrapperSizedCss)} aria-label={emoji.name}>
       {emojiNode}
     </span>
   );

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

@@ -2,8 +2,10 @@ import {css} from "@linaria/core";
 import {space} from "../../designSystem";
 
 const footerCss = css`
+  position: relative;
   border-top: 1px solid var(--fibery-color-separatorColor);
-  padding: 0 ${space.s}px;
+  padding: ${space.m}px ${space.l}px;
+  min-height: 40px;
 `;
 
 export const EmojiPickerFooter: React.FC<React.PropsWithChildren> = ({children}) => {

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

@@ -1,45 +1,71 @@
-import {css} from "@linaria/core";
-import {useLayoutEffect, useMemo, useRef, useState} from "react";
-import {useEmojiDataStoreSelector} from "../stores/emoji-data-store";
+import {css, cx} from "@linaria/core";
+import {useLayoutEffect, useMemo, useState} from "react";
+import {useEmojiDataStore, useEmojiDataStoreSelector} from "../stores/emoji-data-store";
 import {get as getFrequentlyUsed} from "../utils/frequently";
-import {EmojiPickerCategory} from "./category";
+import {EmojiPickerCategory, EmojiPickerCategoryProps} from "./category";
 import {useEmojiPickerContentSettings} from "./content";
 import {contentHorizontalPadding} from "./layout";
 import {useFoundEmojis} from "./search-provider";
 
 const gridWrapperCss = css`
-  height: 238px;
+  height: 258px;
   overflow-y: scroll;
   overflow-x: hidden;
 
   padding: 0 ${contentHorizontalPadding}px;
 `;
 
-const AllCategories = () => {
+type AllCategoriesProps = Pick<EmojiPickerCategoryProps, "renderEmoji" | "scrollParent">;
+const AllCategories: React.FC<AllCategoriesProps> = ({renderEmoji, scrollParent}) => {
   const contentSettings = useEmojiPickerContentSettings();
 
-  // TODO: filter frequently used to not have zombie dom nodes
-  const [recentCategory] = useState(() => ({
-    id: "recent",
-    name: "Recent",
-    emojis: getFrequentlyUsed(contentSettings.perLine),
-  }));
-
+  const emojiData = useEmojiDataStore();
   const categories = useEmojiDataStoreSelector((store) => store.getCategories());
 
+  const recentCategory = useMemo(
+    () => ({
+      id: "recent",
+      name: "Recent",
+      emojis: getFrequentlyUsed(contentSettings.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 category={recentCategory} /> : null}
-      {categories.map((category) => {
-        return <EmojiPickerCategory key={category.id} category={category} />;
+      {recentCategory.emojis.length > 0 ? (
+        <EmojiPickerCategory
+          preRender
+          category={recentCategory}
+          scrollParent={scrollParent}
+          renderEmoji={renderEmoji}
+        />
+      ) : null}
+      {categories.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 = () => {
+export const EmojiPickerGrid: React.FC<EmojiPickerGridProps> = ({className, renderEmoji}) => {
   const foundEmojis = useFoundEmojis();
-  const ref = useRef<HTMLDivElement>(null);
+  const [gridElement, setGridElement] = useState<HTMLDivElement | null>(null);
 
   const searchCategory = useMemo(
     () =>
@@ -54,14 +80,18 @@ export const EmojiPickerGrid = () => {
   );
 
   useLayoutEffect(() => {
-    if (ref.current) {
-      ref.current.scrollTop = 0;
+    if (gridElement) {
+      gridElement.scrollTop = 0;
     }
-  }, [foundEmojis]);
+  }, [foundEmojis, gridElement]);
 
   return (
-    <div ref={ref} className={gridWrapperCss}>
-      {searchCategory ? <EmojiPickerCategory category={searchCategory} /> : <AllCategories />}
+    <div ref={setGridElement} className={cx(gridWrapperCss, className)}>
+      {searchCategory ? (
+        <EmojiPickerCategory preRender scrollParent={gridElement} category={searchCategory} renderEmoji={renderEmoji} />
+      ) : (
+        <AllCategories scrollParent={gridElement} renderEmoji={renderEmoji} />
+      )}
     </div>
   );
 };

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

@@ -5,10 +5,14 @@ import {EmojiPickerSearchProvider} from "./search-provider";
 import {detectEmojiSupportLevel} from "../utils/emoji-support";
 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";
 
 type EmojiPickerCtx = {
   version: number;
   onEmojiSelect: (emoji: EmojiItem) => void;
+  onCustomCategorySettings?: () => void;
+  native: boolean;
 };
 const [Provider, useCtx] = createContext<EmojiPickerCtx>("EmojiPickerRoot");
 
@@ -49,19 +53,25 @@ export const EmojiPickerRoot: React.FC<
   React.PropsWithChildren<{
     i18n?: Partial<I18N>;
     onEmojiSelect: (emoji: EmojiItem) => void;
+    onCustomCategorySettings?: () => void;
   }>
-> = ({i18n, onEmojiSelect, children}) => {
+> = ({i18n, onEmojiSelect, onCustomCategorySettings, children}) => {
   const mergedI18N = useMemo(() => ({...defaultI18N, ...i18n}), [i18n]);
 
+  const onEmojiSelectCb = useCallbackRef(onEmojiSelect);
+  const onCustomCategorySettingsCb = useCallbackRef(onCustomCategorySettings);
+
   const emojiPickerCtx = useMemo(
     () => ({
       version: detectEmojiSupportLevel(),
+      native: isApple(),
+      onCustomCategorySettings: onCustomCategorySettingsCb,
       onEmojiSelect(emoji: EmojiItem) {
-        onEmojiSelect(emoji);
+        onEmojiSelectCb(emoji);
         addToFrequentlyUsed(emoji.id);
       },
     }),
-    [onEmojiSelect]
+    [onEmojiSelectCb, onCustomCategorySettingsCb]
   );
 
   return (

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

@@ -1,16 +1,19 @@
+import {EmojiItem} from "@fibery/emoji-data";
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {css, cx} from "@linaria/core";
-import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {startTransition, useId, useRef} from "react";
-import Search from "../../icons/react/Search";
-import Close from "../../icons/react/Close";
+import {IconButton} from "../../Button/icon-button";
 import {border, space, textStyles, themeVars} from "../../designSystem";
+import Close from "../../icons/react/Close";
+import Search from "../../icons/react/Search";
 import {useEmojiDataStore} from "../stores/emoji-data-store";
+import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useFoundEmojis, useSetFoundEmojis} from "./search-provider";
-import {IconButton} from "../../Button/icon-button";
-import {EmojiItem} from "@fibery/emoji-data";
+import {useEmojiSkin} from "./skin-provider";
 
 const searchCss = css`
   ${textStyles.regular}
+  position: relative;
   width: 100%;
   background-color: ${themeVars.inputBgColor};
   box-shadow: ${themeVars.inputBorderColor};
@@ -20,7 +23,6 @@ const searchCss = css`
   display: flex;
   align-items: center;
   padding-left: ${space.l}px;
-  padding-right: ${space.m}px;
   gap: ${space.xxs}px;
 
   /* For screenreaders only, via https://stackoverflow.com/a/19758620 */
@@ -57,22 +59,36 @@ const searchIconCss = css`
   padding: ${space.xxs}px;
 `;
 
+const extraActionSlotCss = css`
+  background-color: var(--fibery-emoji-hover-color, ${themeVars.inputCopyBgColor});
+  border-top-right-radius: ${space.s}px;
+  border-bottom-right-radius: ${space.s}px;
+`;
+
 export type EmojiPickerSearchProps = {
   autoFocus?: boolean;
 
   className?: string;
+
+  searchRef?: React.RefObject<HTMLInputElement>;
+
+  extraAction?: React.ReactNode;
 };
 
-export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus, className}) => {
+export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus, className, searchRef, extraAction}) => {
   const ref = useRef<HTMLInputElement>(null);
+
+  const setRefs = useComposedRefs(ref, searchRef);
+
   const i18n = useEmojiPickerI18N();
   const emojiPicker = useEmojiPickerCtx();
   const emojiData = useEmojiDataStore();
   const foundEmojis = useFoundEmojis();
+  const skin = useEmojiSkin();
   const _setFoundEmojis = useSetFoundEmojis();
 
   const setFoundEmojis = (emojis: EmojiItem[] | null) => {
-    // imroves responsiveness from input.
+    // improves responsiveness of input.
     // TODO: better just implement a proper virtualization
     startTransition(() => _setFoundEmojis(emojis));
   };
@@ -97,18 +113,28 @@ export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus,
 
   return (
     <section className={cx(searchCss, className)} aria-label={i18n.search}>
+      {foundEmojis ? (
+        <IconButton size="small" onClick={clearSearch}>
+          <Close iconSize={16} />
+        </IconButton>
+      ) : (
+        <span className={searchIconCss}>
+          <Search iconSize={16} />
+        </span>
+      )}
+
       <input
-        ref={ref}
+        ref={setRefs}
+        autoFocus={autoFocus}
         id={inputId}
         className={searchInputCss}
         type="search"
         placeholder={i18n.search}
-        autoFocus={autoFocus}
         onKeyDown={onKeyDown}
         onChange={(e) => {
           const value = e.target.value;
 
-          setFoundEmojis(value ? emojiData.search(value) : null);
+          setFoundEmojis(value ? emojiData.search(value, {skin}) : null);
         }}
       />
       {/*
@@ -119,15 +145,7 @@ export const EmojiPickerSearch: React.FC<EmojiPickerSearchProps> = ({autoFocus,
         {i18n.search}
       </label>
 
-      {foundEmojis ? (
-        <IconButton size="small" onClick={clearSearch}>
-          <Close iconSize={16} />
-        </IconButton>
-      ) : (
-        <span className={searchIconCss}>
-          <Search iconSize={16} />
-        </span>
-      )}
+      {extraAction ? <div className={extraActionSlotCss}>{extraAction}</div> : null}
     </section>
   );
 };

package/src/emoji-picker/primitives/skin-tone.tsx

@@ -5,16 +5,16 @@ import {textStyles, themeVars} from "../../designSystem";
 import {Emoji} from "./emoji";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useEmojiSkin, useSetEmojiSkin} from "./skin-provider";
+import {IconButton} from "../../Button/icon-button";
 
 const skinToneWrapperCss = css`
+  display: flex;
+  align-items: center;
   background-color: ${themeVars.actionMenuBg};
   font-size: 0;
-  line-height: 1.15;
 `;
 
 const skinToneSwatchCss = css`
-  display: inline-block;
-  vertical-align: middle;
   overflow: hidden;
   width: 0;
   padding: 0;
@@ -50,6 +50,7 @@ const openedSkinTextCss = css`
   display: inline-block;
   vertical-align: middle;
   ${textStyles.small};
+  line-height: 1.3;
 
   width: 98px;
   color: ${themeVars.accentTextColor};
@@ -73,19 +74,28 @@ export const EmojiPickerSkinTone: React.FC<EmojiPickerSkinToneProps> = ({classNa
 
     skinToneNodes.push(
       <span key={`skin-tone-${skinTone}`} className={cx(skinToneSwatchCss, (selected || opened) && expandedCss)}>
-        <span data-skin={skinTone}>
+        <IconButton
+          size="big"
+          onClick={() => {
+            if (opened) {
+              setSkin(skinTone as EmojiSkin);
+            }
+            setOpened(!opened);
+          }}
+          className={css`
+            &:hover:not(:disabled),
+            &:focus-visible {
+              background-color: var(--fibery-emoji-hover-color, ${themeVars.badgeBgColor});
+            }
+          `}
+        >
           <Emoji
-            onClick={() => {
-              if (opened) {
-                setSkin(skinTone as EmojiSkin);
-              }
-              setOpened(!opened);
-            }}
             emoji={`:hand::skin-tone-${skinTone}:`}
             version={emojiPickerCtx.version}
+            native={emojiPickerCtx.native}
             size={20}
           />
-        </span>
+        </IconButton>
       </span>
     );
   }

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

@@ -28,7 +28,6 @@ export const makeEmojiDataStore = (emojiData: EmojiData): EmojiDataStore => {
   };
 };
 
-// TODO: this should probably wrap the whole app so every component shares the same data
 const [DataStoreProvider, useDataStoreCtx] = createContext<EmojiDataStore>("EmojiDataStore");
 
 export const EmojiDataStoreProvider: React.FC<