emoji-picker-react 4.4.12 → 4.5.0

package/dist/hooks/preloadEmoji.d.ts

@@ -1,4 +1,4 @@
-import { GetEmojiUrl } from '../components/emoji/Emoji';
+import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { EmojiStyle } from '../types/exposedTypes';
 export declare function preloadEmoji(getEmojiUrl: GetEmojiUrl, emoji: undefined | DataEmoji, emojiStyle: EmojiStyle): void;

package/dist/hooks/useShouldHideCustomEmojis.d.ts

@@ -0,0 +1 @@
+export declare function useShouldHideCustomEmojis(): boolean;

package/dist/typeRefinements/typeRefinements.d.ts

@@ -0,0 +1,5 @@
+import { CategoryConfig, CustomCategoryConfig } from '../config/categoryConfig';
+import { CustomEmoji } from '../config/customEmojiConfig';
+import { DataEmoji } from '../dataUtils/DataTypes';
+export declare function isCustomCategory(category: CategoryConfig | CustomCategoryConfig): category is CustomCategoryConfig;
+export declare function isCustomEmoji(emoji: Partial<DataEmoji>): emoji is CustomEmoji;

package/dist/types/exposedTypes.d.ts

@@ -32,6 +32,7 @@ export declare enum SkinTones {
 }
 export declare enum Categories {
     SUGGESTED = "suggested",
+    CUSTOM = "custom",
     SMILEYS_PEOPLE = "smileys_people",
     ANIMALS_NATURE = "animals_nature",
     FOOD_DRINK = "food_drink",

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.12",
+  "version": "4.5.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -77,6 +77,9 @@
     "emoji-datasource": "^14.0.0",
     "eslint-import-resolver-typescript": "^3.3.0",
     "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "fs-extra": "^10.1.0",
     "glob": "^8.0.3",
     "husky": "^8.0.1",
@@ -92,10 +95,7 @@
     "tiny-invariant": "^1.2.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.31.8",
-    "eslint-plugin-react-hooks": "^4.6.0"
+    "typescript": "^4.7.4"
   },
   "dependencies": {
     "clsx": "^1.2.1"

package/src/components/context/PickerConfigContext.tsx

@@ -17,8 +17,9 @@ const ConfigContext = React.createContext<PickerConfigInternal>(
 );
 
 export function PickerConfigProvider({ children, ...config }: Props) {
+  const [mergedConfig] = React.useState(() => mergeConfig(config));
   return (
-    <ConfigContext.Provider value={mergeConfig(config)}>
+    <ConfigContext.Provider value={mergedConfig}>
       {children}
     </ConfigContext.Provider>
   );

package/src/components/emoji/BaseEmojiProps.ts

@@ -0,0 +1,13 @@
+import { CustomEmoji } from '../../config/customEmojiConfig';
+import { DataEmoji } from '../../dataUtils/DataTypes';
+import { EmojiStyle } from '../../types/exposedTypes';
+
+export type BaseEmojiProps = {
+  emoji?: DataEmoji | CustomEmoji;
+  emojiStyle: EmojiStyle;
+  unified: string;
+  size?: number;
+  lazyLoad?: boolean;
+  getEmojiUrl?: GetEmojiUrl;
+};
+export type GetEmojiUrl = (unified: string, style: EmojiStyle) => string;

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import { ClassNames } from '../../DomUtils/classNames';
+import { Button } from '../atoms/Button';
+import './Emoji.css';
+
+type ClickableEmojiButtonProps = Readonly<{
+  hidden?: boolean;
+  showVariations?: boolean;
+  hiddenOnSearch?: boolean;
+  emojiNames: string[];
+  children: React.ReactNode;
+  hasVariations: boolean;
+  unified?: string;
+}>;
+
+export function ClickableEmojiButton({
+  emojiNames,
+  unified,
+  hidden,
+  hiddenOnSearch,
+  showVariations = true,
+  hasVariations,
+  children
+}: ClickableEmojiButtonProps) {
+  return (
+    <Button
+      className={clsx(ClassNames.emoji, {
+        [ClassNames.hidden]: hidden,
+        [ClassNames.hiddenOnSearch]: hiddenOnSearch,
+        [ClassNames.visible]: !hidden && !hiddenOnSearch,
+        [ClassNames.emojiHasVariations]: hasVariations && showVariations
+      })}
+      data-unified={unified}
+      aria-label={emojiNames[0]}
+      data-full-name={emojiNames}
+    >
+      {children}
+    </Button>
+  );
+}

package/src/components/emoji/Emoji.css

@@ -30,6 +30,8 @@
 .EmojiPickerReact button.epr-emoji .epr-emoji-img {
   max-width: var(--epr-emoji-fullsize);
   max-height: var(--epr-emoji-fullsize);
+  min-width: var(--epr-emoji-fullsize);
+  min-height: var(--epr-emoji-fullsize);
   padding: var(--epr-emoji-padding);
 }
 

package/src/components/emoji/Emoji.tsx

@@ -1,23 +1,15 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
 import { DataEmoji } from '../../dataUtils/DataTypes';
-import {
-  emojiByUnified,
-  emojiHasVariations,
-  emojiName,
-  emojiNames,
-  emojiUrlByUnified,
-} from '../../dataUtils/emojiSelectors';
-import { parseNativeEmoji } from '../../dataUtils/parseNativeEmoji';
-import { EmojiStyle } from '../../types/exposedTypes';
-import { Button } from '../atoms/Button';
-import { useEmojisThatFailedToLoadState } from '../context/PickerContext';
+import { emojiHasVariations, emojiNames } from '../../dataUtils/emojiSelectors';
+
 import './Emoji.css';
+import { BaseEmojiProps } from './BaseEmojiProps';
+import { ClickableEmojiButton } from './ClickableEmojiButton';
+import { ViewOnlyEmoji } from './ViewOnlyEmoji';
 
 type ClickableEmojiProps = Readonly<
-  BaseProps & {
+  BaseEmojiProps & {
     hidden?: boolean;
     showVariations?: boolean;
     hiddenOnSearch?: boolean;
@@ -25,15 +17,6 @@ type ClickableEmojiProps = Readonly<
   }
 >;
 
-type BaseProps = {
-  emoji?: DataEmoji;
-  emojiStyle: EmojiStyle;
-  unified: string;
-  size?: number;
-  lazyLoad?: boolean;
-  getEmojiUrl?: GetEmojiUrl;
-};
-
 export function ClickableEmoji({
   emoji,
   unified,
@@ -43,22 +26,18 @@ export function ClickableEmoji({
   showVariations = true,
   size,
   lazyLoad,
-  getEmojiUrl,
+  getEmojiUrl
 }: ClickableEmojiProps) {
   const hasVariations = emojiHasVariations(emoji);
 
   return (
-    <Button
-      className={clsx(ClassNames.emoji, {
-        [ClassNames.hidden]: hidden,
-        [ClassNames.hiddenOnSearch]: hiddenOnSearch,
-        [ClassNames.visible]: !hidden && !hiddenOnSearch,
-        [ClassNames.emojiHasVariations]: hasVariations && showVariations,
-      })}
-      data-unified={unified}
-      // @ts-ignore - let's ignore the fact this is not a real react ref, ok?
-      aria-label={emojiName(emoji)}
-      data-full-name={emojiNames(emoji)}
+    <ClickableEmojiButton
+      hasVariations={hasVariations}
+      showVariations={showVariations}
+      hidden={hidden}
+      hiddenOnSearch={hiddenOnSearch}
+      emojiNames={emojiNames(emoji)}
+      unified={unified}
     >
       <ViewOnlyEmoji
         unified={unified}
@@ -68,95 +47,6 @@ export function ClickableEmoji({
         lazyLoad={lazyLoad}
         getEmojiUrl={getEmojiUrl}
       />
-    </Button>
-  );
-}
-
-export function ViewOnlyEmoji({
-  emoji,
-  unified,
-  emojiStyle,
-  size,
-  lazyLoad,
-  getEmojiUrl = emojiUrlByUnified,
-}: BaseProps) {
-  const style = {} as React.CSSProperties;
-  if (size) {
-    style.width = style.height = style.fontSize = `${size}px`;
-  }
-
-  const emojiToRender = emoji ? emoji : emojiByUnified(unified);
-  if(!emojiToRender) {
-    return null
-  }
-
-  return (
-    <>
-      {emojiStyle === EmojiStyle.NATIVE ? (
-        <NativeEmoji unified={unified} style={style} />
-      ) : (
-        <EmojiImg
-          unified={unified}
-          style={style}
-          emoji={emojiToRender}
-          emojiStyle={emojiStyle}
-          lazyLoad={lazyLoad}
-          getEmojiUrl={getEmojiUrl}
-        />
-      )}
-    </>
-  );
-}
-
-function NativeEmoji({
-  unified,
-  style,
-}: {
-  unified: string;
-  style: React.CSSProperties;
-}) {
-  return (
-    <span
-      className={clsx(ClassNames.external, 'epr-emoji-native')}
-      data-unified={unified}
-      style={style}
-    >
-      {parseNativeEmoji(unified)}
-    </span>
-  );
-}
-
-function EmojiImg({
-  emoji,
-  unified,
-  emojiStyle,
-  style,
-  lazyLoad = false,
-  getEmojiUrl,
-}: {
-  emoji: DataEmoji;
-  unified: string;
-  emojiStyle: EmojiStyle;
-  style: React.CSSProperties;
-  lazyLoad?: boolean;
-  getEmojiUrl: GetEmojiUrl;
-}) {
-  const [, setEmojisThatFailedToLoad] = useEmojisThatFailedToLoadState();
-
-  return (
-    <img
-      src={getEmojiUrl(unified, emojiStyle)}
-      alt={emojiName(emoji)}
-      className={clsx(ClassNames.external, 'epr-emoji-img')}
-      loading={lazyLoad ? 'lazy' : 'eager'}
-      onError={onError}
-      style={style}
-    />
+    </ClickableEmojiButton>
   );
-
-  function onError() {
-    setEmojisThatFailedToLoad((prev) => new Set(prev).add(unified));
-  }
 }
-
-export type GetEmojiUrl = (unified: string, style: EmojiStyle) => string;

package/src/components/emoji/EmojiImg.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import { ClassNames } from '../../DomUtils/classNames';
+import { EmojiStyle } from '../../types/exposedTypes';
+
+export function EmojiImg({
+  emojiName,
+  style,
+  lazyLoad = false,
+  imgUrl,
+  onError
+}: {
+  emojiName: string;
+  emojiStyle: EmojiStyle;
+  style: React.CSSProperties;
+  lazyLoad?: boolean;
+  imgUrl: string;
+  onError: () => void;
+}) {
+  return (
+    <img
+      src={imgUrl}
+      alt={emojiName}
+      className={clsx(ClassNames.external, 'epr-emoji-img')}
+      loading={lazyLoad ? 'lazy' : 'eager'}
+      onError={onError}
+      style={style}
+    />
+  );
+}

package/src/components/emoji/ExportedEmoji.tsx

@@ -2,14 +2,15 @@ import * as React from 'react';
 
 import { EmojiStyle } from '../../types/exposedTypes';
 
-import { GetEmojiUrl, ViewOnlyEmoji } from './Emoji';
+import { GetEmojiUrl } from './BaseEmojiProps';
+import { ViewOnlyEmoji } from './ViewOnlyEmoji';
 
 export function ExportedEmoji({
   unified,
   size = 32,
   emojiStyle = EmojiStyle.APPLE,
   lazyLoad = false,
-  getEmojiUrl,
+  getEmojiUrl
 }: {
   unified: string;
   emojiStyle?: EmojiStyle;

package/src/components/emoji/NativeEmoji.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import { ClassNames } from '../../DomUtils/classNames';
+import { parseNativeEmoji } from '../../dataUtils/parseNativeEmoji';
+
+export function NativeEmoji({
+  unified,
+  style
+}: {
+  unified: string;
+  style: React.CSSProperties;
+}) {
+  return (
+    <span
+      className={clsx(ClassNames.external, 'epr-emoji-native')}
+      data-unified={unified}
+      style={style}
+    >
+      {parseNativeEmoji(unified)}
+    </span>
+  );
+}

package/src/components/emoji/ViewOnlyEmoji.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+import {
+  emojiByUnified,
+  emojiName,
+  emojiUrlByUnified
+} from '../../dataUtils/emojiSelectors';
+import { isCustomEmoji } from '../../typeRefinements/typeRefinements';
+import { EmojiStyle } from '../../types/exposedTypes';
+import { useEmojisThatFailedToLoadState } from '../context/PickerContext';
+
+import { BaseEmojiProps } from './BaseEmojiProps';
+import { EmojiImg } from './EmojiImg';
+import { NativeEmoji } from './NativeEmoji';
+
+export function ViewOnlyEmoji({
+  emoji,
+  unified,
+  emojiStyle,
+  size,
+  lazyLoad,
+  getEmojiUrl = emojiUrlByUnified
+}: BaseEmojiProps) {
+  const [, setEmojisThatFailedToLoad] = useEmojisThatFailedToLoadState();
+
+  const style = {} as React.CSSProperties;
+  if (size) {
+    style.width = style.height = style.fontSize = `${size}px`;
+  }
+
+  const emojiToRender = emoji ? emoji : emojiByUnified(unified);
+
+  if (!emojiToRender) {
+    return null;
+  }
+
+  if (isCustomEmoji(emojiToRender)) {
+    return (
+      <EmojiImg
+        style={style}
+        emojiName={unified}
+        emojiStyle={emojiStyle}
+        lazyLoad={lazyLoad}
+        imgUrl={emojiToRender.imgUrl}
+        onError={onError}
+      />
+    );
+  }
+
+  return (
+    <>
+      {emojiStyle === EmojiStyle.NATIVE ? (
+        <NativeEmoji unified={unified} style={style} />
+      ) : (
+        <EmojiImg
+          style={style}
+          emojiName={emojiName(emojiToRender)}
+          emojiStyle={emojiStyle}
+          lazyLoad={lazyLoad}
+          imgUrl={getEmojiUrl(unified, emojiStyle)}
+          onError={onError}
+        />
+      )}
+    </>
+  );
+
+  function onError() {
+    setEmojisThatFailedToLoad(prev => new Set(prev).add(unified));
+  }
+}

package/src/components/footer/Preview.tsx

@@ -16,9 +16,9 @@ import { useIsSkinToneInPreview } from '../../hooks/useShouldShowSkinTonePicker'
 import Flex from '../Layout/Flex';
 import Space from '../Layout/Space';
 import { useEmojiVariationPickerState } from '../context/PickerContext';
-import { ViewOnlyEmoji } from '../emoji/Emoji';
 import './Preview.css';
 import { SkinTonePickerMenu } from '../header/SkinTonePicker';
+import { ViewOnlyEmoji } from '../emoji/ViewOnlyEmoji';
 
 export function Preview() {
   const previewConfig = usePreviewConfig();

package/src/components/navigation/CategoryNavigation.css

@@ -87,6 +87,9 @@ aside.EmojiPickerReact.epr-main:has(input:placeholder-shown) .epr-category-nav {
 .EmojiPickerReact button.epr-cat-btn.epr-icn-suggested {
   background-position-x: calc(var(--epr-category-navigation-button-size) * -8);
 }
+.EmojiPickerReact button.epr-cat-btn.epr-icn-custom {
+  background-position-x: calc(var(--epr-category-navigation-button-size) * -9);
+}
 .EmojiPickerReact button.epr-cat-btn.epr-icn-activities {
   background-position-x: calc(var(--epr-category-navigation-button-size) * -4);
 }

package/src/components/navigation/CategoryNavigation.tsx

@@ -12,6 +12,8 @@ import { useCategoriesConfig } from '../../config/useConfig';
 import { useActiveCategoryScrollDetection } from '../../hooks/useActiveCategoryScrollDetection';
 import useIsSearchMode from '../../hooks/useIsSearchMode';
 import { useScrollCategoryIntoView } from '../../hooks/useScrollCategoryIntoView';
+import { useShouldHideCustomEmojis } from '../../hooks/useShouldHideCustomEmojis';
+import { isCustomCategory } from '../../typeRefinements/typeRefinements';
 import { Button } from '../atoms/Button';
 import { useCategoryNavigationRef } from '../context/ElementRefContext';
 
@@ -23,11 +25,17 @@ export function CategoryNavigation() {
 
   const categoriesConfig = useCategoriesConfig();
   const CategoryNavigationRef = useCategoryNavigationRef();
+  const hideCustomCategory = useShouldHideCustomEmojis();
 
   return (
     <div className="epr-category-nav" ref={CategoryNavigationRef}>
       {categoriesConfig.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
+
+        if (isCustomCategory(categoryConfig) && hideCustomCategory) {
+          return null;
+        }
+
         return (
           <Button
             tabIndex={isSearchMode ? -1 : 0}

package/src/config/categoryConfig.ts

@@ -4,6 +4,7 @@ export { Categories };
 
 const categoriesOrdered: Categories[] = [
   Categories.SUGGESTED,
+  Categories.CUSTOM,
   Categories.SMILEYS_PEOPLE,
   Categories.ANIMALS_NATURE,
   Categories.FOOD_DRINK,
@@ -19,11 +20,20 @@ export const SuggestedRecent: CategoryConfig = {
   category: Categories.SUGGESTED
 };
 
+export type CustomCategoryConfig = {
+  category: Categories.CUSTOM;
+  name: string;
+};
+
 const configByCategory: Record<Categories, CategoryConfig> = {
   [Categories.SUGGESTED]: {
     category: Categories.SUGGESTED,
     name: 'Frequently Used'
   },
+  [Categories.CUSTOM]: {
+    category: Categories.CUSTOM,
+    name: 'Custom Emojis'
+  },
   [Categories.SMILEYS_PEOPLE]: {
     category: Categories.SMILEYS_PEOPLE,
     name: 'Smileys & People'

package/src/config/config.ts

@@ -1,5 +1,8 @@
-import { GetEmojiUrl } from '../components/emoji/Emoji';
-import { emojiUrlByUnified } from '../dataUtils/emojiSelectors';
+import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
+import {
+  addCustomEmojis,
+  emojiUrlByUnified
+} from '../dataUtils/emojiSelectors';
 import {
   EmojiClickData,
   EmojiStyle,
@@ -14,6 +17,7 @@ import {
   baseCategoriesConfig,
   mergeCategoriesConfig
 } from './categoryConfig';
+import { CustomEmoji } from './customEmojiConfig';
 
 const KNOWN_FAILING_EMOJIS = ['2640-fe0f', '2642-fe0f', '2695-fe0f'];
 
@@ -34,6 +38,8 @@ export function mergeConfig(
     suggestionMode: config.suggestedEmojisMode
   });
 
+  addCustomEmojis(config.customEmojis ?? []);
+
   const skinTonePickerLocation = config.searchDisabled
     ? SkinTonePickerLocation.PREVIEW
     : config.skinTonePickerLocation;
@@ -50,6 +56,7 @@ export function basePickerConfig(): PickerConfigInternal {
   return {
     autoFocusSearch: true,
     categories: baseCategoriesConfig(),
+    customEmojis: [],
     defaultSkinTone: SkinTones.NEUTRAL,
     emojiStyle: EmojiStyle.APPLE,
     emojiVersion: null,
@@ -99,6 +106,7 @@ export type PickerConfigInternal = {
   searchDisabled: boolean;
   skinTonePickerLocation: SkinTonePickerLocation;
   unicodeToHide: Set<string>;
+  customEmojis: CustomEmoji[];
 };
 
 export type PreviewConfig = {

package/src/config/customEmojiConfig.ts

@@ -0,0 +1,7 @@
+import { EmojiProperties } from '../dataUtils/DataTypes';
+
+export type CustomEmoji = {
+  names: string[];
+  [EmojiProperties.imgUrl]: string;
+  id: string;
+};

package/src/config/useConfig.ts

@@ -13,14 +13,15 @@ import { CategoriesConfig } from './categoryConfig';
 import {
   DEFAULT_SEARCH_PLACEHOLDER,
   PickerDimensions,
-  PreviewConfig,
+  PreviewConfig
 } from './config';
+import { CustomEmoji } from './customEmojiConfig';
 
 export function useSearchPlaceHolderConfig(): string {
   const { searchPlaceHolder, searchPlaceholder } = usePickerConfig();
   return (
     [searchPlaceHolder, searchPlaceholder].find(
-      (p) => p !== DEFAULT_SEARCH_PLACEHOLDER
+      p => p !== DEFAULT_SEARCH_PLACEHOLDER
     ) ?? DEFAULT_SEARCH_PLACEHOLDER
   );
 }
@@ -50,6 +51,11 @@ export function useCategoriesConfig(): CategoriesConfig {
   return categories;
 }
 
+export function useCustomEmojisConfig(): CustomEmoji[] {
+  const { customEmojis } = usePickerConfig();
+  return customEmojis;
+}
+
 export function useOnEmojiClickConfig(): (
   emoji: EmojiClickData,
   event: MouseEvent