@sendbird/uikit-react 3.6.4-rc-0 → 3.6.4

package/cjs/ui/UserListItem.js

@@ -0,0 +1,133 @@
+'use strict';
+
+var React = require('react');
+var UserProfileContext = require('../UserProfileContext-b1d56847.js');
+var LocalizationContext = require('../LocalizationContext-caec9de8.js');
+var ui_Avatar = require('./Avatar.js');
+var ui_MutedAvatarOverlay = require('./MutedAvatarOverlay.js');
+var ui_Checkbox = require('./Checkbox.js');
+var ui_UserProfile = require('./UserProfile.js');
+var ui_ContextMenu = require('./ContextMenu.js');
+var ui_Label = require('../index-9168135b.js');
+require('prop-types');
+require('../stringSet-c9e09cc3.js');
+require('../index-3096ca12.js');
+require('./ImageRenderer.js');
+require('./Icon.js');
+require('../uuid-57c89aa3.js');
+require('../sendbirdSelectors.js');
+require('../_rollupPluginBabelHelpers-f66db07d.js');
+require('../topics-d07733ad.js');
+require('../utils-600a013a.js');
+require('./Button.js');
+require('../useSendbirdStateContext.js');
+require('../withSendbird.js');
+require('react-dom');
+require('./SortByRow.js');
+require('../index-4d803bbe.js');
+require('../utils/message/getOutgoingMessageState.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function UserListItem(_ref) {
+  let {
+    user,
+    className,
+    checked,
+    checkBox,
+    isOperator,
+    disabled,
+    disableMessaging,
+    currentUser,
+    action,
+    onChange,
+    avatarSize = '40px'
+  } = _ref;
+  const uniqueKey = user.userId;
+  const actionRef = React__default["default"].useRef(null);
+  const parentRef = React__default["default"].useRef(null);
+  const avatarRef = React__default["default"].useRef(null);
+  const {
+    disableUserProfile,
+    renderUserProfile
+  } = React.useContext(UserProfileContext.UserProfileContext);
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-user-list-item'].join(' '),
+    ref: parentRef
+  }, (user === null || user === void 0 ? void 0 : user.isMuted) && /*#__PURE__*/React__default["default"].createElement(ui_MutedAvatarOverlay, {
+    height: 40,
+    width: 40
+  }), /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+      className: "sendbird-user-list-item__avatar",
+      ref: avatarRef,
+      src: user.profileUrl,
+      width: avatarSize,
+      height: avatarSize,
+      onClick: () => {
+        if (!disableUserProfile) {
+          toggleDropdown();
+        }
+      }
+    }),
+    menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
+      openLeft: true,
+      parentRef: avatarRef
+      // for catching location(x, y) of MenuItems
+      ,
+      parentContainRef: avatarRef
+      // for toggling more options(menus & reactions)
+      ,
+      closeDropdown: closeDropdown,
+      style: {
+        paddingTop: '0px',
+        paddingBottom: '0px'
+      }
+    }, renderUserProfile ? renderUserProfile({
+      user,
+      currentUserId: currentUser,
+      close: closeDropdown
+    }) : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
+      disableMessaging: disableMessaging,
+      user: user,
+      currentUserId: currentUser,
+      onSuccess: closeDropdown
+    }))
+  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-user-list-item__title",
+    type: ui_Label.LabelTypography.SUBTITLE_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, user.nickname || stringSet.NO_NAME, currentUser === user.userId && ' (You)'),
+  // if there is now nickname, display userId
+  !user.nickname && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-user-list-item__subtitle",
+    type: ui_Label.LabelTypography.CAPTION_3,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, user.userId), checkBox && /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "sendbird-user-list-item__checkbox",
+    htmlFor: uniqueKey
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Checkbox, {
+    id: uniqueKey,
+    checked: checked,
+    disabled: disabled,
+    onChange: event => onChange(event)
+  })), isOperator && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: ['sendbird-user-list-item__operator', checkBox ? 'checkbox' : ''].join(' '),
+    type: ui_Label.LabelTypography.SUBTITLE_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, "Operator"), action && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-user-list-item__action",
+    ref: actionRef
+  }, action({
+    actionRef,
+    parentRef
+  })));
+}
+
+module.exports = UserListItem;
+//# sourceMappingURL=UserListItem.js.map

