react-input-emoji 5.1.1 → 5.3.1

package/dist/index.js

@@ -3933,6 +3933,7 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
  * @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
  * @property {boolean} disableRecent
  * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
+ * @property {import('../types/types').Languages=} language
  */
 
 /**
@@ -3945,7 +3946,8 @@ function EmojiPicker(props) {
   var theme = props.theme,
       onSelectEmoji = props.onSelectEmoji,
       disableRecent = props.disableRecent,
-      customEmojis = props.customEmojis;
+      customEmojis = props.customEmojis,
+      language = props.language;
   /** @type {string[]} */
 
   var categories = React.useMemo(function () {
@@ -3959,6 +3961,13 @@ function EmojiPicker(props) {
     categoryies = [].concat(_toConsumableArray(categoryies), ["people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"]);
     return categoryies;
   }, [disableRecent]);
+  var i18n = React.useMemo(function () {
+    if (!language) {
+      return undefined;
+    }
+
+    return require("@emoji-mart/data/i18n/".concat(language !== null && language !== void 0 ? language : 'en', ".json"));
+  }, [language]);
   return /*#__PURE__*/React__default["default"].createElement($e5534fc185f7111e$export$2e2bcd8739ae039, {
     data: undefined,
     theme: theme,
@@ -3966,16 +3975,11 @@ function EmojiPicker(props) {
     onEmojiSelect: onSelectEmoji,
     custom: customEmojis,
     categories: categories,
-    set: "apple"
+    set: "apple",
+    i18n: i18n
   });
 }
 
-EmojiPicker.propTypes = {
-  theme: t__default["default"].oneOf(["light", "dark", "auto"]),
-  onSelectEmoji: t__default["default"].func,
-  disableRecent: t__default["default"].bool,
-  customEmojis: t__default["default"].array
-};
 var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
 
 /**
@@ -3985,6 +3989,8 @@ var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
  * @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
  * @property {boolean} disableRecent
  * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
+ * @property {('above' | 'below')=} position
+ * @property {import('../types/types').Languages=} language
  */
 
 /**
@@ -3998,24 +4004,31 @@ function EmojiPickerContainer(_ref) {
       theme = _ref.theme,
       handleSelectEmoji = _ref.handleSelectEmoji,
       disableRecent = _ref.disableRecent,
-      customEmojis = _ref.customEmojis;
+      customEmojis = _ref.customEmojis,
+      position = _ref.position,
+      language = _ref.language;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-emoji-picker--container"
   }, showPicker && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-emoji-picker--wrapper",
     onClick: function onClick(evt) {
       return evt.stopPropagation();
-    }
+    },
+    style: position === 'below' ? {
+      top: '40px'
+    } : {}
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-emoji-picker"
   }, /*#__PURE__*/React__default["default"].createElement(EmojiPicker$1, {
     theme: theme,
     onSelectEmoji: handleSelectEmoji,
     disableRecent: disableRecent,
-    customEmojis: customEmojis
+    customEmojis: customEmojis,
+    language: language
   }))));
 }
 
+var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
 /**
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
  */
@@ -4034,6 +4047,7 @@ function EmojiPickerContainer(_ref) {
  * @property {(fn: PolluteFn) => void} addPolluteFn
  * @property {(html: string) => void} appendContent
  * @property {HTMLDivElement=} buttonElement
+ * @property {import('../types/types').Languages=} language
  */
 // eslint-disable-next-line valid-jsdoc
 
@@ -4047,7 +4061,8 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
       addSanitizeFn = props.addSanitizeFn,
       addPolluteFn = props.addPolluteFn,
       appendContent = props.appendContent,
-      buttonElement = props.buttonElement;
+      buttonElement = props.buttonElement,
+      language = props.language;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -4060,6 +4075,13 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
       _useState4 = _slicedToArray(_useState3, 2),
       customButton = _useState4[0],
       setCustomButton = _useState4[1];
+  /** @type {['above' | 'below' | undefined, React.Dispatch<React.SetStateAction<'above' | 'below' | undefined>>]} */
+
+
+  var _useState5 = React.useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      emojiPickerPosition = _useState6[0],
+      setEmojiPickerPosition = _useState6[1];
 
   React.useEffect(function () {
     addSanitizeFn(replaceAllTextEmojiToString);
@@ -4097,9 +4119,30 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
   function toggleShowPicker(event) {
     event.stopPropagation();
     event.preventDefault();
+    setEmojiPickerPosition(calcTopPosition(event));
     setShowPicker(function (currentShowPicker) {
       return !currentShowPicker;
     });
+  }
+  /**
+   * 
+   * @param {React.MouseEvent} event
+   * @return {'above' | 'below'}
+   */
+
+
+  function calcTopPosition(event) {
+    var btn = event.currentTarget;
+    var btnRect = btn.getBoundingClientRect();
+    var popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT; // Decide to display above or below based on available space
+
+    if (btnRect.top >= popoverHeight) {
+      // Display above
+      return 'above';
+    } else {
+      // Display below
+      return 'below';
+    }
   } // eslint-disable-next-line valid-jsdoc
 
   /**
@@ -4129,7 +4172,9 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
     theme: theme,
     handleSelectEmoji: handleSelectEmoji,
     disableRecent: disableRecent,
-    customEmojis: customEmojis
+    customEmojis: customEmojis,
+    position: emojiPickerPosition,
+    language: language
   }), /*#__PURE__*/React__default["default"].createElement(EmojiPickerButton, {
     showPicker: showPicker,
     toggleShowPicker: toggleShowPicker,
@@ -4139,7 +4184,9 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
     theme: theme,
     handleSelectEmoji: handleSelectEmoji,
     disableRecent: disableRecent,
-    customEmojis: customEmojis
+    customEmojis: customEmojis,
+    position: emojiPickerPosition,
+    language: language
   }), /*#__PURE__*/React__default["default"].createElement(EmojiPickerButton, {
     showPicker: showPicker,
     toggleShowPicker: toggleShowPicker
@@ -4799,6 +4846,7 @@ function usePollute() {
  * @property {number} fontSize
  * @property {string} fontFamily
  * @property {{id: string; name: string; emojis: {id: string; name: string; keywords: string[], skins: {src: string}[]}}[]=} customEmojis
+ * @property {import('./types/types').Languages=} language
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
  * @property {HTMLDivElement=} buttonElement
  */
@@ -4829,6 +4877,7 @@ function InputEmoji(props, ref) {
       tabIndex = props.tabIndex,
       value = props.value,
       customEmojis = props.customEmojis,
+      language = props.language,
       searchMention = props.searchMention,
       buttonElement = props.buttonElement,
       borderRadius = props.borderRadius,
@@ -5037,7 +5086,8 @@ function InputEmoji(props, ref) {
     addSanitizeFn: addSanitizeFn,
     addPolluteFn: addPolluteFn,
     appendContent: appendContent,
-    buttonElement: buttonElement
+    buttonElement: buttonElement,
+    language: language
   }));
 }
 
@@ -5054,7 +5104,8 @@ InputEmojiWithRef.defaultProps = {
   fontFamily: "sans-serif",
   tabIndex: 0,
   shouldReturn: false,
-  customEmojis: []
+  customEmojis: [],
+  language: undefined
 };
 
 module.exports = InputEmojiWithRef;