emoji-picker-react 4.5.2 → 4.5.4

package/dist/index.d.ts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { PickerConfig } from './config/config';
 export { ExportedEmoji as Emoji } from './components/emoji/ExportedEmoji';
 export { EmojiStyle, SkinTones, Theme, Categories, EmojiClickData, SuggestionMode, SkinTonePickerLocation } from './types/exposedTypes';
-export interface Props extends PickerConfig {
+export interface PickerProps extends PickerConfig {
 }
-declare function EmojiPicker(props: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof EmojiPicker>;
-export default _default;
+export default function EmojiPicker(props: PickerProps): JSX.Element;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.2",
+  "version": "4.5.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -96,8 +96,5 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"
-  },
-  "dependencies": {
-    "clsx": "^1.2.1"
   }
 }

package/src/DomUtils/classNames.ts

@@ -22,3 +22,27 @@ export enum ClassNames {
 export function asSelectors(...classNames: ClassNames[]): string {
   return classNames.map(c => `.${c}`).join('');
 }
+
+export function clsx(...args: any[]): string {
+  const classes = args.reduce((classes, arg) => {
+    if (typeof arg === 'string') {
+      classes.push(arg);
+    }
+
+    if (Array.isArray(arg)) {
+      classes.push(clsx(...arg));
+    }
+
+    if (typeof arg === 'object') {
+      Object.entries(arg).forEach(([key, value]) => {
+        if (value) {
+          classes.push(key);
+        }
+      });
+    }
+
+    return classes;
+  }, []);
+
+  return classes.filter(Boolean).join(' ');
+}

package/src/EmojiPickerReact.tsx

@@ -6,12 +6,11 @@ import { PickerConfigProvider } from './components/context/PickerConfigContext';
 import { Preview } from './components/footer/Preview';
 import { Header } from './components/header/Header';
 import PickerMain from './components/main/PickerMain';
-import { PickerConfig } from './config/config';
-import './EmojiPickerReact.css';
 
-export interface Props extends PickerConfig {}
+import './EmojiPickerReact.css';
+import { PickerProps } from './index';
 
-export default function EmojiPicker(props: Props) {
+function EmojiPicker(props: PickerProps) {
   return (
     <ElementRefContextProvider>
       <PickerConfigProvider {...props}>
@@ -24,3 +23,23 @@ export default function EmojiPicker(props: Props) {
     </ElementRefContextProvider>
   );
 }
+
+// eslint-disable-next-line complexity
+export default React.memo(EmojiPicker, (prev, next) => {
+  return (
+    prev.emojiVersion === next.emojiVersion &&
+    prev.searchPlaceHolder === next.searchPlaceHolder &&
+    prev.searchPlaceholder === next.searchPlaceholder &&
+    prev.defaultSkinTone === next.defaultSkinTone &&
+    prev.skinTonesDisabled === next.skinTonesDisabled &&
+    prev.autoFocusSearch === next.autoFocusSearch &&
+    prev.emojiStyle === next.emojiStyle &&
+    prev.theme === next.theme &&
+    prev.suggestedEmojisMode === next.suggestedEmojisMode &&
+    prev.lazyLoadEmojis === next.lazyLoadEmojis &&
+    prev.height === next.height &&
+    prev.width === next.width &&
+    prev.searchDisabled === next.searchDisabled &&
+    prev.skinTonePickerLocation === next.skinTonePickerLocation
+  );
+});

package/src/components/Layout/Flex.tsx

@@ -1,6 +1,7 @@
-import clsx from 'clsx';
 import * as React from 'react';
+
 import './Flex.css';
+import { clsx } from '../../DomUtils/classNames';
 
 export enum FlexDirection {
   ROW = 'FlexRow',

package/src/components/Layout/Space.tsx

@@ -1,6 +1,7 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
+import { clsx } from '../../DomUtils/classNames';
+
 type Props = Readonly<{
   className?: string;
   style?: React.CSSProperties;

package/src/components/atoms/Button.tsx

@@ -1,6 +1,7 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
+import { clsx } from '../../DomUtils/classNames';
+
 interface Props
   extends React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,

package/src/components/body/EmojiCategory.tsx

@@ -1,7 +1,6 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import {
   CategoryConfig,
   categoryFromCategoryConfig,

package/src/components/body/EmojiVariationPicker.tsx

@@ -1,8 +1,7 @@
-import clsx from 'clsx';
 import * as React from 'react';
 import { useEffect } from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import { focusFirstVisibleEmoji } from '../../DomUtils/keyboardNavigation';
 import {
   buttonFromTarget,

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -1,7 +1,6 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import { Button } from '../atoms/Button';
 import './Emoji.css';
 

package/src/components/emoji/EmojiImg.tsx

@@ -1,7 +1,6 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import { EmojiStyle } from '../../types/exposedTypes';
 
 export function EmojiImg({

package/src/components/emoji/NativeEmoji.tsx

@@ -1,7 +1,6 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import { parseNativeEmoji } from '../../dataUtils/parseNativeEmoji';
 
 export function NativeEmoji({

package/src/components/header/Search.tsx

@@ -1,8 +1,7 @@
-import clsx from 'clsx';
 import * as React from 'react';
 import { useState } from 'react';
 
-import { asSelectors, ClassNames } from '../../DomUtils/classNames';
+import { asSelectors, ClassNames, clsx } from '../../DomUtils/classNames';
 import {
   useAutoFocusSearchConfig,
   useSearchDisabledConfig,

package/src/components/header/SkinTonePicker.tsx

@@ -1,7 +1,6 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import { useSkinTonesDisabledConfig } from '../../config/useConfig';
 import skinToneVariations, {
   skinTonesNamed

package/src/components/main/PickerMain.tsx

@@ -1,7 +1,6 @@
-import clsx from 'clsx';
 import * as React from 'react';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import { usePickerSizeConfig, useThemeConfig } from '../../config/useConfig';
 import useIsSearchMode from '../../hooks/useIsSearchMode';
 import { useKeyboardNavigation } from '../../hooks/useKeyboardNavigation';

package/src/components/navigation/CategoryNavigation.tsx

@@ -1,9 +1,8 @@
-import clsx from 'clsx';
 import * as React from 'react';
 import { useState } from 'react';
 import './CategoryNavigation.css';
 
-import { ClassNames } from '../../DomUtils/classNames';
+import { ClassNames, clsx } from '../../DomUtils/classNames';
 import {
   categoryFromCategoryConfig,
   categoryNameFromCategoryConfig

package/src/config/config.ts

@@ -63,14 +63,6 @@ export function basePickerConfig(): PickerConfigInternal {
     getEmojiUrl: emojiUrlByUnified,
     height: 450,
     lazyLoadEmojis: false,
-    onEmojiClick: function defaultOnClickHandler(
-      // @ts-ignore
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      emoji: EmojiClickData,
-      // @ts-ignore
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      event: MouseEvent
-    ) {},
     previewConfig: {
       ...basePreviewConfig
     },
@@ -95,7 +87,6 @@ export type PickerConfigInternal = {
   autoFocusSearch: boolean;
   emojiStyle: EmojiStyle;
   categories: CategoriesConfig;
-  onEmojiClick: (emoji: EmojiClickData, event: MouseEvent) => void;
   theme: Theme;
   suggestedEmojisMode: SuggestionMode;
   lazyLoadEmojis: boolean;
@@ -123,6 +114,7 @@ const basePreviewConfig: PreviewConfig = {
 
 type ConfigExternal = {
   previewConfig: Partial<PreviewConfig>;
+  onEmojiClick: (emoji: EmojiClickData, event: MouseEvent) => void;
 } & Omit<PickerConfigInternal, 'previewConfig' | 'unicodeToHide'>;
 
 export type PickerConfig = Partial<ConfigExternal>;

package/src/config/mutableConfig.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { EmojiClickData } from '../types/exposedTypes';
+
+export type MutableConfig = {
+  onEmojiClick?: (emoji: EmojiClickData, event: MouseEvent) => void;
+};
+
+export const MutableConfigContext = React.createContext<
+  React.MutableRefObject<MutableConfig>
+>({} as React.MutableRefObject<MutableConfig>);
+
+export function useMutableConfig(): React.MutableRefObject<MutableConfig> {
+  const mutableConfig = React.useContext(MutableConfigContext);
+  return mutableConfig;
+}
+
+export function useDefineMutableConfig(
+  config: MutableConfig
+): React.MutableRefObject<MutableConfig> {
+  const MutableConfigRef = React.useRef<MutableConfig>({
+    onEmojiClick: config.onEmojiClick || emptyFunc
+  });
+
+  React.useEffect(() => {
+    MutableConfigRef.current.onEmojiClick = config.onEmojiClick || emptyFunc;
+  }, [config.onEmojiClick]);
+
+  return MutableConfigRef;
+}
+
+function emptyFunc() {}

package/src/config/useConfig.ts

@@ -16,6 +16,7 @@ import {
   PreviewConfig
 } from './config';
 import { CustomEmoji } from './customEmojiConfig';
+import { useMutableConfig } from './mutableConfig';
 
 export function useSearchPlaceHolderConfig(): string {
   const { searchPlaceHolder, searchPlaceholder } = usePickerConfig();
@@ -60,8 +61,8 @@ export function useOnEmojiClickConfig(): (
   emoji: EmojiClickData,
   event: MouseEvent
 ) => void {
-  const { onEmojiClick } = usePickerConfig();
-  return onEmojiClick;
+  const { current } = useMutableConfig();
+  return current.onEmojiClick || (() => {});
 }
 
 export function usePreviewConfig(): PreviewConfig {

package/src/index.tsx

@@ -3,6 +3,10 @@ import * as React from 'react';
 import EmojiPickerReact from './EmojiPickerReact';
 import ErrorBoundary from './components/ErrorBoundary';
 import { PickerConfig } from './config/config';
+import {
+  MutableConfigContext,
+  useDefineMutableConfig
+} from './config/mutableConfig';
 
 export { ExportedEmoji as Emoji } from './components/emoji/ExportedEmoji';
 
@@ -16,32 +20,18 @@ export {
   SkinTonePickerLocation
 } from './types/exposedTypes';
 
-export interface Props extends PickerConfig {}
+export interface PickerProps extends PickerConfig {}
+
+export default function EmojiPicker(props: PickerProps) {
+  const MutableConfigRef = useDefineMutableConfig({
+    onEmojiClick: props.onEmojiClick
+  });
 
-function EmojiPicker(props: Props) {
   return (
     <ErrorBoundary>
-      <EmojiPickerReact {...props} />
+      <MutableConfigContext.Provider value={MutableConfigRef}>
+        <EmojiPickerReact {...props} />
+      </MutableConfigContext.Provider>
     </ErrorBoundary>
   );
 }
-
-// eslint-disable-next-line complexity
-export default React.memo(EmojiPicker, (prev, next) => {
-  return (
-    prev.emojiVersion === next.emojiVersion &&
-    prev.searchPlaceHolder === next.searchPlaceHolder &&
-    prev.searchPlaceholder === next.searchPlaceholder &&
-    prev.defaultSkinTone === next.defaultSkinTone &&
-    prev.skinTonesDisabled === next.skinTonesDisabled &&
-    prev.autoFocusSearch === next.autoFocusSearch &&
-    prev.emojiStyle === next.emojiStyle &&
-    prev.theme === next.theme &&
-    prev.suggestedEmojisMode === next.suggestedEmojisMode &&
-    prev.lazyLoadEmojis === next.lazyLoadEmojis &&
-    prev.height === next.height &&
-    prev.width === next.width &&
-    prev.searchDisabled === next.searchDisabled &&
-    prev.skinTonePickerLocation === next.skinTonePickerLocation
-  );
-});