package/cjs/ui/UserProfile.js

@@ -0,0 +1,93 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('../LocalizationContext-caec9de8.js');
+var UserProfileContext = require('../UserProfileContext-b1d56847.js');
+var sendbirdSelectors = require('../sendbirdSelectors.js');
+var ui_Avatar = require('./Avatar.js');
+var ui_Label = require('../index-9168135b.js');
+var ui_Button = require('./Button.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+require('../stringSet-c9e09cc3.js');
+require('../index-3096ca12.js');
+require('prop-types');
+require('../_rollupPluginBabelHelpers-f66db07d.js');
+require('../topics-d07733ad.js');
+require('../utils-600a013a.js');
+require('./ImageRenderer.js');
+require('./Icon.js');
+require('../uuid-57c89aa3.js');
+require('../withSendbird.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function UserProfile(_ref) {
+  var _store$config, _store$config2;
+  let {
+    user,
+    currentUserId,
+    disableMessaging = false,
+    onSuccess
+  } = _ref;
+  const store = useSendbirdStateContext();
+  const createChannel = sendbirdSelectors.getCreateGroupChannel(store);
+  const logger = store === null || store === void 0 ? void 0 : (_store$config = store.config) === null || _store$config === void 0 ? void 0 : _store$config.logger;
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
+  const currentUserId_ = currentUserId || (store === null || store === void 0 ? void 0 : (_store$config2 = store.config) === null || _store$config2 === void 0 ? void 0 : _store$config2.userId);
+  // @ts-ignore
+  const {
+    onUserProfileMessage
+  } = React.useContext(UserProfileContext.UserProfileContext);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird__user-profile"
+  }, /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird__user-profile-avatar"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+    height: "80px",
+    width: "80px",
+    src: user === null || user === void 0 ? void 0 : user.profileUrl
+  })), /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird__user-profile-name"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    type: ui_Label.LabelTypography.H_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, (user === null || user === void 0 ? void 0 : user.nickname) || stringSet.NO_NAME)), (user === null || user === void 0 ? void 0 : user.userId) !== currentUserId_ && !disableMessaging && /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird__user-profile-message"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Button["default"], {
+    type: ui_Button.ButtonTypes.SECONDARY,
+    onClick: () => {
+      // Create 1:1 channel
+      const params = {
+        isDistinct: false,
+        invitedUserIds: [user === null || user === void 0 ? void 0 : user.userId],
+        operatorUserIds: [currentUserId_]
+      };
+      onSuccess();
+      createChannel(params).then(groupChannel => {
+        logger.info('UserProfile, channel create', groupChannel);
+        if (typeof onUserProfileMessage === 'function') {
+          onUserProfileMessage === null || onUserProfileMessage === void 0 ? void 0 : onUserProfileMessage(groupChannel);
+        }
+      });
+    }
+  }, stringSet.USER_PROFILE__MESSAGE)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird__user-profile-separator"
+  }), /*#__PURE__*/React__default["default"].createElement("section", {
+    className: "sendbird__user-profile-userId"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird__user-profile-userId--label",
+    type: ui_Label.LabelTypography.CAPTION_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, stringSet.USER_PROFILE__USER_ID), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird__user-profile-userId--value",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, user === null || user === void 0 ? void 0 : user.userId)));
+}
+
+module.exports = UserProfile;
+//# sourceMappingURL=UserProfile.js.map

package/cjs/ui/VoiceMessageItemBody.js

