emoji-picker-react 4.8.0 → 4.9.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.8.0",
+  "version": "4.9.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/DomUtils/elementPositionInRow.ts

@@ -143,7 +143,8 @@ export function getElementInPrevRow(
 
 export function firstVisibleElementInContainer(
   parent: NullableElement,
-  elements: HTMLElement[]
+  elements: HTMLElement[],
+  maxVisibilityDiffThreshold = 0
 ): NullableElement {
   if (!parent || !elements.length) {
     return null;
@@ -151,20 +152,27 @@ export function firstVisibleElementInContainer(
 
   const parentTop = parent.getBoundingClientRect().top;
   const parentBottom = parent.getBoundingClientRect().bottom;
-
-  const parentTopWithLabel = parentTop + getLabelHight(parent);
+  const parentTopWithLabel = parentTop + getLabelHeight(parent);
 
   const visibleElements = elements.find(element => {
     const elementTop = element.getBoundingClientRect().top;
     const elementBottom = element.getBoundingClientRect().bottom;
+    const maxVisibilityDiffPixels =
+      element.clientHeight * maxVisibilityDiffThreshold;
 
-    if (elementTop < parentTopWithLabel) {
+    const elementTopWithAllowedDiff = elementTop + maxVisibilityDiffPixels;
+    const elementBottomWithAllowedDiff =
+      elementBottom - maxVisibilityDiffPixels;
+
+    if (elementTopWithAllowedDiff < parentTopWithLabel) {
       return false;
     }
 
     return (
-      (elementTop >= parentTop && elementTop <= parentBottom) ||
-      (elementBottom >= parentTop && elementBottom <= parentBottom)
+      (elementTopWithAllowedDiff >= parentTop &&
+        elementTopWithAllowedDiff <= parentBottom) ||
+      (elementBottomWithAllowedDiff >= parentTop &&
+        elementBottomWithAllowedDiff <= parentBottom)
     );
   });
 
@@ -175,10 +183,18 @@ export function hasNextElementSibling(element: HTMLElement) {
   return !!element.nextElementSibling;
 }
 
-function getLabelHight(parentNode: HTMLElement) {
-  return (
-    parentNode
-      .querySelector(asSelectors(ClassNames.label))
-      ?.getBoundingClientRect().height ?? DEFAULT_LABEL_HEIGHT /* default */
+function getLabelHeight(parentNode: HTMLElement) {
+  const labels = Array.from(
+    parentNode.querySelectorAll(asSelectors(ClassNames.label))
   );
+
+  for (const label of labels) {
+    const height = label.getBoundingClientRect().height;
+    // return height if label is not hidden
+    if (height > 0) {
+      return height;
+    }
+  }
+
+  return DEFAULT_LABEL_HEIGHT;
 }

package/src/DomUtils/scrollTo.ts

@@ -21,7 +21,7 @@ export function scrollTo(root: NullableElement, top: number = 0) {
   }
 
   requestAnimationFrame(() => {
-    $eprBody.scrollTop = top + 1;
+    $eprBody.scrollTop = top;
   });
 }
 

package/src/DomUtils/selectors.ts

@@ -264,7 +264,7 @@ export function firstVisibleEmoji(parent: NullableElement) {
 
   const allEmojis = allVisibleEmojis(parent);
 
-  return firstVisibleElementInContainer(parent, allEmojis);
+  return firstVisibleElementInContainer(parent, allEmojis, 0.1);
 }
 
 export function prevCategory(element: NullableElement): NullableElement {

package/src/components/header/SkinTonePicker/SkinTonePicker.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { ClassNames } from '../../../DomUtils/classNames';
 import { stylesheet } from '../../../Stylesheet/stylesheet';
-import { useSkinTonesDisabledConfig } from '../../../config/useConfig';
+import {useOnSkinToneChangeConfig, useSkinTonesDisabledConfig} from '../../../config/useConfig';
 import skinToneVariations from '../../../data/skinToneVariations';
 import { useCloseAllOpenToggles } from '../../../hooks/useCloseAllOpenToggles';
 import { useFocusSearchInput } from '../../../hooks/useFocus';
@@ -41,6 +41,7 @@ export function SkinTonePicker({
   const isDisabled = useSkinTonesDisabledConfig();
   const [isOpen, setIsOpen] = useSkinToneFanOpenState();
   const [activeSkinTone, setActiveSkinTone] = useActiveSkinToneState();
+  const onSkinToneChange = useOnSkinToneChangeConfig();
   const closeAllOpenToggles = useCloseAllOpenToggles();
   const focusSearchInput = useFocusSearchInput();
 
@@ -89,6 +90,7 @@ export function SkinTonePicker({
               onClick={() => {
                 if (isOpen) {
                   setActiveSkinTone(skinToneVariation);
+                  onSkinToneChange(skinToneVariation);
                   focusSearchInput();
                 } else {
                   setIsOpen(true);

package/src/config/config.ts

@@ -138,6 +138,7 @@ type ConfigExternal = {
   previewConfig: Partial<PreviewConfig>;
   onEmojiClick: MouseDownEvent;
   onReactionClick: MouseDownEvent;
+  onSkinToneChange: OnSkinToneChange;
 } & Omit<PickerConfigInternal, 'previewConfig' | 'unicodeToHide'>;
 
 export type PickerConfig = Partial<ConfigExternal>;
@@ -145,3 +146,4 @@ export type PickerConfig = Partial<ConfigExternal>;
 export type PickerDimensions = string | number;
 
 export type MouseDownEvent = (emoji: EmojiClickData, event: MouseEvent) => void;
+export type OnSkinToneChange = (emoji: SkinTones) => void;

package/src/config/mutableConfig.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import { MouseDownEvent } from './config';
+import {MouseDownEvent, OnSkinToneChange} from './config';
 
 export type MutableConfig = {
   onEmojiClick?: MouseDownEvent;
   onReactionClick?: MouseDownEvent;
+  onSkinToneChange?: OnSkinToneChange;
 };
 
 export const MutableConfigContext = React.createContext<
@@ -21,7 +22,8 @@ export function useDefineMutableConfig(
 ): React.MutableRefObject<MutableConfig> {
   const MutableConfigRef = React.useRef<MutableConfig>({
     onEmojiClick: config.onEmojiClick || emptyFunc,
-    onReactionClick: config.onReactionClick || config.onEmojiClick
+    onReactionClick: config.onReactionClick || config.onEmojiClick,
+    onSkinToneChange: config.onSkinToneChange || emptyFunc
   });
 
   React.useEffect(() => {
@@ -30,6 +32,10 @@ export function useDefineMutableConfig(
       config.onReactionClick || config.onEmojiClick;
   }, [config.onEmojiClick, config.onReactionClick]);
 
+  React.useEffect(() => {
+    MutableConfigRef.current.onSkinToneChange = config.onSkinToneChange || emptyFunc;
+  }, [config.onSkinToneChange])
+
   return MutableConfigRef;
 }
 

package/src/config/useConfig.ts

@@ -89,6 +89,13 @@ export function useOnEmojiClickConfig(
   return handler || (() => {});
 }
 
+export function useOnSkinToneChangeConfig(
+): (skinTone: SkinTones) => void {
+  const { current } = useMutableConfig();
+
+  return current.onSkinToneChange || (() => {});
+}
+
 export function usePreviewConfig(): PreviewConfig {
   const { previewConfig } = usePickerConfig();
   return previewConfig;

package/src/index.tsx

@@ -25,7 +25,8 @@ export interface PickerProps extends PickerConfig {}
 export default function EmojiPicker(props: PickerProps) {
   const MutableConfigRef = useDefineMutableConfig({
     onEmojiClick: props.onEmojiClick,
-    onReactionClick: props.onReactionClick
+    onReactionClick: props.onReactionClick,
+    onSkinToneChange: props.onSkinToneChange,
   });
 
   return (