emoji-picker-react 4.8.0 → 4.9.1

package/README.md

@@ -89,6 +89,7 @@ The following props are accepted by them picker:
 | reactions              | string[]                                               | -          | Controls the reactions to display in the reactions picker. Takes unified emoji ids                                                                         |
 | onReactionClick        | `Function`                                             | -          | Callback function that is called when a reaction is clicked. The function receives the emoji object as a parameter. If not passed, onEmojiClicked is used. |
 | allowExpandReactions   | `boolean`                                              | `true`     | Controls whether the reactions picker can be expanded to the main picker.                                                                                  |
+| onSkinToneChange       | `Function`                                             | -          | Callback function that is called when a skin tone is changed. The function receives new picked skin tone as a parameter.                                   |
 
 ## Full details
 
@@ -140,6 +141,8 @@ The skin tones typescript enum can be imported directly from the package:
 import { SkinTones } from 'emoji-picker-react';
 ```
 
+- `onSkinToneChange`: `(skinTone: SkinTones) => void` - Callback function when a skin tone is changed.
+
 - `searchDisabled`: `boolean` - Whether to disable the search input. Defaults to `false`. When disabled, the skin tone picker will be shown in the preview component.
 
 - `skinTonesDisabled`: `boolean` - Whether to disable the skin tone selection. Defaults to `false`.

package/dist/DomUtils/elementPositionInRow.d.ts

@@ -6,5 +6,5 @@ export declare function hasNextRow(parent: NullableElement, element: NullableEle
 export declare function getElementInRow(elements: HTMLElement[], row: number, elementsInRow: number, indexInRow: number): NullableElement;
 export declare function getElementInNextRow(allElements: HTMLElement[], currentRow: number, elementsInRow: number, index: number): NullableElement;
 export declare function getElementInPrevRow(allElements: HTMLElement[], currentRow: number, elementsInRow: number, index: number): NullableElement;
-export declare function firstVisibleElementInContainer(parent: NullableElement, elements: HTMLElement[]): NullableElement;
+export declare function firstVisibleElementInContainer(parent: NullableElement, elements: HTMLElement[], maxVisibilityDiffThreshold?: number): NullableElement;
 export declare function hasNextElementSibling(element: HTMLElement): boolean;

package/dist/config/config.d.ts

@@ -46,8 +46,10 @@ declare type ConfigExternal = {
     previewConfig: Partial<PreviewConfig>;
     onEmojiClick: MouseDownEvent;
     onReactionClick: MouseDownEvent;
+    onSkinToneChange: OnSkinToneChange;
 } & Omit<PickerConfigInternal, 'previewConfig' | 'unicodeToHide'>;
 export declare type PickerConfig = Partial<ConfigExternal>;
 export declare type PickerDimensions = string | number;
 export declare type MouseDownEvent = (emoji: EmojiClickData, event: MouseEvent) => void;
+export declare type OnSkinToneChange = (emoji: SkinTones) => void;
 export {};

package/dist/config/mutableConfig.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { MouseDownEvent } from './config';
+import { MouseDownEvent, OnSkinToneChange } from './config';
 export declare type MutableConfig = {
     onEmojiClick?: MouseDownEvent;
     onReactionClick?: MouseDownEvent;
+    onSkinToneChange?: OnSkinToneChange;
 };
 export declare const MutableConfigContext: React.Context<React.MutableRefObject<MutableConfig>>;
 export declare function useMutableConfig(): React.MutableRefObject<MutableConfig>;

package/dist/config/useConfig.d.ts

@@ -17,6 +17,7 @@ export declare function useCategoriesConfig(): CategoriesConfig;
 export declare function useCustomEmojisConfig(): CustomEmoji[];
 export declare function useOpenConfig(): boolean;
 export declare function useOnEmojiClickConfig(mouseEventSource: MOUSE_EVENT_SOURCE): (emoji: EmojiClickData, event: MouseEvent) => void;
+export declare function useOnSkinToneChangeConfig(): (skinTone: SkinTones) => void;
 export declare function usePreviewConfig(): PreviewConfig;
 export declare function useThemeConfig(): Theme;
 export declare function useSuggestedEmojisModeConfig(): SuggestionMode;

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

@@ -16893,12 +16893,16 @@ function useMutableConfig() {
 function useDefineMutableConfig(config) {
   var MutableConfigRef = React__default.useRef({
     onEmojiClick: config.onEmojiClick || emptyFunc,
-    onReactionClick: config.onReactionClick || config.onEmojiClick
+    onReactionClick: config.onReactionClick || config.onEmojiClick,
+    onSkinToneChange: config.onSkinToneChange || emptyFunc
   });
   React__default.useEffect(function () {
     MutableConfigRef.current.onEmojiClick = config.onEmojiClick || emptyFunc;
     MutableConfigRef.current.onReactionClick = config.onReactionClick || config.onEmojiClick;
   }, [config.onEmojiClick, config.onReactionClick]);
+  React__default.useEffect(function () {
+    MutableConfigRef.current.onSkinToneChange = config.onSkinToneChange || emptyFunc;
+  }, [config.onSkinToneChange]);
   return MutableConfigRef;
 }
 function emptyFunc() {}
@@ -16964,6 +16968,11 @@ function useOnEmojiClickConfig(mouseEventSource) {
   var handler = (_ref = mouseEventSource === MOUSE_EVENT_SOURCE.REACTIONS ? current.onReactionClick : current.onEmojiClick) != null ? _ref : current.onEmojiClick;
   return handler || function () {};
 }
+function useOnSkinToneChangeConfig() {
+  var _useMutableConfig2 = useMutableConfig(),
+    current = _useMutableConfig2.current;
+  return current.onSkinToneChange || function () {};
+}
 function usePreviewConfig() {
   var _usePickerConfig10 = usePickerConfig(),
     previewConfig = _usePickerConfig10.previewConfig;
@@ -17350,7 +17359,7 @@ function scrollTo(root, top) {
     return;
   }
   requestAnimationFrame(function () {
-    $eprBody.scrollTop = top + 1;
+    $eprBody.scrollTop = top;
   });
 }
 function scrollBy(root, by) {
@@ -18363,29 +18372,43 @@ function getElementInPrevRow(allElements, currentRow, elementsInRow, index) {
   // default to last
   return prevRowElements[index] || prevRowElements[prevRowElements.length - 1] || null;
 }
-function firstVisibleElementInContainer(parent, elements) {
+function firstVisibleElementInContainer(parent, elements, maxVisibilityDiffThreshold) {
+  if (maxVisibilityDiffThreshold === void 0) {
+    maxVisibilityDiffThreshold = 0;
+  }
   if (!parent || !elements.length) {
     return null;
   }
   var parentTop = parent.getBoundingClientRect().top;
   var parentBottom = parent.getBoundingClientRect().bottom;
-  var parentTopWithLabel = parentTop + getLabelHight(parent);
+  var parentTopWithLabel = parentTop + getLabelHeight(parent);
   var visibleElements = elements.find(function (element) {
     var elementTop = element.getBoundingClientRect().top;
     var elementBottom = element.getBoundingClientRect().bottom;
-    if (elementTop < parentTopWithLabel) {
+    var maxVisibilityDiffPixels = element.clientHeight * maxVisibilityDiffThreshold;
+    var elementTopWithAllowedDiff = elementTop + maxVisibilityDiffPixels;
+    var elementBottomWithAllowedDiff = elementBottom - maxVisibilityDiffPixels;
+    if (elementTopWithAllowedDiff < parentTopWithLabel) {
       return false;
     }
-    return elementTop >= parentTop && elementTop <= parentBottom || elementBottom >= parentTop && elementBottom <= parentBottom;
+    return elementTopWithAllowedDiff >= parentTop && elementTopWithAllowedDiff <= parentBottom || elementBottomWithAllowedDiff >= parentTop && elementBottomWithAllowedDiff <= parentBottom;
   });
   return visibleElements || null;
 }
 function hasNextElementSibling(element) {
   return !!element.nextElementSibling;
 }
-function getLabelHight(parentNode) {
-  var _parentNode$querySele, _parentNode$querySele2;
-  return (_parentNode$querySele = (_parentNode$querySele2 = parentNode.querySelector(asSelectors(ClassNames.label))) == null ? void 0 : _parentNode$querySele2.getBoundingClientRect().height) != null ? _parentNode$querySele : DEFAULT_LABEL_HEIGHT /* default */;
+function getLabelHeight(parentNode) {
+  var labels = Array.from(parentNode.querySelectorAll(asSelectors(ClassNames.label)));
+  for (var _i = 0, _labels = labels; _i < _labels.length; _i++) {
+    var label = _labels[_i];
+    var height = label.getBoundingClientRect().height;
+    // return height if label is not hidden
+    if (height > 0) {
+      return height;
+    }
+  }
+  return DEFAULT_LABEL_HEIGHT;
 }
 
 var EmojiButtonSelector = "button" + /*#__PURE__*/asSelectors(ClassNames.emoji);
@@ -18551,7 +18574,7 @@ function firstVisibleEmoji(parent) {
     return null;
   }
   var allEmojis = allVisibleEmojis(parent);
-  return firstVisibleElementInContainer(parent, allEmojis);
+  return firstVisibleElementInContainer(parent, allEmojis, 0.1);
 }
 function prevCategory(element) {
   var category = closestCategory(element);
@@ -19787,6 +19810,7 @@ function SkinTonePicker(_ref) {
   var _useActiveSkinToneSta = useActiveSkinToneState(),
     activeSkinTone = _useActiveSkinToneSta[0],
     setActiveSkinTone = _useActiveSkinToneSta[1];
+  var onSkinToneChange = useOnSkinToneChangeConfig();
   var closeAllOpenToggles = useCloseAllOpenToggles();
   var focusSearchInput = useFocusSearchInput();
   if (isDisabled) {
@@ -19819,6 +19843,7 @@ function SkinTonePicker(_ref) {
       onClick: function onClick() {
         if (isOpen) {
           setActiveSkinTone(skinToneVariation);
+          onSkinToneChange(skinToneVariation);
           focusSearchInput();
         } else {
           setIsOpen(true);
@@ -20513,7 +20538,8 @@ function ExportedEmoji(_ref) {
 function EmojiPicker$1(props) {
   var MutableConfigRef = useDefineMutableConfig({
     onEmojiClick: props.onEmojiClick,
-    onReactionClick: props.onReactionClick
+    onReactionClick: props.onReactionClick,
+    onSkinToneChange: props.onSkinToneChange
   });
   return React.createElement(ErrorBoundary, null, React.createElement(MutableConfigContext.Provider, {
     value: MutableConfigRef