emoji-picker-react 4.17.4 → 4.18.0

package/dist/hooks/useActiveCategoryScrollDetection.d.ts

@@ -1,4 +1,4 @@
-export declare function useActiveCategoryScrollDetection({ setActiveCategory, setVisibleCategories }: {
+export declare function useActiveCategoryScrollDetection({ setActiveCategory, setVisibleCategories, }: {
     setActiveCategory: (category: string) => void;
     setVisibleCategories: (categories: string[]) => void;
 }): void;

package/dist/hooks/useEmojiVirtualization.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { DataEmojis } from '../dataUtils/DataTypes';
-export declare function useEmojiVirtualization({ categoryEmojis, topOffset, onHeightReady, scrollTop, isCategoryVisible }: {
+export declare function useEmojiVirtualization({ categoryEmojis, topOffset, onHeightReady, scrollTop, isCategoryVisible, }: {
     categoryEmojis: DataEmojis;
     topOffset: number;
     onHeightReady: (height: number) => void;

package/dist/hooks/useFilter.d.ts

@@ -1,3 +1,4 @@
+import { FilterState } from '../components/context/PickerContext';
 import { DataEmoji } from '../dataUtils/DataTypes';
 export declare function useClearSearch(): () => void;
 export declare function useAppendSearch(): (str: string) => void;
@@ -7,6 +8,9 @@ export declare function useFilter(): {
     SearchInputRef: import("../components/context/ElementRefContext").ElementRef<HTMLInputElement>;
     statusSearchResults: string;
 };
+export declare function filterEmojiObjectByKeyword(emojis: FilterDict, keyword: string): FilterDict;
 export declare function useIsEmojiFiltered(): (unified: string) => boolean;
+export declare function isEmojiFilteredBySearchTerm(unified: string, filter: FilterState, searchTerm: string): boolean;
 export declare type FilterDict = Record<string, DataEmoji>;
+export declare function findLongestMatch(keyword: string, dict: Record<string, FilterDict> | null): FilterDict | null;
 export declare function getNormalizedSearchTerm(str: string): string;

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { PickerConfig } from './config/config';
 export { ExportedEmoji as Emoji } from './components/emoji/ExportedEmoji';
-export { EmojiStyle, SkinTones, Theme, Categories, EmojiClickData, SuggestionMode, SkinTonePickerLocation } from './types/exposedTypes';
+export { EmojiStyle, SkinTones, Theme, Categories, EmojiClickData, SuggestionMode, SkinTonePickerLocation, CategoryIcons, CategoryConfig, } from './types/exposedTypes';
 export { emojiByUnified } from './dataUtils/emojiSelectors';
 export interface PickerProps extends PickerConfig {
 }
+export declare type Props = PickerProps;
 export default function EmojiPicker(props: PickerProps): JSX.Element;

package/dist/typeRefinements/typeRefinements.d.ts

@@ -1,6 +1,6 @@
 import { CustomCategoryConfig } from '../config/categoryConfig';
 import { CustomEmoji } from '../config/customEmojiConfig';
-import { CategoryConfig } from '../types/exposedTypes';
 import { DataEmoji } from '../dataUtils/DataTypes';
+import { CategoryConfig } from '../types/exposedTypes';
 export declare function isCustomCategory(category: CategoryConfig | CustomCategoryConfig): category is CustomCategoryConfig;
 export declare function isCustomEmoji(emoji: Partial<DataEmoji>): emoji is CustomEmoji;

package/dist/types/exposedTypes.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 export declare type EmojiClickData = {
     activeSkinTone: SkinTones;
     unified: string;
@@ -11,7 +12,9 @@ export declare type EmojiClickData = {
 export declare type CategoryConfig = {
     category: Categories;
     name: string;
+    icon?: React.ReactNode;
 };
+export declare type CategoryIcons = Partial<Record<Categories, React.ReactNode>>;
 export declare type EmojiData = {
     categories: Partial<Record<Categories, CategoryConfig>>;
     emojis: Record<string, DataEmoji[]>;

package/dist/virtualization/virtualizationHelpers.d.ts

@@ -1,4 +1,4 @@
-export declare function shouldVirtualize({ scrollTop, clientHeight, topOffset, style, dimensions }: {
+export declare function shouldVirtualize({ scrollTop, clientHeight, topOffset, style, dimensions, }: {
     scrollTop: number;
     clientHeight: number;
     topOffset: number;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.17.4",
+  "version": "4.18.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -29,7 +29,9 @@
     "start": "tsdx watch",
     "build": "yarn build:data:src && yarn type-check && tsdx build --transpileOnly && yarn build:data:dist",
     "type-check": "tsc --noEmit --incremental --pretty --project tsconfig.json",
-    "test": "tsdx test --passWithNoTests",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:visual": "playwright test",
     "lint": "eslint ./src --ext .ts,.tsx",
     "prepare": "yarn build",
     "size": "size-limit",
@@ -70,14 +72,18 @@
     "@babel/core": "^7.18.10",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
+    "@playwright/test": "^1.46.1",
     "@size-limit/preset-small-lib": "^8.0.1",
-    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-essentials": "^8.6.15",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^8.1.1",
-    "@storybook/addon-webpack5-compiler-swc": "1.0.2",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/react": "^8.1.1",
-    "@storybook/react-webpack5": "8.1.1",
+    "@storybook/addon-links": "^8.6.15",
+    "@storybook/addon-webpack5-compiler-swc": "1.0.5",
+    "@storybook/react": "^8.6.15",
+    "@storybook/react-webpack5": "8.6.15",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
@@ -95,17 +101,19 @@
     "fs-extra": "^10.1.0",
     "glob": "^8.0.3",
     "husky": "^8.0.1",
+    "jsdom": "^24.1.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rollup-plugin-svg": "^2.0.0",
     "size-limit": "^8.0.1",
-    "storybook": "8.1.1",
+    "storybook": "8.6.15",
     "tiny-invariant": "^1.2.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "vitest": "^2.0.5"
   },
   "dependencies": {
     "flairup": "1.0.0"

package/src/DomUtils/classNames.ts

@@ -18,9 +18,9 @@ export enum ClassNames {
   horizontal = 'epr-horizontal',
   variationPicker = 'epr-emoji-variation-picker',
   darkTheme = 'epr-dark-theme',
-  autoTheme = 'epr-auto-theme'
+  autoTheme = 'epr-auto-theme',
 }
 
 export function asSelectors(...classNames: ClassNames[]): string {
-  return classNames.map(c => `.${c}`).join('');
+  return classNames.map((c) => `.${c}`).join('');
 }

package/src/DomUtils/detectEmojyPartiallyBelowFold.ts

@@ -2,7 +2,7 @@ import { NullableElement } from './selectors';
 
 export function detectEmojyPartiallyBelowFold(
   button: HTMLButtonElement,
-  bodyRef: NullableElement
+  bodyRef: NullableElement,
 ): number {
   if (!button || !bodyRef) {
     return 0;

package/src/DomUtils/elementPositionInRow.ts

@@ -5,7 +5,7 @@ import { NullableElement } from './selectors';
 
 export function elementCountInRow(
   parent: NullableElement,
-  element: NullableElement
+  element: NullableElement,
 ): number {
   if (!parent || !element) {
     return 0;
@@ -19,7 +19,7 @@ export function elementCountInRow(
 export function firstVisibleElementInContainer(
   parent: NullableElement,
   elements: HTMLElement[],
-  maxVisibilityDiffThreshold = 0
+  maxVisibilityDiffThreshold = 0,
 ): NullableElement {
   if (!parent || !elements.length) {
     return null;
@@ -29,7 +29,7 @@ export function firstVisibleElementInContainer(
   const parentBottom = parent.getBoundingClientRect().bottom;
   const parentTopWithLabel = parentTop + getLabelHeight(parent);
 
-  const visibleElements = elements.find(element => {
+  const visibleElements = elements.find((element) => {
     const elementTop = element.getBoundingClientRect().top;
     const elementBottom = element.getBoundingClientRect().bottom;
     const maxVisibilityDiffPixels =

package/src/DomUtils/focusElement.ts

@@ -30,6 +30,5 @@ export function focusFirstElementChild(element: NullableElement) {
   if (!element) return;
 
   const first = element.firstElementChild as HTMLElement;
-
   focusElement(first);
 }

package/src/DomUtils/keyboardNavigation.ts

@@ -11,7 +11,7 @@ import {
   NullableElement,
   prevCategory,
   prevVisibleEmoji,
-  closestCategoryContent
+  closestCategoryContent,
 } from './selectors';
 
 export function focusFirstVisibleEmoji(parent: NullableElement) {
@@ -63,7 +63,7 @@ export function focusPrevVisibleEmoji(element: NullableElement) {
 
 export function focusVisibleEmojiOneRowUp(
   element: NullableElement,
-  exitUp: () => void
+  exitUp: () => void,
 ) {
   if (!element) {
     return;

package/src/DomUtils/scrollTo.ts

@@ -10,7 +10,7 @@ import {
   emojiDistanceFromScrollTop,
   isEmojiBehindLabel,
   NullableElement,
-  queryScrollBody
+  queryScrollBody,
 } from './selectors';
 
 export function scrollTo(root: NullableElement, top: number = 0) {
@@ -48,7 +48,7 @@ export function useScrollTo() {
         }
       });
     },
-    [BodyRef]
+    [BodyRef],
   );
 }
 

package/src/DomUtils/selectors.ts

@@ -1,7 +1,7 @@
 import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   emojiByUnified,
-  unifiedWithoutSkinTone
+  unifiedWithoutSkinTone,
 } from '../dataUtils/emojiSelectors';
 
 import { asSelectors, ClassNames } from './classNames';
@@ -13,11 +13,11 @@ export const EmojiButtonSelector = `button${asSelectors(ClassNames.emoji)}`;
 export const VisibleEmojiSelector = [
   EmojiButtonSelector,
   asSelectors(ClassNames.visible),
-  `:not(${asSelectors(ClassNames.hidden)})`
+  `:not(${asSelectors(ClassNames.hidden)})`,
 ].join('');
 
 export function buttonFromTarget(
-  emojiElement: NullableElement
+  emojiElement: NullableElement,
 ): HTMLButtonElement | null {
   return emojiElement?.closest(EmojiButtonSelector) ?? null;
 }
@@ -31,7 +31,7 @@ export function isEmojiButton(element: NullableElement): boolean {
 }
 
 export function emojiFromElement(
-  element: NullableElement
+  element: NullableElement,
 ): [DataEmoji, string] | [] {
   const originalUnified = originalUnifiedFromEmojiElement(element);
   const unified = unifiedFromEmojiElement(element);
@@ -52,18 +52,18 @@ export function emojiFromElement(
 export function isEmojiElement(element: NullableElement): boolean {
   return Boolean(
     element?.matches(EmojiButtonSelector) ||
-      element?.parentElement?.matches(EmojiButtonSelector)
+    element?.parentElement?.matches(EmojiButtonSelector),
   );
 }
 
 export function categoryLabelFromCategory(
-  category: NullableElement
+  category: NullableElement,
 ): NullableElement {
   return category?.querySelector(asSelectors(ClassNames.label)) ?? null;
 }
 
 export function closestCategoryLabel(
-  element: NullableElement
+  element: NullableElement,
 ): NullableElement {
   const category = closestCategory(element);
   return categoryLabelFromCategory(category);
@@ -93,7 +93,7 @@ export function categoryLabelHeight(category: NullableElement): number {
   }
 
   const categoryWithoutLabel = category.querySelector(
-    asSelectors(ClassNames.categoryContent)
+    asSelectors(ClassNames.categoryContent),
   );
 
   return (
@@ -156,7 +156,7 @@ export function unifiedFromEmojiElement(emoji: NullableElement): string | null {
 }
 
 export function originalUnifiedFromEmojiElement(
-  emoji: NullableElement
+  emoji: NullableElement,
 ): string | null {
   const unified = unifiedFromEmojiElement(emoji);
 
@@ -166,25 +166,26 @@ export function originalUnifiedFromEmojiElement(
   return null;
 }
 
-export function allUnifiedFromEmojiElement(
-  emoji: NullableElement
-): { unified: string | null; originalUnified: string | null } {
+export function allUnifiedFromEmojiElement(emoji: NullableElement): {
+  unified: string | null;
+  originalUnified: string | null;
+} {
   if (!emoji) {
     return {
       unified: null,
-      originalUnified: null
+      originalUnified: null,
     };
   }
 
   return {
     unified: unifiedFromEmojiElement(emoji),
-    originalUnified: originalUnifiedFromEmojiElement(emoji)
+    originalUnified: originalUnifiedFromEmojiElement(emoji),
   };
 }
 
 function elementDataSetKey(
   element: NullableElement,
-  key: string
+  key: string,
 ): string | null {
   return elementDataSet(element)[key] ?? null;
 }
@@ -209,7 +210,7 @@ export function allVisibleEmojis(parent: NullableElement) {
   }
 
   return Array.from(
-    parent.querySelectorAll(VisibleEmojiSelector)
+    parent.querySelectorAll(VisibleEmojiSelector),
   ) as HTMLElement[];
 }
 
@@ -319,6 +320,6 @@ export function closestCategoryContent(element: NullableElement) {
     return null;
   }
   return element.closest(
-    asSelectors(ClassNames.categoryContent)
+    asSelectors(ClassNames.categoryContent),
   ) as HTMLElement;
 }

package/src/Stylesheet/stylesheet.tsx

@@ -10,14 +10,14 @@ const hidden = {
   opacity: '0',
   pointerEvents: 'none',
   visibility: 'hidden',
-  overflow: 'hidden'
+  overflow: 'hidden',
 };
 
 export const commonStyles = stylesheet.create({
   hidden: {
     '.': ClassNames.hidden,
-    ...hidden
-  }
+    ...hidden,
+  },
 });
 
 export const PickerStyleTag = React.memo(function PickerStyleTag() {
@@ -35,20 +35,20 @@ export const commonInteractionStyles = stylesheet.create({
       categoryBtn: {
         ':hover': {
           opacity: '1',
-          backgroundPositionY: 'var(--epr-category-navigation-button-size)'
-        }
+          backgroundPositionY: 'var(--epr-category-navigation-button-size)',
+        },
       },
       hiddenOnSearch: {
         '.': ClassNames.hiddenOnSearch,
-        ...hidden
-      }
+        ...hidden,
+      },
     },
     ':has(input:placeholder-shown)': {
-      visibleOnSearchOnly: hidden
-    }
+      visibleOnSearchOnly: hidden,
+    },
   },
   hiddenOnReactions: {
-    transition: 'all 0.5s ease-in-out'
+    transition: 'all 0.5s ease-in-out',
   },
   '.epr-reactions': {
     hiddenOnReactions: {
@@ -56,36 +56,36 @@ export const commonInteractionStyles = stylesheet.create({
       width: '0px',
       opacity: '0',
       pointerEvents: 'none',
-      overflow: 'hidden'
-    }
+      overflow: 'hidden',
+    },
   },
   '.EmojiPickerReact:not(.epr-search-active)': {
     categoryBtn: {
       ':hover': {
         opacity: '1',
-        backgroundPositionY: 'var(--epr-category-navigation-button-size)'
+        backgroundPositionY: 'var(--epr-category-navigation-button-size)',
       },
       '&.epr-active': {
         opacity: '1',
-        backgroundPositionY: 'var(--epr-category-navigation-button-size)'
-      }
+        backgroundPositionY: 'var(--epr-category-navigation-button-size)',
+      },
     },
     visibleOnSearchOnly: {
       '.': 'epr-visible-on-search-only',
-      ...hidden
-    }
-  }
+      ...hidden,
+    },
+  },
 });
 
 export function darkMode(key: string, value: Styles) {
   return {
     '.epr-dark-theme': {
-      [key]: value
+      [key]: value,
     },
     '.epr-auto-theme': {
       [key]: {
-        '@media (prefers-color-scheme: dark)': value
-      }
-    }
+        '@media (prefers-color-scheme: dark)': value,
+      },
+    },
   };
 }

package/src/components/Layout/Flex.tsx

@@ -5,7 +5,7 @@ import { stylesheet } from '../../Stylesheet/stylesheet';
 
 export enum FlexDirection {
   ROW = 'FlexRow',
-  COLUMN = 'FlexColumn'
+  COLUMN = 'FlexColumn',
 }
 
 type Props = Readonly<{
@@ -19,7 +19,7 @@ export default function Flex({
   children,
   className,
   style = {},
-  direction = FlexDirection.ROW
+  direction = FlexDirection.ROW,
 }: Props) {
   return (
     <div
@@ -33,12 +33,12 @@ export default function Flex({
 
 const styles = stylesheet.create({
   flex: {
-    display: 'flex'
+    display: 'flex',
   },
   [FlexDirection.ROW]: {
-    flexDirection: 'row'
+    flexDirection: 'row',
   },
   [FlexDirection.COLUMN]: {
-    flexDirection: 'column'
-  }
+    flexDirection: 'column',
+  },
 });

package/src/components/Layout/Space.tsx

@@ -1,7 +1,6 @@
 import { cx } from 'flairup';
 import * as React from 'react';
 
-
 type Props = Readonly<{
   className?: string;
   style?: React.CSSProperties;

package/src/components/Reactions/BtnPlus.tsx

@@ -42,25 +42,25 @@ const styles = stylesheet.create({
       backgroundColor: 'transparent',
       backgroundRepeat: 'no-repeat',
       backgroundSize: '20px',
-      backgroundPositionY: '0'
+      backgroundPositionY: '0',
     },
     ':hover': {
       color: 'var(--epr-highlight-color)',
       backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
       ':after': {
-        backgroundPositionY: '-20px'
-      }
+        backgroundPositionY: '-20px',
+      },
     },
     ':focus': {
       color: 'var(--epr-highlight-color)',
       backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
       ':after': {
-        backgroundPositionY: '-40px'
-      }
-    }
+        backgroundPositionY: '-40px',
+      },
+    },
   },
   ...darkMode('plusSign', {
     ':after': { backgroundPositionY: '-40px' },
-    ':hover:after': { backgroundPositionY: '-60px' }
-  })
+    ':hover:after': { backgroundPositionY: '-60px' },
+  }),
 });

package/src/components/Reactions/DEFAULT_REACTIONS.ts

@@ -5,5 +5,5 @@ export const DEFAULT_REACTIONS = [
   '1f622', // 😢
   '1f64f', // 🙏
   '1f44e', // 👎
-  '1f621' // 😡
+  '1f621', // 😡
 ];

package/src/components/Reactions/Reactions.tsx

@@ -35,6 +35,7 @@ export function Reactions() {
     <ul
       className={cx(styles.list, !reactionsOpen && commonStyles.hidden)}
       ref={ReactionsRef}
+      aria-label="Reactions"
     >
       {reactions.map((reaction) => {
         const emoji = emojiByUnified(reaction);

package/src/components/atoms/Button.tsx

@@ -3,11 +3,10 @@ import * as React from 'react';
 
 import { stylesheet } from '../../Stylesheet/stylesheet';
 
-interface Props
-  extends React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  > {
+interface Props extends React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> {
   className?: string;
 }
 
@@ -29,6 +28,6 @@ const styles = stylesheet.create({
     cursor: 'pointer',
     border: '0',
     background: 'none',
-    outline: 'none'
-  }
+    outline: 'none',
+  },
 });

package/src/components/body/Body.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { ClassNames } from '../../DomUtils/classNames';
 import {
   commonInteractionStyles,
-  stylesheet
+  stylesheet,
 } from '../../Stylesheet/stylesheet';
 import { MOUSE_EVENT_SOURCE } from '../../config/useConfig';
 import { useOnMouseMove } from '../../hooks/useDisallowMouseMove';
@@ -38,6 +38,6 @@ const styles = stylesheet.create({
     flex: '1',
     overflowY: 'scroll',
     overflowX: 'hidden',
-    position: 'relative'
-  }
+    position: 'relative',
+  },
 });

package/src/components/body/EmojiCategory.tsx

@@ -5,11 +5,11 @@ import { ClassNames } from '../../DomUtils/classNames';
 import {
   commonInteractionStyles,
   commonStyles,
-  stylesheet
+  stylesheet,
 } from '../../Stylesheet/stylesheet';
 import {
   categoryFromCategoryConfig,
-  categoryNameFromCategoryConfig
+  categoryNameFromCategoryConfig,
 } from '../../config/categoryConfig';
 import { CategoryConfig } from '../../types/exposedTypes';
 
@@ -26,7 +26,7 @@ export function EmojiCategory({
   children,
   hidden,
   hiddenOnSearch,
-  height
+  height,
 }: Props) {
   const category = categoryFromCategoryConfig(categoryConfig);
   const categoryName = categoryNameFromCategoryConfig(categoryConfig);
@@ -36,7 +36,7 @@ export function EmojiCategory({
       className={cx(
         styles.category,
         hidden && commonStyles.hidden,
-        hiddenOnSearch && commonInteractionStyles.hiddenOnSearch
+        hiddenOnSearch && commonInteractionStyles.hiddenOnSearch,
       )}
       data-name={category}
       aria-label={categoryName}
@@ -54,7 +54,7 @@ const styles = stylesheet.create({
     '.': ClassNames.category,
     minHeight:
       'calc(var(--epr-emoji-fullsize) + var(--epr-category-label-height))',
-    position: 'relative'
+    position: 'relative',
   },
   categoryContent: {
     '.': ClassNames.categoryContent,
@@ -63,7 +63,7 @@ const styles = stylesheet.create({
     gridTemplateColumns: 'repeat(auto-fill, var(--epr-emoji-fullsize))',
     justifyContent: 'space-between',
     margin: 'var(--epr-category-padding)',
-    position: 'relative'
+    position: 'relative',
   },
   label: {
     '.': ClassNames.label,
@@ -82,6 +82,6 @@ const styles = stylesheet.create({
     textTransform: 'capitalize',
     top: '0',
     width: '100%',
-    zIndex: 'var(--epr-category-label-z-index)'
-  }
+    zIndex: 'var(--epr-category-label-z-index)',
+  },
 });