react-input-emoji 4.0.9 → 4.1.0

package/README.md

@@ -46,7 +46,7 @@ export default function Example() {
 ## Props
 
 | Prop           | Type     | Default          | Description                                                                                                              |
-| -------------- | -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
+|----------------|----------|------------------|--------------------------------------------------------------------------------------------------------------------------|
 | `value`        | string   | ""               | The input value.                                                                                                         |
 | `onChange`     | function | -                | This function is called when the value of the input changes. The first argument is the current value.                    |
 | `onResize`     | function | -                | This function is called when the width or the height of the input changes. The first argument is the current size value. |
@@ -57,6 +57,7 @@ export default function Example() {
 | `placeholder`  | string   | "Type a message" | Set the placeholder of the input.                                                                                        |
 | `height`       | number   | 40               | The total height of the area in which the element is rendered.                                                           |
 | `maxLength`    | number   | -                | The maximum number of characters allowed in the element.                                                                 |
+| `theme`        | string   | -                | Set theme for emoji popup. Available values "light", "dark", "auto"                                                      |
 | `borderRadius` | number   | 21               | The border radius of the input container.                                                                                |
 | `borderColor`  | string   | "#EAEAEA"        | The border color of the input container.                                                                                 |
 | `fontSize`     | number   | 15               | The font size of the placeholder and input container.                                                                    |

package/dist/index.es.js

@@ -52346,6 +52346,7 @@ styleInject(css_248z);
 // vendors
 /**
  * @typedef {object} Props
+ * @property {'light' | 'dark' | 'auto'} theme
  * @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
  * @property {boolean} disableRecent
  * @property {object[]} customEmojis
@@ -52357,12 +52358,14 @@ styleInject(css_248z);
  * @return {React.FC}
  */
 
-function EmojiPicker({
-  onSelectEmoji,
-  disableRecent,
-  customEmojis
-}) {
-  const excluePicker = useMemo(() => {
+function EmojiPicker(props) {
+  const {
+    theme,
+    onSelectEmoji,
+    disableRecent,
+    customEmojis
+  } = props;
+  const excludePicker = useMemo(() => {
     /** @type import("emoji-mart").CategoryName[] */
     const exclude = [];
 
@@ -52373,16 +52376,18 @@ function EmojiPicker({
     return exclude;
   }, [disableRecent]);
   return /*#__PURE__*/React.createElement(Picker, {
+    theme: theme,
+    set: "apple",
     showPreview: false,
     showSkinTones: false,
-    set: "apple",
     onSelect: onSelectEmoji,
-    exclude: excluePicker,
+    exclude: excludePicker,
     custom: customEmojis
   });
 }
 
 EmojiPicker.propTypes = {
+  theme: PropTypes.oneOf(['light', 'dark', 'auto']),
   onSelectEmoji: PropTypes.func,
   disableRecent: PropTypes.bool,
   customEmojis: PropTypes.array
@@ -52400,7 +52405,8 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
 
 /**
  * @typedef {Object} Props
- * @property {boolean} keepOpenend
+ * @property {'light' | 'dark' | 'auto'} theme
+ * @property {boolean} keepOpened
  * @property {boolean} disableRecent
  * @property {object[]=} customEmojis
  * @property {(fn: SanitizeFn) => void} addSanitizeFn
@@ -52411,14 +52417,16 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
 
 /** @type {React.FC<Props>} */
 
-const EmojiPickerWrapper = ({
-  keepOpenend,
-  disableRecent,
-  customEmojis,
-  addSanitizeFn,
-  addPolluteFn,
-  appendContent
-}) => {
+const EmojiPickerWrapper = props => {
+  const {
+    theme,
+    keepOpened,
+    disableRecent,
+    customEmojis,
+    addSanitizeFn,
+    addPolluteFn,
+    appendContent
+  } = props;
   const [showPicker, setShowPicker] = useState(false);
   useEffect(() => {
     addSanitizeFn(replaceAllTextEmojiToString);
@@ -52468,7 +52476,7 @@ const EmojiPickerWrapper = ({
   function handleSelectEmoji(emoji) {
     appendContent(getImageEmoji(emoji));
 
-    if (!keepOpenend) {
+    if (!keepOpened) {
       setShowPicker(currentShowPicker => !currentShowPicker);
     }
   }
@@ -52481,6 +52489,7 @@ const EmojiPickerWrapper = ({
   }, /*#__PURE__*/React.createElement("div", {
     className: "react-emoji-picker"
   }, /*#__PURE__*/React.createElement(EmojiPicker$1, {
+    theme: theme,
     onSelectEmoji: handleSelectEmoji,
     disableRecent: disableRecent,
     customEmojis: customEmojis
@@ -53056,6 +53065,7 @@ function usePollute() {
  * @typedef {object} Props
  * @property {string} value
  * @property {(value: string) => void} onChange
+ * @property {"light" | "dark" | "auto"} theme
  * @property {boolean} cleanOnEnter
  * @property {(text: string) => void} onEnter
  * @property {string} placeholder
@@ -53063,7 +53073,7 @@ function usePollute() {
  * @property {() => void} onClick
  * @property {() => void} onFocus
  * @property {number} maxLength
- * @property {boolean} keepOpenend
+ * @property {boolean} keepOpened
  * @property {(event: KeyboardEvent) => void} onKeyDown
  * @property {string} inputClass
  * @property {boolean} disableRecent
@@ -53084,30 +53094,33 @@ function usePollute() {
  * @return {JSX.Element}
  */
 
-function InputEmoji({
-  onChange,
-  onEnter,
-  onResize,
-  onClick,
-  onFocus,
-  onKeyDown,
-  cleanOnEnter,
-  placeholder,
-  maxLength,
-  keepOpenend,
-  inputClass,
-  disableRecent,
-  tabIndex,
-  value,
-  customEmojis,
-  searchMention,
-  // style
-  borderRadius,
-  borderColor,
-  fontSize,
-  fontFamily
-}, ref) {
+function InputEmoji(props, ref) {
+  const {
+    onChange,
+    onEnter,
+    onResize,
+    onClick,
+    onFocus,
+    onKeyDown,
+    theme,
+    cleanOnEnter,
+    placeholder,
+    maxLength,
+    keepOpened,
+    inputClass,
+    disableRecent,
+    tabIndex,
+    value,
+    customEmojis,
+    searchMention,
+    // style
+    borderRadius,
+    borderColor,
+    fontSize,
+    fontFamily
+  } = props;
   /** @type {React.MutableRefObject<import('./text-input').Ref>} */
+
   const textInputRef = useRef(null);
   const {
     addEventListener,
@@ -53281,7 +53294,8 @@ function InputEmoji({
     className: inputClass,
     onChange: handleTextInputChange
   }), /*#__PURE__*/React.createElement(EmojiPickerWrapper, {
-    keepOpenend: keepOpenend,
+    theme: theme,
+    keepOpened: keepOpened,
     disableRecent: disableRecent,
     customEmojis: customEmojis,
     addSanitizeFn: addSanitizeFn,
@@ -53292,6 +53306,9 @@ function InputEmoji({
 
 const InputEmojiWithRef = /*#__PURE__*/forwardRef(InputEmoji);
 InputEmojiWithRef.defaultProps = {
+  theme:
+  /** @type {const} */
+  "auto",
   height: 30,
   placeholder: "Type a message",
   borderRadius: 21,