emoji-picker-react 3.6.1 → 4.0.0-rc.3

package/src/components/footer/Preview.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { useState } from 'react';
+
+import {
+  useEmojiStyleConfig,
+  useShowPreviewConfig
+} from '../../config/useConfig';
+import { asEmoji } from '../../dataUtils/asEmoji';
+import {
+  emojiByUnified,
+  emojiName,
+  emojiUnified
+} from '../../dataUtils/emojiSelectors';
+import { useEmojiMouseEnter } from '../../hooks/useEmojiMouseEnter';
+import Flex from '../Layout/Flex';
+import { Emoji } from '../emoji/Emoji';
+import './Preview.css';
+
+export function Preview() {
+  const showPreview = useShowPreviewConfig();
+  const [hoveredEmoji, setHoveredEmoji] = useState<HoveredEmoji>(null);
+  const emojiStyle = useEmojiStyleConfig();
+  useEmojiMouseEnter(showPreview, setHoveredEmoji);
+
+  if (!showPreview) {
+    return null;
+  }
+
+  const emoji = emojiByUnified(hoveredEmoji?.originalUnified);
+
+  const show = emoji != null && hoveredEmoji != null;
+
+  return (
+    <Flex className="epr-preview">
+      <PreviewContent />
+    </Flex>
+  );
+
+  function PreviewContent() {
+    const defaultEmoji = asEmoji(emojiByUnified('1f60a'));
+
+    return (
+      <>
+        <div>
+          {show ? (
+            <Emoji
+              unified={hoveredEmoji?.unified as string}
+              emoji={asEmoji(emoji)}
+              showVariations={false}
+              emojiStyle={emojiStyle}
+              hidden={false}
+              size={45}
+            />
+          ) : (
+            <Emoji
+              unified={emojiUnified(defaultEmoji)}
+              emoji={defaultEmoji}
+              showVariations={false}
+              emojiStyle={emojiStyle}
+              hidden={false}
+              size={45}
+            />
+          )}
+        </div>
+        {show ? (
+          <div className="epr-preview-emoji-label">
+            {emojiName(asEmoji(emoji))}
+          </div>
+        ) : (
+          <div className="epr-preview-emoji-label">What's your mood?</div>
+        )}
+      </>
+    );
+  }
+}
+
+export type HoveredEmoji = null | {
+  unified: string;
+  originalUnified: string;
+};

package/src/components/header/Header.css

@@ -0,0 +1,4 @@
+.EmojiPickerReact .epr-header .epr-header-overlay {
+  padding: var(--epr-header-padding);
+  z-index: var(--epr-header-overlay-z-index);
+}

package/src/components/header/Header.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import Flex from '../Layout/Flex';
+import Relative from '../Layout/Relative';
+import { CategoryNavigation } from '../navigation/CategoryNavigation';
+
+import { Search } from './Search';
+import { SkinTonePicker } from './SkinTonePicker';
+import './Header.css';
+
+export function Header() {
+  return (
+    <Relative className="epr-header">
+      <Flex className="epr-header-overlay">
+        <Search />
+        <SkinTonePicker />
+      </Flex>
+      <CategoryNavigation />
+    </Relative>
+  );
+}

package/src/components/header/Search.css