@@ -0,0 +1,119 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ui_ProgressBar = require('./ProgressBar.js');
+var VoicePlayer_useVoicePlayer = require('../VoicePlayer/useVoicePlayer.js');
+var ui_PlaybackTime = require('./PlaybackTime.js');
+var ui_Loader = require('./Loader.js');
+var ui_Icon = require('./Icon.js');
+var ui_Label = require('../index-9168135b.js');
+var VoicePlayer_context = require('../index-ef8bbd45.js');
+require('../consts-5035e334.js');
+require('../VoiceRecorder/context.js');
+require('../LocalizationContext-caec9de8.js');
+require('../stringSet-c9e09cc3.js');
+require('../index-3096ca12.js');
+require('./Modal.js');
+require('react-dom');
+require('../index-6fdabf73.js');
+require('./Button.js');
+require('prop-types');
+require('./IconButton.js');
+require('../_rollupPluginBabelHelpers-f66db07d.js');
+require('../MediaQueryContext-315973f1.js');
+require('../useSendbirdStateContext.js');
+require('../withSendbird.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const VoiceMessageItemBody = _ref => {
+  var _message$reactions2;
+  let {
+    className,
+    message,
+    channelUrl,
+    isByMe = false,
+    isReactionEnabled = false
+  } = _ref;
+  const [usingReaction, setUsingReaction] = React.useState(false);
+  const {
+    play,
+    // do not pause on unmount, because on desktop layout
+    // the component can be paused when it is played from
+    // channel and same message is unmounted from the thread
+    pause,
+    playbackTime = 0,
+    duration,
+    playingStatus = VoicePlayer_context.VOICE_PLAYER_STATUS.IDLE
+  } = VoicePlayer_useVoicePlayer.useVoicePlayer({
+    channelUrl,
+    key: `${message === null || message === void 0 ? void 0 : message.messageId}`,
+    audioFileUrl: message === null || message === void 0 ? void 0 : message.url
+  });
+  React.useEffect(() => {
+    var _message$reactions;
+    if (isReactionEnabled && (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0) {
+      setUsingReaction(true);
+    } else {
+      setUsingReaction(false);
+    }
+  }, [isReactionEnabled, message === null || message === void 0 ? void 0 : (_message$reactions2 = message.reactions) === null || _message$reactions2 === void 0 ? void 0 : _message$reactions2.length]);
+  const progresBarMaxSize = React.useMemo(() => {
+    if (message !== null && message !== void 0 && message.metaArrays) {
+      var _message$metaArrays$f;
+      const duration = message === null || message === void 0 ? void 0 : (_message$metaArrays$f = message.metaArrays.find(metaArray => metaArray.key === 'KEY_VOICE_MESSAGE_DURATION')) === null || _message$metaArrays$f === void 0 ? void 0 : _message$metaArrays$f.value[0];
+      return duration && parseInt(duration);
+    }
+    return 1;
+  }, [message === null || message === void 0 ? void 0 : message.metaArrays]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `sendbird-voice-message-item-body ${className} ${usingReaction ? 'is-reactions-contained' : ''}`
+  }, /*#__PURE__*/React__default["default"].createElement(ui_ProgressBar.ProgressBar, {
+    className: "sendbird-voice-message-item-body__progress-bar",
+    maxSize: duration || progresBarMaxSize,
+    currentSize: playbackTime,
+    colorType: isByMe ? ui_ProgressBar.ProgressBarColorTypes.PRIMARY : ui_ProgressBar.ProgressBarColorTypes.GRAY
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button"
+  }, (playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.IDLE || playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PAUSED) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button",
+    onClick: play
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    width: "18px",
+    height: "18px",
+    type: ui_Icon.IconTypes.PLAY,
+    fillColor: ui_Icon.IconColors.PRIMARY
+  })), playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PREPARING && /*#__PURE__*/React__default["default"].createElement(ui_Loader, {
+    width: "22.2px",
+    height: "22.2px"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    width: "22.2px",
+    height: "22.2px",
+    type: ui_Icon.IconTypes.SPINNER,
+    fillColor: ui_Icon.IconColors.PRIMARY_2
+  })), playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PLAYING && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button",
+    onClick: () => {
+      pause();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button__pause"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button__pause__inner"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-voice-message-item-body__status-button__button__pause__inner"
+  })))), /*#__PURE__*/React__default["default"].createElement(ui_PlaybackTime.PlaybackTime, {
+    className: "sendbird-voice-message-item-body__playback-time",
+    time: progresBarMaxSize - playbackTime,
+    labelType: ui_Label.LabelTypography.BODY_1,
+    labelColor: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
+  }));
+};
+
+exports.VoiceMessageItemBody = VoiceMessageItemBody;
+exports["default"] = VoiceMessageItemBody;
+//# sourceMappingURL=VoiceMessageItemBody.js.map

