emoji-picker-react 3.6.1 → 4.0.0-rc.3

package/dist/types/exposedTypes.d.ts

@@ -0,0 +1,28 @@
+export declare type EmojiClickData = {
+    activeSkinTone: SkinTones;
+    unified: string;
+    unifiedWithoutSkinTone: string;
+    emoji: string;
+    names: string[];
+    getImageUrl: (emojiStyle: EmojiStyle) => string;
+};
+export declare enum EmojiStyle {
+    NATIVE = "native",
+    APPLE = "apple",
+    TWITTER = "twitter",
+    GOOGLE = "google",
+    FACEBOOK = "facebook"
+}
+export declare enum Theme {
+    DARK = "dark",
+    LIGHT = "light",
+    AUTO = "auto"
+}
+export declare enum SkinTones {
+    NEUTRAL = "neutral",
+    LIGHT = "1f3fb",
+    MEDIUM_LIGHT = "1f3fc",
+    MEDIUM = "1f3fd",
+    MEDIUM_DARK = "1f3fe",
+    DARK = "1f3ff"
+}

package/package.json

@@ -1,68 +1,88 @@
 {
-  "name": "emoji-picker-react",
-  "version": "3.6.1",
-  "description": "Emoji picker component for react applications",
+  "version": "4.0.0-rc.3",
+  "license": "MIT",
   "main": "dist/index.js",
-  "typings": "emoji-picker-react.d.ts",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
   "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",
-    "build": "webpack --config ./webpack.config.js",
-    "build-storybook": "build-storybook",
-    "lint": "eslint ."
+    "build-storybook": "build-storybook"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ealush/emoji-picker-react.git"
-  },
-  "keywords": [
-    "emoji-picker",
-    "react"
-  ],
-  "author": "ealush",
-  "license": "unlicense",
-  "bugs": {
-    "url": "https://github.com/ealush/emoji-picker-react/issues"
+  "peerDependencies": {
+    "react": ">=16"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "pretty-quick --staged"
+      "pre-commit": "tsdx lint"
     }
   },
   "prettier": {
-    "arrowParens": "avoid",
+    "printWidth": 80,
+    "semi": true,
     "singleQuote": true
   },
-  "homepage": "https://github.com/ealush/emoji-picker-react#readme",
+  "name": "emoji-picker-react",
+  "author": "ealush",
+  "module": "dist/emoji-picker-react.esm.js",
+  "size-limit": [
+    {
+      "path": "dist/emoji-picker-react.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/emoji-picker-react.esm.js",
+      "limit": "10 KB"
+    }
+  ],
   "devDependencies": {
-    "@babel/core": "^7.6.0",
-    "@babel/plugin-transform-runtime": "^7.6.0",
-    "@babel/preset-env": "^7.6.0",
-    "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-actions": "^6.4.18",
-    "@storybook/addon-links": "^6.4.18",
-    "@storybook/addons": "^6.4.18",
-    "@storybook/react": "^6.4.18",
-    "babel-loader": "^8.0.6",
-    "classnames": "^2.2.6",
-    "css-loader": "^3.2.0",
-    "emoji-datasource": "^7.0.2",
-    "eslint": "^7.5.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^2.0.1",
-    "husky": "^4.2.5",
-    "lodash": "^4.17.15",
-    "mini-css-extract-plugin": "^0.8.0",
-    "prettier": "2.0.5",
-    "pretty-quick": "^2.0.1",
-    "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "style-loader": "^1.0.0",
-    "svg-url-loader": "^3.0.2",
-    "terser-webpack-plugin": "^2.1.0",
-    "webpack": "^4.40.2",
-    "webpack-cli": "^3.3.9",
-    "tinykeys": "^1.3.0"
+    "eslint-import-resolver-typescript": "^3.3.0",
+    "eslint-plugin-import": "^2.26.0",
+    "@babel/core": "^7.18.10",
+    "@size-limit/preset-small-lib": "^8.0.1",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addons": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "autoprefixer": "^10.4.8",
+    "babel-loader": "^8.2.5",
+    "cssnano": "^5.1.13",
+    "emoji-datasource": "^14.0.0",
+    "fs-extra": "^10.1.0",
+    "glob": "^8.0.3",
+    "husky": "^8.0.1",
+    "lodash": "^4.17.21",
+    "postcss": "^8.4.16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "size-limit": "^8.0.1",
+    "tiny-invariant": "^1.2.0",
+    "tinykeys": "^1.4.0",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.4",
+    "postcss-inline-svg": "^5.0.0",
+    "postcss-svgo": "^5.1.0"
+  },
+  "dependencies": {
+    "clsx": "^1.2.1"
   }
 }

package/src/DomUtils/categoryNameFromDom.ts

@@ -0,0 +1,3 @@
+export function categoryNameFromDom($category: Element | null): string | null {
+  return $category?.getAttribute('data-name') ?? null;
+}

package/src/DomUtils/scrollCategoryIntoView.ts

