emoji-picker-react 4.17.4 → 4.18.0

package/src/components/header/Search/BtnClearSearch.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import {
   commonInteractionStyles,
   darkMode,
-  stylesheet
+  stylesheet,
 } from '../../../Stylesheet/stylesheet';
 import { useSearchClearButtonLabelConfig } from '../../../config/useConfig';
 import { useClearSearch } from '../../../hooks/useFilter';
@@ -20,7 +20,7 @@ export function BtnClearSearch() {
     <Button
       className={cx(
         styles.btnClearSearch,
-        commonInteractionStyles.visibleOnSearchOnly
+        commonInteractionStyles.visibleOnSearchOnly,
       )}
       onClick={clearSearch}
       aria-label={searchClearButtonLabel}
@@ -34,9 +34,9 @@ export function BtnClearSearch() {
 const HoverDark = {
   ':hover': {
     '> .epr-icn-clear-search': {
-      backgroundPositionY: '-60px'
-    }
-  }
+      backgroundPositionY: '-60px',
+    },
+  },
 };
 
 const styles = stylesheet.create({
@@ -54,11 +54,11 @@ const styles = stylesheet.create({
     padding: '0',
     borderRadius: '50%',
     ':hover': {
-      background: 'var(--epr-hover-bg-color)'
+      background: 'var(--epr-hover-bg-color)',
     },
     ':focus': {
-      background: 'var(--epr-hover-bg-color)'
-    }
+      background: 'var(--epr-hover-bg-color)',
+    },
   },
   icnClearnSearch: {
     '.': 'epr-icn-clear-search',
@@ -69,14 +69,14 @@ const styles = stylesheet.create({
     width: '20px',
     backgroundImage: `url(${SVGTimes})`,
     ':hover': {
-      backgroundPositionY: '-20px'
+      backgroundPositionY: '-20px',
     },
     ':focus': {
-      backgroundPositionY: '-20px'
-    }
+      backgroundPositionY: '-20px',
+    },
   },
   ...darkMode('icnClearnSearch', {
-    backgroundPositionY: '-40px'
+    backgroundPositionY: '-40px',
   }),
-  ...darkMode('btnClearSearch', HoverDark)
+  ...darkMode('btnClearSearch', HoverDark),
 });

package/src/components/header/Search/IcnSearch.tsx

@@ -22,9 +22,9 @@ const styles = stylesheet.create({
     backgroundRepeat: 'no-repeat',
     backgroundPosition: '0 0',
     backgroundSize: '20px',
-    backgroundImage: `url(${SVGMagnifier})`
+    backgroundImage: `url(${SVGMagnifier})`,
   },
   ...darkMode('icnSearch', {
-    backgroundPositionY: '-20px'
-  })
+    backgroundPositionY: '-20px',
+  }),
 });

package/src/components/header/Search/Search.tsx

@@ -5,7 +5,7 @@ import { darkMode, stylesheet } from '../../../Stylesheet/stylesheet';
 import {
   useAutoFocusSearchConfig,
   useSearchDisabledConfig,
-  useSearchPlaceHolderConfig
+  useSearchPlaceHolderConfig,
 } from '../../../config/useConfig';
 import { useCloseAllOpenToggles } from '../../../hooks/useCloseAllOpenToggles';
 import { useFilter } from '../../../hooks/useFilter';
