react-input-emoji 5.2.1 → 5.4.1

package/README.md

@@ -64,6 +64,7 @@ export default function Example() {
 | `fontFamily`   | string   | "sans-serif"     | The font family of the placeholder and input container.                                                                  |
 | `shouldReturn` | boolean  | -                | Allows the user to use the `Shift + Enter` or `Ctrl + Enter` keyboard shortcut to create a new line.    |                 |
 | `buttonElement` | HTMLElement | -   | An HTMLElement that, when clicked, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
+| `keepOpened` | boolean  | false | If set to true, the emoji picker will remain open after selecting an emoji. Defaults to false. | 
 
 ## License
 

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState, useMemo, memo } from 'react';
+import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState, memo, useMemo } from 'react';
 import ReactDOM from 'react-dom';
 import t from 'prop-types';
 
@@ -3925,6 +3925,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
  */
 
 /**
@@ -3937,7 +3938,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 = useMemo(function () {
@@ -3951,6 +3953,13 @@ function EmojiPicker(props) {
     categoryies = [].concat(_toConsumableArray(categoryies), ["people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"]);
     return categoryies;
   }, [disableRecent]);
+  var i18n = 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.createElement($e5534fc185f7111e$export$2e2bcd8739ae039, {
     data: undefined,
     theme: theme,
@@ -3958,16 +3967,11 @@ function EmojiPicker(props) {
     onEmojiSelect: onSelectEmoji,
     custom: customEmojis,
     categories: categories,
-    set: "apple"
+    set: "apple",
+    i18n: i18n
   });
 }
 
-EmojiPicker.propTypes = {
-  theme: t.oneOf(["light", "dark", "auto"]),
-  onSelectEmoji: t.func,
-  disableRecent: t.bool,
-  customEmojis: t.array
-};
 var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
 
 /**
@@ -3978,6 +3982,7 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
  * @property {boolean} disableRecent
  * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
  * @property {('above' | 'below')=} position
+ * @property {import('../types/types').Languages=} language
  */
 
 /**
@@ -3992,7 +3997,8 @@ function EmojiPickerContainer(_ref) {
       handleSelectEmoji = _ref.handleSelectEmoji,
       disableRecent = _ref.disableRecent,
       customEmojis = _ref.customEmojis,
-      position = _ref.position;
+      position = _ref.position,
+      language = _ref.language;
   return /*#__PURE__*/React.createElement("div", {
     className: "react-emoji-picker--container"
   }, showPicker && /*#__PURE__*/React.createElement("div", {
@@ -4009,7 +4015,8 @@ function EmojiPickerContainer(_ref) {
     theme: theme,
     onSelectEmoji: handleSelectEmoji,
     disableRecent: disableRecent,
-    customEmojis: customEmojis
+    customEmojis: customEmojis,
+    language: language
   }))));
 }
 
@@ -4032,6 +4039,7 @@ var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
  * @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
 
@@ -4045,7 +4053,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 = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -4156,7 +4165,8 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
     handleSelectEmoji: handleSelectEmoji,
     disableRecent: disableRecent,
     customEmojis: customEmojis,
-    position: emojiPickerPosition
+    position: emojiPickerPosition,
+    language: language
   }), /*#__PURE__*/React.createElement(EmojiPickerButton, {
     showPicker: showPicker,
     toggleShowPicker: toggleShowPicker,
@@ -4167,7 +4177,8 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
     handleSelectEmoji: handleSelectEmoji,
     disableRecent: disableRecent,
     customEmojis: customEmojis,
-    position: emojiPickerPosition
+    position: emojiPickerPosition,
+    language: language
   }), /*#__PURE__*/React.createElement(EmojiPickerButton, {
     showPicker: showPicker,
     toggleShowPicker: toggleShowPicker
@@ -4827,6 +4838,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
  */
@@ -4857,6 +4869,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,
@@ -5008,8 +5021,24 @@ function InputEmoji(props, ref) {
 
 
   function handleCopy(event) {
-    event.clipboardData.setData("text", sanitizedTextRef.current);
-    event.preventDefault();
+    var selection = window.getSelection();
+
+    if (selection !== null) {
+      var selectedText = '';
+
+      if (selection.anchorNode && selection.anchorNode.nodeType === Node.ELEMENT_NODE) {
+        // @ts-ignore
+        selectedText = selection.anchorNode.innerHTML;
+      } else if (selection.anchorNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {
+        var _selection$anchorNode;
+
+        selectedText = (_selection$anchorNode = selection.anchorNode.textContent) !== null && _selection$anchorNode !== void 0 ? _selection$anchorNode : '';
+      }
+
+      var text = replaceAllTextEmojiToString(selectedText);
+      event.clipboardData.setData("text", text);
+      event.preventDefault();
+    }
   }
   /**
    * Handle past on input
@@ -5065,7 +5094,8 @@ function InputEmoji(props, ref) {
     addSanitizeFn: addSanitizeFn,
     addPolluteFn: addPolluteFn,
     appendContent: appendContent,
-    buttonElement: buttonElement
+    buttonElement: buttonElement,
+    language: language
   }));
 }
 
@@ -5082,7 +5112,8 @@ InputEmojiWithRef.defaultProps = {
   fontFamily: "sans-serif",
   tabIndex: 0,
   shouldReturn: false,
-  customEmojis: []
+  customEmojis: [],
+  language: undefined
 };
 
 export { InputEmojiWithRef as default };