package/cjs/ui/VoiceMessgeInput.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('./PlaybackTime.js');
+require('./ProgressBar.js');
+require('./TextButton.js');
+require('./Icon.js');
+require('../index-9168135b.js');
+require('../LocalizationContext-caec9de8.js');
+var ui_VoiceMessgeInput = require('../index-40e0f4db.js');
+require('../consts-5035e334.js');
+require('prop-types');
+require('../stringSet-c9e09cc3.js');
+require('../color-a452c689.js');
+require('../index-3096ca12.js');
+
+
+
+exports.VoiceMessageInput = ui_VoiceMessgeInput.VoiceMessageInput;
+//# sourceMappingURL=VoiceMessgeInput.js.map

package/cjs/ui/Word.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var React = require('react');
+var ui_Label = require('../index-9168135b.js');
+var ui_LinkLabel = require('./LinkLabel.js');
+var uuid = require('../uuid-57c89aa3.js');
+var index = require('../index-4d803bbe.js');
+var ui_MentionLabel = require('./MentionLabel.js');
+require('prop-types');
+require('../stringSet-c9e09cc3.js');
+require('../_rollupPluginBabelHelpers-f66db07d.js');
+require('../utils/message/getOutgoingMessageState.js');
+require('./ContextMenu.js');
+require('react-dom');
+require('./SortByRow.js');
+require('./UserProfile.js');
+require('../LocalizationContext-caec9de8.js');
+require('../index-3096ca12.js');
+require('../UserProfileContext-b1d56847.js');
+require('../sendbirdSelectors.js');
+require('../topics-d07733ad.js');
+require('../utils-600a013a.js');
+require('./Avatar.js');
+require('./ImageRenderer.js');
+require('./Icon.js');
+require('./Button.js');
+require('../useSendbirdStateContext.js');
+require('../withSendbird.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * @deprecated  This component is deprecated and will be removed in the next major version.
+ * Use TextFragment instead.
+ */
+// Word and StringObj will include types: normal, mention, url
+function Word(props) {
+  const {
+    word,
+    message,
+    isByMe = false,
+    mentionTemplate = '@',
+    renderString = null
+  } = props;
+  if (word === '') {
+    return null;
+  }
+  return /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "sendbird-word"
+  }, index.convertWordToStringObj(word, message === null || message === void 0 ? void 0 : message.mentionedUsers).map(stringObj => {
+    const type = (stringObj === null || stringObj === void 0 ? void 0 : stringObj.type) || '';
+    const value = (stringObj === null || stringObj === void 0 ? void 0 : stringObj.value) || '';
+    const userId = (stringObj === null || stringObj === void 0 ? void 0 : stringObj.userId) || '';
+    if (renderString && typeof renderString === 'function') {
+      return renderString(stringObj);
+    }
+    if (type === index.StringObjType.mention) {
+      return /*#__PURE__*/React__default["default"].createElement(ui_MentionLabel, {
+        mentionTemplate: mentionTemplate,
+        mentionedUserId: userId,
+        mentionedUserNickname: value,
+        key: uuid.uuidv4(),
+        isByMe: isByMe
+      });
+    } else if (type === index.StringObjType.url) {
+      var _value$match;
+      const urlRegex = /([a-zA-Z0-9]+:\/\/)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\.[A-Za-z]{2,4})(:[0-9]+)?(\/.*)?/;
+      const targetUrl = (_value$match = value.match(urlRegex)) === null || _value$match === void 0 ? void 0 : _value$match[0];
+      const stringUrl = {
+        front: '',
+        url: '',
+        back: ''
+      };
+      if (targetUrl) {
+        const targetUrlIndex = value.indexOf(targetUrl);
+        if (targetUrlIndex > 0) {
+          stringUrl.front = value.slice(0, targetUrlIndex);
+        }
+        stringUrl.url = value.slice(targetUrlIndex, targetUrlIndex + targetUrl.length);
+        if (targetUrlIndex + targetUrl.length < value.length) {
+          stringUrl.back = value.slice(targetUrlIndex + targetUrl.length);
+        }
+      }
+      if (targetUrl) {
+        return [stringUrl.front ? stringUrl.front : '', stringUrl.url ? /*#__PURE__*/React__default["default"].createElement(ui_LinkLabel["default"], {
+          className: "sendbird-word__url",
+          key: uuid.uuidv4(),
+          src: stringUrl.url,
+          type: ui_Label.LabelTypography.BODY_1
+        }, stringUrl.url) : null, stringUrl.back ? stringUrl.back : ''];
+      }
+      return /*#__PURE__*/React__default["default"].createElement(ui_LinkLabel["default"], {
+        className: "sendbird-word__url",
+        key: uuid.uuidv4(),
+        src: word,
+        type: ui_Label.LabelTypography.BODY_1
+      }, value);
+    } else {
+      return value;
+    }
+  }));
+}
+
+module.exports = Word;
+//# sourceMappingURL=Word.js.map

