emoji-picker-react 4.6.14 → 4.7.0

package/src/components/navigation/CategoryNavigation.tsx

@@ -2,25 +2,17 @@ import { cx } from 'flairup';
 import * as React from 'react';
 import { useState } from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
-import {
-  commonInteractionStyles,
-  stylesheet
-} from '../../Stylesheet/stylesheet';
-import {
-  categoryFromCategoryConfig,
-  categoryNameFromCategoryConfig
-} from '../../config/categoryConfig';
+import { stylesheet } from '../../Stylesheet/stylesheet';
+import { categoryFromCategoryConfig } from '../../config/categoryConfig';
 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';
 
-import SVGNavigation from './svg/CategoryNav.svg';
+import { CategoryButton } from './CategoryButton';
 
 export function CategoryNavigation() {
   const [activeCategory, setActiveCategory] = useState<string | null>(null);
@@ -48,26 +40,19 @@ export function CategoryNavigation() {
           return null;
         }
 
+        const allowNavigation = !isSearchMode && !isActiveCategory;
+
         return (
-          <Button
-            tabIndex={isSearchMode || isActiveCategory ? -1 : 0}
-            className={cx(
-              styles.catBtn,
-              commonInteractionStyles.categoryBtn,
-              `epr-icn-${category}`,
-              {
-                [ClassNames.active]: isActiveCategory
-              }
-            )}
+          <CategoryButton
             key={category}
+            category={category}
+            isActiveCategory={isActiveCategory}
+            allowNavigation={allowNavigation}
+            categoryConfig={categoryConfig}
             onClick={() => {
               setActiveCategory(category);
               scrollCategoryIntoView(category);
             }}
-            aria-label={categoryNameFromCategoryConfig(categoryConfig)}
-            aria-selected={isActiveCategory}
-            role="tab"
-            aria-controls="epr-category-nav-id"
           />
         );
       })}
@@ -96,109 +81,5 @@ const styles = stylesheet.create({
       cursor: 'default',
       pointerEvents: 'none'
     }
-  },
-  catBtn: {
-    '.': 'epr-cat-btn',
-    display: 'inline-block',
-    transition: 'opacity 0.2s ease-in-out',
-    position: 'relative',
-    height: 'var(--epr-category-navigation-button-size)',
-    width: 'var(--epr-category-navigation-button-size)',
-    backgroundSize: 'calc(var(--epr-category-navigation-button-size) * 10)',
-    outline: 'none',
-    backgroundPosition: '0 0',
-    backgroundImage: `url(${SVGNavigation})`,
-    ':focus:before': {
-      content: '',
-      position: 'absolute',
-      top: '-2px',
-      left: '-2px',
-      right: '-2px',
-      bottom: '-2px',
-      border: '2px solid var(--epr-category-icon-active-color)',
-      borderRadius: '50%'
-    },
-    // @ts-ignore
-    '&.epr-icn-suggested': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -8)'
-    },
-    '&.epr-icn-custom': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -9)'
-    },
-    '&.epr-icn-activities': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -4)'
-    },
-    '&.epr-icn-animals_nature': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -1)'
-    },
-    '&.epr-icn-flags': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -7)'
-    },
-    '&.epr-icn-food_drink': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -2)'
-    },
-    '&.epr-icn-objects': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -5)'
-    },
-    '&.epr-icn-smileys_people': {
-      backgroundPositionX: '0px'
-    },
-    '&.epr-icn-symbols': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -6)'
-    },
-    '&.epr-icn-travel_places': {
-      backgroundPositionX:
-        'calc(var(--epr-category-navigation-button-size) * -3)'
-    }
-  },
-  '.epr-dark-theme': {
-    catBtn: {
-      backgroundPositionY:
-        'calc(var(--epr-category-navigation-button-size) * 2)'
-    },
-    ':not(.epr-search-active)': {
-      // @ts-expect-error - need to fix this
-      catBtn: {
-        ':hover': {
-          backgroundPositionY:
-            'calc(var(--epr-category-navigation-button-size) * 3)'
-        },
-        '&.epr-active': {
-          backgroundPositionY:
-            'calc(var(--epr-category-navigation-button-size) * 3)'
-        }
-      }
-    }
-  },
-  '.epr-auto-theme': {
-    catBtn: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPositionY:
-          'calc(var(--epr-category-navigation-button-size) * 2)'
-      }
-    },
-    ':not(.epr-search-active)': {
-      catBtn: {
-        '@media (prefers-color-scheme: dark)': {
-          ':hover': {
-            backgroundPositionY:
-              'calc(var(--epr-category-navigation-button-size) * 3)'
-          },
-          // @ts-ignore
-          '&.epr-active': {
-            backgroundPositionY:
-              'calc(var(--epr-category-navigation-button-size) * 3)'
-          }
-        }
-      }
-    }
   }
 });

package/src/config/config.ts

@@ -1,5 +1,6 @@
-import * as React from 'react'
+import * as React from 'react';
 
+import { DEFAULT_REACTIONS } from '../components/Reactions/DEFAULT_REACTIONS';
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import {
   setCustomEmojis,
@@ -85,7 +86,9 @@ export function basePickerConfig(): PickerConfigInternal {
     suggestedEmojisMode: SuggestionMode.FREQUENT,
     theme: Theme.LIGHT,
     unicodeToHide: new Set<string>(KNOWN_FAILING_EMOJIS),
-    width: 350
+    width: 350,
+    reactionsDefaultOpen: false,
+    reactions: DEFAULT_REACTIONS
   };
 }
 
@@ -111,6 +114,8 @@ export type PickerConfigInternal = {
   skinTonePickerLocation: SkinTonePickerLocation;
   unicodeToHide: Set<string>;
   customEmojis: CustomEmoji[];
+  reactionsDefaultOpen: boolean;
+  reactions: string[];
 };
 
 export type PreviewConfig = {

package/src/config/useConfig.ts

@@ -100,6 +100,11 @@ export function useStyleConfig(): React.CSSProperties {
   return { height: getDimension(height), width: getDimension(width), ...style };
 }
 
+export function useReactionsOpenConfig(): boolean {
+  const { reactionsDefaultOpen } = usePickerConfig();
+  return reactionsDefaultOpen;
+}
+
 export function useEmojiVersionConfig(): string | null {
   const { emojiVersion } = usePickerConfig();
   return emojiVersion;
@@ -120,6 +125,11 @@ export function useUnicodeToHide() {
   return unicodeToHide;
 }
 
+export function useReactionsConfig(): string[] {
+  const { reactions } = usePickerConfig();
+  return reactions;
+}
+
 export function useGetEmojiUrlConfig(): (
   unified: string,
   style: EmojiStyle
@@ -139,9 +149,12 @@ export function useSearchResultsConfig(searchResultsCount: number): string {
   const isPlural = searchResultsCount > 1;
 
   if (hasResults) {
-    return isPlural ?
-      SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND.replace('%n', searchResultsCount.toString())
-        : SEARCH_RESULTS_ONE_RESULT_FOUND;
+    return isPlural
+      ? SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND.replace(
+          '%n',
+          searchResultsCount.toString()
+        )
+      : SEARCH_RESULTS_ONE_RESULT_FOUND;
   }
 
   return SEARCH_RESULTS_NO_RESULTS_FOUND;