@@ -0,0 +1,72 @@
+.EmojiPickerReact .epr-search-container {
+  flex: 1;
+  display: block;
+  min-width: 0;
+}
+
+.EmojiPickerReact .epr-search-container input.epr-search {
+  outline: none;
+  transition: all 0.2s ease-in-out;
+  color: var(--epr-search-bar-text-color);
+  border-radius: var(--epr-search-input-border-radius);
+  padding: var(--epr-search-input-padding);
+  height: var(--epr-search-input-height);
+  background-color: var(--epr-search-bar-bg-color);
+  border: 1px solid var(--epr-search-bar-bg-color);
+  width: 100%;
+}
+
+.EmojiPickerReact .epr-search-container button.epr-btn-clear-search {
+  background-image: svg-load(./svg/times.svg);
+  height: 20px;
+  width: 20px;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  background-size: 20px;
+}
+.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover {
+  background-position-y: -20px;
+}
+
+.EmojiPickerReact..epr-dark-theme
+  .epr-search-container
+  button.epr-btn-clear-search {
+  background-position-y: -40px;
+}
+
+.EmojiPickerReact..epr-dark-theme
+  .epr-search-container
+  button.epr-btn-clear-search:hover {
+  background-position-y: -60px;
+}
+
+.EmojiPickerReact .epr-search-container .epr-icn-search {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  background-image: svg-load(./svg/magnifier.svg);
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: 20px;
+}
+
+.EmojiPickerReact.epr-dark-theme .epr-search-container .epr-icn-search {
+  background-position-y: -20px;
+}
+
+.EmojiPickerReact .epr-search-container input.epr-search::placeholder {
+  color: var(--epr-search-bar-placeholder-color);
+}
+
+.EmojiPickerReact .epr-search-container input.epr-search:focus {
+  background-color: var(--epr-search-bar-bg-color-active);
+  border: 1px solid var(--epr-search-border-color);
+}

package/src/components/header/Search.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import {
+  useAutoFocusSearchConfig,
+  useSearchPlaceHolderConfig
+} from '../../config/useConfig';
+import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
+import { useFilter } from '../../hooks/useFilter';
+import Relative from '../Layout/Relative';
+import './Search.css';
+
+export function Search() {
+  const { closeAllOpenToggles } = useCloseAllOpenToggles();
+
+  const placeholder = useSearchPlaceHolderConfig();
+  const autoFocus = useAutoFocusSearchConfig();
+  const { onChange, searchTerm, clearSearch } = useFilter();
+
+  return (
+    <Relative className="epr-search-container">
+      <input
+        autoFocus={autoFocus}
+        onFocus={closeAllOpenToggles}
+        className="epr-search"
+        type="text"
+        placeholder={placeholder}
+        onChange={event => onChange(event.target.value)}
+        value={searchTerm}
+      />
+      <div className="epr-icn-search" />
+      {searchTerm ? (
+        <button className="epr-btn-clear-search" onClick={clearSearch} />
+      ) : null}
+    </Relative>
+  );
+}

package/src/components/header/SkinTonePicker.css

