emoji-picker-react 4.15.1 → 4.16.0

package/dist/emoji-picker-react.esm.js

@@ -1,4 +1,4 @@
-import React__default, { memo, createElement, useState, useRef, useMemo, useEffect, createContext, useContext, createRef, useCallback, Fragment, Suspense, Component } from 'react';
+import React__default, { memo, createElement, useState, useRef, useMemo, useEffect, createContext, useContext, createRef, useCallback, Fragment, useLayoutEffect, Suspense, Component } from 'react';
 import { createSheet, cx } from 'flairup';
 
 function _extends() {
@@ -339,6 +339,7 @@ function PickerContextProvider(_ref) {
     isPastInitialLoad = _useState[0],
     setIsPastInitialLoad = _useState[1];
   var visibleCategoriesState = useState([]);
+  var emojiSizeState = useState(null);
   useMarkInitialLoad(setIsPastInitialLoad);
   return createElement(PickerContext.Provider, {
     value: {
@@ -355,7 +356,8 @@ function PickerContextProvider(_ref) {
       skinToneFanOpenState: skinToneFanOpenState,
       suggestedUpdateState: suggestedUpdateState,
       reactionsModeState: reactionsModeState,
-      visibleCategoriesState: visibleCategoriesState
+      visibleCategoriesState: visibleCategoriesState,
+      emojiSizeState: emojiSizeState
     }
   }, children);
 }
@@ -387,7 +389,8 @@ var PickerContext = /*#__PURE__*/createContext({
   reactionsModeState: [false, function () {}],
   visibleCategoriesState: [[], function () {
     return [];
-  }]
+  }],
+  emojiSizeState: [null, function () {}]
 });
 function useFilterRef() {
   var _React$useContext = useContext(PickerContext),
@@ -439,9 +442,14 @@ function useVisibleCategoriesState() {
     visibleCategoriesState = _React$useContext12.visibleCategoriesState;
   return visibleCategoriesState;
 }
-function useUpdateSuggested() {
+function useEmojiSizeState() {
   var _React$useContext13 = useContext(PickerContext),
-    suggestedUpdateState = _React$useContext13.suggestedUpdateState;
+    emojiSizeState = _React$useContext13.emojiSizeState;
+  return emojiSizeState;
+}
+function useUpdateSuggested() {
+  var _React$useContext14 = useContext(PickerContext),
+    suggestedUpdateState = _React$useContext14.suggestedUpdateState;
   var suggestedUpdated = suggestedUpdateState[0],
     setsuggestedUpdate = suggestedUpdateState[1];
   return [suggestedUpdated, function updateSuggested() {
@@ -19759,7 +19767,7 @@ function getEmojiPositionStyle(dimensions, index) {
   } : undefined;
 }
 
-var EMOJI_SIZE_DEFAULT = 32;
+var EMOJI_SIZE_DEFAULT = 40;
 function useCategoryHeight(emojiCount) {
   var EmojiListRef = useEmojiListRef();
   var _useReactionsModeStat = useReactionsModeState(),
@@ -19768,18 +19776,21 @@ function useCategoryHeight(emojiCount) {
   var emojiSizeRef = useRef();
   var _useVisibleCategories = useVisibleCategoriesState(),
     visibleCategories = _useVisibleCategories[0];
+  var _useEmojiSizeState = useEmojiSizeState(),
+    emojiSizeFromContext = _useEmojiSizeState[0];
   var _React$useState = useState(),
     dimensions = _React$useState[0],
     setDimensions = _React$useState[1];
   // Helper to compute and store dimensions based on current DOM
   var computeAndSetDimensions = useCallback(function () {
-    var _ref;
     var listEl = EmojiListRef.current;
     if (!listEl) return;
     var emojiElement = listEl.querySelector(EmojiButtonSelector);
     var measured = emojiElement == null ? void 0 : emojiElement.clientHeight;
-    var emojiSize = (_ref = measured != null ? measured : emojiSizeRef.current) != null ? _ref : EMOJI_SIZE_DEFAULT;
-    emojiSizeRef.current = emojiSize;
+    if (measured) {
+      emojiSizeRef.current = measured;
+    }
+    var emojiSize = emojiSizeFromContext || measured || emojiSizeRef.current || EMOJI_SIZE_DEFAULT;
     var pickerWidth = listEl.clientWidth;
     if (pickerWidth === 0 || emojiSize === 0) return;
     var emojisPerRow = Math.max(1, Math.floor(pickerWidth / emojiSize));
@@ -19790,7 +19801,7 @@ function useCategoryHeight(emojiCount) {
       emojisPerRow: emojisPerRow,
       emojiSize: emojiSize
     });
-  }, [EmojiListRef, emojiCount]);
+  }, [EmojiListRef, emojiCount, emojiSizeFromContext]);
   // Recompute on data-count changes and when reactions mode toggles
   useEffect(function () {
     computeAndSetDimensions();
@@ -19870,17 +19881,20 @@ function useEmojiVirtualization(_ref) {
       onHeightReady(dimensions.categoryHeight);
     }
   }, [dimensions, onHeightReady, emojisToPush.length]);
-  var emojis = emojisToPush.reduce(function (accumulator, emoji, index) {
+  var isVirtualized = function isVirtualized(style) {
     var _BodyRef$current$clie, _BodyRef$current;
-    var unified = emojiUnified(emoji, activeSkinTone);
-    var style = getEmojiPositionStyle(dimensions, index);
-    if (dimensions && BodyRef.current && shouldVirtualize({
+    return dimensions && BodyRef.current && shouldVirtualize({
       scrollTop: scrollTop,
       clientHeight: (_BodyRef$current$clie = (_BodyRef$current = BodyRef.current) == null ? void 0 : _BodyRef$current.clientHeight) != null ? _BodyRef$current$clie : 0,
       topOffset: topOffset,
       style: style,
       dimensions: dimensions
-    })) {
+    });
+  };
+  var emojis = emojisToPush.reduce(function (accumulator, emoji, index) {
+    var unified = emojiUnified(emoji, activeSkinTone);
+    var style = getEmojiPositionStyle(dimensions, index);
+    if (isVirtualized(style)) {
       var _BodyRef$current$clie2, _BodyRef$current2;
       virtualizedCounter++;
       preloadEmojiIfNeeded(emoji, emojiStyle, scrollTop, (_BodyRef$current$clie2 = (_BodyRef$current2 = BodyRef.current) == null ? void 0 : _BodyRef$current2.clientHeight) != null ? _BodyRef$current$clie2 : 0, topOffset, style, dimensions, getEmojiUrl);
@@ -19935,6 +19949,7 @@ function EmojiCategory(_ref) {
 var styles$7 = /*#__PURE__*/stylesheet.create({
   category: {
     '.': ClassNames.category,
+    minHeight: 'calc(var(--epr-emoji-fullsize) + var(--epr-category-label-height))',
     position: 'relative'
   },
   categoryContent: {
@@ -19967,6 +19982,55 @@ var styles$7 = /*#__PURE__*/stylesheet.create({
   }
 });
 
+function MeasureEmoji() {
+  var categories = useCategoriesConfig();
+  var getEmojisByCategory = useGetEmojisByCategory();
+  var emojiStyle = useEmojiStyleConfig();
+  var getEmojiUrl = useGetEmojiUrlConfig();
+  var lazyLoadEmojis = useLazyLoadEmojisConfig();
+  var _useActiveSkinToneSta = useActiveSkinToneState(),
+    activeSkinTone = _useActiveSkinToneSta[0];
+  var _useEmojiSizeState = useEmojiSizeState(),
+    emojiSize = _useEmojiSizeState[0],
+    setEmojiSize = _useEmojiSizeState[1];
+  var ref = useRef(null);
+  useLayoutEffect(function () {
+    if (ref.current) {
+      setEmojiSize(ref.current.clientHeight);
+    }
+  });
+  if (emojiSize) {
+    return null;
+  }
+  var firstCategory = categories[0];
+  var dummyEmoji = getEmojisByCategory(categoryFromCategoryConfig(firstCategory))[0];
+  var unified = dummyEmoji ? emojiUnified(dummyEmoji, activeSkinTone) : '';
+  if (!dummyEmoji) {
+    return null;
+  }
+  return createElement("div", {
+    ref: ref
+  }, createElement(ClickableEmoji, {
+    emoji: dummyEmoji,
+    unified: unified,
+    emojiStyle: emojiStyle,
+    getEmojiUrl: getEmojiUrl,
+    lazyLoad: lazyLoadEmojis,
+    showVariations: false,
+    hidden: false,
+    style: {
+      opacity: 0,
+      pointerEvents: 'none',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      zIndex: -1,
+      height: 'var(--epr-emoji-fullsize)',
+      width: 'var(--epr-emoji-fullsize)'
+    }
+  }));
+}
+
 function EmojiList(_ref) {
   var scrollTop = _ref.scrollTop;
   var categories = useCategoriesConfig();
@@ -19980,7 +20044,7 @@ function EmojiList(_ref) {
   return createElement("ul", {
     className: cx(styles$8.emojiList),
     ref: EmojiListRef
-  }, categories.map(function (categoryConfig) {
+  }, createElement(MeasureEmoji, null), categories.map(function (categoryConfig) {
     var category = categoryFromCategoryConfig(categoryConfig);
     var currentOffset = topOffset;
     var categoryHeight = categoryHeights[category];