emoji-picker-react 4.0.6 → 4.0.8

package/dist/hooks/useFilter.d.ts

@@ -2,9 +2,10 @@ import { DataEmoji } from '../dataUtils/DataTypes';
 export declare function useClearSearch(): () => void;
 export declare function useAppendSearch(): (str: string) => void;
 export declare function useFilter(): {
-    onChange: (nextValue: string) => void;
+    onChange: (inputValue: string) => void;
     searchTerm: string;
     SearchInputRef: import("../components/context/ElementRefContext").ElementRef<HTMLInputElement>;
 };
 export declare function useIsEmojiFiltered(): (unified: string) => boolean;
 export declare type FilterDict = Record<string, DataEmoji>;
+export declare function getNormalizedSearchTerm(str: string): string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.6",
+  "version": "4.0.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/DomUtils/classNames.ts

@@ -9,6 +9,7 @@ export enum ClassNames {
   label = 'epr-emoji-category-label',
   categoryContent = 'epr-emoji-category-content',
   emojiHasVariatios = 'epr-emoji-has-variations',
+  scrollBody = 'epr-body',
   external = '__EmojiPicker__'
 }
 

package/src/DomUtils/keyboardNavigation.ts

@@ -8,6 +8,7 @@ import {
   rowNumber
 } from './elementPositionInRow';
 import { focusElement } from './focusElement';
