emoji-picker-react 4.0.0-rc.8 → 4.0.0

package/src/components/emoji/Emoji.tsx

@@ -1,69 +1,102 @@
 import clsx from 'clsx';
 import * as React from 'react';
 
+import { ClassNames } from '../../DomUtils/classNames';
 import { DataEmoji } from '../../dataUtils/DataTypes';
+import { asEmoji } from '../../dataUtils/asEmoji';
 import {
+  emojiByUnified,
   emojiHasVariations,
   emojiName,
-  emojiUnified,
+  emojiNames,
   emojiUrlByUnified
 } from '../../dataUtils/emojiSelectors';
 import { parseNativeEmoji } from '../../dataUtils/parseNativeEmoji';
-import { ClassNames } from '../../DomUtils/classNames';
-import { EmojiRef } from '../../DomUtils/emojiElementRef';
 import { EmojiStyle } from '../../types/exposedTypes';
 import { useEmojisThatFailedToLoadState } from '../context/PickerContext';
 import './Emoji.css';
 
-type Props = Readonly<{
-  hidden?: boolean;
+type ClickableEmojiProps = Readonly<
+  BaseProps & {
+    hidden?: boolean;
+    showVariations?: boolean;
+    hiddenOnSearch?: boolean;
+    emoji: DataEmoji;
+  }
+>;
+
+type BaseProps = {
+  emoji?: DataEmoji;
   emojiStyle: EmojiStyle;
-  emoji: DataEmoji;
   unified: string;
-  showVariations?: boolean;
   size?: number;
-  emojiRef?: EmojiRef;
-}>;
+  lazyLoad?: boolean;
+};
 
