emoji-picker-react 4.3.0 → 4.4.0-rc.2

package/dist/hooks/useShouldShowSkinTonePicker.d.ts

@@ -0,0 +1,4 @@
+import { SkinTonePickerLocation } from '../types/exposedTypes';
+export declare function useShouldShowSkinTonePicker(): (location: SkinTonePickerLocation) => boolean;
+export declare function useIsSkinToneInSearch(): boolean;
+export declare function useIsSkinToneInPreview(): boolean;

package/dist/types/exposedTypes.d.ts

@@ -41,3 +41,7 @@ export declare enum Categories {
     SYMBOLS = "symbols",
     FLAGS = "flags"
 }
+export declare enum SkinTonePickerLocation {
+    SEARCH = "SEARCH",
+    PREVIEW = "PREVIEW"
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.3.0",
+  "version": "4.4.0-rc.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/DomUtils/classNames.ts

@@ -13,8 +13,11 @@ export enum ClassNames {
   emojiList = 'epr-emoji-list',
   external = '__EmojiPicker__',
   emojiPicker = 'EmojiPickerReact',
+  open = 'epr-open',
+  vertical = 'epr-vertical',
+  horizontal = 'epr-horizontal'
 }
 
 export function asSelectors(...classNames: ClassNames[]): string {
-  return classNames.map((c) => `.${c}`).join('');
+  return classNames.map(c => `.${c}`).join('');
 }

package/src/EmojiPickerReact.css

@@ -7,6 +7,7 @@
   --epr-picker-border-color: #e7e7e7;
   --epr-bg-color: #fff;
   --epr-category-icon-active-color: #6aa8de;
+  --epr-skin-tone-picker-menu-color: #ffffff95;
 
   --epr-horizontal-padding: 10px;
 
@@ -67,6 +68,7 @@
   --epr-emoji-variations-indictator-z-index: 1;
   --epr-category-label-z-index: 2;
   --epr-skin-variation-picker-z-index: 5;
+  --epr-preview-z-index: 6;
 }
 
 .EmojiPickerReact.epr-dark-theme {
@@ -83,6 +85,7 @@
   --epr-search-input-bg-color-active: var(--epr-dark);
   --epr-emoji-variation-indicator-color: #444;
   --epr-category-icon-active-color: #3271b7;
+  --epr-skin-tone-picker-menu-color: #22222295;
 }
 
 .EmojiPickerReact {

package/src/components/Layout/Absolute.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+type Props = Readonly<{
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}>;
+
+export default function Absolute({ children, className, style }: Props) {
+  return (
+    <div style={{ ...style, position: 'absolute' }} className={className}>
+      {children}
+    </div>
+  );
+}

package/src/components/Layout/Relative.tsx

@@ -3,11 +3,12 @@ import * as React from 'react';
 type Props = Readonly<{
   children: React.ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 }>;
 
-export default function Relative({ children, className }: Props) {
+export default function Relative({ children, className, style }: Props) {
   return (
-    <div style={{ position: 'relative' }} className={className}>
+    <div style={{ ...style, position: 'relative' }} className={className}>
       {children}
     </div>
   );

package/src/components/Layout/Space.tsx

@@ -0,0 +1,11 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+type Props = Readonly<{
+  className?: string;
+  style?: React.CSSProperties;
+}>;
+
+export default function Space({ className, style = {} }: Props) {
+  return <div style={{ flex: 1, ...style }} className={clsx(className)} />;
+}

package/src/components/footer/Preview.css

@@ -4,6 +4,8 @@
   align-items: center;
   border-top: 1px solid var(--epr-preview-border-color);
   height: var(--epr-preview-height);
+  position: relative;
+  z-index: var(--epr-preview-z-index);
 }
 
 .EmojiPickerReact .epr-preview .epr-preview-emoji-label {

package/src/components/footer/Preview.tsx

@@ -4,21 +4,41 @@ import { useState } from 'react';
 import {
   useEmojiStyleConfig,
   useGetEmojiUrlConfig,
-  usePreviewConfig,
+  usePreviewConfig
 } from '../../config/useConfig';
 import { asEmoji } from '../../dataUtils/asEmoji';
 import {
   emojiByUnified,
   emojiName,
-  emojiUnified,
+  emojiUnified
 } from '../../dataUtils/emojiSelectors';
 import { useEmojiPreviewEvents } from '../../hooks/useEmojiPreviewEvents';
+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';
 
 export function Preview() {
+  const previewConfig = usePreviewConfig();
+  const isSkinToneInPreview = useIsSkinToneInPreview();
+
+  if (!previewConfig.showPreview) {
+    return null;
+  }
+
+  return (
+    <Flex className="epr-preview">
+      <PreviewBody />
+      <Space />
+      {isSkinToneInPreview ? <SkinTonePickerMenu /> : null}
+    </Flex>
+  );
+}
+
+export function PreviewBody() {
   const previewConfig = usePreviewConfig();
   const [previewEmoji, setPreviewEmoji] = useState<PreviewEmoji>(null);
   const emojiStyle = useEmojiStyleConfig();
@@ -27,19 +47,11 @@ export function Preview() {
 
   useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
 
-  if (!previewConfig.showPreview) {
-    return null;
-  }
-
   const emoji = emojiByUnified(previewEmoji?.originalUnified);
 
   const show = emoji != null && previewEmoji != null;
 
-  return (
-    <Flex className="epr-preview">
-      <PreviewContent />
-    </Flex>
-  );
+  return <PreviewContent />;
 
   function PreviewContent() {
     const defaultEmoji = asEmoji(

package/src/components/header/Header.tsx

@@ -1,20 +1,15 @@
 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';
+import { SearchContainer } from './Search';
 
 export function Header() {
   return (
     <Relative className="epr-header">
-      <Flex className="epr-header-overlay">
-        <Search />
-        <SkinTonePicker />
-      </Flex>
+      <SearchContainer />
       <CategoryNavigation />
     </Relative>
   );

package/src/components/header/Search.tsx

@@ -5,19 +5,41 @@ import { useState } from 'react';
 import { asSelectors, ClassNames } from '../../DomUtils/classNames';
 import {
   useAutoFocusSearchConfig,
-  useSearchPlaceHolderConfig,
+  useSearchDisabledConfig,
+  useSearchPlaceHolderConfig
 } from '../../config/useConfig';
 import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
 import {
   getNormalizedSearchTerm,
   useClearSearch,
-  useFilter,
+  useFilter
 } from '../../hooks/useFilter';
+import { useIsSkinToneInSearch } from '../../hooks/useShouldShowSkinTonePicker';
+import Flex from '../Layout/Flex';
 import Relative from '../Layout/Relative';
 import { Button } from '../atoms/Button';
 import { useSearchInputRef } from '../context/ElementRefContext';
 
 import './Search.css';
+import { SkinTonePicker } from './SkinTonePicker';
+
+export function SearchContainer() {
+  const searchDisabled = useSearchDisabledConfig();
+
+  const isSkinToneInSearch = useIsSkinToneInSearch();
+
+  if (searchDisabled) {
+    return null;
+  }
+
+  return (
+    <Flex className="epr-header-overlay">
+      <Search />
+
+      {isSkinToneInSearch ? <SkinTonePicker /> : null}
+    </Flex>
+  );
+}
 
 export function Search() {
   const [inc, setInc] = useState(0);
@@ -42,7 +64,7 @@ export function Search() {
         className="epr-search"
         type="text"
         placeholder={placeholder}
-        onChange={(event) => {
+        onChange={event => {
           setInc(inc + 1);
           setTimeout(() => {
             onChange(event?.target?.value ?? value);

package/src/components/header/SkinTonePicker.css

@@ -1,5 +1,5 @@
 .EmojiPickerReact .epr-skin-tones {
-  --epr-skin-tone-size: 16px;
+  --epr-skin-tone-size: 15px;
 }
 
 .EmojiPickerReact .epr-skin-tones {
@@ -7,11 +7,21 @@
   align-items: center;
   justify-content: flex-end;
   transition: all 0.3s ease-in-out;
-  flex-basis: 30px;
+  padding: 10px 0;
 }
 
-.EmojiPickerReact .epr-skin-tones.open {
-  flex-basis: 170px;
+.EmojiPickerReact .epr-skin-tones.epr-vertical {
+  padding: 5px;
+  align-items: flex-end;
+  flex-direction: column;
+  border-radius: 6px;
+  border: 1px solid var(--epr-bg-color);
+}
+
+.EmojiPickerReact .epr-skin-tones.epr-vertical.epr-open {
+  border: 1px solid var(--epr-picker-border-color);
+  backdrop-filter: blur(5px);
+  background: var(--epr-skin-tone-picker-menu-color);
 }
 
 .EmojiPickerReact .epr-skin-tone-select {
@@ -20,11 +30,11 @@
   height: var(--epr-skin-tone-size);
 }
 
-.EmojiPickerReact .epr-skin-tones.open .epr-tone {
+.EmojiPickerReact .epr-skin-tones.epr-open .epr-tone {
   transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }
 
-.EmojiPickerReact .epr-skin-tones:not(.open) .epr-tone {
+.EmojiPickerReact .epr-skin-tones:not(.epr-open) .epr-tone {
   z-index: 0;
   opacity: 0;
 }
@@ -47,15 +57,15 @@
 }
 
 .EmojiPickerReact .epr-skin-tones .epr-tone:hover {
-  box-shadow: 0 0 0 5px var(--epr-active-skin-hover-color);
+  box-shadow: 0 0 0 3px var(--epr-active-skin-hover-color);
 }
 
 .EmojiPickerReact .epr-skin-tones .epr-tone:focus {
-  box-shadow: 0 0 0 5px var(--epr-focus-bg-color);
+  box-shadow: 0 0 0 3px var(--epr-focus-bg-color);
 }
 
 .EmojiPickerReact
-  .epr-skin-tones.open
+  .epr-skin-tones.epr-open
   .epr-skin-tone-select
   .epr-tone.epr-active:after {
   content: '';

package/src/components/header/SkinTonePicker.tsx

@@ -9,6 +9,7 @@ import skinToneVariations, {
 import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
 import { useFocusSearchInput } from '../../hooks/useFocus';
 import { SkinTones } from '../../types/exposedTypes';
+import Absolute from '../Layout/Absolute';
 import Relative from '../Layout/Relative';
 import { Button } from '../atoms/Button';
 import { useSkinTonePickerRef } from '../context/ElementRefContext';
@@ -18,7 +19,25 @@ import {
 } from '../context/PickerContext';
 import './SkinTonePicker.css';
 
-export function SkinTonePicker() {
+const ITEM_SIZE = 28;
+
+type Props = {
+  direction?: SkinTonePickerDirection;
+};
+
+export function SkinTonePickerMenu() {
+  return (
+    <Relative style={{ height: ITEM_SIZE }}>
+      <Absolute style={{ bottom: 0, right: 0 }}>
+        <SkinTonePicker direction={SkinTonePickerDirection.VERTICAL} />
+      </Absolute>
+    </Relative>
+  );
+}
+
+export function SkinTonePicker({
+  direction = SkinTonePickerDirection.HORIZONTAL
+}: Props) {
   const SkinTonePickerRef = useSkinTonePickerRef();
   const isDisabled = useSkinTonesDisabledConfig();
   const [isOpen, setIsOpen] = useSkinToneFanOpenState();
@@ -30,11 +49,22 @@ export function SkinTonePicker() {
     return null;
   }
 
+  const fullWidth = `${ITEM_SIZE * skinToneVariations.length}px`;
+
+  const expandedSize = isOpen ? fullWidth : ITEM_SIZE + 'px';
+
+  const vertical = direction === SkinTonePickerDirection.VERTICAL;
+
   return (
     <Relative
-      className={clsx('epr-skin-tones', {
-        open: isOpen
+      className={clsx('epr-skin-tones', direction, {
+        [ClassNames.open]: isOpen
       })}
+      style={
+        vertical
+          ? { flexBasis: expandedSize, height: expandedSize }
+          : { flexBasis: expandedSize }
+      }
     >
       <div className="epr-skin-tone-select" ref={SkinTonePickerRef}>
         {skinToneVariations.map((skinToneVariation, i) => {
@@ -43,7 +73,9 @@ export function SkinTonePicker() {
             <Button
               style={{
                 transform: clsx(
-                  `translateX(-${i * (isOpen ? 28 : 0)}px)`,
+                  vertical
+                    ? `translateY(-${i * (isOpen ? ITEM_SIZE : 0)}px)`
+                    : `translateX(-${i * (isOpen ? ITEM_SIZE : 0)}px)`,
                   isOpen && active && 'scale(1.3)'
                 )
               }}
@@ -72,3 +104,8 @@ export function SkinTonePicker() {
     </Relative>
   );
 }
+
+export enum SkinTonePickerDirection {
+  VERTICAL = ClassNames.vertical,
+  HORIZONTAL = ClassNames.horizontal
+}

package/src/config/config.ts

@@ -3,6 +3,7 @@ import { emojiUrlByUnified } from '../dataUtils/emojiSelectors';
 import {
   EmojiClickData,
   EmojiStyle,
+  SkinTonePickerLocation,
   SkinTones,
   SuggestionMode,
   Theme
@@ -29,10 +30,15 @@ export function mergeConfig(
     suggestionMode: config.suggestedEmojisMode
   });
 
+  const skinTonePickerLocation = config.searchDisabled
+    ? SkinTonePickerLocation.PREVIEW
+    : config.skinTonePickerLocation;
+
   return {
     ...config,
     categories,
-    previewConfig
+    previewConfig,
+    skinTonePickerLocation
   };
 }
 
@@ -57,7 +63,9 @@ export function basePickerConfig(): PickerConfigInternal {
     previewConfig: {
       ...basePreviewConfig
     },
+    searchDisabled: false,
     searchPlaceHolder: 'Search',
+    skinTonePickerLocation: SkinTonePickerLocation.SEARCH,
     skinTonesDisabled: false,
     suggestedEmojisMode: SuggestionMode.FREQUENT,
     theme: Theme.LIGHT,
@@ -81,6 +89,8 @@ export type PickerConfigInternal = {
   height: PickerDimensions;
   width: PickerDimensions;
   getEmojiUrl: GetEmojiUrl;
+  searchDisabled: boolean;
+  skinTonePickerLocation: SkinTonePickerLocation;
 };
 
 export type PreviewConfig = {

package/src/config/useConfig.ts

@@ -3,6 +3,7 @@ import { usePickerConfig } from '../components/context/PickerConfigContext';
 import {
   EmojiClickData,
   EmojiStyle,
+  SkinTonePickerLocation,
   SkinTones,
   SuggestionMode,
   Theme
@@ -87,6 +88,16 @@ export function useEmojiVersionConfig(): string | null {
   return emojiVersion;
 }
 
+export function useSearchDisabledConfig(): boolean {
+  const { searchDisabled } = usePickerConfig();
+  return searchDisabled;
+}
+
+export function useSkinTonePickerLocationConfig(): SkinTonePickerLocation {
+  const { skinTonePickerLocation } = usePickerConfig();
+  return skinTonePickerLocation;
+}
+
 export function useGetEmojiUrlConfig(): (
   unified: string,
   style: EmojiStyle

package/src/hooks/useKeyboardNavigation.ts

@@ -38,6 +38,10 @@ import {
 } from './useFocus';
 import useIsSearchMode from './useIsSearchMode';
 import useSetVariationPicker from './useSetVariationPicker';
+import {
+  useIsSkinToneInPreview,
+  useIsSkinToneInSearch
+} from './useShouldShowSkinTonePicker';
 
 enum KeyboardEvents {
   ArrowDown = 'ArrowDown',
@@ -120,6 +124,7 @@ function useSearchInputKeyboardEvents() {
   const SearchInputRef = useSearchInputRef();
   const [, setSkinToneFanOpenState] = useSkinToneFanOpenState();
   const goDownFromSearchInput = useGoDownFromSearchInput();
+  const isSkinToneInSearch = useIsSkinToneInSearch();
 
   const onKeyDown = useMemo(
     () =>
@@ -128,6 +133,9 @@ function useSearchInputKeyboardEvents() {
 
         switch (key) {
           case KeyboardEvents.ArrowRight:
+            if (!isSkinToneInSearch) {
+              return;
+            }
             event.preventDefault();
             setSkinToneFanOpenState(true);
             focusSkinTonePicker();
@@ -171,41 +179,76 @@ function useSkinTonePickerKeyboardEvents() {
   const SearchInputRef = useSearchInputRef();
   const goDownFromSearchInput = useGoDownFromSearchInput();
   const [isOpen, setIsOpen] = useSkinToneFanOpenState();
+  const isSkinToneInPreview = useIsSkinToneInPreview();
+  const isSkinToneInSearch = useIsSkinToneInSearch();
   const onType = useOnType();
 
   const onKeyDown = useMemo(
     () =>
+      // eslint-disable-next-line complexity
       function onKeyDown(event: KeyboardEvent) {
         const { key } = event;
 
-        switch (key) {
-          case KeyboardEvents.ArrowLeft:
-            event.preventDefault();
-            if (!isOpen) {
-              return focusSearchInput();
-            }
-            focusNextSkinTone(focusSearchInput);
-            break;
-          case KeyboardEvents.ArrowRight:
-            event.preventDefault();
-            if (!isOpen) {
-              return focusSearchInput();
-            }
-            focusPrevSkinTone();
-            break;
-          case KeyboardEvents.ArrowDown:
-            event.preventDefault();
-            if (isOpen) {
-              setIsOpen(false);
-            }
-            goDownFromSearchInput();
-            break;
-          default:
-            onType(event);
-            break;
+        if (isSkinToneInSearch) {
+          switch (key) {
+            case KeyboardEvents.ArrowLeft:
+              event.preventDefault();
+              if (!isOpen) {
+                return focusSearchInput();
+              }
+              focusNextSkinTone(focusSearchInput);
+              break;
+            case KeyboardEvents.ArrowRight:
+              event.preventDefault();
+              if (!isOpen) {
+                return focusSearchInput();
+              }
+              focusPrevSkinTone();
+              break;
+            case KeyboardEvents.ArrowDown:
+              event.preventDefault();
+              if (isOpen) {
+                setIsOpen(false);
+              }
+              goDownFromSearchInput();
+              break;
+            default:
+              onType(event);
+              break;
+          }
+        }
+
+        if (isSkinToneInPreview) {
+          switch (key) {
+            case KeyboardEvents.ArrowUp:
+              event.preventDefault();
+              if (!isOpen) {
+                return focusSearchInput();
+              }
+              focusNextSkinTone(focusSearchInput);
+              break;
+            case KeyboardEvents.ArrowDown:
+              event.preventDefault();
+              if (!isOpen) {
+                return focusSearchInput();
+              }
+              focusPrevSkinTone();
+              break;
+            default:
+              onType(event);
+              break;
+          }
         }
       },
-    [isOpen, focusSearchInput, setIsOpen, goDownFromSearchInput, onType]
+    [
+      isOpen,
+      focusSearchInput,
+      setIsOpen,
+      goDownFromSearchInput,
+      onType,
+      isSkinToneInPreview,
+      isSkinToneInSearch
+    ]
   );
 
   useEffect(() => {

package/src/hooks/useShouldShowSkinTonePicker.ts

@@ -0,0 +1,22 @@
+import { useSkinTonePickerLocationConfig } from '../config/useConfig';
+import { SkinTonePickerLocation } from '../types/exposedTypes';
+
+export function useShouldShowSkinTonePicker() {
+  const skinTonePickerLocationConfig = useSkinTonePickerLocationConfig();
+
+  return function shouldShowSkinTonePicker(location: SkinTonePickerLocation) {
+    return skinTonePickerLocationConfig === location;
+  };
+}
+
+export function useIsSkinToneInSearch() {
+  const skinTonePickerLocationConfig = useSkinTonePickerLocationConfig();
+
+  return skinTonePickerLocationConfig === SkinTonePickerLocation.SEARCH;
+}
+
+export function useIsSkinToneInPreview() {
+  const skinTonePickerLocationConfig = useSkinTonePickerLocationConfig();
+
+  return skinTonePickerLocationConfig === SkinTonePickerLocation.PREVIEW;
+}

package/src/types/exposedTypes.ts

@@ -9,7 +9,7 @@ export type EmojiClickData = {
 
 export enum SuggestionMode {
   RECENT = 'recent',
-  FREQUENT = 'frequent',
+  FREQUENT = 'frequent'
 }
 
 export enum EmojiStyle {
@@ -17,13 +17,13 @@ export enum EmojiStyle {
   APPLE = 'apple',
   TWITTER = 'twitter',
   GOOGLE = 'google',
-  FACEBOOK = 'facebook',
+  FACEBOOK = 'facebook'
 }
 
 export enum Theme {
   DARK = 'dark',
   LIGHT = 'light',
-  AUTO = 'auto',
+  AUTO = 'auto'
 }
 
 export enum SkinTones {
@@ -32,7 +32,7 @@ export enum SkinTones {
   MEDIUM_LIGHT = '1f3fc',
   MEDIUM = '1f3fd',
   MEDIUM_DARK = '1f3fe',
-  DARK = '1f3ff',
+  DARK = '1f3ff'
 }
 
 export enum Categories {
@@ -44,5 +44,10 @@ export enum Categories {
   ACTIVITIES = 'activities',
   OBJECTS = 'objects',
   SYMBOLS = 'symbols',
-  FLAGS = 'flags',
+  FLAGS = 'flags'
+}
+
+export enum SkinTonePickerLocation {
+  SEARCH = 'SEARCH',
+  PREVIEW = 'PREVIEW'
 }