react-input-emoji 4.0.9 → 4.1.0

package/dist/index.js

@@ -52353,6 +52353,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
@@ -52364,12 +52365,14 @@ styleInject(css_248z);
  * @return {React.FC}
  */
 
-function EmojiPicker({
-  onSelectEmoji,
-  disableRecent,
-  customEmojis
-}) {
-  const excluePicker = React.useMemo(() => {
+function EmojiPicker(props) {
+  const {
+    theme,
+    onSelectEmoji,
+    disableRecent,
+    customEmojis
+  } = props;
+  const excludePicker = React.useMemo(() => {
     /** @type import("emoji-mart").CategoryName[] */
     const exclude = [];
 
@@ -52380,16 +52383,18 @@ function EmojiPicker({
     return exclude;
   }, [disableRecent]);
   return /*#__PURE__*/React__default['default'].createElement(Picker, {
+    theme: theme,
+    set: "apple",
     showPreview: false,
     showSkinTones: false,
-    set: "apple",
     onSelect: onSelectEmoji,
-    exclude: excluePicker,
+    exclude: excludePicker,
     custom: customEmojis
   });
 }
 
 EmojiPicker.propTypes = {
+  theme: PropTypes__default['default'].oneOf(['light', 'dark', 'auto']),
   onSelectEmoji: PropTypes__default['default'].func,
   disableRecent: PropTypes__default['default'].bool,
   customEmojis: PropTypes__default['default'].array
@@ -52407,7 +52412,8 @@ var EmojiPicker$1 = /*#__PURE__*/React.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
@@ -52418,14 +52424,16 @@ var EmojiPicker$1 = /*#__PURE__*/React.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] = React.useState(false);
   React.useEffect(() => {
     addSanitizeFn(replaceAllTextEmojiToString);
@@ -52475,7 +52483,7 @@ const EmojiPickerWrapper = ({
   function handleSelectEmoji(emoji) {
     appendContent(getImageEmoji(emoji));
 
-    if (!keepOpenend) {
+    if (!keepOpened) {
       setShowPicker(currentShowPicker => !currentShowPicker);
     }
   }
@@ -52488,6 +52496,7 @@ const EmojiPickerWrapper = ({
   }, /*#__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
@@ -53063,6 +53072,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
@@ -53070,7 +53080,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
@@ -53091,30 +53101,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 = React.useRef(null);
   const {
     addEventListener,
@@ -53288,7 +53301,8 @@ function InputEmoji({
     className: inputClass,
     onChange: handleTextInputChange
   }), /*#__PURE__*/React__default['default'].createElement(EmojiPickerWrapper, {
-    keepOpenend: keepOpenend,
+    theme: theme,
+    keepOpened: keepOpened,
     disableRecent: disableRecent,
     customEmojis: customEmojis,
     addSanitizeFn: addSanitizeFn,
@@ -53299,6 +53313,9 @@ function InputEmoji({
 
 const InputEmojiWithRef = /*#__PURE__*/React.forwardRef(InputEmoji);
 InputEmojiWithRef.defaultProps = {
+  theme:
+  /** @type {const} */
+  "auto",
   height: 30,
   placeholder: "Type a message",
   borderRadius: 21,