emoji-picker-react 4.0.8 → 4.1.0

package/dist/hooks/useDisallowedEmojis.d.ts

@@ -0,0 +1 @@
+export declare function useDisallowedEmojis(): Record<string, boolean>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.8",
+  "version": "4.1.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -92,12 +92,12 @@
     "tiny-invariant": "^1.2.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
-  },
-  "dependencies": {
-    "clsx": "^1.2.1",
+    "typescript": "^4.7.4",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.8",
     "eslint-plugin-react-hooks": "^4.6.0"
+  },
+  "dependencies": {
+    "clsx": "^1.2.1"
   }
 }

package/src/components/body/EmojiList.tsx

@@ -3,18 +3,19 @@ import * as React from 'react';
 import {
   Categories,
   CategoryConfig,
-  categoryFromCategoryConfig
+  categoryFromCategoryConfig,
 } from '../../config/categoryConfig';
 import {
   useCategoriesConfig,
   useEmojiStyleConfig,
-  useLazyLoadEmojisConfig
+  useLazyLoadEmojisConfig,
 } from '../../config/useConfig';
 import { emojisByCategory, emojiUnified } from '../../dataUtils/emojiSelectors';
 import { useIsEmojiHidden } from '../../hooks/useIsEmojiHidden';
 import {
   useActiveSkinToneState,
-  useIsPastInitialLoad
+  useDisallowedEmojisRef,
+  useIsPastInitialLoad,
 } from '../context/PickerContext';
 import { ClickableEmoji } from '../emoji/Emoji';
 
