emoji-picker-react 4.4.1 → 4.4.2

package/dist/hooks/useDisallowedEmojis.d.ts

@@ -1 +1,3 @@
+import { DataEmoji } from '../dataUtils/DataTypes';
 export declare function useDisallowedEmojis(): Record<string, boolean>;
+export declare function useIsEmojiDisallowed(): (emoji: DataEmoji) => boolean;

package/package.json

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

package/src/components/body/EmojiList.tsx

@@ -4,20 +4,20 @@ import { ClassNames } from '../../DomUtils/classNames';
 import {
   Categories,
   CategoryConfig,
-  categoryFromCategoryConfig,
+  categoryFromCategoryConfig
 } from '../../config/categoryConfig';
 import {
   useCategoriesConfig,
   useEmojiStyleConfig,
   useGetEmojiUrlConfig,
-  useLazyLoadEmojisConfig,
+  useLazyLoadEmojisConfig
 } from '../../config/useConfig';
 import { emojisByCategory, emojiUnified } from '../../dataUtils/emojiSelectors';
+import { useIsEmojiDisallowed } from '../../hooks/useDisallowedEmojis';
 import { useIsEmojiHidden } from '../../hooks/useIsEmojiHidden';
 import {
   useActiveSkinToneState,
-  useDisallowedEmojisRef,
-  useIsPastInitialLoad,
+  useIsPastInitialLoad
 } from '../context/PickerContext';
 import { ClickableEmoji } from '../emoji/Emoji';
 
@@ -54,7 +54,7 @@ export function EmojiList() {
 function RenderCategory({
   index,
   category,
-  categoryConfig,
+  categoryConfig
 }: {
   index: number;
   category: Categories;
@@ -65,7 +65,7 @@ function RenderCategory({
   const emojiStyle = useEmojiStyleConfig();
   const isPastInitialLoad = useIsPastInitialLoad();
   const [activeSkinTone] = useActiveSkinToneState();
-  const disallowedEmojisRef = useDisallowedEmojisRef();
+  const isEmojiDisallowed = useIsEmojiDisallowed();
   const getEmojiUrl = useGetEmojiUrlConfig();
 
   // Small trick to defer the rendering of all emoji categories until the first category is visible
@@ -75,11 +75,11 @@ function RenderCategory({
 
   let hiddenCounter = 0;
 
-  const emojis = emojisToPush.map((emoji) => {
+  const emojis = emojisToPush.map(emoji => {
     const unified = emojiUnified(emoji, activeSkinTone);
     const { failedToLoad, filteredOut, hidden } = isEmojiHidden(emoji);
 
-    const isDisallowed = !!disallowedEmojisRef.current[unified];
+    const isDisallowed = isEmojiDisallowed(emoji);
 
     if (hidden || isDisallowed) {
       hiddenCounter++;

package/src/hooks/useDisallowedEmojis.ts

@@ -2,7 +2,12 @@ import { useRef, useMemo } from 'react';
 
 import { useEmojiVersionConfig } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
-import { addedIn, allEmojis, emojiUnified } from '../dataUtils/emojiSelectors';
+import {
+  addedIn,
+  allEmojis,
+  emojiUnified,
+  unifiedWithoutSkinTone
+} from '../dataUtils/emojiSelectors';
 
 export function useDisallowedEmojis() {
   const DisallowedEmojisRef = useRef<Record<string, boolean>>({});
@@ -25,6 +30,16 @@ export function useDisallowedEmojis() {
   }, [emojiVersionConfig]);
 }
 
+export function useIsEmojiDisallowed() {
+  const disallowedEmojis = useDisallowedEmojis();
+
+  return function isEmojiDisallowed(emoji: DataEmoji) {
+    const unified = unifiedWithoutSkinTone(emojiUnified(emoji));
+
+    return Boolean(disallowedEmojis[unified]);
+  };
+}
+
 function addedInNewerVersion(
   emoji: DataEmoji,
   supportedLevel: number