@@ -58,7 +58,7 @@ export function Search() {
         type="text"
         aria-controls="epr-search-id"
         placeholder={placeholder}
-        onChange={event => {
+        onChange={(event) => {
           onChange(event?.target?.value ?? value);
         }}
         ref={SearchInputRef}
@@ -83,13 +83,13 @@ export function Search() {
 const styles = stylesheet.create({
   overlay: {
     padding: 'var(--epr-header-padding)',
-    zIndex: 'var(--epr-header-overlay-z-index)'
+    zIndex: 'var(--epr-header-overlay-z-index)',
   },
   searchContainer: {
     '.': 'epr-search-container',
     flex: '1',
     display: 'block',
-    minWidth: '0'
+    minWidth: '0',
   },
   visuallyHidden: {
     clip: 'rect(0 0 0 0)',
@@ -98,7 +98,7 @@ const styles = stylesheet.create({
     overflow: 'hidden',
     position: 'absolute',
     whiteSpace: 'nowrap',
-    width: '1px'
+    width: '1px',
   },
   search: {
     outline: 'none',
@@ -112,11 +112,11 @@ const styles = stylesheet.create({
     width: '100%',
     ':focus': {
       backgroundColor: 'var(--epr-search-input-bg-color-active)',
-      border: '1px solid var(--epr-search-border-color-active)'
+      border: '1px solid var(--epr-search-border-color-active)',
     },
     '::placeholder': {
-      color: 'var(--epr-search-input-placeholder-color)'
-    }
+      color: 'var(--epr-search-input-placeholder-color)',
+    },
   },
 
   btnClearSearch: {
@@ -133,11 +133,11 @@ const styles = stylesheet.create({
     padding: '0',
     borderRadius: '50%',
     ':hover': {
-      background: 'var(--epr-hover-bg-color)'
+      background: 'var(--epr-hover-bg-color)',
     },
     ':focus': {
-      background: 'var(--epr-hover-bg-color)'
-    }
+      background: 'var(--epr-hover-bg-color)',
+    },
   },
   icnClearnSearch: {
     '.': 'epr-icn-clear-search',
@@ -148,18 +148,18 @@ const styles = stylesheet.create({
     width: '20px',
     backgroundImage: `url(${SVGTimes})`,
     ':hover': {
-      backgroundPositionY: '-20px'
+      backgroundPositionY: '-20px',
     },
     ':focus': {
-      backgroundPositionY: '-20px'
-    }
+      backgroundPositionY: '-20px',
+    },
   },
   ...darkMode('icnClearnSearch', {
-    backgroundPositionY: '-40px'
+    backgroundPositionY: '-40px',
   }),
   ...darkMode('btnClearSearch', {
     ':hover > .epr-icn-clear-search': {
-      backgroundPositionY: '-60px'
-    }
-  })
+      backgroundPositionY: '-60px',
+    },
+  }),
 });

package/src/components/header/SkinTonePicker/BtnSkinToneVariation.tsx

@@ -20,7 +20,7 @@ export function BtnSkinToneVariation({
   onClick,
   isActive,
   skinToneVariation,
-  style
+  style,
 }: Props) {
   return (
     <Button
@@ -30,7 +30,7 @@ export function BtnSkinToneVariation({
         `epr-tone-${skinToneVariation}`,
         styles.tone,
         !isOpen && styles.closedTone,
-        isActive && styles.active
+        isActive && styles.active,
       )}
       aria-pressed={isActive}
       aria-label={`Skin tone ${skinTonesNamed[skinToneVariation as SkinTones]}`}
@@ -41,12 +41,12 @@ export function BtnSkinToneVariation({
 const styles = stylesheet.create({
   closedTone: {
     opacity: '0',
-    zIndex: '0'
+    zIndex: '0',
   },
   active: {
     '.': 'epr-active',
     zIndex: '1',
-    opacity: '1'
+    opacity: '1',
   },
   tone: {
     '.': 'epr-tone',
@@ -62,28 +62,29 @@ const styles = stylesheet.create({
     border: '1px solid var(--epr-skin-tone-outer-border-color)',
     boxShadow: 'inset 0px 0px 0 1px var(--epr-skin-tone-inner-border-color)',
     ':hover': {
-      boxShadow: '0 0 0 3px var(--epr-active-skin-hover-color), inset 0px 0px 0 1px var(--epr-skin-tone-inner-border-color)'
+      boxShadow:
+        '0 0 0 3px var(--epr-active-skin-hover-color), inset 0px 0px 0 1px var(--epr-skin-tone-inner-border-color)',
     },
     ':focus': {
-      boxShadow: '0 0 0 3px var(--epr-focus-bg-color)'
+      boxShadow: '0 0 0 3px var(--epr-focus-bg-color)',
     },
     '&.epr-tone-neutral': {
-      backgroundColor: '#ffd225'
+      backgroundColor: '#ffd225',
     },
     '&.epr-tone-1f3fb': {
-      backgroundColor: '#ffdfbd'
+      backgroundColor: '#ffdfbd',
     },
     '&.epr-tone-1f3fc': {
-      backgroundColor: '#e9c197'
+      backgroundColor: '#e9c197',
     },
     '&.epr-tone-1f3fd': {
-      backgroundColor: '#c88e62'
+      backgroundColor: '#c88e62',
     },
     '&.epr-tone-1f3fe': {
-      backgroundColor: '#a86637'
+      backgroundColor: '#a86637',
     },
     '&.epr-tone-1f3ff': {
-      backgroundColor: '#60463a'
-    }
-  }
+      backgroundColor: '#60463a',
+    },
+  },
 });

package/src/components/header/SkinTonePicker/SkinTonePicker.tsx

@@ -6,7 +6,7 @@ import { ClassNames } from '../../../DomUtils/classNames';
 import { stylesheet } from '../../../Stylesheet/stylesheet';
 import {
   useOnSkinToneChangeConfig,
-  useSkinTonesDisabledConfig
+  useSkinTonesDisabledConfig,
 } from '../../../config/useConfig';
 import skinToneVariations from '../../../data/skinToneVariations';
 import { useCloseAllOpenToggles } from '../../../hooks/useCloseAllOpenToggles';
@@ -16,7 +16,7 @@ import Relative from '../../Layout/Relative';
 import { useSkinTonePickerRef } from '../../context/ElementRefContext';
 import {
   useActiveSkinToneState,
-  useSkinToneFanOpenState
+  useSkinToneFanOpenState,
 } from '../../context/PickerContext';
 
 import { BtnSkinToneVariation } from './BtnSkinToneVariation';
@@ -38,7 +38,7 @@ export function SkinTonePickerMenu() {
 }
 
 export function SkinTonePicker({
-  direction = SkinTonePickerDirection.HORIZONTAL
+  direction = SkinTonePickerDirection.HORIZONTAL,
 }: Props) {
   const SkinTonePickerRef = useSkinTonePickerRef();
   const isDisabled = useSkinTonesDisabledConfig();
@@ -64,7 +64,7 @@ export function SkinTonePicker({
         styles.skinTones,
         vertical && styles.vertical,
         isOpen && styles.open,
-        vertical && isOpen && styles.verticalShadow
+        vertical && isOpen && styles.verticalShadow,
       )}
       style={
         vertical
@@ -86,8 +86,8 @@ export function SkinTonePicker({
                   vertical
                     ? `translateY(-${i * (isOpen ? ITEM_SIZE : 0)}px)`
                     : `translateX(-${i * (isOpen ? ITEM_SIZE : 0)}px)`,
-                  isOpen && active && 'scale(1.3)'
-                )
+                  isOpen && active && 'scale(1.3)',
+                ),
               }}
               isActive={active}
               onClick={() => {
@@ -110,43 +110,43 @@ export function SkinTonePicker({
 
 export enum SkinTonePickerDirection {
   VERTICAL = ClassNames.vertical,
-  HORIZONTAL = ClassNames.horizontal
+  HORIZONTAL = ClassNames.horizontal,
 }
 
 const styles = stylesheet.create({
   skinTones: {
     '.': 'epr-skin-tones',
     '--': {
-      '--epr-skin-tone-size': '15px'
+      '--epr-skin-tone-size': '15px',
     },
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
     transition: 'all 0.3s ease-in-out',
-    padding: '10px 0'
+    padding: '10px 0',
   },
   vertical: {
     padding: '9px',
     alignItems: 'flex-end',
     flexDirection: 'column',
     borderRadius: '6px',
-    border: '1px solid var(--epr-bg-color)'
+    border: '1px solid var(--epr-bg-color)',
   },
   verticalShadow: {
-    boxShadow: '0px 0 7px var(--epr-picker-border-color)'
+    boxShadow: '0px 0 7px var(--epr-picker-border-color)',
   },
   open: {
     // @ts-ignore - backdropFilter is not recognized.
     backdropFilter: 'blur(5px)',
     background: 'var(--epr-skin-tone-picker-menu-color)',
     '.epr-active': {
-      border: '1px solid var(--epr-active-skin-tone-indicator-border-color)'
-    }
+      border: '1px solid var(--epr-active-skin-tone-indicator-border-color)',
+    },
   },
   select: {
     '.': 'epr-skin-tone-select',
     position: 'relative',
     width: 'var(--epr-skin-tone-size)',
-    height: 'var(--epr-skin-tone-size)'
-  }
+    height: 'var(--epr-skin-tone-size)',
+  },
 });

package/src/components/main/PickerMain.tsx

@@ -6,7 +6,7 @@ import { stylesheet } from '../../Stylesheet/stylesheet';
 import {
   useClassNameConfig,
   useStyleConfig,
-  useThemeConfig
+  useThemeConfig,
 } from '../../config/useConfig';
 import useIsSearchMode from '../../hooks/useIsSearchMode';
 import { useKeyboardNavigation } from '../../hooks/useKeyboardNavigation';
@@ -15,7 +15,7 @@ import { Theme } from '../../types/exposedTypes';
 import { usePickerMainRef } from '../context/ElementRefContext';
 import {
   PickerContextProvider,
-  useReactionsModeState
+  useReactionsModeState,
 } from '../context/PickerContext';
 
 type Props = Readonly<{
@@ -59,15 +59,15 @@ function PickerRootElement({ children }: RootProps) {
         theme === Theme.DARK && styles.darkTheme,
         theme === Theme.AUTO && styles.autoThemeDark,
         {
-          [ClassNames.searchActive]: searchModeActive
+          [ClassNames.searchActive]: searchModeActive,
         },
         reactionsMode && styles.reactionsMenu,
-        className
+        className,
       )}
       ref={PickerMainRef}
       style={{
         ...styleProps,
-        ...(!reactionsMode && { height, width })
+        ...(!reactionsMode && { height, width }),
       }}
     >
       {children}
@@ -100,7 +100,7 @@ const DarkTheme = {
   '--epr-skin-tone-outer-border-color':
     'var(--epr-dark-skin-tone-outer-border-color)',
   '--epr-skin-tone-inner-border-color':
-    'var(--epr-dark-skin-tone-inner-border-color)'
+    'var(--epr-dark-skin-tone-inner-border-color)',
 };
 
 const styles = stylesheet.create({
@@ -118,8 +118,8 @@ const styles = stylesheet.create({
     transition: 'height 0.3s ease-in-out, background-color 0.1s ease-in-out',
     '*': {
       boxSizing: 'border-box',
-      fontFamily: 'sans-serif'
-    }
+      fontFamily: 'sans-serif',
+    },
   },
   baseVariables: {
     '--': {
@@ -218,18 +218,18 @@ const styles = stylesheet.create({
       '--epr-dark-skin-tone-picker-menu-color': '#22222295',
       '--epr-dark-skin-tone-outer-border-color':
         'var(--epr-dark-picker-border-color)',
-      '--epr-dark-skin-tone-inner-border-color': '#00000000'
-    }
+      '--epr-dark-skin-tone-inner-border-color': '#00000000',
+    },
   },
   autoThemeDark: {
     '.': ClassNames.autoTheme,
     '@media (prefers-color-scheme: dark)': {
-      '--': DarkTheme
-    }
+      '--': DarkTheme,
+    },
   },
   darkTheme: {
     '.': ClassNames.darkTheme,
-    '--': DarkTheme
+    '--': DarkTheme,
   },
   reactionsMenu: {
     '.': 'epr-reactions',
@@ -239,7 +239,7 @@ const styles = stylesheet.create({
     // @ts-ignore - backdropFilter is not recognized.
     backdropFilter: 'blur(8px)',
     '--': {
-      '--epr-picker-border-radius': '50px'
-    }
-  }
+      '--epr-picker-border-radius': '50px',
+    },
+  },
 });

package/src/components/navigation/CategoryButton.tsx

@@ -5,7 +5,7 @@ import { ClassNames } from '../../DomUtils/classNames';
 import {
   commonInteractionStyles,
   darkMode,
-  stylesheet
+  stylesheet,
 } from '../../Stylesheet/stylesheet';
 import { categoryNameFromCategoryConfig } from '../../config/categoryConfig';
 import { CategoryConfig } from '../../types/exposedTypes';
@@ -19,6 +19,7 @@ type Props = {
   allowNavigation: boolean;
   onClick: () => void;
   categoryConfig: CategoryConfig;
+  customIcon?: React.ReactNode;
 };
 
 export function CategoryButton({
@@ -26,42 +27,49 @@ export function CategoryButton({
   category,
   allowNavigation,
   categoryConfig,
-  onClick
+  onClick,
+  customIcon,
 }: Props) {
+  // Priority: categoryConfig.icon > customIcon prop (from categoryIcons)
+  const icon = categoryConfig.icon ?? customIcon;
+  const hasCustomIcon = icon != null;
+
   return (
     <Button
       tabIndex={allowNavigation ? 0 : -1}
       className={cx(
         styles.catBtn,
         commonInteractionStyles.categoryBtn,
-        `epr-icn-${category}`,
+        hasCustomIcon ? styles.customIcon : `epr-icn-${category}`,
         {
-          [ClassNames.active]: isActiveCategory
-        }
+          [ClassNames.active]: isActiveCategory,
+        },
       )}
       onClick={onClick}
       aria-label={categoryNameFromCategoryConfig(categoryConfig)}
       aria-selected={isActiveCategory}
       role="tab"
       aria-controls="epr-category-nav-id"
-    />
+    >
+      {hasCustomIcon ? icon : null}
+    </Button>
   );
 }
 
 const DarkActivePositionY = {
-  backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)'
+  backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 3)',
 };
 const DarkPositionY = {
-  backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 2)'
+  backgroundPositionY: 'calc(var(--epr-category-navigation-button-size) * 2)',
 };
 
 const DarkInactivePosition = {
   ':not(.epr-search-active)': {
     catBtn: {
       ':hover': DarkActivePositionY,
-      '&.epr-active': DarkActivePositionY
-    }
-  }
+      '&.epr-active': DarkActivePositionY,
+    },
+  },
 };
 
 const styles = stylesheet.create({
@@ -84,53 +92,60 @@ const styles = stylesheet.create({
       right: '-2px',
       bottom: '-2px',
       border: '2px solid var(--epr-category-icon-active-color)',
-      borderRadius: '50%'
+      borderRadius: '50%',
     },
     '&.epr-icn-suggested': {
       backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -8)'
+        'calc(var(--epr-category-navigation-button-size) * -8)',
     },
     '&.epr-icn-custom': {
       backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -9)'
+        'calc(var(--epr-category-navigation-button-size) * -9)',
     },
     '&.epr-icn-activities': {
       backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -4)'
+        'calc(var(--epr-category-navigation-button-size) * -4)',
     },
     '&.epr-icn-animals_nature': {
       backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -1)'
+        'calc(var(--epr-category-navigation-button-size) * -1)',
     },
     '&.epr-icn-flags': {
       backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -7)'
+        'calc(var(--epr-category-navigation-button-size) * -7)',
     },
     '&.epr-icn-food_drink': {
       backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -2)'
+        'calc(var(--epr-category-navigation-button-size) * -2)',
     },
     '&.epr-icn-objects': {
       backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -5)'
+        'calc(var(--epr-category-navigation-button-size) * -5)',
     },
     '&.epr-icn-smileys_people': {
-      backgroundPositionX: '0px'
+      backgroundPositionX: '0px',
     },
     '&.epr-icn-symbols': {
       backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -6)'
+        'calc(var(--epr-category-navigation-button-size) * -6)',
     },
     '&.epr-icn-travel_places': {
       backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -3)'
-    }
+        'calc(var(--epr-category-navigation-button-size) * -3)',
+    },
+  },
+  customIcon: {
+    '.': 'epr-cat-btn-custom-icon',
+    backgroundImage: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   ...darkMode('catBtn', DarkPositionY),
   '.epr-dark-theme': {
-    ...DarkInactivePosition
+    ...DarkInactivePosition,
   },
   '.epr-auto-theme': {
-    ...DarkInactivePosition
-  }
+    ...DarkInactivePosition,
+  },
 });

