emoji-picker-react 4.5.7 → 4.5.9

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.7",
+  "version": "4.5.9",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/EmojiPickerReact.tsx

@@ -26,6 +26,8 @@ function EmojiPicker(props: PickerProps) {
 
 // eslint-disable-next-line complexity
 export default React.memo(EmojiPicker, (prev, next) => {
+  const prevCustomEmojis = prev.customEmojis ?? [];
+  const nextCustomEmojis = next.customEmojis ?? [];
   return (
     prev.emojiVersion === next.emojiVersion &&
     prev.searchPlaceHolder === next.searchPlaceHolder &&
@@ -40,6 +42,7 @@ export default React.memo(EmojiPicker, (prev, next) => {
     prev.height === next.height &&
     prev.width === next.width &&
     prev.searchDisabled === next.searchDisabled &&
-    prev.skinTonePickerLocation === next.skinTonePickerLocation
+    prev.skinTonePickerLocation === next.skinTonePickerLocation &&
+    prevCustomEmojis.length === nextCustomEmojis.length
   );
 });

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/context/PickerConfigContext.tsx

@@ -17,7 +17,8 @@ const ConfigContext = React.createContext<PickerConfigInternal>(
 );
 
 export function PickerConfigProvider({ children, ...config }: Props) {
-  const [mergedConfig] = React.useState(() => mergeConfig(config));
+  const mergedConfig = useSetConfig(config);
+
   return (
     <ConfigContext.Provider value={mergedConfig}>
       {children}
@@ -25,6 +26,22 @@ export function PickerConfigProvider({ children, ...config }: Props) {
   );
 }
 
+export function useSetConfig(config: PickerConfig) {
+  const [mergedConfig, setMergedConfig] = React.useState(() =>
+    mergeConfig(config)
+  );
+
+  React.useEffect(() => {
+    if (config.customEmojis?.length !== mergedConfig.customEmojis?.length) {
+      setMergedConfig(mergeConfig(config));
+    }
+    // not gonna...
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config.customEmojis?.length]);
+
+  return mergedConfig;
+}
+
 export function usePickerConfig() {
   return React.useContext(ConfigContext);
 }

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/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);
+}