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

package/src/DomUtils/selectors.ts

@@ -1,93 +1,252 @@
 import { DataEmoji } from '../dataUtils/DataTypes';
-import { emojiByUnified } from '../dataUtils/emojiSelectors';
+import {
+  emojiByUnified,
+  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
-): DataEmoji | undefined {
-  const unified = originalUnifiedFromEmojiElement(element);
+  element: NullableElement
+): [DataEmoji, string] | [] {
+  const originalUnified = originalUnifiedFromEmojiElement(element);
+  const unified = unifiedFromEmojiElement(element);
+
+  if (!originalUnified) {
+    return [];
+  }
 
-  if (!unified) {
-    return;
+  const emoji = emojiByUnified(originalUnified);
+
+  if (!emoji) {
+    return [];
   }
-  return emojiByUnified(unified);
+
+  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);
-  const category = closestCategory(button);
+export function emojiTrueOffsetTop(element: NullableElement): number {
+  if (!element) {
+    return 0;
+  }
+
+  const button = buttonFromTarget(element);
+  const categoryWithoutLabel = closestCategoryContent(button);
+  const category = closestCategory(categoryWithoutLabel);
+
+  // compensate for the label height
+  const labelHeight =
+    (category?.clientHeight ?? 0) - (categoryWithoutLabel?.clientHeight ?? 0);
 
-  return elementOffsetTop(button) + elementOffsetTop(category);
+  return elementOffsetTop(button) + elementOffsetTop(category) + labelHeight;
 }
-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 {
-  return elementDataSetKey(buttonFromEmoji(emoji), 'original') ?? null;
+  const unified = unifiedFromEmojiElement(emoji);
+
+  if (unified) {
+    return unifiedWithoutSkinTone(unified);
+  }
+  return null;
 }
 
 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;
+}
+
+export function closestCategoryContent(element: NullableElement) {
+  if (!element) {
+    return null;
+  }
+  return element.closest(
+    asSelectors(ClassNames.categoryContent)
+  ) as HTMLElement;
+}

package/src/EmojiPickerReact.css

@@ -1,68 +1,92 @@
 .EmojiPickerReact {
-  --highlight-color: #007aeb;
-  --hover-backdrop-color: #f1f8ff;
-  --text-color-base: #858585;
-  --epr-header-height: 70px;
-  --epr-picker-width: 350px;
-  --epr-picker-height: 500px;
-  --epr-emoji-size: 33px;
-  --epr-category-navigation-button-size: 30px;
-  --epr-emoji-variation-picker-bg-color: var(--epr-background-color);
-  --epr-emoji-variation-picker-height: 55px;
-  --epr-preview-height: 70px;
-  --epr-preview-text-color: var(--text-color-base);
-  --epr-preview-text-size: 14px;
-  --epr-preview-text-padding: 0 10px;
-  --epr-search-bar-bg-color: #f6f6f6;
-  --epr-active-category-indicator-color: var(--highlight-color);
-  --epr-active-skin-tone-indicator-border-color: var(--highlight-color);
-  --epr-search-border-color: var(--highlight-color);
-  --epr-active-skin-hover-color: var(--hover-backdrop-color);
-  --epr-emoji-hover-color: var(--hover-backdrop-color);
-  --epr-category-label-text-color: var(--text-color-base);
-  --epr-category-label-background-color: #ffffffe6;
-  --epr-emoji-padding: 5px;
-  --epr-header-padding: 15px 10px;
-  --epr-emoji-gap: 4px;
-  --epr-category-padding: 0 10px;
+  --epr-highlight-color: #007aeb;
+  --epr-hover-bg-color: #f1f8ff;
+  --epr-focus-bg-color: #e0f0ff;
+  --epr-text-color: #858585;
+  --epr-search-input-bg-color: #f6f6f6;
+  --epr-picker-border-color: #e7e7e7;
+  --epr-bg-color: #fff;
+  --epr-category-icon-active-color: #6aa8de;
+
+  --epr-horizontal-padding: 10px;
+
+  --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);
+
+  /* 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: 45px;
+  --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(--text-color-base);
-  --epr-search-bar-placeholder-color: var(--text-color-base);
-  --epr-picker-border-color: #e7e7e7;
-  --epr-background-color: #fff;
-  --epr-preview-border-color: var(--epr-picker-border-color);
-  --epr-search-bar-bg-color-active: var(--epr-search-bar-bg-color);
-  --epr-emoji-variation-indicator-color: rgba(0, 0, 0, 0.1);
-  --epr-emoji-variation-indicator-color-hover: rgba(0, 0, 0, 0.4);
 }
 
 .EmojiPickerReact.epr-dark-theme {
-  --epr-emoji-variation-picker-bg-color: #000000;
-  --highlight-color: #c0c0c0;
-  --text-color-base: var(--highlight-color);
-  --hover-backdrop-color: #363636f6;
-  --epr-search-bar-bg-color: #333333;
-  --epr-category-label-background-color: #222222e6;
+  --epr-dark: #000;
+  --epr-emoji-variation-picker-bg-color: var(--epr-dark);
+  --epr-highlight-color: #c0c0c0;
+  --epr-text-color: var(--epr-highlight-color);
+  --epr-hover-bg-color: #363636f6;
+  --epr-focus-bg-color: #474747;
+  --epr-search-input-bg-color: #333333;
+  --epr-category-label-bg-color: #222222e6;
   --epr-picker-border-color: #151617;
-  --epr-background-color: #222222;
-  --epr-search-bar-bg-color-active: #000000;
-  --epr-emoji-variation-indicator-color: rgba(255, 255, 255, 0.1);
-  --epr-emoji-variation-indicator-color-hover: rgba(255, 255, 255, 0.4);
+  --epr-bg-color: #222222;
+  --epr-search-input-bg-color-active: var(--epr-dark);
+  --epr-emoji-variation-indicator-color: #444;
+  --epr-category-icon-active-color: #3271b7;
 }
 
 .EmojiPickerReact {
-  background-color: var(--epr-background-color);
+  background-color: var(--epr-bg-color);
   overflow: hidden;
 }
 
@@ -80,6 +104,32 @@
   visibility: hidden !important;
 }
 
+.EmojiPickerReact:not(.epr-search-active) .epr-visible-on-search-only {
+  display: none !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  visibility: hidden !important;
+}
+
+/*  This is the same as .search-active, only without any js behind it
+    Should switch to it full time when :has() gets better adoption
+*/
+aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown))
+  .epr-hidden-on-search {
+  display: none !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  visibility: hidden !important;
+}
+
+aside.EmojiPickerReact.epr-main:has(input:placeholder-shown)
+  .epr-visible-on-search-only {
+  display: none !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  visibility: hidden !important;
+}
+
 .EmojiPickerReact * {
   box-sizing: border-box;
   font-family: sans-serif;
@@ -89,4 +139,5 @@
   cursor: pointer;
   border: 0;
   background: none;
+  outline: none;
 }

