@fibery/ui-kit 1.15.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -28,6 +28,7 @@
   ],
   "license": "UNLICENSED",
   "dependencies": {
+    "react-intersection-observer": "9.3.5",
     "@linaria/core": "3.0.0-beta.15",
     "@linaria/react": "3.0.0-beta.15",
     "@popperjs/core": "2.11.6",
@@ -59,9 +60,9 @@
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/react": "1.0.3",
     "@fibery/helpers": "1.1.0",
-    "@fibery/emoji-data": "2.1.0"
+    "@fibery/react": "1.0.3",
+    "@fibery/emoji-data": "2.1.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -93,8 +94,8 @@
     "svgo": "2.8.0",
     "typescript": "5.0.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/eslint-config": "8.3.0",
-    "@fibery/babel-preset": "7.2.0"
+    "@fibery/babel-preset": "7.2.0",
+    "@fibery/eslint-config": "8.3.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/antd/styles.ts

@@ -22,7 +22,7 @@ export const inputOverrides = {
     font: "inherit",
     color: themeVars.textColor,
     outline: "none",
-    backgroundColor: themeVars.inputBgColor,
+    backgroundColor: `${themeVars.inputBgColor} !important`,
     borderRadius: border.radius6,
     minHeight: layout.inputHeight,
     paddingTop: 0,
@@ -32,18 +32,18 @@ export const inputOverrides = {
     border: 0,
     borderColor: colors.transparent,
     transition: `box-shadow ${transition}`,
-    boxShadow: "var(--input-border)",
+    boxShadow: `var(--input-border, ${themeVars.inputBorderColor})`,
     letterSpacing: 0,
     "::placeholder": {
       color: themeVars.inputPlaceholderTextColor,
     },
   },
   hover: {
-    boxShadow: "var(--input-hover-border) !important",
+    boxShadow: `var(--input-hover-border, 0 0 0 1px ${themeVars.opacity.opacity40}) !important`,
     transition: `box-shadow ${transition}`,
   },
   focus: {
-    boxShadow: "var(--input-focus-border), var(--input-focus-shadow) !important",
+    boxShadow: `var(--input-focus-border, 0 0 0 1px ${themeVars.opacity.opacity25}), var(--input-focus-shadow, 0 0 0 3px ${themeVars.focus}) !important`,
     transition: `box-shadow ${transition}`,
   },
   disabled: {

package/src/designSystem.ts

@@ -245,6 +245,8 @@ const lightColors = {
   filterGroup1Bg: slate.slate2,
   filterGroup2Bg: slate.slate3,
   filterGroupBorder: blackA.blackA3,
+  colorBgNotificationFocusedDefault: indigo.indigo3,
+  colorBgNotificationFocusedHover: indigo.indigo4,
   //end
   disabledInversedTextColor: shades.opacity25,
   danger: red.red9,
@@ -430,6 +432,8 @@ const darkColors = {
   filterGroup1Bg: slateDark.slate6,
   filterGroup2Bg: slateDark.slate7,
   filterGroupBorder: whiteA.whiteA3,
+  colorBgNotificationFocusedDefault: getOpacities(indigoDark.indigo11).opacity20,
+  colorBgNotificationFocusedHover: getOpacities(indigoDark.indigo11).opacity30,
   //end
   disabledInversedTextColor: lights.opacity25,
   danger: redDark.red10,
@@ -600,24 +604,11 @@ export const getLinkedHighlightBackgroundColor = _.memoize(
   (themeMode, color) => `${themeMode}-${color}`
 );
 
-// REMOVE AFTER MIGRATION ON BACKEND
-export const migrateEnumColor = (color: string) => {
-  const pastelIdx = pastelColors.indexOf(color);
-
-  if (pastelIdx > -1) {
-    return cardTypeColors[pastelIdx];
-  }
-
-  return color;
-};
-
 export const getEnumBackgroundColor = _.memoize(
   (mode: ThemeMode, color: string) => {
-    const migratedColor = migrateEnumColor(color);
-
     return getThemeValue(mode, {
-      light: a11yColor(getOpacities(migratedColor).opacity20, lightColors.whiteColor, 1),
-      dark: a11yColor(getOpacities(migratedColor).opacity30, darkColors.menuBg, 1.3),
+      light: a11yColor(getOpacities(color).opacity20, lightColors.whiteColor, 1),
+      dark: a11yColor(getOpacities(color).opacity30, darkColors.menuBg, 1.3),
     });
   },
   (themeMode, color) => `${themeMode}-${color}`
@@ -660,8 +651,6 @@ export const cardTypeColors = [
   "#B04E31",
 ] as const;
 
-const pastelColors = cardTypeColors.map((color) => makeChromaColor(color).luminance(0.8).hex());
-
 export const dropCursorColor = chroma(brandColors.blue).alpha(0.7).css();
 export const colors = {
   ...getTypeColors(brandColors.green, "light"),

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

@@ -1,14 +1,11 @@
-import {EmojiItem} from "@fibery/emoji-data/lib/src";
-import {ColorPicker} from "../ColorPicker";
+import {CustomEmoji, EmojiItem} from "@fibery/emoji-data";
+import {useThemeMode} from "../ThemeProvider";
+import {cardTypeColors, getIconColor} from "../designSystem";
 import {$TSFixMe} from "../tsfixme";
-import {LazyIconDataStore} from "./stores/lazy-icon-data-store";
+import {EmojiPickerContentWithColor} from "./emoji-picker-content-with-color";
 import {EmojiPickerContent} from "./primitives/content";
-import {EmojiPickerFooter} from "./primitives/footer";
-import {EmojiPickerGrid} from "./primitives/grid";
-import {EmojiPickerHeader} from "./primitives/header";
 import {EmojiPickerRoot} from "./primitives/root";
-import {EmojiPickerSearch} from "./primitives/search";
-import {cardTypeColors} from "../designSystem";
+import {LazyIconDataStore} from "./stores/lazy-icon-data-store";
 
 const i18n = {search: "Search icon...", notfound: "No Icons Found"};
 
@@ -19,35 +16,43 @@ export type AppIconPickerProps = {
   onColorSelect?: (c: $TSFixMe) => void;
 
   onSelect: (emoji: EmojiItem) => void;
+  autoFocus?: boolean;
 };
 export const AppIconPicker: React.FC<AppIconPickerProps> = ({
   onSelect,
   color,
-  colors = cardTypeColors,
+  colors = cardTypeColors as unknown as string[],
   onColorSelect,
   getHoverColor,
+  autoFocus = true,
 }) => {
+  const themeMode = useThemeMode();
+
   return (
     <EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect}>
       <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={20}>
-        <LazyIconDataStore fallback={<div style={{height: "282px"}}></div>}>
-          <EmojiPickerHeader>
-            <EmojiPickerSearch autoFocus />
-          </EmojiPickerHeader>
-
-          <EmojiPickerGrid />
+        <LazyIconDataStore fallback={<div style={{height: "302px"}}></div>}>
+          <EmojiPickerContentWithColor
+            color={color}
+            colors={colors}
+            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>
+            )}
+          />
         </LazyIconDataStore>
-
-        {onColorSelect ? (
-          <EmojiPickerFooter>
-            <ColorPicker
-              colors={colors}
-              getSwatchHoverColor={getHoverColor}
-              color={color}
-              onChangeComplete={onColorSelect}
-            />
-          </EmojiPickerFooter>
-        ) : null}
       </EmojiPickerContent>
     </EmojiPickerRoot>
   );

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

@@ -0,0 +1,107 @@
+import {css} from "@linaria/core";
+import {useState} from "react";
+import {IconButton} from "../Button/icon-button";
+import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../Collapsible";
+import {ColorPicker} from "../ColorPicker";
+import {useThemeMode} from "../ThemeProvider";
+import {getIconColor, space} from "../designSystem";
+import ColorCoding from "../icons/react/ColorCoding";
+import ColorCodingFilled from "../icons/react/ColorCodingFilled";
+import {$TSFixMe} from "../tsfixme";
+import {EmojiPickerGrid, EmojiPickerGridProps} from "./primitives/grid";
+import {EmojiPickerHeader} from "./primitives/header";
+import {EmojiPickerSearch} from "./primitives/search";
+
+const colorPickerWrapperCss = css`
+  padding-top: ${space.l}px;
+`;
+
+const disableScrollCss = css`
+  overflow-y: hidden;
+`;
+
+type ColorPickerCollapsibleTrigger = {opened: boolean; color?: string};
+
+const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = ({opened, color}) => {
+  const themeMode = useThemeMode();
+  const iconColor = color ? getIconColor(themeMode, color) : undefined;
+
+  const Icon = opened ? ColorCodingFilled : ColorCoding;
+
+  const label = opened ? "Close color picker" : "Open color picker";
+
+  return (
+    <CollapsibleTrigger asChild>
+      <IconButton
+        aria-label={label}
+        size="big"
+        className={css`
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        `}
+      >
+        <Icon color={iconColor} iconSize={18} containerSize={20} />
+      </IconButton>
+    </CollapsibleTrigger>
+  );
+};
+
+const collapsibleWrapperCss = css`
+  max-height: 302px; // search + emoji grid
+  overflow: hidden;
+`;
+
+export type EmojiPickerContentWithColorProps = {
+  color?: string;
+  getHoverColor?: (color: string) => string | undefined;
+  colors?: string[];
+  onColorSelect?: (c: $TSFixMe) => void;
+
+  searchRef?: React.RefObject<HTMLInputElement>;
+  searchAutofocus?: boolean;
+} & Pick<EmojiPickerGridProps, "renderEmoji">;
+
+export const EmojiPickerContentWithColor: React.FC<EmojiPickerContentWithColorProps> = ({
+  searchRef,
+  colors,
+  color,
+  onColorSelect,
+  getHoverColor,
+  searchAutofocus = true,
+  renderEmoji,
+}) => {
+  const [colorOpened, setColorOpened] = useState(false);
+
+  const showColorPicker = Boolean(onColorSelect);
+
+  return (
+    <CollapsibleRoot
+      className={collapsibleWrapperCss}
+      open={colorOpened}
+      onOpenChange={setColorOpened}
+      onWheel={() => setColorOpened(false)}
+    >
+      <EmojiPickerHeader>
+        <EmojiPickerSearch
+          searchRef={searchRef}
+          autoFocus={searchAutofocus}
+          extraAction={showColorPicker ? <ColorPickerCollapsibleTrigger opened={colorOpened} color={color} /> : null}
+        />
+        {showColorPicker ? (
+          <CollapsibleContent>
+            <div className={colorPickerWrapperCss}>
+              <ColorPicker
+                colors={colors}
+                getSwatchHoverColor={getHoverColor}
+                color={color}
+                onChangeComplete={onColorSelect}
+              />
+            </div>
+          </CollapsibleContent>
+        ) : null}
+      </EmojiPickerHeader>
+
+      <EmojiPickerGrid className={colorOpened ? disableScrollCss : undefined} renderEmoji={renderEmoji} />
+    </CollapsibleRoot>
+  );
+};

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

@@ -1,15 +1,13 @@
 import {EmojiItem} from "@fibery/emoji-data/lib/src";
+import {css} from "@linaria/core";
+import {Button} from "../Button";
+import {cardTypeColors, space} from "../designSystem";
 import {$TSFixMe} from "../tsfixme";
-import {EmojiPickerRoot} from "./primitives/root";
+import {EmojiPickerContentWithColor} from "./emoji-picker-content-with-color";
 import {EmojiPickerContent} from "./primitives/content";
-import {EmojiPickerHeader} from "./primitives/header";
-import {EmojiPickerSearch} from "./primitives/search";
-import {cx, css} from "@linaria/core";
-import {EmojiPickerSkinTone} from "./primitives/skin-tone";
-import {EmojiPickerGrid} from "./primitives/grid";
-import {ColorPicker} from "../ColorPicker";
 import {EmojiPickerFooter} from "./primitives/footer";
-import {cardTypeColors} from "../designSystem";
+import {EmojiPickerRoot} from "./primitives/root";
+import {EmojiPickerSkinTone} from "./primitives/skin-tone";
 
 const i18n = {search: "Search emoji..."};
 
@@ -19,6 +17,7 @@ export type EmojiPickerProps = {
   colors?: string[];
   onColorSelect?: (c: $TSFixMe) => void;
   onCustomCategorySettings?: () => void;
+  onAddCustomEmoji?: () => void;
   onSelect: (emoji: EmojiItem) => void;
   showSkinTones?: boolean;
 
@@ -27,48 +26,44 @@ export type EmojiPickerProps = {
 export const EmojiPicker: React.FC<EmojiPickerProps> = ({
   onSelect,
   color,
-  colors = cardTypeColors,
+  colors = cardTypeColors as unknown as string[],
   onColorSelect,
   onCustomCategorySettings,
+  onAddCustomEmoji,
   getHoverColor,
   showSkinTones,
   searchRef,
 }) => {
+  const showFooter = Boolean(onAddCustomEmoji) || showSkinTones;
+
   return (
     <EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect} onCustomCategorySettings={onCustomCategorySettings}>
       <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={20}>
-        <EmojiPickerHeader>
-          <EmojiPickerSearch
-            searchRef={searchRef}
-            autoFocus
-            className={cx(
-              showSkinTones &&
-                css`
-                  width: 250px !important;
-                `
-            )}
-          />
-          {/* Temporary hacks. SkinTone should move to footer */}
-          {showSkinTones ? (
-            <EmojiPickerSkinTone
-              className={css`
-                position: absolute;
-                top: 4px;
-                right: 12px;
-              `}
-            />
-          ) : null}
-        </EmojiPickerHeader>
-        <EmojiPickerGrid />
+        <EmojiPickerContentWithColor
+          color={color}
+          colors={colors}
+          getHoverColor={getHoverColor}
+          onColorSelect={onColorSelect}
+          searchRef={searchRef}
+        />
 
-        {onColorSelect ? (
+        {showFooter ? (
           <EmojiPickerFooter>
-            <ColorPicker
-              colors={colors}
-              getSwatchHoverColor={getHoverColor}
-              color={color}
-              onChangeComplete={onColorSelect}
-            />
+            {onAddCustomEmoji ? (
+              <Button size=":button-size/small" onClick={onAddCustomEmoji}>
+                Add Emoji
+              </Button>
+            ) : null}
+
+            {showSkinTones ? (
+              <EmojiPickerSkinTone
+                className={css`
+                  position: absolute;
+                  top: 4px;
+                  right: ${space.l}px;
+                `}
+              />
+            ) : null}
           </EmojiPickerFooter>
         ) : null}
       </EmojiPickerContent>

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

@@ -6,6 +6,7 @@ import {space, textStyles} from "../designSystem";
 import {$TSFixMe} from "../tsfixme";
 import {AppIconPicker, AppIconPickerProps} from "./app-icon-picker";
 import {EmojiPicker, EmojiPickerProps} from "./emoji-picker";
+import EmojiDelete from "../icons/react/EmojiDelete";
 
 const TabHeader: React.FC<React.PropsWithChildren> = ({children}) => (
   <div
@@ -27,7 +28,6 @@ export type IconEmojiPickerProps = React.PropsWithChildren<{
   onCustomEmojisSettings?: () => void;
   onReset?: () => void;
   resetLabel?: string;
-  createLabel?: string;
   defaultTab?: TabKey;
   showColorPickerOnTabs?: TabKey[];
   color?: string;
@@ -41,7 +41,6 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
   onCustomEmojisSettings,
   defaultTab,
   onReset,
-  createLabel = "Add Emoji",
   resetLabel = "Reset",
   showColorPickerOnTabs = ["icons", "emojis"],
   color,
@@ -62,21 +61,11 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
                 color={color}
                 onColorSelect={showColorPickerOnTabs.includes("emojis") ? onColorSelect : undefined}
                 onCustomCategorySettings={onCustomEmojisSettings}
+                onAddCustomEmoji={onCreateClick}
                 getHoverColor={getHoverColor}
                 onSelect={onEmojiSelect}
                 showSkinTones
               />
-              {onCreateClick && (
-                <div
-                  className={css`
-                    padding: ${space.l}px;
-                  `}
-                >
-                  <Button size=":button-size/small" onClick={onCreateClick}>
-                    {createLabel}
-                  </Button>
-                </div>
-              )}
             </>
           ),
         },
@@ -100,7 +89,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
               padding-right: ${space.l}px;
             `}
           >
-            <Button size={":button-size/small"} onClick={onReset}>
+            <Button Icon={EmojiDelete} size={":button-size/small"} onClick={onReset}>
               {resetLabel}
             </Button>
           </div>

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

@@ -1,9 +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";
@@ -24,7 +26,6 @@ const categoryLabelCss = css`
   align-items: center;
   gap: ${space.xs}px;
 
-  /* is required only because contentVisibility lifts emoji up */
   z-index: 1;
 `;
 
@@ -62,22 +63,89 @@ const NotFound = () => {
   );
 };
 
-type EmojiPickerCategoryProps = {
-  category: Category;
+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));
+
+  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 const EmojiPickerCategory = memo<EmojiPickerCategoryProps>(function EmojiPickerCategoryComponent({category}) {
+
+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} />
@@ -86,28 +154,17 @@ export const EmojiPickerCategory = memo<EmojiPickerCategoryProps>(function Emoji
       </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}
-                  size={emojiContentSettings.emojiSize}
-                  version={emojiPickerCtx.version}
-                  skin={skin}
-                  tooltip
-                  native={emojiPickerCtx.native}
-                />
+                {inView ? <CategoryItem id={id} renderEmoji={renderEmoji} /> : null}
               </li>
             );
           })}