@@ -0,0 +1,18 @@
+import { scrollTo } from './scrollTo';
+
+export function scrollCategoryIntoView(
+  root: HTMLElement | null,
+  category: string
+) {
+  const $category = root?.querySelector(
+    `[data-name="${category}"]`
+  ) as HTMLElement;
+
+  if (!$category) {
+    return;
+  }
+
+  const offsetTop = $category.offsetTop || 0;
+
+  scrollTo(root, offsetTop);
+}

package/src/DomUtils/scrollTo.ts

@@ -0,0 +1,11 @@
+export function scrollTo(root: HTMLElement | null, top: number = 0) {
+  const $eprBody = root ? root.querySelector('.epr-body') : null;
+
+  if (!root || !$eprBody) {
+    return;
+  }
+
+  requestAnimationFrame(() => {
+    $eprBody.scrollTop = top + 1;
+  });
+}

package/src/DomUtils/selectors.ts

@@ -0,0 +1,93 @@
+import { DataEmoji } from '../dataUtils/DataTypes';
+import { emojiByUnified } from '../dataUtils/emojiSelectors';
+
+export function buttonFromEmoji(
+  emojiElement: HTMLElement | null
+): HTMLButtonElement | null {
+  return emojiElement?.closest('button.epr-emoji') ?? null;
+}
+
+export function emojiFromElement(
+  element: HTMLElement | null
+): DataEmoji | undefined {
+  const unified = originalUnifiedFromEmojiElement(element);
+
+  if (!unified) {
+    return;
+  }
+  return emojiByUnified(unified);
+}
+
+export function isEmojiElement(element: HTMLElement | null): boolean {
+  return Boolean(
+    element?.matches('button.epr-emoji') ||
+      element?.parentElement?.matches('button.epr-emoji')
+  );
+}
+
+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;
+}
+
+export function closestCategoryLabel(
+  element: null | HTMLElement
+): HTMLElement | null {
+  const category = closestCategory(element);
+  return categoryLabelFromCategory(category);
+}
+
+export function elementHeight(element: HTMLElement | null): number {
+  return element?.clientHeight ?? 0;
+}
+
+export function emojiTrueOffsetTop(element: HTMLElement | null): number {
+  const button = buttonFromEmoji(element);
+  const category = closestCategory(button);
+
+  return elementOffsetTop(button) + elementOffsetTop(category);
+}
+export function emojiTruOffsetLeft(element: HTMLElement | null): number {
+  const button = buttonFromEmoji(element);
+  const category = closestCategory(button);
+
+  return elementOffsetLeft(button) + elementOffsetLeft(category);
+}
+
+function elementOffsetTop(element: HTMLElement | null): number {
+  return element?.offsetTop ?? 0;
+}
+
+function elementOffsetLeft(element: HTMLElement | null): number {
+  return element?.offsetLeft ?? 0;
+}
+
+export function unifiedFromEmojiElement(
+  emoji: HTMLElement | null
+): string | null {
+  return elementDataSetKey(buttonFromEmoji(emoji), 'unified') ?? null;
+}
+
+export function originalUnifiedFromEmojiElement(
+  emoji: HTMLElement | null
+): string | null {
+  return elementDataSetKey(buttonFromEmoji(emoji), 'original') ?? null;
+}
+
+function elementDataSetKey(
+  element: HTMLElement | null,
+  key: string
+): string | null {
+  return elementDataSet(element)[key] ?? null;
+}
+
+function elementDataSet(element: HTMLElement | null): DOMStringMap {
+  return element?.dataset ?? {};
+}

package/src/EmojiPickerReact.css

@@ -0,0 +1,85 @@
+.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-search-input-padding: 0 30px;
+  --epr-search-input-border-radius: 8px;
+  --epr-search-input-height: 40px;
+  --epr-category-label-padding: 0 10px;
+  --epr-category-label-height: 40px;
+
+  --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-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);
+}
+
+.EmojiPickerReact {
+  background-color: var(--epr-background-color);
+  overflow: hidden;
+}
+
+.EmojiPickerReact .hidden {
+  display: none !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  visibility: hidden !important;
+}
+
+.EmojiPickerReact * {
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+
+.EmojiPickerReact button {
+  cursor: pointer;
+  border: 0;
+  background: none;
+}

package/src/components/Layout/Flex.css

@@ -0,0 +1,11 @@
+.EmojiPickerReact .Flex {
+  display: flex;
+}
+
+.EmojiPickerReact .Flex.FlexRow {
+  flex-direction: row;
+}
+
+.EmojiPickerReact .Flex.FlexColumn {
+  flex-direction: column;
+}

package/src/components/Layout/Flex.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+import * as React from 'react';
+import './Flex.css';
+
+export enum FlexDirection {
+  ROW = 'FlexRow',
+  COLUMN = 'FlexColumn'
+}
+
+type Props = Readonly<{
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  direction?: FlexDirection;
+}>;
+
+export default function Flex({
+  children,
+  className,
+  style = {},
+  direction = FlexDirection.ROW
+}: Props) {
+  return (
+    <div style={{ ...style }} className={clsx('Flex', className, direction)}>
+      {children}
+    </div>
+  );
+}

package/src/components/Layout/Relative.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+type Props = Readonly<{
+  children: React.ReactNode;
+  className?: string;
+}>;
+
+export default function Relative({ children, className }: Props) {
+  return (
+    <div style={{ position: 'relative' }} className={className}>
+      {children}
+    </div>
+  );
+}

package/src/components/body/Body.css

@@ -0,0 +1,6 @@
+.EmojiPickerReact .epr-body {
+  position: relative;
+  flex: 1;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}

package/src/components/body/Body.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { useActiveCategoryScrollDetection } from '../../hooks/useActiveCategoryScrollDetection';
+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);
+
+  return (
+    <div className="epr-body" ref={BodyRef}>
+      <EmojiVariationPicker />
+      <EmojiList />
+    </div>
+  );
+}