@@ -0,0 +1,86 @@
+.EmojiPickerReact .epr-skin-tones {
+  /* margin: 0 5px 0 15px; */
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  transition: all 0.3s ease-in-out;
+  flex-basis: 30px;
+}
+
+.EmojiPickerReact .epr-skin-tones.open {
+  flex-basis: 170px;
+}
+
+.EmojiPickerReact .epr-skin-tone-select {
+  position: relative;
+  width: 16px;
+  height: 16px;
+}
+
+.EmojiPickerReact .epr-skin-tones.open .epr-tone {
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+.EmojiPickerReact .epr-skin-tones:not(.open) .epr-tone {
+  z-index: 0;
+  opacity: 0;
+}
+
+.EmojiPickerReact .epr-skin-tones .epr-tone.active {
+  z-index: 1;
+}
+
+.EmojiPickerReact .epr-skin-tones .epr-tone {
+  display: block;
+  cursor: pointer;
+  border-radius: 4px;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  right: 0;
+  transition: transform 0.3s ease-in-out, opacity 0.5s ease-in-out;
+  z-index: 1;
+  box-shadow: 0 0 0 0px var(--epr-active-skin-hover-color);
+}
+
+.EmojiPickerReact .epr-skin-tones .epr-tone:hover {
+  box-shadow: 0 0 0 5px var(--epr-active-skin-hover-color);
+}
+
+.EmojiPickerReact
+  .epr-skin-tones.open
+  .epr-skin-tone-select
+  .epr-tone.active:after {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  border-radius: 5px;
+  border: 1px solid var(--epr-active-skin-tone-indicator-border-color);
+}
+
+.EmojiPickerReact .epr-skin-tones .epr-tone.active {
+  opacity: 1;
+  z-index: 1;
+}
+
+.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-neutral {
+  background-color: #ffd225;
+}
+.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fb {
+  background-color: #ffdfbd;
+}
+.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fc {
+  background-color: #e9c197;
+}
+.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fd {
+  background-color: #c88e62;
+}
+.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fe {
+  background-color: #a86637;
+}
+.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3ff {
+  background-color: #60463a;
+}

package/src/components/header/SkinTonePicker.tsx

@@ -0,0 +1,55 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import { useSkinTonesDisabledConfig } from '../../config/useConfig';
+import skinToneVariations from '../../data/skinToneVariations';
+import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
+import Relative from '../Layout/Relative';
+import {
+  useActiveSkinToneState,
+  useSkinToneFanOpenState
+} from '../context/PickerContext';
+import './SkinTonePicker.css';
+
+export function SkinTonePicker() {
+  const isDisabled = useSkinTonesDisabledConfig();
+  const [isOpen, setIsOpen] = useSkinToneFanOpenState();
+  const [activeSkinTone, setActiveSkinTone] = useActiveSkinToneState();
+  const { closeAllOpenToggles } = useCloseAllOpenToggles();
+
+  if (isDisabled) {
+    return null;
+  }
+
+  return (
+    <Relative
+      className={clsx('epr-skin-tones', {
+        open: isOpen
+      })}
+    >
+      <div className="epr-skin-tone-select" onClick={() => setIsOpen(!isOpen)}>
+        {skinToneVariations.map((skinToneVariation, i) => {
+          const active = skinToneVariation === activeSkinTone;
+          return (
+            <button
+              style={{
+                transform: clsx(
+                  `translateX(-${i * (isOpen ? 28 : 0)}px)`,
+                  isOpen && active && 'scale(1.3)'
+                )
+              }}
+              onClick={() => {
+                isOpen && setActiveSkinTone(skinToneVariation);
+                closeAllOpenToggles();
+              }}
+              key={skinToneVariation}
+              className={clsx(`epr-tone-${skinToneVariation}`, 'epr-tone', {
+                active
+              })}
+            ></button>
+          );
+        })}
+      </div>
+    </Relative>
+  );
+}

package/src/components/header/svg/magnifier.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, 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="40px" viewBox="0 0 20 40" enable-background="new 0 0 20 40" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#868686" d="M12,8.81c0,2.08-1.68,3.76-3.76,3.76c-2.08,0-3.76-1.68-3.76-3.76
+	c0-2.08,1.68-3.76,3.76-3.76C10.32,5.05,12,6.73,12,8.81z M11.23,12.72c-0.83,0.64-1.87,1.01-2.99,1.01c-2.72,0-4.92-2.2-4.92-4.92
+	c0-2.72,2.2-4.92,4.92-4.92c2.72,0,4.92,2.2,4.92,4.92c0,1.13-0.38,2.16-1.01,2.99l3.94,3.93c0.25,0.25,0.25,0.66,0,0.92
+	c-0.25,0.25-0.66,0.25-0.92,0L11.23,12.72z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#C0C0BF" d="M12,28.81c0,2.08-1.68,3.76-3.76,3.76c-2.08,0-3.76-1.68-3.76-3.76
+	c0-2.08,1.68-3.76,3.76-3.76C10.32,25.05,12,26.73,12,28.81z M11.23,32.72c-0.83,0.64-1.87,1.01-2.99,1.01
+	c-2.72,0-4.92-2.2-4.92-4.92c0-2.72,2.2-4.92,4.92-4.92c2.72,0,4.92,2.2,4.92,4.92c0,1.13-0.38,2.16-1.01,2.99l3.94,3.93
+	c0.25,0.25,0.25,0.66,0,0.92c-0.25,0.25-0.66,0.25-0.92,0L11.23,32.72z"/>
+</svg>

package/src/components/header/svg/times.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, 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="M6.98,13.59c0.1,0.1,0.24,0.15,0.37,0.15s0.27-0.05,0.37-0.15l2.42-2.42l2.43,2.43
+	c0.1,0.1,0.24,0.15,0.37,0.15c0.14,0,0.27-0.05,0.37-0.15c0.21-0.21,0.21-0.54,0-0.75l-2.43-2.43L13.32,8
+	c0.21-0.21,0.21-0.54,0-0.75c-0.21-0.21-0.54-0.21-0.75,0l-2.42,2.42L7.74,7.27c-0.21-0.21-0.54-0.21-0.75,0
+	c-0.21,0.21-0.21,0.54,0,0.75l2.41,2.41l-2.42,2.42C6.77,13.05,6.77,13.39,6.98,13.59L6.98,13.59z"/>
+<path fill="#868686" d="M10.15,18.43c4.41,0,8-3.59,8-8c0-4.41-3.59-8-8-8c-4.41,0-8,3.59-8,8C2.15,14.84,5.74,18.43,10.15,18.43z
+	 M10.15,3.49c3.83,0,6.94,3.11,6.94,6.94c0,3.83-3.11,6.94-6.94,6.94c-3.83,0-6.94-3.11-6.94-6.94C3.21,6.6,6.33,3.49,10.15,3.49
+	L10.15,3.49z"/>
+<path fill="#3371B7" d="M6.98,33.59c0.1,0.1,0.24,0.15,0.37,0.15s0.27-0.05,0.37-0.15l2.42-2.42l2.43,2.43
+	c0.1,0.1,0.24,0.15,0.37,0.15c0.14,0,0.27-0.05,0.37-0.15c0.21-0.21,0.21-0.54,0-0.75l-2.43-2.43L13.32,28
+	c0.21-0.21,0.21-0.54,0-0.75c-0.21-0.21-0.54-0.21-0.75,0l-2.42,2.42l-2.41-2.41c-0.21-0.21-0.54-0.21-0.75,0
+	c-0.21,0.21-0.21,0.54,0,0.75l2.41,2.41l-2.42,2.42C6.77,33.05,6.77,33.39,6.98,33.59L6.98,33.59z"/>
+<path fill="#3371B7" d="M10.15,38.43c4.41,0,8-3.59,8-8c0-4.41-3.59-8-8-8c-4.41,0-8,3.59-8,8C2.15,34.84,5.74,38.43,10.15,38.43z
+	 M10.15,23.49c3.83,0,6.94,3.11,6.94,6.94c0,3.83-3.11,6.94-6.94,6.94c-3.83,0-6.94-3.11-6.94-6.94
+	C3.21,26.6,6.33,23.49,10.15,23.49L10.15,23.49z"/>
+<path fill="#C0C0BF" d="M6.98,53.59c0.1,0.1,0.24,0.15,0.37,0.15s0.27-0.05,0.37-0.15l2.42-2.42l2.43,2.43
+	c0.1,0.1,0.24,0.15,0.37,0.15c0.14,0,0.27-0.05,0.37-0.15c0.21-0.21,0.21-0.54,0-0.75l-2.43-2.43L13.32,48
+	c0.21-0.21,0.21-0.54,0-0.75c-0.21-0.21-0.54-0.21-0.75,0l-2.42,2.42l-2.41-2.41c-0.21-0.21-0.54-0.21-0.75,0
+	c-0.21,0.21-0.21,0.54,0,0.75l2.41,2.41l-2.42,2.42C6.77,53.05,6.77,53.39,6.98,53.59L6.98,53.59z"/>
+<path fill="#C0C0BF" d="M10.15,58.43c4.41,0,8-3.59,8-8c0-4.41-3.59-8-8-8c-4.41,0-8,3.59-8,8C2.15,54.84,5.74,58.43,10.15,58.43z
+	 M10.15,43.49c3.83,0,6.94,3.11,6.94,6.94c0,3.83-3.11,6.94-6.94,6.94c-3.83,0-6.94-3.11-6.94-6.94
+	C3.21,46.6,6.33,43.49,10.15,43.49L10.15,43.49z"/>
+<path fill="#6AA9DD" d="M6.98,73.59c0.1,0.1,0.24,0.15,0.37,0.15s0.27-0.05,0.37-0.15l2.42-2.42l2.43,2.43
+	c0.1,0.1,0.24,0.15,0.37,0.15c0.14,0,0.27-0.05,0.37-0.15c0.21-0.21,0.21-0.54,0-0.75l-2.43-2.43L13.32,68
+	c0.21-0.21,0.21-0.54,0-0.75c-0.21-0.21-0.54-0.21-0.75,0l-2.42,2.42l-2.41-2.41c-0.21-0.21-0.54-0.21-0.75,0
+	c-0.21,0.21-0.21,0.54,0,0.75l2.41,2.41l-2.42,2.42C6.77,73.05,6.77,73.39,6.98,73.59L6.98,73.59z"/>
+<path fill="#6AA9DD" d="M10.15,78.43c4.41,0,8-3.59,8-8c0-4.41-3.59-8-8-8c-4.41,0-8,3.59-8,8C2.15,74.84,5.74,78.43,10.15,78.43z
+	 M10.15,63.49c3.83,0,6.94,3.11,6.94,6.94c0,3.83-3.11,6.94-6.94,6.94c-3.83,0-6.94-3.11-6.94-6.94
+	C3.21,66.6,6.33,63.49,10.15,63.49L10.15,63.49z"/>
+</svg>

package/src/components/main/PickerMain.css

@@ -0,0 +1,11 @@
+aside.EmojiPickerReact.epr-main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--epr-picker-border-radius);
+  border-color: var(--epr-picker-border-color);
+  width: var(--epr-picker-width);
+  height: var(--epr-picker-height);
+}

