emoji-picker-react 4.15.1 → 4.15.2

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

@@ -8,74 +8,60 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var flairup = require('flairup');
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
+    return function () {
+      return o >= r.length ? {
+        done: !0
+      } : {
+        done: !1,
+        value: r[o++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
 }
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
   }
-  return target;
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  return t;
 }
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
 }
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 var ClassNames;
@@ -340,6 +326,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 +343,8 @@ function PickerContextProvider(_ref) {
       skinToneFanOpenState: skinToneFanOpenState,
       suggestedUpdateState: suggestedUpdateState,
       reactionsModeState: reactionsModeState,
-      visibleCategoriesState: visibleCategoriesState
+      visibleCategoriesState: visibleCategoriesState,
+      emojiSizeState: emojiSizeState
     }
   }, children);
 }
@@ -388,7 +376,8 @@ var PickerContext = /*#__PURE__*/React.createContext({
   reactionsModeState: [false, function () {}],
   visibleCategoriesState: [[], function () {
     return [];
-  }]
+  }],
+  emojiSizeState: [null, function () {}]
 });
 function useFilterRef() {
   var _React$useContext = React.useContext(PickerContext),
@@ -431,18 +420,23 @@ function useEmojiVariationPickerState() {
   return emojiVariationPickerState;
 }
 function useSkinToneFanOpenState() {
-  var _React$useContext10 = React.useContext(PickerContext),
-    skinToneFanOpenState = _React$useContext10.skinToneFanOpenState;
+  var _React$useContext0 = React.useContext(PickerContext),
+    skinToneFanOpenState = _React$useContext0.skinToneFanOpenState;
   return skinToneFanOpenState;
 }
 function useVisibleCategoriesState() {
-  var _React$useContext12 = React.useContext(PickerContext),
-    visibleCategoriesState = _React$useContext12.visibleCategoriesState;
+  var _React$useContext10 = React.useContext(PickerContext),
+    visibleCategoriesState = _React$useContext10.visibleCategoriesState;
   return visibleCategoriesState;
 }
+function useEmojiSizeState() {
+  var _React$useContext11 = React.useContext(PickerContext),
+    emojiSizeState = _React$useContext11.emojiSizeState;
+  return emojiSizeState;
+}
 function useUpdateSuggested() {
-  var _React$useContext13 = React.useContext(PickerContext),
-    suggestedUpdateState = _React$useContext13.suggestedUpdateState;
+  var _React$useContext12 = React.useContext(PickerContext),
+    suggestedUpdateState = _React$useContext12.suggestedUpdateState;
   var suggestedUpdated = suggestedUpdateState[0],
     setsuggestedUpdate = suggestedUpdateState[1];
   return [suggestedUpdated, function updateSuggested() {
@@ -17608,7 +17602,7 @@ var basePreviewConfig = {
 };
 
 var _excluded = ["children"];
-var ConfigContext = /*#__PURE__*/React.createContext( /*#__PURE__*/basePickerConfig());
+var ConfigContext = /*#__PURE__*/React.createContext(/*#__PURE__*/basePickerConfig());
 function PickerConfigProvider(_ref) {
   var children = _ref.children,
     config = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -17752,73 +17746,73 @@ function useOnSkinToneChangeConfig() {
   return current.onSkinToneChange || function () {};
 }
 function usePreviewConfig() {
-  var _usePickerConfig10 = usePickerConfig(),
-    previewConfig = _usePickerConfig10.previewConfig;
+  var _usePickerConfig0 = usePickerConfig(),
+    previewConfig = _usePickerConfig0.previewConfig;
   return previewConfig;
 }
 function useThemeConfig() {
-  var _usePickerConfig11 = usePickerConfig(),
-    theme = _usePickerConfig11.theme;
+  var _usePickerConfig1 = usePickerConfig(),
+    theme = _usePickerConfig1.theme;
   return theme;
 }
 function useSuggestedEmojisModeConfig() {
-  var _usePickerConfig12 = usePickerConfig(),
-    suggestedEmojisMode = _usePickerConfig12.suggestedEmojisMode;
+  var _usePickerConfig10 = usePickerConfig(),
+    suggestedEmojisMode = _usePickerConfig10.suggestedEmojisMode;
   return suggestedEmojisMode;
 }
 function useLazyLoadEmojisConfig() {
-  var _usePickerConfig13 = usePickerConfig(),
-    lazyLoadEmojis = _usePickerConfig13.lazyLoadEmojis;
+  var _usePickerConfig11 = usePickerConfig(),
+    lazyLoadEmojis = _usePickerConfig11.lazyLoadEmojis;
   return lazyLoadEmojis;
 }
 function useClassNameConfig() {
-  var _usePickerConfig14 = usePickerConfig(),
-    className = _usePickerConfig14.className;
+  var _usePickerConfig12 = usePickerConfig(),
+    className = _usePickerConfig12.className;
   return className;
 }
 function useStyleConfig() {
-  var _usePickerConfig15 = usePickerConfig(),
-    height = _usePickerConfig15.height,
-    width = _usePickerConfig15.width,
-    style = _usePickerConfig15.style;
+  var _usePickerConfig13 = usePickerConfig(),
+    height = _usePickerConfig13.height,
+    width = _usePickerConfig13.width,
+    style = _usePickerConfig13.style;
   return _extends({
     height: getDimension(height),
     width: getDimension(width)
   }, style);
 }
 function useReactionsOpenConfig() {
-  var _usePickerConfig16 = usePickerConfig(),
-    reactionsDefaultOpen = _usePickerConfig16.reactionsDefaultOpen;
+  var _usePickerConfig14 = usePickerConfig(),
+    reactionsDefaultOpen = _usePickerConfig14.reactionsDefaultOpen;
   return reactionsDefaultOpen;
 }
 function useEmojiVersionConfig() {
-  var _usePickerConfig17 = usePickerConfig(),
-    emojiVersion = _usePickerConfig17.emojiVersion;
+  var _usePickerConfig15 = usePickerConfig(),
+    emojiVersion = _usePickerConfig15.emojiVersion;
   return emojiVersion;
 }
 function useSearchDisabledConfig() {
-  var _usePickerConfig18 = usePickerConfig(),
-    searchDisabled = _usePickerConfig18.searchDisabled;
+  var _usePickerConfig16 = usePickerConfig(),
+    searchDisabled = _usePickerConfig16.searchDisabled;
   return searchDisabled;
 }
 function useSkinTonePickerLocationConfig() {
-  var _usePickerConfig19 = usePickerConfig(),
-    skinTonePickerLocation = _usePickerConfig19.skinTonePickerLocation;
+  var _usePickerConfig17 = usePickerConfig(),
+    skinTonePickerLocation = _usePickerConfig17.skinTonePickerLocation;
   return skinTonePickerLocation;
 }
 function useUnicodeToHide() {
-  var _usePickerConfig20 = usePickerConfig(),
-    unicodeToHide = _usePickerConfig20.unicodeToHide;
+  var _usePickerConfig18 = usePickerConfig(),
+    unicodeToHide = _usePickerConfig18.unicodeToHide;
   return unicodeToHide;
 }
 function useReactionsConfig() {
-  var _usePickerConfig21 = usePickerConfig(),
-    reactions = _usePickerConfig21.reactions;
+  var _usePickerConfig19 = usePickerConfig(),
+    reactions = _usePickerConfig19.reactions;
   return reactions;
 }
 function useGetEmojiUrlConfig() {
-  var _usePickerConfig22 = usePickerConfig(),
-    getEmojiUrl = _usePickerConfig22.getEmojiUrl;
+  var _usePickerConfig20 = usePickerConfig(),
+    getEmojiUrl = _usePickerConfig20.getEmojiUrl;
   return getEmojiUrl;
 }
 function getDimension(dimensionConfig) {
@@ -19613,7 +19607,7 @@ function BtnPlus() {
     }
   });
 }
-var styles$5 = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
+var styles$5 = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
   plusSign: {
     fontSize: '20px',
     padding: '17px',
@@ -19760,7 +19754,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 +19763,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 +19788,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 +19868,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 +19936,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 +19969,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 +20031,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];
@@ -20148,7 +20198,7 @@ function useVariationPickerTop(VariationPickerRef) {
     return emojiOffsetTop - height;
   }
 }
-var styles$9 = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
+var styles$9 = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
   variationPicker: {
     '.': ClassNames.variationPicker,
     position: 'absolute',
@@ -20760,7 +20810,7 @@ var DarkInactivePosition = {
     }
   }
 };
-var styles$f = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
+var styles$f = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
   catBtn: {
     '.': 'epr-cat-btn',
     display: 'inline-block',
@@ -20905,7 +20955,7 @@ var HoverDark = {
     }
   }
 };
-var styles$h = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
+var styles$h = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
   btnClearSearch: {
     '.': 'epr-btn-clear-search',
     position: 'absolute',
@@ -20952,7 +21002,7 @@ function IcnSearch() {
     className: flairup.cx(styles$i.icnSearch)
   });
 }
-var styles$i = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
+var styles$i = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
   icnSearch: {
     '.': 'epr-icn-search',
     content: '',
@@ -21016,7 +21066,7 @@ function Search() {
     "aria-atomic": "true"
   }, statusSearchResults) : null, React.createElement(IcnSearch, null), React.createElement(BtnClearSearch, null));
 }
-var styles$j = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
+var styles$j = /*#__PURE__*/stylesheet.create(/*#__PURE__*/_extends({
   overlay: {
     padding: 'var(--epr-header-padding)',
     zIndex: 'var(--epr-header-overlay-z-index)'