react-input-emoji 4.2.0 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js CHANGED
@@ -1,4 +1,5 @@
1
- import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useMemo, memo, useState } from 'react';
1
+ import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState, useMemo, memo } from 'react';
2
+ import ReactDOM from 'react-dom';
2
3
  import PropTypes from 'prop-types';
3
4
 
4
5
  function styleInject(css, ref) {
@@ -529,6 +530,51 @@ const TextInput = ({
529
530
 
530
531
  const TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
531
532
 
533
+ /* eslint-disable react/prop-types */
534
+ /**
535
+ * @typedef {object} Props
536
+ * @property {boolean} showPicker
537
+ * @property {(event: React.MouseEvent) => void} toggleShowPicker
538
+ * @property {HTMLDivElement=} buttonElement
539
+ */
540
+
541
+ /**
542
+ * Emoji Picker Button Component
543
+ * @param {Props} props
544
+ * @return {JSX.Element}
545
+ */
546
+
547
+ function EmojiPickerButton({
548
+ showPicker,
549
+ toggleShowPicker,
550
+ buttonElement
551
+ }) {
552
+ const buttonRef = useRef(null);
553
+ const [showCustomButtonContent, setShowCustomButtonContent] = useState(false);
554
+ useEffect(() => {
555
+ if ((buttonElement?.childNodes?.length ?? 0) > 2) {
556
+ buttonRef.current.appendChild(buttonElement?.childNodes[0]);
557
+ setShowCustomButtonContent(true);
558
+ }
559
+ }, [buttonElement?.childNodes]);
560
+ return /*#__PURE__*/React.createElement("button", {
561
+ ref: buttonRef,
562
+ type: "button",
563
+ className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
564
+ onClick: toggleShowPicker
565
+ }, !showCustomButtonContent && /*#__PURE__*/React.createElement("svg", {
566
+ xmlns: "http://www.w3.org/2000/svg",
567
+ viewBox: "0 0 24 24",
568
+ width: "24",
569
+ height: "24",
570
+ className: "react-input-emoji--button--icon"
571
+ }, /*#__PURE__*/React.createElement("path", {
572
+ d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"
573
+ }), /*#__PURE__*/React.createElement("path", {
574
+ d: "M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"
575
+ })));
576
+ }
577
+
532
578
  var compressed = true;
533
579
  var categories$1 = [
534
580
  {
@@ -52381,7 +52427,7 @@ styleInject(css_248z);
52381
52427
  * @property {'light' | 'dark' | 'auto'} theme
52382
52428
  * @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
52383
52429
  * @property {boolean} disableRecent
52384
- * @property {object[]} customEmojis
52430
+ * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
52385
52431
  */
52386
52432
 
52387
52433
  /**
@@ -52426,6 +52472,43 @@ EmojiPicker.propTypes = {
52426
52472
  };
52427
52473
  var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
52428
52474
 
52475
+ /**
52476
+ * @typedef {object} Props
52477
+ * @property {boolean} showPicker
52478
+ * @property {'light' | 'dark' | 'auto'} theme
52479
+ * @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
52480
+ * @property {boolean} disableRecent
52481
+ * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
52482
+ */
52483
+
52484
+ /**
52485
+ * Emoji Picker Button Component
52486
+ * @param {Props} props
52487
+ * @return {JSX.Element}
52488
+ */
52489
+
52490
+ function EmojiPickerContainer({
52491
+ showPicker,
52492
+ theme,
52493
+ handleSelectEmoji,
52494
+ disableRecent,
52495
+ customEmojis
52496
+ }) {
52497
+ return /*#__PURE__*/React.createElement("div", {
52498
+ className: "react-emoji-picker--container"
52499
+ }, showPicker && /*#__PURE__*/React.createElement("div", {
52500
+ className: "react-emoji-picker--wrapper",
52501
+ onClick: evt => evt.stopPropagation()
52502
+ }, /*#__PURE__*/React.createElement("div", {
52503
+ className: "react-emoji-picker"
52504
+ }, /*#__PURE__*/React.createElement(EmojiPicker$1, {
52505
+ theme: theme,
52506
+ onSelectEmoji: handleSelectEmoji,
52507
+ disableRecent: disableRecent,
52508
+ customEmojis: customEmojis
52509
+ }))));
52510
+ }
52511
+
52429
52512
  // @ts-check
52430
52513
  /**
52431
52514
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
@@ -52440,10 +52523,11 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
52440
52523
  * @property {'light' | 'dark' | 'auto'} theme
52441
52524
  * @property {boolean} keepOpened
52442
52525
  * @property {boolean} disableRecent
52443
- * @property {object[]=} customEmojis
52526
+ * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
52444
52527
  * @property {(fn: SanitizeFn) => void} addSanitizeFn
52445
52528
  * @property {(fn: PolluteFn) => void} addPolluteFn
52446
52529
  * @property {(html: string) => void} appendContent
52530
+ * @property {HTMLDivElement=} buttonElement
52447
52531
  */
52448
52532
  // eslint-disable-next-line valid-jsdoc
52449
52533
 
@@ -52457,9 +52541,13 @@ const EmojiPickerWrapper = props => {
52457
52541
  customEmojis,
52458
52542
  addSanitizeFn,
52459
52543
  addPolluteFn,
52460
- appendContent
52544
+ appendContent,
52545
+ buttonElement
52461
52546
  } = props;
52462
52547
  const [showPicker, setShowPicker] = useState(false);
52548
+ /** @type {[HTMLDivElement | undefined, React.Dispatch<React.SetStateAction<HTMLDivElement | undefined>>]} */
52549
+
52550
+ const [customButton, setCustomButton] = useState();
52463
52551
  useEffect(() => {
52464
52552
  addSanitizeFn(replaceAllTextEmojiToString);
52465
52553
  }, [addSanitizeFn]);
@@ -52513,33 +52601,32 @@ const EmojiPickerWrapper = props => {
52513
52601
  }
52514
52602
  }
52515
52603
 
52516
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
52517
- className: "react-emoji-picker--container"
52518
- }, showPicker && /*#__PURE__*/React.createElement("div", {
52519
- className: "react-emoji-picker--wrapper",
52520
- onClick: evt => evt.stopPropagation()
52521
- }, /*#__PURE__*/React.createElement("div", {
52522
- className: "react-emoji-picker"
52523
- }, /*#__PURE__*/React.createElement(EmojiPicker$1, {
52604
+ useEffect(() => {
52605
+ if (buttonElement?.style) {
52606
+ buttonElement.style.position = "relative";
52607
+ setCustomButton(buttonElement);
52608
+ }
52609
+ }, [buttonElement]);
52610
+ return customButton ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiPickerContainer, {
52611
+ showPicker: showPicker,
52524
52612
  theme: theme,
52525
- onSelectEmoji: handleSelectEmoji,
52613
+ handleSelectEmoji: handleSelectEmoji,
52526
52614
  disableRecent: disableRecent,
52527
52615
  customEmojis: customEmojis
52528
- })))), /*#__PURE__*/React.createElement("button", {
52529
- type: "button",
52530
- className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
52531
- onClick: toggleShowPicker
52532
- }, /*#__PURE__*/React.createElement("svg", {
52533
- xmlns: "http://www.w3.org/2000/svg",
52534
- viewBox: "0 0 24 24",
52535
- width: "24",
52536
- height: "24",
52537
- className: "react-input-emoji--button--icon"
52538
- }, /*#__PURE__*/React.createElement("path", {
52539
- d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"
52540
- }), /*#__PURE__*/React.createElement("path", {
52541
- d: "M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"
52542
- }))));
52616
+ }), /*#__PURE__*/React.createElement(EmojiPickerButton, {
52617
+ showPicker: showPicker,
52618
+ toggleShowPicker: toggleShowPicker,
52619
+ buttonElement: customButton
52620
+ })), customButton) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiPickerContainer, {
52621
+ showPicker: showPicker,
52622
+ theme: theme,
52623
+ handleSelectEmoji: handleSelectEmoji,
52624
+ disableRecent: disableRecent,
52625
+ customEmojis: customEmojis
52626
+ }), /*#__PURE__*/React.createElement(EmojiPickerButton, {
52627
+ showPicker: showPicker,
52628
+ toggleShowPicker: toggleShowPicker
52629
+ }));
52543
52630
  };
