emoji-picker-react 4.5.2 → 4.5.4

package/dist/DomUtils/classNames.d.ts

@@ -19,3 +19,4 @@ export declare enum ClassNames {
     variationPicker = "epr-emoji-variation-picker"
 }
 export declare function asSelectors(...classNames: ClassNames[]): string;
+export declare function clsx(...args: any[]): string;

package/dist/EmojiPickerReact.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { PickerConfig } from './config/config';
+import * as React from 'react';
 import './EmojiPickerReact.css';
-export interface Props extends PickerConfig {
-}
-export default function EmojiPicker(props: Props): JSX.Element;
+import { PickerProps } from './index';
+declare function EmojiPicker(props: PickerProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof EmojiPicker>;
+export default _default;

package/dist/config/config.d.ts

@@ -14,7 +14,6 @@ export declare type PickerConfigInternal = {
     autoFocusSearch: boolean;
     emojiStyle: EmojiStyle;
     categories: CategoriesConfig;
-    onEmojiClick: (emoji: EmojiClickData, event: MouseEvent) => void;
     theme: Theme;
     suggestedEmojisMode: SuggestionMode;
     lazyLoadEmojis: boolean;
@@ -34,6 +33,7 @@ export declare type PreviewConfig = {
 };
 declare type ConfigExternal = {
     previewConfig: Partial<PreviewConfig>;
+    onEmojiClick: (emoji: EmojiClickData, event: MouseEvent) => void;
 } & Omit<PickerConfigInternal, 'previewConfig' | 'unicodeToHide'>;
 export declare type PickerConfig = Partial<ConfigExternal>;
 export declare type PickerDimensions = string | number;

package/dist/config/mutableConfig.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { EmojiClickData } from '../types/exposedTypes';
+export declare type MutableConfig = {
+    onEmojiClick?: (emoji: EmojiClickData, event: MouseEvent) => void;
+};
+export declare const MutableConfigContext: React.Context<React.MutableRefObject<MutableConfig>>;
+export declare function useMutableConfig(): React.MutableRefObject<MutableConfig>;
+export declare function useDefineMutableConfig(config: MutableConfig): React.MutableRefObject<MutableConfig>;

package/dist/emoji-picker-react.cjs.development.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var React = require('react');
-var clsx = _interopDefault(require('clsx'));
+var React__default = _interopDefault(React);
 
 var ClassNames;
 
@@ -39,6 +39,35 @@ function asSelectors() {
     return "." + c;
   }).join('');
 }