package/cjs/useDirtyGetMentions-03972b52.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var React = require('react');
+
+function getMentionNodes(root) {
+  if (root) {
+    const mentions = root.querySelectorAll("[data-sb-mention='true']");
+    const mentionsArray = Array.from(mentions);
+    return mentionsArray;
+  }
+  return [];
+}
+
+/**
+ * This is a dirty way to get the mentions given DOM node
+ */
+function useDirtyGetMentions(_ref, _ref2) {
+  let {
+    ref
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  // Select the node that will be observed for mutations
+  const targetNode = ref.current;
+  const [mentionNodes, setMentionNodes] = React.useState([]);
+
+  // to get the initial mentions
+  React.useLayoutEffect(() => {
+    if (targetNode) {
+      const mentions = getMentionNodes(targetNode);
+      setMentionNodes(mentions);
+    }
+  }, [targetNode]);
+  React.useEffect(() => {
+    // Options for the observer (which mutations to observe)
+    const config = {
+      childList: true,
+      subtree: true
+    };
+
+    // Callback function to execute when mutations are observed
+    const callback = mutationList => {
+      const hasMutation = mutationList.length > 0;
+      if (hasMutation) {
+        setMentionNodes(getMentionNodes(targetNode));
+      }
+    };
+
+    // Create an observer instance linked to the callback function
+    const observer = new MutationObserver(callback);
+    if (targetNode) {
+      // Start observing the target node for configured mutations
+      observer.observe(targetNode, config);
+      logger.info('useDirtyGetMentions: observer started', {
+        observer,
+        config
+      });
+    }
+    return () => {
+      try {
+        observer.disconnect();
+        logger.info('useDirtyGetMentions: observer disconnected', {
+          observer
+        });
+      } catch (error) {
+        logger.error('useDirtyGetMentions: observer disconnect failed', {
+          observer
+        });
+      }
+    };
+  }, [targetNode]);
+  return mentionNodes;
+}
+
+exports.useDirtyGetMentions = useDirtyGetMentions;
+//# sourceMappingURL=useDirtyGetMentions-03972b52.js.map

package/cjs/useDirtyGetMentions-03972b52.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDirtyGetMentions-03972b52.js","sources":["../../src/modules/Message/utils/getMentionNodes.ts","../../src/modules/Message/hooks/useDirtyGetMentions.ts"],"sourcesContent":["export function getMentionNodes(root: HTMLElement): Element[] {\n  if (root) {\n    const mentions = root.querySelectorAll(\"[data-sb-mention='true']\");\n    const mentionsArray = Array.from(mentions);\n    return mentionsArray;\n  }\n  return [];\n}\n","import { useEffect, useLayoutEffect, useState } from 'react';\n\nimport { Logger } from '../../../lib/SendbirdState';\nimport { getMentionNodes } from '../utils/getMentionNodes';\n\ninterface DynamicParams {\n  ref: React.RefObject<HTMLElement>;\n}\n\ninterface StaticParams {\n  logger: Logger;\n}\n\n/**\n * This is a dirty way to get the mentions given DOM node\n */\nexport function useDirtyGetMentions({\n  ref,\n}: DynamicParams, {\n  logger,\n}: StaticParams) {\n  // Select the node that will be observed for mutations\n  const targetNode = ref.current as HTMLElement;\n  const [mentionNodes, setMentionNodes] = useState<Element[]>([]);\n\n  // to get the initial mentions\n  useLayoutEffect(() => {\n    if (targetNode) {\n      const mentions = getMentionNodes(targetNode);\n      setMentionNodes(mentions);\n    }\n  }, [targetNode]);\n\n  useEffect(() => {\n    // Options for the observer (which mutations to observe)\n    const config = { childList: true, subtree: true };\n\n    // Callback function to execute when mutations are observed\n    const callback = (mutationList: MutationRecord[]): void => {\n      const hasMutation = mutationList.length > 0;\n      if (hasMutation) {\n        setMentionNodes(getMentionNodes(targetNode));\n      }\n    };\n\n    // Create an observer instance linked to the callback function\n    const observer = new MutationObserver(callback);\n\n    if (targetNode) {\n      // Start observing the target node for configured mutations\n      observer.observe(targetNode, config);\n      logger.info('useDirtyGetMentions: observer started', { observer, config });\n    }\n\n    return () => {\n      try {\n        observer.disconnect();\n        logger.info('useDirtyGetMentions: observer disconnected', { observer });\n      } catch (error) {\n        logger.error('useDirtyGetMentions: observer disconnect failed', { observer });\n      }\n    };\n  }, [targetNode]);\n  return mentionNodes;\n}\n"],"names":["getMentionNodes","root","mentions","querySelectorAll","mentionsArray","Array","from","useDirtyGetMentions","_ref","_ref2","ref","logger","targetNode","current","mentionNodes","setMentionNodes","useState","useLayoutEffect","useEffect","config","childList","subtree","callback","mutationList","hasMutation","length","observer","MutationObserver","observe","info","disconnect","error"],"mappings":";;;;AAAO,SAASA,eAAeA,CAACC,IAAiB,EAAa;AAC5D,EAAA,IAAIA,IAAI,EAAE;AACR,IAAA,MAAMC,QAAQ,GAAGD,IAAI,CAACE,gBAAgB,CAAC,0BAA0B,CAAC,CAAA;AAClE,IAAA,MAAMC,aAAa,GAAGC,KAAK,CAACC,IAAI,CAACJ,QAAQ,CAAC,CAAA;AAC1C,IAAA,OAAOE,aAAa,CAAA;AACtB,GAAA;AACA,EAAA,OAAO,EAAE,CAAA;AACX;;ACMA;AACA;AACA;AACO,SAASG,mBAAmBA,CAAAC,IAAA,EAAAC,KAAA,EAIlB;EAAA,IAJmB;AAClCC,IAAAA,GAAAA;AACa,GAAC,GAAAF,IAAA,CAAA;EAAA,IAAE;AAChBG,IAAAA,MAAAA;AACY,GAAC,GAAAF,KAAA,CAAA;AACb;AACA,EAAA,MAAMG,UAAU,GAAGF,GAAG,CAACG,OAAsB,CAAA;EAC7C,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAAY,EAAE,CAAC,CAAA;;AAE/D;AACAC,EAAAA,qBAAe,CAAC,MAAM;AACpB,IAAA,IAAIL,UAAU,EAAE;AACd,MAAA,MAAMV,QAAQ,GAAGF,eAAe,CAACY,UAAU,CAAC,CAAA;MAC5CG,eAAe,CAACb,QAAQ,CAAC,CAAA;AAC3B,KAAA;AACF,GAAC,EAAE,CAACU,UAAU,CAAC,CAAC,CAAA;AAEhBM,EAAAA,eAAS,CAAC,MAAM;AACd;AACA,IAAA,MAAMC,MAAM,GAAG;AAAEC,MAAAA,SAAS,EAAE,IAAI;AAAEC,MAAAA,OAAO,EAAE,IAAA;KAAM,CAAA;;AAEjD;IACA,MAAMC,QAAQ,GAAIC,YAA8B,IAAW;AACzD,MAAA,MAAMC,WAAW,GAAGD,YAAY,CAACE,MAAM,GAAG,CAAC,CAAA;AAC3C,MAAA,IAAID,WAAW,EAAE;AACfT,QAAAA,eAAe,CAACf,eAAe,CAACY,UAAU,CAAC,CAAC,CAAA;AAC9C,OAAA;KACD,CAAA;;AAED;AACA,IAAA,MAAMc,QAAQ,GAAG,IAAIC,gBAAgB,CAACL,QAAQ,CAAC,CAAA;AAE/C,IAAA,IAAIV,UAAU,EAAE;AACd;AACAc,MAAAA,QAAQ,CAACE,OAAO,CAAChB,UAAU,EAAEO,MAAM,CAAC,CAAA;AACpCR,MAAAA,MAAM,CAACkB,IAAI,CAAC,uCAAuC,EAAE;QAAEH,QAAQ;AAAEP,QAAAA,MAAAA;AAAO,OAAC,CAAC,CAAA;AAC5E,KAAA;AAEA,IAAA,OAAO,MAAM;MACX,IAAI;QACFO,QAAQ,CAACI,UAAU,EAAE,CAAA;AACrBnB,QAAAA,MAAM,CAACkB,IAAI,CAAC,4CAA4C,EAAE;AAAEH,UAAAA,QAAAA;AAAS,SAAC,CAAC,CAAA;OACxE,CAAC,OAAOK,KAAK,EAAE;AACdpB,QAAAA,MAAM,CAACoB,KAAK,CAAC,iDAAiD,EAAE;AAAEL,UAAAA,QAAAA;AAAS,SAAC,CAAC,CAAA;AAC/E,OAAA;KACD,CAAA;AACH,GAAC,EAAE,CAACd,UAAU,CAAC,CAAC,CAAA;AAChB,EAAA,OAAOE,YAAY,CAAA;AACrB;;;;"}

package/cjs/useLongPress-e2790020.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-f66db07d.js');
+var React = require('react');
+var MediaQueryContext = require('./MediaQueryContext-315973f1.js');
+
+const DEFAULT_DURATION = 300;
+function preventDefault(e) {
+  if (!isTouchEvent(e)) {
+    return;
+  }
+  if (e.touches.length < 2 && e.preventDefault) {
+    e.preventDefault();
+  }
+}
+function isTouchEvent(e) {
+  return e && 'touches' in e;
+}
+function useLongPress(_ref) {
+  let {
+    onLongPress,
+    onClick
+  } = _ref;
+  let {
+    delay = DEFAULT_DURATION,
+    shouldPreventDefault = true,
+    shouldStopPropagation = false
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    isMobile
+  } = MediaQueryContext.useMediaQueryContext();
+  const [longPressTriggered, setLongPressTriggered] = React.useState(false);
+  const [dragTriggered, setDragTriggered] = React.useState(false);
+  // https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype
+  const timeout = React.useRef();
+  const target = React.useRef();
+  const start = React.useCallback(e => {
+    e.persist();
+    const clonedEvent = _rollupPluginBabelHelpers._objectSpread2({}, e);
+    setDragTriggered(false);
+    if (shouldStopPropagation) {
+      e.stopPropagation();
+    }
+    if (shouldPreventDefault && e.target) {
+      e.target.addEventListener('touchend', preventDefault, {
+        passive: false
+      });
+      target.current = e.target;
+    }
+    timeout.current = setTimeout(() => {
+      onLongPress(clonedEvent);
+      setLongPressTriggered(true);
+    }, delay);
+  }, [onLongPress, delay, shouldPreventDefault, shouldStopPropagation, isMobile]);
+  const clear = React.useCallback(function (e) {
+    let shouldTriggerClick = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    let onDrag = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (onDrag) {
+      setDragTriggered(true);
+    } else {
+      setDragTriggered(false);
+    }
+    if (timeout !== null && timeout !== void 0 && timeout.current) {
+      clearTimeout(timeout.current);
+    }
+    if (shouldTriggerClick && !longPressTriggered && !dragTriggered) {
+      onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    }
+    setLongPressTriggered(false);
+    if (shouldPreventDefault && target.current) {
+      target.current.removeEventListener('touchend', preventDefault);
+    }
+  }, [shouldPreventDefault, onClick, longPressTriggered, dragTriggered]);
+  return {
+    onMouseDown: e => start(e),
+    onMouseUp: e => clear(e),
+    onMouseLeave: e => clear(e, false),
+    onTouchStart: e => start(e),
+    // setDragTriggered as true on touchmove, so that next onTouchEnd is ignored
+    // if we dont do it, onClick?.(e) will be triggred, see inside clear()
+    onTouchMove: e => clear(e, false, true),
+    onTouchEnd: e => clear(e)
+  };
+}
+
+exports.useLongPress = useLongPress;
+//# sourceMappingURL=useLongPress-e2790020.js.map