package/src/components/main/PickerMain.tsx

@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import { useThemeConfig } from '../../config/useConfig';
+import useIsSearchMode from '../../hooks/useIsSearchMode';
+import { Theme } from '../../types/exposedTypes';
+import { usePickerMainRef } from '../context/ElementRefContext';
+import { PickerContextProvider } from '../context/PickerContext';
+import './PickerMain.css';
+
+type Props = Readonly<{
+  children: React.ReactNode;
+}>;
+
+export default function PickerMain({ children }: Props) {
+  return (
+    <PickerContextProvider>
+      <PickerRootElement>{children}</PickerRootElement>
+    </PickerContextProvider>
+  );
+}
+
+type RootProps = Readonly<{
+  children: React.ReactNode;
+}>;
+
+function PickerRootElement({ children }: RootProps) {
+  const theme = useThemeConfig();
+  const searchModeActive = useIsSearchMode();
+  const PickerMainRef = usePickerMainRef();
+  return (
+    <aside
+      className={clsx('EmojiPickerReact', 'epr-main', {
+        'epr-search-active': searchModeActive,
+        'epr-dark-theme': theme === Theme.DARK
+      })}
+      ref={PickerMainRef}
+    >
+      {children}
+    </aside>
+  );
+}

package/src/components/navigation/CategoryNavigation.css

