react-input-emoji 4.0.8 → 4.2.0

package/README.md

@@ -46,7 +46,7 @@ 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. |
@@ -57,6 +57,7 @@ export default function Example() {
 | `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.                                                                    |

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, memo, useMemo, useState } from 'react';
+import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useMemo, memo, useState } from 'react';
 import PropTypes from 'prop-types';
 
 function styleInject(css, ref) {
@@ -156,6 +156,7 @@ function handlePasteHtmlAtCaret(html) {
   if (window.getSelection) {
     // IE9 and non-IE
     sel = window.getSelection();
+    if (sel === null) return;
 
     if (sel.getRangeAt && sel.rangeCount) {
       range = sel.getRangeAt(0);
@@ -251,7 +252,7 @@ function replaceAllHtmlToString(html) {
 /**
  * @typedef {Object} Props
  * @property {React.Ref<any>} ref
- * @property {React.MutableRefObject<import('../text-input').Ref>} textInputRef
+ * @property {React.MutableRefObject<import('../text-input').Ref | null>} textInputRef
  * @property {(value: string) => void} setValue
  * @property {() => void} emitChange
  */
@@ -281,10 +282,14 @@ function useExpose({
     },
 
     focus: () => {
+      if (textInputRef.current === null) return;
       textInputRef.current.focus();
     },
     blur: () => {
-      sanitize(textInputRef.current.html);
+      if (textInputRef.current !== null) {
+        sanitize(textInputRef.current.html);
+      }
+
       emitChange();
     }
   }));
@@ -294,16 +299,17 @@ function useExpose({
 
 /**
  * useEmit
- * @param {React.MutableRefObject<import('../text-input').Ref>} textInputRef
+ * @param {React.MutableRefObject<import('../text-input').Ref | null>} textInputRef
  * @param {(size: {width: number, height: number}) => void} onResize
  * @param {(text: string) => void} onChange
  */
 
 function useEmit(textInputRef, onResize, onChange) {
+  /** @type {React.MutableRefObject<{width: number; height: number} | null>} */
   const currentSizeRef = useRef(null);
   const onChangeFn = useRef(onChange);
   const checkAndEmitResize = useCallback(() => {
-    if (textInputRef.current) {
+    if (textInputRef.current !== null) {
       const currentSize = currentSizeRef.current;
       const nextSize = textInputRef.current.size;
 
@@ -337,7 +343,7 @@ function useEmit(textInputRef, onResize, onChange) {
  * @property {(event: React.KeyboardEvent) => void} onKeyDown
  * @property {(event: React.KeyboardEvent) => void} onKeyUp
  * @property {() => void} onFocus
- * @property {() => void=} onBlur
+ * @property {() => void} onBlur
  * @property {(sanitizedText: string) => void=} onChange
  * @property {(event: React.KeyboardEvent) => void} onArrowUp
  * @property {(event: React.KeyboardEvent) => void} onArrowDown
@@ -374,40 +380,63 @@ const TextInput = ({
 }, ref) => {
   useImperativeHandle(ref, () => ({
     appendContent: html => {
-      textInputRef.current.focus();
+      if (textInputRef.current) {
+        textInputRef.current.focus();
+      }
+
       handlePasteHtmlAtCaret(html);
-      textInputRef.current.focus();
 
-      if (textInputRef.current.innerHTML.trim() === "") {
+      if (textInputRef.current) {
+        textInputRef.current.focus();
+      }
+
+      if (textInputRef.current && placeholderRef.current && textInputRef.current.innerHTML.trim() === "") {
         placeholderRef.current.style.visibility = "visible";
-      } else {
+      } else if (placeholderRef.current) {
         placeholderRef.current.style.visibility = "hidden";
       }
 
-      onChange(textInputRef.current.innerHTML);
+      if (textInputRef.current && typeof onChange === 'function') {
+        onChange(textInputRef.current.innerHTML);
+      }
     },
 
     set html(value) {
-      textInputRef.current.innerHTML = value;
+      if (textInputRef.current) {
+        textInputRef.current.innerHTML = value;
+      }
 
-      if (value.trim() === "") {
-        placeholderRef.current.style.visibility = "visible";
-      } else {
-        placeholderRef.current.style.visibility = "hidden";
+      if (placeholderRef.current) {
+        if (value.trim() === "") {
+          placeholderRef.current.style.visibility = "visible";
+        } else {
+          placeholderRef.current.style.visibility = "hidden";
+        }
       }
 
-      onChange(textInputRef.current.innerHTML);
+      if (typeof onChange === 'function' && textInputRef.current) {
+        onChange(textInputRef.current.innerHTML);
+      }
     },
 
     get html() {
+      if (!textInputRef.current) return '';
       return textInputRef.current.innerHTML;
     },
 
     get text() {
+      if (!textInputRef.current) return '';
       return textInputRef.current.innerText;
     },
 
     get size() {
+      if (!textInputRef.current) {
+        return {
+          width: 0,
+          height: 0
+        };
+      }
+
       return {
         width: textInputRef.current.offsetWidth,
         height: textInputRef.current.offsetHeight
@@ -415,14 +444,15 @@ const TextInput = ({
     },
 
     focus() {
+      if (!textInputRef.current) return;
       textInputRef.current.focus();
     }
 
   }));
-  /** @type {React.MutableRefObject<HTMLDivElement>} */
+  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
 
   const placeholderRef = useRef(null);
-  /** @type {React.MutableRefObject<HTMLDivElement>} */
+  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
 
   const textInputRef = useRef(null);
   /**
@@ -438,7 +468,7 @@ const TextInput = ({
     } else if (event.key === "ArrowDown") {
       props.onArrowDown(event);
     } else {
-      if (event.key.length === 1) {
+      if (event.key.length === 1 && placeholderRef.current) {
         placeholderRef.current.style.visibility = "hidden";
       }
     }
@@ -458,18 +488,20 @@ const TextInput = ({
 
 
   function handleKeyUp(event) {
-    var _input$innerText;
-
     props.onKeyUp(event);
     const input = textInputRef.current;
 
-    if (((_input$innerText = input.innerText) === null || _input$innerText === void 0 ? void 0 : _input$innerText.trim()) === "") {
-      placeholderRef.current.style.visibility = "visible";
-    } else {
-      placeholderRef.current.style.visibility = "hidden";
+    if (placeholderRef.current) {
+      if (input?.innerText?.trim() === "") {
+        placeholderRef.current.style.visibility = "visible";
+      } else {
+        placeholderRef.current.style.visibility = "hidden";
+      }
     }
 
-    onChange(textInputRef.current.innerHTML);
+    if (typeof onChange === 'function' && textInputRef.current) {
+      onChange(textInputRef.current.innerHTML);
+    }
   }
 
   return /*#__PURE__*/React.createElement("div", {
@@ -49301,23 +49333,20 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
 }
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function _typeof(obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function _typeof(obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 
 var mapping = {
@@ -49407,8 +49436,8 @@ var stringFromCodePoint = _String.fromCodePoint || function stringFromCodePoint(
     codePoint > 0x10ffff || // not a valid Unicode code point
     Math.floor(codePoint) != codePoint // not an integer
     ) {
-        throw RangeError('Invalid code point: ' + codePoint);
-      }
+      throw RangeError('Invalid code point: ' + codePoint);
+    }
 
     if (codePoint <= 0xffff) {
       // BMP code point
@@ -50011,7 +50040,7 @@ function _defineProperty(obj, key, value) {
 }
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -50024,7 +50053,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -50039,24 +50067,25 @@ function _assertThisInitialized(self) {
 function _possibleConstructorReturn(self, call) {
   if (call && (_typeof(call) === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
 }
 
 function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
     return o.__proto__ || Object.getPrototypeOf(o);
   };
   return _getPrototypeOf(o);
 }
 
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 
@@ -50072,6 +50101,9 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -52346,6 +52378,7 @@ styleInject(css_248z);
 // vendors
 /**
  * @typedef {object} Props
+ * @property {'light' | 'dark' | 'auto'} theme
  * @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
  * @property {boolean} disableRecent
  * @property {object[]} customEmojis
@@ -52357,12 +52390,14 @@ styleInject(css_248z);
  * @return {React.FC}
  */
 
-function EmojiPicker({
-  onSelectEmoji,
-  disableRecent,
-  customEmojis
-}) {
-  const excluePicker = useMemo(() => {
+function EmojiPicker(props) {
+  const {
+    theme,
+    onSelectEmoji,
+    disableRecent,
+    customEmojis
+  } = props;
+  const excludePicker = useMemo(() => {
     /** @type import("emoji-mart").CategoryName[] */
     const exclude = [];
 
@@ -52373,16 +52408,18 @@ function EmojiPicker({
     return exclude;
   }, [disableRecent]);
   return /*#__PURE__*/React.createElement(Picker, {
+    theme: theme,
+    set: "apple",
     showPreview: false,
     showSkinTones: false,
-    set: "apple",
     onSelect: onSelectEmoji,
-    exclude: excluePicker,
+    exclude: excludePicker,
     custom: customEmojis
   });
 }
 
 EmojiPicker.propTypes = {
+  theme: PropTypes.oneOf(['light', 'dark', 'auto']),
   onSelectEmoji: PropTypes.func,
   disableRecent: PropTypes.bool,
   customEmojis: PropTypes.array
@@ -52400,7 +52437,8 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
 
 /**
  * @typedef {Object} Props
- * @property {boolean} keepOpenend
+ * @property {'light' | 'dark' | 'auto'} theme
+ * @property {boolean} keepOpened
  * @property {boolean} disableRecent
  * @property {object[]=} customEmojis
  * @property {(fn: SanitizeFn) => void} addSanitizeFn
@@ -52411,14 +52449,16 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
 
 /** @type {React.FC<Props>} */
 
-const EmojiPickerWrapper = ({
-  keepOpenend,
-  disableRecent,
-  customEmojis,
-  addSanitizeFn,
-  addPolluteFn,
-  appendContent
-}) => {
+const EmojiPickerWrapper = props => {
+  const {
+    theme,
+    keepOpened,
+    disableRecent,
+    customEmojis,
+    addSanitizeFn,
+    addPolluteFn,
+    appendContent
+  } = props;
   const [showPicker, setShowPicker] = useState(false);
   useEffect(() => {
     addSanitizeFn(replaceAllTextEmojiToString);
@@ -52468,7 +52508,7 @@ const EmojiPickerWrapper = ({
   function handleSelectEmoji(emoji) {
     appendContent(getImageEmoji(emoji));
 
-    if (!keepOpenend) {
+    if (!keepOpened) {
       setShowPicker(currentShowPicker => !currentShowPicker);
     }
   }
@@ -52481,10 +52521,12 @@ const EmojiPickerWrapper = ({
   }, /*#__PURE__*/React.createElement("div", {
     className: "react-emoji-picker"
   }, /*#__PURE__*/React.createElement(EmojiPicker$1, {
+    theme: theme,
     onSelectEmoji: handleSelectEmoji,
     disableRecent: disableRecent,
     customEmojis: customEmojis
   })))), /*#__PURE__*/React.createElement("button", {
+    type: "button",
     className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
     onClick: toggleShowPicker
   }, /*#__PURE__*/React.createElement("svg", {
@@ -52596,7 +52638,7 @@ function getElementWithFocus() {
 
 function getSelectionStart() {
   const node = document.getSelection().anchorNode;
-  return (node === null || node === void 0 ? void 0 : node.nodeType) == 3 ? node : null;
+  return node?.nodeType == 3 ? node : null;
 }
 
 // @ts-check
@@ -52641,11 +52683,9 @@ function useMention(searchMention) {
   /** @type {(event: React.KeyboardEvent) => void} */
 
   const onKeyUp = useCallback(async event => {
-    var _getElementWithFocus;
-
     if (typeof searchMention !== "function") return;
 
-    if (event.key === "Backspace" && (_getElementWithFocus = getElementWithFocus()) !== null && _getElementWithFocus !== void 0 && _getElementWithFocus.element.parentElement.hasAttribute("data-mention-id")) {
+    if (event.key === "Backspace" && getElementWithFocus()?.element.parentElement.hasAttribute("data-mention-id")) {
       const elementWithFocus = getElementWithFocus();
       elementWithFocus.element.parentElement.remove();
     } else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
@@ -52788,6 +52828,7 @@ const MentionUserList = ({
   }, usersFiltered.map((user, index) => /*#__PURE__*/React.createElement("li", {
     key: user.id
   }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
     onClick: handleClick(user),
     className: `react-input-emoji--mention--item${selectedUser === index ? " react-input-emoji--mention--item__selected" : ""}`,
     onMouseOver: () => setSelectedUser(index)
@@ -52995,7 +53036,8 @@ function useEventListeners() {
     arrowUp: createObserver(),
     arrowDown: createObserver(),
     enter: createObserver(),
-    focus: createObserver()
+    focus: createObserver(),
+    blur: createObserver()
   }), []);
   /**
    * @template {keyof TextInputListeners} T, K
@@ -53054,14 +53096,16 @@ 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 {() => void=} onBlur
  * @property {number} maxLength
- * @property {boolean} keepOpenend
+ * @property {boolean} keepOpened
  * @property {(event: KeyboardEvent) => void} onKeyDown
  * @property {string} inputClass
  * @property {boolean} disableRecent
@@ -53082,30 +53126,34 @@ function usePollute() {
  * @return {JSX.Element}
  */
 
-function InputEmoji({
-  onChange,
-  onEnter,
-  onResize,
-  onClick,
-  onFocus,
-  onKeyDown,
-  cleanOnEnter,
-  placeholder,
-  maxLength,
-  keepOpenend,
-  inputClass,
-  disableRecent,
-  tabIndex,
-  value,
-  customEmojis,
-  searchMention,
-  // style
-  borderRadius,
-  borderColor,
-  fontSize,
-  fontFamily
-}, ref) {
-  /** @type {React.MutableRefObject<import('./text-input').Ref>} */
+function InputEmoji(props, ref) {
+  const {
+    onChange,
+    onEnter,
+    onResize,
+    onClick,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    theme,
+    cleanOnEnter,
+    placeholder,
+    maxLength,
+    keepOpened,
+    inputClass,
+    disableRecent,
+    tabIndex,
+    value,
+    customEmojis,
+    searchMention,
+    // style
+    borderRadius,
+    borderColor,
+    fontSize,
+    fontFamily
+  } = props;
+  /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
+
   const textInputRef = useRef(null);
   const {
     addEventListener,
@@ -53121,6 +53169,7 @@ function InputEmoji({
     pollute
   } = usePollute();
   const updateHTML = useCallback((nextValue = "") => {
+    if (textInputRef.current === null) return;
     textInputRef.current.html = replaceAllTextEmojis(nextValue);
     sanitizedTextRef.current = nextValue;
   }, [sanitizedTextRef]);
@@ -53149,11 +53198,11 @@ function InputEmoji({
      * @return {boolean}
      */
     function handleKeydown(event) {
-      if (typeof maxLength !== "undefined" && event.key !== "Backspace" && totalCharacters(textInputRef.current) >= maxLength) {
+      if (typeof maxLength !== "undefined" && event.key !== "Backspace" && textInputRef.current !== null && totalCharacters(textInputRef.current) >= maxLength) {
         event.preventDefault();
       }
 
-      if (event.key === "Enter") {
+      if (event.key === "Enter" && textInputRef.current) {
         event.preventDefault();
         const text = sanitize(textInputRef.current.html);
         emitChange(sanitizedTextRef.current);
@@ -53202,6 +53251,19 @@ function InputEmoji({
       unsubscribe();
     };
   }, [addEventListener, onClick, onFocus]);
+  useEffect(() => {
+    /** */
+    function handleBlur() {
+      if (typeof onBlur === 'function') {
+        onBlur();
+      }
+    }
+
+    const unsubscribe = addEventListener('blur', handleBlur);
+    return () => {
+      unsubscribe();
+    };
+  }, [addEventListener, onBlur]);
   /**
    *
    * @param {string} html
@@ -53218,11 +53280,13 @@ function InputEmoji({
 
 
   function appendContent(html) {
-    if (typeof maxLength !== "undefined" && totalCharacters(textInputRef.current) >= maxLength) {
+    if (typeof maxLength !== "undefined" && textInputRef.current !== null && totalCharacters(textInputRef.current) >= maxLength) {
       return;
     }
 
-    textInputRef.current.appendContent(html);
+    if (textInputRef.current !== null) {
+      textInputRef.current.appendContent(html);
+    }
   }
   /**
    * Handle copy of current selected text
@@ -53262,6 +53326,7 @@ function InputEmoji({
     ref: textInputRef,
     onCopy: handleCopy,
     onPaste: handlePaste,
+    onBlur: listeners.blur.publish,
     onFocus: listeners.focus.publish,
     onArrowUp: listeners.arrowUp.publish,
     onArrowDown: listeners.arrowDown.publish,
@@ -53279,7 +53344,8 @@ function InputEmoji({
     className: inputClass,
     onChange: handleTextInputChange
   }), /*#__PURE__*/React.createElement(EmojiPickerWrapper, {
-    keepOpenend: keepOpenend,
+    theme: theme,
+    keepOpened: keepOpened,
     disableRecent: disableRecent,
     customEmojis: customEmojis,
     addSanitizeFn: addSanitizeFn,
@@ -53290,6 +53356,9 @@ function InputEmoji({
 
 const InputEmojiWithRef = /*#__PURE__*/forwardRef(InputEmoji);
 InputEmojiWithRef.defaultProps = {
+  theme:
+  /** @type {const} */
+  "auto",
   height: 30,
   placeholder: "Type a message",
   borderRadius: 21,
@@ -53300,5 +53369,5 @@ InputEmojiWithRef.defaultProps = {
   customEmojis: []
 };
 
-export default InputEmojiWithRef;
+export { InputEmojiWithRef as default };
 //# sourceMappingURL=index.es.js.map