react-input-emoji 5.6.1 → 5.6.3

package/README.md

@@ -45,27 +45,27 @@ export default function Example() {
 
 ## Props
 
-| Prop           | Type     | Default          | Description                                                                                                              |
-| -------------- | -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| `value`        | string   | ""               | The input value.                                                                                                         |
-| `onChange`     | function | -                | This function is called when the value of the input changes. The first argument is the current value.                    |
-| `onResize`     | function | -                | This function is called when the width or the height of the input changes. The first argument is the current size value. |
-| `onClick`      | function | -                | This function is called when the input is clicked.                                                                       |
-| `onFocus`      | function | -                | This function is called when the input has received focus.                                                               |
-| `cleanOnEnter` | boolean  | false            | Clean the input value after the keydown event.                                                                           |
-| `onEnter`      | function | -                | This function is called after the keydown event is fired with the `keyCode === 13` returning the last value.             |
-| `placeholder`  | string   | "Type a message" | Set the placeholder of the input.                                                                                        |
-| `height`       | number   | 40               | The total height of the area in which the element is rendered.                                                           |
-| `maxLength`    | number   | -                | The maximum number of characters allowed in the element.                                                                 |
-| `theme`        | string   | -                | Set theme for emoji popup. Available values "light", "dark", "auto"                                                      |
-| `borderRadius` | number   | 21               | The border radius of the input container.                                                                                |
-| `borderColor`  | string   | "#EAEAEA"        | The border color of the input container.                                                                                 |
-| `fontSize`     | number   | 15               | The font size of the placeholder and input container.                                                                    |
-| `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. |
-| `buttonRef` | React.MutableRefObject | -   | A React mutable ref object that, when referenced, 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. | 
+| Prop               | Type                     | Default          | Description                                                                                                              |
+| ------------------ | ------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `borderColor`      | string                   | "#EAEAEA"        | The border color of the input container.                                                                                 |
+| `borderRadius`     | number                   | 21               | The border radius of the input container.                                                                                |
+| `buttonElement`    | HTMLElement              | -                | An HTMLElement that, when clicked, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
+| `buttonRef`        | React.MutableRefObject   | -                | A React mutable ref object that, when referenced, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
+| `cleanOnEnter`     | boolean                  | false            | Clean the input value after the keydown event.                                                                           |
+| `fontSize`         | number                   | 15               | The font size of the placeholder and input container.                                                                    |
+| `fontFamily`       | string                   | "sans-serif"     | The font family of the placeholder and input container.                                                                  |
+| `height`           | number                   | 40               | The total height of the area in which the element is rendered.                                                           |
+| `keepOpened`       | boolean                  | false            | If set to true, the emoji picker will remain open after selecting an emoji. Defaults to false.                            |
+| `maxLength`        | number                   | -                | The maximum number of characters allowed in the element.                                                                 |
+| `onChange`         | function                 | -                | This function is called when the value of the input changes. The first argument is the current value.                    |
+| `onClick`          | function                 | -                | This function is called when the input is clicked.                                                                       |
+| `onEnter`          | function                 | -                | This function is called after the keydown event is fired with the `keyCode === 13` returning the last value.             |
+| `onFocus`          | function                 | -                | This function is called when the input has received focus.                                                               |
+| `onResize`         | function                 | -                | This function is called when the width or the height of the input changes. The first argument is the current size value. |
+| `placeholder`      | string                   | "Type a message" | Set the placeholder of the input.                                                                                        |
+| `shouldReturn`     | boolean                  | -                | Allows the user to use the `Shift + Enter` or `Ctrl + Enter` keyboard shortcut to create a new line.                      |
+| `theme`            | string                   | -                | Set theme for emoji popup. Available values "light", "dark", "auto"                                                      |
+| `value`            | string                   | ""               | The input value.                                                                                                         |
 
 ## License
 

package/dist/__mocks__/getSelectionMock.d.ts

@@ -0,0 +1,5 @@
+/**
+ *
+ * @param {string} value
+ */
+export function mockGetSelection(value: string): void;

package/dist/fixtures/examples.d.ts

@@ -0,0 +1,5 @@
+export const mentionUsers: {
+    id: string;
+    name: string;
+    image: string;
+}[];

package/dist/index.es.js

@@ -1,6 +1,5 @@
 import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState, memo, useMemo } from 'react';
 import ReactDOM from 'react-dom';
-import t from 'prop-types';
 
 function styleInject(css, ref) {
   if (ref === void 0) ref = {};
@@ -515,7 +514,7 @@ function replaceAllTextEmojis(text) {
     allEmojis = _toConsumableArray(new Set(allEmojis)); // remove duplicates
 
     allEmojis.forEach(function (emoji) {
-      text = replaceAll(text, emoji, getInputEmojiHTML(emoji));
+      text = replaceAll(text, emoji, getInputEmojiHTML('', emoji));
     });
   }
   return text;
@@ -759,7 +758,7 @@ function useExpose(_ref) {
     textInputRef = _ref.textInputRef,
     setValue = _ref.setValue,
     emitChange = _ref.emitChange;
-  var _useSanitize = useSanitize(),
+  var _useSanitize = useSanitize(false),
     sanitize = _useSanitize.sanitize,
     sanitizedTextRef = _useSanitize.sanitizedTextRef;
   useImperativeHandle(ref, function () {
@@ -874,7 +873,7 @@ var TextInput = function TextInput(_ref, ref) {
         if (textInputRef.current) {
           textInputRef.current.focus();
         }
-        if (textInputRef.current && placeholderRef.current && textInputRef.current.innerHTML.trim() === "") {
+        if (textInputRef.current && placeholderRef.current && replaceAllTextEmojiToString(textInputRef.current.innerHTML) === "") {
           placeholderRef.current.style.visibility = "visible";
         } else if (placeholderRef.current) {
           placeholderRef.current.style.visibility = "hidden";
@@ -888,7 +887,8 @@ var TextInput = function TextInput(_ref, ref) {
           textInputRef.current.innerHTML = value;
         }
         if (placeholderRef.current) {
-          if (value.trim() === "") {
+          var text = replaceAllTextEmojiToString(value);
+          if (text === "") {
             placeholderRef.current.style.visibility = "visible";
           } else {
             placeholderRef.current.style.visibility = "hidden";
@@ -969,9 +969,9 @@ var TextInput = function TextInput(_ref, ref) {
   function handleKeyUp(event) {
     props.onKeyUp(event);
     var input = textInputRef.current;
-    if (placeholderRef.current) {
-      var _input$innerText;
-      if ((input === null || input === void 0 || (_input$innerText = input.innerText) === null || _input$innerText === void 0 ? void 0 : _input$innerText.trim()) === "") {
+    if (placeholderRef.current && input) {
+      var text = replaceAllTextEmojiToString(input.innerHTML);
+      if (text === "") {
         placeholderRef.current.style.visibility = "visible";
       } else {
         placeholderRef.current.style.visibility = "hidden";
@@ -3493,14 +3493,13 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
  * @property {'light' | 'dark' | 'auto'} theme
  * @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
  * @property {boolean} disableRecent
- * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
+ * @property {any[]=} customEmojis
  * @property {import('../types/types').Languages=} language
  */
 
 /**
  * Emoji Picker Component
  * @param {Props} props
- * @return {React.FC}
  */
 function EmojiPicker(props) {
   var theme = props.theme,
@@ -3544,7 +3543,7 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
  * @property {'light' | 'dark' | 'auto'} theme
  * @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
  * @property {boolean} disableRecent
- * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
+ * @property {any[]=} customEmojis
  * @property {('above' | 'below')=} position
  * @property {import('../types/types').Languages=} language
  */
@@ -3598,7 +3597,7 @@ var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
  * @property {'light' | 'dark' | 'auto'} theme
  * @property {boolean} keepOpened
  * @property {boolean} disableRecent
- * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
+ * @property {any[]=} customEmojis
  * @property {(fn: SanitizeFn) => void} addSanitizeFn
  * @property {(fn: PolluteFn) => void} addPolluteFn
  * @property {(html: string) => void} appendContent
@@ -4074,9 +4073,6 @@ var MentionUserList = function MentionUserList(_ref, ref) {
   }));
 };
 var MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
-MentionUserListWithRef.propTypes = {
-  users: t.array.isRequired
-};
 
 /**
  * @typedef {import('../types/types').MentionUser} MetionUser