+function clsx() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+
+  var classes = args.reduce(function (classes, arg) {
+    if (typeof arg === 'string') {
+      classes.push(arg);
+    }
+
+    if (Array.isArray(arg)) {
+      classes.push(clsx.apply(void 0, arg));
+    }
+
+    if (typeof arg === 'object') {
+      Object.entries(arg).forEach(function (_ref) {
+        var key = _ref[0],
+            value = _ref[1];
+
+        if (value) {
+          classes.push(key);
+        }
+      });
+    }
+
+    return classes;
+  }, []);
+  return classes.filter(Boolean).join(' ');
+}
 
 function focusElement(element) {
   if (!element) {
@@ -16888,11 +16917,6 @@ function basePickerConfig() {
     getEmojiUrl: emojiUrlByUnified,
     height: 450,
     lazyLoadEmojis: false,
-    onEmojiClick: function defaultOnClickHandler( // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    emoji, // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    event) {},
     previewConfig: _extends({}, basePreviewConfig),
     searchDisabled: false,
     searchPlaceHolder: DEFAULT_SEARCH_PLACEHOLDER,
@@ -16930,6 +16954,23 @@ function usePickerConfig() {
   return React.useContext(ConfigContext);
 }
 
+var MutableConfigContext = /*#__PURE__*/React__default.createContext({});
+function useMutableConfig() {
+  var mutableConfig = React__default.useContext(MutableConfigContext);
+  return mutableConfig;
+}
+function useDefineMutableConfig(config) {
+  var MutableConfigRef = React__default.useRef({
+    onEmojiClick: config.onEmojiClick || emptyFunc
+  });
+  React__default.useEffect(function () {
+    MutableConfigRef.current.onEmojiClick = config.onEmojiClick || emptyFunc;
+  }, [config.onEmojiClick]);
+  return MutableConfigRef;
+}
+
+function emptyFunc() {}
+
 function useSearchPlaceHolderConfig() {
   var _find;
 
@@ -16978,20 +17019,20 @@ function useCustomEmojisConfig() {
   return customEmojis;
 }
 function useOnEmojiClickConfig() {
-  var _usePickerConfig8 = usePickerConfig(),
-      onEmojiClick = _usePickerConfig8.onEmojiClick;
+  var _useMutableConfig = useMutableConfig(),
+      current = _useMutableConfig.current;
 
-  return onEmojiClick;
+  return current.onEmojiClick || function () {};
 }
 function usePreviewConfig() {
-  var _usePickerConfig9 = usePickerConfig(),
-      previewConfig = _usePickerConfig9.previewConfig;
+  var _usePickerConfig8 = usePickerConfig(),
+      previewConfig = _usePickerConfig8.previewConfig;
 
   return previewConfig;
 }
 function useThemeConfig() {
-  var _usePickerConfig10 = usePickerConfig(),
-      theme = _usePickerConfig10.theme;
+  var _usePickerConfig9 = usePickerConfig(),
+      theme = _usePickerConfig9.theme;
 
   if (theme === exports.Theme.AUTO) {
     return isSystemDarkTheme() ? exports.Theme.DARK : exports.Theme.LIGHT;
@@ -17000,21 +17041,21 @@ function useThemeConfig() {
   return theme;
 }
 function useSuggestedEmojisModeConfig() {
-  var _usePickerConfig11 = usePickerConfig(),
-      suggestedEmojisMode = _usePickerConfig11.suggestedEmojisMode;
+  var _usePickerConfig10 = usePickerConfig(),
+      suggestedEmojisMode = _usePickerConfig10.suggestedEmojisMode;
 
   return suggestedEmojisMode;
 }
 function useLazyLoadEmojisConfig() {
-  var _usePickerConfig12 = usePickerConfig(),
-      lazyLoadEmojis = _usePickerConfig12.lazyLoadEmojis;
+  var _usePickerConfig11 = usePickerConfig(),
+      lazyLoadEmojis = _usePickerConfig11.lazyLoadEmojis;
 
   return lazyLoadEmojis;
 }
 function usePickerSizeConfig() {
-  var _usePickerConfig13 = usePickerConfig(),
-      height = _usePickerConfig13.height,
-      width = _usePickerConfig13.width;
+  var _usePickerConfig12 = usePickerConfig(),
+      height = _usePickerConfig12.height,
+      width = _usePickerConfig12.width;
 
   return {
     height: getDimension(height),
@@ -17022,32 +17063,32 @@ function usePickerSizeConfig() {
   };
 }
 function useEmojiVersionConfig() {
-  var _usePickerConfig14 = usePickerConfig(),
-      emojiVersion = _usePickerConfig14.emojiVersion;
+  var _usePickerConfig13 = usePickerConfig(),
+      emojiVersion = _usePickerConfig13.emojiVersion;
 
   return emojiVersion;
 }
 function useSearchDisabledConfig() {
-  var _usePickerConfig15 = usePickerConfig(),
-      searchDisabled = _usePickerConfig15.searchDisabled;
+  var _usePickerConfig14 = usePickerConfig(),
+      searchDisabled = _usePickerConfig14.searchDisabled;
 
   return searchDisabled;
 }
 function useSkinTonePickerLocationConfig() {
-  var _usePickerConfig16 = usePickerConfig(),
-      skinTonePickerLocation = _usePickerConfig16.skinTonePickerLocation;
+  var _usePickerConfig15 = usePickerConfig(),
+      skinTonePickerLocation = _usePickerConfig15.skinTonePickerLocation;
 
   return skinTonePickerLocation;
 }
 function useUnicodeToHide() {
-  var _usePickerConfig17 = usePickerConfig(),
-      unicodeToHide = _usePickerConfig17.unicodeToHide;
+  var _usePickerConfig16 = usePickerConfig(),
+      unicodeToHide = _usePickerConfig16.unicodeToHide;
 
   return unicodeToHide;
 }
 function useGetEmojiUrlConfig() {
-  var _usePickerConfig18 = usePickerConfig(),
-      getEmojiUrl = _usePickerConfig18.getEmojiUrl;
+  var _usePickerConfig17 = usePickerConfig(),
+      getEmojiUrl = _usePickerConfig17.getEmojiUrl;
 
   return getEmojiUrl;
 }
@@ -19724,7 +19765,12 @@ function PickerRootElement(_ref2) {
 
 function EmojiPicker(props) {
   return React.createElement(ElementRefContextProvider, null, React.createElement(PickerConfigProvider, Object.assign({}, props), React.createElement(PickerMain, null, React.createElement(Header, null), React.createElement(Body, null), React.createElement(Preview, null))));
-}
+} // eslint-disable-next-line complexity
+
+
+var EmojiPickerReact = /*#__PURE__*/React.memo(EmojiPicker, function (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;
+});
 
 var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ErrorBoundary, _React$Component);
@@ -19790,14 +19836,14 @@ function ExportedEmoji(_ref) {
 }
 
 function EmojiPicker$1(props) {
-  return React.createElement(ErrorBoundary, null, React.createElement(EmojiPicker, Object.assign({}, props)));
-} // eslint-disable-next-line complexity
-
-
-var index = /*#__PURE__*/React.memo(EmojiPicker$1, function (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;
-});
+  var MutableConfigRef = useDefineMutableConfig({
+    onEmojiClick: props.onEmojiClick
+  });
+  return React.createElement(ErrorBoundary, null, React.createElement(MutableConfigContext.Provider, {
+    value: MutableConfigRef
+  }, React.createElement(EmojiPickerReact, Object.assign({}, props))));
+}
 
 exports.Emoji = ExportedEmoji;
-exports.default = index;
+exports.default = EmojiPicker$1;
 //# sourceMappingURL=emoji-picker-react.cjs.development.js.map