react-input-emoji 5.6.11 → 5.7.0

package/dist/index.js

@@ -943,7 +943,7 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
  * @property {(event: React.ClipboardEvent) => void} onCopy
  * @property {(event: React.ClipboardEvent) => void} onPaste
  * @property {string} placeholder
- * @property {React.CSSProperties} style
+ * @property {{borderRadius?: number; borderColor?: string; fontSize?: number; fontFamily?: string; background: string; placeholderColor?: string;}} style
  * @property {number} tabIndex
  * @property {string} className
  * @property {(html: string) => void} onChange
@@ -1030,6 +1030,15 @@ var TextInput = function TextInput(_ref, ref) {
     };
   });
 
+  /** @type {React.CSSProperties} */
+  var placeholderStyle = React.useMemo(function () {
+    var placeholderStyle = {};
+    if (style.placeholderColor) {
+      placeholderStyle.color = style.placeholderColor;
+    }
+    return placeholderStyle;
+  }, [style.placeholderColor]);
+
   /** @type {React.MutableRefObject<HTMLDivElement | null>} */
   var placeholderRef = React.useRef(null);
   /** @type {React.MutableRefObject<HTMLDivElement | null>} */
@@ -1093,7 +1102,8 @@ var TextInput = function TextInput(_ref, ref) {
     onClick: handleClick
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     ref: placeholderRef,
-    className: "react-input-emoji--placeholder"
+    className: "react-input-emoji--placeholder",
+    style: placeholderStyle
   }, placeholder), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: textInputRef,
     onKeyDown: handleKeyDown,
@@ -4497,6 +4507,7 @@ function usePollute() {
  * @property {boolean=} cleanOnEnter
  * @property {(text: string) => void=} onEnter
  * @property {string=} placeholder
+ * @property {string=} placeholderColor
  * @property {(size: {width: number, height: number}) => void=} onResize
  * @property {() => void=} onClick
  * @property {() => void=} onFocus
@@ -4513,6 +4524,7 @@ function usePollute() {
  * @property {string=} borderColor
  * @property {number=} fontSize
  * @property {string=} fontFamily
+ * @property {string=} background
  * @property {{id: string; name: string; emojis: {id: string; name: string; keywords: string[], skins: {src: string}[]}}[]=} customEmojis
  * @property {import('./types/types').Languages=} language
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
@@ -4552,7 +4564,9 @@ function InputEmoji(props, ref) {
     borderRadius = props.borderRadius,
     borderColor = props.borderColor,
     fontSize = props.fontSize,
-    fontFamily = props.fontFamily;
+    fontFamily = props.fontFamily,
+    background = props.background,
+    placeholderColor = props.placeholderColor;
 
   /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
   var textInputRef = React.useRef(null);
@@ -4721,7 +4735,9 @@ function InputEmoji(props, ref) {
       borderRadius: borderRadius,
       borderColor: borderColor,
       fontSize: fontSize,
-      fontFamily: fontFamily
+      fontFamily: fontFamily,
+      background: background,
+      placeholderColor: placeholderColor
     },
     tabIndex: tabIndex,
     className: inputClass,
@@ -4748,6 +4764,7 @@ InputEmojiWithRef.defaultProps = {
   borderColor: "#EAEAEA",
   fontSize: 15,
   fontFamily: "sans-serif",
+  background: "white",
   tabIndex: 0,
   shouldReturn: false,
   customEmojis: [],