react-input-emoji 5.8.0 → 5.9.0-beta.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/dist/index.es.js CHANGED
@@ -30,479 +30,10 @@ function styleInject(css, ref) {
30
30
  var css_248z = ".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: 435px;\n width: 352px;\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";
31
31
  styleInject(css_248z);
32
32
 
33
- function _iterableToArrayLimit(r, l) {
34
- var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
35
- if (null != t) {
36
- var e,
37
- n,
38
- i,
39
- u,
40
- a = [],
41
- f = !0,
42
- o = !1;
43
- try {
44
- if (i = (t = t.call(r)).next, 0 === l) {
45
- if (Object(t) !== t) return;
46
- f = !1;
47
- } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
48
- } catch (r) {
49
- o = !0, n = r;
50
- } finally {
51
- try {
52
- if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
53
- } finally {
54
- if (o) throw n;
55
- }
56
- }
57
- return a;
58
- }
59
- }
60
- function ownKeys(e, r) {
61
- var t = Object.keys(e);
62
- if (Object.getOwnPropertySymbols) {
63
- var o = Object.getOwnPropertySymbols(e);
64
- r && (o = o.filter(function (r) {
65
- return Object.getOwnPropertyDescriptor(e, r).enumerable;
66
- })), t.push.apply(t, o);
67
- }
68
- return t;
69
- }
70
- function _objectSpread2(e) {
71
- for (var r = 1; r < arguments.length; r++) {
72
- var t = null != arguments[r] ? arguments[r] : {};
73
- r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
74
- _defineProperty(e, r, t[r]);
75
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
76
- Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
77
- });
78
- }
79
- return e;
80
- }
81
- function _regeneratorRuntime() {
82
- _regeneratorRuntime = function () {
83
- return e;
84
- };
85
- var t,
86
- e = {},
87
- r = Object.prototype,
88
- n = r.hasOwnProperty,
89
- o = Object.defineProperty || function (t, e, r) {
90
- t[e] = r.value;
91
- },
92
- i = "function" == typeof Symbol ? Symbol : {},
93
- a = i.iterator || "@@iterator",
94
- c = i.asyncIterator || "@@asyncIterator",
95
- u = i.toStringTag || "@@toStringTag";
96
- function define(t, e, r) {
97
- return Object.defineProperty(t, e, {
98
- value: r,
99
- enumerable: !0,
100
- configurable: !0,
101
- writable: !0
102
- }), t[e];
103
- }
104
- try {
105
- define({}, "");
106
- } catch (t) {
107
- define = function (t, e, r) {
108
- return t[e] = r;
109
- };
110
- }
111
- function wrap(t, e, r, n) {
112
- var i = e && e.prototype instanceof Generator ? e : Generator,
113
- a = Object.create(i.prototype),
114
- c = new Context(n || []);
115
- return o(a, "_invoke", {
116
- value: makeInvokeMethod(t, r, c)
117
- }), a;
118
- }
119
- function tryCatch(t, e, r) {
120
- try {
121
- return {
122
- type: "normal",
123
- arg: t.call(e, r)
124
- };
125
- } catch (t) {
126
- return {
127
- type: "throw",
128
- arg: t
129
- };
130
- }
131
- }
132
- e.wrap = wrap;
133
- var h = "suspendedStart",
134
- l = "suspendedYield",
135
- f = "executing",
136
- s = "completed",
137
- y = {};
138
- function Generator() {}
139
- function GeneratorFunction() {}
140
- function GeneratorFunctionPrototype() {}
141
- var p = {};
142
- define(p, a, function () {
143
- return this;
144
- });
145
- var d = Object.getPrototypeOf,
146
- v = d && d(d(values([])));
147
- v && v !== r && n.call(v, a) && (p = v);
148
- var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
149
- function defineIteratorMethods(t) {
150
- ["next", "throw", "return"].forEach(function (e) {
151
- define(t, e, function (t) {
152
- return this._invoke(e, t);
153
- });
154
- });
155
- }
156
- function AsyncIterator(t, e) {
157
- function invoke(r, o, i, a) {
158
- var c = tryCatch(t[r], t, o);
159
- if ("throw" !== c.type) {
160
- var u = c.arg,
161
- h = u.value;
162
- return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
163
- invoke("next", t, i, a);
164
- }, function (t) {
165
- invoke("throw", t, i, a);
166
- }) : e.resolve(h).then(function (t) {
167
- u.value = t, i(u);
168
- }, function (t) {
169
- return invoke("throw", t, i, a);
170
- });
171
- }
172
- a(c.arg);
173
- }
174
- var r;
175
- o(this, "_invoke", {
176
- value: function (t, n) {
177
- function callInvokeWithMethodAndArg() {
178
- return new e(function (e, r) {
179
- invoke(t, n, e, r);
180
- });
181
- }
182
- return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
183
- }
184
- });
185
- }
186
- function makeInvokeMethod(e, r, n) {
187
- var o = h;
188
- return function (i, a) {
189
- if (o === f) throw new Error("Generator is already running");
190
- if (o === s) {
191
- if ("throw" === i) throw a;
192
- return {
193
- value: t,
194
- done: !0
195
- };
196
- }
197
- for (n.method = i, n.arg = a;;) {
198
- var c = n.delegate;
199
- if (c) {
200
- var u = maybeInvokeDelegate(c, n);
201
- if (u) {
202
- if (u === y) continue;
203
- return u;
204
- }
205
- }
206
- if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
207
- if (o === h) throw o = s, n.arg;
208
- n.dispatchException(n.arg);
209
- } else "return" === n.method && n.abrupt("return", n.arg);
210
- o = f;
211
- var p = tryCatch(e, r, n);
212
- if ("normal" === p.type) {
213
- if (o = n.done ? s : l, p.arg === y) continue;
214
- return {
215
- value: p.arg,
216
- done: n.done
217
- };
218
- }
219
- "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
220
- }
221
- };
222
- }
223
- function maybeInvokeDelegate(e, r) {
224
- var n = r.method,
225
- o = e.iterator[n];
226
- if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
227
- var i = tryCatch(o, e.iterator, r.arg);
228
- if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
229
- var a = i.arg;
230
- return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
231
- }
232
- function pushTryEntry(t) {
233
- var e = {
234
- tryLoc: t[0]
235
- };
236
- 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
237
- }
238
- function resetTryEntry(t) {
239
- var e = t.completion || {};
240
- e.type = "normal", delete e.arg, t.completion = e;
241
- }
242
- function Context(t) {
243
- this.tryEntries = [{
244
- tryLoc: "root"
245
- }], t.forEach(pushTryEntry, this), this.reset(!0);
246
- }
247
- function values(e) {
248
- if (e || "" === e) {
249
- var r = e[a];
250
- if (r) return r.call(e);
251
- if ("function" == typeof e.next) return e;
252
- if (!isNaN(e.length)) {
253
- var o = -1,
254
- i = function next() {
255
- for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
256
- return next.value = t, next.done = !0, next;
257
- };
258
- return i.next = i;
259
- }
260
- }
261
- throw new TypeError(typeof e + " is not iterable");
262
- }
263
- return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
264
- value: GeneratorFunctionPrototype,
265
- configurable: !0
266
- }), o(GeneratorFunctionPrototype, "constructor", {
267
- value: GeneratorFunction,
268
- configurable: !0
269
- }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
270
- var e = "function" == typeof t && t.constructor;
271
- return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
272
- }, e.mark = function (t) {
273
- return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
274
- }, e.awrap = function (t) {
275
- return {
276
- __await: t
277
- };
278
- }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
279
- return this;
280
- }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
281
- void 0 === i && (i = Promise);
282
- var a = new AsyncIterator(wrap(t, r, n, o), i);
283
- return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
284
- return t.done ? t.value : a.next();
285
- });
286
- }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
287
- return this;
288
- }), define(g, "toString", function () {
289
- return "[object Generator]";
290
- }), e.keys = function (t) {
291
- var e = Object(t),
292
- r = [];
293
- for (var n in e) r.push(n);
294
- return r.reverse(), function next() {
295
- for (; r.length;) {
296
- var t = r.pop();
297
- if (t in e) return next.value = t, next.done = !1, next;
298
- }
299
- return next.done = !0, next;
300
- };
301
- }, e.values = values, Context.prototype = {
302
- constructor: Context,
303
- reset: function (e) {
304
- if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
305
- },
306
- stop: function () {
307
- this.done = !0;
308
- var t = this.tryEntries[0].completion;
309
- if ("throw" === t.type) throw t.arg;
310
- return this.rval;
311
- },
312
- dispatchException: function (e) {
313
- if (this.done) throw e;
314
- var r = this;
315
- function handle(n, o) {
316
- return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
317
- }
318
- for (var o = this.tryEntries.length - 1; o >= 0; --o) {
319
- var i = this.tryEntries[o],
320
- a = i.completion;
321
- if ("root" === i.tryLoc) return handle("end");
322
- if (i.tryLoc <= this.prev) {
323
- var c = n.call(i, "catchLoc"),
324
- u = n.call(i, "finallyLoc");
325
- if (c && u) {
326
- if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
327
- if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
328
- } else if (c) {
329
- if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
330
- } else {
331
- if (!u) throw new Error("try statement without catch or finally");
332
- if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
333
- }
334
- }
335
- }
336
- },
337
- abrupt: function (t, e) {
338
- for (var r = this.tryEntries.length - 1; r >= 0; --r) {
339
- var o = this.tryEntries[r];
340
- if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
341
- var i = o;
342
- break;
343
- }
344
- }
345
- i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
346
- var a = i ? i.completion : {};
347
- return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
348
- },
349
- complete: function (t, e) {
350
- if ("throw" === t.type) throw t.arg;
351
- return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
352
- },
353
- finish: function (t) {
354
- for (var e = this.tryEntries.length - 1; e >= 0; --e) {
355
- var r = this.tryEntries[e];
356
- if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
357
- }
358
- },
359
- catch: function (t) {
360
- for (var e = this.tryEntries.length - 1; e >= 0; --e) {
361
- var r = this.tryEntries[e];
362
- if (r.tryLoc === t) {
363
- var n = r.completion;
364
- if ("throw" === n.type) {
365
- var o = n.arg;
366
- resetTryEntry(r);
367
- }
368
- return o;
369
- }
370
- }
371
- throw new Error("illegal catch attempt");
372
- },
373
- delegateYield: function (e, r, n) {
374
- return this.delegate = {
375
- iterator: values(e),
376
- resultName: r,
377
- nextLoc: n
378
- }, "next" === this.method && (this.arg = t), y;
379
- }
380
- }, e;
381
- }
382
- function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
383
- try {
384
- var info = gen[key](arg);
385
- var value = info.value;
386
- } catch (error) {
387
- reject(error);
388
- return;
389
- }
390
- if (info.done) {
391
- resolve(value);
392
- } else {
393
- Promise.resolve(value).then(_next, _throw);
394
- }
395
- }
396
- function _asyncToGenerator(fn) {
397
- return function () {
398
- var self = this,
399
- args = arguments;
400
- return new Promise(function (resolve, reject) {
401
- var gen = fn.apply(self, args);
402
- function _next(value) {
403
- asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
404
- }
405
- function _throw(err) {
406
- asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
407
- }
408
- _next(undefined);
409
- });
410
- };
411
- }
412
- function _defineProperty(obj, key, value) {
413
- key = _toPropertyKey(key);
414
- if (key in obj) {
415
- Object.defineProperty(obj, key, {
416
- value: value,
417
- enumerable: true,
418
- configurable: true,
419
- writable: true
420
- });
421
- } else {
422
- obj[key] = value;
423
- }
424
- return obj;
425
- }
426
- function _objectWithoutPropertiesLoose(source, excluded) {
427
- if (source == null) return {};
428
- var target = {};
429
- var sourceKeys = Object.keys(source);
430
- var key, i;
431
- for (i = 0; i < sourceKeys.length; i++) {
432
- key = sourceKeys[i];
433
- if (excluded.indexOf(key) >= 0) continue;
434
- target[key] = source[key];
435
- }
436
- return target;
437
- }
438
- function _objectWithoutProperties(source, excluded) {
439
- if (source == null) return {};
440
- var target = _objectWithoutPropertiesLoose(source, excluded);
441
- var key, i;
442
- if (Object.getOwnPropertySymbols) {
443
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
444
- for (i = 0; i < sourceSymbolKeys.length; i++) {
445
- key = sourceSymbolKeys[i];
446
- if (excluded.indexOf(key) >= 0) continue;
447
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
448
- target[key] = source[key];
449
- }
450
- }
451
- return target;
452
- }
453
- function _slicedToArray(arr, i) {
454
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
455
- }
456
- function _toConsumableArray(arr) {
457
- return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
458
- }
459
- function _arrayWithoutHoles(arr) {
460
- if (Array.isArray(arr)) return _arrayLikeToArray(arr);
461
- }
462
- function _arrayWithHoles(arr) {
463
- if (Array.isArray(arr)) return arr;
464
- }
465
- function _iterableToArray(iter) {
466
- if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
467
- }
468
- function _unsupportedIterableToArray(o, minLen) {
469
- if (!o) return;
470
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
471
- var n = Object.prototype.toString.call(o).slice(8, -1);
472
- if (n === "Object" && o.constructor) n = o.constructor.name;
473
- if (n === "Map" || n === "Set") return Array.from(o);
474
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
475
- }
476
- function _arrayLikeToArray(arr, len) {
477
- if (len == null || len > arr.length) len = arr.length;
478
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
479
- return arr2;
480
- }
481
- function _nonIterableSpread() {
482
- throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
483
- }
484
- function _nonIterableRest() {
485
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
486
- }
487
- function _toPrimitive(input, hint) {
488
- if (typeof input !== "object" || input === null) return input;
489
- var prim = input[Symbol.toPrimitive];
490
- if (prim !== undefined) {
491
- var res = prim.call(input, hint || "default");
492
- if (typeof res !== "object") return res;
493
- throw new TypeError("@@toPrimitive must return a primitive value.");
494
- }
495
- return (hint === "string" ? String : Number)(input);
496
- }
497
- function _toPropertyKey(arg) {
498
- var key = _toPrimitive(arg, "string");
499
- return typeof key === "symbol" ? key : String(key);
500
- }
501
-
502
33
  /* eslint-disable valid-jsdoc */
