@fibery/ui-kit 1.22.0 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.22.0",
+  "version": "1.24.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -66,12 +66,13 @@
     "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",
-    "@fibery/react": "1.3.0",
+    "@fibery/emoji-data": "2.3.0",
     "@fibery/helpers": "1.2.0",
-    "@fibery/emoji-data": "2.2.1"
+    "@fibery/react": "1.3.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/design-system.ts

@@ -746,6 +746,8 @@ export const spaceNestedTreeInterval = 0;
 export const layout = {
   logoSize: 16,
   menuDefaultWidth: 243,
+  desktopToolbarHeight: 32,
+  desktopMenuMinWidth: 160,
   menuMinWidth: 47, //TODO: make dependency to itemHeight
   menuMaxWidth: 480,
   menuItemMinWidth: 80,

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/icon-emoji-picker.tsx

@@ -1,7 +1,7 @@
 import {css} from "@linaria/core";
 import {compact} from "lodash";
 import {Button} from "../button";
-import {AntTabs} from "../antd";
+import {AntTabs} from "../antd/Tabs";
 import {space, textStyles} from "../design-system";
 import {$TSFixMe} from "../tsfixme";
 import {AppIconPicker, AppIconPickerProps} from "./app-icon-picker";

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>
+  );
+});