react-input-emoji 4.2.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) {
@@ -536,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 = [
 	{
@@ -52388,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
  */
 
 /**
@@ -52433,6 +52480,43 @@ EmojiPicker.propTypes = {
 };
 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
@@ -52447,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
 
@@ -52464,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]);
@@ -52520,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
@@ -53124,6 +53212,7 @@ function usePollute() {
  * @property {string} fontFamily
  * @property {object[]=} customEmojis
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
+ * @property {HTMLDivElement=} buttonElement
  */
 
 /**
@@ -53153,6 +53242,7 @@ function InputEmoji(props, ref) {
     value,
     customEmojis,
     searchMention,
+    buttonElement,
     // style
     borderRadius,
     borderColor,
@@ -53261,12 +53351,12 @@ function InputEmoji(props, ref) {
   React.useEffect(() => {
     /** */
     function handleBlur() {
-      if (typeof onBlur === 'function') {
+      if (typeof onBlur === "function") {
         onBlur();
       }
     }
 
-    const unsubscribe = addEventListener('blur', handleBlur);
+    const unsubscribe = addEventListener("blur", handleBlur);
     return () => {
       unsubscribe();
     };
@@ -53357,7 +53447,8 @@ function InputEmoji(props, ref) {
     customEmojis: customEmojis,
     addSanitizeFn: addSanitizeFn,
     addPolluteFn: addPolluteFn,
-    appendContent: appendContent
+    appendContent: appendContent,
+    buttonElement: buttonElement
   }));
 }