@sendbird/uikit-react 3.4.8 → 3.4.9

package/cjs/Thread/components/ThreadHeader.js

@@ -3,14 +3,14 @@
 var React = require('react');
 var ui_IconButton = require('../../ui/IconButton.js');
 var ui_Icon = require('../../ui/Icon.js');
-var ui_Label = require('../../index-22bdf04e.js');
+var ui_Label = require('../../index-c89616c9.js');
 var ui_TextButton = require('../../ui/TextButton.js');
-var LocalizationContext = require('../../LocalizationContext-4fa55e6b.js');
-require('../../_rollupPluginBabelHelpers-2c0fc9c3.js');
+var LocalizationContext = require('../../LocalizationContext-df436a16.js');
+require('../../_rollupPluginBabelHelpers-5fad415d.js');
 require('prop-types');
-require('../../stringSet-c24927d9.js');
-require('../../color-83cbca20.js');
-require('../../index-47e4bdbc.js');
+require('../../stringSet-d7f78de0.js');
+require('../../color-026d07a6.js');
+require('../../index-0f42efcf.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -42,7 +42,7 @@ function ThreadHeader(_ref) {
     type: ui_Label.LabelTypography.H_2,
     color: ui_Label.LabelColors.ONBACKGROUND_1
   }, stringSet.THREAD__HEADER_TITLE), /*#__PURE__*/React__default["default"].createElement(ui_TextButton, {
-    onClick: e => onChannelNameClick(e),
+    onClick: e => onChannelNameClick === null || onChannelNameClick === void 0 ? void 0 : onChannelNameClick(e),
     disableUnderline: true
   }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-thread-header__channel-name",

package/cjs/Thread/components/ThreadHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadHeader.js","sources":["../../../../src/modules/Thread/components/ThreadHeader/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport './index.scss';\n\nimport IconButton from '../../../../ui/IconButton';\nimport Icon, { IconTypes, IconColors } from '../../../../ui/Icon';\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport TextButton from '../../../../ui/TextButton';\n\nimport { useLocalization } from '../../../../lib/LocalizationContext';\n\ntype EventType = React.MouseEvent<HTMLDivElement | HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>;\n\nexport interface ThreadHeaderProps {\n  className?: string;\n  channelName: string;\n  renderActionIcon?: (props: { onActionIconClick: (e: EventType) => void }) => React.ReactElement;\n  onActionIconClick?: (e: EventType) => void;\n  onChannelNameClick?: (e: EventType) => void;\n}\n\nexport default function ThreadHeader({\n  className,\n  channelName,\n  renderActionIcon,\n  onActionIconClick,\n  onChannelNameClick,\n}: ThreadHeaderProps): React.ReactElement {\n  const { stringSet } = useLocalization();\n\n  const MemoizedActionIcon = useMemo(() => {\n    if (typeof renderActionIcon === 'function') {\n      return renderActionIcon({ onActionIconClick });\n    }\n    return null;\n  }, [renderActionIcon]);\n  return (\n    <div className={`sendbird-thread-header ${className}`}>\n      <Label\n        className=\"sendbird-thread-header__title\"\n        type={LabelTypography.H_2}\n        color={LabelColors.ONBACKGROUND_1}\n      >\n        {stringSet.THREAD__HEADER_TITLE}\n      </Label>\n      <TextButton\n        onClick={(e) => onChannelNameClick(e)}\n        disableUnderline\n      >\n        <Label\n          className=\"sendbird-thread-header__channel-name\"\n          type={LabelTypography.CAPTION_3}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {channelName}\n        </Label>\n      </TextButton>\n      {\n        MemoizedActionIcon || (\n          <div className=\"sendbird-thread-header__action\">\n            <IconButton\n              width=\"32px\"\n              height=\"32px\"\n              onClick={(e) => onActionIconClick(e)}\n            >\n              <Icon\n                type={IconTypes.CLOSE}\n                fillColor={IconColors.ON_BACKGROUND_1}\n                width=\"22px\"\n                height=\"22px\"\n              />\n            </IconButton>\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["ThreadHeader","_ref","className","channelName","renderActionIcon","onActionIconClick","onChannelNameClick","stringSet","useLocalization","MemoizedActionIcon","useMemo","React","createElement","Label","type","LabelTypography","H_2","color","LabelColors","ONBACKGROUND_1","THREAD__HEADER_TITLE","TextButton","onClick","e","disableUnderline","CAPTION_3","ONBACKGROUND_2","IconButton","width","height","Icon","IconTypes","CLOSE","fillColor","IconColors","ON_BACKGROUND_1"],"mappings":";;;;;;;;;;;;;;;;;;AAqBe,SAASA,YAAYA,CAAAC,IAAA,EAMM;EAAA,IANL;IACnCC,SAAS;IACTC,WAAW;IACXC,gBAAgB;IAChBC,iBAAiB;AACjBC,IAAAA,kBAAAA;AACiB,GAAC,GAAAL,IAAA,CAAA;EAClB,MAAM;AAAEM,IAAAA,SAAAA;GAAW,GAAGC,mCAAe,EAAE,CAAA;AAEvC,EAAA,MAAMC,kBAAkB,GAAGC,aAAO,CAAC,MAAM;AACvC,IAAA,IAAI,OAAON,gBAAgB,KAAK,UAAU,EAAE;AAC1C,MAAA,OAAOA,gBAAgB,CAAC;AAAEC,QAAAA,iBAAAA;AAAkB,OAAC,CAAC,CAAA;AAChD,KAAA;AACA,IAAA,OAAO,IAAI,CAAA;AACb,GAAC,EAAE,CAACD,gBAAgB,CAAC,CAAC,CAAA;EACtB,oBACEO,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAG,0BAAyBA,SAAU,CAAA,CAAA;AAAE,GAAA,eACpDS,yBAAA,CAAAC,aAAA,CAACC,cAAK,EAAA;AACJX,IAAAA,SAAS,EAAC,+BAA+B;IACzCY,IAAI,EAAEC,wBAAe,CAACC,GAAI;IAC1BC,KAAK,EAAEC,oBAAW,CAACC,cAAAA;GAElBZ,EAAAA,SAAS,CAACa,oBAAoB,CACzB,eACRT,yBAAA,CAAAC,aAAA,CAACS,aAAU,EAAA;AACTC,IAAAA,OAAO,EAAGC,CAAC,IAAKjB,kBAAkB,CAACiB,CAAC,CAAE;IACtCC,gBAAgB,EAAA,IAAA;AAAA,GAAA,eAEhBb,yBAAA,CAAAC,aAAA,CAACC,cAAK,EAAA;AACJX,IAAAA,SAAS,EAAC,sCAAsC;IAChDY,IAAI,EAAEC,wBAAe,CAACU,SAAU;IAChCR,KAAK,EAAEC,oBAAW,CAACQ,cAAAA;GAElBvB,EAAAA,WAAW,CACN,CACG,EAEXM,kBAAkB,iBAChBE,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKV,IAAAA,SAAS,EAAC,gCAAA;AAAgC,GAAA,eAC7CS,yBAAA,CAAAC,aAAA,CAACe,aAAU,EAAA;AACTC,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAM;AACbP,IAAAA,OAAO,EAAGC,CAAC,IAAKlB,iBAAiB,CAACkB,CAAC,CAAA;AAAE,GAAA,eAErCZ,yBAAA,CAAAC,aAAA,CAACkB,kBAAI,EAAA;IACHhB,IAAI,EAAEiB,iBAAS,CAACC,KAAM;IACtBC,SAAS,EAAEC,kBAAU,CAACC,eAAgB;AACtCP,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAA;GACP,CAAA,CACS,CAEhB,CAEC,CAAA;AAEV;;;;"}
+{"version":3,"file":"ThreadHeader.js","sources":["../../../../src/modules/Thread/components/ThreadHeader/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport './index.scss';\n\nimport IconButton from '../../../../ui/IconButton';\nimport Icon, { IconTypes, IconColors } from '../../../../ui/Icon';\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport TextButton from '../../../../ui/TextButton';\n\nimport { useLocalization } from '../../../../lib/LocalizationContext';\n\ntype EventType = React.MouseEvent<HTMLDivElement | HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>;\n\nexport interface ThreadHeaderProps {\n  className?: string;\n  channelName: string;\n  renderActionIcon?: (props: { onActionIconClick: (e: EventType) => void }) => React.ReactElement;\n  onActionIconClick?: (e: EventType) => void;\n  onChannelNameClick?: (e: EventType) => void;\n}\n\nexport default function ThreadHeader({\n  className,\n  channelName,\n  renderActionIcon,\n  onActionIconClick,\n  onChannelNameClick,\n}: ThreadHeaderProps): React.ReactElement {\n  const { stringSet } = useLocalization();\n\n  const MemoizedActionIcon = useMemo(() => {\n    if (typeof renderActionIcon === 'function') {\n      return renderActionIcon({ onActionIconClick });\n    }\n    return null;\n  }, [renderActionIcon]);\n  return (\n    <div className={`sendbird-thread-header ${className}`}>\n      <Label\n        className=\"sendbird-thread-header__title\"\n        type={LabelTypography.H_2}\n        color={LabelColors.ONBACKGROUND_1}\n      >\n        {stringSet.THREAD__HEADER_TITLE}\n      </Label>\n      <TextButton\n        onClick={(e) => onChannelNameClick?.(e)}\n        disableUnderline\n      >\n        <Label\n          className=\"sendbird-thread-header__channel-name\"\n          type={LabelTypography.CAPTION_3}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {channelName}\n        </Label>\n      </TextButton>\n      {\n        MemoizedActionIcon || (\n          <div className=\"sendbird-thread-header__action\">\n            <IconButton\n              width=\"32px\"\n              height=\"32px\"\n              onClick={(e) => onActionIconClick(e)}\n            >\n              <Icon\n                type={IconTypes.CLOSE}\n                fillColor={IconColors.ON_BACKGROUND_1}\n                width=\"22px\"\n                height=\"22px\"\n              />\n            </IconButton>\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["ThreadHeader","_ref","className","channelName","renderActionIcon","onActionIconClick","onChannelNameClick","stringSet","useLocalization","MemoizedActionIcon","useMemo","React","createElement","Label","type","LabelTypography","H_2","color","LabelColors","ONBACKGROUND_1","THREAD__HEADER_TITLE","TextButton","onClick","e","disableUnderline","CAPTION_3","ONBACKGROUND_2","IconButton","width","height","Icon","IconTypes","CLOSE","fillColor","IconColors","ON_BACKGROUND_1"],"mappings":";;;;;;;;;;;;;;;;;;AAqBe,SAASA,YAAYA,CAAAC,IAAA,EAMM;EAAA,IANL;IACnCC,SAAS;IACTC,WAAW;IACXC,gBAAgB;IAChBC,iBAAiB;AACjBC,IAAAA,kBAAAA;AACiB,GAAC,GAAAL,IAAA,CAAA;EAClB,MAAM;AAAEM,IAAAA,SAAAA;GAAW,GAAGC,mCAAe,EAAE,CAAA;AAEvC,EAAA,MAAMC,kBAAkB,GAAGC,aAAO,CAAC,MAAM;AACvC,IAAA,IAAI,OAAON,gBAAgB,KAAK,UAAU,EAAE;AAC1C,MAAA,OAAOA,gBAAgB,CAAC;AAAEC,QAAAA,iBAAAA;AAAkB,OAAC,CAAC,CAAA;AAChD,KAAA;AACA,IAAA,OAAO,IAAI,CAAA;AACb,GAAC,EAAE,CAACD,gBAAgB,CAAC,CAAC,CAAA;EACtB,oBACEO,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAG,0BAAyBA,SAAU,CAAA,CAAA;AAAE,GAAA,eACpDS,yBAAA,CAAAC,aAAA,CAACC,cAAK,EAAA;AACJX,IAAAA,SAAS,EAAC,+BAA+B;IACzCY,IAAI,EAAEC,wBAAe,CAACC,GAAI;IAC1BC,KAAK,EAAEC,oBAAW,CAACC,cAAAA;GAElBZ,EAAAA,SAAS,CAACa,oBAAoB,CACzB,eACRT,yBAAA,CAAAC,aAAA,CAACS,aAAU,EAAA;IACTC,OAAO,EAAGC,CAAC,IAAKjB,kBAAkB,KAAA,IAAA,IAAlBA,kBAAkB,KAAlBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,kBAAkB,CAAGiB,CAAC,CAAE;IACxCC,gBAAgB,EAAA,IAAA;AAAA,GAAA,eAEhBb,yBAAA,CAAAC,aAAA,CAACC,cAAK,EAAA;AACJX,IAAAA,SAAS,EAAC,sCAAsC;IAChDY,IAAI,EAAEC,wBAAe,CAACU,SAAU;IAChCR,KAAK,EAAEC,oBAAW,CAACQ,cAAAA;GAElBvB,EAAAA,WAAW,CACN,CACG,EAEXM,kBAAkB,iBAChBE,yBAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKV,IAAAA,SAAS,EAAC,gCAAA;AAAgC,GAAA,eAC7CS,yBAAA,CAAAC,aAAA,CAACe,aAAU,EAAA;AACTC,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAM;AACbP,IAAAA,OAAO,EAAGC,CAAC,IAAKlB,iBAAiB,CAACkB,CAAC,CAAA;AAAE,GAAA,eAErCZ,yBAAA,CAAAC,aAAA,CAACkB,kBAAI,EAAA;IACHhB,IAAI,EAAEiB,iBAAS,CAACC,KAAM;IACtBC,SAAS,EAAEC,kBAAU,CAACC,eAAgB;AACtCP,IAAAA,KAAK,EAAC,MAAM;AACZC,IAAAA,MAAM,EAAC,MAAA;GACP,CAAA,CACS,CAEhB,CAEC,CAAA;AAEV;;;;"}

package/cjs/Thread/components/ThreadList.js

@@ -2,72 +2,77 @@
 
 var React = require('react');
 var Thread_components_ThreadListItem = require('./ThreadListItem.js');
-var Thread_context = require('../../ThreadProvider-d38505b4.js');
+var Thread_context = require('../../ThreadProvider-654b9db0.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
 var dateFns = require('date-fns');
 var Message_context = require('../../Message/context.js');
-require('../../index-be9c5a7d.js');
-require('../../index-47e4bdbc.js');
-require('../../LocalizationContext-4fa55e6b.js');
-require('../../stringSet-c24927d9.js');
+require('../../index-bf4e62fb.js');
+require('../../index-0f42efcf.js');
+require('../../LocalizationContext-df436a16.js');
+require('../../stringSet-d7f78de0.js');
 require('../../ui/DateSeparator.js');
-require('../../color-83cbca20.js');
-require('../../index-22bdf04e.js');
+require('../../color-026d07a6.js');
+require('../../index-c89616c9.js');
 require('prop-types');
-require('../../RemoveMessageModal-3535563a.js');
+require('../../RemoveMessageModal-bcf3c6fe.js');
 require('../../ui/Modal.js');
 require('react-dom');
-require('../../index-10d8f30f.js');
+require('../../index-dd9bc361.js');
 require('../../ui/Button.js');
 require('../../ui/Icon.js');
 require('../../ui/IconButton.js');
-require('../../_rollupPluginBabelHelpers-2c0fc9c3.js');
-require('../../MediaQueryContext-e443379e.js');
+require('../../_rollupPluginBabelHelpers-5fad415d.js');
+require('../../MediaQueryContext-f1e8fdbc.js');
 require('../../ui/FileViewer.js');
-require('../../index-265937df.js');
+require('../../index-33b67e46.js');
 require('../../utils/message/getOutgoingMessageState.js');
 require('../../ui/Avatar.js');
 require('../../ui/ImageRenderer.js');
-require('../../uuid-c854e2a9.js');
+require('../../uuid-2953f4dd.js');
 require('../../Channel/components/SuggestedMentionList.js');
-require('../../ChannelProvider-5366f030.js');
-require('../../UserProfileContext-83eaf6e8.js');
-require('../../topics-0df2f6f9.js');
-require('../../compareIds-c2907ec8.js');
-require('../../const-17970c49.js');
+require('../../ChannelProvider-da7b08a1.js');
+require('../../UserProfileContext-0c255fa6.js');
+require('../../topics-2431bb78.js');
+require('../../compareIds-f064c47d.js');
+require('../../const-692d0039.js');
 require('@sendbird/chat/groupChannel');
 require('@sendbird/chat/message');
-require('../../consts-0db2bedc.js');
-require('../../const-75153738.js');
+require('../../consts-297fdae1.js');
+require('../../const-0a12bf51.js');
 require('../../withSendbird.js');
 require('../context/types.js');
 require('@sendbird/chat');
 require('../../ui/MessageInput.js');
 require('dompurify');
-require('../../consts-d2103ed5.js');
-require('../../consts-aaf1208c.js');
-require('../../consts-5ead6f3b.js');
-require('../../tokenize-1441f448.js');
+require('../../consts-2f667487.js');
+require('../../consts-f0dc64d0.js');
+require('../../consts-25fc4351.js');
+require('../../tokenize-595877b4.js');
 require('../../ui/ContextMenu.js');
 require('../../ui/SortByRow.js');
 require('../../ui/UserProfile.js');
 require('../../sendbirdSelectors.js');
-require('../../utils-a1fead2f.js');
+require('../../utils-279e7553.js');
 require('../../ui/MessageItemMenu.js');
-require('../../types-df20b895.js');
+require('../../types-ef51254c.js');
 require('../../ui/MessageItemReactionMenu.js');
 require('../../ui/ReactionButton.js');
-require('../../index-01768a5e.js');
+require('../../useLongPress-68ad7161.js');
+require('../../index-4881e776.js');
 require('../../ui/Loader.js');
-require('../../index-c8c25288.js');
-require('../../index-41ce4c44.js');
+require('../../index-21392a2e.js');
+require('../../index-80fc14fe.js');
 require('../../ui/EmojiReactions.js');
+require('../../ui/ReactionBadge.js');
+require('../../ui/BottomSheet.js');
+require('../../ui/UserListItem.js');
+require('../../ui/MutedAvatarOverlay.js');
+require('../../ui/Checkbox.js');
 require('../../ui/Tooltip.js');
 require('../../ui/TooltipWrapper.js');
-require('../../ui/ReactionBadge.js');
 require('../../ui/TextMessageItemBody.js');
-require('../../index-61c3208b.js');
-require('../../index.module-3e7701ca.js');
+require('../../index-450be53e.js');
+require('../../index.module-e5552393.js');
 require('../../ui/MentionLabel.js');
 require('../../ui/LinkLabel.js');
 require('../../ui/OGMessageItemBody.js');
@@ -78,9 +83,11 @@ require('../../ui/UnknownMessageItemBody.js');
 require('../../ui/VoiceMessageItemBody.js');
 require('../../ui/ProgressBar.js');
 require('../../VoicePlayer/useVoicePlayer.js');
-require('../../index-09f8f2a4.js');
+require('../../index-12ce8274.js');
 require('../../VoiceRecorder/context.js');
 require('../../ui/PlaybackTime.js');
+require('../../index-6e05ddef.js');
+require('../../useDirtyGetMentions-cc7de01f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/Thread/components/ThreadList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadList.js","sources":["../../../../src/modules/Thread/components/ThreadList/index.tsx"],"sourcesContent":["import React, { RefObject, useMemo } from 'react';\nimport { BaseMessage, FileMessage, UserMessage } from '@sendbird/chat/message';\n\nimport './index.scss';\nimport ThreadListItem from './ThreadListItem';\nimport { useThreadContext } from '../../context/ThreadProvider';\nimport { compareMessagesForGrouping } from '../../context/utils';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { isSameDay } from 'date-fns';\nimport { MessageProvider } from '../../../Message/context/MessageProvider';\n\nexport interface ThreadListProps {\n  className?: string;\n  allThreadMessages: Array<UserMessage | FileMessage | BaseMessage>;\n  renderMessage?: (props: {\n    message: UserMessage | FileMessage,\n    chainTop: boolean,\n    chainBottom: boolean,\n    hasSeparator: boolean,\n  }) => React.ReactElement;\n  renderCustomSeparator?: (props: { message: UserMessage | FileMessage }) => React.ReactElement;\n  scrollRef?: RefObject<HTMLDivElement>;\n  scrollBottom?: number;\n}\n\nexport default function ThreadList({\n  className,\n  allThreadMessages,\n  renderMessage,\n  renderCustomSeparator,\n  scrollRef,\n  scrollBottom,\n}: ThreadListProps): React.ReactElement {\n  const { config } = useSendbirdStateContext();\n  const { replyType, userId } = config;\n  const {\n    currentChannel,\n  } = useThreadContext();\n\n  const MemorizedMessage = useMemo(() => ({\n    message,\n    chainTop,\n    chainBottom,\n    hasSeparator,\n  }) => {\n\n    if (typeof renderMessage === 'function') {\n      return renderMessage({\n        message: message as UserMessage | FileMessage,\n        chainTop,\n        chainBottom,\n        hasSeparator,\n      });\n    }\n    return null;\n  }, [renderMessage]);\n\n  return (\n    <div className={`sendbird-thread-list ${className}`}>\n      {allThreadMessages.map((message, idx) => {\n        const isByMe = (message as UserMessage)?.sender?.userId === userId;\n        const prevMessage = allThreadMessages[idx - 1];\n        const nextMessage = allThreadMessages[idx + 1];\n        // eslint-disable-next-line no-constant-condition\n        const [chainTop, chainBottom] = true// isMessageGroupingEnabled\n          ? compareMessagesForGrouping(\n            prevMessage as UserMessage | FileMessage,\n            message as UserMessage | FileMessage,\n            nextMessage as UserMessage | FileMessage,\n            currentChannel,\n            replyType,\n          )\n          : [false, false];\n        const hasSeparator = !(prevMessage?.createdAt > 0 && (\n          isSameDay(message?.createdAt, prevMessage?.createdAt)\n        ));\n\n        const handleScroll = () => {\n          const current = scrollRef?.current;\n          if (current) {\n            const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;\n            if (scrollBottom < bottom) {\n              current.scrollTop += bottom - scrollBottom;\n            }\n          }\n        };\n\n        return (\n          <MessageProvider message={message} isByMe={isByMe} key={message?.messageId}>\n            {\n              MemorizedMessage({\n                message,\n                chainTop,\n                chainBottom,\n                hasSeparator,\n              }) || (\n                <ThreadListItem\n                  message={message as UserMessage | FileMessage}\n                  chainTop={chainTop}\n                  chainBottom={chainBottom}\n                  hasSeparator={hasSeparator}\n                  renderCustomSeparator={renderCustomSeparator}\n                  handleScroll={handleScroll}\n                />\n              )\n            }\n          </MessageProvider>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["ThreadList","_ref","className","allThreadMessages","renderMessage","renderCustomSeparator","scrollRef","scrollBottom","config","useSendbirdStateContext","replyType","userId","currentChannel","useThreadContext","MemorizedMessage","useMemo","_ref2","message","chainTop","chainBottom","hasSeparator","React","createElement","map","idx","_sender","isByMe","sender","prevMessage","nextMessage","compareMessagesForGrouping","createdAt","isSameDay","handleScroll","current","bottom","scrollHeight","scrollTop","offsetHeight","MessageProvider","key","messageId","ThreadListItem"],"mappings":"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"}
+{"version":3,"file":"ThreadList.js","sources":["../../../../src/modules/Thread/components/ThreadList/index.tsx"],"sourcesContent":["import React, { RefObject, useMemo } from 'react';\nimport { BaseMessage, FileMessage, UserMessage } from '@sendbird/chat/message';\n\nimport './index.scss';\nimport ThreadListItem from './ThreadListItem';\nimport { useThreadContext } from '../../context/ThreadProvider';\nimport { compareMessagesForGrouping } from '../../context/utils';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { isSameDay } from 'date-fns';\nimport { MessageProvider } from '../../../Message/context/MessageProvider';\n\nexport interface ThreadListProps {\n  className?: string;\n  allThreadMessages: Array<UserMessage | FileMessage | BaseMessage>;\n  renderMessage?: (props: {\n    message: UserMessage | FileMessage,\n    chainTop: boolean,\n    chainBottom: boolean,\n    hasSeparator: boolean,\n  }) => React.ReactElement;\n  renderCustomSeparator?: (props: { message: UserMessage | FileMessage }) => React.ReactElement;\n  scrollRef?: RefObject<HTMLDivElement>;\n  scrollBottom?: number;\n}\n\nexport default function ThreadList({\n  className,\n  allThreadMessages,\n  renderMessage,\n  renderCustomSeparator,\n  scrollRef,\n  scrollBottom,\n}: ThreadListProps): React.ReactElement {\n  const { config } = useSendbirdStateContext();\n  const { replyType, userId } = config;\n  const {\n    currentChannel,\n  } = useThreadContext();\n\n  const MemorizedMessage = useMemo(() => ({\n    message,\n    chainTop,\n    chainBottom,\n    hasSeparator,\n  }) => {\n\n    if (typeof renderMessage === 'function') {\n      return renderMessage({\n        message: message as UserMessage | FileMessage,\n        chainTop,\n        chainBottom,\n        hasSeparator,\n      });\n    }\n    return null;\n  }, [renderMessage]);\n\n  return (\n    <div className={`sendbird-thread-list ${className}`}>\n      {allThreadMessages.map((message, idx) => {\n        const isByMe = (message as UserMessage)?.sender?.userId === userId;\n        const prevMessage = allThreadMessages[idx - 1];\n        const nextMessage = allThreadMessages[idx + 1];\n        // eslint-disable-next-line no-constant-condition\n        const [chainTop, chainBottom] = true// isMessageGroupingEnabled\n          ? compareMessagesForGrouping(\n            prevMessage as UserMessage | FileMessage,\n            message as UserMessage | FileMessage,\n            nextMessage as UserMessage | FileMessage,\n            currentChannel,\n            replyType,\n          )\n          : [false, false];\n        const hasSeparator = !(prevMessage?.createdAt > 0 && (\n          isSameDay(message?.createdAt, prevMessage?.createdAt)\n        ));\n\n        const handleScroll = () => {\n          const current = scrollRef?.current;\n          if (current) {\n            const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;\n            if (scrollBottom < bottom) {\n              current.scrollTop += bottom - scrollBottom;\n            }\n          }\n        };\n\n        return (\n          <MessageProvider message={message} isByMe={isByMe} key={message?.messageId}>\n            {\n              MemorizedMessage({\n                message,\n                chainTop,\n                chainBottom,\n                hasSeparator,\n              }) || (\n                <ThreadListItem\n                  message={message as UserMessage | FileMessage}\n                  chainTop={chainTop}\n                  chainBottom={chainBottom}\n                  hasSeparator={hasSeparator}\n                  renderCustomSeparator={renderCustomSeparator}\n                  handleScroll={handleScroll}\n                />\n              )\n            }\n          </MessageProvider>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["ThreadList","_ref","className","allThreadMessages","renderMessage","renderCustomSeparator","scrollRef","scrollBottom","config","useSendbirdStateContext","replyType","userId","currentChannel","useThreadContext","MemorizedMessage","useMemo","_ref2","message","chainTop","chainBottom","hasSeparator","React","createElement","map","idx","_sender","isByMe","sender","prevMessage","nextMessage","compareMessagesForGrouping","createdAt","isSameDay","handleScroll","current","bottom","scrollHeight","scrollTop","offsetHeight","MessageProvider","key","messageId","ThreadListItem"],"mappings":"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"}

package/cjs/Thread/components/ThreadListItem.js

@@ -1,26 +1,27 @@
 'use strict';
 
 var React = require('react');
-var index$1 = require('../../index-be9c5a7d.js');
-var LocalizationContext = require('../../LocalizationContext-4fa55e6b.js');
+var index$1 = require('../../index-bf4e62fb.js');
+var LocalizationContext = require('../../LocalizationContext-df436a16.js');
 var ui_DateSeparator = require('../../ui/DateSeparator.js');
-var ui_Label = require('../../index-22bdf04e.js');
-var RemoveMessageModal = require('../../RemoveMessageModal-3535563a.js');
+var ui_Label = require('../../index-c89616c9.js');
+var RemoveMessageModal = require('../../RemoveMessageModal-bcf3c6fe.js');
 var ui_FileViewer = require('../../ui/FileViewer.js');
-var Thread_context = require('../../ThreadProvider-d38505b4.js');
+var Thread_context = require('../../ThreadProvider-654b9db0.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
 var Channel_components_SuggestedMentionList = require('../../Channel/components/SuggestedMentionList.js');
 var ui_MessageInput = require('../../ui/MessageInput.js');
 var Thread_context_types = require('../context/types.js');
-var _const = require('../../const-75153738.js');
+var _const = require('../../const-0a12bf51.js');
+var _rollupPluginBabelHelpers = require('../../_rollupPluginBabelHelpers-5fad415d.js');
 var ui_ContextMenu = require('../../ui/ContextMenu.js');
 var ui_Avatar = require('../../ui/Avatar.js');
-var UserProfileContext = require('../../UserProfileContext-83eaf6e8.js');
+var UserProfileContext = require('../../UserProfileContext-0c255fa6.js');
 var ui_UserProfile = require('../../ui/UserProfile.js');
 var ui_MessageItemMenu = require('../../ui/MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('../../ui/MessageItemReactionMenu.js');
-var index = require('../../index-265937df.js');
-var ui_MessageStatus = require('../../index-01768a5e.js');
+var index = require('../../index-33b67e46.js');
+var ui_MessageStatus = require('../../index-4881e776.js');
 var ui_EmojiReactions = require('../../ui/EmojiReactions.js');
 var ui_TextMessageItemBody = require('../../ui/TextMessageItemBody.js');
 var ui_OGMessageItemBody = require('../../ui/OGMessageItemBody.js');
@@ -28,55 +29,61 @@ var ui_FileMessageItemBody = require('../../ui/FileMessageItemBody.js');
 var ui_ThumbnailMessageItemBody = require('../../ui/ThumbnailMessageItemBody.js');
 var ui_UnknownMessageItemBody = require('../../ui/UnknownMessageItemBody.js');
 var ui_VoiceMessageItemBody = require('../../ui/VoiceMessageItemBody.js');
-var types = require('../../types-df20b895.js');
-require('../../index-47e4bdbc.js');
-require('../../stringSet-c24927d9.js');
-require('../../color-83cbca20.js');
+var MediaQueryContext = require('../../MediaQueryContext-f1e8fdbc.js');
+var useLongPress = require('../../useLongPress-68ad7161.js');
+var index$2 = require('../../index-6e05ddef.js');
+var types = require('../../types-ef51254c.js');
+var useDirtyGetMentions = require('../../useDirtyGetMentions-cc7de01f.js');
+var Channel_context = require('../../ChannelProvider-da7b08a1.js');
+require('../../index-0f42efcf.js');
+require('../../stringSet-d7f78de0.js');
+require('../../color-026d07a6.js');
 require('prop-types');
 require('../../ui/Modal.js');
 require('react-dom');
-require('../../index-10d8f30f.js');
+require('../../index-dd9bc361.js');
 require('../../ui/Button.js');
 require('../../ui/Icon.js');
 require('../../ui/IconButton.js');
-require('../../_rollupPluginBabelHelpers-2c0fc9c3.js');
-require('../../MediaQueryContext-e443379e.js');
 require('../../utils/message/getOutgoingMessageState.js');
 require('../../ui/ImageRenderer.js');
-require('../../uuid-c854e2a9.js');
+require('../../uuid-2953f4dd.js');
 require('@sendbird/chat');
-require('../../topics-0df2f6f9.js');
+require('../../topics-2431bb78.js');
 require('@sendbird/chat/groupChannel');
 require('@sendbird/chat/message');
-require('../../consts-0db2bedc.js');
+require('../../consts-297fdae1.js');
 require('../../withSendbird.js');
-require('../../ChannelProvider-5366f030.js');
-require('../../compareIds-c2907ec8.js');
-require('../../const-17970c49.js');
+require('../../const-692d0039.js');
+require('../../compareIds-f064c47d.js');
 require('dompurify');
-require('../../consts-d2103ed5.js');
-require('../../consts-aaf1208c.js');
-require('../../consts-5ead6f3b.js');
-require('../../tokenize-1441f448.js');
+require('../../consts-2f667487.js');
+require('../../consts-f0dc64d0.js');
+require('../../consts-25fc4351.js');
+require('../../tokenize-595877b4.js');
 require('../../ui/SortByRow.js');
 require('../../sendbirdSelectors.js');
-require('../../utils-a1fead2f.js');
+require('../../utils-279e7553.js');
 require('../../ui/ReactionButton.js');
 require('../../ui/Loader.js');
-require('../../index-c8c25288.js');
-require('../../index-41ce4c44.js');
+require('../../index-21392a2e.js');
+require('../../index-80fc14fe.js');
+require('../../ui/ReactionBadge.js');
+require('../../ui/BottomSheet.js');
+require('../../ui/UserListItem.js');
+require('../../ui/MutedAvatarOverlay.js');
+require('../../ui/Checkbox.js');
 require('../../ui/Tooltip.js');
 require('../../ui/TooltipWrapper.js');
-require('../../ui/ReactionBadge.js');
-require('../../index-61c3208b.js');
-require('../../index.module-3e7701ca.js');
 require('../../Message/context.js');
+require('../../index-450be53e.js');
+require('../../index.module-e5552393.js');
 require('../../ui/MentionLabel.js');
 require('../../ui/LinkLabel.js');
 require('../../ui/TextButton.js');
 require('../../ui/ProgressBar.js');
 require('../../VoicePlayer/useVoicePlayer.js');
-require('../../index-09f8f2a4.js');
+require('../../index-12ce8274.js');
 require('../../VoiceRecorder/context.js');
 require('../../ui/PlaybackTime.js');
 
@@ -108,6 +115,9 @@ function ThreadListItemContent(_ref) {
     onReplyInThread
   } = _ref;
   const messageTypes = index.getUIKitMessageTypes();
+  const {
+    isMobile
+  } = MediaQueryContext.useMediaQueryContext();
   const {
     dateLocale
   } = LocalizationContext.useLocalization();
@@ -121,8 +131,22 @@ function ThreadListItemContent(_ref) {
   const useReplying = !!((replyType === 'QUOTE_REPLY' || replyType === 'THREAD') && message !== null && message !== void 0 && message.parentMessageId && message !== null && message !== void 0 && message.parentMessage && !disableQuoteMessage);
   const supposedHoverClassName = supposedHover ? 'sendbird-mouse-hover' : '';
   const isReactionEnabledInChannel = isReactionEnabled && !(channel !== null && channel !== void 0 && channel.isEphemeral);
+
+  // Mobile
+  const mobileMenuRef = React.useRef(null);
+  const [showMobileMenu, setShowMobileMenu] = React.useState(false);
+  const longPress = useLongPress.useLongPress({
+    onLongPress: () => {
+      if (isMobile) {
+        setShowMobileMenu(true);
+      }
+    }
+  }, {
+    shouldPreventDefault: false
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `sendbird-thread-list-item-content ${className} ${isByMe ? 'outgoing' : 'incoming'}`
+    className: `sendbird-thread-list-item-content ${className} ${isByMe ? 'outgoing' : 'incoming'}`,
+    ref: mobileMenuRef
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `sendbird-thread-list-item-content__left ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'}`
   }, !isByMe && !chainBottom && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
@@ -159,7 +183,7 @@ function ThreadListItemContent(_ref) {
       user: message === null || message === void 0 ? void 0 : message.sender,
       onSuccess: closeDropdown
     }))
-  }), isByMe && /*#__PURE__*/React__default["default"].createElement("div", {
+  }), isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `sendbird-thread-list-item-content-menu ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'} ${supposedHoverClassName}`
   }, /*#__PURE__*/React__default["default"].createElement(ui_MessageItemMenu, {
     className: "sendbird-thread-list-item-content-menu__normal-menu",
@@ -181,9 +205,9 @@ function ThreadListItemContent(_ref) {
     emojiContainer: emojiContainer,
     toggleReaction: toggleReaction,
     setSupposedHover: setSupposedHover
-  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }))), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
     className: "sendbird-thread-list-item-content__middle"
-  }, !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+  }, isMobile ? _rollupPluginBabelHelpers._objectSpread2({}, longPress) : {}), !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-thread-list-item-content__middle__sender-name",
     type: ui_Label.LabelTypography.CAPTION_2,
     color: ui_Label.LabelColors.ONBACKGROUND_2
@@ -232,7 +256,7 @@ function ThreadListItemContent(_ref) {
     isReactionEnabled: isReactionEnabledInChannel,
     showFileViewer: showFileViewer,
     style: {
-      width: '200px',
+      width: isMobile ? '100%' : '200px',
       height: '148px'
     }
   }), index.getUIKitMessageType(message) === messageTypes.UNKNOWN && /*#__PURE__*/React__default["default"].createElement(ui_UnknownMessageItemBody, {
@@ -245,6 +269,7 @@ function ThreadListItemContent(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(ui_EmojiReactions, {
     userId: userId,
     message: message,
+    channel: channel,
     isByMe: isByMe,
     emojiContainer: emojiContainer,
     memberNicknamesMap: nicknamesMap,
@@ -257,7 +282,7 @@ function ThreadListItemContent(_ref) {
     locale: dateLocale
   })))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `sendbird-thread-list-item-content__right ${chainTop ? 'chain-top' : ''} ${isByMe ? 'outgoing' : 'incoming'}`
-  }, !isByMe && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !isByMe && !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `sendbird-thread-list-item-content-menu ${supposedHoverClassName}`
   }, isReactionEnabledInChannel && /*#__PURE__*/React__default["default"].createElement(ui_MessageItemReactionMenu, {
     className: "sendbird-thread-list-item-content-menu__reaction-menu",
@@ -278,7 +303,23 @@ function ThreadListItemContent(_ref) {
     resendMessage: resendMessage,
     setSupposedHover: setSupposedHover,
     onReplyInThread: onReplyInThread
-  }))));
+  }))), showMobileMenu && /*#__PURE__*/React__default["default"].createElement(index$2.MobileMenu, {
+    parentRef: mobileMenuRef,
+    channel: channel,
+    message: message,
+    userId: userId,
+    replyType: replyType,
+    hideMenu: () => {
+      setShowMobileMenu(false);
+    },
+    isReactionEnabled: isReactionEnabled,
+    isByMe: isByMe,
+    emojiContainer: emojiContainer,
+    showEdit: showEdit,
+    showRemove: showRemove,
+    toggleReaction: toggleReaction,
+    isOpenedFromThread: true
+  }));
 }
 
 function ThreadListItem(_ref) {
@@ -301,7 +342,8 @@ function ThreadListItem(_ref) {
     isMentionEnabled,
     isOnline,
     replyType,
-    userMention
+    userMention,
+    logger
   } = config;
   const userId = stores === null || stores === void 0 ? void 0 : (_stores$userStore = stores.userStore) === null || _stores$userStore === void 0 ? void 0 : (_stores$userStore$use = _stores$userStore.user) === null || _stores$userStore$use === void 0 ? void 0 : _stores$userStore$use.userId;
   const {
@@ -324,7 +366,11 @@ function ThreadListItem(_ref) {
   const [showEdit, setShowEdit] = React.useState(false);
   const [showRemove, setShowRemove] = React.useState(false);
   const [showFileViewer, setShowFileViewer] = React.useState(false);
-  const usingReaction = isReactionEnabled && !(currentChannel !== null && currentChannel !== void 0 && currentChannel.isSuper) && !(currentChannel !== null && currentChannel !== void 0 && currentChannel.isBroadcast);
+  const usingReaction = Channel_context.getIsReactionEnabled({
+    globalLevel: isReactionEnabled,
+    isSuper: currentChannel.isSuper,
+    isBroadcast: currentChannel.isBroadcast
+  });
 
   // Move to message
   const messageScrollRef = React.useRef(null);
@@ -351,15 +397,13 @@ function ThreadListItem(_ref) {
   const [messageInputEvent, setMessageInputEvent] = React.useState(null);
   const [selectedUser, setSelectedUser] = React.useState(null);
   const [mentionSuggestedUsers, setMentionSuggestedUsers] = React.useState([]);
-  const [ableMention, setAbleMention] = React.useState(true);
   const displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !isMuted && !(isChannelFrozen && !(currentChannel.myRole === types.Role.OPERATOR));
-  React.useEffect(() => {
-    if ((mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) >= (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount)) {
-      setAbleMention(false);
-    } else {
-      setAbleMention(true);
-    }
-  }, [mentionedUsers]);
+  const mentionNodes = useDirtyGetMentions.useDirtyGetMentions({
+    ref: editMessageInputRef
+  }, {
+    logger
+  });
+  const ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount);
   React.useEffect(() => {
     setMentionedUsers(mentionedUsers.filter(_ref2 => {
       let {