emoji-picker-react 4.6.15 → 4.7.1

package/dist/hooks/useMouseDownHandlers.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
 import { NullableElement } from '../DomUtils/selectors';
-export declare function useMouseDownHandlers(BodyRef: React.MutableRefObject<NullableElement>): void;
+import { MOUSE_EVENT_SOURCE } from '../config/useConfig';
+export declare function useMouseDownHandlers(ContainerRef: React.MutableRefObject<NullableElement>, mouseEventSource: MOUSE_EVENT_SOURCE): void;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.6.15",
+  "version": "4.7.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -12,7 +12,10 @@
     "emoji-picker",
     "react-emoji-picker",
     "emoji",
-    "emojis"
+    "emojis",
+    "reactions",
+    "reactions-picker",
+    "emoji-reactions"
   ],
   "engines": {
     "node": ">=10"

package/src/EmojiPickerReact.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
 
+import { Reactions } from './components/Reactions/Reactions';
 import { Body } from './components/body/Body';
 import { ElementRefContextProvider } from './components/context/ElementRefContext';
 import { PickerConfigProvider } from './components/context/PickerConfigContext';
+import { useReactionsModeState } from './components/context/PickerContext';
 import { Preview } from './components/footer/Preview';
 import { Header } from './components/header/Header';
 import PickerMain from './components/main/PickerMain';
@@ -14,21 +16,44 @@ function EmojiPicker(props: PickerProps) {
     <ElementRefContextProvider>
       <PickerConfigProvider {...props}>
         <PickerMain>
-          <Header />
-          <Body />
-          <Preview />
+          <ContentControl />
         </PickerMain>
       </PickerConfigProvider>
     </ElementRefContextProvider>
   );
 }
 