package/src/components/body/EmojiCategory.css

@@ -0,0 +1,38 @@
+.EmojiPickerReact li.epr-emoji-category > .epr-emoji-category-label {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  text-transform: capitalize;
+  backdrop-filter: blur(3px);
+  padding: var(--epr-category-label-padding);
+  background-color: var(--epr-category-label-background-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;
+}

package/src/components/body/EmojiCategory.tsx

@@ -0,0 +1,27 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import {
+  CategoryConfig,
+  categoryFromCategoryConfig,
+  categoryNameFromCategoryConfig
+} from '../../config/categoryConfig';
+import './EmojiCategory.css';
+
+type Props = Readonly<{
+  categoryConfig: CategoryConfig;
+  children?: React.ReactNode;
+  hidden?: boolean;
+}>;
+
+export function EmojiCategory({ categoryConfig, children, hidden }: Props) {
+  const category = categoryFromCategoryConfig(categoryConfig);
+  const categoryName = categoryNameFromCategoryConfig(categoryConfig);
+
+  return (
+    <li className={clsx('epr-emoji-category', { hidden })} data-name={category}>
+      <div className="epr-emoji-category-label">{categoryName}</div>
+      {children}
+    </li>
+  );
+}

package/src/components/body/EmojiList.css

@@ -0,0 +1,5 @@
+.EmojiPickerReact ul.epr-emoji-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}

package/src/components/body/EmojiList.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+
+import {
+  Categories,
+  CategoryConfig,
+  categoryFromCategoryConfig
+} from '../../config/categoryConfig';
+import {
+  useCategoriesConfig,
+  useEmojiStyleConfig
+} from '../../config/useConfig';
+import { emojisByCategory, emojiUnified } from '../../dataUtils/emojiSelectors';
+import { useIsEmojiHidden } from '../../hooks/useIsEmojiHidden';
+import {
+  useActiveSkinToneState,
+  useIsPastInitialLoad
+} from '../context/PickerContext';
+import { Emoji } from '../emoji/Emoji';
+
+import { EmojiCategory } from './EmojiCategory';
+import { RecentlyUsed } from './RecentlyUsed';
+import './EmojiList.css';
+
+export function EmojiList() {
+  const categories = useCategoriesConfig();
+
+  return (
+    <ul className="epr-emoji-list">
+      {categories.map((categoryConfig, index) => {
+        const category = categoryFromCategoryConfig(categoryConfig);
+
+        if (category === Categories.RECENTLY_USED) {
+          return (
+            <RecentlyUsed key={category} categoryConfig={categoryConfig} />
+          );
+        }
+
+        return (
+          <RenderCategory
+            key={category}
+            index={index}
+            category={category}
+            categoryConfig={categoryConfig}
+          />
+        );
+      })}
+    </ul>
+  );
+}
+
+function RenderCategory({
+  index,
+  category,
+  categoryConfig
+}: {
+  index: number;
+  category: Categories;
+  categoryConfig: CategoryConfig;
+}) {
+  const isEmojiHidden = useIsEmojiHidden();
+  const emojiStyle = useEmojiStyleConfig();
+  const isPastInitialLoad = useIsPastInitialLoad();
+  const [activeSkinTone] = useActiveSkinToneState();
+
+  // Small trick to defer the rendering of all emoji categories until the first category is visible
+  // This way the user gets to actually see something and not wait for the whole picker to render.
+  const emojisToPush =
+    !isPastInitialLoad && index > 1 ? [] : emojisByCategory(category);
+
+  let hiddenCounter = 0;
+
+  const emojis = emojisToPush.map(emoji => {
+    const unified = emojiUnified(emoji, activeSkinTone);
+    const hidden = isEmojiHidden(emoji);
+
+    if (hidden) {
+      hiddenCounter++;
+    }
+
+    return (
+      <Emoji
+        key={unified}
+        emoji={emoji}
+        unified={unified}
+        hidden={hidden}
+        emojiStyle={emojiStyle}
+      />
+    );
+  });
+
+  return (
+    <EmojiCategory
+      categoryConfig={categoryConfig}
+      // Indicates that there are no visible emojis
+      // Hence, the category should be hidden
+      hidden={hiddenCounter === emojis.length}
+    >
+      {emojis}
+    </EmojiCategory>
+  );
+}