503
34
  // @ts-check
504
35
 
505
- var TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
36
+ const TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
506
37
 
507
38
  /**
508
39
  * Replace all text with emoji with an image html tag
@@ -510,11 +41,11 @@ var TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAA
510
41
  * @return {string}
511
42
  */
512
43
  function replaceAllTextEmojis(text) {
513
- var allEmojis = getAllEmojisFromText(text);
44
+ let allEmojis = getAllEmojisFromText(text);
514
45
  if (allEmojis) {
515
- allEmojis = _toConsumableArray(new Set(allEmojis)); // remove duplicates
46
+ allEmojis = [...new Set(allEmojis)]; // remove duplicates
516
47
 
517
- allEmojis.forEach(function (emoji) {
48
+ allEmojis.forEach(emoji => {
518
49
  text = replaceAll(text, emoji, getInputEmojiHTML('', emoji));
519
50
  });
520
51
  }
@@ -548,20 +79,19 @@ function getAllEmojisFromText(text) {
548
79
  * @return {string}
549
80
  */
550
81
  function getImageEmoji(emoji) {
551
- var _emojiPickerEl$shadow;
552
82
  /** @type {HTMLElement | null} */
553
- var emojiPickerEl = document.querySelector('em-emoji-picker');
83
+ const emojiPickerEl = document.querySelector('em-emoji-picker');
554
84
  if (!emojiPickerEl) {
555
- return getInputEmojiNativeHTML(emoji["native"]);
85
+ return getInputEmojiNativeHTML(emoji.native);
556
86
  }
557
87
 
558
88
  /** @type {HTMLSpanElement | null=} */
559
- var emojiSpanEl = emojiPickerEl === null || emojiPickerEl === void 0 || (_emojiPickerEl$shadow = emojiPickerEl.shadowRoot) === null || _emojiPickerEl$shadow === void 0 ? void 0 : _emojiPickerEl$shadow.querySelector("[title=\"".concat(emoji.name, "\"] > span > span"));
89
+ const emojiSpanEl = emojiPickerEl?.shadowRoot?.querySelector(`[title="${emoji.name}"] > span > span`);
560
90
  if (!emojiSpanEl) {
561
- return getInputEmojiNativeHTML(emoji["native"]);
91
+ return getInputEmojiNativeHTML(emoji.native);
562
92
  }
563
- var style = replaceAll(emojiSpanEl.style.cssText, '"', "'");
564
- return getInputEmojiHTML(style, emoji["native"]);
93
+ const style = replaceAll(emojiSpanEl.style.cssText, '"', "'");
94
+ return getInputEmojiHTML(style, emoji.native);
565
95
  }
566
96
 
567
97
  // eslint-disable-next-line valid-jsdoc
@@ -572,7 +102,7 @@ function getImageEmoji(emoji) {
572
102
  * @returns
573
103
  */
574
104
  function getInputEmojiHTML(style, emoji) {
575
- return "<img style=\"".concat(style, "; display: inline-block\" data-emoji=\"").concat(emoji, "\" src=\"").concat(TRANSPARENT_GIF, "\" />");
105
+ return `<img style="${style}; display: inline-block" data-emoji="${emoji}" src="${TRANSPARENT_GIF}" />`;
576
106
  }
577
107
 
578
108
  /**
@@ -581,7 +111,7 @@ function getInputEmojiHTML(style, emoji) {
581
111
  * @returns
582
112
  */
583
113
  function getInputEmojiNativeHTML(emoji) {
584
- return "<span class=\"width: 18px; height: 18px; display: inline-block; margin: 0 1px;\">".concat(emoji, "</span>");
114
+ return `<span class="width: 18px; height: 18px; display: inline-block; margin: 0 1px;">${emoji}</span>`;
585
115
  }
586
116
 
587
117
  /**
@@ -590,10 +120,10 @@ function getInputEmojiNativeHTML(emoji) {
590
120
  * @return {string}
591
121
  */
592
122
  function replaceAllTextEmojiToString(html) {
593
- var container = document.createElement("div");
123
+ const container = document.createElement("div");
594
124
  container.innerHTML = html;
595
- var images = Array.prototype.slice.call(container.querySelectorAll("img"));
596
- images.forEach(function (image) {
125
+ const images = Array.prototype.slice.call(container.querySelectorAll("img"));
126
+ images.forEach(image => {
597
127
  container.innerHTML = container.innerHTML.replace(image.outerHTML, image.dataset.emoji);
598
128
  });
599
129
  return container.innerHTML;
@@ -606,12 +136,12 @@ function replaceAllTextEmojiToString(html) {
606
136
  * @param {React.ClipboardEvent} event
607
137
  */
608
138
  function handleCopy(event) {
609
- var selectedText = window.getSelection();
139
+ const selectedText = window.getSelection();
610
140
  if (selectedText === null) {
611
141
  return;
612
142
  }
613
- var container = document.createElement("div");
614
- for (var i = 0, len = selectedText.rangeCount; i < len; ++i) {
143
+ let container = document.createElement("div");
144
+ for (let i = 0, len = selectedText.rangeCount; i < len; ++i) {
615
145
  container.appendChild(selectedText.getRangeAt(i).cloneContents());
616
146
  }
617
147
  container = replaceEmojiToString(container);
@@ -619,28 +149,41 @@ function handleCopy(event) {
619
149
  event.preventDefault();
620
150
  }
621
151
 
152
+ /** @type {Range|undefined} */
153
+ /** @type {Range|undefined} */
154
+ let currentRangeCached;
155
+
156
+ /**
157
+ * Caches the current text selection range
158
+ */
159
+ function cacheCurrentRange() {
160
+ const selection = window.getSelection();
161
+ if (!selection.rangeCount || selection?.anchorNode['className'] !== 'react-input-emoji--input' && selection.anchorNode.parentNode['className'] !== 'react-input-emoji--input') return;
162
+ const range = selection.getRangeAt(0);
163
+ currentRangeCached = range.cloneRange();
164
+ }
165
+
622
166
  /**
623
- *
624
- * @param {string} html
167
+ * @param {string} html - HTML string to be pasted at the caret position
625
168
  */
626
169
  function handlePasteHtmlAtCaret(html) {
627
- var sel;
628
- var range;
170
+ let sel;
171
+ let range;
629
172
  if (window.getSelection) {
630
173
  // IE9 and non-IE
631
174
  sel = window.getSelection();
632
175
  if (sel === null) return;
633
176
  if (sel.getRangeAt && sel.rangeCount) {
634
- range = sel.getRangeAt(0);
177
+ range = currentRangeCached ?? sel.getRangeAt(0);
635
178
  range.deleteContents();
636
179
 
637
180
  // Range.createContextualFragment() would be useful here but is
638
181
  // non-standard and not supported in all browsers (IE9, for one)
639
- var el = document.createElement("div");
182
+ const el = document.createElement("div");
640
183
  el.innerHTML = html;
641
- var frag = document.createDocumentFragment();
642
- var node;
643
- var lastNode;
184
+ const frag = document.createDocumentFragment();
185
+ let node;
186
+ let lastNode;
644
187
  while (node = el.firstChild) {
645
188
  lastNode = frag.appendChild(node);
646
189
  }
@@ -649,6 +192,7 @@ function handlePasteHtmlAtCaret(html) {
649
192
  // Preserve the selection
650
193
  if (lastNode) {
651
194
  range = range.cloneRange();
195
+ currentRangeCached = range;
652
196
  range.setStartAfter(lastNode);
653
197
  range.collapse(true);
654
198
  sel.removeAllRanges();
@@ -664,8 +208,8 @@ function handlePasteHtmlAtCaret(html) {
664
208
  * @return {HTMLDivElement}
665
209
  */
666
210
  function replaceEmojiToString(container) {
667
- var images = Array.prototype.slice.call(container.querySelectorAll("img"));
668
- images.forEach(function (image) {
211
+ const images = Array.prototype.slice.call(container.querySelectorAll("img"));
212
+ images.forEach(image => {
669
213
  image.outerHTML = image.dataset.emoji;
670
214
  });
671
215
  return container;
@@ -676,11 +220,12 @@ function replaceEmojiToString(container) {
676
220
  * @param {{text: string, html: string}} props
677
221
  * @return {number}
678
222
  */
679
- function totalCharacters(_ref2) {
680
- var text = _ref2.text,
681
- html = _ref2.html;
682
- var textCount = text.length;
683
- var emojisCount = (html.match(/<img/g) || []).length;
223
+ function totalCharacters({
224
+ text,
225
+ html
226
+ }) {
227
+ const textCount = text.length;
228
+ const emojisCount = (html.match(/<img/g) || []).length;
684
229
  return textCount + emojisCount;
685
230
  }
686
231
  /**
@@ -689,12 +234,12 @@ function totalCharacters(_ref2) {
689
234
  * @return {string}
690
235
  */
691
236
  function removeHtmlExceptBr(inputDiv) {
692
- var temp = inputDiv.innerHTML.replaceAll(/<br\s*\/?>/gi, "[BR]"); // temporarily replace <br> with placeholder
693
- var tempContainer = document.createElement("div");
237
+ const temp = inputDiv.innerHTML.replaceAll(/<br\s*\/?>/gi, "[BR]"); // temporarily replace <br> with placeholder
238
+ const tempContainer = document.createElement("div");
694
239
  tempContainer.innerHTML = temp;
695
- var stripped = tempContainer.innerText; // strip all html tags
696
- var _final = stripped.replaceAll(/\[BR\]/gi, "</br>"); // replace placeholders with <br>
697
- return _final;
240
+ const stripped = tempContainer.innerText; // strip all html tags
241
+ const final = stripped.replaceAll(/\[BR\]/gi, "</br>"); // replace placeholders with <br>
242
+ return final;
698
243
  }
699
244
 
700
245
  /**
@@ -703,8 +248,8 @@ function removeHtmlExceptBr(inputDiv) {
703
248
  * @returns
704
249
  */
705
250
  function getSelectionStart$1(range) {
706
- var node = range.startContainer;
707
- var offset = range.startOffset;
251
+ let node = range.startContainer;
252
+ let offset = range.startOffset;
708
253
 
709
254
  // Handle cases where the selection start node is not a text node
710
255
  if (node.nodeType !== Node.TEXT_NODE) {
@@ -721,8 +266,8 @@ function getSelectionStart$1(range) {
721
266
  offset = 0;
722
267
  }
723
268
  return {
724
- node: node,
725
- offset: offset
269
+ node,
270
+ offset
726
271
  };
727
272
  }
728
273
 
@@ -731,13 +276,13 @@ function getSelectionStart$1(range) {
731
276
  * @return {Object} cursor
732
277
  */
733
278
  function getCursor() {
734
- var selection = window.getSelection();
735
- var range = selection.getRangeAt(0);
736
- var selectionStart = getSelectionStart$1(range);
279
+ const selection = window.getSelection();
280
+ const range = selection.getRangeAt(0);
281
+ const selectionStart = getSelectionStart$1(range);
737
282
  return {
738
- selection: selection,
739
- range: range,
740
- selectionStart: selectionStart
283
+ selection,
284
+ range,
285
+ selectionStart
741
286
  };
742
287
  }
743
288
 
@@ -745,30 +290,31 @@ function getCursor() {
745
290
  *
746
291
  */
747
292
  function addLineBreak() {
748
- var _getCursor = getCursor(),
749
- selection = _getCursor.selection,
750
- range = _getCursor.range,
751
- selectionStart = _getCursor.selectionStart;
293
+ const {
294
+ selection,
295
+ range,
296
+ selectionStart
297
+ } = getCursor();
752
298
 
753
299
  // If cursor is at the end of the text content, add one more line break
754
300
  if (selection.isCollapsed && selectionStart.offset === selectionStart.node.textContent.length) {
755
- var br = document.createElement("br");
301
+ const br = document.createElement("br");
756
302
  range.insertNode(br);
757
303
  range.setStartAfter(br);
758
304
  range.setEndAfter(br);
759
305
  selection.removeAllRanges();
760
306
  selection.addRange(range);
761
- var br2 = document.createElement("br");
307
+ const br2 = document.createElement("br");
762
308
  range.insertNode(br2);
763
309
  range.setStartAfter(br2);
764
310
  range.setEndAfter(br2);
765
311
  selection.removeAllRanges();
766
312
  selection.addRange(range);
767
313
  } else {
768
- var _br = document.createElement("br");
769
- range.insertNode(_br);
770
- range.setStartAfter(_br);
771
- range.setEndAfter(_br);
314
+ const br = document.createElement("br");
315
+ range.insertNode(br);
316
+ range.setStartAfter(br);
317
+ range.setEndAfter(br);
772
318
  selection.removeAllRanges();
773
319
  selection.addRange(range);
774
320
  // Set cursor position right before the first letter after the line break
@@ -987,7 +533,7 @@ var reactEasyEmoji = function reactEasyEmoji(element, optionsOrFn) {
987
533
  var emoji = reactEasyEmoji;
988
534
 
989
535
  // @ts-check
990
- var EMOJI_REGEX = new RegExp(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/g);
536
+ const EMOJI_REGEX = new RegExp(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/g);
991
537
 
992
538
  /**
993
539
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
@@ -1000,17 +546,17 @@ var EMOJI_REGEX = new RegExp(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\
1000
546
  */
1001
547
  function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
1002
548
  /** @type {React.MutableRefObject<SanitizeFn[]>} */
1003
- var sanitizeFnsRef = useRef([]);
1004
- var sanitizedTextRef = useRef("");
549
+ const sanitizeFnsRef = useRef([]);
550
+ const sanitizedTextRef = useRef("");
1005
551
 
1006
552
  /** @type {(fn: SanitizeFn) => void} */
1007
- var addSanitizeFn = useCallback(function (fn) {
553
+ const addSanitizeFn = useCallback(fn => {
1008
554
  sanitizeFnsRef.current.push(fn);
1009
555
  }, []);
1010
556
 
1011
557
  /** @type {(html: string) => string} */
1012
- var sanitize = useCallback(function (html) {
1013
- var result = sanitizeFnsRef.current.reduce(function (acc, fn) {
558
+ const sanitize = useCallback(html => {
559
+ let result = sanitizeFnsRef.current.reduce((acc, fn) => {
1014
560
  return fn(acc);
1015
561
  }, html);
1016
562
  result = replaceAllHtmlToString(result, shouldReturn);
@@ -1021,9 +567,9 @@ function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
1021
567
  return result;
1022
568
  }, [shouldReturn, shouldConvertEmojiToImage]);
1023
569
  return {
1024
- addSanitizeFn: addSanitizeFn,
1025
- sanitize: sanitize,
1026
- sanitizedTextRef: sanitizedTextRef
570
+ addSanitizeFn,
571
+ sanitize,
572
+ sanitizedTextRef
1027
573
  };
1028
574
  }
1029
575
 
@@ -1034,9 +580,9 @@ function useSanitize(shouldReturn, shouldConvertEmojiToImage) {
1034
580
  * @return {string}
1035
581
  */
1036
582
  function replaceAllHtmlToString(html, shouldReturn) {
1037
- var container = document.createElement("div");
583
+ const container = document.createElement("div");
1038
584
  container.innerHTML = html;
1039
- var text;
585
+ let text;
1040
586
  if (shouldReturn) {
1041
587
  text = removeHtmlExceptBr(container);
1042
588
  } else {
@@ -1085,35 +631,35 @@ function handleEmoji(text) {
1085
631
  *
1086
632
  * @param {Props} props
1087
633
  */
1088
- function useExpose(_ref) {
1089
- var ref = _ref.ref,
1090
- textInputRef = _ref.textInputRef,
1091
- setValue = _ref.setValue,
1092
- emitChange = _ref.emitChange,
1093
- shouldConvertEmojiToImage = _ref.shouldConvertEmojiToImage;
1094
- var _useSanitize = useSanitize(false, shouldConvertEmojiToImage),
1095
- sanitize = _useSanitize.sanitize,
1096
- sanitizedTextRef = _useSanitize.sanitizedTextRef;
1097
- useImperativeHandle(ref, function () {
1098
- return {
1099
- get value() {
1100
- return sanitizedTextRef.current;
1101
- },
1102
- set value(value) {
1103
- setValue(value);
1104
- },
1105
- focus: function focus() {
1106
- if (textInputRef.current === null) return;
1107
- textInputRef.current.focus();
1108
- },
1109
- blur: function blur() {
1110
- if (textInputRef.current !== null) {
1111
- sanitize(textInputRef.current.html);
1112
- }
1113
- emitChange();
634
+ function useExpose({
635
+ ref,
636
+ textInputRef,
637
+ setValue,
638
+ emitChange,
639
+ shouldConvertEmojiToImage
640
+ }) {
641
+ const {
642
+ sanitize,
643
+ sanitizedTextRef
644
+ } = useSanitize(false, shouldConvertEmojiToImage);
645
+ useImperativeHandle(ref, () => ({
646
+ get value() {
647
+ return sanitizedTextRef.current;
648
+ },
649
+ set value(value) {
650
+ setValue(value);
651
+ },
652
+ focus: () => {
653
+ if (textInputRef.current === null) return;
654
+ textInputRef.current.focus();
655
+ },
656
+ blur: () => {
657
+ if (textInputRef.current !== null) {
658
+ sanitize(textInputRef.current.html);
1114
659
  }
1115
- };
1116
- });
660
+ emitChange();
661
+ }
662
+ }));
1117
663
  }
1118
664
 
1119
665
  // @ts-check
@@ -1127,19 +673,19 @@ function useExpose(_ref) {
1127
673
  */
1128
674
  function useEmit(textInputRef, onResize, onChange) {
1129
675
  /** @type {React.MutableRefObject<{width: number; height: number} | null>} */
1130
- var currentSizeRef = useRef(null);
1131
- var onChangeFn = useRef(onChange);
1132
- var checkAndEmitResize = useCallback(function () {
676
+ const currentSizeRef = useRef(null);
677
+ const onChangeFn = useRef(onChange);
678
+ const checkAndEmitResize = useCallback(() => {
1133
679
  if (textInputRef.current !== null) {
1134
- var currentSize = currentSizeRef.current;
1135
- var nextSize = textInputRef.current.size;
680
+ const currentSize = currentSizeRef.current;
681
+ const nextSize = textInputRef.current.size;
1136
682
  if ((!currentSize || currentSize.width !== nextSize.width || currentSize.height !== nextSize.height) && typeof onResize === "function") {
1137
683
  onResize(nextSize);
1138
684
  }
1139
685
  currentSizeRef.current = nextSize;
1140
686
  }
1141
687
  }, [onResize, textInputRef]);
1142
- var emitChange = useCallback(function (sanitizedText) {
688
+ const emitChange = useCallback(sanitizedText => {
1143
689
  if (typeof onChangeFn.current === "function") {
1144
690
  onChangeFn.current(sanitizedText);
1145
691
  }
@@ -1147,7 +693,7 @@ function useEmit(textInputRef, onResize, onChange) {
1147
693
  checkAndEmitResize();
1148
694
  }
1149
695
  }, [checkAndEmitResize, onResize]);
1150
- useEffect(function () {
696
+ useEffect(() => {
1151
697
  if (textInputRef.current) {
1152
698
  checkAndEmitResize();
1153
699
  }
@@ -1155,7 +701,7 @@ function useEmit(textInputRef, onResize, onChange) {
1155
701
  return emitChange;
1156
702
  }
1157
703
 
1158
- var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
704
+ // @ts-check
1159
705
 
1160
706
  /**
1161
707
  * @typedef {Object} Props
@@ -1189,97 +735,96 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
1189
735
 
1190
736
  // eslint-disable-next-line valid-jsdoc
1191
737
  /** @type {React.ForwardRefRenderFunction<Ref, Props>} */
1192
- var TextInput = function TextInput(_ref, ref) {
1193
- var placeholder = _ref.placeholder,
1194
- style = _ref.style,
1195
- tabIndex = _ref.tabIndex,
1196
- className = _ref.className,
1197
- onChange = _ref.onChange,
1198
- props = _objectWithoutProperties(_ref, _excluded);
1199
- useImperativeHandle(ref, function () {
1200
- return {
1201
- appendContent: function appendContent(html) {
1202
- if (textInputRef.current) {
1203
- textInputRef.current.focus();
1204
- }
1205
- handlePasteHtmlAtCaret(html);
1206
- if (textInputRef.current) {
1207
- textInputRef.current.focus();
1208
- }
1209
- if (textInputRef.current && placeholderRef.current && replaceAllTextEmojiToString(textInputRef.current.innerHTML) === "") {
738
+ const TextInput = ({
739
+ placeholder,
740
+ style,
741
+ tabIndex,
742
+ className,
743
+ onChange,
744
+ ...props
745
+ }, ref) => {
746
+ useImperativeHandle(ref, () => ({
747
+ appendContent: html => {
748
+ if (textInputRef.current) {
749
+ textInputRef.current.focus();
750
+ }
751
+ handlePasteHtmlAtCaret(html);
752
+ if (textInputRef.current) {
753
+ textInputRef.current.focus();
754
+ }
755
+ if (textInputRef.current && placeholderRef.current && replaceAllTextEmojiToString(textInputRef.current.innerHTML) === "") {
756
+ placeholderRef.current.style.visibility = "visible";
757
+ } else if (placeholderRef.current) {
758
+ placeholderRef.current.style.visibility = "hidden";
759
+ }
760
+ if (textInputRef.current && typeof onChange === 'function') {
761
+ onChange(textInputRef.current.innerHTML);
762
+ }
763
+ },
764
+ set html(value) {
765
+ if (textInputRef.current) {
766
+ textInputRef.current.innerHTML = value;
767
+ }
768
+ if (placeholderRef.current) {
769
+ const text = replaceAllTextEmojiToString(value);
770
+ if (text === "") {
1210
771
  placeholderRef.current.style.visibility = "visible";
1211
- } else if (placeholderRef.current) {
772
+ } else {
1212
773
  placeholderRef.current.style.visibility = "hidden";
1213
774
  }
1214
- if (textInputRef.current && typeof onChange === 'function') {
1215
- onChange(textInputRef.current.innerHTML);
1216
- }
1217
- },
1218
- set html(value) {
1219
- if (textInputRef.current) {
1220
- textInputRef.current.innerHTML = value;
1221
- }
1222
- if (placeholderRef.current) {
1223
- var text = replaceAllTextEmojiToString(value);
1224
- if (text === "") {
1225
- placeholderRef.current.style.visibility = "visible";
1226
- } else {
1227
- placeholderRef.current.style.visibility = "hidden";
1228
- }
1229
- }
1230
- if (typeof onChange === 'function' && textInputRef.current) {
1231
- onChange(textInputRef.current.innerHTML);
1232
- }
1233
- },
1234
- get html() {
1235
- if (!textInputRef.current) return '';
1236
- return textInputRef.current.innerHTML;
1237
- },
1238
- get text() {
1239
- if (!textInputRef.current) return '';
1240
- return textInputRef.current.innerText;
1241
- },
1242
- get size() {
1243
- if (!textInputRef.current) {
1244
- return {
1245
- width: 0,
1246
- height: 0
1247
- };
1248
- }
775
+ }
776
+ if (typeof onChange === 'function' && textInputRef.current) {
777
+ onChange(textInputRef.current.innerHTML);
778
+ }
779
+ },
780
+ get html() {
781
+ if (!textInputRef.current) return '';
782
+ return textInputRef.current.innerHTML;
783
+ },
784
+ get text() {
785
+ if (!textInputRef.current) return '';
786
+ return textInputRef.current.innerText;
787
+ },
788
+ get size() {
789
+ if (!textInputRef.current) {
1249
790
  return {
1250
- width: textInputRef.current.offsetWidth,
1251
- height: textInputRef.current.offsetHeight
791
+ width: 0,
792
+ height: 0
1252
793
  };
1253
- },
1254
- focus: function focus() {
1255
- if (!textInputRef.current) return;
1256
- textInputRef.current.focus();
1257
794
  }
1258
- };
1259
- });
795
+ return {
796
+ width: textInputRef.current.offsetWidth,
797
+ height: textInputRef.current.offsetHeight
798
+ };
799
+ },
800
+ focus() {
801
+ if (!textInputRef.current) return;
802
+ textInputRef.current.focus();
803
+ }
804
+ }));
1260
805
 
1261
806
  /** @type {React.CSSProperties} */
1262
- var placeholderStyle = useMemo(function () {
1263
- var placeholderStyle = {};
807
+ const placeholderStyle = useMemo(() => {
808
+ const placeholderStyle = {};
1264
809
  if (style.placeholderColor) {
1265
810
  placeholderStyle.color = style.placeholderColor;
1266
811
  }
1267
812
  return placeholderStyle;
1268
- }, [style === null || style === void 0 ? void 0 : style.placeholderColor]);
813
+ }, [style?.placeholderColor]);
1269
814
 
1270
815
  /** @type {React.CSSProperties} */
1271
- var inputStyle = useMemo(function () {
1272
- var inputStyle = {};
816
+ const inputStyle = useMemo(() => {
817
+ const inputStyle = {};
1273
818
  if (style.color) {
1274
819
  inputStyle.color = style.color;
1275
820
  }
1276
821
  return inputStyle;
1277
- }, [style === null || style === void 0 ? void 0 : style.color]);
822
+ }, [style?.color]);
1278
823
 
1279
824
  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
1280
- var placeholderRef = useRef(null);
825
+ const placeholderRef = useRef(null);
1281
826
  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
1282
- var textInputRef = useRef(null);
827
+ const textInputRef = useRef(null);
1283
828
 
1284
829
  /**
1285
830
  *
@@ -1318,9 +863,9 @@ var TextInput = function TextInput(_ref, ref) {
1318
863
  */
1319
864
  function handleKeyUp(event) {
1320
865
  props.onKeyUp(event);
1321
- var input = textInputRef.current;
866
+ const input = textInputRef.current;
1322
867
  if (placeholderRef.current && input) {
1323
- var text = replaceAllTextEmojiToString(input.innerHTML);
868
+ const text = replaceAllTextEmojiToString(input.innerHTML);
1324
869
  if (text === "") {
1325
870
  placeholderRef.current.style.visibility = "visible";
1326
871
  } else {
@@ -1347,7 +892,7 @@ var TextInput = function TextInput(_ref, ref) {
1347
892
  onKeyUp: handleKeyUp,
1348
893
  tabIndex: tabIndex,
1349
894
  contentEditable: true,
1350
- className: "react-input-emoji--input".concat(className ? " ".concat(className) : ""),
895
+ className: `react-input-emoji--input${className ? ` ${className}` : ""}`,
1351
896
  onBlur: props.onBlur,
1352
897
  onCopy: props.onCopy,
1353
898
  onPaste: props.onPaste,
@@ -1355,7 +900,9 @@ var TextInput = function TextInput(_ref, ref) {
1355
900
  style: inputStyle
1356
901
  })));
1357
902
  };
1358
- var TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
903
+ const TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
904
+
905
+ // vendors
1359
906
 
1360
907
  /**
1361
908
  * @typedef {object} Props
@@ -1370,30 +917,27 @@ var TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
1370
917
  * @param {Props} props
1371
918
  * @return {JSX.Element}
1372
919
  */
1373
- function EmojiPickerButton(_ref) {
1374
- var showPicker = _ref.showPicker,
1375
- toggleShowPicker = _ref.toggleShowPicker,
1376
- buttonElement = _ref.buttonElement,
1377
- buttonRef = _ref.buttonRef;
1378
- var localButtonRef = useRef(null);
1379
- var _useState = useState(false),
1380
- _useState2 = _slicedToArray(_useState, 2),
1381
- showCustomButtonContent = _useState2[0],
1382
- setShowCustomButtonContent = _useState2[1];
1383
- useEffect(function () {
1384
- var _buttonRef$current$ch, _buttonRef$current, _buttonElement$childN, _buttonElement$childN2;
1385
- if (((_buttonRef$current$ch = buttonRef === null || buttonRef === void 0 || (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || (_buttonRef$current = _buttonRef$current.childNodes) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.length) !== null && _buttonRef$current$ch !== void 0 ? _buttonRef$current$ch : 0) > 2) {
920
+ function EmojiPickerButton({
921
+ showPicker,
922
+ toggleShowPicker,
923
+ buttonElement,
924
+ buttonRef
925
+ }) {
926
+ const localButtonRef = useRef(null);
927
+ const [showCustomButtonContent, setShowCustomButtonContent] = useState(false);
928
+ useEffect(() => {
929
+ if ((buttonRef?.current?.childNodes?.length ?? 0) > 2) {
1386
930
  localButtonRef.current.appendChild(buttonRef.current.childNodes[0]);
1387
931
  setShowCustomButtonContent(true);
1388
- } else if (((_buttonElement$childN = buttonElement === null || buttonElement === void 0 || (_buttonElement$childN2 = buttonElement.childNodes) === null || _buttonElement$childN2 === void 0 ? void 0 : _buttonElement$childN2.length) !== null && _buttonElement$childN !== void 0 ? _buttonElement$childN : 0) > 2) {
1389
- localButtonRef.current.appendChild(buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes[0]);
932
+ } else if ((buttonElement?.childNodes?.length ?? 0) > 2) {
933
+ localButtonRef.current.appendChild(buttonElement?.childNodes[0]);
1390
934
  setShowCustomButtonContent(true);
1391
935
  }
1392
- }, [buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes]);
936
+ }, [buttonElement?.childNodes]);
1393
937
  return /*#__PURE__*/React.createElement("button", {
1394
938
  ref: localButtonRef,
1395
939
  type: "button",
1396
- className: "react-input-emoji--button".concat(showPicker ? " react-input-emoji--button__show" : ""),
940
+ className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
1397
941
  onClick: toggleShowPicker
1398
942
  }, !showCustomButtonContent && /*#__PURE__*/React.createElement("svg", {
1399
943
  xmlns: "http://www.w3.org/2000/svg",
@@ -1731,6 +1275,9 @@ var $f72b75cf796873c7$export$2e2bcd8739ae039 = {
1731
1275
  };
1732
1276
  const $c84d045dcc34faf5$var$CACHE = new Map();
1733
1277
  const $c84d045dcc34faf5$var$VERSIONS = [{
1278
+ v: 15,
1279
+ emoji: "\uD83E\uDEE8"
1280
+ }, {
1734
1281
  v: 14,
1735
1282
  emoji: "\uD83E\uDEE0"
1736
1283
  }, {
@@ -1910,8 +1457,8 @@ var $b247ea80b67298d5$export$2e2bcd8739ae039 = {
1910
1457
  value: 24
1911
1458
  },
1912
1459
  emojiVersion: {
1913
- value: 14,
1914
- choices: [1, 2, 3, 4, 5, 11, 12, 12.1, 13, 13.1, 14]
1460
+ value: 15,
1461
+ choices: [1, 2, 3, 4, 5, 11, 12, 12.1, 13, 13.1, 14, 15]
1915
1462
  },
1916
1463
  exceptEmojis: {
1917
1464
  value: []
@@ -1922,7 +1469,7 @@ var $b247ea80b67298d5$export$2e2bcd8739ae039 = {
1922
1469
  },
1923
1470
  locale: {
1924
1471
  value: "en",
1925
- choices: ["en", "ar", "be", "cs", "de", "es", "fa", "fi", "fr", "hi", "it", "ja", "kr", "nl", "pl", "pt", "ru", "sa", "tr", "uk", "vi", "zh"]
1472
+ choices: ["en", "ar", "be", "cs", "de", "es", "fa", "fi", "fr", "hi", "it", "ja", "ko", "nl", "pl", "pt", "ru", "sa", "tr", "uk", "vi", "zh"]
1926
1473
  },
1927
1474
  maxFrequentRows: {
1928
1475
  value: 4
@@ -2441,8 +1988,8 @@ function $254755d3f438722f$export$2e2bcd8739ae039(props) {
2441
1988
  emoji || (emoji = ($c4d155af13ad4d4b$export$2e2bcd8739ae039).get(id || props.native));
2442
1989
  if (!emoji) return props.fallback;
2443
1990
  const emojiSkin = emoji.skins[skin - 1] || emoji.skins[0];
2444
- const imageSrc = emojiSkin.src || (props.set != "native" && !props.spritesheet ? typeof props.getImageURL === "function" ? props.getImageURL(props.set, emojiSkin.unified) : `https://cdn.jsdelivr.net/npm/emoji-datasource-${props.set}@14.0.0/img/${props.set}/64/${emojiSkin.unified}.png` : undefined);
2445
- const spritesheetSrc = typeof props.getSpritesheetURL === "function" ? props.getSpritesheetURL(props.set) : `https://cdn.jsdelivr.net/npm/emoji-datasource-${props.set}@14.0.0/img/${props.set}/sheets-256/64.png`;
1991
+ const imageSrc = emojiSkin.src || (props.set != "native" && !props.spritesheet ? typeof props.getImageURL === "function" ? props.getImageURL(props.set, emojiSkin.unified) : `https://cdn.jsdelivr.net/npm/emoji-datasource-${props.set}@15.0.1/img/${props.set}/64/${emojiSkin.unified}.png` : undefined);
1992
+ const spritesheetSrc = typeof props.getSpritesheetURL === "function" ? props.getSpritesheetURL(props.set) : `https://cdn.jsdelivr.net/npm/emoji-datasource-${props.set}@15.0.1/img/${props.set}/sheets-256/64.png`;
2446
1993
  return /*#__PURE__*/($bd9dd35321b03dd4$export$34b9dba7ce09269b)("span", {
2447
1994
  class: "emoji-mart-emoji",
2448
1995
  "data-emoji-set": props.set,
@@ -2965,6 +2512,7 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
2965
2512
  }
2966
2513
  unregister() {
2967
2514
  document.removeEventListener("click", this.handleClickOutside);
2515
+ this.darkMedia?.removeEventListener("change", this.darkMediaCallback);
2968
2516
  this.unobserve();
2969
2517
  }
2970
2518
  observe() {
@@ -3022,12 +2570,7 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
3022
2570
  if (!this.darkMedia) {
3023
2571
  this.darkMedia = matchMedia("(prefers-color-scheme: dark)");
3024
2572
  if (this.darkMedia.media.match(/^not/)) return "light";
3025
- this.darkMedia.addListener(() => {
3026
- if (this.props.theme != "auto") return;
3027
- this.setState({
3028
- theme: this.darkMedia.matches ? "dark" : "light"
3029
- });
3030
- });
2573
+ this.darkMedia.addEventListener("change", this.darkMediaCallback);
3031
2574
  }
3032
2575
  return this.darkMedia.matches ? "dark" : "light";
3033
2576
  }
@@ -3632,6 +3175,12 @@ class $89bd6bb200cc8fef$export$2e2bcd8739ae039 extends ($fb96b826c0c5f37a$export
3632
3175
  }
3633
3176
  constructor(props) {
3634
3177
  super();
3178
+ ($c770c458706daa72$export$2e2bcd8739ae039)(this, "darkMediaCallback", () => {
3179
+ if (this.props.theme != "auto") return;
3180
+ this.setState({
3181
+ theme: this.darkMedia.matches ? "dark" : "light"
3182
+ });
3183
+ });
3635
3184
  ($c770c458706daa72$export$2e2bcd8739ae039)(this, "handleClickOutside", e => {
3636
3185
  const {
3637
3186
  element: element
@@ -3840,8 +3389,9 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
3840
3389
  });
3841
3390
  }
3842
3391
 
3843
- var EMOJI_MART_DATA_URL = "https://cdn.jsdelivr.net/npm/@emoji-mart/data";
3844
- var cacheI18n = {};
3392
+ // vendors
3393
+ const EMOJI_MART_DATA_URL = "https://cdn.jsdelivr.net/npm/@emoji-mart/data";
3394
+ const cacheI18n = {};
3845
3395
 
3846
3396
  /**
3847
3397
  * @typedef {object} Props
@@ -3857,55 +3407,38 @@ var cacheI18n = {};
3857
3407
  * @param {Props} props
3858
3408
  */
3859
3409
  function EmojiPicker(props) {
3860
- var theme = props.theme,
3861
- onSelectEmoji = props.onSelectEmoji,
3862
- disableRecent = props.disableRecent,
3863
- customEmojis = props.customEmojis,
3864
- language = props.language;
3410
+ const {
3411
+ theme,
3412
+ onSelectEmoji,
3413
+ disableRecent,
3414
+ customEmojis,
3415
+ language
3416
+ } = props;
3865
3417
 
3866
3418
  /** @type {string[]} */
3867
- var categories = useMemo(function () {
3419
+ const categories = useMemo(() => {
3868
3420
  /** @type {string[]} */
3869
- var categoryies = [];
3421
+ let categoryies = [];
3870
3422
  if (!disableRecent) {
3871
3423
  categoryies.push("frequent");
3872
3424
  }
3873
- categoryies = [].concat(_toConsumableArray(categoryies), ["people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"]);
3425
+ categoryies = [...categoryies, "people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"];
3874
3426
  return categoryies;
3875
3427
  }, [disableRecent]);
3876
- var _useState = useState(undefined),
3877
- _useState2 = _slicedToArray(_useState, 2),
3878
- i18n = _useState2[0],
3879
- setI18n = _useState2[1];
3880
- useEffect(function () {
3881
- var _ref2;
3428
+ const [i18n, setI18n] = useState(undefined);
3429
+ useEffect(() => {
3882
3430
  if (!language) {
3883
- var _ref;
3884
3431
  if (cacheI18n.en) {
3885
3432
  setI18n(cacheI18n.en);
3886
3433
  return;
3887
3434
  }
3888
3435
 
3889
3436
  // @ts-ignore
3890
- fetch("".concat(EMOJI_MART_DATA_URL, "/i18n/en.json")).then(function (_x) {
3891
- return (_ref = _ref || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(data) {
3892
- var translations;
3893
- return _regeneratorRuntime().wrap(function _callee$(_context) {
3894
- while (1) switch (_context.prev = _context.next) {
3895
- case 0:
3896
- _context.next = 2;
3897
- return data.json();
3898
- case 2:
3899
- translations = _context.sent;
3900
- setI18n(translations);
3901
- cacheI18n.en = translations;
3902
- case 5:
3903
- case "end":
3904
- return _context.stop();
3905
- }
3906
- }, _callee);
3907
- }))).apply(this, arguments);
3908
- })["catch"](function (error) {
3437
+ fetch(`${EMOJI_MART_DATA_URL}/i18n/en.json`).then(async data => {
3438
+ const translations = await data.json();
3439
+ setI18n(translations);
3440
+ cacheI18n.en = translations;
3441
+ }).catch(error => {
3909
3442
  console.error("Failed to load translations:", error);
3910
3443
  });
3911
3444
  return;
@@ -3916,25 +3449,11 @@ function EmojiPicker(props) {
3916
3449
  }
3917
3450
 
3918
3451
  // @ts-ignore
3919
- fetch("".concat(EMOJI_MART_DATA_URL, "/i18n/").concat(language, ".json")).then(function (_x2) {
3920
- return (_ref2 = _ref2 || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(data) {
3921
- var translations;
3922
- return _regeneratorRuntime().wrap(function _callee2$(_context2) {
3923
- while (1) switch (_context2.prev = _context2.next) {
3924
- case 0:
3925
- _context2.next = 2;
3926
- return data.json();
3927
- case 2:
3928
- translations = _context2.sent;
3929
- setI18n(translations);
3930
- cacheI18n[language] = translations;
3931
- case 5:
3932
- case "end":
3933
- return _context2.stop();
3934
- }
3935
- }, _callee2);
3936
- }))).apply(this, arguments);
3937
- })["catch"](function (error) {
3452
+ fetch(`${EMOJI_MART_DATA_URL}/i18n/${language}.json`).then(async data => {
3453
+ const translations = await data.json();
3454
+ setI18n(translations);
3455
+ cacheI18n[language] = translations;
3456
+ }).catch(error => {
3938
3457
  console.error("Failed to load translations:", error);
3939
3458
  });
3940
3459
  }, [language]);
@@ -3970,21 +3489,20 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
3970
3489
  * @param {Props} props
3971
3490
  * @return {JSX.Element}
3972
3491
  */
3973
- function EmojiPickerContainer(_ref) {
3974
- var showPicker = _ref.showPicker,
3975
- theme = _ref.theme,
3976
- handleSelectEmoji = _ref.handleSelectEmoji,
3977
- disableRecent = _ref.disableRecent,
3978
- customEmojis = _ref.customEmojis,
3979
- position = _ref.position,
3980
- language = _ref.language;
3492
+ function EmojiPickerContainer({
3493
+ showPicker,
3494
+ theme,
3495
+ handleSelectEmoji,
3496
+ disableRecent,
3497
+ customEmojis,
3498
+ position,
3499
+ language
3500
+ }) {
3981
3501
  return /*#__PURE__*/React.createElement("div", {
3982
3502
  className: "react-emoji-picker--container"
3983
3503
  }, showPicker && /*#__PURE__*/React.createElement("div", {
3984
3504
  className: "react-emoji-picker--wrapper",
3985
- onClick: function onClick(evt) {
3986
- return evt.stopPropagation();
3987
- },
3505
+ onClick: evt => evt.stopPropagation(),
3988
3506
  style: position === 'below' ? {
3989
3507
  top: '40px'
3990
3508
  } : {}
@@ -3999,7 +3517,8 @@ function EmojiPickerContainer(_ref) {
3999
3517
  }))));
4000
3518
  }
4001
3519
 
4002
- var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
3520
+ // @ts-check
3521
+ const EMOJI_PICKER_CONTAINER_HEIGHT = 435;
4003
3522
 
4004
3523
  /**
4005
3524
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
@@ -4025,38 +3544,36 @@ var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
4025
3544
 
4026
3545
  // eslint-disable-next-line valid-jsdoc
4027
3546
  /** @type {React.FC<Props>} */
4028
- var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4029
- var theme = props.theme,
4030
- keepOpened = props.keepOpened,
4031
- disableRecent = props.disableRecent,
4032
- customEmojis = props.customEmojis,
4033
- addSanitizeFn = props.addSanitizeFn,
4034
- addPolluteFn = props.addPolluteFn,
4035
- appendContent = props.appendContent,
4036
- buttonElement = props.buttonElement,
4037
- buttonRef = props.buttonRef,
4038
- language = props.language;
4039
- var _useState = useState(false),
4040
- _useState2 = _slicedToArray(_useState, 2),
4041
- showPicker = _useState2[0],
4042
- setShowPicker = _useState2[1];
3547
+ const EmojiPickerWrapper = props => {
3548
+ const {
3549
+ theme,
3550
+ keepOpened,
3551
+ disableRecent,
3552
+ customEmojis,
3553
+ addSanitizeFn,
3554
+ addPolluteFn,
3555
+ appendContent,
3556
+ buttonElement,
3557
+ buttonRef,
3558
+ language
3559
+ } = props;
3560
+ const [showPicker, setShowPicker] = useState(false);
4043
3561
  /** @type {[HTMLDivElement | undefined, React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>]} */
4044
- var _useState3 = useState(),
4045
- _useState4 = _slicedToArray(_useState3, 2),
4046
- customButton = _useState4[0],
4047
- setCustomButton = _useState4[1];
3562
+ const [customButton, setCustomButton] = useState();
4048
3563
  /** @type {['above' | 'below' | undefined, React.Dispatch<React.SetStateAction<'above' | 'below' | undefined>>]} */
4049
- var _useState5 = useState(),
4050
- _useState6 = _slicedToArray(_useState5, 2),
4051
- emojiPickerPosition = _useState6[0],
4052
- setEmojiPickerPosition = _useState6[1];
4053
- useEffect(function () {
3564
+ const [emojiPickerPosition, setEmojiPickerPosition] = useState();
3565
+ useEffect(() => {
3566
+ if (showPicker) {
3567
+ cacheCurrentRange();
3568
+ }
3569
+ }, [showPicker]);
3570
+ useEffect(() => {
4054
3571
  addSanitizeFn(replaceAllTextEmojiToString);
4055
3572
  }, [addSanitizeFn]);
4056
- useEffect(function () {
3573
+ useEffect(() => {
4057
3574
  addPolluteFn(replaceAllTextEmojis);
4058
3575
  }, [addPolluteFn]);
4059
- useEffect(function () {
3576
+ useEffect(() => {
4060
3577
  /**
4061
3578
  *
4062
3579
  * @param {MouseEvent} event
@@ -4064,14 +3581,14 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4064
3581
  function checkClickOutside(event) {
4065
3582
  /** @type {HTMLElement} */
4066
3583
  // @ts-ignore
4067
- var element = event.target;
3584
+ const element = event.target;
4068
3585
  if (element.classList.contains("react-input-emoji--button") || element.classList.contains("react-input-emoji--button--icon")) {
4069
3586
  return;
4070
3587
  }
4071
3588
  setShowPicker(false);
4072
3589
  }
4073
3590
  document.addEventListener("click", checkClickOutside);
4074
- return function () {
3591
+ return () => {
4075
3592
  document.removeEventListener("click", checkClickOutside);
4076
3593
  };
4077
3594
  }, []);
@@ -4084,9 +3601,7 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4084
3601
  event.stopPropagation();
4085
3602
  event.preventDefault();
4086
3603
  setEmojiPickerPosition(calcTopPosition(event));
4087
- setShowPicker(function (currentShowPicker) {
4088
- return !currentShowPicker;
4089
- });
3604
+ setShowPicker(currentShowPicker => !currentShowPicker);
4090
3605
  }
4091
3606
 
4092
3607
  /**
@@ -4095,9 +3610,9 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4095
3610
  * @return {'above' | 'below'}
4096
3611
  */
4097
3612
  function calcTopPosition(event) {
4098
- var btn = event.currentTarget;
4099
- var btnRect = btn.getBoundingClientRect();
4100
- var popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT;
3613
+ const btn = event.currentTarget;
3614
+ const btnRect = btn.getBoundingClientRect();
3615
+ const popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT;
4101
3616
 
4102
3617
  // Decide to display above or below based on available space
4103
3618
  if (btnRect.top >= popoverHeight) {
@@ -4117,17 +3632,14 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4117
3632
  function handleSelectEmoji(emoji) {
4118
3633
  appendContent(getImageEmoji(emoji));
4119
3634
  if (!keepOpened) {
4120
- setShowPicker(function (currentShowPicker) {
4121
- return !currentShowPicker;
4122
- });
3635
+ setShowPicker(currentShowPicker => !currentShowPicker);
4123
3636
  }
4124
3637
  }
4125
- useEffect(function () {
4126
- var _buttonRef$current;
4127
- if (buttonRef !== null && buttonRef !== void 0 && (_buttonRef$current = buttonRef.current) !== null && _buttonRef$current !== void 0 && _buttonRef$current.style) {
3638
+ useEffect(() => {
3639
+ if (buttonRef?.current?.style) {
4128
3640
  buttonRef.current.style.position = "relative";
4129
3641
  setCustomButton(buttonRef.current);
4130
- } else if (buttonElement !== null && buttonElement !== void 0 && buttonElement.style) {
3642
+ } else if (buttonElement?.style) {
4131
3643
  buttonElement.style.position = "relative";
4132
3644
  setCustomButton(buttonElement);
4133
3645
  }
@@ -4166,16 +3678,16 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
4166
3678
  * @return {string | null}
4167
3679
  */
4168
3680
  function getTextFromAtToCaret() {
4169
- var range = getRangeFromAtToCaret();
3681
+ const range = getRangeFromAtToCaret();
4170
3682
  if (!range) return null;
4171
- var text = range.text.substring(range.begin, range.end);
3683
+ const text = range.text.substring(range.begin, range.end);
4172
3684
  return text || null;
4173
3685
  }
4174
3686
 
4175
3687
  // eslint-disable-next-line valid-jsdoc
4176
3688
  /** */
4177
3689
  function deleteTextFromAtToCaret() {
4178
- var range = getRangeFromAtToCaret();
3690
+ const range = getRangeFromAtToCaret();
4179
3691
  if (!range) return;
4180
3692
 
4181
3693
  // @ts-ignore
@@ -4187,22 +3699,24 @@ function deleteTextFromAtToCaret() {
4187
3699
  * @return {{begin: number, end: number, text: string, element: Node} | null}
4188
3700
  */
4189
3701
  function getRangeFromAtToCaret() {
4190
- var elementWithFocus = getElementWithFocus();
3702
+ const elementWithFocus = getElementWithFocus();
4191
3703
  if (!elementWithFocus) {
4192
3704
  return null;
4193
3705
  }
4194
- var element = elementWithFocus.element,
4195
- caretOffset = elementWithFocus.caretOffset;
4196
- var text = element.textContent;
4197
- var lastAt = text.lastIndexOf("@");
3706
+ const {
3707
+ element,
3708
+ caretOffset
3709
+ } = elementWithFocus;
3710
+ const text = element.textContent;
3711
+ const lastAt = text.lastIndexOf("@");
4198
3712
  if (lastAt === -1 || lastAt >= caretOffset || lastAt !== 0 && text[lastAt - 1] !== " ") {
4199
3713
  return null;
4200
3714
  }
4201
3715
  return {
4202
3716
  begin: lastAt,
4203
3717
  end: caretOffset,
4204
- text: text,
4205
- element: element
3718
+ text,
3719
+ element
4206
3720
  };
4207
3721
  }
4208
3722
 
@@ -4211,14 +3725,14 @@ function getRangeFromAtToCaret() {
4211
3725
  * @return {{element: Node, caretOffset: number}}
4212
3726
  */
4213
3727
  function getElementWithFocus() {
4214
- var element = getSelectionStart();
3728
+ const element = getSelectionStart();
4215
3729
  if (element === null) {
4216
3730
  return null;
4217
3731
  }
4218
- var caretOffset = 0;
3732
+ let caretOffset = 0;
4219
3733
  if (typeof window.getSelection != "undefined") {
4220
- var range = window.getSelection().getRangeAt(0);
4221
- var preCaretRange = range.cloneRange();
3734
+ const range = window.getSelection().getRangeAt(0);
3735
+ const preCaretRange = range.cloneRange();
4222
3736
  preCaretRange.selectNodeContents(element);
4223
3737
  preCaretRange.setEnd(range.endContainer, range.endOffset);
4224
3738
  caretOffset = preCaretRange.toString().length;
@@ -4228,16 +3742,16 @@ function getElementWithFocus() {
4228
3742
  // @ts-ignore
4229
3743
  document.selection.type != "Control") {
4230
3744
  // @ts-ignore
4231
- var textRange = document.selection.createRange();
3745
+ const textRange = document.selection.createRange();
4232
3746
  // @ts-ignore
4233
- var preCaretTextRange = document.body.createTextRange();
3747
+ const preCaretTextRange = document.body.createTextRange();
4234
3748
  preCaretTextRange.moveToElementText(element);
4235
3749
  preCaretTextRange.setEndPoint("EndToEnd", textRange);
4236
3750
  caretOffset = preCaretTextRange.text.length;
4237
3751
  }
4238
3752
  return {
4239
- element: element,
4240
- caretOffset: caretOffset
3753
+ element,
3754
+ caretOffset
4241
3755
  };
4242
3756
  }
4243
3757
 
@@ -4246,10 +3760,12 @@ function getElementWithFocus() {
4246
3760
  * @return {Node | null}
4247
3761
  */
4248
3762
  function getSelectionStart() {
4249
- var node = document.getSelection().anchorNode;
4250
- return (node === null || node === void 0 ? void 0 : node.nodeType) == 3 ? node : null;
3763
+ const node = document.getSelection().anchorNode;
3764
+ return node?.nodeType == 3 ? node : null;
4251
3765
  }
4252
3766
 
3767
+ // @ts-check
3768
+
4253
3769
  /**
4254
3770
  * @typedef {import('../types/types').MentionUser} MentionUser
4255
3771
  */
@@ -4261,98 +3777,57 @@ function getSelectionStart() {
4261
3777
  * @returns {{mentionSearchText: string | null, mentionUsers: MentionUser[], onKeyUp: (event: React.KeyboardEvent) => void, onFocus: () => void, onSelectUser: () => void, loading: boolean}}
4262
3778
  */
4263
3779
  function useMention(searchMention) {
4264
- var _ref2;
4265
- var _useState = useState(false),
4266
- _useState2 = _slicedToArray(_useState, 2),
4267
- loading = _useState2[0],
4268
- setLoading = _useState2[1];
3780
+ const [loading, setLoading] = useState(false);
4269
3781
 
4270
3782
  /** @type {[MentionUser[], React.Dispatch<React.SetStateAction<MentionUser[]>>]} */
4271
- var _useState3 = useState([]),
4272
- _useState4 = _slicedToArray(_useState3, 2),
4273
- mentionUsers = _useState4[0],
4274
- setMentionUsers = _useState4[1];
3783
+ const [mentionUsers, setMentionUsers] = useState([]);
4275
3784
 
4276
3785
  /** @type {[string | null, React.Dispatch<React.SetStateAction<string | null>>]} */
4277
- var _useState5 = useState(null),
4278
- _useState6 = _slicedToArray(_useState5, 2),
4279
- mentionSearchText = _useState6[0],
4280
- setMentionSearchText = _useState6[1];
4281
- var onSelectUser = useCallback(function () {
3786
+ const [mentionSearchText, setMentionSearchText] = useState(null);
3787
+ const onSelectUser = useCallback(() => {
4282
3788
  deleteTextFromAtToCaret();
4283
3789
  setMentionUsers([]);
4284
3790
  }, []);
4285
3791
 
4286
3792
  /** */
4287
- var checkMentionText = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
4288
- var metionText, users;
4289
- return _regeneratorRuntime().wrap(function _callee$(_context) {
4290
- while (1) switch (_context.prev = _context.next) {
4291
- case 0:
4292
- metionText = getTextFromAtToCaret();
4293
- setMentionSearchText(metionText);
4294
- if (!(metionText === null)) {
4295
- _context.next = 6;
4296
- break;
4297
- }
4298
- setMentionUsers([]);
4299
- _context.next = 12;
4300
- break;
4301
- case 6:
4302
- setLoading(true);
4303
- _context.next = 9;
4304
- return searchMention(metionText);
4305
- case 9:
4306
- users = _context.sent;
4307
- setLoading(false);
4308
- setMentionUsers(users);
4309
- case 12:
4310
- case "end":
4311
- return _context.stop();
4312
- }
4313
- }, _callee);
4314
- })), [searchMention]);
3793
+ const checkMentionText = useCallback(async () => {
3794
+ const metionText = getTextFromAtToCaret();
3795
+ setMentionSearchText(metionText);
3796
+ if (metionText === null) {
3797
+ setMentionUsers([]);
3798
+ } else {
3799
+ setLoading(true);
3800
+ const users = await searchMention(metionText);
3801
+ setLoading(false);
3802
+ setMentionUsers(users);
3803
+ }
3804
+ }, [searchMention]);
4315
3805
 
4316
3806
  /** @type {(event: React.KeyboardEvent) => void} */
4317
- var onKeyUp = useCallback(function (_x) {
4318
- return (_ref2 = _ref2 || _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
4319
- var _getElementWithFocus;
4320
- var elementWithFocus;
4321
- return _regeneratorRuntime().wrap(function _callee2$(_context2) {
4322
- while (1) switch (_context2.prev = _context2.next) {
4323
- case 0:
4324
- if (!(typeof searchMention !== "function")) {
4325
- _context2.next = 2;
4326
- break;
4327
- }
4328
- return _context2.abrupt("return");
4329
- case 2:
4330
- if (event.key === "Backspace" && (_getElementWithFocus = getElementWithFocus()) !== null && _getElementWithFocus !== void 0 && _getElementWithFocus.element.parentElement.hasAttribute("data-mention-id")) {
4331
- elementWithFocus = getElementWithFocus();
4332
- elementWithFocus.element.parentElement.remove();
4333
- } else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
4334
- checkMentionText();
4335
- }
4336
- case 3:
4337
- case "end":
4338
- return _context2.stop();
4339
- }
4340
- }, _callee2);
4341
- }))).apply(this, arguments);
3807
+ const onKeyUp = useCallback(async event => {
3808
+ if (typeof searchMention !== "function") return;
3809
+ if (event.key === "Backspace" && getElementWithFocus()?.element.parentElement.hasAttribute("data-mention-id")) {
3810
+ const elementWithFocus = getElementWithFocus();
3811
+ elementWithFocus.element.parentElement.remove();
3812
+ } else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
3813
+ checkMentionText();
3814
+ }
4342
3815
  }, [checkMentionText, searchMention]);
4343
- var onFocus = useCallback(function () {
3816
+ const onFocus = useCallback(() => {
4344
3817
  checkMentionText();
4345
3818
  }, [checkMentionText]);
4346
3819
  return {
4347
- mentionSearchText: mentionSearchText,
4348
- mentionUsers: mentionUsers,
4349
- onKeyUp: onKeyUp,
4350
- onFocus: onFocus,
4351
- onSelectUser: onSelectUser,
4352
- loading: loading
3820
+ mentionSearchText,
3821
+ mentionUsers,
3822
+ onKeyUp,
3823
+ onFocus,
3824
+ onSelectUser,
3825
+ loading
4353
3826
  };
4354
3827
  }
4355
3828
 
3829
+ // @ts-check
3830
+
4356
3831
  /**
4357
3832
  * @typedef {import('../types/types').MentionUser} MentionUser
4358
3833
  */
@@ -4375,36 +3850,32 @@ function useMention(searchMention) {
4375
3850
 
4376
3851
  // eslint-disable-next-line valid-jsdoc
4377
3852
  /** @type {React.ForwardRefRenderFunction<Ref, Props>} */
4378
- var MentionUserList = function MentionUserList(_ref, ref) {
4379
- var users = _ref.users,
4380
- mentionSearchText = _ref.mentionSearchText,
4381
- onSelect = _ref.onSelect,
4382
- addEventListener = _ref.addEventListener;
4383
- var _useState = useState(0),
4384
- _useState2 = _slicedToArray(_useState, 2),
4385
- selectedUser = _useState2[0],
4386
- setSelectedUser = _useState2[1];
4387
- useImperativeHandle(ref, function () {
4388
- return {
4389
- prevUser: function prevUser() {
4390
- setSelectedUser(function (currentSelectedUser) {
4391
- if (currentSelectedUser === 0) {
4392
- return 0;
4393
- }
4394
- return currentSelectedUser - 1;
4395
- });
4396
- },
4397
- nextUser: function nextUser() {
4398
- setSelectedUser(function (currentSelectedUser) {
4399
- if (currentSelectedUser === users.length - 1) {
4400
- return users.length - 1;
4401
- }
4402
- return currentSelectedUser + 1;
4403
- });
4404
- }
4405
- };
4406
- });
4407
- useEffect(function () {
3853
+ const MentionUserList = ({
3854
+ users,
3855
+ mentionSearchText,
3856
+ onSelect,
3857
+ addEventListener
3858
+ }, ref) => {
3859
+ const [selectedUser, setSelectedUser] = useState(0);
3860
+ useImperativeHandle(ref, () => ({
3861
+ prevUser: () => {
3862
+ setSelectedUser(currentSelectedUser => {
3863
+ if (currentSelectedUser === 0) {
3864
+ return 0;
3865
+ }
3866
+ return currentSelectedUser - 1;
3867
+ });
3868
+ },
3869
+ nextUser: () => {
3870
+ setSelectedUser(currentSelectedUser => {
3871
+ if (currentSelectedUser === users.length - 1) {
3872
+ return users.length - 1;
3873
+ }
3874
+ return currentSelectedUser + 1;
3875
+ });
3876
+ }
3877
+ }));
3878
+ useEffect(() => {
4408
3879
  setSelectedUser(0);
4409
3880
  }, [users]);
4410
3881
 
@@ -4415,20 +3886,20 @@ var MentionUserList = function MentionUserList(_ref, ref) {
4415
3886
  * @return {string}
4416
3887
  */
4417
3888
  function getMentionSelectedNameEl(selectedText, rest) {
4418
- return "<span class=\"react-input-emoji--mention--item--name__selected\" data-testid=\"metion-selected-word\">".concat(selectedText, "</span>").concat(rest);
3889
+ return `<span class="react-input-emoji--mention--item--name__selected" data-testid="metion-selected-word">${selectedText}</span>${rest}`;
4419
3890
  }
4420
3891
 
4421
3892
  /** @type {(MentionUser & {nameHtml: string})[]} */
4422
- var usersFiltered = useMemo(function () {
4423
- var searchText = mentionSearchText ? mentionSearchText.substring(1).toLocaleLowerCase() : "";
4424
- return users.map(function (user) {
4425
- var nameHtml = user.name;
3893
+ const usersFiltered = useMemo(() => {
3894
+ const searchText = mentionSearchText ? mentionSearchText.substring(1).toLocaleLowerCase() : "";
3895
+ return users.map(user => {
3896
+ let nameHtml = user.name;
4426
3897
  if (mentionSearchText && mentionSearchText.length > 1) {
4427
3898
  if (user.name.toLowerCase().startsWith(searchText)) {
4428
3899
  nameHtml = getMentionSelectedNameEl(user.name.substring(0, searchText.length), user.name.substring(searchText.length));
4429
3900
  } else {
4430
- var names = user.name.split(" ");
4431
- nameHtml = names.map(function (name) {
3901
+ const names = user.name.split(" ");
3902
+ nameHtml = names.map(name => {
4432
3903
  if (name.toLocaleLowerCase().startsWith(searchText)) {
4433
3904
  return getMentionSelectedNameEl(name.substring(0, searchText.length), name.substring(searchText.length));
4434
3905
  }
@@ -4436,9 +3907,10 @@ var MentionUserList = function MentionUserList(_ref, ref) {
4436
3907
  }).join(" ");
4437
3908
  }
4438
3909
  }
4439
- return _objectSpread2(_objectSpread2({}, user), {}, {
4440
- nameHtml: nameHtml
4441
- });
3910
+ return {
3911
+ ...user,
3912
+ nameHtml
3913
+ };
4442
3914
  });
4443
3915
  }, [mentionSearchText, users]);
4444
3916
 
@@ -4449,47 +3921,45 @@ var MentionUserList = function MentionUserList(_ref, ref) {
4449
3921
  * @returns {(event: React.MouseEvent) => void} event
4450
3922
  */
4451
3923
  function handleClick(user) {
4452
- return function (event) {
3924
+ return event => {
4453
3925
  event.stopPropagation();
4454
3926
  event.preventDefault();
4455
3927
  onSelect(user);
4456
3928
  };
4457
3929
  }
4458
- useEffect(function () {
4459
- var unsubscribe = addEventListener("enter", function (event) {
3930
+ useEffect(() => {
3931
+ const unsubscribe = addEventListener("enter", event => {
4460
3932
  event.stopPropagation();
4461
3933
  event.preventDefault();
4462
3934
  onSelect(usersFiltered[selectedUser]);
4463
3935
  });
4464
- return function () {
3936
+ return () => {
4465
3937
  unsubscribe();
4466
3938
  };
4467
3939
  }, [addEventListener, onSelect, selectedUser, usersFiltered]);
4468
3940
  return /*#__PURE__*/React.createElement("ul", {
4469
3941
  className: "react-input-emoji--mention--list",
4470
3942
  "data-testid": "mention-user-list"
4471
- }, usersFiltered.map(function (user, index) {
4472
- return /*#__PURE__*/React.createElement("li", {
4473
- key: user.id
4474
- }, /*#__PURE__*/React.createElement("button", {
4475
- type: "button",
4476
- onClick: handleClick(user),
4477
- className: "react-input-emoji--mention--item".concat(selectedUser === index ? " react-input-emoji--mention--item__selected" : ""),
4478
- onMouseOver: function onMouseOver() {
4479
- return setSelectedUser(index);
4480
- }
4481
- }, /*#__PURE__*/React.createElement("img", {
4482
- className: "react-input-emoji--mention--item--img",
4483
- src: user.image
4484
- }), /*#__PURE__*/React.createElement("div", {
4485
- className: "react-input-emoji--mention--item--name",
4486
- dangerouslySetInnerHTML: {
4487
- __html: user.nameHtml
4488
- }
4489
- })));
4490
- }));
3943
+ }, usersFiltered.map((user, index) => /*#__PURE__*/React.createElement("li", {
3944
+ key: user.id
3945
+ }, /*#__PURE__*/React.createElement("button", {
3946
+ type: "button",
3947
+ onClick: handleClick(user),
3948
+ className: `react-input-emoji--mention--item${selectedUser === index ? " react-input-emoji--mention--item__selected" : ""}`,
3949
+ onMouseOver: () => setSelectedUser(index)
3950
+ }, /*#__PURE__*/React.createElement("img", {
3951
+ className: "react-input-emoji--mention--item--img",
3952
+ src: user.image
3953
+ }), /*#__PURE__*/React.createElement("div", {
3954
+ className: "react-input-emoji--mention--item--name",
3955
+ dangerouslySetInnerHTML: {
3956
+ __html: user.nameHtml
3957
+ }
3958
+ })))));
4491
3959
  };
4492
- var MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
3960
+ const MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
3961
+
3962
+ // @ts-check
4493
3963
 
4494
3964
  /**
4495
3965
  * @typedef {import('../types/types').MentionUser} MetionUser
@@ -4513,55 +3983,54 @@ var MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
4513
3983
 
4514
3984
  // eslint-disable-next-line valid-jsdoc
4515
3985
  /** @type {React.FC<Props>} */
4516
- var MentionWrapper = function MentionWrapper(_ref) {
4517
- var searchMention = _ref.searchMention,
4518
- addEventListener = _ref.addEventListener,
4519
- appendContent = _ref.appendContent,
4520
- addSanitizeFn = _ref.addSanitizeFn;
3986
+ const MentionWrapper = ({
3987
+ searchMention,
3988
+ addEventListener,
3989
+ appendContent,
3990
+ addSanitizeFn
3991
+ }) => {
4521
3992
  /** @type {React.MutableRefObject<import('./mention-user-list').Ref | null>} */
4522
- var metionUserListRef = useRef(null);
4523
- var _useState = useState(false),
4524
- _useState2 = _slicedToArray(_useState, 2),
4525
- showUserList = _useState2[0],
4526
- setShowUserList = _useState2[1];
4527
- var _useMention = useMention(searchMention),
4528
- mentionSearchText = _useMention.mentionSearchText,
4529
- mentionUsers = _useMention.mentionUsers,
4530
- loading = _useMention.loading,
4531
- onKeyUp = _useMention.onKeyUp,
4532
- onFocus = _useMention.onFocus,
4533
- onSelectUser = _useMention.onSelectUser;
4534
- useEffect(function () {
4535
- addSanitizeFn(function (html) {
4536
- var container = document.createElement("div");
3993
+ const metionUserListRef = useRef(null);
3994
+ const [showUserList, setShowUserList] = useState(false);
3995
+ const {
3996
+ mentionSearchText,
3997
+ mentionUsers,
3998
+ loading,
3999
+ onKeyUp,
4000
+ onFocus,
4001
+ onSelectUser
4002
+ } = useMention(searchMention);
4003
+ useEffect(() => {
4004
+ addSanitizeFn(html => {
4005
+ const container = document.createElement("div");
4537
4006
  container.innerHTML = html;
4538
- var mentionsEl = Array.prototype.slice.call(container.querySelectorAll(".react-input-emoji--mention--text"));
4539
- mentionsEl.forEach(function (mentionEl) {
4540
- container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, "@[".concat(mentionEl.dataset.mentionName, "](userId:").concat(mentionEl.dataset.mentionId, ")"));
4007
+ const mentionsEl = Array.prototype.slice.call(container.querySelectorAll(".react-input-emoji--mention--text"));
4008
+ mentionsEl.forEach(mentionEl => {
4009
+ container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, `@[${mentionEl.dataset.mentionName}](userId:${mentionEl.dataset.mentionId})`);
4541
4010
  });
4542
4011
  return container.innerHTML;
4543
4012
  });
4544
4013
  }, [addSanitizeFn]);
4545
- useEffect(function () {
4014
+ useEffect(() => {
4546
4015
  setShowUserList(mentionUsers.length > 0);
4547
4016
  }, [mentionUsers]);
4548
- useEffect(function () {
4017
+ useEffect(() => {
4549
4018
  /** */
4550
4019
  function checkClickOutside() {
4551
4020
  setShowUserList(false);
4552
4021
  }
4553
4022
  document.addEventListener("click", checkClickOutside);
4554
- return function () {
4023
+ return () => {
4555
4024
  document.removeEventListener("click", checkClickOutside);
4556
4025
  };
4557
4026
  }, []);
4558
- useEffect(function () {
4559
- var unsubscribe = addEventListener("keyUp", onKeyUp);
4560
- return function () {
4027
+ useEffect(() => {
4028
+ const unsubscribe = addEventListener("keyUp", onKeyUp);
4029
+ return () => {
4561
4030
  unsubscribe();
4562
4031
  };
4563
4032
  }, [addEventListener, onKeyUp]);
4564
- useEffect(function () {
4033
+ useEffect(() => {
4565
4034
  /**
4566
4035
  *
4567
4036
  * @param {React.KeyboardEvent} event
@@ -4574,30 +4043,30 @@ var MentionWrapper = function MentionWrapper(_ref) {
4574
4043
  break;
4575
4044
  }
4576
4045
  }
4577
- var unsubscribe = addEventListener("keyDown", handleKeyDown);
4578
- return function () {
4046
+ const unsubscribe = addEventListener("keyDown", handleKeyDown);
4047
+ return () => {
4579
4048
  unsubscribe();
4580
4049
  };
4581
4050
  }, [addEventListener]);
4582
- useEffect(function () {
4583
- var unsubscribe = addEventListener("focus", onFocus);
4584
- return function () {
4051
+ useEffect(() => {
4052
+ const unsubscribe = addEventListener("focus", onFocus);
4053
+ return () => {
4585
4054
  unsubscribe();
4586
4055
  };
4587
4056
  }, [addEventListener, onFocus]);
4588
- useEffect(function () {
4057
+ useEffect(() => {
4589
4058
  if (showUserList) {
4590
- var unsubscribeArrowUp = addEventListener("arrowUp", function (event) {
4059
+ const unsubscribeArrowUp = addEventListener("arrowUp", event => {
4591
4060
  event.stopPropagation();
4592
4061
  event.preventDefault();
4593
4062
  metionUserListRef.current.prevUser();
4594
4063
  });
4595
- var unsubscribeArrowDown = addEventListener("arrowDown", function (event) {
4064
+ const unsubscribeArrowDown = addEventListener("arrowDown", event => {
4596
4065
  event.stopPropagation();
4597
4066
  event.preventDefault();
4598
4067
  metionUserListRef.current.nextUser();
4599
4068
  });
4600
- return function () {
4069
+ return () => {
4601
4070
  unsubscribeArrowUp();
4602
4071
  unsubscribeArrowDown();
4603
4072
  };
@@ -4610,7 +4079,7 @@ var MentionWrapper = function MentionWrapper(_ref) {
4610
4079
  */
4611
4080
  function handleSelect(user) {
4612
4081
  onSelectUser();
4613
- appendContent("<span class=\"react-input-emoji--mention--text\" data-mention-id=\"".concat(user.id, "\" data-mention-name=\"").concat(user.name, "\">@").concat(user.name, "</span> "));
4082
+ appendContent(`<span class="react-input-emoji--mention--text" data-mention-id="${user.id}" data-mention-name="${user.name}">@${user.name}</span> `);
4614
4083
  }
4615
4084
  return /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement("div", {
4616
4085
  className: "react-input-emoji--mention--container"
@@ -4620,9 +4089,7 @@ var MentionWrapper = function MentionWrapper(_ref) {
4620
4089
  className: "react-input-emoji--mention--loading--spinner"
4621
4090
  }, "Loading..."))) : showUserList && /*#__PURE__*/React.createElement("div", {
4622
4091
  className: "react-input-emoji--mention--container",
4623
- onClick: function onClick(evt) {
4624
- return evt.stopPropagation();
4625
- }
4092
+ onClick: evt => evt.stopPropagation()
4626
4093
  }, /*#__PURE__*/React.createElement(MentionUserListWithRef, {
4627
4094
  ref: metionUserListRef,
4628
4095
  mentionSearchText: mentionSearchText,
@@ -4641,20 +4108,16 @@ var MentionWrapper = function MentionWrapper(_ref) {
4641
4108
  */
4642
4109
  function createObserver() {
4643
4110
  /** @type {import('../types/types').Listerner<T>[]} */
4644
- var listeners = [];
4111
+ let listeners = [];
4645
4112
  return {
4646
- subscribe: function subscribe(listener) {
4113
+ subscribe: listener => {
4647
4114
  listeners.push(listener);
4648
- return function () {
4649
- listeners = listeners.filter(function (l) {
4650
- return l !== listener;
4651
- });
4115
+ return () => {
4116
+ listeners = listeners.filter(l => l !== listener);
4652
4117
  };
4653
4118
  },
4654
- publish: function publish(event) {
4655
- listeners.forEach(function (listener) {
4656
- return listener(event);
4657
- });
4119
+ publish: event => {
4120
+ listeners.forEach(listener => listener(event));
4658
4121
  },
4659
4122
  get currentListerners() {
4660
4123
  return listeners;
@@ -4672,28 +4135,26 @@ function createObserver() {
4672
4135
  /** */
4673
4136
  function useEventListeners() {
4674
4137
  /** @type {TextInputListeners} */
4675
- var listeners = useMemo(function () {
4676
- return {
4677
- keyDown: createObserver(),
4678
- keyUp: createObserver(),
4679
- arrowUp: createObserver(),
4680
- arrowDown: createObserver(),
4681
- enter: createObserver(),
4682
- focus: createObserver(),
4683
- blur: createObserver()
4684
- };
4685
- }, []);
4138
+ const listeners = useMemo(() => ({
4139
+ keyDown: createObserver(),
4140
+ keyUp: createObserver(),
4141
+ arrowUp: createObserver(),
4142
+ arrowDown: createObserver(),
4143
+ enter: createObserver(),
4144
+ focus: createObserver(),
4145
+ blur: createObserver()
4146
+ }), []);
4686
4147
 
4687
4148
  /**
4688
4149
  * @template {keyof TextInputListeners} T, K
4689
4150
  * @type {(event: keyof TextInputListeners, fn: import('../types/types').Listerner<any>) => () => void}
4690
4151
  */
4691
- var addEventListener = useCallback(function (event, fn) {
4152
+ const addEventListener = useCallback((event, fn) => {
4692
4153
  return listeners[event].subscribe(fn);
4693
4154
  }, [listeners]);
4694
4155
  return {
4695
- addEventListener: addEventListener,
4696
- listeners: listeners
4156
+ addEventListener,
4157
+ listeners
4697
4158
  };
4698
4159
  }
4699
4160
 
@@ -4707,23 +4168,23 @@ function useEventListeners() {
4707
4168
  /** */
4708
4169
  function usePollute() {
4709
4170
  /** @type {React.MutableRefObject<PolluteFn[]>} */
4710
- var polluteFnsRef = useRef([]);
4171
+ const polluteFnsRef = useRef([]);
4711
4172
 
4712
4173
  /** @type {(fn: PolluteFn) => void} */
4713
- var addPolluteFn = useCallback(function (fn) {
4174
+ const addPolluteFn = useCallback(fn => {
4714
4175
  polluteFnsRef.current.push(fn);
4715
4176
  }, []);
4716
4177
 
4717
4178
  /** @type {(html: string) => string} */
4718
- var pollute = useCallback(function (text) {
4719
- var result = polluteFnsRef.current.reduce(function (acc, fn) {
4179
+ const pollute = useCallback(text => {
4180
+ const result = polluteFnsRef.current.reduce((acc, fn) => {
4720
4181
  return fn(acc);
4721
4182
  }, text);
4722
4183
  return result;
4723
4184
  }, []);
4724
4185
  return {
4725
- addPolluteFn: addPolluteFn,
4726
- pollute: pollute
4186
+ addPolluteFn,
4187
+ pollute
4727
4188
  };
4728
4189
  }
4729
4190
 
@@ -4779,72 +4240,77 @@ function usePollute() {
4779
4240
  * @return {JSX.Element}
4780
4241
  */
4781
4242
  function InputEmoji(props, ref) {
4782
- var onChange = props.onChange,
4783
- onEnter = props.onEnter,
4784
- onResize = props.onResize,
4785
- onClick = props.onClick,
4786
- onFocus = props.onFocus,
4787
- onBlur = props.onBlur,
4788
- onKeyDown = props.onKeyDown,
4789
- theme = props.theme,
4790
- cleanOnEnter = props.cleanOnEnter,
4791
- placeholder = props.placeholder,
4792
- maxLength = props.maxLength,
4793
- keepOpened = props.keepOpened,
4794
- inputClass = props.inputClass,
4795
- disableRecent = props.disableRecent,
4796
- tabIndex = props.tabIndex,
4797
- value = props.value,
4798
- customEmojis = props.customEmojis,
4799
- language = props.language,
4800
- searchMention = props.searchMention,
4801
- buttonElement = props.buttonElement,
4802
- buttonRef = props.buttonRef,
4803
- shouldReturn = props.shouldReturn,
4804
- shouldConvertEmojiToImage = props.shouldConvertEmojiToImage,
4805
- borderRadius = props.borderRadius,
4806
- borderColor = props.borderColor,
4807
- fontSize = props.fontSize,
4808
- fontFamily = props.fontFamily,
4809
- background = props.background,
4810
- placeholderColor = props.placeholderColor,
4811
- color = props.color;
4243
+ const {
4244
+ onChange,
4245
+ onEnter,
4246
+ onResize,
4247
+ onClick,
4248
+ onFocus,
4249
+ onBlur,
4250
+ onKeyDown,
4251
+ theme,
4252
+ cleanOnEnter,
4253
+ placeholder,
4254
+ maxLength,
4255
+ keepOpened,
4256
+ inputClass,
4257
+ disableRecent,
4258
+ tabIndex,
4259
+ value,
4260
+ customEmojis,
4261
+ language,
4262
+ searchMention,
4263
+ buttonElement,
4264
+ buttonRef,
4265
+ shouldReturn,
4266
+ shouldConvertEmojiToImage,
4267
+ // style
4268
+ borderRadius,
4269
+ borderColor,
4270
+ fontSize,
4271
+ fontFamily,
4272
+ background,
4273
+ placeholderColor,
4274
+ color
4275
+ } = props;
4812
4276
 
4813
4277
  /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
4814
- var textInputRef = useRef(null);
4815
- var _useEventListeners = useEventListeners(),
4816
- addEventListener = _useEventListeners.addEventListener,
4817
- listeners = _useEventListeners.listeners;
4818
- var _useSanitize = useSanitize(shouldReturn, shouldConvertEmojiToImage),
4819
- addSanitizeFn = _useSanitize.addSanitizeFn,
4820
- sanitize = _useSanitize.sanitize,
4821
- sanitizedTextRef = _useSanitize.sanitizedTextRef;
4822
- var _usePollute = usePollute(),
4823
- addPolluteFn = _usePollute.addPolluteFn,
4824
- pollute = _usePollute.pollute;
4825
- var updateHTML = useCallback(function () {
4826
- var nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
4278
+ const textInputRef = useRef(null);
4279
+ const {
4280
+ addEventListener,
4281
+ listeners
4282
+ } = useEventListeners();
4283
+ const {
4284
+ addSanitizeFn,
4285
+ sanitize,
4286
+ sanitizedTextRef
4287
+ } = useSanitize(shouldReturn, shouldConvertEmojiToImage);
4288
+ const {
4289
+ addPolluteFn,
4290
+ pollute
4291
+ } = usePollute();
4292
+ const updateHTML = useCallback((nextValue = "") => {
4827
4293
  if (textInputRef.current === null) return;
4828
4294
  textInputRef.current.html = replaceAllTextEmojis(nextValue);
4829
4295
  sanitizedTextRef.current = nextValue;
4830
4296
  }, [sanitizedTextRef]);
4831
- var setValue = useCallback(
4297
+ const setValue = useCallback(
4832
4298
  /**
4833
4299
  *
4834
4300
  * @param {string} value
4835
4301
  */
4836
- function (value) {
4302
+ value => {
4837
4303
  updateHTML(value);
4838
4304
  }, [updateHTML]);
4839
- var emitChange = useEmit(textInputRef, onResize, onChange);
4305
+ const emitChange = useEmit(textInputRef, onResize, onChange);
4840
4306
  useExpose({
4841
- ref: ref,
4842
- setValue: setValue,
4843
- textInputRef: textInputRef,
4844
- emitChange: emitChange,
4845
- shouldConvertEmojiToImage: shouldConvertEmojiToImage
4307
+ ref,
4308
+ setValue,
4309
+ textInputRef,
4310
+ emitChange,
4311
+ shouldConvertEmojiToImage
4846
4312
  });
4847
- useEffect(function () {
4313
+ useEffect(() => {
4848
4314
  if (sanitizedTextRef.current !== value) {
4849
4315
  setValue(value);
4850
4316
  }
@@ -4854,7 +4320,7 @@ function InputEmoji(props, ref) {
4854
4320
  // updateHTML();
4855
4321
  // }, [updateHTML]);
4856
4322
 
4857
- useEffect(function () {
4323
+ useEffect(() => {
4858
4324
  /**
4859
4325
  * Handle keydown event
4860
4326
  * @param {React.KeyboardEvent} event
@@ -4866,7 +4332,7 @@ function InputEmoji(props, ref) {
4866
4332
  }
4867
4333
  if (event.key === "Enter" && textInputRef.current) {
4868
4334
  event.preventDefault();
4869
- var text = sanitize(textInputRef.current.html);
4335
+ const text = sanitize(textInputRef.current.html);
4870
4336
  emitChange(sanitizedTextRef.current);
4871
4337
  if (typeof onEnter === "function" && listeners.enter.currentListerners.length === 0) {
4872
4338
  onEnter(text);
@@ -4884,12 +4350,12 @@ function InputEmoji(props, ref) {
4884
4350
  }
4885
4351
  return true;
4886
4352
  }
4887
- var unsubscribe = addEventListener("keyDown", handleKeydown);
4888
- return function () {
4353
+ const unsubscribe = addEventListener("keyDown", handleKeydown);
4354
+ return () => {
4889
4355
  unsubscribe();
4890
4356
  };
4891
4357
  }, [addEventListener, cleanOnEnter, emitChange, listeners.enter.currentListerners.length, maxLength, onEnter, onKeyDown, sanitize, sanitizedTextRef, updateHTML]);
4892
- useEffect(function () {
4358
+ useEffect(() => {
4893
4359
  /** */
4894
4360
  function handleFocus() {
4895
4361
  if (typeof onClick === "function") {
@@ -4899,20 +4365,20 @@ function InputEmoji(props, ref) {
4899
4365
  onFocus();
4900
4366
  }
4901
4367
  }
4902
- var unsubscribe = addEventListener("focus", handleFocus);
4903
- return function () {
4368
+ const unsubscribe = addEventListener("focus", handleFocus);
4369
+ return () => {
4904
4370
  unsubscribe();
4905
4371
  };
4906
4372
  }, [addEventListener, onClick, onFocus]);
4907
- useEffect(function () {
4373
+ useEffect(() => {
4908
4374
  /** */
4909
4375
  function handleBlur() {
4910
4376
  if (typeof onBlur === "function") {
4911
4377
  onBlur();
4912
4378
  }
4913
4379
  }
4914
- var unsubscribe = addEventListener("blur", handleBlur);
4915
- return function () {
4380
+ const unsubscribe = addEventListener("blur", handleBlur);
4381
+ return () => {
4916
4382
  unsubscribe();
4917
4383
  };
4918
4384
  }, [addEventListener, onBlur]);
@@ -4947,7 +4413,7 @@ function InputEmoji(props, ref) {
4947
4413
  */
4948
4414
  function handlePaste(event) {
4949
4415
  event.preventDefault();
4950
- var content;
4416
+ let content;
4951
4417
  if (event.clipboardData) {
4952
4418
  content = event.clipboardData.getData("text/plain");
4953
4419
  content = pollute(content);
@@ -4975,13 +4441,13 @@ function InputEmoji(props, ref) {
4975
4441
  onEnter: listeners.enter.publish,
4976
4442
  placeholder: placeholder,
4977
4443
  style: {
4978
- borderRadius: borderRadius,
4979
- borderColor: borderColor,
4980
- fontSize: fontSize,
4981
- fontFamily: fontFamily,
4982
- background: background,
4983
- placeholderColor: placeholderColor,
4984
- color: color
4444
+ borderRadius,
4445
+ borderColor,
4446
+ fontSize,
4447
+ fontFamily,
4448
+ background,
4449
+ placeholderColor,
4450
+ color
4985
4451
  },
4986
4452
  tabIndex: tabIndex,
4987
4453
  className: inputClass,
@@ -4999,7 +4465,7 @@ function InputEmoji(props, ref) {
4999
4465
  language: language
5000
4466
  }));
5001
4467
  }
5002
- var InputEmojiWithRef = /*#__PURE__*/forwardRef(InputEmoji);
4468
+ const InputEmojiWithRef = /*#__PURE__*/forwardRef(InputEmoji);
5003
4469
  InputEmojiWithRef.defaultProps = {
5004
4470
  theme: /** @type {const} */"auto",
5005
4471
  height: 30,