react-input-emoji 5.6.2 → 5.6.4

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 () {
@@ -3494,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,
@@ -3545,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
  */
@@ -3599,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
@@ -4075,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
@@ -4329,26 +4324,26 @@ function usePollute() {
  * @typedef {object} Props
  * @property {string} value
  * @property {(value: string) => void} onChange
- * @property {"light" | "dark" | "auto"} theme
- * @property {boolean} cleanOnEnter
- * @property {(text: string) => void} onEnter
- * @property {string} placeholder
- * @property {(size: {width: number, height: number}) => void} onResize
- * @property {() => void} onClick
- * @property {() => void} onFocus
+ * @property {"light" | "dark" | "auto"=} theme
+ * @property {boolean=} cleanOnEnter
+ * @property {(text: string) => void=} onEnter
+ * @property {string=} placeholder
+ * @property {(size: {width: number, height: number}) => void=} onResize
+ * @property {() => void=} onClick
+ * @property {() => void=} onFocus
  * @property {() => void=} onBlur
- * @property {boolean} shouldReturn
- * @property {number} maxLength
- * @property {boolean} keepOpened
- * @property {(event: KeyboardEvent) => void} onKeyDown
- * @property {string} inputClass
- * @property {boolean} disableRecent
- * @property {number} tabIndex
- * @property {number} height
- * @property {number} borderRadius
- * @property {string} borderColor
- * @property {number} fontSize
- * @property {string} fontFamily
+ * @property {boolean=} shouldReturn
+ * @property {number=} maxLength
+ * @property {boolean=} keepOpened
+ * @property {(event: KeyboardEvent) => void=} onKeyDown
+ * @property {string=} inputClass
+ * @property {boolean=} disableRecent
+ * @property {number=} tabIndex
+ * @property {number=} height
+ * @property {number=} borderRadius
+ * @property {string=} borderColor
+ * @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