-export function Emoji({
+export function ClickableEmoji({
   emoji,
   unified,
   hidden,
+  hiddenOnSearch,
   emojiStyle,
   showVariations = true,
   size,
-  emojiRef
-}: Props) {
+  lazyLoad
+}: ClickableEmojiProps) {
   const hasVariations = emojiHasVariations(emoji);
 
-  const style = {} as React.CSSProperties;
-  if (size) {
-    style.width = style.height = style.fontSize = `${size}px`;
-  }
-
-  const base = {
-    style,
-    unified
-  };
-
   return (
     <button
-      className={clsx('epr-emoji', {
+      className={clsx(ClassNames.emoji, {
         [ClassNames.hidden]: hidden,
-        [ClassNames.visible]: !hidden,
-        'epr-emoji-has-variations': hasVariations && showVariations
+        [ClassNames.hiddenOnSearch]: hiddenOnSearch,
+        [ClassNames.visible]: !hidden && !hiddenOnSearch,
+        [ClassNames.emojiHasVariatios]: hasVariations && showVariations
       })}
       data-unified={unified}
-      data-original={emojiUnified(emoji)}
       // @ts-ignore - let's ignore the fact this is not a real react ref, ok?
-      ref={emojiRef}
+      aria-label={emojiName(emoji)}
+      data-full-name={emojiNames(emoji)}
     >
+      <ViewOnlyEmoji
+        unified={unified}
+        emoji={emoji}
+        size={size}
+        emojiStyle={emojiStyle}
+        lazyLoad={lazyLoad}
+      />
+    </button>
+  );
+}
+
+export function ViewOnlyEmoji({
+  emoji,
+  unified,
+  emojiStyle,
+  size,
+  lazyLoad
+}: BaseProps) {
+  const style = {} as React.CSSProperties;
+  if (size) {
+    style.width = style.height = style.fontSize = `${size}px`;
+  }
+
+  const emojiToRender = emoji ? emoji : emojiByUnified(unified);
+
+  return (
+    <>
       {emojiStyle === EmojiStyle.NATIVE ? (
-        <NativeEmoji {...base} />
+        <NativeEmoji unified={unified} style={style} />
       ) : (
-        <EmojiImg {...base} emoji={emoji} emojiStyle={emojiStyle} />
+        <EmojiImg
+          unified={unified}
+          style={style}
+          emoji={asEmoji(emojiToRender)}
+          emojiStyle={emojiStyle}
+          lazyLoad={lazyLoad}
+        />
       )}
-    </button>
+    </>
   );
 }
 
@@ -75,7 +108,11 @@ function NativeEmoji({
   style: React.CSSProperties;
 }) {
   return (
-    <span className="epr-emoji-native" data-unified={unified} style={style}>
+    <span
+      className={clsx(ClassNames.external, 'epr-emoji-native')}
+      data-unified={unified}
+      style={style}
+    >
       {parseNativeEmoji(unified)}
     </span>
   );
@@ -85,12 +122,14 @@ function EmojiImg({
   emoji,
   unified,
   emojiStyle,
-  style
+  style,
+  lazyLoad = false
 }: {
   emoji: DataEmoji;
   unified: string;
   emojiStyle: EmojiStyle;
   style: React.CSSProperties;
+  lazyLoad?: boolean;
 }) {
   const [, setEmojisThatFailedToLoad] = useEmojisThatFailedToLoadState();
 
@@ -98,8 +137,8 @@ function EmojiImg({
     <img
       src={emojiUrlByUnified(emojiStyle, unified)}
       alt={emojiName(emoji)}
-      className="epr-emoji-img"
-      loading="lazy"
+      className={clsx(ClassNames.external, 'epr-emoji-img')}
+      loading={lazyLoad ? 'lazy' : 'eager'}
       onError={onError}
       style={style}
     />

package/src/components/emoji/ExportedEmoji.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import { EmojiStyle } from '../../types/exposedTypes';
+
+import { ViewOnlyEmoji } from './Emoji';
+
+export function ExportedEmoji({
+  unified,
+  size = 32,
+  emojiStyle = EmojiStyle.APPLE,
+  lazyLoad = false
+}: {
+  unified: string;
+  emojiStyle?: EmojiStyle;
+  size?: number;
+  lazyLoad?: boolean;
+}) {
+  if (!unified) {
+    return null;
+  }
+
+  return (
+    <ViewOnlyEmoji
+      unified={unified}
+      size={size}
+      emojiStyle={emojiStyle}
+      lazyLoad={lazyLoad}
+    />
+  );
+}

package/src/components/footer/Preview.css

@@ -1,5 +1,5 @@
 .EmojiPickerReact .epr-preview {
-  padding: 10px;
+  padding: 0 var(--epr-horizontal-padding);
   z-index: 1;
   align-items: center;
   border-top: 1px solid var(--epr-preview-border-color);

package/src/components/footer/Preview.tsx

@@ -1,37 +1,34 @@
 import * as React from 'react';
 import { useState } from 'react';
 
-import {
-  useEmojiStyleConfig,
-  useShowPreviewConfig
-} from '../../config/useConfig';
+import { useEmojiStyleConfig, usePreviewConfig } from '../../config/useConfig';
 import { asEmoji } from '../../dataUtils/asEmoji';
 import {
   emojiByUnified,
   emojiName,
   emojiUnified
 } from '../../dataUtils/emojiSelectors';
-import { useEmojiMouseEnter } from '../../hooks/useEmojiMouseEnter';
+import { useEmojiPreviewEvents } from '../../hooks/useEmojiPreviewEvents';
 import Flex from '../Layout/Flex';
-import { Emoji } from '../emoji/Emoji';
-import './Preview.css';
 import { useEmojiVariationPickerState } from '../context/PickerContext';
+import { ViewOnlyEmoji } from '../emoji/Emoji';
+import './Preview.css';
 
 export function Preview() {
-  const showPreview = useShowPreviewConfig();
-  const [hoveredEmoji, setHoveredEmoji] = useState<HoveredEmoji>(null);
+  const previewConfig = usePreviewConfig();
+  const [previewEmoji, setPreviewEmoji] = useState<PreviewEmoji>(null);
   const emojiStyle = useEmojiStyleConfig();
   const [variationPickerEmoji] = useEmojiVariationPickerState();
 
-  useEmojiMouseEnter(showPreview, setHoveredEmoji);
+  useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
 
-  if (!showPreview) {
+  if (!previewConfig.showPreview) {
     return null;
   }
 
-  const emoji = emojiByUnified(hoveredEmoji?.originalUnified);
+  const emoji = emojiByUnified(previewEmoji?.originalUnified);
 
-  const show = emoji != null && hoveredEmoji != null;
+  const show = emoji != null && previewEmoji != null;
 
   return (
     <Flex className="epr-preview">
@@ -41,31 +38,27 @@ export function Preview() {
 
   function PreviewContent() {
     const defaultEmoji = asEmoji(
-      variationPickerEmoji ?? emojiByUnified('1f60a')
+      variationPickerEmoji ?? emojiByUnified(previewConfig.defaultEmoji)
     );
     const defaultText = variationPickerEmoji
       ? emojiName(variationPickerEmoji)
-      : "What's your mood?";
+      : previewConfig.defaultCaption;
 
     return (
       <>
         <div>
           {show ? (
-            <Emoji
-              unified={hoveredEmoji?.unified as string}
+            <ViewOnlyEmoji
+              unified={previewEmoji?.unified as string}
               emoji={asEmoji(emoji)}
-              showVariations={false}
               emojiStyle={emojiStyle}
-              hidden={false}
               size={45}
             />
           ) : defaultEmoji ? (
-            <Emoji
+            <ViewOnlyEmoji
               unified={emojiUnified(defaultEmoji)}
               emoji={defaultEmoji}
-              showVariations={false}
               emojiStyle={emojiStyle}
-              hidden={false}
               size={45}
             />
           ) : null}
@@ -82,7 +75,7 @@ export function Preview() {
   }
 }
 
-export type HoveredEmoji = null | {
+export type PreviewEmoji = null | {
   unified: string;
   originalUnified: string;
 };

package/src/components/header/Search.css

@@ -7,12 +7,12 @@
 .EmojiPickerReact .epr-search-container input.epr-search {
   outline: none;
   transition: all 0.2s ease-in-out;
-  color: var(--epr-search-bar-text-color);
+  color: var(--epr-search-input-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);
+  background-color: var(--epr-search-input-bg-color);
+  border: 1px solid var(--epr-search-input-bg-color);
   width: 100%;
 }
 
@@ -24,7 +24,7 @@
   background-repeat: no-repeat;
   position: absolute;
   top: 50%;
-  right: 10px;
+  right: var(--epr-search-bar-inner-padding);
   transform: translateY(-50%);
   background-size: 20px;
 }
@@ -48,7 +48,7 @@
   content: '';
   position: absolute;
   top: 50%;
-  left: 10px;
+  left: var(--epr-search-bar-inner-padding);
   transform: translateY(-50%);
   width: 20px;
   height: 20px;
@@ -63,10 +63,10 @@
 }
 
 .EmojiPickerReact .epr-search-container input.epr-search::placeholder {
-  color: var(--epr-search-bar-placeholder-color);
+  color: var(--epr-search-input-placeholder-color);
 }
 
 .EmojiPickerReact .epr-search-container input.epr-search:focus {
-  background-color: var(--epr-search-bar-bg-color-active);
+  background-color: var(--epr-search-input-bg-color-active);
   border: 1px solid var(--epr-search-border-color);
 }

package/src/components/header/Search.tsx

@@ -1,30 +1,43 @@
+import clsx from 'clsx';
 import * as React from 'react';
+import { useState } from 'react';
 
 import {
   useAutoFocusSearchConfig,
   useSearchPlaceHolderConfig
 } from '../../config/useConfig';
 import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
-import { useFilter } from '../../hooks/useFilter';
+import { useClearSearch, useFilter } from '../../hooks/useFilter';
 import Relative from '../Layout/Relative';
+import { useSearchInputRef } from '../context/ElementRefContext';
+
 import './Search.css';
 
 export function Search() {
-  const { closeAllOpenToggles } = useCloseAllOpenToggles();
-
+  const [inc, setInc] = useState(0);
+  const closeAllOpenToggles = useCloseAllOpenToggles();
+  const SearchInputRef = useSearchInputRef();
+  const clearSearch = useClearSearch();
   const placeholder = useSearchPlaceHolderConfig();
   const autoFocus = useAutoFocusSearchConfig();
-  const { onChange, searchTerm, clearSearch, SearchInputRef } = useFilter();
+  const { onChange } = useFilter();
+
+  const input = SearchInputRef?.current;
+  const value = input?.value;
 
   return (
     <Relative className="epr-search-container">
+      <CssSearch value={value} />
       <input
+        // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={autoFocus}
+        aria-label={'Type to search for an emoji'}
         onFocus={closeAllOpenToggles}
         className="epr-search"
         type="text"
         placeholder={placeholder}
         onChange={event => {
+          setInc(inc + 1);
           setTimeout(() => {
             onChange(event.target.value);
           });
@@ -32,9 +45,20 @@ export function Search() {
         ref={SearchInputRef}
       />
       <div className="epr-icn-search" />
-      {searchTerm ? (
-        <button className="epr-btn-clear-search" onClick={clearSearch} />
-      ) : null}
+      <button
+        className={clsx('epr-btn-clear-search', 'epr-visible-on-search-only')}
+        onClick={clearSearch}
+      />
     </Relative>
   );
 }
+
+function CssSearch({ value }: { value: undefined | string }) {
+  return value ? (
+    <style>{`
+        .EmojiPickerReact button.epr-emoji:not([data-full-name*="${value}"]) {
+          display: none;
+        }
+  `}</style>
+  ) : null;
+}

package/src/components/header/SkinTonePicker.css

@@ -1,5 +1,8 @@
 .EmojiPickerReact .epr-skin-tones {
-  /* margin: 0 5px 0 15px; */
+  --epr-skin-tone-size: 16px;
+}
+
+.EmojiPickerReact .epr-skin-tones {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -13,8 +16,8 @@
 
 .EmojiPickerReact .epr-skin-tone-select {
   position: relative;
-  width: 16px;
-  height: 16px;
+  width: var(--epr-skin-tone-size);
+  height: var(--epr-skin-tone-size);
 }
 
 .EmojiPickerReact .epr-skin-tones.open .epr-tone {
@@ -26,7 +29,7 @@
   opacity: 0;
 }
 
-.EmojiPickerReact .epr-skin-tones .epr-tone.active {
+.EmojiPickerReact .epr-skin-tones .epr-tone.epr-active {
   z-index: 1;
 }
 
@@ -34,8 +37,8 @@
   display: block;
   cursor: pointer;
   border-radius: 4px;
-  height: 100%;
-  width: 100%;
+  height: var(--epr-skin-tone-size);
+  width: var(--epr-skin-tone-size);
   position: absolute;
   right: 0;
   transition: transform 0.3s ease-in-out, opacity 0.5s ease-in-out;
@@ -47,10 +50,14 @@
   box-shadow: 0 0 0 5px var(--epr-active-skin-hover-color);
 }
 
+.EmojiPickerReact .epr-skin-tones .epr-tone:focus {
+  box-shadow: 0 0 0 5px var(--epr-focus-bg-color);
+}
+
 .EmojiPickerReact
   .epr-skin-tones.open
   .epr-skin-tone-select
-  .epr-tone.active:after {
+  .epr-tone.epr-active:after {
   content: '';
   position: absolute;
   top: -2px;
@@ -61,7 +68,7 @@
   border: 1px solid var(--epr-active-skin-tone-indicator-border-color);
 }
 
-.EmojiPickerReact .epr-skin-tones .epr-tone.active {
+.EmojiPickerReact .epr-skin-tones .epr-tone.epr-active {
   opacity: 1;
   z-index: 1;
 }

package/src/components/header/SkinTonePicker.tsx

@@ -1,10 +1,16 @@
 import clsx from 'clsx';
 import * as React from 'react';
 
+import { ClassNames } from '../../DomUtils/classNames';
 import { useSkinTonesDisabledConfig } from '../../config/useConfig';
-import skinToneVariations from '../../data/skinToneVariations';
+import skinToneVariations, {
+  skinTonesNamed
+} from '../../data/skinToneVariations';
 import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
+import { useFocusSearchInput } from '../../hooks/useFocus';
+import { SkinTones } from '../../types/exposedTypes';
 import Relative from '../Layout/Relative';
+import { useSkinTonePickerRef } from '../context/ElementRefContext';
 import {
   useActiveSkinToneState,
   useSkinToneFanOpenState
@@ -12,10 +18,12 @@ import {
 import './SkinTonePicker.css';
 
 export function SkinTonePicker() {
+  const SkinTonePickerRef = useSkinTonePickerRef();
   const isDisabled = useSkinTonesDisabledConfig();
   const [isOpen, setIsOpen] = useSkinToneFanOpenState();
   const [activeSkinTone, setActiveSkinTone] = useActiveSkinToneState();
-  const { closeAllOpenToggles } = useCloseAllOpenToggles();
+  const closeAllOpenToggles = useCloseAllOpenToggles();
+  const focusSearchInput = useFocusSearchInput();
 
   if (isDisabled) {
     return null;
@@ -27,7 +35,7 @@ export function SkinTonePicker() {
         open: isOpen
       })}
     >
-      <div className="epr-skin-tone-select" onClick={() => setIsOpen(!isOpen)}>
+      <div className="epr-skin-tone-select" ref={SkinTonePickerRef}>
         {skinToneVariations.map((skinToneVariation, i) => {
           const active = skinToneVariation === activeSkinTone;
           return (
@@ -39,13 +47,23 @@ export function SkinTonePicker() {
                 )
               }}
               onClick={() => {
-                isOpen && setActiveSkinTone(skinToneVariation);
+                if (isOpen) {
+                  setActiveSkinTone(skinToneVariation);
+                  focusSearchInput();
+                } else {
+                  setIsOpen(true);
+                }
                 closeAllOpenToggles();
               }}
               key={skinToneVariation}
               className={clsx(`epr-tone-${skinToneVariation}`, 'epr-tone', {
-                active
+                [ClassNames.active]: active
               })}
+              tabIndex={isOpen ? 0 : -1}
+              aria-pressed={active}
+              aria-label={`Skin tone ${
+                skinTonesNamed[skinToneVariation as SkinTones]
+              }`}
             ></button>
           );
         })}

package/src/components/main/PickerMain.css

@@ -6,6 +6,4 @@ aside.EmojiPickerReact.epr-main {
   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

@@ -1,9 +1,11 @@
 import clsx from 'clsx';
 import * as React from 'react';
 
-import { useThemeConfig } from '../../config/useConfig';
 import { ClassNames } from '../../DomUtils/classNames';
+import { usePickerSizeConfig, useThemeConfig } from '../../config/useConfig';
 import useIsSearchMode from '../../hooks/useIsSearchMode';
+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';
@@ -29,6 +31,16 @@ function PickerRootElement({ children }: RootProps) {
   const theme = useThemeConfig();
   const searchModeActive = useIsSearchMode();
   const PickerMainRef = usePickerMainRef();
+  const { height, width } = usePickerSizeConfig();
+
+  useKeyboardNavigation();
+  useOnFocus();
+
+  const style = {
+    height: `${height}px`,
+    width: `${width}px`
+  };
+
   return (
     <aside
       className={clsx('EmojiPickerReact', 'epr-main', {
@@ -36,6 +48,7 @@ function PickerRootElement({ children }: RootProps) {
         'epr-dark-theme': theme === Theme.DARK
       })}
       ref={PickerMainRef}
+      style={style}
     >
       {children}
     </aside>

package/src/components/navigation/CategoryNavigation.css

@@ -15,24 +15,52 @@
   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 {
+.EmojiPickerReact .epr-category-nav > button.epr-cat-btn:focus:before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  border: 2px solid var(--epr-category-icon-active-color);
+  border-radius: 50%;
+}
+
+aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown))
+  .epr-category-nav {
   opacity: 0.3;
   cursor: default;
   pointer-events: none;
 }
 
+.EmojiPickerReact.epr-search-active .epr-category-nav {
+  opacity: 0.3;
+  cursor: default;
+  pointer-events: none;
+}
+aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown))
+  .epr-category-nav {
+  opacity: 0.3;
+  cursor: default;
+  pointer-events: none;
+}
+.EmojiPickerReact.epr-search-active .epr-category-nav {
+  opacity: 0.3;
+  cursor: default;
+  pointer-events: none;
+}
+aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown))
+  .epr-category-nav
+  > button.epr-cat-btn:hover {
+  opacity: 1;
+  background-position-y: var(--epr-category-navigation-button-size);
+}
 .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 {
+  > button.epr-cat-btn.epr-active {
   opacity: 1;
   background-position-y: var(--epr-category-navigation-button-size);
 }
@@ -45,15 +73,18 @@
   background-position-y: calc(var(--epr-category-navigation-button-size) * 2);
 }
 
+aside.EmojiPickerReact.epr-main:has(input:placeholder-shown) .epr-category-nav {
+  background-position-y: calc(var(--epr-category-navigation-button-size) * 3);
+}
 .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 {
+  > button.epr-cat-btn.epr-active {
   background-position-y: calc(var(--epr-category-navigation-button-size) * 3);
 }
-.EmojiPickerReact button.epr-cat-btn.epr-icn-recently_used {
+.EmojiPickerReact button.epr-cat-btn.epr-icn-suggested {
   background-position-x: calc(var(--epr-category-navigation-button-size) * -8);
 }
 .EmojiPickerReact button.epr-cat-btn.epr-icn-activities {