52544
52631
 
52545
52632
  // @ts-check
@@ -53117,6 +53204,7 @@ function usePollute() {
53117
53204
  * @property {string} fontFamily
53118
53205
  * @property {object[]=} customEmojis
53119
53206
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
53207
+ * @property {HTMLDivElement=} buttonElement
53120
53208
  */
53121
53209
 
53122
53210
  /**
@@ -53146,6 +53234,7 @@ function InputEmoji(props, ref) {
53146
53234
  value,
53147
53235
  customEmojis,
53148
53236
  searchMention,
53237
+ buttonElement,
53149
53238
  // style
53150
53239
  borderRadius,
53151
53240
  borderColor,
@@ -53254,12 +53343,12 @@ function InputEmoji(props, ref) {
53254
53343
  useEffect(() => {
53255
53344
  /** */
53256
53345
  function handleBlur() {
53257
- if (typeof onBlur === 'function') {
53346
+ if (typeof onBlur === "function") {
53258
53347
  onBlur();
53259
53348
  }
53260
53349
  }
53261
53350
 
53262
- const unsubscribe = addEventListener('blur', handleBlur);
53351
+ const unsubscribe = addEventListener("blur", handleBlur);
53263
53352
  return () => {
53264
53353
  unsubscribe();
53265
53354
  };
@@ -53350,7 +53439,8 @@ function InputEmoji(props, ref) {
53350
53439
  customEmojis: customEmojis,
53351
53440
  addSanitizeFn: addSanitizeFn,
53352
53441
  addPolluteFn: addPolluteFn,
53353
- appendContent: appendContent
53442
+ appendContent: appendContent,
53443
+ buttonElement: buttonElement
53354
53444
  }));
53355
53445
  }
53356
53446