@@ -51,7 +52,7 @@ export function EmojiList() {
 function RenderCategory({
   index,
   category,
-  categoryConfig
+  categoryConfig,
 }: {
   index: number;
   category: Categories;
@@ -62,6 +63,7 @@ function RenderCategory({
   const emojiStyle = useEmojiStyleConfig();
   const isPastInitialLoad = useIsPastInitialLoad();
   const [activeSkinTone] = useActiveSkinToneState();
+  const disallowedEmojisRef = useDisallowedEmojisRef();
 
   // Small trick to defer the rendering of all emoji categories until the first category is visible
   // This way the user gets to actually see something and not wait for the whole picker to render.
@@ -70,14 +72,20 @@ 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);
 
-    if (hidden) {
+    const isDisallowed = !!disallowedEmojisRef.current[unified];
+
+    if (hidden || isDisallowed) {
       hiddenCounter++;
     }
 
+    if (isDisallowed) {
+      return null;
+    }
+
     return (
       <ClickableEmoji
         key={unified}

package/src/components/context/PickerContext.tsx

@@ -5,17 +5,22 @@ import { useDefaultSkinToneConfig } from '../../config/useConfig';
 import { DataEmoji } from '../../dataUtils/DataTypes';
 import { alphaNumericEmojiIndex } from '../../dataUtils/alphaNumericEmojiIndex';
 import { useDebouncedState } from '../../hooks/useDebouncedState';
+import { useDisallowedEmojis } from '../../hooks/useDisallowedEmojis';
 import { FilterDict } from '../../hooks/useFilter';
 import { useMarkInitialLoad } from '../../hooks/useInitialLoad';
 import { SkinTones } from '../../types/exposedTypes';
 
 export function PickerContextProvider({ children }: Props) {
+  const disallowedEmojis = useDisallowedEmojis();
   const defaultSkinTone = useDefaultSkinToneConfig();
 
   // Initialize the filter with the inititial dictionary
   const filterRef = React.useRef<FilterState>(alphaNumericEmojiIndex);
   const disallowClickRef = React.useRef<boolean>(false);
   const disallowMouseRef = React.useRef<boolean>(false);
+  const disallowedEmojisRef = React.useRef<Record<string, boolean>>(
+    disallowedEmojis
+  );
 
   const suggestedUpdateState = useDebouncedState(Date.now(), 200);
   const searchTerm = useDebouncedState('', 100);
@@ -41,7 +46,8 @@ export function PickerContextProvider({ children }: Props) {
         isPastInitialLoad,
         searchTerm,
         skinToneFanOpenState,
-        suggestedUpdateState
+        suggestedUpdateState,
+        disallowedEmojisRef,
       }}
     >
       {children}
@@ -63,18 +69,20 @@ const PickerContext = React.createContext<{
   filterRef: React.MutableRefObject<FilterState>;
   disallowClickRef: React.MutableRefObject<boolean>;
   disallowMouseRef: React.MutableRefObject<boolean>;
+  disallowedEmojisRef: React.MutableRefObject<Record<string, boolean>>;
 }>({
   activeCategoryState: [null, () => {}],
   activeSkinTone: [SkinTones.NEUTRAL, () => {}],
   disallowClickRef: { current: false },
   disallowMouseRef: { current: false },
+  disallowedEmojisRef: { current: {} },
   emojiVariationPickerState: [null, () => {}],
   emojisThatFailedToLoadState: [new Set(), () => {}],
   filterRef: { current: {} },
   isPastInitialLoad: true,
   searchTerm: ['', () => new Promise<string>(() => undefined)],
   skinToneFanOpenState: [false, () => {}],
-  suggestedUpdateState: [Date.now(), () => {}]
+  suggestedUpdateState: [Date.now(), () => {}],
 });
 
 type Props = Readonly<{
@@ -129,6 +137,11 @@ export function useSkinToneFanOpenState() {
   return skinToneFanOpenState;
 }
 
+export function useDisallowedEmojisRef() {
+  const { disallowedEmojisRef } = React.useContext(PickerContext);
+  return disallowedEmojisRef;
+}
+
 export function useUpdateSuggested(): [number, () => void] {
   const { suggestedUpdateState } = React.useContext(PickerContext);
 
@@ -137,7 +150,7 @@ export function useUpdateSuggested(): [number, () => void] {
     suggestedUpdated,
     function updateSuggested() {
       setsuggestedUpdate(Date.now());
-    }
+    },
   ];
 }
 

package/src/config/config.ts

@@ -3,13 +3,13 @@ import {
   EmojiStyle,
   SkinTones,
   SuggestionMode,
-  Theme
+  Theme,
 } from '../types/exposedTypes';
 
 import {
   CategoriesConfig,
   baseCategoriesConfig,
-  mergeCategoriesConfig
+  mergeCategoriesConfig,
 } from './categoryConfig';
 
 export function mergeConfig(
@@ -24,13 +24,13 @@ export function mergeConfig(
   const config = Object.assign(base, userConfig);
 
   const categories = mergeCategoriesConfig(userConfig.categories, {
-    suggestionMode: config.suggestedEmojisMode
+    suggestionMode: config.suggestedEmojisMode,
   });
 
   return {
     ...config,
     categories,
-    previewConfig
+    previewConfig,
   };
 }
 
@@ -40,6 +40,7 @@ export function basePickerConfig(): PickerConfigInternal {
     categories: baseCategoriesConfig(),
     defaultSkinTone: SkinTones.NEUTRAL,
     emojiStyle: EmojiStyle.APPLE,
+    emojiVersion: null,
     height: 450,
     lazyLoadEmojis: false,
     onEmojiClick: function defaultOnClickHandler(
@@ -51,17 +52,18 @@ export function basePickerConfig(): PickerConfigInternal {
       event: MouseEvent
     ) {},
     previewConfig: {
-      ...basePreviewConfig
+      ...basePreviewConfig,
     },
     searchPlaceHolder: 'Search',
     skinTonesDisabled: false,
     suggestedEmojisMode: SuggestionMode.FREQUENT,
     theme: Theme.LIGHT,
-    width: 350
+    width: 350,
   };
 }
 
 export type PickerConfigInternal = {
+  emojiVersion: string | null;
   searchPlaceHolder: string;
   defaultSkinTone: SkinTones;
   skinTonesDisabled: boolean;
@@ -86,7 +88,7 @@ export type PreviewConfig = {
 const basePreviewConfig: PreviewConfig = {
   defaultEmoji: '1f60a',
   defaultCaption: "What's your mood?",
-  showPreview: true
+  showPreview: true,
 };
 
 type ConfigExternal = {

package/src/config/useConfig.ts

@@ -5,7 +5,7 @@ import {
   EmojiStyle,
   SkinTones,
   SuggestionMode,
-  Theme
+  Theme,
 } from '../types/exposedTypes';
 
 import { CategoriesConfig } from './categoryConfig';
@@ -78,3 +78,8 @@ export function usePickerSizeConfig(): { height: number; width: number } {
   const { height, width } = usePickerConfig();
   return { height, width };
 }
+
+export function useEmojiVersionConfig(): string | null {
+  const { emojiVersion } = usePickerConfig();
+  return emojiVersion;
+}