react-input-emoji 4.0.7 → 4.1.0

Sign up to get free protection for your applications and to get access to all the features.
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,