@chayns-components/emoji-input 5.0.0-beta.997 → 5.0.0

package/lib/cjs/components/emoji-input/EmojiInput.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _core = require("@chayns-components/core");
 var _chaynsApi = require("chayns-api");
-var _framerMotion = require("framer-motion");
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("motion/react");
+var _react2 = _interopRequireWildcard(require("react"));
 var _emoji = require("../../utils/emoji");
 var _insert = require("../../utils/insert");
 var _selection = require("../../utils/selection");
@@ -15,11 +15,13 @@ var _text = require("../../utils/text");
 var _EmojiPickerPopup = _interopRequireDefault(require("../emoji-picker-popup/EmojiPickerPopup"));
 var _EmojiInput = require("./EmojiInput.styles");
 var _PrefixElement = _interopRequireDefault(require("./prefix-element/PrefixElement"));
+var _asyncEmojiData = require("../../utils/asyncEmojiData");
+var _scroll = require("../../utils/scroll");
+var _cursor = require("../../hooks/cursor");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
-const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react2.useLayoutEffect : _react2.useEffect;
+const EmojiInput = /*#__PURE__*/(0, _react2.forwardRef)(({
   accessToken,
   height,
   inputId,
@@ -36,31 +38,45 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
   popupAlignment,
   prefixElement,
   rightElement,
-  shouldHidePlaceholderOnFocus = true,
+  shouldHidePlaceholderOnFocus = false,
   shouldPreventEmojiPicker,
-  value
+  value,
+  onCursorPositionChange
 }, ref) => {
-  const [isTouch] = (0, _react.useState)((0, _core.getIsTouch)());
-  const [plainTextValue, setPlainTextValue] = (0, _react.useState)(value);
-  const [hasFocus, setHasFocus] = (0, _react.useState)(false);
-  const [progressDuration, setProgressDuration] = (0, _react.useState)(0);
-  const [labelWidth, setLabelWidth] = (0, _react.useState)(0);
-  const [isPopupVisible, setIsPopupVisible] = (0, _react.useState)(false);
-  const [isPrefixAnimationFinished, setIsPrefixAnimationFinished] = (0, _react.useState)(!prefixElement);
-  const [prefixElementWidth, setPrefixElementWidth] = (0, _react.useState)();
-  const [textLength, setTextLength] = (0, _react.useState)(0);
-  const areaProvider = (0, _react.useContext)(_core.AreaContext);
-  const editorRef = (0, _react.useRef)(null);
-  const prefixElementRef = (0, _react.useRef)(null);
-  const hasPrefixRendered = (0, _react.useRef)(false);
-  const hasPrefixChanged = (0, _react.useRef)(false);
-  const shouldDeleteOneMoreBackwards = (0, _react.useRef)(false);
-  const shouldDeleteOneMoreForwards = (0, _react.useRef)(false);
-  const valueRef = (0, _react.useRef)(value);
+  const isTouch = (0, _core.useIsTouch)();
+  const [plainTextValue, setPlainTextValue] = (0, _react2.useState)(value);
+  const [hasFocus, setHasFocus] = (0, _react2.useState)(false);
+  const [progressDuration, setProgressDuration] = (0, _react2.useState)(0);
+  const [labelWidth, setLabelWidth] = (0, _react2.useState)(0);
+  const [isPopupVisible, setIsPopupVisible] = (0, _react2.useState)(false);
+  const [isPrefixAnimationFinished, setIsPrefixAnimationFinished] = (0, _react2.useState)(!prefixElement);
+  const [prefixElementWidth, setPrefixElementWidth] = (0, _react2.useState)();
+  const [emojiShortNames, setEmojiShortNames] = (0, _react2.useState)({});
+  const [emojiRegShortNames, setEmojiRegShortNames] = (0, _react2.useState)(/./);
+  const areaProvider = (0, _react2.useContext)(_core.AreaContext);
+  const editorRef = (0, _react2.useRef)(null);
+  const prefixElementRef = (0, _react2.useRef)(null);
+  const hasPrefixRendered = (0, _react2.useRef)(false);
+  const hasPrefixChanged = (0, _react2.useRef)(false);
+  const shouldDeleteOneMoreBackwards = (0, _react2.useRef)(false);
+  const shouldDeleteOneMoreForwards = (0, _react2.useRef)(false);
+  const valueRef = (0, _react2.useRef)(value);
+  (0, _cursor.useCursorPosition)(editorRef, onCursorPositionChange, {
+    isDisabled
+  });
   const {
     browser
   } = (0, _chaynsApi.getDevice)();
-  const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  const shouldChangeColor = (0, _react2.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  (0, _react2.useEffect)(() => {
+    void (0, _asyncEmojiData.loadEmojiShortList)().then(({
+      shortNameList,
+      regShortnames
+    }) => {
+      setEmojiShortNames(shortNameList);
+      setEmojiRegShortNames(regShortnames);
+    });
+  }, []);
 
   /**
    * This function updates the content of the 'contentEditable' element if the new text is
@@ -70,11 +86,11 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
    * When updating the HTML, the current cursor position is saved before replacing the content, so
    * that it can be set again afterward.
    */
-  const handleUpdateHTML = (0, _react.useCallback)(html => {
+  const handleUpdateHTML = (0, _react2.useCallback)(html => {
     if (!editorRef.current) {
       return;
     }
-    let newInnerHTML = (0, _emoji.convertEmojisToUnicode)(html);
+    let newInnerHTML = (0, _emoji.convertEmojisToUnicode)(html, emojiRegShortNames, emojiShortNames);
     newInnerHTML = (0, _text.convertTextToHTML)(newInnerHTML);
     if (newInnerHTML !== editorRef.current.innerHTML) {
       (0, _selection.saveSelection)(editorRef.current, {
@@ -83,8 +99,8 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
       editorRef.current.innerHTML = newInnerHTML;
       (0, _selection.restoreSelection)(editorRef.current);
     }
-  }, []);
-  const handleBeforeInput = (0, _react.useCallback)(event => {
+  }, [emojiRegShortNames, emojiShortNames]);
+  const handleBeforeInput = (0, _react2.useCallback)(event => {
     if (!editorRef.current) {
       return;
     }
@@ -100,7 +116,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
     if (type === 'textInput' && data && data.includes('\n')) {
       event.preventDefault();
       event.stopPropagation();
-      const text = (0, _emoji.convertEmojisToUnicode)(data);
+      const text = (0, _emoji.convertEmojisToUnicode)(data, emojiRegShortNames, emojiShortNames);
       (0, _insert.insertTextAtCursorPosition)({
         editorElement: editorRef.current,
         text
@@ -110,13 +126,13 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
       });
       editorRef.current.dispatchEvent(newEvent);
     }
-  }, [isDisabled]);
+  }, [emojiRegShortNames, emojiShortNames, isDisabled]);
 
   /**
    * This function handles the 'input' events of the 'contentEditable' element and also passes the
    * respective event up accordingly if the 'onInput' property is a function.
    */
-  const handleInput = (0, _react.useCallback)(event => {
+  const handleInput = (0, _react2.useCallback)(event => {
     if (!editorRef.current) {
       return;
     }
@@ -150,8 +166,9 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
     if (typeof onInput === 'function') {
       onInput(event, text);
     }
+    (0, _selection.insertCursorAtMarker)(editorRef);
   }, [handleUpdateHTML, isDisabled, onInput]);
-  const handleKeyDown = (0, _react.useCallback)(event => {
+  const handleKeyDown = (0, _react2.useCallback)(event => {
     if (isDisabled) {
       event.preventDefault();
       event.stopPropagation();
@@ -170,6 +187,11 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
       // noinspection JSDeprecatedSymbols
       document.execCommand('insertLineBreak', false);
     }
+    if (event.key === 'Enter') {
+      requestAnimationFrame(() => {
+        if (editorRef.current) (0, _scroll.scrollCursorIntoView)(editorRef.current);
+      });
+    }
     if (event.key === 'Backspace' || event.key === 'Delete' || event.key === 'Unidentified') {
       const charCodeThatWillBeDeleted = (0, _selection.getCharCodeThatWillBeDeleted)(event);
       if (charCodeThatWillBeDeleted === 8203) {
@@ -181,7 +203,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
       }
     }
   }, [isDisabled, isPopupVisible, onKeyDown]);
-  const handlePopupVisibility = (0, _react.useCallback)(isVisible => {
+  const handlePopupVisibility = (0, _react2.useCallback)(isVisible => {
     setIsPopupVisible(isVisible);
     if (editorRef.current && isVisible) {
       (0, _selection.saveSelection)(editorRef.current);
@@ -196,7 +218,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
    * plain text is read from the event after the default behavior has been prevented. The plain
    * text is then inserted at the correct position in the input field using document.execCommand('insertHTML')
    */
-  const handlePaste = (0, _react.useCallback)(event => {
+  const handlePaste = (0, _react2.useCallback)(event => {
     if (editorRef.current) {
       event.preventDefault();
       if (isDisabled) {
@@ -206,13 +228,18 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
 
       // This ensures, that only the copied text is inserted and not its HTML formatting.
       let text = event.clipboardData.getData('text/plain');
-      text = (0, _emoji.convertEmojisToUnicode)(text);
+      text = (0, _emoji.convertEmojisToUnicode)(text, emojiRegShortNames, emojiShortNames);
 
       /* This ensures, that valid HTML in the inserted text is not interpreted as such. e.g. if the user
          pasted the text '<b>test</b>' (not as formatted html), the <b> tags need to be escaped, to
          prevent it from being interpreted as html. */
       text = (0, _emoji.escapeHTML)(text);
 
+      // Insert an invisible control character at the end of the text to place the cursor in the correct position after insertion.
+      if (text.includes('\n')) {
+        text += '\u200C';
+      }
+
       // This deprecated function is used, because it causes the inserted content to be added to the undo stack.
       // If the text were to be inserted directly into the 'innerHTML' of the editor element, the undo stack would not be updated.
       // In that case on CTRL+Z the inserted text would not be removed.
@@ -222,14 +249,14 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
       });
       editorRef.current.dispatchEvent(newEvent);
     }
-  }, [isDisabled]);
+  }, [emojiRegShortNames, emojiShortNames, isDisabled]);
 
   /**
    * This function prevents formatting from being adopted when texts are dropped. To do this, the
    * plain text is read from the event after the default behavior has been prevented. The plain
    * text is then inserted at the correct position in the input field using document.execCommand('insertHTML')
    */
-  const handleDrop = (0, _react.useCallback)(event => {
+  const handleDrop = (0, _react2.useCallback)(event => {
     if (editorRef.current) {
       var _event$dataTransfer;
       event.preventDefault();
@@ -243,7 +270,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
       if (!text) {
         return;
       }
-      text = (0, _emoji.convertEmojisToUnicode)(text);
+      text = (0, _emoji.convertEmojisToUnicode)(text, emojiRegShortNames, emojiShortNames);
 
       /* This ensures, that valid HTML in the inserted text is not interpreted as such. e.g. if the user
          drops the text '<b>test</b>' (not as formatted html), the <b> tags need to be escaped, to
@@ -259,7 +286,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
       });
       editorRef.current.dispatchEvent(newEvent);
     }
-  }, [isDisabled]);
+  }, [emojiRegShortNames, emojiShortNames, isDisabled]);
 
   /**
    * This function uses the 'insertTextAtCursorPosition' function to insert the emoji at the
@@ -269,7 +296,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
    * which in turn executes the 'onInput' function from the props. So this serves to ensure that
    * the event is also passed through to the top when inserting via the popup.
    */
-  const handlePopupSelect = (0, _react.useCallback)(emoji => {
+  const handlePopupSelect = (0, _react2.useCallback)(emoji => {
     if (editorRef.current) {
       (0, _insert.insertTextAtCursorPosition)({
         editorElement: editorRef.current,
@@ -282,7 +309,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
       editorRef.current.dispatchEvent(event);
     }
   }, []);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     var _editorRef$current;
     if (typeof onPrefixElementRemove !== 'function') {
       return;
@@ -302,12 +329,12 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
     onPrefixElementRemove();
     hasPrefixRendered.current = false;
   }, [onPrefixElementRemove, plainTextValue.length, prefixElement]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (typeof prefixElement === 'string') {
       hasPrefixChanged.current = true;
     }
   }, [prefixElement]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (value !== plainTextValue) {
       setPlainTextValue(value);
       handleUpdateHTML(value);
@@ -320,7 +347,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
   useIsomorphicLayoutEffect(() => {
     handleUpdateHTML(valueRef.current);
   }, [handleUpdateHTML]);
-  const handleInsertTextAtCursorPosition = (0, _react.useCallback)(text => {
+  const handleInsertTextAtCursorPosition = (0, _react2.useCallback)(text => {
     if (editorRef.current) {
       (0, _insert.insertTextAtCursorPosition)({
         editorElement: editorRef.current,
@@ -332,32 +359,42 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
       editorRef.current.dispatchEvent(newEvent);
     }
   }, []);
-  const handleReplaceText = (0, _react.useCallback)((searchText, pasteText) => {
+  const handleReplaceText = (0, _react2.useCallback)((searchText, pasteText, options) => {
     if (editorRef.current) {
       (0, _insert.replaceText)({
         editorElement: editorRef.current,
         searchText,
-        pasteText
+        pasteText,
+        options
       });
+      (0, _selection.insertPseudoMarker)();
       const newEvent = new Event('input', {
         bubbles: true
       });
       editorRef.current.dispatchEvent(newEvent);
     }
   }, []);
-  const handleStartProgress = (0, _react.useCallback)(duration => {
+  const handleStartProgress = (0, _react2.useCallback)(duration => {
     setProgressDuration(duration);
   }, []);
-  const handleStopProgress = (0, _react.useCallback)(() => {
+  const handleStopProgress = (0, _react2.useCallback)(() => {
     setProgressDuration(0);
   }, []);
-  (0, _react.useImperativeHandle)(ref, () => ({
+  (0, _react2.useImperativeHandle)(ref, () => ({
     insertTextAtCursorPosition: handleInsertTextAtCursorPosition,
     replaceText: handleReplaceText,
     startProgress: handleStartProgress,
-    stopProgress: handleStopProgress
+    stopProgress: handleStopProgress,
+    focus: () => {
+      var _editorRef$current2;
+      return (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.focus();
+    },
+    blur: () => {
+      var _editorRef$current3;
+      return (_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 ? void 0 : _editorRef$current3.blur();
+    }
   }), [handleInsertTextAtCursorPosition, handleReplaceText, handleStartProgress, handleStopProgress]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     /**
      * This function ensures that the input field does not lose focus when the popup is opened
      * or an emoji is selected in it. For this purpose the corresponding elements get the class
@@ -379,12 +416,12 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
       document.body.removeEventListener('mousedown', handlePreventLoseFocus);
     };
   }, []);
-  const shouldShowPlaceholder = (0, _react.useMemo)(() => {
-    var _editorRef$current2;
+  const shouldShowPlaceholder = (0, _react2.useMemo)(() => {
+    var _editorRef$current4;
     if (!isPrefixAnimationFinished) {
       return false;
     }
-    const isJustPrefixElement = prefixElement && (0, _text.convertTextToHTML)(prefixElement) === ((_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.innerHTML);
+    const isJustPrefixElement = prefixElement && (0, _text.convertTextToHTML)(prefixElement) === ((_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 ? void 0 : _editorRef$current4.innerHTML);
     const shouldRenderPlaceholder = prefixElement && !plainTextValue || (prefixElement ? prefixElementWidth && prefixElementWidth > 0 : true);
     switch (true) {
       case (!plainTextValue || isJustPrefixElement) && shouldHidePlaceholderOnFocus && !hasFocus:
@@ -396,7 +433,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
         return false;
     }
   }, [isPrefixAnimationFinished, hasFocus, plainTextValue, prefixElement, shouldHidePlaceholderOnFocus, prefixElementWidth]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (prefixElement) {
       setIsPrefixAnimationFinished(false);
     }
@@ -413,9 +450,9 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
     }
     setHasFocus(false);
   };
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (editorRef.current && prefixElement) {
-      const text = (0, _emoji.convertEmojisToUnicode)(prefixElement);
+      const text = (0, _emoji.convertEmojisToUnicode)(prefixElement, emojiRegShortNames, emojiShortNames);
       (0, _insert.insertTextAtCursorPosition)({
         editorElement: editorRef.current,
         text
@@ -423,16 +460,16 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
       handleUpdateHTML(prefixElement);
       hasPrefixRendered.current = true;
     }
-  }, [handleUpdateHTML, prefixElement]);
-  (0, _react.useEffect)(() => {
-    var _editorRef$current3;
-    if (prefixElementRef.current && prefixElement && (0, _text.convertTextToHTML)(prefixElement) === ((_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 ? void 0 : _editorRef$current3.innerHTML)) {
+  }, [emojiRegShortNames, emojiShortNames, handleUpdateHTML, prefixElement]);
+  (0, _react2.useEffect)(() => {
+    var _editorRef$current5;
+    if (prefixElementRef.current && prefixElement && (0, _text.convertTextToHTML)(prefixElement) === ((_editorRef$current5 = editorRef.current) === null || _editorRef$current5 === void 0 ? void 0 : _editorRef$current5.innerHTML)) {
       setPrefixElementWidth(prefixElementRef.current.offsetWidth + 2);
     } else {
       setPrefixElementWidth(undefined);
     }
   }, [plainTextValue, prefixElement]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     const handleResize = () => {
       if (editorRef.current) {
         setLabelWidth(editorRef.current.offsetWidth);
@@ -446,7 +483,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
       resizeObserver.disconnect();
     };
   }, []);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     const blurElement = () => {
       if (editorRef.current && document.activeElement === editorRef.current && isDisabled) {
         editorRef.current.blur();
@@ -457,12 +494,12 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
       document.removeEventListener('focus', blurElement, true);
     };
   }, [isDisabled]);
-  return /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInput, {
+  return /*#__PURE__*/_react2.default.createElement(_EmojiInput.StyledEmojiInput, {
     $isDisabled: isDisabled,
     $shouldChangeColor: shouldChangeColor
-  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: true
-  }, progressDuration > 0 && /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledMotionEmojiInputProgress, {
+  }, progressDuration > 0 && /*#__PURE__*/_react2.default.createElement(_EmojiInput.StyledMotionEmojiInputProgress, {
     animate: {
       width: '100%'
     },
@@ -483,12 +520,12 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
         duration: 0.3
       }
     }
-  })), /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputContent, null, prefixElement && /*#__PURE__*/_react.default.createElement(_PrefixElement.default, {
+  })), /*#__PURE__*/_react2.default.createElement(_EmojiInput.StyledEmojiInputContent, null, prefixElement && /*#__PURE__*/_react2.default.createElement(_PrefixElement.default, {
     key: prefixElement,
     element: prefixElement,
     prefixElementRef: prefixElementRef,
     setIsPrefixAnimationFinished: setIsPrefixAnimationFinished
-  }), /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledMotionEmojiInputEditor, {
+  }), /*#__PURE__*/_react2.default.createElement(_EmojiInput.StyledMotionEmojiInputEditor, {
     $browser: browser === null || browser === void 0 ? void 0 : browser.name,
     animate: {
       maxHeight: height ?? maxHeight,
@@ -509,15 +546,15 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)(({
       type: 'tween',
       duration: 0.2
     }
-  }), shouldShowPlaceholder && /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputLabel, {
+  }), shouldShowPlaceholder && /*#__PURE__*/_react2.default.createElement(_EmojiInput.StyledEmojiInputLabel, {
     $maxWidth: labelWidth,
     $offsetWidth: prefixElementWidth
-  }, placeholder), !isTouch && !shouldPreventEmojiPicker && /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.default, {
+  }, placeholder), !isTouch && !shouldPreventEmojiPicker && /*#__PURE__*/_react2.default.createElement(_EmojiPickerPopup.default, {
     accessToken: accessToken,
     onSelect: handlePopupSelect,
     onPopupVisibilityChange: handlePopupVisibility,
     personId: personId
-  })), rightElement && /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputRightWrapper, null, rightElement));
+  })), rightElement && /*#__PURE__*/_react2.default.createElement(_EmojiInput.StyledEmojiInputRightWrapper, null, rightElement));
 });
 EmojiInput.displayName = 'EmojiInput';
 var _default = exports.default = EmojiInput;