react-input-emoji 4.0.7 → 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

@@ -30,7 +30,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$1 = ".react-input-emoji--container {\n  color: #4b4b4b;\n  text-rendering: optimizeLegibility;\n  background-color: #fff;\n  border: 1px solid #fff;\n  border-radius: 21px;\n  margin: 5px 10px;\n  box-sizing: border-box;\n  flex: 1 1 auto;\n  font-size: 15px;\n  font-family: sans-serif;\n  font-weight: 400;\n  line-height: 20px;\n  min-height: 20px;\n  min-width: 0;\n  outline: none;\n  width: inherit;\n  will-change: width;\n  vertical-align: baseline;\n  border: 1px solid #eaeaea;\n  margin-right: 0;\n}\n\n.react-input-emoji--wrapper {\n  display: flex;\n  overflow: hidden;\n  flex: 1;\n  position: relative;\n  padding-right: 0;\n  vertical-align: baseline;\n  outline: none;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.react-input-emoji--input {\n  font-weight: 400;\n  max-height: 100px;\n  min-height: 20px;\n  outline: none;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: relative;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  z-index: 1;\n  width: 100%;\n  user-select: text;\n  padding: 9px 12px 11px;\n  text-align: left;\n}\n\n.react-input-emoji--input img {\n  vertical-align: middle;\n  width: 18px !important;\n  height: 18px !important;\n  display: inline !important;\n  margin-left: 1px;\n  margin-right: 1px;\n}\n\n.react-input-emoji--overlay {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 9;\n}\n\n.react-input-emoji--placeholder {\n  color: #a0a0a0;\n  pointer-events: none;\n  position: absolute;\n  user-select: none;\n  z-index: 2;\n  left: 16px;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  width: calc(100% - 22px);\n}\n\n.react-input-emoji--button {\n  position: relative;\n  display: block;\n  text-align: center;\n  padding: 0 10px;\n  overflow: hidden;\n  transition: color 0.1s ease-out;\n  margin: 0;\n  box-shadow: none;\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.react-input-emoji--button svg {\n  fill: #858585;\n}\n\n.react-input-emoji--button__show svg {\n  fill: #128b7e;\n}\n\n.react-emoji {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n}\n\n.react-emoji-picker--container {\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.react-emoji-picker--wrapper {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  height: 357px;\n  width: 338px;\n  overflow: hidden;\n  z-index: 10;\n}\n\n.react-emoji-picker {\n  position: absolute;\n  top: 0;\n  left: 0;\n  animation: slidein 0.1s ease-in-out;\n}\n\n.react-emoji-picker__show {\n  top: 0;\n}\n\n.react-input-emoji--mention--container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 10;\n}\n\n.react-input-emoji--mention--list {\n  background-color: #fafafa;\n  border: 1px solid #eaeaea;\n  border-radius: 4px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  gap: 5px;\n  flex-direction: column;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  left: 0;\n}\n\n.react-input-emoji--mention--item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 5px 10px;\n  background-color: transparent;\n  width: 100%;\n  margin: 0;\n  border: 0;\n}\n\n.react-input-emoji--mention--item__selected {\n  background-color: #eeeeee;\n}\n\n.react-input-emoji--mention--item--img {\n  width: 34px;\n  height: 34px;\n  border-radius: 50%;\n}\n\n.react-input-emoji--mention--item--name {\n  font-size: 16px;\n  color: #333;\n}\n\n.react-input-emoji--mention--item--name__selected {\n  color: green;\n}\n\n.react-input-emoji--mention--text {\n  color: #039be5;\n}\n\n.react-input-emoji--mention--loading {\n  background-color: #fafafa;\n  border: 1px solid #eaeaea;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 0;\n}\n\n.react-input-emoji--mention--loading--spinner,\n.react-input-emoji--mention--loading--spinner::after {\n  border-radius: 50%;\n  width: 10em;\n  height: 10em;\n}\n\n.react-input-emoji--mention--loading--spinner {\n  margin: 1px auto;\n  font-size: 2px;\n  position: relative;\n  text-indent: -9999em;\n  border-top: 1.1em solid rgba(0, 0, 0, 0.1);\n  border-right: 1.1em solid rgba(0, 0, 0, 0.1);\n  border-bottom: 1.1em solid rgba(0, 0, 0, 0.1);\n  border-left: 1.1em solid rgba(0, 0, 0, 0.4);\n  transform: translateZ(0);\n  animation: load8 1.1s infinite linear;\n}\n\n@keyframes load8 {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes slidein {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
+var css_248z$1 = ".react-input-emoji--container {\n  color: #4b4b4b;\n  text-rendering: optimizeLegibility;\n  background-color: #fff;\n  border: 1px solid #fff;\n  border-radius: 21px;\n  margin: 5px 10px;\n  box-sizing: border-box;\n  flex: 1 1 auto;\n  font-size: 15px;\n  font-family: sans-serif;\n  font-weight: 400;\n  line-height: 20px;\n  min-height: 20px;\n  min-width: 0;\n  outline: none;\n  width: inherit;\n  will-change: width;\n  vertical-align: baseline;\n  border: 1px solid #eaeaea;\n  margin-right: 0;\n}\n\n.react-input-emoji--wrapper {\n  display: flex;\n  overflow: hidden;\n  flex: 1;\n  position: relative;\n  padding-right: 0;\n  vertical-align: baseline;\n  outline: none;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\n.react-input-emoji--input {\n  font-weight: 400;\n  max-height: 100px;\n  min-height: 20px;\n  outline: none;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: relative;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  z-index: 1;\n  width: 100%;\n  user-select: text;\n  padding: 9px 12px 11px;\n  text-align: left;\n}\n\n.react-input-emoji--input img {\n  vertical-align: middle;\n  width: 18px !important;\n  height: 18px !important;\n  display: inline !important;\n  margin-left: 1px;\n  margin-right: 1px;\n}\n\n.react-input-emoji--overlay {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 9;\n}\n\n.react-input-emoji--placeholder {\n  color: #a0a0a0;\n  pointer-events: none;\n  position: absolute;\n  user-select: none;\n  z-index: 2;\n  left: 16px;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  width: calc(100% - 22px);\n}\n\n.react-input-emoji--button {\n  position: relative;\n  display: block;\n  text-align: center;\n  padding: 0 10px;\n  overflow: hidden;\n  transition: color 0.1s ease-out;\n  margin: 0;\n  box-shadow: none;\n  background: none;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.react-input-emoji--button svg {\n  fill: #858585;\n}\n\n.react-input-emoji--button__show svg {\n  fill: #128b7e;\n}\n\n.react-emoji {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n}\n\n.react-emoji-picker--container {\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.react-emoji-picker--wrapper {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  height: 357px;\n  width: 338px;\n  overflow: hidden;\n  z-index: 10;\n}\n\n.react-emoji-picker {\n  position: absolute;\n  top: 0;\n  left: 0;\n  animation: slidein 0.1s ease-in-out;\n}\n\n.react-emoji-picker__show {\n  top: 0;\n}\n\n.react-input-emoji--mention--container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 10;\n}\n\n.react-input-emoji--mention--list {\n  background-color: #fafafa;\n  border: 1px solid #eaeaea;\n  border-radius: 4px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  gap: 5px;\n  flex-direction: column;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  left: 0;\n}\n\n.react-input-emoji--mention--item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 5px 10px;\n  background-color: transparent;\n  width: 100%;\n  margin: 0;\n  border: 0;\n}\n\n.react-input-emoji--mention--item__selected {\n  background-color: #eeeeee;\n}\n\n.react-input-emoji--mention--item--img {\n  width: 34px;\n  height: 34px;\n  border-radius: 50%;\n}\n\n.react-input-emoji--mention--item--name {\n  font-size: 16px;\n  color: #333;\n}\n\n.react-input-emoji--mention--item--name__selected {\n  color: green;\n}\n\n.react-input-emoji--mention--text {\n  color: #039be5;\n}\n\n.react-input-emoji--mention--loading {\n  background-color: #fafafa;\n  border: 1px solid #eaeaea;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 0;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n}\n\n.react-input-emoji--mention--loading--spinner,\n.react-input-emoji--mention--loading--spinner::after {\n  border-radius: 50%;\n  width: 10em;\n  height: 10em;\n}\n\n.react-input-emoji--mention--loading--spinner {\n  margin: 1px auto;\n  font-size: 2px;\n  position: relative;\n  text-indent: -9999em;\n  border-top: 1.1em solid rgba(0, 0, 0, 0.1);\n  border-right: 1.1em solid rgba(0, 0, 0, 0.1);\n  border-bottom: 1.1em solid rgba(0, 0, 0, 0.1);\n  border-left: 1.1em solid rgba(0, 0, 0, 0.4);\n  transform: translateZ(0);\n  animation: load8 1.1s infinite linear;\n}\n\n@keyframes load8 {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes slidein {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
 styleInject(css_248z$1);
 
 // @ts-check
