emoji-picker-react 4.5.6 → 4.5.8

package/dist/hooks/useFilter.d.ts

@@ -5,6 +5,7 @@ export declare function useFilter(): {
     onChange: (inputValue: string) => void;
     searchTerm: string;
     SearchInputRef: import("../components/context/ElementRefContext").ElementRef<HTMLInputElement>;
+    statusSearchResults: string;
 };
 export declare function useIsEmojiFiltered(): (unified: string) => boolean;
 export declare type FilterDict = Record<string, DataEmoji>;

package/package.json

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

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(
@@ -40,7 +40,7 @@ export function emojiFromElement(
     return [];
   }
 
-  const emoji = emojiByUnified(originalUnified);
+  const emoji = emojiByUnified(unified ?? originalUnified);
 
   if (!emoji) {
     return [];

package/src/components/body/EmojiCategory.css

@@ -18,6 +18,8 @@
   display: flex;
   align-items: center;
   font-weight: bold;
+  font-size: 16px;
+  margin: 0;
   text-transform: capitalize;
   backdrop-filter: blur(3px);
   padding: var(--epr-category-label-padding);

package/src/components/body/EmojiCategory.tsx

@@ -33,7 +33,7 @@ export function EmojiCategory({
       data-name={category}
       aria-label={categoryName}
     >
-      <div className={ClassNames.label}>{categoryName}</div>
+      <h2 className={ClassNames.label}>{categoryName}</h2>
       <div className={ClassNames.categoryContent}>{children}</div>
     </li>
   );

package/src/components/emoji/Emoji.css

@@ -67,6 +67,10 @@
   letter-spacing: 0;
 }
 
+.EmojiPickerReact button.epr-emoji > * {
+  transition: background-color 0.2s;
+}
+
 .EmojiPickerReact button.epr-emoji:hover > * {
   background-color: var(--epr-emoji-hover-color);
 }

package/src/components/footer/Preview.tsx

@@ -17,8 +17,8 @@ import Flex from '../Layout/Flex';
 import Space from '../Layout/Space';
 import { useEmojiVariationPickerState } from '../context/PickerContext';
 import './Preview.css';
-import { SkinTonePickerMenu } from '../header/SkinTonePicker';
 import { ViewOnlyEmoji } from '../emoji/ViewOnlyEmoji';
+import { SkinTonePickerMenu } from '../header/SkinTonePicker';
 
 export function Preview() {
   const previewConfig = usePreviewConfig();
@@ -46,16 +46,19 @@ export function PreviewBody() {
 
   useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
 
-  const emoji = emojiByUnified(previewEmoji?.originalUnified);
+  const emoji = emojiByUnified(
+    previewEmoji?.unified ?? previewEmoji?.originalUnified
+  );
 
   const show = emoji != null && previewEmoji != null;
 
   return <PreviewContent />;
 
   function PreviewContent() {
-    const defaultEmoji = variationPickerEmoji ?? emojiByUnified(previewConfig.defaultEmoji)
+    const defaultEmoji =
+      variationPickerEmoji ?? emojiByUnified(previewConfig.defaultEmoji);
     if (!defaultEmoji) {
-      return null
+      return null;
     }
     const defaultText = variationPickerEmoji
       ? emojiName(variationPickerEmoji)
@@ -83,9 +86,7 @@ export function PreviewBody() {
           ) : null}
         </div>
         {show ? (
-          <div className="epr-preview-emoji-label">
-            {emojiName(emoji)}
-          </div>
+          <div className="epr-preview-emoji-label">{emojiName(emoji)}</div>
         ) : (
           <div className="epr-preview-emoji-label">{defaultText}</div>
         )}

package/src/components/header/Search.css

@@ -4,6 +4,16 @@
   min-width: 0;
 }
 
+.EmojiPickerReact .epr-search-container .epr-status-visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .EmojiPickerReact .epr-search-container input.epr-search {
   outline: none;
   transition: all 0.2s ease-in-out;

package/src/components/header/Search.tsx

@@ -47,7 +47,7 @@ export function Search() {
   const clearSearch = useClearSearch();
   const placeholder = useSearchPlaceHolderConfig();
   const autoFocus = useAutoFocusSearchConfig();
-  const { onChange } = useFilter();
+  const { statusSearchResults, searchTerm, onChange } = useFilter();
 
   const input = SearchInputRef?.current;
   const value = input?.value;
@@ -62,6 +62,7 @@ export function Search() {
         onFocus={closeAllOpenToggles}
         className="epr-search"
         type="text"
+        aria-controls='epr-search-id'
         placeholder={placeholder}
         onChange={event => {
           setInc(inc + 1);
@@ -71,6 +72,17 @@ export function Search() {
         }}
         ref={SearchInputRef}
       />
+      {searchTerm ? (
+        <div
+          role='status'
+          className={clsx('epr-status-search-results', 'epr-status-visually-hidden')}
+          aria-live='polite'
+          id='epr-search-id'
+          aria-atomic='true'
+        >
+          {statusSearchResults}
+        </div>
+      ) : null}
       <div className="epr-icn-search" />
       <Button
         className={clsx('epr-btn-clear-search', 'epr-visible-on-search-only')}

package/src/components/navigation/CategoryNavigation.tsx

@@ -27,9 +27,16 @@ export function CategoryNavigation() {
   const hideCustomCategory = useShouldHideCustomEmojis();
 
   return (
-    <div className="epr-category-nav" ref={CategoryNavigationRef}>
+      <div
+        className='epr-category-nav'
+        role='tablist'
+        aria-label='Category navigation'
+        id='epr-category-nav-id'
+        ref={CategoryNavigationRef}
+      >
       {categoriesConfig.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
+        const isActiveCategory = category === activeCategory;
 
         if (isCustomCategory(categoryConfig) && hideCustomCategory) {
           return null;
@@ -37,9 +44,9 @@ export function CategoryNavigation() {
 
         return (
           <Button
-            tabIndex={isSearchMode ? -1 : 0}
+            tabIndex={(isSearchMode || isActiveCategory) ? -1 : 0}
             className={clsx('epr-cat-btn', `epr-icn-${category}`, {
-              [ClassNames.active]: category === activeCategory
+              [ClassNames.active]: isActiveCategory
             })}
             key={category}
             onClick={() => {
@@ -47,6 +54,9 @@ export function CategoryNavigation() {
               scrollCategoryIntoView(category);
             }}
             aria-label={categoryNameFromCategoryConfig(categoryConfig)}
+            aria-selected={isActiveCategory}
+            role='tab'
+            aria-controls='epr-category-nav-id'
           />
         );
       })}

package/src/config/config.ts

@@ -22,6 +22,13 @@ import { CustomEmoji } from './customEmojiConfig';
 const KNOWN_FAILING_EMOJIS = ['2640-fe0f', '2642-fe0f', '2695-fe0f'];
 
 export const DEFAULT_SEARCH_PLACEHOLDER = 'Search';
+export const SEARCH_RESULTS_NO_RESULTS_FOUND = 'No results found';
+export const SEARCH_RESULTS_SUFFIX =
+  ' found. Use up and down arrow keys to navigate.';
+export const SEARCH_RESULTS_ONE_RESULT_FOUND =
+  '1 result' + SEARCH_RESULTS_SUFFIX;
+export const SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND =
+  '%n results' + SEARCH_RESULTS_SUFFIX;
 
 export function mergeConfig(
   userConfig: PickerConfig = {}

package/src/config/useConfig.ts

@@ -11,6 +11,9 @@ import {
 import { CategoriesConfig } from './categoryConfig';
 import {
   DEFAULT_SEARCH_PLACEHOLDER,
+  SEARCH_RESULTS_NO_RESULTS_FOUND,
+  SEARCH_RESULTS_ONE_RESULT_FOUND,
+  SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND,
   PickerDimensions,
   PreviewConfig
 } from './config';
@@ -126,3 +129,16 @@ function getDimension(dimensionConfig: PickerDimensions): PickerDimensions {
     ? `${dimensionConfig}px`
     : dimensionConfig;
 }
+
+export function useSearchResultsConfig(searchResultsCount: number): string {
+  const hasResults = searchResultsCount > 0;
+  const isPlural = searchResultsCount > 1;
+
+  if (hasResults) {
+    return isPlural ?
+      SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND.replace('%n', searchResultsCount.toString())
+        : SEARCH_RESULTS_ONE_RESULT_FOUND;
+  }
+
+  return SEARCH_RESULTS_NO_RESULTS_FOUND;
+}

package/src/dataUtils/emojiSelectors.ts

@@ -123,6 +123,13 @@ const allEmojisByUnified: {
 setTimeout(() => {
   allEmojis.reduce((allEmojis, Emoji) => {
     allEmojis[emojiUnified(Emoji)] = Emoji;
+
+    if (emojiHasVariations(Emoji)) {
+      emojiVariations(Emoji).forEach(variation => {
+        allEmojis[variation] = Emoji;
+      });
+    }
+
     return allEmojis;
   }, allEmojisByUnified);
 });

package/src/hooks/useFilter.ts

@@ -12,6 +12,7 @@ import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiNames } from '../dataUtils/emojiSelectors';
 
 import { useFocusSearchInput } from './useFocus';
+import { useSearchResultsConfig } from '../config/useConfig';
 
 function useSetFilterRef() {
   const filterRef = useFilterRef();
@@ -63,11 +64,13 @@ export function useFilter() {
   const applySearch = useApplySearch();
 
   const [searchTerm] = useSearchTermState();
+  const statusSearchResults = getStatusSearchResults(filterRef.current, searchTerm);
 
   return {
     onChange,
     searchTerm,
     SearchInputRef,
+    statusSearchResults,
   };
 
   function onChange(inputValue: string) {
@@ -183,3 +186,10 @@ export function getNormalizedSearchTerm(str: string): string {
 
   return str.trim().toLowerCase();
 }
+
+function getStatusSearchResults(filterState: FilterState, searchTerm: string): string {
+  if (!filterState?.[searchTerm]) return '';
+
+  const searchResultsCount = Object.entries(filterState?.[searchTerm])?.length || 0;
+  return useSearchResultsConfig(searchResultsCount);
+}