react-input-emoji 5.1.1 → 5.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -62,7 +62,8 @@ export default function Example() {
62
62
  | `borderColor` | string | "#EAEAEA" | The border color of the input container. |
63
63
  | `fontSize` | number | 15 | The font size of the placeholder and input container. |
64
64
  | `fontFamily` | string | "sans-serif" | The font family of the placeholder and input container. |
65
- | `shouldReturn` | boolean | - | Allows the user to use the `Shift + Enter` or `Ctrl + Enter` keyboard shortcut to create a new line. |
65
+ | `shouldReturn` | boolean | - | Allows the user to use the `Shift + Enter` or `Ctrl + Enter` keyboard shortcut to create a new line. | |
66
+ | `buttonElement` | HTMLElement | - | An HTMLElement that, when clicked, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
66
67
 
67
68
  ## License
68
69
 
package/dist/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState, useMemo, memo } from 'react';
1
+ import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState, memo, useMemo } from 'react';
2
2
  import ReactDOM from 'react-dom';
3
3
  import t from 'prop-types';
4
4
 
@@ -3925,6 +3925,7 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
3925
3925
  * @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
3926
3926
  * @property {boolean} disableRecent
3927
3927
  * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
3928
+ * @property {import('../types/types').Languages=} language
3928
3929
  */
3929
3930
 
3930
3931
  /**
@@ -3937,7 +3938,8 @@ function EmojiPicker(props) {
3937
3938
  var theme = props.theme,
3938
3939
  onSelectEmoji = props.onSelectEmoji,
3939
3940
  disableRecent = props.disableRecent,
3940
- customEmojis = props.customEmojis;
3941
+ customEmojis = props.customEmojis,
3942
+ language = props.language;
3941
3943
  /** @type {string[]} */
3942
3944
 
3943
3945
  var categories = useMemo(function () {
@@ -3951,6 +3953,13 @@ function EmojiPicker(props) {
3951
3953
  categoryies = [].concat(_toConsumableArray(categoryies), ["people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"]);
3952
3954
  return categoryies;
3953
3955
  }, [disableRecent]);
3956
+ var i18n = useMemo(function () {
3957
+ if (!language) {
3958
+ return undefined;
3959
+ }
3960
+
3961
+ return require("@emoji-mart/data/i18n/".concat(language !== null && language !== void 0 ? language : 'en', ".json"));
3962
+ }, [language]);
3954
3963
  return /*#__PURE__*/React.createElement($e5534fc185f7111e$export$2e2bcd8739ae039, {
3955
3964
  data: undefined,
3956
3965
  theme: theme,
@@ -3958,16 +3967,11 @@ function EmojiPicker(props) {
3958
3967
  onEmojiSelect: onSelectEmoji,
3959
3968
  custom: customEmojis,
3960
3969
  categories: categories,
3961
- set: "apple"
3970
+ set: "apple",
3971
+ i18n: i18n
3962
3972
  });
3963
3973
  }
3964
3974
 
3965
- EmojiPicker.propTypes = {
3966
- theme: t.oneOf(["light", "dark", "auto"]),
3967
- onSelectEmoji: t.func,
3968
- disableRecent: t.bool,
3969
- customEmojis: t.array
3970
- };
3971
3975
  var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
3972
3976
 
3973
3977
  /**
@@ -3977,6 +3981,8 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
3977
3981
  * @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
3978
3982
  * @property {boolean} disableRecent
3979
3983
  * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
3984
+ * @property {('above' | 'below')=} position
3985
+ * @property {import('../types/types').Languages=} language
3980
3986
  */
3981
3987
 
3982
3988
  /**
@@ -3990,24 +3996,31 @@ function EmojiPickerContainer(_ref) {
3990
3996
  theme = _ref.theme,
3991
3997
  handleSelectEmoji = _ref.handleSelectEmoji,
3992
3998
  disableRecent = _ref.disableRecent,
3993
- customEmojis = _ref.customEmojis;
3999
+ customEmojis = _ref.customEmojis,
4000
+ position = _ref.position,
4001
+ language = _ref.language;
3994
4002
  return /*#__PURE__*/React.createElement("div", {
3995
4003
  className: "react-emoji-picker--container"
3996
4004
  }, showPicker && /*#__PURE__*/React.createElement("div", {
3997
4005
  className: "react-emoji-picker--wrapper",
3998
4006
  onClick: function onClick(evt) {
3999
4007
  return evt.stopPropagation();
4000
- }
4008
+ },
4009
+ style: position === 'below' ? {
4010
+ top: '40px'
4011
+ } : {}
4001
4012
  }, /*#__PURE__*/React.createElement("div", {
4002
4013
  className: "react-emoji-picker"
4003
4014
  }, /*#__PURE__*/React.createElement(EmojiPicker$1, {
4004
4015
  theme: theme,
4005
4016
  onSelectEmoji: handleSelectEmoji,
4006
4017
  disableRecent: disableRecent,
4007
- customEmojis: customEmojis
4018
+ customEmojis: customEmojis,
4019
+ language: language
4008
4020
  }))));
4009
4021
  }
4010
4022
 
4023
+ var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
4011
4024
  /**
4012
4025
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
4013
4026
  */