@@ -0,0 +1,82 @@
+.EmojiPickerReact .epr-category-nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  padding: var(--epr-header-padding);
+}
+
+.EmojiPickerReact .epr-category-nav > button.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);
+  background-size: calc(var(--epr-category-navigation-button-size) * 10);
+  outline: none;
+}
+
+.EmojiPickerReact.epr-search-active .epr-category-nav > button.epr-cat-btn,
+.EmojiPickerReact.epr-search-active
+  .epr-category-nav
+  > button.epr-cat-btn:hover,
+.EmojiPickerReact.epr-search-active
+  .epr-category-nav
+  > button.epr-cat-btn.active {
+  opacity: 0.3;
+  cursor: default;
+  pointer-events: none;
+}
+
+.EmojiPickerReact:not(.epr-search-active)
+  .epr-category-nav
+  > button.epr-cat-btn:hover,
+.EmojiPickerReact:not(.epr-search-active)
+  .epr-category-nav
+  > button.epr-cat-btn.active {
+  opacity: 1;
+  background-position-y: var(--epr-category-navigation-button-size);
+}
+.EmojiPickerReact .epr-category-nav > button.epr-cat-btn {
+  background-image: svg-load(./svg/CategoryNav.svg);
+  background-position: 0 0;
+}
+
+.EmojiPickerReact.epr-dark-theme .epr-category-nav > button.epr-cat-btn {
+  background-position-y: calc(var(--epr-category-navigation-button-size) * 2);
+}
+
+.EmojiPickerReact.epr-dark-theme:not(.epr-search-active)
+  .epr-category-nav
+  > button.epr-cat-btn:hover,
+.EmojiPickerReact.epr-dark-theme:not(.epr-search-active)
+  .epr-category-nav
+  > button.epr-cat-btn.active {
+  background-position-y: calc(var(--epr-category-navigation-button-size) * 3);
+}
+.EmojiPickerReact button.epr-cat-btn.epr-icn-recently_used {
+  background-position-x: calc(var(--epr-category-navigation-button-size) * -8);
+}
+.EmojiPickerReact button.epr-cat-btn.epr-icn-activities {
+  background-position-x: calc(var(--epr-category-navigation-button-size) * -4);
+}
+.EmojiPickerReact button.epr-cat-btn.epr-icn-animals_nature {
+  background-position-x: calc(var(--epr-category-navigation-button-size) * -1);
+}
+.EmojiPickerReact button.epr-cat-btn.epr-icn-flags {
+  background-position-x: calc(var(--epr-category-navigation-button-size) * -7);
+}
+.EmojiPickerReact button.epr-cat-btn.epr-icn-food_drink {
+  background-position-x: calc(var(--epr-category-navigation-button-size) * -2);
+}
+.EmojiPickerReact button.epr-cat-btn.epr-icn-objects {
+  background-position-x: calc(var(--epr-category-navigation-button-size) * -5);
+}
+.EmojiPickerReact button.epr-cat-btn.epr-icn-smileys_people {
+  background-position-x: 0px;
+}
+.EmojiPickerReact button.epr-cat-btn.epr-icn-symbols {
+  background-position-x: calc(var(--epr-category-navigation-button-size) * -6);
+}
+.EmojiPickerReact button.epr-cat-btn.epr-icn-travel_places {
+  background-position-x: calc(var(--epr-category-navigation-button-size) * -3);
+}

package/src/components/navigation/CategoryNavigation.tsx

@@ -0,0 +1,32 @@
+import clsx from 'clsx';
+import * as React from 'react';
+import './CategoryNavigation.css';
+
+import { categoryFromCategoryConfig } from '../../config/categoryConfig';
+import { useCategoriesConfig } from '../../config/useConfig';
+import { useActiveCategoryState } from '../context/PickerContext';
+
+export function CategoryNavigation() {
+  const categoriesConfig = useCategoriesConfig();
+  const [
+    activeCategory,
+    ,
+    setActiveCategoryAndScroll
+  ] = useActiveCategoryState();
+  return (
+    <div className="epr-category-nav">
+      {categoriesConfig.map(categoryConfig => {
+        const category = categoryFromCategoryConfig(categoryConfig);
+        return (
+          <button
+            className={clsx('epr-cat-btn', `epr-icn-${category}`, {
+              active: category === activeCategory
+            })}
+            key={category}
+            onClick={() => setActiveCategoryAndScroll(category)}
+          />
+        );
+      })}
+    </div>
+  );
+}