+import { scrollEmojiAboveLabel } from './scrollTo';
 import {
   allVisibleEmojis,
   closestCategory,
@@ -22,7 +23,9 @@ import {
 } from './selectors';
 
 export function focusFirstVisibleEmoji(parent: NullableElement) {
-  focusElement(firstVisibleEmoji(parent));
+  const emoji = firstVisibleEmoji(parent);
+  focusElement(emoji);
+  scrollEmojiAboveLabel(emoji);
 }
 
 export function focusAndClickFirstVisibleEmoji(parent: NullableElement) {
@@ -48,6 +51,7 @@ export function focusNextVisibleEmoji(element: NullableElement) {
   }
 
   focusElement(next);
+  scrollEmojiAboveLabel(next);
 }
 
 export function focusPrevVisibleEmoji(element: NullableElement) {
@@ -62,6 +66,7 @@ export function focusPrevVisibleEmoji(element: NullableElement) {
   }
 
   focusElement(prev);
+  scrollEmojiAboveLabel(prev);
 }
 
 export function focusVisibleEmojiOneRowUp(
@@ -79,6 +84,7 @@ export function focusVisibleEmojiOneRowUp(
   }
 
   focusElement(prev);
+  scrollEmojiAboveLabel(prev);
 }
 
 export function focusVisibleEmojiOneRowDown(element: NullableElement) {

package/src/DomUtils/scrollTo.ts

@@ -2,12 +2,20 @@ import { useCallback } from 'react';
 
 import { useBodyRef } from '../components/context/ElementRefContext';
 
-import { NullableElement } from './selectors';
+import {
+  categoryLabelHeight,
+  closestCategory,
+  closestScrollBody,
+  emojiDistanceFromScrollTop,
+  isEmojiBehindLabel,
+  NullableElement,
+  queryScrollBody
+} from './selectors';
 
 export function scrollTo(root: NullableElement, top: number = 0) {
-  const $eprBody = root ? root.querySelector('.epr-body') : null;
+  const $eprBody = queryScrollBody(root);
 
-  if (!root || !$eprBody) {
+  if (!$eprBody) {
     return;
   }
 
@@ -16,6 +24,18 @@ export function scrollTo(root: NullableElement, top: number = 0) {
   });
 }
 
+export function scrollBy(root: NullableElement, by: number): void {
+  const $eprBody = queryScrollBody(root);
+
+  if (!$eprBody) {
+    return;
+  }
+
+  requestAnimationFrame(() => {
+    $eprBody.scrollTop = $eprBody.scrollTop + by;
+  });
+}
+
 export function useScrollTo() {
   const BodyRef = useBodyRef();
 
@@ -30,3 +50,13 @@ export function useScrollTo() {
     [BodyRef]
   );
 }
+
+export function scrollEmojiAboveLabel(emoji: NullableElement) {
+  if (!isEmojiBehindLabel(emoji)) {
+    return;
+  }
+
+  const scrollBody = closestScrollBody(emoji);
+  const by = emojiDistanceFromScrollTop(emoji);
+  scrollBy(scrollBody, -(categoryLabelHeight(closestCategory(emoji)) - by));
+}

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,7 +13,7 @@ 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(
@@ -22,6 +22,14 @@ export function buttonFromTarget(
   return emojiElement?.closest(EmojiButtonSelector) ?? null;
 }
 
+export function isEmojiButton(element: NullableElement): boolean {
+  if (!element) {
+    return false;
+  }
+
+  return element.matches(EmojiButtonSelector);
+}
+
 export function emojiFromElement(
   element: NullableElement
 ): [DataEmoji, string] | [] {
@@ -71,15 +79,63 @@ export function emojiTrueOffsetTop(element: NullableElement): number {
   }
 
   const button = buttonFromTarget(element);
-  const categoryWithoutLabel = closestCategoryContent(button);
-  const category = closestCategory(categoryWithoutLabel);
+  const category = closestCategory(button);
 
   // compensate for the label height
-  const labelHeight =
-    (category?.clientHeight ?? 0) - (categoryWithoutLabel?.clientHeight ?? 0);
+  const labelHeight = categoryLabelHeight(category);
 
   return elementOffsetTop(button) + elementOffsetTop(category) + labelHeight;
 }
+
+export function categoryLabelHeight(category: NullableElement): number {
+  if (!category) {
+    return 0;
+  }
+
+  const categoryWithoutLabel = category.querySelector(
+    asSelectors(ClassNames.categoryContent)
+  );
+
+  return (
+    (category?.clientHeight ?? 0) - (categoryWithoutLabel?.clientHeight ?? 0)
+  );
+}
+
+export function isEmojiBehindLabel(emoji: NullableElement): boolean {
+  if (!emoji) {
+    return false;
+  }
+
+  return (
+    emojiDistanceFromScrollTop(emoji) <
+    categoryLabelHeight(closestCategory(emoji))
+  );
+}
+
+export function queryScrollBody(root: NullableElement): NullableElement {
+  return root
+    ? root.matches(asSelectors(ClassNames.scrollBody))
+      ? root
+      : root.querySelector(asSelectors(ClassNames.scrollBody))
+    : null;
+}
+
+export function emojiDistanceFromScrollTop(emoji: NullableElement): number {
+  if (!emoji) {
+    return 0;
+  }
+
+  return emojiTrueOffsetTop(emoji) - (closestScrollBody(emoji)?.scrollTop ?? 0);
+}
+
+export function closestScrollBody(element: NullableElement): NullableElement {
+  if (!element) {
+    return null;
+  }
+
+  return element.closest(asSelectors(ClassNames.scrollBody)) ?? null;
+}
+
 export function emojiTruOffsetLeft(element: NullableElement): number {
   const button = buttonFromTarget(element);
   const category = closestCategory(button);

package/src/EmojiPickerReact.css

@@ -135,7 +135,7 @@ aside.EmojiPickerReact.epr-main:has(input:placeholder-shown)
   font-family: sans-serif;
 }
 
-.EmojiPickerReact button {
+.EmojiPickerReact button.epr-btn {
   cursor: pointer;
   border: 0;
   background: none;

package/src/components/atoms/Button.tsx

@@ -0,0 +1,22 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+interface Props
+  extends React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
+  className?: string;
+}
+
+export function Button(props: Props) {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={clsx('epr-btn', props.className)}
+    >
+      {props.children}
+    </button>
+  );
+}

package/src/components/body/Body.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { ClassNames } from '../../DomUtils/classNames';
 import { useOnMouseMove } from '../../hooks/useDisallowMouseMove';
 import { useMouseDownHandlers } from '../../hooks/useMouseDownHandlers';
 import { useOnScroll } from '../../hooks/useOnScroll';
@@ -17,7 +18,7 @@ export function Body() {
   useOnMouseMove();
 
   return (
-    <div className="epr-body" ref={BodyRef}>
+    <div className={ClassNames.scrollBody} ref={BodyRef}>
       <EmojiVariationPicker />
       <EmojiList />
     </div>

package/src/components/emoji/Emoji.tsx

@@ -13,6 +13,7 @@ import {
 } from '../../dataUtils/emojiSelectors';
 import { parseNativeEmoji } from '../../dataUtils/parseNativeEmoji';
 import { EmojiStyle } from '../../types/exposedTypes';
+import { Button } from '../atoms/Button';
 import { useEmojisThatFailedToLoadState } from '../context/PickerContext';
 import './Emoji.css';
 
@@ -46,7 +47,7 @@ export function ClickableEmoji({
   const hasVariations = emojiHasVariations(emoji);
 
   return (
-    <button
+    <Button
       className={clsx(ClassNames.emoji, {
         [ClassNames.hidden]: hidden,
         [ClassNames.hiddenOnSearch]: hiddenOnSearch,
@@ -57,7 +58,6 @@ export function ClickableEmoji({
       // @ts-ignore - let's ignore the fact this is not a real react ref, ok?
       aria-label={emojiName(emoji)}
       data-full-name={emojiNames(emoji)}
-      type="button"
     >
       <ViewOnlyEmoji
         unified={unified}
@@ -66,7 +66,7 @@ export function ClickableEmoji({
         emojiStyle={emojiStyle}
         lazyLoad={lazyLoad}
       />
-    </button>
+    </Button>
   );
 }
 

package/src/components/header/Search.css

@@ -16,31 +16,59 @@
   width: 100%;
 }
 
-.EmojiPickerReact .epr-search-container button.epr-btn-clear-search {
+.EmojiPickerReact
+  .epr-search-container
+  button.epr-btn-clear-search
+  .epr-icn-clear-search {
   background-image: svg-load(./svg/times.svg);
-  height: 20px;
-  width: 20px;
   background-color: transparent;
   background-repeat: no-repeat;
+  background-size: 20px;
+  height: 20px;
+  width: 20px;
+}
+
+.EmojiPickerReact .epr-search-container button.epr-btn-clear-search {
   position: absolute;
-  top: 50%;
   right: var(--epr-search-bar-inner-padding);
+  height: 30px;
+  width: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 50%;
   transform: translateY(-50%);
-  background-size: 20px;
+  padding: 0;
+  border-radius: 50%;
 }
-.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover {
+
+.EmojiPickerReact
+  .epr-search-container
+  button.epr-btn-clear-search:hover
+  .epr-icn-clear-search,
+.EmojiPickerReact
+  .epr-search-container
+  button.epr-btn-clear-search:focus
+  .epr-icn-clear-search {
   background-position-y: -20px;
 }
 
+.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:hover,
+.EmojiPickerReact .epr-search-container button.epr-btn-clear-search:focus {
+  background: var(--epr-hover-bg-color);
+}
+
 .EmojiPickerReact..epr-dark-theme
   .epr-search-container
-  button.epr-btn-clear-search {
+  button.epr-btn-clear-search
+  .epr-icn-clear-search {
   background-position-y: -40px;
 }
 
 .EmojiPickerReact..epr-dark-theme
   .epr-search-container
-  button.epr-btn-clear-search:hover {
+  button.epr-btn-clear-search:hover
+  .epr-icn-clear-search {
   background-position-y: -60px;
 }
 

package/src/components/header/Search.tsx

@@ -7,8 +7,13 @@ import {
   useSearchPlaceHolderConfig
 } from '../../config/useConfig';
 import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
-import { useClearSearch, useFilter } from '../../hooks/useFilter';
+import {
+  getNormalizedSearchTerm,
+  useClearSearch,
+  useFilter
+} from '../../hooks/useFilter';
 import Relative from '../Layout/Relative';
+import { Button } from '../atoms/Button';
 import { useSearchInputRef } from '../context/ElementRefContext';
 
 import './Search.css';
@@ -45,11 +50,12 @@ export function Search() {
         ref={SearchInputRef}
       />
       <div className="epr-icn-search" />
-      <button
+      <Button
         className={clsx('epr-btn-clear-search', 'epr-visible-on-search-only')}
         onClick={clearSearch}
-        type="button"
-      />
+      >
+        <div className="epr-icn-clear-search" />
+      </Button>
     </Relative>
   );
 }
@@ -57,7 +63,9 @@ export function Search() {
 function CssSearch({ value }: { value: undefined | string }) {
   return value ? (
     <style>{`
-        .EmojiPickerReact button.epr-emoji:not([data-full-name*="${value.toLowerCase()}"]) {
+        .EmojiPickerReact button.epr-emoji:not([data-full-name*="${getNormalizedSearchTerm(
+          value
+        )}"]) {
           display: none;
         }
   `}</style>

package/src/components/header/SkinTonePicker.tsx

@@ -10,6 +10,7 @@ import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
 import { useFocusSearchInput } from '../../hooks/useFocus';
 import { SkinTones } from '../../types/exposedTypes';
 import Relative from '../Layout/Relative';
+import { Button } from '../atoms/Button';
 import { useSkinTonePickerRef } from '../context/ElementRefContext';
 import {
   useActiveSkinToneState,
@@ -39,8 +40,7 @@ export function SkinTonePicker() {
         {skinToneVariations.map((skinToneVariation, i) => {
           const active = skinToneVariation === activeSkinTone;
           return (
-            <button
-              type="button"
+            <Button
               style={{
                 transform: clsx(
                   `translateX(-${i * (isOpen ? 28 : 0)}px)`,
@@ -65,7 +65,7 @@ export function SkinTonePicker() {
               aria-label={`Skin tone ${
                 skinTonesNamed[skinToneVariation as SkinTones]
               }`}
-            ></button>
+            ></Button>
           );
         })}
       </div>

package/src/components/navigation/CategoryNavigation.tsx

@@ -10,13 +10,16 @@ import {
 } from '../../config/categoryConfig';
 import { useCategoriesConfig } from '../../config/useConfig';
 import { useActiveCategoryScrollDetection } from '../../hooks/useActiveCategoryScrollDetection';
+import useIsSearchMode from '../../hooks/useIsSearchMode';
 import { useScrollCategoryIntoView } from '../../hooks/useScrollCategoryIntoView';
+import { Button } from '../atoms/Button';
 import { useCategoryNavigationRef } from '../context/ElementRefContext';
 
 export function CategoryNavigation() {
   const [activeCategory, setActiveCategory] = useState<string | null>(null);
   const scrollCategoryIntoView = useScrollCategoryIntoView();
   useActiveCategoryScrollDetection(setActiveCategory);
+  const isSearchMode = useIsSearchMode();
 
   const categoriesConfig = useCategoriesConfig();
   const CategoryNavigationRef = useCategoryNavigationRef();
@@ -26,8 +29,8 @@ export function CategoryNavigation() {
       {categoriesConfig.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
         return (
-          <button
-            type="button"
+          <Button
+            tabIndex={isSearchMode ? -1 : 0}
             className={clsx('epr-cat-btn', `epr-icn-${category}`, {
               [ClassNames.active]: category === activeCategory
             })}

package/src/config/config.ts

@@ -40,6 +40,7 @@ export function basePickerConfig(): PickerConfigInternal {
     categories: baseCategoriesConfig(),
     defaultSkinTone: SkinTones.NEUTRAL,
     emojiStyle: EmojiStyle.APPLE,
+    height: 450,
     lazyLoadEmojis: false,
     onEmojiClick: function defaultOnClickHandler(
       // @ts-ignore
@@ -49,15 +50,14 @@ export function basePickerConfig(): PickerConfigInternal {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       event: MouseEvent
     ) {},
-    height: 450,
-    width: 350,
     previewConfig: {
       ...basePreviewConfig
     },
     searchPlaceHolder: 'Search',
     skinTonesDisabled: false,
     suggestedEmojisMode: SuggestionMode.FREQUENT,
-    theme: Theme.LIGHT
+    theme: Theme.LIGHT,
+    width: 350
   };
 }
 

package/src/hooks/useFilter.ts

@@ -11,6 +11,8 @@ import {
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiNames } from '../dataUtils/emojiSelectors';
 
+import { useFocusSearchInput } from './useFocus';
+
 function useSetFilterRef() {
   const filterRef = useFilterRef();
 
@@ -28,6 +30,7 @@ function useSetFilterRef() {
 export function useClearSearch() {
   const applySearch = useApplySearch();
   const SearchInputRef = useSearchInputRef();
+  const focusSearchInput = useFocusSearchInput();
 
   return function clearSearch() {
     if (SearchInputRef.current) {
@@ -35,6 +38,7 @@ export function useClearSearch() {
     }
 
     applySearch('');
+    focusSearchInput();
   };
 }
 
@@ -44,10 +48,10 @@ export function useAppendSearch() {
 
   return function appendSearch(str: string) {
     if (SearchInputRef.current) {
-      SearchInputRef.current.value = SearchInputRef.current.value + str;
-      applySearch(SearchInputRef.current.value);
+      SearchInputRef.current.value = `${SearchInputRef.current.value}${str}`;
+      applySearch(getNormalizedSearchTerm(SearchInputRef.current.value));
     } else {
-      applySearch(str);
+      applySearch(getNormalizedSearchTerm(str));
     }
   };
 }
@@ -66,9 +70,11 @@ export function useFilter() {
     SearchInputRef
   };
 
-  function onChange(nextValue: string) {
+  function onChange(inputValue: string) {
     const filter = filterRef.current;
 
+    const nextValue = inputValue.toLowerCase();
+
     if (filter?.[nextValue] || nextValue.length <= 1) {
       return applySearch(nextValue);
     }
@@ -96,9 +102,11 @@ function useApplySearch() {
 
   return function applySearch(searchTerm: string) {
     requestAnimationFrame(() => {
-      setSearchTerm(searchTerm.toLowerCase()).then(() => {
-        scrollTo(PickerMainRef.current, 0);
-      });
+      setSearchTerm(searchTerm ? searchTerm?.toLowerCase() : searchTerm).then(
+        () => {
+          scrollTo(PickerMainRef.current, 0);
+        }
+      );
     });
   };
 }
@@ -128,8 +136,7 @@ export function useIsEmojiFiltered(): (unified: string) => boolean {
   const { current: filter } = useFilterRef();
   const [searchTerm] = useSearchTermState();
 
-  return unified =>
-    isEmojiFilteredBySearchTerm(unified, filter, searchTerm.toLowerCase());
+  return unified => isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
 }
 
 function isEmojiFilteredBySearchTerm(
@@ -168,3 +175,11 @@ function findLongestMatch(
 
   return null;
 }
+
+export function getNormalizedSearchTerm(str: string): string {
+  if (!str || typeof str !== 'string') {
+    return '';
+  }
+
+  return str.trim().toLowerCase();
+}

package/src/hooks/useKeyboardNavigation.ts

@@ -73,13 +73,8 @@ function usePickerMainKeyboardEvents() {
       function onKeyDown(event: KeyboardEvent) {
         const { key } = event;
 
+        disallowMouseMove();
         switch (key) {
-          case KeyboardEvents.ArrowDown:
-          case KeyboardEvents.ArrowUp:
-          case KeyboardEvents.ArrowLeft:
-          case KeyboardEvents.ArrowRight:
-            disallowMouseMove();
-            break;
           // eslint-disable-next-line no-fallthrough
           case KeyboardEvents.Escape:
             event.preventDefault();