emoji-picker-react 4.7.12 → 4.7.13

package/dist/DomUtils/detectEmojyPartiallyBelowFold.d.ts

@@ -0,0 +1,2 @@
+import { NullableElement } from './selectors';
+export declare function detectEmojyPartiallyBelowFold(button: HTMLButtonElement, bodyRef: NullableElement): number;

package/dist/config/compareConfig.d.ts

@@ -0,0 +1,2 @@
+import { PickerConfig } from './config';
+export declare function compareConfig(prev: PickerConfig, next: PickerConfig): boolean;

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

@@ -187,6 +187,14 @@ function darkMode(key, value) {
   };
 }
 
+// eslint-disable-next-line complexity
+function compareConfig(prev, next) {
+  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.open === next.open && prev.emojiVersion === next.emojiVersion && prev.reactionsDefaultOpen === next.reactionsDefaultOpen && 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.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
+}
+
 var DEFAULT_REACTIONS = ['1f44d', '2764-fe0f', '1f603', '1f622', '1f64f', '1f44e', '1f621' // 😡
 ];
 
@@ -16863,22 +16871,18 @@ function useSetConfig(config) {
     mergedConfig = _React$useState[0],
     setMergedConfig = _React$useState[1];
   React.useEffect(function () {
-    if (avoidRefresh(config, mergedConfig)) {
+    if (compareConfig(mergedConfig, config)) {
       return;
     }
     setMergedConfig(mergeConfig(config));
     // not gonna...
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [(_config$customEmojis = config.customEmojis) == null ? void 0 : _config$customEmojis.length, config.open]);
+  }, [(_config$customEmojis = config.customEmojis) == null ? void 0 : _config$customEmojis.length, config.open, config.emojiVersion, config.reactionsDefaultOpen, config.searchPlaceHolder, config.searchPlaceholder, config.defaultSkinTone, config.skinTonesDisabled, config.autoFocusSearch, config.emojiStyle, config.theme, config.suggestedEmojisMode, config.lazyLoadEmojis, config.className, config.height, config.width, config.searchDisabled, config.skinTonePickerLocation]);
   return mergedConfig;
 }
 function usePickerConfig() {
   return React.useContext(ConfigContext);
 }
-function avoidRefresh(prev, next) {
-  var _prev$customEmojis, _next$customEmojis;
-  return ((_prev$customEmojis = prev.customEmojis) == null ? void 0 : _prev$customEmojis.length) === ((_next$customEmojis = next.customEmojis) == null ? void 0 : _next$customEmojis.length) && prev.open === next.open;
-}
 
 var MutableConfigContext = /*#__PURE__*/React__default.createContext({});
 function useMutableConfig() {
@@ -18928,6 +18932,16 @@ var styles$9 = /*#__PURE__*/stylesheet.create({
   }
 });
 
+function detectEmojyPartiallyBelowFold(button, bodyRef) {
+  if (!button || !bodyRef) {
+    return 0;
+  }
+  var buttonRect = button.getBoundingClientRect();
+  var bodyRect = bodyRef.getBoundingClientRect();
+  // If the element is obscured by at least half of its size
+  return bodyRect.height - (buttonRect.y - bodyRect.y);
+}
+
 function useEmojiPreviewEvents(allow, setPreviewEmoji) {
   var BodyRef = useBodyRef();
   var isMouseDisallowed = useIsMouseDisallowed();
@@ -18981,6 +18995,18 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
       }
       var button = buttonFromTarget(e.target);
       if (button) {
+        var belowFoldByPx = detectEmojyPartiallyBelowFold(button, bodyRef);
+        var buttonHeight = button.getBoundingClientRect().height;
+        if (belowFoldByPx < buttonHeight / 2) {
+          return;
+        }
+        if (belowFoldByPx < buttonHeight) {
+          button.scrollIntoView({
+            behavior: 'smooth',
+            block: 'end'
+          });
+          return;
+        }
         focusElement(button);
       }
     }
@@ -20380,12 +20406,7 @@ function ContentControl() {
   return React.createElement(PickerMain, null, React.createElement(Reactions, null), renderAll ? React.createElement(React.Fragment, null, React.createElement(Header, null), React.createElement(Body, null), React.createElement(Preview, null)) : null);
 }
 // eslint-disable-next-line complexity
-var EmojiPickerReact = /*#__PURE__*/React.memo(EmojiPicker, function (prev, next) {
-  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.open === next.open && prev.emojiVersion === next.emojiVersion && prev.reactionsDefaultOpen === next.reactionsDefaultOpen && 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.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
-});
+var EmojiPickerReact = /*#__PURE__*/React.memo(EmojiPicker, compareConfig);
 
 var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ErrorBoundary, _React$Component);