emoji-picker-react 4.4.0-rc.1 → 4.4.0

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.4.0-rc.1",
+  "version": "4.4.0",
   "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

@@ -1,9 +1,9 @@
 import { GetEmojiUrl } from '../components/emoji/Emoji';
-import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiUrlByUnified } from '../dataUtils/emojiSelectors';
 import {
   EmojiClickData,
   EmojiStyle,
+  SkinTonePickerLocation,
   SkinTones,
   SuggestionMode,
   Theme
@@ -30,10 +30,15 @@ export function mergeConfig(
     suggestionMode: config.suggestedEmojisMode
   });
 
+  const skinTonePickerLocation = config.searchDisabled
+    ? SkinTonePickerLocation.PREVIEW
+    : config.skinTonePickerLocation;
+
   return {
     ...config,
     categories,
-    previewConfig
+    previewConfig,
+    skinTonePickerLocation
   };
 }
 
@@ -58,8 +63,9 @@ export function basePickerConfig(): PickerConfigInternal {
     previewConfig: {
       ...basePreviewConfig
     },
+    searchDisabled: false,
     searchPlaceHolder: 'Search',
-    showEmoji: undefined,
+    skinTonePickerLocation: SkinTonePickerLocation.SEARCH,
     skinTonesDisabled: false,
     suggestedEmojisMode: SuggestionMode.FREQUENT,
     theme: Theme.LIGHT,
@@ -83,7 +89,8 @@ export type PickerConfigInternal = {
   height: PickerDimensions;
   width: PickerDimensions;
   getEmojiUrl: GetEmojiUrl;
-  showEmoji: undefined | ((emoji: DataEmoji) => boolean);
+  searchDisabled: boolean;
+  skinTonePickerLocation: SkinTonePickerLocation;
 };
 
 export type PreviewConfig = {

package/src/config/useConfig.ts

@@ -1,9 +1,9 @@
 import { isSystemDarkTheme } from '../DomUtils/isDarkTheme';
 import { usePickerConfig } from '../components/context/PickerConfigContext';
-import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   EmojiClickData,
   EmojiStyle,
+  SkinTonePickerLocation,
   SkinTones,
   SuggestionMode,
   Theme
@@ -88,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
@@ -96,13 +106,6 @@ export function useGetEmojiUrlConfig(): (
   return getEmojiUrl;
 }
 
-export function useShowEmojiConfig():
-  | undefined
-  | ((emoji: DataEmoji) => boolean) {
-  const { showEmoji } = usePickerConfig();
-  return showEmoji;
-}
-
 function getDimension(dimensionConfig: PickerDimensions): PickerDimensions {
   return typeof dimensionConfig === 'number'
     ? `${dimensionConfig}px`

package/src/hooks/useDisallowedEmojis.ts

@@ -1,41 +1,28 @@
 import { useRef, useMemo } from 'react';
 
-import { useEmojiVersionConfig, useShowEmojiConfig } from '../config/useConfig';
+import { useEmojiVersionConfig } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { addedIn, allEmojis, emojiUnified } from '../dataUtils/emojiSelectors';
-import isFunction from '../predicates/isFunction';
 
 export function useDisallowedEmojis() {
   const DisallowedEmojisRef = useRef<Record<string, boolean>>({});
   const emojiVersionConfig = useEmojiVersionConfig();
-  const shouldShowEmoji = useShowEmojiConfig();
 
   return useMemo(() => {
     const emojiVersion = parseFloat(`${emojiVersionConfig}`);
 
-    if (
-      (!emojiVersionConfig || Number.isNaN(emojiVersion)) &&
-      !shouldShowEmoji
-    ) {
+    if (!emojiVersionConfig || Number.isNaN(emojiVersion)) {
       return DisallowedEmojisRef.current;
     }
 
     return allEmojis.reduce((disallowedEmojis, emoji) => {
-      if (isFunction(shouldShowEmoji) && !shouldShowEmoji(emoji)) {
-        disallowEmoji();
-      }
-
       if (addedInNewerVersion(emoji, emojiVersion)) {
-        disallowEmoji();
+        disallowedEmojis[emojiUnified(emoji)] = true;
       }
 
       return disallowedEmojis;
-
-      function disallowEmoji() {
-        disallowedEmojis[emojiUnified(emoji)] = true;
-      }
     }, DisallowedEmojisRef.current);
-  }, [emojiVersionConfig, shouldShowEmoji]);
+  }, [emojiVersionConfig]);
 }
 
 function addedInNewerVersion(

package/src/hooks/useFilter.ts

@@ -1,16 +1,15 @@
 import { scrollTo } from '../DomUtils/scrollTo';
 import {
   usePickerMainRef,
-  useSearchInputRef
+  useSearchInputRef,
 } from '../components/context/ElementRefContext';
 import {
   FilterState,
   useFilterRef,
-  useSearchTermState
+  useSearchTermState,
 } from '../components/context/PickerContext';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiNames } from '../dataUtils/emojiSelectors';
-import isFunction from '../predicates/isFunction';
 
 import { useFocusSearchInput } from './useFocus';
 
@@ -20,7 +19,7 @@ function useSetFilterRef() {
   return function setFilter(
     setter: FilterState | ((current: FilterState) => FilterState)
   ): void {
-    if (isFunction(setter)) {
+    if (typeof setter === 'function') {
       return setFilter(setter(filterRef.current));
     }
 
@@ -68,7 +67,7 @@ export function useFilter() {
   return {
     onChange,
     searchTerm,
-    SearchInputRef
+    SearchInputRef,
   };
 
   function onChange(inputValue: string) {
@@ -88,9 +87,9 @@ export function useFilter() {
       return applySearch(nextValue);
     }
 
-    setFilterRef(current =>
+    setFilterRef((current) =>
       Object.assign(current, {
-        [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue)
+        [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue),
       })
     );
     applySearch(nextValue);
@@ -130,14 +129,14 @@ function filterEmojiObjectByKeyword(
 }
 
 function hasMatch(emoji: DataEmoji, keyword: string): boolean {
-  return emojiNames(emoji).some(name => name.includes(keyword));
+  return emojiNames(emoji).some((name) => name.includes(keyword));
 }
 
 export function useIsEmojiFiltered(): (unified: string) => boolean {
   const { current: filter } = useFilterRef();
   const [searchTerm] = useSearchTermState();
 
-  return unified => isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
+  return (unified) => isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
 }
 
 function isEmojiFilteredBySearchTerm(
@@ -168,7 +167,7 @@ function findLongestMatch(
 
   const longestMatchingKey = Object.keys(dict)
     .sort((a, b) => b.length - a.length)
-    .find(key => keyword.includes(key));
+    .find((key) => keyword.includes(key));
 
   if (longestMatchingKey) {
     return dict[longestMatchingKey];