@@ -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,10 +52489,12 @@ const EmojiPickerWrapper = ({
   }, /*#__PURE__*/React.createElement("div", {
     className: "react-emoji-picker"
   }, /*#__PURE__*/React.createElement(EmojiPicker$1, {
+    theme: theme,
     onSelectEmoji: handleSelectEmoji,
     disableRecent: disableRecent,
     customEmojis: customEmojis
   })))), /*#__PURE__*/React.createElement("button", {
+    type: "button",
     className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
     onClick: toggleShowPicker
   }, /*#__PURE__*/React.createElement("svg", {
@@ -52788,6 +52798,7 @@ const MentionUserList = ({
   }, usersFiltered.map((user, index) => /*#__PURE__*/React.createElement("li", {
     key: user.id
   }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
     onClick: handleClick(user),
     className: `react-input-emoji--mention--item${selectedUser === index ? " react-input-emoji--mention--item__selected" : ""}`,
     onMouseOver: () => setSelectedUser(index)
@@ -53054,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
@@ -53061,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
@@ -53082,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,
@@ -53279,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,
@@ -53290,6 +53306,9 @@ function InputEmoji({
 
 const InputEmojiWithRef = /*#__PURE__*/forwardRef(InputEmoji);
 InputEmojiWithRef.defaultProps = {
+  theme:
+  /** @type {const} */
+  "auto",
   height: 30,
   placeholder: "Type a message",
   borderRadius: 21,