package/src/EmojiPickerReact.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { Body } from './components/body/Body';
+import { ElementRefContextProvider } from './components/context/ElementRefContext';
+import { PickerConfigProvider } from './components/context/PickerConfigContext';
+import { Preview } from './components/footer/Preview';
+import { Header } from './components/header/Header';
+import PickerMain from './components/main/PickerMain';
+import { PickerConfig } from './config/config';
+import './EmojiPickerReact.css';
+
+export interface Props extends PickerConfig {}
+
+export default function EmojiPicker(props: Props) {
+  return (
+    <ElementRefContextProvider>
+      <PickerConfigProvider {...props}>
+        <PickerMain>
+          <Header />
+          <Body />
+          <Preview />
+        </PickerMain>
+      </PickerConfigProvider>
+    </ElementRefContextProvider>
+  );
+}

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+export default class ErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  { hasError: boolean }
+> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: any) {
+    // eslint-disable-next-line no-console
+    console.error('Emoji Picker React failed to render:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null;
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/body/Body.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 
-import { useActiveCategoryScrollDetection } from '../../hooks/useActiveCategoryScrollDetection';
+import { useOnMouseMove } from '../../hooks/useDisallowMouseMove';
 import { useMouseDownHandlers } from '../../hooks/useMouseDownHandlers';
 import { useOnScroll } from '../../hooks/useOnScroll';
 import { useBodyRef } from '../context/ElementRefContext';
 
 import { EmojiList } from './EmojiList';
 import { EmojiVariationPicker } from './EmojiVariationPicker';
+
 import './Body.css';
 
 export function Body() {
   const BodyRef = useBodyRef();
-  useActiveCategoryScrollDetection(BodyRef);
   useOnScroll(BodyRef);
   useMouseDownHandlers(BodyRef);
+  useOnMouseMove();
 
   return (
     <div className="epr-body" ref={BodyRef}>

package/src/components/body/EmojiCategory.css

@@ -1,3 +1,16 @@
+.EmojiPickerReact li.epr-emoji-category > .epr-emoji-category-content {
+  position: relative;
+  margin: 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;
@@ -8,35 +21,8 @@
   text-transform: capitalize;
   backdrop-filter: blur(3px);
   padding: var(--epr-category-label-padding);
-  background-color: var(--epr-category-label-background-color);
+  background-color: var(--epr-category-label-bg-color);
   color: var(--epr-category-label-text-color);
   z-index: var(--epr-category-label-z-index);
   height: var(--epr-category-label-height);
 }
-
-.EmojiPickerReact.epr-search-active
-  li.epr-emoji-category
-  > .epr-emoji-category-label {
-  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,15 @@ export function EmojiCategory({
 
   return (
     <li
-      className={clsx('epr-emoji-category', {
+      className={clsx(ClassNames.category, {
         [ClassNames.hidden]: hidden,
         [ClassNames.hiddenOnSearch]: hiddenOnSearch
       })}
       data-name={category}
+      aria-label={categoryName}
     >
-      <div className="epr-emoji-category-label">{categoryName}</div>
-      {children}
+      <div className={ClassNames.label}>{categoryName}</div>
+      <div className={ClassNames.categoryContent}>{children}</div>
     </li>
   );
 }