package/src/components/navigation/CategoryNavigation.tsx

@@ -4,12 +4,16 @@ import { useState } from 'react';
 
 import { stylesheet } from '../../Stylesheet/stylesheet';
 import { categoryFromCategoryConfig } from '../../config/categoryConfig';
-import { useCategoriesConfig } from '../../config/useConfig';
+import {
+  useCategoriesConfig,
+  useCategoryIconsConfig,
+} 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 { Categories } from '../../types/exposedTypes';
 import { useCategoryNavigationRef } from '../context/ElementRefContext';
 import { useVisibleCategoriesState } from '../context/PickerContext';
 
@@ -23,6 +27,7 @@ export function CategoryNavigation() {
   const isSearchMode = useIsSearchMode();
 
   const categoriesConfig = useCategoriesConfig();
+  const categoryIcons = useCategoryIconsConfig();
   const CategoryNavigationRef = useCategoryNavigationRef();
   const hideCustomCategory = useShouldHideCustomEmojis();
 
@@ -34,7 +39,7 @@ export function CategoryNavigation() {
       id="epr-category-nav-id"
       ref={CategoryNavigationRef}
     >
-      {categoriesConfig.map(categoryConfig => {
+      {categoriesConfig.map((categoryConfig) => {
         const category = categoryFromCategoryConfig(categoryConfig);
         const isActiveCategory = category === activeCategory;
 
@@ -51,6 +56,7 @@ export function CategoryNavigation() {
             isActiveCategory={isActiveCategory}
             allowNavigation={allowNavigation}
             categoryConfig={categoryConfig}
+            customIcon={categoryIcons[category as Categories]}
             onClick={() => {
               scrollCategoryIntoView(category);
               setTimeout(() => {
@@ -70,20 +76,20 @@ const styles = stylesheet.create({
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-around',
-    padding: 'var(--epr-header-padding)'
+    padding: 'var(--epr-header-padding)',
   },
   '.epr-search-active': {
     nav: {
       opacity: '0.3',
       cursor: 'default',
-      pointerEvents: 'none'
-    }
+      pointerEvents: 'none',
+    },
   },
   '.epr-main:has(input:not(:placeholder-shown))': {
     nav: {
       opacity: '0.3',
       cursor: 'default',
-      pointerEvents: 'none'
-    }
-  }
+      pointerEvents: 'none',
+    },
+  },
 });

package/src/config/config.ts

@@ -4,6 +4,7 @@ import { DEFAULT_REACTIONS } from '../components/Reactions/DEFAULT_REACTIONS';
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import { emojiUrlByUnified } from '../dataUtils/emojiUtils';
 import {
+  CategoryIcons,
   EmojiClickData,
   EmojiData,
   EmojiStyle,
@@ -113,6 +114,7 @@ export function basePickerConfig(): PickerConfigInternal {
     allowExpandReactions: true,
     hiddenEmojis: [],
     emojiData: undefined,
+    categoryIcons: {},
   };
 }
 
@@ -145,6 +147,7 @@ export type PickerConfigInternal = {
   allowExpandReactions: boolean;
   hiddenEmojis: string[];
   emojiData?: EmojiData;
+  categoryIcons: CategoryIcons;
 };
 
 export type PreviewConfig = {