emoji-picker-react 4.15.1 → 4.16.0

package/dist/components/body/MeasureEmoji.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function MeasureEmoji(): JSX.Element | null;

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

@@ -19,6 +19,7 @@ export declare function useEmojiVariationPickerState(): ReactState<DataEmoji | n
 export declare function useSkinToneFanOpenState(): ReactState<boolean>;
 export declare function useDisallowedEmojisRef(): React.MutableRefObject<Record<string, boolean>>;
 export declare function useVisibleCategoriesState(): ReactState<string[]>;
+export declare function useEmojiSizeState(): ReactState<number | null>;
 export declare function useUpdateSuggested(): [number, () => void];
 export declare type FilterState = Record<string, FilterDict>;
 export {};

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

@@ -340,6 +340,7 @@ function PickerContextProvider(_ref) {
     isPastInitialLoad = _useState[0],
     setIsPastInitialLoad = _useState[1];
   var visibleCategoriesState = React.useState([]);
+  var emojiSizeState = React.useState(null);
   useMarkInitialLoad(setIsPastInitialLoad);
   return React.createElement(PickerContext.Provider, {
     value: {
@@ -356,7 +357,8 @@ function PickerContextProvider(_ref) {
       skinToneFanOpenState: skinToneFanOpenState,
       suggestedUpdateState: suggestedUpdateState,
       reactionsModeState: reactionsModeState,
-      visibleCategoriesState: visibleCategoriesState
+      visibleCategoriesState: visibleCategoriesState,
+      emojiSizeState: emojiSizeState
     }
   }, children);
 }
@@ -388,7 +390,8 @@ var PickerContext = /*#__PURE__*/React.createContext({
   reactionsModeState: [false, function () {}],
   visibleCategoriesState: [[], function () {
     return [];
-  }]
+  }],
+  emojiSizeState: [null, function () {}]
 });
 function useFilterRef() {
   var _React$useContext = React.useContext(PickerContext),
@@ -440,9 +443,14 @@ function useVisibleCategoriesState() {
     visibleCategoriesState = _React$useContext12.visibleCategoriesState;
   return visibleCategoriesState;
 }
-function useUpdateSuggested() {
+function useEmojiSizeState() {
   var _React$useContext13 = React.useContext(PickerContext),
-    suggestedUpdateState = _React$useContext13.suggestedUpdateState;
+    emojiSizeState = _React$useContext13.emojiSizeState;
+  return emojiSizeState;
+}
+function useUpdateSuggested() {
+  var _React$useContext14 = React.useContext(PickerContext),
+    suggestedUpdateState = _React$useContext14.suggestedUpdateState;
   var suggestedUpdated = suggestedUpdateState[0],
     setsuggestedUpdate = suggestedUpdateState[1];
   return [suggestedUpdated, function updateSuggested() {
@@ -19760,7 +19768,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(),
@@ -19769,18 +19777,21 @@ function useCategoryHeight(emojiCount) {
   var emojiSizeRef = React.useRef();
   var _useVisibleCategories = useVisibleCategoriesState(),
     visibleCategories = _useVisibleCategories[0];
+  var _useEmojiSizeState = useEmojiSizeState(),
+    emojiSizeFromContext = _useEmojiSizeState[0];
   var _React$useState = React.useState(),
     dimensions = _React$useState[0],
     setDimensions = _React$useState[1];
   // Helper to compute and store dimensions based on current DOM
   var computeAndSetDimensions = React.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));
@@ -19791,7 +19802,7 @@ function useCategoryHeight(emojiCount) {
       emojisPerRow: emojisPerRow,
       emojiSize: emojiSize
     });
-  }, [EmojiListRef, emojiCount]);
+  }, [EmojiListRef, emojiCount, emojiSizeFromContext]);
   // Recompute on data-count changes and when reactions mode toggles
   React.useEffect(function () {
     computeAndSetDimensions();
@@ -19871,17 +19882,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);
@@ -19936,6 +19950,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: {
@@ -19968,6 +19983,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 = React.useRef(null);
+  React.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 React.createElement("div", {
+    ref: ref
+  }, React.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();
@@ -19981,7 +20045,7 @@ function EmojiList(_ref) {
   return React.createElement("ul", {
     className: flairup.cx(styles$8.emojiList),
     ref: EmojiListRef
-  }, categories.map(function (categoryConfig) {
+  }, React.createElement(MeasureEmoji, null), categories.map(function (categoryConfig) {
     var category = categoryFromCategoryConfig(categoryConfig);
     var currentOffset = topOffset;
     var categoryHeight = categoryHeights[category];