react-input-emoji 5.7.0 → 5.7.1

package/README.md

@@ -66,6 +66,7 @@ export default function Example() {
 | `buttonElement`    | HTMLElement              | -                | Allows you to provide a custom HTMLElement that, when clicked, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
 | `buttonRef`        | React.MutableRefObject   | -                | Accepts a React mutable ref object that, when referenced, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
 | `cleanOnEnter`     | boolean                  | false            | When set to true, the input value will be cleared after the user presses the Enter key.                                  |
+| `color`            | string                   | "black"          | Specifies the color of the input text. Accepts any valid CSS color value.                                                |
 | `fontSize`         | number                   | 15               | Controls the font size (in pixels) of the placeholder text and input value.                                              |
 | `fontFamily`       | string                   | "sans-serif"     | Specifies the font family for the placeholder text and input value. Accepts any valid CSS font-family value.             |
 | `height`           | number                   | 40               | Sets the total height (in pixels) of the area in which the input element is rendered.                                    |

package/dist/index.es.js

@@ -936,7 +936,7 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
  * @property {(event: React.ClipboardEvent) => void} onCopy
  * @property {(event: React.ClipboardEvent) => void} onPaste
  * @property {string} placeholder
- * @property {{borderRadius?: number; borderColor?: string; fontSize?: number; fontFamily?: string; background: string; placeholderColor?: string;}} style
+ * @property {{borderRadius?: number; color?: string; borderColor?: string; fontSize?: number; fontFamily?: string; background: string; placeholderColor?: string;}} style
  * @property {number} tabIndex
  * @property {string} className
  * @property {(html: string) => void} onChange
@@ -1030,7 +1030,16 @@ var TextInput = function TextInput(_ref, ref) {
       placeholderStyle.color = style.placeholderColor;
     }
     return placeholderStyle;
-  }, [style.placeholderColor]);
+  }, [style === null || style === void 0 ? void 0 : style.placeholderColor]);
+
+  /** @type {React.CSSProperties} */
+  var inputStyle = useMemo(function () {
+    var inputStyle = {};
+    if (style.color) {
+      inputStyle.color = style.color;
+    }
+    return inputStyle;
+  }, [style === null || style === void 0 ? void 0 : style.color]);
 
   /** @type {React.MutableRefObject<HTMLDivElement | null>} */
   var placeholderRef = useRef(null);
@@ -1107,7 +1116,8 @@ var TextInput = function TextInput(_ref, ref) {
     onBlur: props.onBlur,
     onCopy: props.onCopy,
     onPaste: props.onPaste,
-    "data-testid": "react-input-emoji--input"
+    "data-testid": "react-input-emoji--input",
+    style: inputStyle
   })));
 };
 var TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
@@ -4501,6 +4511,7 @@ function usePollute() {
  * @property {(text: string) => void=} onEnter
  * @property {string=} placeholder
  * @property {string=} placeholderColor
+ * @property {string=} color
  * @property {(size: {width: number, height: number}) => void=} onResize
  * @property {() => void=} onClick
  * @property {() => void=} onFocus
@@ -4559,7 +4570,8 @@ function InputEmoji(props, ref) {
     fontSize = props.fontSize,
     fontFamily = props.fontFamily,
     background = props.background,
-    placeholderColor = props.placeholderColor;
+    placeholderColor = props.placeholderColor,
+    color = props.color;
 
   /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
   var textInputRef = useRef(null);
@@ -4730,7 +4742,8 @@ function InputEmoji(props, ref) {
       fontSize: fontSize,
       fontFamily: fontFamily,
       background: background,
-      placeholderColor: placeholderColor
+      placeholderColor: placeholderColor,
+      color: color
     },
     tabIndex: tabIndex,
     className: inputClass,
@@ -4755,6 +4768,7 @@ InputEmojiWithRef.defaultProps = {
   placeholder: "Type a message",
   borderRadius: 21,
   borderColor: "#EAEAEA",
+  color: "black",
   fontSize: 15,
   fontFamily: "sans-serif",
   background: "white",