react-input-emoji 4.2.0 → 4.3.0

package/dist/index.es.js

@@ -1,4 +1,5 @@
-import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useMemo, memo, useState } from 'react';
+import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState, useMemo, memo } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
 function styleInject(css, ref) {
@@ -529,6 +530,51 @@ const TextInput = ({
 
 const TextInputWithRef = /*#__PURE__*/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 = useRef(null);
+  const [showCustomButtonContent, setShowCustomButtonContent] = useState(false);
+  useEffect(() => {
+    if ((buttonElement?.childNodes?.length ?? 0) > 2) {
+      buttonRef.current.appendChild(buttonElement?.childNodes[0]);
+      setShowCustomButtonContent(true);
+    }
+  }, [buttonElement?.childNodes]);
+  return /*#__PURE__*/React.createElement("button", {
+    ref: buttonRef,
+    type: "button",
+    className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
+    onClick: toggleShowPicker
+  }, !showCustomButtonContent && /*#__PURE__*/React.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.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.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 = [
 	{
@@ -52381,7 +52427,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
  */
 
 /**
@@ -52426,6 +52472,43 @@ EmojiPicker.propTypes = {
 };
 var EmojiPicker$1 = /*#__PURE__*/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.createElement("div", {
+    className: "react-emoji-picker--container"
+  }, showPicker && /*#__PURE__*/React.createElement("div", {
+    className: "react-emoji-picker--wrapper",
+    onClick: evt => evt.stopPropagation()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "react-emoji-picker"
+  }, /*#__PURE__*/React.createElement(EmojiPicker$1, {
+    theme: theme,
+    onSelectEmoji: handleSelectEmoji,
+    disableRecent: disableRecent,
+    customEmojis: customEmojis
+  }))));
+}
+
 // @ts-check
 /**
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
@@ -52440,10 +52523,11 @@ var EmojiPicker$1 = /*#__PURE__*/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
 
@@ -52457,9 +52541,13 @@ const EmojiPickerWrapper = props => {
     customEmojis,
     addSanitizeFn,
     addPolluteFn,
-    appendContent
+    appendContent,
+    buttonElement
   } = props;
   const [showPicker, setShowPicker] = useState(false);
+  /** @type {[HTMLDivElement | undefined, React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>]} */
+
+  const [customButton, setCustomButton] = useState();
   useEffect(() => {
     addSanitizeFn(replaceAllTextEmojiToString);
   }, [addSanitizeFn]);
@@ -52513,33 +52601,32 @@ const EmojiPickerWrapper = props => {
     }
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "react-emoji-picker--container"
-  }, showPicker && /*#__PURE__*/React.createElement("div", {
-    className: "react-emoji-picker--wrapper",
-    onClick: evt => evt.stopPropagation()
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "react-emoji-picker"
-  }, /*#__PURE__*/React.createElement(EmojiPicker$1, {
+  useEffect(() => {
+    if (buttonElement?.style) {
+      buttonElement.style.position = "relative";
+      setCustomButton(buttonElement);
+    }
+  }, [buttonElement]);
+  return customButton ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiPickerContainer, {
+    showPicker: showPicker,
     theme: theme,
-    onSelectEmoji: handleSelectEmoji,
+    handleSelectEmoji: handleSelectEmoji,
     disableRecent: disableRecent,
     customEmojis: customEmojis
-  })))), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
-    onClick: toggleShowPicker
-  }, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    width: "24",
-    height: "24",
-    className: "react-input-emoji--button--icon"
-  }, /*#__PURE__*/React.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.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.createElement(EmojiPickerButton, {
+    showPicker: showPicker,
+    toggleShowPicker: toggleShowPicker,
+    buttonElement: customButton
+  })), customButton) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiPickerContainer, {
+    showPicker: showPicker,
+    theme: theme,
+    handleSelectEmoji: handleSelectEmoji,
+    disableRecent: disableRecent,
+    customEmojis: customEmojis
+  }), /*#__PURE__*/React.createElement(EmojiPickerButton, {
+    showPicker: showPicker,
+    toggleShowPicker: toggleShowPicker
+  }));
 };
 
 // @ts-check
@@ -53117,6 +53204,7 @@ function usePollute() {
  * @property {string} fontFamily
  * @property {object[]=} customEmojis
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
+ * @property {HTMLDivElement=} buttonElement
  */
 
 /**
@@ -53146,6 +53234,7 @@ function InputEmoji(props, ref) {
     value,
     customEmojis,
     searchMention,
+    buttonElement,
     // style
     borderRadius,
     borderColor,
@@ -53254,12 +53343,12 @@ function InputEmoji(props, ref) {
   useEffect(() => {
     /** */
     function handleBlur() {
-      if (typeof onBlur === 'function') {
+      if (typeof onBlur === "function") {
         onBlur();
       }
     }
 
-    const unsubscribe = addEventListener('blur', handleBlur);
+    const unsubscribe = addEventListener("blur", handleBlur);
     return () => {
       unsubscribe();
     };
@@ -53350,7 +53439,8 @@ function InputEmoji(props, ref) {
     customEmojis: customEmojis,
     addSanitizeFn: addSanitizeFn,
     addPolluteFn: addPolluteFn,
-    appendContent: appendContent
+    appendContent: appendContent,
+    buttonElement: buttonElement
   }));
 }