emoji-picker-react 4.5.8 → 4.5.10

package/dist/components/context/PickerConfigContext.d.ts

@@ -4,5 +4,6 @@ declare type Props = PickerConfig & Readonly<{
     children: React.ReactNode;
 }>;
 export declare function PickerConfigProvider({ children, ...config }: Props): JSX.Element;
+export declare function useSetConfig(config: PickerConfig): PickerConfigInternal;
 export declare function usePickerConfig(): PickerConfigInternal;
 export {};

package/dist/dataUtils/emojiSelectors.d.ts

@@ -14,5 +14,5 @@ export declare function emojiHasVariations(emoji: DataEmoji): boolean;
 export declare function emojiVariationUnified(emoji: DataEmoji, skinTone?: string): string | undefined;
 export declare function emojiByUnified(unified?: string): DataEmoji | undefined;
 export declare const allEmojis: DataEmojis;
-export declare function addCustomEmojis(customEmojis: CustomEmoji[]): void;
+export declare function setCustomEmojis(customEmojis: CustomEmoji[]): void;
 export declare function activeVariationFromUnified(unified: string): SkinTones | null;

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

@@ -16840,7 +16840,8 @@ function emojiByUnified(unified) {
   return allEmojisByUnified[withoutSkinTone];
 }
 var allEmojis = /*#__PURE__*/Object.values(emojis).flat();
-function addCustomEmojis(customEmojis) {
+function setCustomEmojis(customEmojis) {
+  emojis[exports.Categories.CUSTOM] = [];
   customEmojis.forEach(function (emoji) {
     var emojiData = customToRegularEmoji(emoji);
 
@@ -16903,7 +16904,7 @@ function mergeConfig(userConfig) {
   var categories = mergeCategoriesConfig(userConfig.categories, {
     suggestionMode: config.suggestedEmojisMode
   });
-  addCustomEmojis((_config$customEmojis = config.customEmojis) != null ? _config$customEmojis : []);
+  setCustomEmojis((_config$customEmojis = config.customEmojis) != null ? _config$customEmojis : []);
   var skinTonePickerLocation = config.searchDisabled ? exports.SkinTonePickerLocation.PREVIEW : config.skinTonePickerLocation;
   return _extends({}, config, {
     categories: categories,
@@ -16946,14 +16947,30 @@ function PickerConfigProvider(_ref) {
   var children = _ref.children,
       config = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var mergedConfig = useSetConfig(config);
+  return React.createElement(ConfigContext.Provider, {
+    value: mergedConfig
+  }, children);
+}
+function useSetConfig(config) {
+  var _config$customEmojis2;
+
   var _React$useState = React.useState(function () {
     return mergeConfig(config);
   }),
-      mergedConfig = _React$useState[0];
+      mergedConfig = _React$useState[0],
+      setMergedConfig = _React$useState[1];
 
-  return React.createElement(ConfigContext.Provider, {
-    value: mergedConfig
-  }, children);
+  React.useEffect(function () {
+    var _config$customEmojis, _mergedConfig$customE;
+
+    if (((_config$customEmojis = config.customEmojis) == null ? void 0 : _config$customEmojis.length) !== ((_mergedConfig$customE = mergedConfig.customEmojis) == null ? void 0 : _mergedConfig$customE.length)) {
+      setMergedConfig(mergeConfig(config));
+    } // not gonna...
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [(_config$customEmojis2 = config.customEmojis) == null ? void 0 : _config$customEmojis2.length]);
+  return mergedConfig;
 }
 function usePickerConfig() {
   return React.useContext(ConfigContext);
@@ -19815,7 +19832,11 @@ function EmojiPicker(props) {
 
 
 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 _prev$customEmojis, _next$customEmojis;
+
+  var prevCustomEmojis = (_prev$customEmojis = prev.customEmojis) != null ? _prev$customEmojis : [];
+  var nextCustomEmojis = (_next$customEmojis = next.customEmojis) != null ? _next$customEmojis : [];
+  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 && prevCustomEmojis.length === nextCustomEmojis.length;
 });
 
 var ErrorBoundary = /*#__PURE__*/function (_React$Component) {