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

package/src/DomUtils/selectors.ts

@@ -4,14 +4,26 @@ import {
   unifiedWithoutSkinTone
 } from '../dataUtils/emojiSelectors';
 
-export function buttonFromEmoji(
-  emojiElement: HTMLElement | null
+import { asSelectors, ClassNames } from './classNames';
+import { firstVisibleElementInContainer } from './elementPositionInRow';
+
+export type NullableElement = HTMLElement | null;
+
+export const EmojiButtonSelector = `button${asSelectors(ClassNames.emoji)}`;
+export const VisibleEmojiSelector = [
+  EmojiButtonSelector,
+  asSelectors(ClassNames.visible),
+  `:not(${asSelectors(ClassNames.hidden)})`
+].join('');
+
+export function buttonFromTarget(
+  emojiElement: NullableElement
 ): HTMLButtonElement | null {
-  return emojiElement?.closest('button.epr-emoji') ?? null;
+  return emojiElement?.closest(EmojiButtonSelector) ?? null;
 }
 
 export function emojiFromElement(
-  element: HTMLElement | null
+  element: NullableElement
 ): [DataEmoji, string] | [] {
   const originalUnified = originalUnifiedFromEmojiElement(element);
   const unified = unifiedFromEmojiElement(element);
@@ -29,65 +41,57 @@ export function emojiFromElement(
   return [emoji, unified as string];
 }
 
-export function isEmojiElement(element: HTMLElement | null): boolean {
+export function isEmojiElement(element: NullableElement): boolean {
   return Boolean(
-    element?.matches('button.epr-emoji') ||
-      element?.parentElement?.matches('button.epr-emoji')
+    element?.matches(EmojiButtonSelector) ||
+      element?.parentElement?.matches(EmojiButtonSelector)
   );
 }
 
-export function closestCategory(
-  element: HTMLElement | null
-): HTMLElement | null {
-  return element?.closest('.epr-emoji-category') ?? null;
-}
-
 export function categoryLabelFromCategory(
-  category: HTMLElement | null
-): HTMLElement | null {
-  return category?.querySelector('.epr-emoji-category-label') ?? null;
+  category: NullableElement
+): NullableElement {
+  return category?.querySelector(asSelectors(ClassNames.label)) ?? null;
 }
 
 export function closestCategoryLabel(
-  element: null | HTMLElement
-): HTMLElement | null {
+  element: NullableElement
+): NullableElement {
   const category = closestCategory(element);
   return categoryLabelFromCategory(category);
 }
 
-export function elementHeight(element: HTMLElement | null): number {
+export function elementHeight(element: NullableElement): number {
   return element?.clientHeight ?? 0;
 }
 
-export function emojiTrueOffsetTop(element: HTMLElement | null): number {
-  const button = buttonFromEmoji(element);
+export function emojiTrueOffsetTop(element: NullableElement): number {
+  const button = buttonFromTarget(element);
   const category = closestCategory(button);
 
   return elementOffsetTop(button) + elementOffsetTop(category);
 }
-export function emojiTruOffsetLeft(element: HTMLElement | null): number {
-  const button = buttonFromEmoji(element);
+export function emojiTruOffsetLeft(element: NullableElement): number {
+  const button = buttonFromTarget(element);
   const category = closestCategory(button);
 
   return elementOffsetLeft(button) + elementOffsetLeft(category);
 }
 
-function elementOffsetTop(element: HTMLElement | null): number {
+function elementOffsetTop(element: NullableElement): number {
   return element?.offsetTop ?? 0;
 }
 
-function elementOffsetLeft(element: HTMLElement | null): number {
+function elementOffsetLeft(element: NullableElement): number {
   return element?.offsetLeft ?? 0;
 }
 
-export function unifiedFromEmojiElement(
-  emoji: HTMLElement | null
-): string | null {
-  return elementDataSetKey(buttonFromEmoji(emoji), 'unified') ?? null;
+export function unifiedFromEmojiElement(emoji: NullableElement): string | null {
+  return elementDataSetKey(buttonFromTarget(emoji), 'unified') ?? null;
 }
 
 export function originalUnifiedFromEmojiElement(
-  emoji: HTMLElement | null
+  emoji: NullableElement
 ): string | null {
   const unified = unifiedFromEmojiElement(emoji);
 
@@ -98,12 +102,133 @@ export function originalUnifiedFromEmojiElement(
 }
 
 function elementDataSetKey(
-  element: HTMLElement | null,
+  element: NullableElement,
   key: string
 ): string | null {
   return elementDataSet(element)[key] ?? null;
 }
 
-function elementDataSet(element: HTMLElement | null): DOMStringMap {
+function elementDataSet(element: NullableElement): DOMStringMap {
   return element?.dataset ?? {};
 }
+
+export function isVisibleEmoji(element: HTMLElement) {
+  return element.classList.contains(ClassNames.visible);
+}
+
+export function isHidden(element: NullableElement) {
+  if (!element) return true;
+
+  return element.classList.contains(ClassNames.hidden);
+}
+
+export function allVisibleEmojis(parent: NullableElement) {
+  if (!parent) {
+    return [];
+  }
+
+  return Array.from(
+    parent.querySelectorAll(VisibleEmojiSelector)
+  ) as HTMLElement[];
+}
+
+export function lastVisibleEmoji(element: NullableElement): NullableElement {
+  if (!element) return null;
+
+  const allEmojis = allVisibleEmojis(element);
+  const [last] = allEmojis.slice(-1);
+  if (!last) {
+    return null;
+  }
+
+  if (!isVisibleEmoji(last)) {
+    return prevVisibleEmoji(last);
+  }
+
+  return last;
+}
+
+export function nextVisibleEmoji(element: HTMLElement): NullableElement {
+  const next = element.nextElementSibling as HTMLElement;
+
+  if (!next) {
+    return firstVisibleEmoji(nextCategory(element));
+  }
+
+  if (!isVisibleEmoji(next)) {
+    return nextVisibleEmoji(next);
+  }
+
+  return next;
+}
+
+export function prevVisibleEmoji(element: HTMLElement): NullableElement {
+  const prev = element.previousElementSibling as HTMLElement;
+
+  if (!prev) {
+    return lastVisibleEmoji(prevCategory(element));
+  }
+
+  if (!isVisibleEmoji(prev)) {
+    return prevVisibleEmoji(prev);
+  }
+
+  return prev;
+}
+
+export function firstVisibleEmoji(parent: NullableElement) {
+  if (!parent) {
+    return null;
+  }
+
+  const allEmojis = allVisibleEmojis(parent);
+
+  return firstVisibleElementInContainer(parent, allEmojis);
+}
+
+export function prevCategory(element: NullableElement): NullableElement {
+  const category = closestCategory(element);
+
+  if (!category) {
+    return null;
+  }
+
+  const prev = category.previousElementSibling as HTMLElement;
+
+  if (!prev) {
+    return null;
+  }
+
+  if (isHidden(prev)) {
+    return prevCategory(prev);
+  }
+
+  return prev;
+}
+
+export function nextCategory(element: NullableElement): NullableElement {
+  const category = closestCategory(element);
+
+  if (!category) {
+    return null;
+  }
+
+  const next = category.nextElementSibling as HTMLElement;
+
+  if (!next) {
+    return null;
+  }
+
+  if (isHidden(next)) {
+    return nextCategory(next);
+  }
+
+  return next;
+}
+
+export function closestCategory(element: NullableElement) {
+  if (!element) {
+    return null;
+  }
+  return element.closest(asSelectors(ClassNames.category)) as HTMLElement;
+}

package/src/EmojiPickerReact.css

@@ -1,50 +1,75 @@
 .EmojiPickerReact {
   --epr-highlight-color: #007aeb;
   --epr-hover-bg-color: #f1f8ff;
+  --epr-focus-bg-color: #e0f0ff;
   --epr-text-color: #858585;
-  --epr-search-bar-bg-color: #f6f6f6;
-  --epr-category-label-bg-color: #ffffffe6;
+  --epr-search-input-bg-color: #f6f6f6;
   --epr-picker-border-color: #e7e7e7;
   --epr-bg-color: #fff;
-  --epr-emoji-variation-indicator-color: var(--epr-picker-border-color);
-  --epr-emoji-variation-indicator-color-hover: var(--epr-text-color);
+  --epr-category-icon-active-color: #6aa8de;
 
+  --epr-horizontal-padding: 10px;
+
+  /*  Picker Dimensions */
   --epr-picker-width: 350px;
   --epr-picker-height: 450px;
-  --epr-emoji-size: 30px;
-  --epr-category-navigation-button-size: 30px;
-  --epr-emoji-variation-picker-bg-color: var(--epr-bg-color);
-  --epr-emoji-variation-picker-height: 55px;
-  --epr-preview-height: 70px;
-  --epr-preview-text-color: var(--epr-text-color);
-  --epr-preview-text-size: 14px;
-  --epr-preview-text-padding: 0 10px;
-  --epr-active-category-indicator-color: var(--epr-highlight-color);
-  --epr-active-skin-tone-indicator-border-color: var(--epr-highlight-color);
+  --epr-picker-border-radius: 8px;
+
+  /* Header */
   --epr-search-border-color: var(--epr-highlight-color);
+  --epr-header-padding: 15px var(--epr-horizontal-padding);
+
+  /* Skin Tone Picker */
+  --epr-active-skin-tone-indicator-border-color: var(--epr-highlight-color);
   --epr-active-skin-hover-color: var(--epr-hover-bg-color);
-  --epr-emoji-hover-color: var(--epr-hover-bg-color);
-  --epr-category-label-text-color: var(--epr-text-color);
-  --epr-emoji-padding: 5px;
-  --epr-header-padding: 15px 10px;
-  --epr-emoji-gap: 2px;
-  --epr-category-padding: 0 10px;
+
+  /* Search */
+  --epr-search-input-bg-color-active: var(--epr-search-input-bg-color);
   --epr-search-input-padding: 0 30px;
   --epr-search-input-border-radius: 8px;
   --epr-search-input-height: 40px;
-  --epr-category-label-padding: 0 10px;
+  --epr-search-input-text-color: var(--epr-text-color);
+  --epr-search-input-placeholder-color: var(--epr-text-color);
+  --epr-search-bar-inner-padding: var(--epr-horizontal-padding);
+
+  /*  Category Navigation */
+  --epr-category-navigation-button-size: 30px;
+
+  /* Variation Picker */
+  --epr-emoji-variation-picker-height: 55px;
+  --epr-emoji-variation-picker-bg-color: var(--epr-bg-color);
+
+  /*  Preview */
+  --epr-preview-height: 70px;
+  --epr-preview-text-size: 14px;
+  --epr-preview-text-padding: 0 var(--epr-horizontal-padding);
+  --epr-preview-border-color: var(--epr-picker-border-color);
+  --epr-preview-text-color: var(--epr-text-color);
+
+  /* Category */
+  --epr-category-padding: 0 var(--epr-horizontal-padding);
+
+  /*  Category Label */
+  --epr-category-label-bg-color: #ffffffe6;
+  --epr-category-label-text-color: var(--epr-text-color);
+  --epr-category-label-padding: 0 var(--epr-horizontal-padding);
   --epr-category-label-height: 40px;
 
+  /*  Emoji */
+  --epr-emoji-size: 30px;
+  --epr-emoji-padding: 5px;
+  --epr-emoji-fullsize: calc(
+    var(--epr-emoji-size) + var(--epr-emoji-padding) * 2
+  );
+  --epr-emoji-hover-color: var(--epr-hover-bg-color);
+  --epr-emoji-variation-indicator-color: var(--epr-picker-border-color);
+  --epr-emoji-variation-indicator-color-hover: var(--epr-text-color);
+
+  /* Z-Index */
   --epr-header-overlay-z-index: 3;
   --epr-emoji-variations-indictator-z-index: 1;
   --epr-category-label-z-index: 2;
   --epr-skin-variation-picker-z-index: 5;
-
-  --epr-picker-border-radius: 8px;
-  --epr-search-bar-text-color: var(--epr-text-color);
-  --epr-search-bar-placeholder-color: var(--epr-text-color);
-  --epr-preview-border-color: var(--epr-picker-border-color);
-  --epr-search-bar-bg-color-active: var(--epr-search-bar-bg-color);
 }
 
 .EmojiPickerReact.epr-dark-theme {
@@ -53,12 +78,14 @@
   --epr-highlight-color: #c0c0c0;
   --epr-text-color: var(--epr-highlight-color);
   --epr-hover-bg-color: #363636f6;
-  --epr-search-bar-bg-color: #333333;
+  --epr-focus-bg-color: #474747;
+  --epr-search-input-bg-color: #333333;
   --epr-category-label-bg-color: #222222e6;
   --epr-picker-border-color: #151617;
   --epr-bg-color: #222222;
-  --epr-search-bar-bg-color-active: var(--epr-dark);
+  --epr-search-input-bg-color-active: var(--epr-dark);
   --epr-emoji-variation-indicator-color: #444;
+  --epr-category-icon-active-color: #3271b7;
 }
 
 .EmojiPickerReact {
@@ -89,4 +116,5 @@
   cursor: pointer;
   border: 0;
   background: none;
+  outline: none;
 }

package/src/components/ErrorBoundary.tsx

@@ -14,6 +14,7 @@ export default class ErrorBoundary extends React.Component<
   }
 
   componentDidCatch(error: Error, errorInfo: any) {
+    // eslint-disable-next-line no-console
     console.error('Emoji Picker React failed to render:', error, errorInfo);
   }
 

package/src/components/body/EmojiCategory.css

@@ -1,3 +1,17 @@
+.EmojiPickerReact li.epr-emoji-category > .epr-emoji-category-content {
+  position: relative;
+  padding: var(--epr-category-padding);
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, var(--epr-emoji-fullsize));
+  grid-gap: 0;
+  justify-content: space-between;
+}
+
+.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)) {
+  display: none;
+}
+
 .EmojiPickerReact li.epr-emoji-category > .epr-emoji-category-label {
   position: sticky;
   top: 0;
@@ -20,23 +34,3 @@
   position: relative;
   opacity: 0.4;
 }
-
-.EmojiPickerReact li.epr-emoji-category {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  padding: var(--epr-category-padding);
-  gap: var(--epr-emoji-gap);
-}
-
-.EmojiPickerReact li.epr-emoji-category:after {
-  content: '';
-  display: inline-block;
-  flex: 1;
-}
-
-.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)) {
-  display: none;
-}

package/src/components/body/EmojiCategory.tsx

@@ -1,12 +1,12 @@
 import clsx from 'clsx';
 import * as React from 'react';
 
+import { ClassNames } from '../../DomUtils/classNames';
 import {
   CategoryConfig,
   categoryFromCategoryConfig,
   categoryNameFromCategoryConfig
 } from '../../config/categoryConfig';
-import { ClassNames } from '../../DomUtils/classNames';
 import './EmojiCategory.css';
 
 type Props = Readonly<{
@@ -27,14 +27,14 @@ export function EmojiCategory({
 
   return (
     <li
-      className={clsx('epr-emoji-category', {
+      className={clsx(ClassNames.category, {
         [ClassNames.hidden]: hidden,
         [ClassNames.hiddenOnSearch]: hiddenOnSearch
       })}
       data-name={category}
     >
       <div className="epr-emoji-category-label">{categoryName}</div>
-      {children}
+      <div className="epr-emoji-category-content">{children}</div>
     </li>
   );
 }

package/src/components/body/EmojiList.tsx

@@ -1,27 +1,28 @@
 import * as React from 'react';
 
+import { getEmojiRef } from '../../DomUtils/emojiElementRef';
 import {
   Categories,
   CategoryConfig,
-  categoryFromCategoryConfig,
+  categoryFromCategoryConfig
 } from '../../config/categoryConfig';
 import {
   useCategoriesConfig,
   useEmojiStyleConfig,
-  useLazyLoadEmojisConfig,
+  useLazyLoadEmojisConfig
 } from '../../config/useConfig';
 import { emojisByCategory, emojiUnified } from '../../dataUtils/emojiSelectors';
 import { useIsEmojiHidden } from '../../hooks/useIsEmojiHidden';
 import {
   useActiveSkinToneState,
-  useIsPastInitialLoad,
+  useIsPastInitialLoad
 } from '../context/PickerContext';
+import { Emoji } from '../emoji/Emoji';
 
 import { EmojiCategory } from './EmojiCategory';
 import { Suggested } from './Suggested';
+
 import './EmojiList.css';
-import { getEmojiRef } from '../../DomUtils/emojiElementRef';
-import { Emoji } from '../emoji/Emoji';
 
 export function EmojiList() {
   const categories = useCategoriesConfig();
@@ -51,7 +52,7 @@ export function EmojiList() {
 function RenderCategory({
   index,
   category,
-  categoryConfig,
+  categoryConfig
 }: {
   index: number;
   category: Categories;
@@ -70,7 +71,7 @@ function RenderCategory({
 
   let hiddenCounter = 0;
 
-  const emojis = emojisToPush.map((emoji) => {
+  const emojis = emojisToPush.map(emoji => {
     const unified = emojiUnified(emoji, activeSkinTone);
     const hidden = isEmojiHidden(emoji);
     const emojiRef = getEmojiRef(emojiUnified(emoji));

package/src/components/body/EmojiVariationPicker.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import * as React from 'react';
 
 import {
-  buttonFromEmoji,
+  buttonFromTarget,
   elementHeight,
   emojiTrueOffsetTop,
   emojiTruOffsetLeft
@@ -91,7 +91,7 @@ function usePointerStyle(VariationPickerRef: React.RefObject<HTMLElement>) {
     }
 
     if (AnchoredEmojiRef.current) {
-      const button = buttonFromEmoji(AnchoredEmojiRef.current);
+      const button = buttonFromTarget(AnchoredEmojiRef.current);
 
       const offsetLeft = emojiTruOffsetLeft(button);
 
@@ -135,7 +135,7 @@ function useVariationPickerTop(
 
     if (AnchoredEmojiRef.current) {
       const bodyRef = BodyRef.current;
-      const button = buttonFromEmoji(AnchoredEmojiRef.current);
+      const button = buttonFromTarget(AnchoredEmojiRef.current);
 
       const buttonHeight = elementHeight(button);
 

package/src/components/body/Suggested.tsx

@@ -25,7 +25,8 @@ export function Suggested({ categoryConfig }: Props) {
   const suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
   const suggested = React.useMemo(
     () => getsuggested(suggestedEmojisModeConfig) ?? [],
-    [suggestedUpdated]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [suggestedUpdated, suggestedEmojisModeConfig]
   );
   const emojiStyle = useEmojiStyleConfig();
 
@@ -51,6 +52,7 @@ export function Suggested({ categoryConfig }: Props) {
             emojiStyle={emojiStyle}
             emoji={emoji}
             key={suggestedItem.unified}
+            hidden={hidden}
           />
         );
       })}

package/src/components/context/ElementRefContext.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import { NullableElement } from '../../DomUtils/selectors';
+
 export function ElementRefContextProvider({
   children
 }: {
@@ -7,55 +9,80 @@ export function ElementRefContextProvider({
 }) {
   const PickerMainRef = React.useRef<HTMLElement>(null);
   const AnchoredEmojiRef = React.useRef<HTMLElement>(null);
-  const BodyRef = React.useRef<HTMLElement>(null);
+  const BodyRef = React.useRef<HTMLDivElement>(null);
+  const SearchInputRef = React.useRef<HTMLInputElement>(null);
+  const SkinTonePickerRef = React.useRef<HTMLDivElement>(null);
+  const CategoryNavigationRef = React.useRef<HTMLDivElement>(null);
 
   return (
     <ElementRefContext.Provider
-      value={{ PickerMainRef, AnchoredEmojiRef, BodyRef }}
+      value={{
+        AnchoredEmojiRef,
+        BodyRef,
+        CategoryNavigationRef,
+        PickerMainRef,
+        SearchInputRef,
+        SkinTonePickerRef
+      }}
     >
       {children}
     </ElementRefContext.Provider>
   );
 }
 
-export type ElementRef = React.MutableRefObject<HTMLElement | null>;
+export type ElementRef<
+  E extends HTMLElement = HTMLElement
+> = React.MutableRefObject<E | null>;
 
 type ElementRefs = {
   PickerMainRef: ElementRef;
   AnchoredEmojiRef: ElementRef;
-  BodyRef: React.MutableRefObject<HTMLElement | null>;
+  SkinTonePickerRef: ElementRef<HTMLDivElement>;
+  SearchInputRef: ElementRef<HTMLInputElement>;
+  BodyRef: ElementRef<HTMLDivElement>;
+  CategoryNavigationRef: ElementRef<HTMLDivElement>;
 };
 
 const ElementRefContext = React.createContext<ElementRefs>({
-  PickerMainRef: React.createRef(),
   AnchoredEmojiRef: React.createRef(),
-  BodyRef: React.createRef()
+  BodyRef: React.createRef(),
+  CategoryNavigationRef: React.createRef(),
+  PickerMainRef: React.createRef(),
+  SearchInputRef: React.createRef(),
+  SkinTonePickerRef: React.createRef()
 });
 
-type ElementRefKeys = keyof ElementRefs;
-
-export function useElementRef(key: ElementRefKeys) {
-  const { [key]: elementRef } = React.useContext(ElementRefContext);
-  return elementRef;
+function useElementRef() {
+  return React.useContext(ElementRefContext);
 }
 
 export function usePickerMainRef() {
-  return useElementRef('PickerMainRef');
+  return useElementRef()['PickerMainRef'];
 }
 
 export function useAnchoredEmojiRef() {
-  return useElementRef('AnchoredEmojiRef');
+  return useElementRef()['AnchoredEmojiRef'];
 }
 
-export function useSetAnchoredEmojiRef(): (target: null | HTMLElement) => void {
+export function useSetAnchoredEmojiRef(): (target: NullableElement) => void {
   const AnchoredEmojiRef = useAnchoredEmojiRef();
-  return (target: null | HTMLElement) => {
+  return (target: NullableElement) => {
     AnchoredEmojiRef.current = target;
   };
 }
 
-export function useBodyRef(): React.MutableRefObject<HTMLDivElement | null> {
-  return useElementRef(
-    'BodyRef'
-  ) as React.MutableRefObject<HTMLDivElement | null>;
+export function useBodyRef() {
+  return useElementRef()['BodyRef'];
+}
+
+export function useSearchInputRef() {
+  return useElementRef()['SearchInputRef'];
+}
+
+export function useSkinTonePickerRef() {
+  return useElementRef()['SkinTonePickerRef'];
+}
+
+export function useCategoryNavigationRef() {
+  return useElementRef()['CategoryNavigationRef'];
 }