react-input-emoji 4.1.0 → 4.3.0

package/dist/index.js

@@ -1,11 +1,13 @@
 'use strict';
 
 var React = require('react');
+var ReactDOM = require('react-dom');
 var PropTypes = require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 function styleInject(css, ref) {
@@ -163,6 +165,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);
@@ -258,7 +261,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
  */
@@ -288,10 +291,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();
     }
   }));
@@ -301,16 +308,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 = React.useRef(null);
   const onChangeFn = React.useRef(onChange);
   const checkAndEmitResize = React.useCallback(() => {
-    if (textInputRef.current) {
+    if (textInputRef.current !== null) {
       const currentSize = currentSizeRef.current;
       const nextSize = textInputRef.current.size;
 
@@ -344,7 +352,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
@@ -381,40 +389,63 @@ const TextInput = ({
 }, ref) => {
   React.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
@@ -422,14 +453,15 @@ const TextInput = ({
     },
 
     focus() {
+      if (!textInputRef.current) return;
       textInputRef.current.focus();
     }
 
   }));
-  /** @type {React.MutableRefObject<HTMLDivElement>} */
+  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
 
   const placeholderRef = React.useRef(null);
-  /** @type {React.MutableRefObject<HTMLDivElement>} */
+  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
 
   const textInputRef = React.useRef(null);
   /**
@@ -445,7 +477,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";
       }
     }
@@ -465,30 +497,32 @@ 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__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-input-emoji--container",
     style: style
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-input-emoji--wrapper",
     onClick: handleClick
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     ref: placeholderRef,
     className: "react-input-emoji--placeholder"
-  }, placeholder), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, placeholder), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: textInputRef,
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
@@ -504,6 +538,51 @@ const TextInput = ({
 
 const TextInputWithRef = /*#__PURE__*/React.forwardRef(TextInput);
 
+/* eslint-disable react/prop-types */
+/**
+ * @typedef {object} Props
+ * @property {boolean} showPicker
+ * @property {(event: React.MouseEvent) => void} toggleShowPicker
+ * @property {HTMLDivElement=} buttonElement
+ */
+
+/**
+ * Emoji Picker Button Component
+ * @param {Props} props
+ * @return {JSX.Element}
+ */
+
+function EmojiPickerButton({
+  showPicker,
+  toggleShowPicker,
+  buttonElement
+}) {
+  const buttonRef = React.useRef(null);
+  const [showCustomButtonContent, setShowCustomButtonContent] = React.useState(false);
+  React.useEffect(() => {
+    if ((buttonElement?.childNodes?.length ?? 0) > 2) {
+      buttonRef.current.appendChild(buttonElement?.childNodes[0]);
+      setShowCustomButtonContent(true);
+    }
+  }, [buttonElement?.childNodes]);
+  return /*#__PURE__*/React__default["default"].createElement("button", {
+    ref: buttonRef,
+    type: "button",
+    className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
+    onClick: toggleShowPicker
+  }, !showCustomButtonContent && /*#__PURE__*/React__default["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24",
+    className: "react-input-emoji--button--icon"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"
+  })));
+}
+
 var compressed = true;
 var categories$1 = [
 	{
@@ -49308,23 +49387,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 = {
@@ -49414,8 +49490,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
@@ -50018,7 +50094,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];
 
@@ -50031,7 +50107,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -50046,24 +50121,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);
 }
 
@@ -50079,36 +50155,39 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
 var categories = {
   activity: function activity() {
-    return React__default['default'].createElement("svg", {
+    return React__default["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       width: "24",
       height: "24"
-    }, React__default['default'].createElement("path", {
+    }, React__default["default"].createElement("path", {
       d: "M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.628-5.372-12-12-12m9.949 11H17.05c.224-2.527 1.232-4.773 1.968-6.113A9.966 9.966 0 0 1 21.949 11M13 11V2.051a9.945 9.945 0 0 1 4.432 1.564c-.858 1.491-2.156 4.22-2.392 7.385H13zm-2 0H8.961c-.238-3.165-1.536-5.894-2.393-7.385A9.95 9.95 0 0 1 11 2.051V11zm0 2v8.949a9.937 9.937 0 0 1-4.432-1.564c.857-1.492 2.155-4.221 2.393-7.385H11zm4.04 0c.236 3.164 1.534 5.893 2.392 7.385A9.92 9.92 0 0 1 13 21.949V13h2.04zM4.982 4.887C5.718 6.227 6.726 8.473 6.951 11h-4.9a9.977 9.977 0 0 1 2.931-6.113M2.051 13h4.9c-.226 2.527-1.233 4.771-1.969 6.113A9.972 9.972 0 0 1 2.051 13m16.967 6.113c-.735-1.342-1.744-3.586-1.968-6.113h4.899a9.961 9.961 0 0 1-2.931 6.113"
     }));
   },
   custom: function custom() {
-    return React__default['default'].createElement("svg", {
+    return React__default["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       width: "24",
       height: "24"
-    }, React__default['default'].createElement("g", {
+    }, React__default["default"].createElement("g", {
       transform: "translate(2.000000, 1.000000)"
-    }, React__default['default'].createElement("rect", {
+    }, React__default["default"].createElement("rect", {
       id: "Rectangle",
       x: "8",
       y: "0",
       width: "3",
       height: "21",
       rx: "1.5"
-    }), React__default['default'].createElement("rect", {
+    }), React__default["default"].createElement("rect", {
       id: "Rectangle",
       transform: "translate(9.843, 10.549) rotate(60) translate(-9.843, -10.549) ",
       x: "8.343",
@@ -50116,7 +50195,7 @@ var categories = {
       width: "3",
       height: "21",
       rx: "1.5"
-    }), React__default['default'].createElement("rect", {
+    }), React__default["default"].createElement("rect", {
       id: "Rectangle",
       transform: "translate(9.843, 10.549) rotate(-60) translate(-9.843, -10.549) ",
       x: "8.343",
@@ -50127,116 +50206,116 @@ var categories = {
     })));
   },
   flags: function flags() {
-    return React__default['default'].createElement("svg", {
+    return React__default["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       width: "24",
       height: "24"
-    }, React__default['default'].createElement("path", {
+    }, React__default["default"].createElement("path", {
       d: "M0 0l6.084 24H8L1.916 0zM21 5h-4l-1-4H4l3 12h3l1 4h13L21 5zM6.563 3h7.875l2 8H8.563l-2-8zm8.832 10l-2.856 1.904L12.063 13h3.332zM19 13l-1.5-6h1.938l2 8H16l3-2z"
     }));
   },
   foods: function foods() {
-    return React__default['default'].createElement("svg", {
+    return React__default["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       width: "24",
       height: "24"
-    }, React__default['default'].createElement("path", {
+    }, React__default["default"].createElement("path", {
       d: "M17 4.978c-1.838 0-2.876.396-3.68.934.513-1.172 1.768-2.934 4.68-2.934a1 1 0 0 0 0-2c-2.921 0-4.629 1.365-5.547 2.512-.064.078-.119.162-.18.244C11.73 1.838 10.798.023 9.207.023 8.579.022 7.85.306 7 .978 5.027 2.54 5.329 3.902 6.492 4.999 3.609 5.222 0 7.352 0 12.969c0 4.582 4.961 11.009 9 11.009 1.975 0 2.371-.486 3-1 .629.514 1.025 1 3 1 4.039 0 9-6.418 9-11 0-5.953-4.055-8-7-8M8.242 2.546c.641-.508.943-.523.965-.523.426.169.975 1.405 1.357 3.055-1.527-.629-2.741-1.352-2.98-1.846.059-.112.241-.356.658-.686M15 21.978c-1.08 0-1.21-.109-1.559-.402l-.176-.146c-.367-.302-.816-.452-1.266-.452s-.898.15-1.266.452l-.176.146c-.347.292-.477.402-1.557.402-2.813 0-7-5.389-7-9.009 0-5.823 4.488-5.991 5-5.991 1.939 0 2.484.471 3.387 1.251l.323.276a1.995 1.995 0 0 0 2.58 0l.323-.276c.902-.78 1.447-1.251 3.387-1.251.512 0 5 .168 5 6 0 3.617-4.187 9-7 9"
     }));
   },
   nature: function nature() {
-    return React__default['default'].createElement("svg", {
+    return React__default["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       width: "24",
       height: "24"
-    }, React__default['default'].createElement("path", {
+    }, React__default["default"].createElement("path", {
       d: "M15.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 15.5 8M8.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 8.5 8"
-    }), React__default['default'].createElement("path", {
+    }), React__default["default"].createElement("path", {
       d: "M18.933 0h-.027c-.97 0-2.138.787-3.018 1.497-1.274-.374-2.612-.51-3.887-.51-1.285 0-2.616.133-3.874.517C7.245.79 6.069 0 5.093 0h-.027C3.352 0 .07 2.67.002 7.026c-.039 2.479.276 4.238 1.04 5.013.254.258.882.677 1.295.882.191 3.177.922 5.238 2.536 6.38.897.637 2.187.949 3.2 1.102C8.04 20.6 8 20.795 8 21c0 1.773 2.35 3 4 3 1.648 0 4-1.227 4-3 0-.201-.038-.393-.072-.586 2.573-.385 5.435-1.877 5.925-7.587.396-.22.887-.568 1.104-.788.763-.774 1.079-2.534 1.04-5.013C23.929 2.67 20.646 0 18.933 0M3.223 9.135c-.237.281-.837 1.155-.884 1.238-.15-.41-.368-1.349-.337-3.291.051-3.281 2.478-4.972 3.091-5.031.256.015.731.27 1.265.646-1.11 1.171-2.275 2.915-2.352 5.125-.133.546-.398.858-.783 1.313M12 22c-.901 0-1.954-.693-2-1 0-.654.475-1.236 1-1.602V20a1 1 0 1 0 2 0v-.602c.524.365 1 .947 1 1.602-.046.307-1.099 1-2 1m3-3.48v.02a4.752 4.752 0 0 0-1.262-1.02c1.092-.516 2.239-1.334 2.239-2.217 0-1.842-1.781-2.195-3.977-2.195-2.196 0-3.978.354-3.978 2.195 0 .883 1.148 1.701 2.238 2.217A4.8 4.8 0 0 0 9 18.539v-.025c-1-.076-2.182-.281-2.973-.842-1.301-.92-1.838-3.045-1.853-6.478l.023-.041c.496-.826 1.49-1.45 1.804-3.102 0-2.047 1.357-3.631 2.362-4.522C9.37 3.178 10.555 3 11.948 3c1.447 0 2.685.192 3.733.57 1 .9 2.316 2.465 2.316 4.48.313 1.651 1.307 2.275 1.803 3.102.035.058.068.117.102.178-.059 5.967-1.949 7.01-4.902 7.19m6.628-8.202c-.037-.065-.074-.13-.113-.195a7.587 7.587 0 0 0-.739-.987c-.385-.455-.648-.768-.782-1.313-.076-2.209-1.241-3.954-2.353-5.124.531-.376 1.004-.63 1.261-.647.636.071 3.044 1.764 3.096 5.031.027 1.81-.347 3.218-.37 3.235"
     }));
   },
   objects: function objects() {
-    return React__default['default'].createElement("svg", {
+    return React__default["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       width: "24",
       height: "24"
-    }, React__default['default'].createElement("path", {
+    }, React__default["default"].createElement("path", {
       d: "M12 0a9 9 0 0 0-5 16.482V21s2.035 3 5 3 5-3 5-3v-4.518A9 9 0 0 0 12 0zm0 2c3.86 0 7 3.141 7 7s-3.14 7-7 7-7-3.141-7-7 3.14-7 7-7zM9 17.477c.94.332 1.946.523 3 .523s2.06-.19 3-.523v.834c-.91.436-1.925.689-3 .689a6.924 6.924 0 0 1-3-.69v-.833zm.236 3.07A8.854 8.854 0 0 0 12 21c.965 0 1.888-.167 2.758-.451C14.155 21.173 13.153 22 12 22c-1.102 0-2.117-.789-2.764-1.453z"
-    }), React__default['default'].createElement("path", {
+    }), React__default["default"].createElement("path", {
       d: "M14.745 12.449h-.004c-.852-.024-1.188-.858-1.577-1.824-.421-1.061-.703-1.561-1.182-1.566h-.009c-.481 0-.783.497-1.235 1.537-.436.982-.801 1.811-1.636 1.791l-.276-.043c-.565-.171-.853-.691-1.284-1.794-.125-.313-.202-.632-.27-.913-.051-.213-.127-.53-.195-.634C7.067 9.004 7.039 9 6.99 9A1 1 0 0 1 7 7h.01c1.662.017 2.015 1.373 2.198 2.134.486-.981 1.304-2.058 2.797-2.075 1.531.018 2.28 1.153 2.731 2.141l.002-.008C14.944 8.424 15.327 7 16.979 7h.032A1 1 0 1 1 17 9h-.011c-.149.076-.256.474-.319.709a6.484 6.484 0 0 1-.311.951c-.429.973-.79 1.789-1.614 1.789"
     }));
   },
   people: function people() {
-    return React__default['default'].createElement("svg", {
+    return React__default["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       width: "24",
       height: "24"
-    }, React__default['default'].createElement("path", {
+    }, React__default["default"].createElement("path", {
       d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"
-    }), React__default['default'].createElement("path", {
+    }), React__default["default"].createElement("path", {
       d: "M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"
     }));
   },
   places: function places() {
-    return React__default['default'].createElement("svg", {
+    return React__default["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       width: "24",
       height: "24"
-    }, React__default['default'].createElement("path", {
+    }, React__default["default"].createElement("path", {
       d: "M6.5 12C5.122 12 4 13.121 4 14.5S5.122 17 6.5 17 9 15.879 9 14.5 7.878 12 6.5 12m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5M17.5 12c-1.378 0-2.5 1.121-2.5 2.5s1.122 2.5 2.5 2.5 2.5-1.121 2.5-2.5-1.122-2.5-2.5-2.5m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5"
-    }), React__default['default'].createElement("path", {
+    }), React__default["default"].createElement("path", {
       d: "M22.482 9.494l-1.039-.346L21.4 9h.6c.552 0 1-.439 1-.992 0-.006-.003-.008-.003-.008H23c0-1-.889-2-1.984-2h-.642l-.731-1.717C19.262 3.012 18.091 2 16.764 2H7.236C5.909 2 4.738 3.012 4.357 4.283L3.626 6h-.642C1.889 6 1 7 1 8h.003S1 8.002 1 8.008C1 8.561 1.448 9 2 9h.6l-.043.148-1.039.346a2.001 2.001 0 0 0-1.359 2.097l.751 7.508a1 1 0 0 0 .994.901H3v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h6v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h1.096a.999.999 0 0 0 .994-.901l.751-7.508a2.001 2.001 0 0 0-1.359-2.097M6.273 4.857C6.402 4.43 6.788 4 7.236 4h9.527c.448 0 .834.43.963.857L19.313 9H4.688l1.585-4.143zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.189-3H2.811l-.662-6.607L3 11h18l.852.393L21.189 18z"
     }));
   },
   recent: function recent() {
-    return React__default['default'].createElement("svg", {
+    return React__default["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       width: "24",
       height: "24"
-    }, React__default['default'].createElement("path", {
+    }, React__default["default"].createElement("path", {
       d: "M13 4h-2l-.001 7H9v2h2v2h2v-2h4v-2h-4z"
-    }), React__default['default'].createElement("path", {
+    }), React__default["default"].createElement("path", {
       d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"
     }));
   },
   symbols: function symbols() {
-    return React__default['default'].createElement("svg", {
+    return React__default["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       width: "24",
       height: "24"
-    }, React__default['default'].createElement("path", {
+    }, React__default["default"].createElement("path", {
       d: "M0 0h11v2H0zM4 11h3V6h4V4H0v2h4zM15.5 17c1.381 0 2.5-1.116 2.5-2.493s-1.119-2.493-2.5-2.493S13 13.13 13 14.507 14.119 17 15.5 17m0-2.986c.276 0 .5.222.5.493 0 .272-.224.493-.5.493s-.5-.221-.5-.493.224-.493.5-.493M21.5 19.014c-1.381 0-2.5 1.116-2.5 2.493S20.119 24 21.5 24s2.5-1.116 2.5-2.493-1.119-2.493-2.5-2.493m0 2.986a.497.497 0 0 1-.5-.493c0-.271.224-.493.5-.493s.5.222.5.493a.497.497 0 0 1-.5.493M22 13l-9 9 1.513 1.5 8.99-9.009zM17 11c2.209 0 4-1.119 4-2.5V2s.985-.161 1.498.949C23.01 4.055 23 6 23 6s1-1.119 1-3.135C24-.02 21 0 21 0h-2v6.347A5.853 5.853 0 0 0 17 6c-2.209 0-4 1.119-4 2.5s1.791 2.5 4 2.5M10.297 20.482l-1.475-1.585a47.54 47.54 0 0 1-1.442 1.129c-.307-.288-.989-1.016-2.045-2.183.902-.836 1.479-1.466 1.729-1.892s.376-.871.376-1.336c0-.592-.273-1.178-.818-1.759-.546-.581-1.329-.871-2.349-.871-1.008 0-1.79.293-2.344.879-.556.587-.832 1.181-.832 1.784 0 .813.419 1.748 1.256 2.805-.847.614-1.444 1.208-1.794 1.784a3.465 3.465 0 0 0-.523 1.833c0 .857.308 1.56.924 2.107.616.549 1.423.823 2.42.823 1.173 0 2.444-.379 3.813-1.137L8.235 24h2.819l-2.09-2.383 1.333-1.135zm-6.736-6.389a1.02 1.02 0 0 1 .73-.286c.31 0 .559.085.747.254a.849.849 0 0 1 .283.659c0 .518-.419 1.112-1.257 1.784-.536-.651-.805-1.231-.805-1.742a.901.901 0 0 1 .302-.669M3.74 22c-.427 0-.778-.116-1.057-.349-.279-.232-.418-.487-.418-.766 0-.594.509-1.288 1.527-2.083.968 1.134 1.717 1.946 2.248 2.438-.921.507-1.686.76-2.3.76"
     }));
   }
 };
 var search = {
   search: function search() {
-    return React__default['default'].createElement("svg", {
+    return React__default["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       width: "13",
       height: "13",
       viewBox: "0 0 20 20",
       opacity: "0.5"
-    }, React__default['default'].createElement("path", {
+    }, React__default["default"].createElement("path", {
       d: "M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"
     }));
   },
   "delete": function _delete() {
-    return React__default['default'].createElement("svg", {
+    return React__default["default"].createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       width: "13",
       height: "13",
       viewBox: "0 0 20 20",
       opacity: "0.5"
-    }, React__default['default'].createElement("path", {
+    }, React__default["default"].createElement("path", {
       d: "M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"
     }));
   }
@@ -50249,68 +50328,68 @@ var icons = /*#__PURE__*/Object.freeze({
 });
 
 var EmojiPropTypes = {
-  data: PropTypes__default['default'].object.isRequired,
-  onOver: PropTypes__default['default'].func,
-  onLeave: PropTypes__default['default'].func,
-  onClick: PropTypes__default['default'].func,
-  fallback: PropTypes__default['default'].func,
-  backgroundImageFn: PropTypes__default['default'].func,
-  "native": PropTypes__default['default'].bool,
-  forceSize: PropTypes__default['default'].bool,
-  tooltip: PropTypes__default['default'].bool,
-  useButton: PropTypes__default['default'].bool,
-  skin: PropTypes__default['default'].oneOf([1, 2, 3, 4, 5, 6]),
-  sheetSize: PropTypes__default['default'].oneOf([16, 20, 32, 64]),
-  sheetColumns: PropTypes__default['default'].number,
-  sheetRows: PropTypes__default['default'].number,
-  set: PropTypes__default['default'].oneOf(['apple', 'google', 'twitter', 'facebook']),
-  size: PropTypes__default['default'].number.isRequired,
-  emoji: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].object]).isRequired
+  data: PropTypes__default["default"].object.isRequired,
+  onOver: PropTypes__default["default"].func,
+  onLeave: PropTypes__default["default"].func,
+  onClick: PropTypes__default["default"].func,
+  fallback: PropTypes__default["default"].func,
+  backgroundImageFn: PropTypes__default["default"].func,
+  "native": PropTypes__default["default"].bool,
+  forceSize: PropTypes__default["default"].bool,
+  tooltip: PropTypes__default["default"].bool,
+  useButton: PropTypes__default["default"].bool,
+  skin: PropTypes__default["default"].oneOf([1, 2, 3, 4, 5, 6]),
+  sheetSize: PropTypes__default["default"].oneOf([16, 20, 32, 64]),
+  sheetColumns: PropTypes__default["default"].number,
+  sheetRows: PropTypes__default["default"].number,
+  set: PropTypes__default["default"].oneOf(['apple', 'google', 'twitter', 'facebook']),
+  size: PropTypes__default["default"].number.isRequired,
+  emoji: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object]).isRequired
 };
 var PickerPropTypes = {
-  onClick: PropTypes__default['default'].func,
-  onSelect: PropTypes__default['default'].func,
-  onSkinChange: PropTypes__default['default'].func,
-  perLine: PropTypes__default['default'].number,
-  emojiSize: PropTypes__default['default'].number,
-  i18n: PropTypes__default['default'].object,
-  style: PropTypes__default['default'].object,
-  title: PropTypes__default['default'].string,
-  emoji: PropTypes__default['default'].string,
-  color: PropTypes__default['default'].string,
+  onClick: PropTypes__default["default"].func,
+  onSelect: PropTypes__default["default"].func,
+  onSkinChange: PropTypes__default["default"].func,
+  perLine: PropTypes__default["default"].number,
+  emojiSize: PropTypes__default["default"].number,
+  i18n: PropTypes__default["default"].object,
+  style: PropTypes__default["default"].object,
+  title: PropTypes__default["default"].string,
+  emoji: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string,
   set: EmojiPropTypes.set,
   skin: EmojiPropTypes.skin,
-  "native": PropTypes__default['default'].bool,
+  "native": PropTypes__default["default"].bool,
   backgroundImageFn: EmojiPropTypes.backgroundImageFn,
   sheetSize: EmojiPropTypes.sheetSize,
-  emojisToShowFilter: PropTypes__default['default'].func,
-  showPreview: PropTypes__default['default'].bool,
-  showSkinTones: PropTypes__default['default'].bool,
+  emojisToShowFilter: PropTypes__default["default"].func,
+  showPreview: PropTypes__default["default"].bool,
+  showSkinTones: PropTypes__default["default"].bool,
   emojiTooltip: EmojiPropTypes.tooltip,
   useButton: EmojiPropTypes.useButton,
-  theme: PropTypes__default['default'].oneOf(['auto', 'light', 'dark']),
-  include: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string),
-  exclude: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string),
-  recent: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string),
-  autoFocus: PropTypes__default['default'].bool,
-  enableFrequentEmojiSort: PropTypes__default['default'].bool,
-  custom: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({
-    name: PropTypes__default['default'].string.isRequired,
-    short_names: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string).isRequired,
-    emoticons: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string),
-    keywords: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string),
-    imageUrl: PropTypes__default['default'].string,
-    spriteUrl: PropTypes__default['default'].string,
-    sheet_x: PropTypes__default['default'].number,
-    sheet_y: PropTypes__default['default'].number,
-    size: PropTypes__default['default'].number,
-    sheetColumns: PropTypes__default['default'].number,
-    sheetRows: PropTypes__default['default'].number
+  theme: PropTypes__default["default"].oneOf(['auto', 'light', 'dark']),
+  include: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+  exclude: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+  recent: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+  autoFocus: PropTypes__default["default"].bool,
+  enableFrequentEmojiSort: PropTypes__default["default"].bool,
+  custom: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+    name: PropTypes__default["default"].string.isRequired,
+    short_names: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string).isRequired,
+    emoticons: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+    keywords: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+    imageUrl: PropTypes__default["default"].string,
+    spriteUrl: PropTypes__default["default"].string,
+    sheet_x: PropTypes__default["default"].number,
+    sheet_y: PropTypes__default["default"].number,
+    size: PropTypes__default["default"].number,
+    sheetColumns: PropTypes__default["default"].number,
+    sheetRows: PropTypes__default["default"].number
   })),
-  skinEmoji: PropTypes__default['default'].string,
-  notFound: PropTypes__default['default'].func,
-  notFoundEmoji: PropTypes__default['default'].string,
-  icons: PropTypes__default['default'].object
+  skinEmoji: PropTypes__default["default"].string,
+  notFound: PropTypes__default["default"].func,
+  notFoundEmoji: PropTypes__default["default"].string,
+  icons: PropTypes__default["default"].object
 };
 
 var Anchors = /*#__PURE__*/function (_React$PureComponent) {
@@ -50352,7 +50431,7 @@ var Anchors = /*#__PURE__*/function (_React$PureComponent) {
           i18n = _this$props2.i18n,
           icons = _this$props2.icons,
           selected = this.state.selected;
-      return React__default['default'].createElement("nav", {
+      return React__default["default"].createElement("nav", {
         className: "emoji-mart-anchors",
         "aria-label": i18n.categorieslabel
       }, categories.map(function (category, i) {
@@ -50366,7 +50445,7 @@ var Anchors = /*#__PURE__*/function (_React$PureComponent) {
         }
 
         var iconId = id.startsWith('custom-') ? 'custom' : id;
-        return React__default['default'].createElement("button", {
+        return React__default["default"].createElement("button", {
           key: id,
           "aria-label": i18n.categories[iconId],
           title: i18n.categories[iconId],
@@ -50377,9 +50456,9 @@ var Anchors = /*#__PURE__*/function (_React$PureComponent) {
           style: {
             color: isSelected ? color : null
           }
-        }, React__default['default'].createElement("div", {
+        }, React__default["default"].createElement("div", {
           className: "emoji-mart-anchor-icon"
-        }, icons.categories[iconId]()), React__default['default'].createElement("span", {
+        }, icons.categories[iconId]()), React__default["default"].createElement("span", {
           className: "emoji-mart-anchor-bar",
           style: {
             backgroundColor: color
@@ -50390,13 +50469,13 @@ var Anchors = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 
   return Anchors;
-}(React__default['default'].PureComponent);
+}(React__default["default"].PureComponent);
 Anchors.propTypes
 /* remove-proptypes */
 = {
-  categories: PropTypes__default['default'].array,
-  onAnchorClick: PropTypes__default['default'].func,
-  icons: PropTypes__default['default'].object
+  categories: PropTypes__default["default"].array,
+  onAnchorClick: PropTypes__default["default"].func,
+  icons: PropTypes__default["default"].object
 };
 Anchors.defaultProps = {
   categories: [],
@@ -50679,7 +50758,7 @@ var NimbleEmoji = function NimbleEmoji(props) {
     style = _convertStyleToCSS(style);
     return "<".concat(Tag.name, " style='").concat(style, "' aria-label='").concat(label, "' ").concat(title ? "title='".concat(title, "'") : '', " class='").concat(className, "'>").concat(children || '', "</").concat(Tag.name, ">");
   } else {
-    return React__default['default'].createElement(Tag.name, _extends({
+    return React__default["default"].createElement(Tag.name, _extends({
       onClick: function onClick(e) {
         return _handleClick(e, props);
       },
@@ -50692,7 +50771,7 @@ var NimbleEmoji = function NimbleEmoji(props) {
       "aria-label": label,
       title: title,
       className: className
-    }, Tag.props), React__default['default'].createElement("span", {
+    }, Tag.props), React__default["default"].createElement("span", {
       style: style
     }, children));
   }
@@ -50701,7 +50780,7 @@ var NimbleEmoji = function NimbleEmoji(props) {
 NimbleEmoji.propTypes
 /* remove-proptypes */
 = _objectSpread$6({}, EmojiPropTypes, {
-  data: PropTypes__default['default'].object.isRequired
+  data: PropTypes__default["default"].object.isRequired
 });
 NimbleEmoji.defaultProps = EmojiDefaultProps;
 
@@ -50757,7 +50836,7 @@ var NotFound = /*#__PURE__*/function (_React$PureComponent) {
           i18n = _this$props.i18n,
           notFound = _this$props.notFound,
           notFoundEmoji = _this$props.notFoundEmoji;
-      var component = notFound && notFound() || React__default['default'].createElement("div", {
+      var component = notFound && notFound() || React__default["default"].createElement("div", {
         className: "emoji-mart-no-results"
       }, NimbleEmoji(_objectSpread$5({
         data: data
@@ -50767,7 +50846,7 @@ var NotFound = /*#__PURE__*/function (_React$PureComponent) {
         onOver: null,
         onLeave: null,
         onClick: null
-      })), React__default['default'].createElement("div", {
+      })), React__default["default"].createElement("div", {
         className: "emoji-mart-no-results-label"
       }, i18n.notfound));
       return component;
@@ -50775,12 +50854,12 @@ var NotFound = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 
   return NotFound;
-}(React__default['default'].PureComponent);
+}(React__default["default"].PureComponent);
 NotFound.propTypes
 /* remove-proptypes */
 = {
-  notFound: PropTypes__default['default'].func.isRequired,
-  emojiProps: PropTypes__default['default'].object.isRequired
+  notFound: PropTypes__default["default"].func.isRequired,
+  emojiProps: PropTypes__default["default"].object.isRequired
 };
 
 function ownKeys$4(object, enumerableOnly) {
@@ -51018,31 +51097,31 @@ var Category = /*#__PURE__*/function (_React$Component) {
       }
 
       var label = i18n.categories[id] || name;
-      return React__default['default'].createElement("section", {
+      return React__default["default"].createElement("section", {
         ref: this.setContainerRef,
         className: "emoji-mart-category",
         "aria-label": label,
         style: containerStyles
-      }, React__default['default'].createElement("div", {
+      }, React__default["default"].createElement("div", {
         style: labelStyles,
         "data-name": name,
         className: "emoji-mart-category-label"
-      }, React__default['default'].createElement("span", {
+      }, React__default["default"].createElement("span", {
         style: labelSpanStyles,
         ref: this.setLabelRef,
         "aria-hidden": true
         /* already labeled by the section aria-label */
 
-      }, label)), React__default['default'].createElement("ul", {
+      }, label)), React__default["default"].createElement("ul", {
         className: "emoji-mart-category-list"
       }, emojis && emojis.map(function (emoji) {
-        return React__default['default'].createElement("li", {
+        return React__default["default"].createElement("li", {
           key: emoji.short_names && emoji.short_names.join('_') || emoji
         }, NimbleEmoji(_objectSpread$4({
           emoji: emoji,
           data: _this3.data
         }, emojiProps)));
-      })), emojis && !emojis.length && React__default['default'].createElement(NotFound, {
+      })), emojis && !emojis.length && React__default["default"].createElement(NotFound, {
         i18n: i18n,
         notFound: notFound,
         notFoundEmoji: notFoundEmoji,
@@ -51053,19 +51132,19 @@ var Category = /*#__PURE__*/function (_React$Component) {
   }]);
 
   return Category;
-}(React__default['default'].Component);
+}(React__default["default"].Component);
 Category.propTypes
 /* remove-proptypes */
 = {
-  emojis: PropTypes__default['default'].array,
-  hasStickyPosition: PropTypes__default['default'].bool,
-  name: PropTypes__default['default'].string.isRequired,
-  "native": PropTypes__default['default'].bool.isRequired,
-  perLine: PropTypes__default['default'].number.isRequired,
-  emojiProps: PropTypes__default['default'].object.isRequired,
-  recent: PropTypes__default['default'].arrayOf(PropTypes__default['default'].string),
-  notFound: PropTypes__default['default'].func,
-  notFoundEmoji: PropTypes__default['default'].string.isRequired
+  emojis: PropTypes__default["default"].array,
+  hasStickyPosition: PropTypes__default["default"].bool,
+  name: PropTypes__default["default"].string.isRequired,
+  "native": PropTypes__default["default"].bool.isRequired,
+  perLine: PropTypes__default["default"].number.isRequired,
+  emojiProps: PropTypes__default["default"].object.isRequired,
+  recent: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+  notFound: PropTypes__default["default"].func,
+  notFoundEmoji: PropTypes__default["default"].string.isRequired
 };
 Category.defaultProps = {
   emojis: [],
@@ -51115,12 +51194,12 @@ var Skins = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 
   return Skins;
-}(React__default['default'].PureComponent);
+}(React__default["default"].PureComponent);
 Skins.propTypes
 /* remove-proptypes */
 = {
-  onChange: PropTypes__default['default'].func,
-  skin: PropTypes__default['default'].number.isRequired
+  onChange: PropTypes__default["default"].func,
+  skin: PropTypes__default["default"].number.isRequired
 };
 Skins.defaultProps = {
   onChange: function onChange() {}
@@ -51153,10 +51232,10 @@ var SkinsEmoji = /*#__PURE__*/function (_Skins) {
 
       for (var skinTone = 1; skinTone <= 6; skinTone++) {
         var selected = skinTone === skin;
-        skinToneNodes.push(React__default['default'].createElement("span", {
+        skinToneNodes.push(React__default["default"].createElement("span", {
           key: "skin-tone-".concat(skinTone),
           className: "emoji-mart-skin-swatch custom".concat(selected ? ' selected' : '')
-        }, React__default['default'].createElement("span", {
+        }, React__default["default"].createElement("span", {
           onClick: this.handleClick,
           "data-skin": skinTone,
           className: "emoji-mart-skin-tone-".concat(skinTone)
@@ -51172,9 +51251,9 @@ var SkinsEmoji = /*#__PURE__*/function (_Skins) {
         }))));
       }
 
-      return React__default['default'].createElement("div", {
+      return React__default["default"].createElement("div", {
         className: "emoji-mart-skin-swatches custom".concat(opened ? ' opened' : '')
-      }, React__default['default'].createElement("div", {
+      }, React__default["default"].createElement("div", {
         className: "emoji-mart-skin-text".concat(opened ? ' opened' : '')
       }, i18n.skintext), skinToneNodes);
     }
@@ -51185,12 +51264,12 @@ var SkinsEmoji = /*#__PURE__*/function (_Skins) {
 SkinsEmoji.propTypes
 /* remove-proptypes */
 = {
-  onChange: PropTypes__default['default'].func,
-  skin: PropTypes__default['default'].number.isRequired,
-  emojiProps: PropTypes__default['default'].object.isRequired,
-  skinTone: PropTypes__default['default'].number,
-  skinEmoji: PropTypes__default['default'].string.isRequired,
-  i18n: PropTypes__default['default'].object
+  onChange: PropTypes__default["default"].func,
+  skin: PropTypes__default["default"].number.isRequired,
+  emojiProps: PropTypes__default["default"].object.isRequired,
+  skinTone: PropTypes__default["default"].number,
+  skinEmoji: PropTypes__default["default"].string.isRequired,
+  i18n: PropTypes__default["default"].object
 };
 SkinsEmoji.defaultProps = {
   onChange: function onChange() {},
@@ -51232,14 +51311,14 @@ var SkinsDot = /*#__PURE__*/function (_Skins) {
       for (var skinTone = 1; skinTone <= 6; skinTone++) {
         var selected = skinTone === skin;
         var visible = opened || selected;
-        skinToneNodes.push(React__default['default'].createElement("span", _extends({
+        skinToneNodes.push(React__default["default"].createElement("span", _extends({
           key: "skin-tone-".concat(skinTone),
           className: "emoji-mart-skin-swatch".concat(selected ? ' selected' : ''),
           "aria-label": i18n.skintones[skinTone],
           "aria-hidden": !visible
         }, opened ? {
           role: 'menuitem'
-        } : {}), React__default['default'].createElement("span", _extends({
+        } : {}), React__default["default"].createElement("span", _extends({
           onClick: this.handleClick,
           onKeyDown: this.handleKeyDown,
           role: "button"
@@ -51257,10 +51336,10 @@ var SkinsDot = /*#__PURE__*/function (_Skins) {
         }))));
       }
 
-      return React__default['default'].createElement("section", {
+      return React__default["default"].createElement("section", {
         className: "emoji-mart-skin-swatches".concat(opened ? ' opened' : ''),
         "aria-label": i18n.skintext
-      }, React__default['default'].createElement("div", opened ? {
+      }, React__default["default"].createElement("div", opened ? {
         role: 'menubar'
       } : {}, skinToneNodes));
     }
@@ -51271,9 +51350,9 @@ var SkinsDot = /*#__PURE__*/function (_Skins) {
 SkinsDot.propTypes
 /* remove-proptypes */
 = {
-  onChange: PropTypes__default['default'].func,
-  skin: PropTypes__default['default'].number.isRequired,
-  i18n: PropTypes__default['default'].object
+  onChange: PropTypes__default["default"].func,
+  skin: PropTypes__default["default"].number.isRequired,
+  i18n: PropTypes__default["default"].object
 };
 SkinsDot.defaultProps = {
   onChange: function onChange() {}
@@ -51356,59 +51435,59 @@ var Preview = /*#__PURE__*/function (_React$PureComponent) {
           knownEmoticons.push(emoticon.toLowerCase());
           listedEmoticons.push(emoticon);
         });
-        return React__default['default'].createElement("div", {
+        return React__default["default"].createElement("div", {
           className: "emoji-mart-preview"
-        }, React__default['default'].createElement("div", {
+        }, React__default["default"].createElement("div", {
           className: "emoji-mart-preview-emoji",
           "aria-hidden": "true"
         }, NimbleEmoji(_objectSpread$3({
           key: emoji.id,
           emoji: emoji,
           data: this.data
-        }, emojiProps))), React__default['default'].createElement("div", {
+        }, emojiProps))), React__default["default"].createElement("div", {
           className: "emoji-mart-preview-data",
           "aria-hidden": "true"
-        }, React__default['default'].createElement("div", {
+        }, React__default["default"].createElement("div", {
           className: "emoji-mart-preview-name"
-        }, emoji.name), React__default['default'].createElement("div", {
+        }, emoji.name), React__default["default"].createElement("div", {
           className: "emoji-mart-preview-shortnames"
         }, emojiData.short_names.map(function (short_name) {
-          return React__default['default'].createElement("span", {
+          return React__default["default"].createElement("span", {
             key: short_name,
             className: "emoji-mart-preview-shortname"
           }, ":", short_name, ":");
-        })), React__default['default'].createElement("div", {
+        })), React__default["default"].createElement("div", {
           className: "emoji-mart-preview-emoticons"
         }, listedEmoticons.map(function (emoticon) {
-          return React__default['default'].createElement("span", {
+          return React__default["default"].createElement("span", {
             key: emoticon,
             className: "emoji-mart-preview-emoticon"
           }, emoticon);
         }))));
       } else {
-        return React__default['default'].createElement("div", {
+        return React__default["default"].createElement("div", {
           className: "emoji-mart-preview"
-        }, React__default['default'].createElement("div", {
+        }, React__default["default"].createElement("div", {
           className: "emoji-mart-preview-emoji",
           "aria-hidden": "true"
         }, idleEmoji && idleEmoji.length && NimbleEmoji(_objectSpread$3({
           emoji: idleEmoji,
           data: this.data
-        }, emojiProps))), React__default['default'].createElement("div", {
+        }, emojiProps))), React__default["default"].createElement("div", {
           className: "emoji-mart-preview-data",
           "aria-hidden": "true"
-        }, React__default['default'].createElement("span", {
+        }, React__default["default"].createElement("span", {
           className: "emoji-mart-title-label"
-        }, title)), showSkinTones && React__default['default'].createElement("div", {
+        }, title)), showSkinTones && React__default["default"].createElement("div", {
           className: "emoji-mart-preview-skins".concat(skinsProps.skinEmoji ? ' custom' : '')
-        }, skinsProps.skinEmoji ? React__default['default'].createElement(SkinsEmoji, {
+        }, skinsProps.skinEmoji ? React__default["default"].createElement(SkinsEmoji, {
           skin: skinsProps.skin,
           emojiProps: emojiProps,
           data: this.data,
           skinEmoji: skinsProps.skinEmoji,
           i18n: i18n,
           onChange: skinsProps.onChange
-        }) : React__default['default'].createElement(SkinsDot, {
+        }) : React__default["default"].createElement(SkinsDot, {
           skin: skinsProps.skin,
           i18n: i18n,
           onChange: skinsProps.onChange
@@ -51418,15 +51497,15 @@ var Preview = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 
   return Preview;
-}(React__default['default'].PureComponent);
+}(React__default["default"].PureComponent);
 Preview.propTypes
 /* remove-proptypes */
 = {
-  showSkinTones: PropTypes__default['default'].bool,
-  title: PropTypes__default['default'].string.isRequired,
-  emoji: PropTypes__default['default'].string.isRequired,
-  emojiProps: PropTypes__default['default'].object.isRequired,
-  skinsProps: PropTypes__default['default'].object.isRequired
+  showSkinTones: PropTypes__default["default"].bool,
+  title: PropTypes__default["default"].string.isRequired,
+  emoji: PropTypes__default["default"].string.isRequired,
+  emojiProps: PropTypes__default["default"].object.isRequired,
+  skinsProps: PropTypes__default["default"].object.isRequired
 };
 Preview.defaultProps = {
   showSkinTones: true,
@@ -51524,20 +51603,20 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
           isSearching = _this$state.isSearching,
           id = _this$state.id;
       var inputId = "emoji-mart-search-".concat(id);
-      return React__default['default'].createElement("section", {
+      return React__default["default"].createElement("section", {
         className: "emoji-mart-search",
         "aria-label": i18n.search
-      }, React__default['default'].createElement("input", {
+      }, React__default["default"].createElement("input", {
         id: inputId,
         ref: this.setRef,
         type: "search",
         onChange: this.handleChange,
         placeholder: i18n.search,
         autoFocus: autoFocus
-      }), React__default['default'].createElement("label", {
+      }), React__default["default"].createElement("label", {
         className: "emoji-mart-sr-only",
         htmlFor: inputId
-      }, i18n.search), React__default['default'].createElement("button", {
+      }, i18n.search), React__default["default"].createElement("button", {
         className: "emoji-mart-search-icon",
         onClick: this.clear,
         onKeyUp: this.handleKeyUp,
@@ -51548,14 +51627,14 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 
   return Search;
-}(React__default['default'].PureComponent);
+}(React__default["default"].PureComponent);
 Search.propTypes
 /* remove-proptypes */
 = {
-  onSearch: PropTypes__default['default'].func,
-  maxResults: PropTypes__default['default'].number,
-  emojisToShowFilter: PropTypes__default['default'].func,
-  autoFocus: PropTypes__default['default'].bool
+  onSearch: PropTypes__default["default"].func,
+  maxResults: PropTypes__default["default"].number,
+  emojisToShowFilter: PropTypes__default["default"].func,
+  autoFocus: PropTypes__default["default"].bool
 };
 Search.defaultProps = {
   onSearch: function onSearch() {},
@@ -52149,16 +52228,16 @@ var NimblePicker = /*#__PURE__*/function (_React$PureComponent) {
       var width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar();
       var theme = this.getPreferredTheme();
       var skin = this.props.skin || this.state.skin || store.get('skin') || this.props.defaultSkin;
-      return React__default['default'].createElement("section", {
+      return React__default["default"].createElement("section", {
         style: _objectSpread$2({
           width: width
         }, style),
         className: "emoji-mart emoji-mart-".concat(theme),
         "aria-label": title,
         onKeyDown: this.handleKeyDown
-      }, React__default['default'].createElement("div", {
+      }, React__default["default"].createElement("div", {
         className: "emoji-mart-bar"
-      }, React__default['default'].createElement(Anchors, {
+      }, React__default["default"].createElement(Anchors, {
         ref: this.setAnchorsRef,
         data: this.data,
         i18n: this.i18n,
@@ -52166,7 +52245,7 @@ var NimblePicker = /*#__PURE__*/function (_React$PureComponent) {
         categories: this.categories,
         onAnchorClick: this.handleAnchorClick,
         icons: this.icons
-      })), React__default['default'].createElement(Search, {
+      })), React__default["default"].createElement(Search, {
         ref: this.setSearchRef,
         onSearch: this.handleSearch,
         data: this.data,
@@ -52176,12 +52255,12 @@ var NimblePicker = /*#__PURE__*/function (_React$PureComponent) {
         exclude: exclude,
         custom: this.CUSTOM,
         autoFocus: autoFocus
-      }), React__default['default'].createElement("div", {
+      }), React__default["default"].createElement("div", {
         ref: this.setScrollRef,
         className: "emoji-mart-scroll",
         onScroll: this.handleScroll
       }, this.getCategories().map(function (category, i) {
-        return React__default['default'].createElement(Category, {
+        return React__default["default"].createElement(Category, {
           ref: _this4.setCategoryRef.bind(_this4, "category-".concat(i)),
           key: category.name,
           id: category.id,
@@ -52213,9 +52292,9 @@ var NimblePicker = /*#__PURE__*/function (_React$PureComponent) {
           notFound: notFound,
           notFoundEmoji: notFoundEmoji
         });
-      })), (showPreview || showSkinTones) && React__default['default'].createElement("div", {
+      })), (showPreview || showSkinTones) && React__default["default"].createElement("div", {
         className: "emoji-mart-bar"
-      }, React__default['default'].createElement(Preview, {
+      }, React__default["default"].createElement(Preview, {
         ref: this.setPreviewRef,
         data: this.data,
         title: title,
@@ -52243,11 +52322,11 @@ var NimblePicker = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 
   return NimblePicker;
-}(React__default['default'].PureComponent);
+}(React__default["default"].PureComponent);
 NimblePicker.propTypes
 /* remove-proptypes */
 = _objectSpread$2({}, PickerPropTypes, {
-  data: PropTypes__default['default'].object.isRequired
+  data: PropTypes__default["default"].object.isRequired
 });
 NimblePicker.defaultProps = _objectSpread$2({}, PickerDefaultProps);
 
@@ -52297,12 +52376,12 @@ var Picker = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(Picker, [{
     key: "render",
     value: function render() {
-      return React__default['default'].createElement(NimblePicker, _extends({}, this.props, this.state));
+      return React__default["default"].createElement(NimblePicker, _extends({}, this.props, this.state));
     }
   }]);
 
   return Picker;
-}(React__default['default'].PureComponent);
+}(React__default["default"].PureComponent);
 Picker.propTypes
 /* remove-proptypes */
 = PickerPropTypes;
@@ -52356,7 +52435,7 @@ styleInject(css_248z);
  * @property {'light' | 'dark' | 'auto'} theme
  * @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
  * @property {boolean} disableRecent
- * @property {object[]} customEmojis
+ * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
  */
 
 /**
@@ -52382,7 +52461,7 @@ function EmojiPicker(props) {
 
     return exclude;
   }, [disableRecent]);
-  return /*#__PURE__*/React__default['default'].createElement(Picker, {
+  return /*#__PURE__*/React__default["default"].createElement(Picker, {
     theme: theme,
     set: "apple",
     showPreview: false,
@@ -52394,13 +52473,50 @@ function EmojiPicker(props) {
 }
 
 EmojiPicker.propTypes = {
-  theme: PropTypes__default['default'].oneOf(['light', 'dark', 'auto']),
-  onSelectEmoji: PropTypes__default['default'].func,
-  disableRecent: PropTypes__default['default'].bool,
-  customEmojis: PropTypes__default['default'].array
+  theme: PropTypes__default["default"].oneOf(['light', 'dark', 'auto']),
+  onSelectEmoji: PropTypes__default["default"].func,
+  disableRecent: PropTypes__default["default"].bool,
+  customEmojis: PropTypes__default["default"].array
 };
 var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
 
+/**
+ * @typedef {object} Props
+ * @property {boolean} showPicker
+ * @property {'light' | 'dark' | 'auto'} theme
+ * @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
+ * @property {boolean} disableRecent
+ * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
+ */
+
+/**
+ * Emoji Picker Button Component
+ * @param {Props} props
+ * @return {JSX.Element}
+ */
+
+function EmojiPickerContainer({
+  showPicker,
+  theme,
+  handleSelectEmoji,
+  disableRecent,
+  customEmojis
+}) {
+  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: evt => evt.stopPropagation()
+  }, /*#__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
+  }))));
+}
+
 // @ts-check
 /**
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
@@ -52415,10 +52531,11 @@ var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
  * @property {'light' | 'dark' | 'auto'} theme
  * @property {boolean} keepOpened
  * @property {boolean} disableRecent
- * @property {object[]=} customEmojis
+ * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
  * @property {(fn: SanitizeFn) => void} addSanitizeFn
  * @property {(fn: PolluteFn) => void} addPolluteFn
  * @property {(html: string) => void} appendContent
+ * @property {HTMLDivElement=} buttonElement
  */
 // eslint-disable-next-line valid-jsdoc
 
@@ -52432,9 +52549,13 @@ const EmojiPickerWrapper = props => {
     customEmojis,
     addSanitizeFn,
     addPolluteFn,
-    appendContent
+    appendContent,
+    buttonElement
   } = props;
   const [showPicker, setShowPicker] = React.useState(false);
+  /** @type {[HTMLDivElement | undefined, React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>]} */
+
+  const [customButton, setCustomButton] = React.useState();
   React.useEffect(() => {
     addSanitizeFn(replaceAllTextEmojiToString);
   }, [addSanitizeFn]);
@@ -52488,33 +52609,32 @@ const EmojiPickerWrapper = props => {
     }
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "react-emoji-picker--container"
-  }, showPicker && /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "react-emoji-picker--wrapper",
-    onClick: evt => evt.stopPropagation()
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "react-emoji-picker"
-  }, /*#__PURE__*/React__default['default'].createElement(EmojiPicker$1, {
+  React.useEffect(() => {
+    if (buttonElement?.style) {
+      buttonElement.style.position = "relative";
+      setCustomButton(buttonElement);
+    }
+  }, [buttonElement]);
+  return customButton ? /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(EmojiPickerContainer, {
+    showPicker: showPicker,
     theme: theme,
-    onSelectEmoji: handleSelectEmoji,
+    handleSelectEmoji: handleSelectEmoji,
     disableRecent: disableRecent,
     customEmojis: customEmojis
-  })))), /*#__PURE__*/React__default['default'].createElement("button", {
-    type: "button",
-    className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
-    onClick: toggleShowPicker
-  }, /*#__PURE__*/React__default['default'].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    width: "24",
-    height: "24",
-    className: "react-input-emoji--button--icon"
-  }, /*#__PURE__*/React__default['default'].createElement("path", {
-    d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"
-  }), /*#__PURE__*/React__default['default'].createElement("path", {
-    d: "M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"
-  }))));
+  }), /*#__PURE__*/React__default["default"].createElement(EmojiPickerButton, {
+    showPicker: showPicker,
+    toggleShowPicker: toggleShowPicker,
+    buttonElement: customButton
+  })), customButton) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(EmojiPickerContainer, {
+    showPicker: showPicker,
+    theme: theme,
+    handleSelectEmoji: handleSelectEmoji,
+    disableRecent: disableRecent,
+    customEmojis: customEmojis
+  }), /*#__PURE__*/React__default["default"].createElement(EmojiPickerButton, {
+    showPicker: showPicker,
+    toggleShowPicker: toggleShowPicker
+  }));
 };
 
 // @ts-check
@@ -52613,7 +52733,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
@@ -52658,11 +52778,9 @@ function useMention(searchMention) {
   /** @type {(event: React.KeyboardEvent) => void} */
 
   const onKeyUp = React.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)) {
@@ -52799,20 +52917,20 @@ const MentionUserList = ({
       unsubscribe();
     };
   }, [addEventListener, onSelect, selectedUser, usersFiltered]);
-  return /*#__PURE__*/React__default['default'].createElement("ul", {
+  return /*#__PURE__*/React__default["default"].createElement("ul", {
     className: "react-input-emoji--mention--list",
     "data-testid": "mention-user-list"
-  }, usersFiltered.map((user, index) => /*#__PURE__*/React__default['default'].createElement("li", {
+  }, usersFiltered.map((user, index) => /*#__PURE__*/React__default["default"].createElement("li", {
     key: user.id
-  }, /*#__PURE__*/React__default['default'].createElement("button", {
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     onClick: handleClick(user),
     className: `react-input-emoji--mention--item${selectedUser === index ? " react-input-emoji--mention--item__selected" : ""}`,
     onMouseOver: () => setSelectedUser(index)
-  }, /*#__PURE__*/React__default['default'].createElement("img", {
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
     className: "react-input-emoji--mention--item--img",
     src: user.image
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-input-emoji--mention--item--name",
     dangerouslySetInnerHTML: {
       __html: user.nameHtml
@@ -52822,7 +52940,7 @@ const MentionUserList = ({
 
 const MentionUserListWithRef = /*#__PURE__*/React.forwardRef(MentionUserList);
 MentionUserListWithRef.propTypes = {
-  users: PropTypes__default['default'].array.isRequired
+  users: PropTypes__default["default"].array.isRequired
 };
 
 // @ts-check
@@ -52951,16 +53069,16 @@ const MentionWrapper = ({
     appendContent(`<span class="react-input-emoji--mention--text" data-mention-id="${user.id}" data-mention-name="${user.name}">@${user.name}</span> `);
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, loading ? /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, loading ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-input-emoji--mention--container"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-input-emoji--mention--loading"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-input-emoji--mention--loading--spinner"
-  }, "Loading..."))) : showUserList && /*#__PURE__*/React__default['default'].createElement("div", {
+  }, "Loading..."))) : showUserList && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-input-emoji--mention--container",
     onClick: evt => evt.stopPropagation()
-  }, /*#__PURE__*/React__default['default'].createElement(MentionUserListWithRef, {
+  }, /*#__PURE__*/React__default["default"].createElement(MentionUserListWithRef, {
     ref: metionUserListRef,
     mentionSearchText: mentionSearchText,
     users: mentionUsers,
@@ -53013,7 +53131,8 @@ function useEventListeners() {
     arrowUp: createObserver(),
     arrowDown: createObserver(),
     enter: createObserver(),
-    focus: createObserver()
+    focus: createObserver(),
+    blur: createObserver()
   }), []);
   /**
    * @template {keyof TextInputListeners} T, K
@@ -53079,6 +53198,7 @@ function usePollute() {
  * @property {(size: {width: number, height: number}) => void} onResize
  * @property {() => void} onClick
  * @property {() => void} onFocus
+ * @property {() => void=} onBlur
  * @property {number} maxLength
  * @property {boolean} keepOpened
  * @property {(event: KeyboardEvent) => void} onKeyDown
@@ -53092,6 +53212,7 @@ function usePollute() {
  * @property {string} fontFamily
  * @property {object[]=} customEmojis
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
+ * @property {HTMLDivElement=} buttonElement
  */
 
 /**
@@ -53108,6 +53229,7 @@ function InputEmoji(props, ref) {
     onResize,
     onClick,
     onFocus,
+    onBlur,
     onKeyDown,
     theme,
     cleanOnEnter,
@@ -53120,13 +53242,14 @@ function InputEmoji(props, ref) {
     value,
     customEmojis,
     searchMention,
+    buttonElement,
     // style
     borderRadius,
     borderColor,
     fontSize,
     fontFamily
   } = props;
-  /** @type {React.MutableRefObject<import('./text-input').Ref>} */
+  /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
 
   const textInputRef = React.useRef(null);
   const {
@@ -53143,6 +53266,7 @@ function InputEmoji(props, ref) {
     pollute
   } = usePollute();
   const updateHTML = React.useCallback((nextValue = "") => {
+    if (textInputRef.current === null) return;
     textInputRef.current.html = replaceAllTextEmojis(nextValue);
     sanitizedTextRef.current = nextValue;
   }, [sanitizedTextRef]);
@@ -53171,11 +53295,11 @@ function InputEmoji(props, ref) {
      * @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);
@@ -53224,6 +53348,19 @@ function InputEmoji(props, ref) {
       unsubscribe();
     };
   }, [addEventListener, onClick, onFocus]);
+  React.useEffect(() => {
+    /** */
+    function handleBlur() {
+      if (typeof onBlur === "function") {
+        onBlur();
+      }
+    }
+
+    const unsubscribe = addEventListener("blur", handleBlur);
+    return () => {
+      unsubscribe();
+    };
+  }, [addEventListener, onBlur]);
   /**
    *
    * @param {string} html
@@ -53240,11 +53377,13 @@ function InputEmoji(props, ref) {
 
 
   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
@@ -53273,17 +53412,18 @@ function InputEmoji(props, ref) {
     }
   }
 
-  return /*#__PURE__*/React__default['default'].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-emoji"
-  }, /*#__PURE__*/React__default['default'].createElement(MentionWrapper, {
+  }, /*#__PURE__*/React__default["default"].createElement(MentionWrapper, {
     searchMention: searchMention,
     addEventListener: addEventListener,
     appendContent: appendContent,
     addSanitizeFn: addSanitizeFn
-  }), /*#__PURE__*/React__default['default'].createElement(TextInputWithRef, {
+  }), /*#__PURE__*/React__default["default"].createElement(TextInputWithRef, {
     ref: textInputRef,
     onCopy: handleCopy,
     onPaste: handlePaste,
+    onBlur: listeners.blur.publish,
     onFocus: listeners.focus.publish,
     onArrowUp: listeners.arrowUp.publish,
     onArrowDown: listeners.arrowDown.publish,
@@ -53300,14 +53440,15 @@ function InputEmoji(props, ref) {
     tabIndex: tabIndex,
     className: inputClass,
     onChange: handleTextInputChange
-  }), /*#__PURE__*/React__default['default'].createElement(EmojiPickerWrapper, {
+  }), /*#__PURE__*/React__default["default"].createElement(EmojiPickerWrapper, {
     theme: theme,
     keepOpened: keepOpened,
     disableRecent: disableRecent,
     customEmojis: customEmojis,
     addSanitizeFn: addSanitizeFn,
     addPolluteFn: addPolluteFn,
-    appendContent: appendContent
+    appendContent: appendContent,
+    buttonElement: buttonElement
   }));
 }