react-input-emoji 4.0.7 → 4.1.0

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/dist/index.js CHANGED
@@ -37,7 +37,7 @@ function styleInject(css, ref) {
37
37
  }
38
38
  }
39
39
 
40
- 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";
40
+ 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";
41
41
  styleInject(css_248z$1);
42
42
 
43
43
  // @ts-check
@@ -52353,6 +52353,7 @@ styleInject(css_248z);
52353
52353
  // vendors
52354
52354
  /**
52355
52355
  * @typedef {object} Props
52356
+ * @property {'light' | 'dark' | 'auto'} theme
52356
52357
  * @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
52357
52358
  * @property {boolean} disableRecent
52358
52359
  * @property {object[]} customEmojis
@@ -52364,12 +52365,14 @@ styleInject(css_248z);
52364
52365
  * @return {React.FC}
52365
52366
  */
52366
52367
 
52367
- function EmojiPicker({
52368
- onSelectEmoji,
52369
- disableRecent,
52370
- customEmojis
52371
- }) {
52372
- const excluePicker = React.useMemo(() => {
52368
+ function EmojiPicker(props) {
52369
+ const {
52370
+ theme,
52371
+ onSelectEmoji,
52372
+ disableRecent,
52373
+ customEmojis
52374
+ } = props;
52375
+ const excludePicker = React.useMemo(() => {
52373
52376
  /** @type import("emoji-mart").CategoryName[] */
52374
52377
  const exclude = [];
52375
52378
 
@@ -52380,16 +52383,18 @@ function EmojiPicker({
52380
52383
  return exclude;
52381
52384
  }, [disableRecent]);
52382
52385
  return /*#__PURE__*/React__default['default'].createElement(Picker, {
52386
+ theme: theme,
52387
+ set: "apple",
52383
52388
  showPreview: false,
52384
52389
  showSkinTones: false,
52385
- set: "apple",
52386
52390
  onSelect: onSelectEmoji,
52387
- exclude: excluePicker,
52391
+ exclude: excludePicker,
52388
52392
  custom: customEmojis
52389
52393
  });
52390
52394
  }
52391
52395
 
52392
52396
  EmojiPicker.propTypes = {
52397
+ theme: PropTypes__default['default'].oneOf(['light', 'dark', 'auto']),
52393
52398
  onSelectEmoji: PropTypes__default['default'].func,
52394
52399
  disableRecent: PropTypes__default['default'].bool,
52395
52400
  customEmojis: PropTypes__default['default'].array
@@ -52407,7 +52412,8 @@ var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
52407
52412
 
52408
52413
  /**
52409
52414
  * @typedef {Object} Props
52410
- * @property {boolean} keepOpenend
52415
+ * @property {'light' | 'dark' | 'auto'} theme
52416
+ * @property {boolean} keepOpened
52411
52417
  * @property {boolean} disableRecent
52412
52418
  * @property {object[]=} customEmojis
52413
52419
  * @property {(fn: SanitizeFn) => void} addSanitizeFn
@@ -52418,14 +52424,16 @@ var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
52418
52424
 
52419
52425
  /** @type {React.FC<Props>} */
52420
52426
 
52421
- const EmojiPickerWrapper = ({
52422
- keepOpenend,
52423
- disableRecent,
52424
- customEmojis,
52425
- addSanitizeFn,
52426
- addPolluteFn,
52427
- appendContent
52428
- }) => {
52427
+ const EmojiPickerWrapper = props => {
52428
+ const {
52429
+ theme,
52430
+ keepOpened,
52431
+ disableRecent,
52432
+ customEmojis,
52433
+ addSanitizeFn,
52434
+ addPolluteFn,
52435
+ appendContent
52436
+ } = props;
52429
52437
  const [showPicker, setShowPicker] = React.useState(false);
52430
52438
  React.useEffect(() => {
52431
52439
  addSanitizeFn(replaceAllTextEmojiToString);
@@ -52475,7 +52483,7 @@ const EmojiPickerWrapper = ({
52475
52483
  function handleSelectEmoji(emoji) {
52476
52484
  appendContent(getImageEmoji(emoji));
52477
52485
 
52478
- if (!keepOpenend) {
52486
+ if (!keepOpened) {
52479
52487
  setShowPicker(currentShowPicker => !currentShowPicker);
52480
52488
  }
52481
52489
  }
@@ -52488,10 +52496,12 @@ const EmojiPickerWrapper = ({
52488
52496
  }, /*#__PURE__*/React__default['default'].createElement("div", {
52489
52497
  className: "react-emoji-picker"
52490
52498
  }, /*#__PURE__*/React__default['default'].createElement(EmojiPicker$1, {
52499
+ theme: theme,
52491
52500
  onSelectEmoji: handleSelectEmoji,
52492
52501
  disableRecent: disableRecent,
52493
52502
  customEmojis: customEmojis
52494
52503
  })))), /*#__PURE__*/React__default['default'].createElement("button", {
52504
+ type: "button",
52495
52505
  className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
52496
52506
  onClick: toggleShowPicker
52497
52507
  }, /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -52795,6 +52805,7 @@ const MentionUserList = ({
52795
52805
  }, usersFiltered.map((user, index) => /*#__PURE__*/React__default['default'].createElement("li", {
52796
52806
  key: user.id
52797
52807
  }, /*#__PURE__*/React__default['default'].createElement("button", {
52808
+ type: "button",
52798
52809
  onClick: handleClick(user),
52799
52810
  className: `react-input-emoji--mention--item${selectedUser === index ? " react-input-emoji--mention--item__selected" : ""}`,
52800
52811
  onMouseOver: () => setSelectedUser(index)
@@ -53061,6 +53072,7 @@ function usePollute() {
53061
53072
  * @typedef {object} Props
53062
53073
  * @property {string} value
53063
53074
  * @property {(value: string) => void} onChange
53075
+ * @property {"light" | "dark" | "auto"} theme
53064
53076
  * @property {boolean} cleanOnEnter
53065
53077
  * @property {(text: string) => void} onEnter
53066
53078
  * @property {string} placeholder
@@ -53068,7 +53080,7 @@ function usePollute() {
53068
53080
  * @property {() => void} onClick
53069
53081
  * @property {() => void} onFocus
53070
53082
  * @property {number} maxLength
53071
- * @property {boolean} keepOpenend
53083
+ * @property {boolean} keepOpened
53072
53084
  * @property {(event: KeyboardEvent) => void} onKeyDown
53073
53085
  * @property {string} inputClass
53074
53086
  * @property {boolean} disableRecent
@@ -53089,30 +53101,33 @@ function usePollute() {
53089
53101
  * @return {JSX.Element}
53090
53102
  */
53091
53103
 
53092
- function InputEmoji({
53093
- onChange,
53094
- onEnter,
53095
- onResize,
53096
- onClick,
53097
- onFocus,
53098
- onKeyDown,
53099
- cleanOnEnter,
53100
- placeholder,
53101
- maxLength,
53102
- keepOpenend,
53103
- inputClass,
53104
- disableRecent,
53105
- tabIndex,
53106
- value,
53107
- customEmojis,
53108
- searchMention,
53109
- // style
53110
- borderRadius,
53111
- borderColor,
53112
- fontSize,
53113
- fontFamily
53114
- }, ref) {
53104
+ function InputEmoji(props, ref) {
53105
+ const {
53106
+ onChange,
53107
+ onEnter,
53108
+ onResize,
53109
+ onClick,
53110
+ onFocus,
53111
+ onKeyDown,
53112
+ theme,
53113
+ cleanOnEnter,
53114
+ placeholder,
53115
+ maxLength,
53116
+ keepOpened,
53117
+ inputClass,
53118
+ disableRecent,
53119
+ tabIndex,
53120
+ value,
53121
+ customEmojis,
53122
+ searchMention,
53123
+ // style
53124
+ borderRadius,
53125
+ borderColor,
53126
+ fontSize,
53127
+ fontFamily
53128
+ } = props;
53115
53129
  /** @type {React.MutableRefObject<import('./text-input').Ref>} */
53130
+
53116
53131
  const textInputRef = React.useRef(null);
53117
53132
  const {
53118
53133
  addEventListener,
@@ -53286,7 +53301,8 @@ function InputEmoji({
53286
53301
  className: inputClass,
53287
53302
  onChange: handleTextInputChange
53288
53303
  }), /*#__PURE__*/React__default['default'].createElement(EmojiPickerWrapper, {
53289
- keepOpenend: keepOpenend,
53304
+ theme: theme,
53305
+ keepOpened: keepOpened,
53290
53306
  disableRecent: disableRecent,
53291
53307
  customEmojis: customEmojis,
53292
53308
  addSanitizeFn: addSanitizeFn,
@@ -53297,6 +53313,9 @@ function InputEmoji({
53297
53313
 
53298
53314
  const InputEmojiWithRef = /*#__PURE__*/React.forwardRef(InputEmoji);
53299
53315
  InputEmojiWithRef.defaultProps = {
53316
+ theme:
53317
+ /** @type {const} */
53318
+ "auto",
53300
53319
  height: 30,
53301
53320
  placeholder: "Type a message",
53302
53321
  borderRadius: 21,