@@ -4026,6 +4039,7 @@ function EmojiPickerContainer(_ref) {
4026
4039
  * @property {(fn: PolluteFn) => void} addPolluteFn
4027
4040
  * @property {(html: string) => void} appendContent
4028
4041
  * @property {HTMLDivElement=} buttonElement
4042
+ * @property {import('../types/types').Languages=} language
4029
4043
  */
4030
4044
  // eslint-disable-next-line valid-jsdoc
4031
4045
 
@@ -4039,7 +4053,8 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4039
4053
  addSanitizeFn = props.addSanitizeFn,
4040
4054
  addPolluteFn = props.addPolluteFn,
4041
4055
  appendContent = props.appendContent,
4042
- buttonElement = props.buttonElement;
4056
+ buttonElement = props.buttonElement,
4057
+ language = props.language;
4043
4058
 
4044
4059
  var _useState = useState(false),
4045
4060
  _useState2 = _slicedToArray(_useState, 2),
@@ -4052,6 +4067,13 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4052
4067
  _useState4 = _slicedToArray(_useState3, 2),
4053
4068
  customButton = _useState4[0],
4054
4069
  setCustomButton = _useState4[1];
4070
+ /** @type {['above' | 'below' | undefined, React.Dispatch<React.SetStateAction<'above' | 'below' | undefined>>]} */
4071
+
4072
+
4073
+ var _useState5 = useState(),
4074
+ _useState6 = _slicedToArray(_useState5, 2),
4075
+ emojiPickerPosition = _useState6[0],
4076
+ setEmojiPickerPosition = _useState6[1];
4055
4077
 
4056
4078
  useEffect(function () {
4057
4079
  addSanitizeFn(replaceAllTextEmojiToString);
@@ -4089,9 +4111,30 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4089
4111
  function toggleShowPicker(event) {
4090
4112
  event.stopPropagation();
4091
4113
  event.preventDefault();
4114
+ setEmojiPickerPosition(calcTopPosition(event));
4092
4115
  setShowPicker(function (currentShowPicker) {
4093
4116
  return !currentShowPicker;
4094
4117
  });
4118
+ }
4119
+ /**
4120
+ *
4121
+ * @param {React.MouseEvent} event
4122
+ * @return {'above' | 'below'}
4123
+ */
4124
+
4125
+
4126
+ function calcTopPosition(event) {
4127
+ var btn = event.currentTarget;
4128
+ var btnRect = btn.getBoundingClientRect();
4129
+ var popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT; // Decide to display above or below based on available space
4130
+
4131
+ if (btnRect.top >= popoverHeight) {
4132
+ // Display above
4133
+ return 'above';
4134
+ } else {
4135
+ // Display below
4136
+ return 'below';
4137
+ }
4095
4138
  } // eslint-disable-next-line valid-jsdoc
4096
4139
 
4097
4140
  /**
@@ -4121,7 +4164,9 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4121
4164
  theme: theme,
4122
4165
  handleSelectEmoji: handleSelectEmoji,
4123
4166
  disableRecent: disableRecent,
4124
- customEmojis: customEmojis
4167
+ customEmojis: customEmojis,
4168
+ position: emojiPickerPosition,
4169
+ language: language
4125
4170
  }), /*#__PURE__*/React.createElement(EmojiPickerButton, {
4126
4171
  showPicker: showPicker,
4127
4172
  toggleShowPicker: toggleShowPicker,
@@ -4131,7 +4176,9 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4131
4176
  theme: theme,
4132
4177
  handleSelectEmoji: handleSelectEmoji,
4133
4178
  disableRecent: disableRecent,
4134
- customEmojis: customEmojis
4179
+ customEmojis: customEmojis,
4180
+ position: emojiPickerPosition,
4181
+ language: language
4135
4182
  }), /*#__PURE__*/React.createElement(EmojiPickerButton, {
4136
4183
  showPicker: showPicker,
4137
4184
  toggleShowPicker: toggleShowPicker
@@ -4791,6 +4838,7 @@ function usePollute() {
4791
4838
  * @property {number} fontSize
4792
4839
  * @property {string} fontFamily
4793
4840
  * @property {{id: string; name: string; emojis: {id: string; name: string; keywords: string[], skins: {src: string}[]}}[]=} customEmojis
4841
+ * @property {import('./types/types').Languages=} language
4794
4842
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
4795
4843
  * @property {HTMLDivElement=} buttonElement
4796
4844
  */
@@ -4821,6 +4869,7 @@ function InputEmoji(props, ref) {
4821
4869
  tabIndex = props.tabIndex,
4822
4870
  value = props.value,
4823
4871
  customEmojis = props.customEmojis,
4872
+ language = props.language,
4824
4873
  searchMention = props.searchMention,
4825
4874
  buttonElement = props.buttonElement,
4826
4875
  borderRadius = props.borderRadius,
@@ -5029,7 +5078,8 @@ function InputEmoji(props, ref) {
5029
5078
  addSanitizeFn: addSanitizeFn,
5030
5079
  addPolluteFn: addPolluteFn,
5031
5080
  appendContent: appendContent,
5032
- buttonElement: buttonElement
5081
+ buttonElement: buttonElement,
5082
+ language: language
5033
5083
  }));
5034
5084
  }
5035
5085
 
@@ -5046,7 +5096,8 @@ InputEmojiWithRef.defaultProps = {
5046
5096
  fontFamily: "sans-serif",
5047
5097
  tabIndex: 0,
5048
5098
  shouldReturn: false,
5049
- customEmojis: []
5099
+ customEmojis: [],
5100
+ language: undefined
5050
5101
  };
5051
5102
 
5052
5103
  export { InputEmojiWithRef as default };