emoji-picker-react 4.0.0-rc.21 → 4.0.0-rc.24

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-rc.21",
+  "version": "4.0.0-rc.24",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/body/EmojiList.tsx

@@ -17,7 +17,7 @@ import {
   useActiveSkinToneState,
   useIsPastInitialLoad
 } from '../context/PickerContext';
-import { Emoji } from '../emoji/Emoji';
+import { ClickableEmoji } from '../emoji/Emoji';
 
 import { EmojiCategory } from './EmojiCategory';
 import { Suggested } from './Suggested';
@@ -81,7 +81,7 @@ function RenderCategory({
     }
 
     return (
-      <Emoji
+      <ClickableEmoji
         key={unified}
         emoji={emoji}
         unified={unified}

package/src/components/body/EmojiVariationPicker.tsx

@@ -20,7 +20,7 @@ import {
   useSetAnchoredEmojiRef
 } from '../context/ElementRefContext';
 import { useEmojiVariationPickerState } from '../context/PickerContext';
-import { Emoji } from '../emoji/Emoji';
+import { ClickableEmoji } from '../emoji/Emoji';
 import './EmojiVariationPicker.css';
 
 enum Direction {
@@ -63,7 +63,7 @@ export function EmojiVariationPicker() {
             .concat(emojiVariations(safeEmoji))
             .slice(0, 6)
             .map(unified => (
-              <Emoji
+              <ClickableEmoji
                 key={unified}
                 emoji={safeEmoji}
                 unified={unified}

package/src/components/body/Suggested.tsx

@@ -11,7 +11,7 @@ import {
   useSearchTermState,
   useUpdateSuggested
 } from '../context/PickerContext';
-import { Emoji } from '../emoji/Emoji';
+import { ClickableEmoji } from '../emoji/Emoji';
 
 import { EmojiCategory } from './EmojiCategory';
 
@@ -46,7 +46,7 @@ export function Suggested({ categoryConfig }: Props) {
         }
 
         return (
-          <Emoji
+          <ClickableEmoji
             showVariations={false}
             unified={suggestedItem.unified}
             emojiStyle={emojiStyle}

package/src/components/emoji/Emoji.css

@@ -2,6 +2,8 @@
   position: relative;
   padding: var(--epr-emoji-padding);
   border-radius: 8px;
+  width: var(--epr-emoji-fullsize);
+  height: var(--epr-emoji-fullsize);
 }
 
 .EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:after {
@@ -44,6 +46,6 @@
   background-color: var(--epr-emoji-hover-color);
 }
 
-.EmojiPickerReact button.epr-emoji:focus-visible {
+.EmojiPickerReact button.epr-emoji:focus {
   background-color: var(--epr-focus-bg-color);
 }

package/src/components/emoji/Emoji.tsx

@@ -14,18 +14,23 @@ 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;
+    emojiRef?: EmojiRef;
+  }
+>;
+
+type BaseProps = {
   emojiStyle: EmojiStyle;
   emoji: DataEmoji;
   unified: string;
-  showVariations?: boolean;
   size?: number;
-  emojiRef?: EmojiRef;
   lazyLoad?: boolean;
-}>;
+};
 
-export function Emoji({
+export function ClickableEmoji({
   emoji,
   unified,
   hidden,
@@ -34,19 +39,9 @@ export function Emoji({
   size,
   emojiRef,
   lazyLoad
-}: Props) {
+}: 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(ClassNames.emoji, {
@@ -58,17 +53,43 @@ export function Emoji({
       // @ts-ignore - let's ignore the fact this is not a real react ref, ok?
       ref={emojiRef}
     >
+      <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`;
+  }
+
+  return (
+    <>
       {emojiStyle === EmojiStyle.NATIVE ? (
-        <NativeEmoji {...base} />
+        <NativeEmoji unified={unified} style={style} />
       ) : (
         <EmojiImg
-          {...base}
+          unified={unified}
+          style={style}
           emoji={emoji}
           emojiStyle={emojiStyle}
           lazyLoad={lazyLoad}
         />
       )}
-    </button>
+    </>
   );
 }
 

package/src/components/footer/Preview.tsx

@@ -11,7 +11,7 @@ import {
 import { useEmojiPreviewEvents } from '../../hooks/useEmojiPreviewEvents';
 import Flex from '../Layout/Flex';
 import { useEmojiVariationPickerState } from '../context/PickerContext';
-import { Emoji } from '../emoji/Emoji';
+import { ViewOnlyEmoji } from '../emoji/Emoji';
 import './Preview.css';
 
 export function Preview() {
@@ -48,21 +48,17 @@ export function Preview() {
       <>
         <div>
           {show ? (
-            <Emoji
+            <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}

package/src/components/header/SkinTonePicker.css

@@ -50,7 +50,7 @@
   box-shadow: 0 0 0 5px var(--epr-active-skin-hover-color);
 }
 
-.EmojiPickerReact .epr-skin-tones .epr-tone:focus-visible {
+.EmojiPickerReact .epr-skin-tones .epr-tone:focus {
   box-shadow: 0 0 0 5px var(--epr-focus-bg-color);
 }
 

package/src/components/header/SkinTonePicker.tsx

@@ -5,6 +5,7 @@ import { ClassNames } from '../../DomUtils/classNames';
 import { useSkinTonesDisabledConfig } from '../../config/useConfig';
 import skinToneVariations from '../../data/skinToneVariations';
 import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
+import { useFocusSearchInput } from '../../hooks/useFocus';
 import Relative from '../Layout/Relative';
 import { useSkinTonePickerRef } from '../context/ElementRefContext';
 import {
@@ -19,6 +20,7 @@ export function SkinTonePicker() {
   const [isOpen, setIsOpen] = useSkinToneFanOpenState();
   const [activeSkinTone, setActiveSkinTone] = useActiveSkinToneState();
   const closeAllOpenToggles = useCloseAllOpenToggles();
+  const focusSearchInput = useFocusSearchInput();
 
   if (isDisabled) {
     return null;
@@ -46,7 +48,10 @@ export function SkinTonePicker() {
                 )
               }}
               onClick={() => {
-                isOpen && setActiveSkinTone(skinToneVariation);
+                if (isOpen) {
+                  setActiveSkinTone(skinToneVariation);
+                  focusSearchInput();
+                }
                 closeAllOpenToggles();
               }}
               key={skinToneVariation}