+function ContentControl() {
+  const [reactionsDefaultOpen] = useReactionsModeState();
+  const [renderAll, setRenderAll] = React.useState(!reactionsDefaultOpen);
+
+  React.useEffect(() => {
+    if (!renderAll) {
+      setRenderAll(true);
+    }
+  }, []);
+
+  return (
+    <>
+      <Reactions />
+      {renderAll ? (
+        <>
+          <Header />
+          <Body />
+          <Preview />
+        </>
+      ) : null}
+    </>
+  );
+}
+
 // eslint-disable-next-line complexity
 export default React.memo(EmojiPicker, (prev, next) => {
   const prevCustomEmojis = prev.customEmojis ?? [];
   const nextCustomEmojis = next.customEmojis ?? [];
   return (
     prev.emojiVersion === next.emojiVersion &&
+    prev.reactionsDefaultOpen === next.reactionsDefaultOpen &&
     prev.searchPlaceHolder === next.searchPlaceHolder &&
     prev.searchPlaceholder === next.searchPlaceholder &&
     prev.defaultSkinTone === next.defaultSkinTone &&

package/src/Stylesheet/stylesheet.tsx

@@ -10,7 +10,8 @@ const hidden = {
   display: 'none',
   opacity: '0',
   pointerEvents: 'none',
-  visibility: 'hidden'
+  visibility: 'hidden',
+  overflow: 'hidden'
 };
 
 export const commonStyles = stylesheet.create({
@@ -53,7 +54,18 @@ export const commonInteractionStyles = stylesheet.create({
       visibleOnSearchOnly: hidden
     }
   },
-
+  hiddenOnReactions: {
+    transition: 'all 0.5s ease-in-out'
+  },
+  '.epr-reactions': {
+    hiddenOnReactions: {
+      height: '0px',
+      width: '0px',
+      opacity: '0',
+      pointerEvents: 'none',
+      overflow: 'hidden'
+    }
+  },
   '.EmojiPickerReact:not(.epr-search-active)': {
     categoryBtn: {
       ':hover': {

package/src/components/Reactions/BtnPlus.tsx

@@ -0,0 +1,78 @@
+import { cx } from 'flairup';
+import * as React from 'react';
+
+import { stylesheet } from '../../Stylesheet/stylesheet';
+import { Button } from '../atoms/Button';
+import { useReactionsModeState } from '../context/PickerContext';
+
+import Plus from './svg/plus.svg';
+
+export function BtnPlus() {
+  const [, setReactionsMode] = useReactionsModeState();
+  return (
+    <Button
+      aria-label="Show all Emojis"
+      title="Show all Emojis"
+      tabIndex={0}
+      className={cx(styles.plusSign)}
+      onClick={() => setReactionsMode(false)}
+    />
+  );
+}
+
+const styles = stylesheet.create({
+  plusSign: {
+    fontSize: '20px',
+    padding: '18px',
+    color: 'var(--epr-text-color)',
+    borderRadius: '50%',
+    textAlign: 'center',
+    lineHeight: '100%',
+    width: '20px',
+    height: '20px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    transition: 'background-color 0.1s ease-in-out',
+    ':after': {
+      content: '',
+      minWidth: '20px',
+      minHeight: '20px',
+      backgroundImage: `url(${Plus})`,
+      backgroundColor: 'transparent',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: '20px',
+      backgroundPositionY: '0'
+    },
+    ':hover': {
+      color: 'var(--epr-highlight-color)',
+      backgroundColor: 'var(--epr-hover-bg-color)',
+      // @ts-ignore
+      ':after': {
+        backgroundPositionY: '-20px'
+      }
+    },
+    ':focus': {
+      color: 'var(--epr-highlight-color)',
+      backgroundColor: 'var(--epr-hover-bg-color)',
+      // @ts-ignore
+      ':after': {
+        backgroundPositionY: '-40px'
+      }
+    }
+  },
+  '.epr-dark-theme': {
+    plusSign: {
+      ':after': { backgroundPositionY: '-40px' },
+      ':hover:after': { backgroundPositionY: '-60px' }
+    }
+  },
+  '.epr-auto-theme': {
+    plusSign: {
+      '@media (prefers-color-scheme: dark)': {
+        ':after': { backgroundPositionY: '-40px' },
+        ':hover:after': { backgroundPositionY: '-60px' }
+      }
+    }
+  }
+});

package/src/components/Reactions/DEFAULT_REACTIONS.ts

@@ -0,0 +1,9 @@
+export const DEFAULT_REACTIONS = [
+  '1f44d', // 👍
+  '2764-fe0f', // ❤️
+  '1f603', // 😃
+  '1f622', // 😢
+  '1f64f', // 🙏
+  '1f44e', // 👎
+  '1f621' // 😡
+];

package/src/components/Reactions/Reactions.tsx

@@ -0,0 +1,63 @@
+import { cx } from 'flairup';
+import * as React from 'react';
+
+import { commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
+import {
+  MOUSE_EVENT_SOURCE,
+  useEmojiStyleConfig,
+  useReactionsConfig
+} from '../../config/useConfig';
+import { DataEmoji } from '../../dataUtils/DataTypes';
+import { emojiByUnified } from '../../dataUtils/emojiSelectors';
+import { useMouseDownHandlers } from '../../hooks/useMouseDownHandlers';
+import { useReactionsRef } from '../context/ElementRefContext';
+import { useReactionsModeState } from '../context/PickerContext';
+import { ClickableEmoji } from '../emoji/Emoji';
+
+import { BtnPlus } from './BtnPlus';
+
+export function Reactions() {
+  const [reactionsOpen] = useReactionsModeState();
+  const ReactionsRef = useReactionsRef();
+  const reactions = useReactionsConfig();
+  useMouseDownHandlers(ReactionsRef, MOUSE_EVENT_SOURCE.REACTIONS);
+  const emojiStyle = useEmojiStyleConfig();
+
+  if (!reactionsOpen) {
+    return null;
+  }
+
+  return (
+    <ul
+      className={cx(styles.list, !reactionsOpen && commonStyles.hidden)}
+      ref={ReactionsRef}
+    >
+      {reactions.map(reaction => (
+        <li key={reaction}>
+          <ClickableEmoji
+            emoji={emojiByUnified(reaction) as DataEmoji}
+            emojiStyle={emojiStyle}
+            unified={reaction}
+            showVariations={false}
+            round
+          />
+        </li>
+      ))}
+      <li>
+        <BtnPlus />
+      </li>
+    </ul>
+  );
+}
+
+const styles = stylesheet.create({
+  list: {
+    listStyle: 'none',
+    margin: '0',
+    padding: '0 5px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: '100%'
+  }
+});

package/src/components/Reactions/svg/plus.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="20px" height="80px" viewBox="0 0 20 80" enable-background="new 0 0 20 80" xml:space="preserve">
+<path fill="#868686" d="M5.7,10.4c0,0.1,0.1,0.3,0.2,0.4C6,10.9,6.1,11,6.3,11h3.4v3.4c0,0.1,0.1,0.3,0.2,0.4
+	c0.1,0.1,0.2,0.2,0.4,0.2c0.3,0,0.5-0.2,0.5-0.5v-3.4h3.4c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-3.4V6.7c0-0.3-0.2-0.5-0.5-0.5
+	C9.8,6,9.6,6.2,9.6,6.5v3.4H6.2C5.9,9.9,5.7,10.1,5.7,10.4L5.7,10.4z"/>
+<path fill="#3371B7" d="M5.7,30.4c0,0.1,0.1,0.3,0.2,0.4S6.1,31,6.3,31h3.4v3.4c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2
+	c0.3,0,0.5-0.2,0.5-0.5v-3.4h3.4c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-3.4v-3.4c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v3.4H6.2
+	C5.9,29.9,5.7,30.1,5.7,30.4L5.7,30.4z"/>
+<path fill="#C0C0BF" d="M5.7,50.4c0,0.1,0.1,0.3,0.2,0.4C6,50.9,6.1,51,6.3,51h3.4v3.4c0,0.1,0.1,0.3,0.2,0.4
+	c0.1,0.1,0.2,0.2,0.4,0.2c0.3,0,0.5-0.2,0.5-0.5v-3.4h3.4c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-3.4v-3.4c0-0.3-0.2-0.5-0.5-0.5
+	s-0.5,0.2-0.5,0.5v3.4H6.2C5.9,49.9,5.7,50.1,5.7,50.4L5.7,50.4z"/>
+<path fill="#6AA9DD" d="M5.7,70.4c0,0.1,0.1,0.3,0.2,0.4S6.1,71,6.3,71h3.4v3.4c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2
+	c0.3,0,0.5-0.2,0.5-0.5v-3.4h3.4c0.3,0,0.5-0.2,0.5-0.5s-0.2-0.5-0.5-0.5h-3.4v-3.4c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v3.4H6.4
+	C5.9,69.9,5.7,70.1,5.7,70.4L5.7,70.4z"/>
+</svg>

package/src/components/body/Body.tsx

@@ -2,7 +2,11 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
-import { stylesheet } from '../../Stylesheet/stylesheet';
+import {
+  commonInteractionStyles,
+  stylesheet
+} from '../../Stylesheet/stylesheet';
+import { MOUSE_EVENT_SOURCE } from '../../config/useConfig';
 import { useOnMouseMove } from '../../hooks/useDisallowMouseMove';
 import { useMouseDownHandlers } from '../../hooks/useMouseDownHandlers';
 import { useOnScroll } from '../../hooks/useOnScroll';
@@ -14,11 +18,14 @@ import { EmojiVariationPicker } from './EmojiVariationPicker';
 export function Body() {
   const BodyRef = useBodyRef();
   useOnScroll(BodyRef);
-  useMouseDownHandlers(BodyRef);
+  useMouseDownHandlers(BodyRef, MOUSE_EVENT_SOURCE.PICKER);
   useOnMouseMove();
 
   return (
-    <div className={cx(styles.body)} ref={BodyRef}>
+    <div
+      className={cx(styles.body, commonInteractionStyles.hiddenOnReactions)}
+      ref={BodyRef}
+    >
       <EmojiVariationPicker />
       <EmojiList />
     </div>

package/src/components/context/ElementRefContext.tsx

@@ -15,6 +15,7 @@ export function ElementRefContextProvider({
   const SkinTonePickerRef = React.useRef<HTMLDivElement>(null);
   const CategoryNavigationRef = React.useRef<HTMLDivElement>(null);
   const VariationPickerRef = React.useRef<HTMLDivElement>(null);
+  const ReactionsRef = React.useRef<HTMLUListElement>(null);
 
   return (
     <ElementRefContext.Provider
@@ -25,7 +26,8 @@ export function ElementRefContextProvider({
         PickerMainRef,
         SearchInputRef,
         SkinTonePickerRef,
-        VariationPickerRef
+        VariationPickerRef,
+        ReactionsRef
       }}
     >
       {children}
@@ -45,6 +47,7 @@ type ElementRefs = {
   BodyRef: ElementRef<HTMLDivElement>;
   CategoryNavigationRef: ElementRef<HTMLDivElement>;
   VariationPickerRef: ElementRef<HTMLDivElement>;
+  ReactionsRef: ElementRef<HTMLUListElement>;
 };
 
 const ElementRefContext = React.createContext<ElementRefs>({
@@ -54,7 +57,8 @@ const ElementRefContext = React.createContext<ElementRefs>({
   PickerMainRef: React.createRef(),
   SearchInputRef: React.createRef(),
   SkinTonePickerRef: React.createRef(),
-  VariationPickerRef: React.createRef()
+  VariationPickerRef: React.createRef(),
+  ReactionsRef: React.createRef()
 });
 
 function useElementRef() {
@@ -84,6 +88,10 @@ export function useBodyRef() {
   return useElementRef()['BodyRef'];
 }
 
+export function useReactionsRef() {
+  return useElementRef()['ReactionsRef'];
+}
+
 export function useSearchInputRef() {
   return useElementRef()['SearchInputRef'];
 }

package/src/components/context/PickerContext.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { useState } from 'react';
 
-import { useDefaultSkinToneConfig } from '../../config/useConfig';
+import {
+  useDefaultSkinToneConfig,
+  useReactionsOpenConfig
+} from '../../config/useConfig';
 import { DataEmoji } from '../../dataUtils/DataTypes';
 import { alphaNumericEmojiIndex } from '../../dataUtils/alphaNumericEmojiIndex';
 import { useDebouncedState } from '../../hooks/useDebouncedState';
@@ -13,6 +16,7 @@ import { SkinTones } from '../../types/exposedTypes';
 export function PickerContextProvider({ children }: Props) {
   const disallowedEmojis = useDisallowedEmojis();
   const defaultSkinTone = useDefaultSkinToneConfig();
+  const reactionsDefaultOpen = useReactionsOpenConfig();
 
   // Initialize the filter with the inititial dictionary
   const filterRef = React.useRef<FilterState>(alphaNumericEmojiIndex);
@@ -29,6 +33,7 @@ export function PickerContextProvider({ children }: Props) {
   const activeCategoryState = useState<ActiveCategoryState>(null);
   const emojisThatFailedToLoadState = useState<Set<string>>(new Set());
   const emojiVariationPickerState = useState<DataEmoji | null>(null);
+  const reactionsModeState = useState(reactionsDefaultOpen);
   const [isPastInitialLoad, setIsPastInitialLoad] = useState(false);
 
   useMarkInitialLoad(setIsPastInitialLoad);
@@ -47,7 +52,8 @@ export function PickerContextProvider({ children }: Props) {
         isPastInitialLoad,
         searchTerm,
         skinToneFanOpenState,
-        suggestedUpdateState
+        suggestedUpdateState,
+        reactionsModeState
       }}
     >
       {children}
@@ -70,6 +76,7 @@ const PickerContext = React.createContext<{
   disallowClickRef: React.MutableRefObject<boolean>;
   disallowMouseRef: React.MutableRefObject<boolean>;
   disallowedEmojisRef: React.MutableRefObject<Record<string, boolean>>;
+  reactionsModeState: ReactState<boolean>;
 }>({
   activeCategoryState: [null, () => {}],
   activeSkinTone: [SkinTones.NEUTRAL, () => {}],
@@ -82,7 +89,8 @@ const PickerContext = React.createContext<{
   isPastInitialLoad: true,
   searchTerm: ['', () => new Promise<string>(() => undefined)],
   skinToneFanOpenState: [false, () => {}],
-  suggestedUpdateState: [Date.now(), () => {}]
+  suggestedUpdateState: [Date.now(), () => {}],
+  reactionsModeState: [false, () => {}]
 });
 
 type Props = Readonly<{
@@ -104,6 +112,11 @@ export function useDisallowMouseRef() {
   return disallowMouseRef;
 }
 
+export function useReactionsModeState() {
+  const { reactionsModeState } = React.useContext(PickerContext);
+  return reactionsModeState;
+}
+
 export function useSearchTermState() {
   const { searchTerm } = React.useContext(PickerContext);
   return searchTerm;

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -17,6 +17,7 @@ type ClickableEmojiButtonProps = Readonly<{
   children: React.ReactNode;
   hasVariations: boolean;
   unified?: string;
+  round?: boolean;
 }>;
 
 export function ClickableEmojiButton({
@@ -26,7 +27,8 @@ export function ClickableEmojiButton({
   hiddenOnSearch,
   showVariations = true,
   hasVariations,
-  children
+  children,
+  round = false
 }: ClickableEmojiButtonProps) {
   return (
     <Button
@@ -37,7 +39,8 @@ export function ClickableEmojiButton({
         {
           [ClassNames.visible]: !hidden && !hiddenOnSearch
         },
-        !!(hasVariations && showVariations) && styles.hasVariations
+        !!(hasVariations && showVariations) && styles.hasVariations,
+        round && styles.round
       )}
       data-unified={unified}
       aria-label={emojiNames[0]}
@@ -70,6 +73,9 @@ const styles = stylesheet.create({
       backgroundColor: 'var(--epr-focus-bg-color)'
     }
   },
+  round: {
+    borderRadius: '50%'
+  },
   hasVariations: {
     '.': ClassNames.emojiHasVariations,
     ':after': {

package/src/components/emoji/Emoji.tsx

@@ -14,6 +14,7 @@ type ClickableEmojiProps = Readonly<
     hiddenOnSearch?: boolean;
     emoji: DataEmoji;
     className?: string;
+    round?: boolean;
   }
 >;
 
@@ -26,7 +27,8 @@ export function ClickableEmoji({
   showVariations = true,
   size,
   lazyLoad,
-  getEmojiUrl
+  getEmojiUrl,
+  round = false
 }: ClickableEmojiProps) {
   const hasVariations = emojiHasVariations(emoji);
 
@@ -38,6 +40,7 @@ export function ClickableEmoji({
       hiddenOnSearch={hiddenOnSearch}
       emojiNames={emojiNames(emoji)}
       unified={unified}
+      round={round}
     >
       <ViewOnlyEmoji
         unified={unified}

package/src/components/footer/Preview.tsx

@@ -2,7 +2,10 @@ import { cx } from 'flairup';
 import * as React from 'react';
 import { useState } from 'react';
 
-import { stylesheet } from '../../Stylesheet/stylesheet';
+import {
+  commonInteractionStyles,
+  stylesheet
+} from '../../Stylesheet/stylesheet';
 import {
   useEmojiStyleConfig,
   useGetEmojiUrlConfig,
@@ -30,7 +33,9 @@ export function Preview() {
   }
 
   return (
-    <Flex className={cx(styles.preview)}>
+    <Flex
+      className={cx(styles.preview, commonInteractionStyles.hiddenOnReactions)}
+    >
       <PreviewBody />
       <Space />
       {isSkinToneInPreview ? <SkinTonePickerMenu /> : null}

package/src/components/header/Header.tsx

@@ -1,5 +1,7 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 
+import { commonInteractionStyles } from '../../Stylesheet/stylesheet';
 import Relative from '../Layout/Relative';
 import { CategoryNavigation } from '../navigation/CategoryNavigation';
 
@@ -7,7 +9,9 @@ import { SearchContainer } from './Search/Search';
 
 export function Header() {
   return (
-    <Relative className="epr-header">
+    <Relative
+      className={cx('epr-header', commonInteractionStyles.hiddenOnReactions)}
+    >
       <SearchContainer />
       <CategoryNavigation />
     </Relative>

package/src/components/main/PickerMain.tsx

@@ -13,7 +13,10 @@ import { useKeyboardNavigation } from '../../hooks/useKeyboardNavigation';
 import { useOnFocus } from '../../hooks/useOnFocus';
 import { Theme } from '../../types/exposedTypes';
 import { usePickerMainRef } from '../context/ElementRefContext';
-import { PickerContextProvider } from '../context/PickerContext';
+import {
+  PickerContextProvider,
+  useReactionsModeState
+} from '../context/PickerContext';
 
 type Props = Readonly<{
   children: React.ReactNode;
@@ -35,6 +38,7 @@ type RootProps = Readonly<{
 }>;
 
 function PickerRootElement({ children }: RootProps) {
+  const [reactionsMode] = useReactionsModeState();
   const theme = useThemeConfig();
   const searchModeActive = useIsSearchMode();
   const PickerMainRef = usePickerMainRef();
@@ -44,6 +48,8 @@ function PickerRootElement({ children }: RootProps) {
   useKeyboardNavigation();
   useOnFocus();
 
+  const { width, height, ...styleProps } = style || {};
+
   return (
     <aside
       className={cx(
@@ -54,10 +60,14 @@ function PickerRootElement({ children }: RootProps) {
         {
           [ClassNames.searchActive]: searchModeActive
         },
+        reactionsMode && styles.reactionsMenu,
         className
       )}
       ref={PickerMainRef}
-      style={style}
+      style={{
+        ...styleProps,
+        ...(!reactionsMode && { height, width })
+      }}
     >
       {children}
     </aside>
@@ -75,6 +85,7 @@ const DarkTheme = {
   '--epr-category-label-bg-color': 'var(--epr-dark-category-label-bg-color)',
   '--epr-picker-border-color': 'var(--epr-dark-picker-border-color)',
   '--epr-bg-color': 'var(--epr-dark-bg-color)',
+  '--epr-reactions-bg-color': 'var(--epr-dark-reactions-bg-color)',
   '--epr-search-input-bg-color-active':
     'var(--epr-dark-search-input-bg-color-active)',
   '--epr-emoji-variation-indicator-color':
@@ -97,6 +108,7 @@ const styles = stylesheet.create({
     borderColor: 'var(--epr-picker-border-color)',
     backgroundColor: 'var(--epr-bg-color)',
     overflow: 'hidden',
+    transition: 'all 0.3s ease-in-out, background-color 0.1s ease-in-out',
     // @ts-expect-error - need to work on this
     '*': {
       boxSizing: 'border-box',
@@ -112,6 +124,7 @@ const styles = stylesheet.create({
       '--epr-search-input-bg-color': '#f6f6f6',
       '--epr-picker-border-color': '#e7e7e7',
       '--epr-bg-color': '#fff',
+      '--epr-reactions-bg-color': '#ffffff90',
       '--epr-category-icon-active-color': '#6aa8de',
       '--epr-skin-tone-picker-menu-color': '#ffffff95',
 
@@ -187,6 +200,7 @@ const styles = stylesheet.create({
       '--epr-dark-category-label-bg-color': '#222222e6',
       '--epr-dark-picker-border-color': '#151617',
       '--epr-dark-bg-color': '#222222',
+      '--epr-dark-reactions-bg-color': '#22222290',
       '--epr-dark-search-input-bg-color-active': 'var(--epr-dark)',
       '--epr-dark-emoji-variation-indicator-color': '#444',
       '--epr-dark-category-icon-active-color': '#3271b7',
@@ -202,5 +216,16 @@ const styles = stylesheet.create({
   darkTheme: {
     '.': ClassNames.darkTheme,
     '--': DarkTheme
+  },
+  reactionsMenu: {
+    '.': 'epr-reactions',
+    height: '50px',
+    display: 'inline-flex',
+    backgroundColor: 'var(--epr-reactions-bg-color)',
+    // @ts-expect-error - need to work on this
+    backdropFilter: 'blur(8px)',
+    '--': {
+      '--epr-picker-border-radius': '50px'
+    }
   }
 });

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 = {
@@ -127,9 +132,12 @@ const basePreviewConfig: PreviewConfig = {
 
 type ConfigExternal = {
   previewConfig: Partial<PreviewConfig>;
-  onEmojiClick: (emoji: EmojiClickData, event: MouseEvent) => void;
+  onEmojiClick: MouseDownEvent;
+  onReactionClick: MouseDownEvent;
 } & Omit<PickerConfigInternal, 'previewConfig' | 'unicodeToHide'>;
 
 export type PickerConfig = Partial<ConfigExternal>;
 
 export type PickerDimensions = string | number;
+
+export type MouseDownEvent = (emoji: EmojiClickData, event: MouseEvent) => void;