@sendbird/uikit-react 3.0.1 → 3.0.2-beta.0

package/Channel/components/MessageList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.js","sources":["../../../src/smart-components/Channel/components/MessageList/index.tsx"],"sourcesContent":["import './message-list.scss';\n\nimport React, { useState, useMemo } from 'react';\nimport isSameDay from 'date-fns/isSameDay';\n\nimport { useChannelContext } from '../../context/ChannelProvider';\nimport PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';\nimport Icon, { IconTypes, IconColors } from '../../../../ui/Icon';\nimport { compareMessagesForGrouping } from '../../context/utils';\nimport Message from '../Message';\nimport { RenderMessageProps } from '../../../../types';\nimport { isAboutSame } from '../../context/utils';\nimport uuidv4 from '../../../../utils/uuid';\n\nexport type MessageListProps = {\n  renderMessage?: (props: RenderMessageProps) => React.ReactElement;\n  renderPlaceholderEmpty?: () => React.ReactElement;\n  renderCustomSeparator?: () => React.ReactElement;\n};\n\nconst SCROLL_REF_CLASS_NAME = '.sendbird-msg--scroll-ref';\n\nconst MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {\n  const {\n    renderMessage,\n    renderPlaceholderEmpty,\n    renderCustomSeparator,\n  } = props;\n  const {\n    allMessages,\n    hasMorePrev,\n    setInitialTimeStamp,\n    setAnimatedMessageId,\n    setHighLightedMessageId,\n    isMessageGroupingEnabled,\n    scrollRef,\n    onScrollCallback,\n    onScrollDownCallback,\n    messagesDispatcher,\n    messageActionTypes,\n    currentGroupChannel,\n  } = useChannelContext();\n  const [scrollBottom, setScrollBottom] = useState(0);\n\n  const onScroll = (e) => {\n    const element = e.target;\n    const {\n      scrollTop,\n      clientHeight,\n      scrollHeight,\n    } = element;\n\n    if (scrollTop === 0) {\n      if (!hasMorePrev) {\n        return;\n      }\n      const nodes = scrollRef.current.querySelectorAll(SCROLL_REF_CLASS_NAME);\n      const first = nodes && nodes[0];\n      onScrollCallback(([messages]) => {\n        if (messages) {\n          // https://github.com/scabbiaza/react-scroll-position-on-updating-dom\n          // Set block to nearest to prevent unexpected scrolling from outer components\n          try {\n            first.scrollIntoView({ block: \"start\", inline: \"nearest\" });\n          } catch (error) {\n            //\n          }\n        }\n      });\n    }\n\n    if (isAboutSame(clientHeight + scrollTop, scrollHeight, 10)) {\n      onScrollDownCallback(([messages]) => {\n        if (messages) {\n          try {\n            element.scrollTop = scrollHeight - clientHeight;\n          } catch (error) {\n            //\n          }\n        }\n      });\n    }\n\n    // save the lastest scroll bottom value\n    if (scrollRef?.current) {\n      const current = scrollRef?.current;\n      setScrollBottom(current.scrollHeight - current.scrollTop - current.offsetHeight)\n    }\n\n    // do this later\n    setTimeout(() => {\n      // mark as read if scroll is at end\n      if (clientHeight + scrollTop === scrollHeight) {\n        messagesDispatcher({\n          type: messageActionTypes.MARK_AS_READ,\n          payload: { channel: currentGroupChannel },\n        });\n        currentGroupChannel?.markAsRead();\n      }\n    }, 500);\n  };\n\n  const onClickScrollBot = () => {\n    setInitialTimeStamp?.(null);\n    setAnimatedMessageId?.(null);\n    setHighLightedMessageId?.(null);\n    if (scrollRef?.current?.scrollTop > -1) {\n      scrollRef.current.scrollTop = scrollRef?.current?.scrollHeight - scrollRef?.current?.offsetHeight;\n    }\n  };\n\n  // Because every message components are re-rendered everytime by every scroll events\n  const memoizedAllMessages = useMemo(() => {\n    return (\n      allMessages.map((m, idx) => {\n        const previousMessage = allMessages[idx - 1];\n        const nextMessage = allMessages[idx + 1];\n        const [chainTop, chainBottom] = isMessageGroupingEnabled\n          ? compareMessagesForGrouping(previousMessage, m, nextMessage)\n          : [false, false];\n        const previousMessageCreatedAt = previousMessage?.createdAt;\n        const currentCreatedAt = m.createdAt;\n        // https://stackoverflow.com/a/41855608\n        const hasSeparator = !(previousMessageCreatedAt && (\n          isSameDay(currentCreatedAt, previousMessageCreatedAt)\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          <Message\n            handleScroll={handleScroll}\n            renderMessage={renderMessage}\n            message={m}\n            hasSeparator={hasSeparator}\n            chainTop={chainTop}\n            chainBottom={chainBottom}\n            renderCustomSeparator={renderCustomSeparator}\n            key={m.messageId + uuidv4()}\n          />\n        );\n      })\n    );\n  }, [allMessages]);\n\n  if (allMessages.length < 1) {\n    return (\n      <>\n        {\n          renderPlaceholderEmpty?.() || (\n            <PlaceHolder\n              className=\"sendbird-conversation__no-messages\"\n              type={PlaceHolderTypes.NO_MESSAGES}\n            />)\n        }\n      </>\n    );\n  }\n  return (\n    <div className=\"sendbird-conversation__messages\">\n      <div className=\"sendbird-conversation__scroll-container\">\n        <div className=\"sendbird-conversation__padding\" />\n        <div\n          className=\"sendbird-conversation__messages-padding\"\n          ref={scrollRef}\n          onScroll={onScroll}\n        >\n          {memoizedAllMessages}\n        </div>\n      </div>\n      {\n        // This flag is an unmatched variable\n        (scrollBottom > 1) && (\n          <div\n            className=\"sendbird-conversation__scroll-bottom-button\"\n            onClick={onClickScrollBot}\n            onKeyDown={onClickScrollBot}\n            tabIndex={0}\n            role=\"button\"\n          >\n            <Icon\n              width=\"24px\"\n              height=\"24px\"\n              type={IconTypes.CHEVRON_DOWN}\n              fillColor={IconColors.PRIMARY}\n            />\n          </div>\n        )\n      }\n    </div>\n  );\n};\n\nexport default MessageList;\n"],"names":["SCROLL_REF_CLASS_NAME","MessageList","props","renderMessage","renderPlaceholderEmpty","renderCustomSeparator","_a","useChannelContext","allMessages","hasMorePrev","setInitialTimeStamp","setAnimatedMessageId","setHighLightedMessageId","isMessageGroupingEnabled","scrollRef","onScrollCallback","onScrollDownCallback","messagesDispatcher","messageActionTypes","currentGroupChannel","_b","useState","scrollBottom","setScrollBottom","onScroll","e","element","target","scrollTop","clientHeight","scrollHeight","nodes","current","querySelectorAll","first_1","messages","scrollIntoView","block","inline","error","isAboutSame","offsetHeight","setTimeout","type","MARK_AS_READ","payload","channel","markAsRead","onClickScrollBot","memoizedAllMessages","useMemo","map","m","idx","previousMessage","nextMessage","compareMessagesForGrouping","chainTop","chainBottom","previousMessageCreatedAt","createdAt","currentCreatedAt","hasSeparator","isSameDay","handleScroll","bottom","React","messageId","uuidv4","length","PlaceHolderTypes","NO_MESSAGES","IconTypes","CHEVRON_DOWN","IconColors","PRIMARY"],"mappings":"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"}
+{"version":3,"file":"MessageList.js","sources":["../../../src/smart-components/Channel/components/MessageList/index.tsx"],"sourcesContent":["import './message-list.scss';\n\nimport React, { useState, useMemo } from 'react';\nimport isSameDay from 'date-fns/isSameDay';\n\nimport { useChannelContext } from '../../context/ChannelProvider';\nimport PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';\nimport Icon, { IconTypes, IconColors } from '../../../../ui/Icon';\nimport { compareMessagesForGrouping } from '../../context/utils';\nimport Message from '../Message';\nimport { RenderMessageProps } from '../../../../types';\nimport { isAboutSame } from '../../context/utils';\nimport uuidv4 from '../../../../utils/uuid';\n\nexport type MessageListProps = {\n  renderMessage?: (props: RenderMessageProps) => React.ReactElement;\n  renderPlaceholderEmpty?: () => React.ReactElement;\n  renderCustomSeparator?: () => React.ReactElement;\n};\n\nconst SCROLL_REF_CLASS_NAME = '.sendbird-msg--scroll-ref';\n\nconst MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {\n  const {\n    renderMessage,\n    renderPlaceholderEmpty,\n    renderCustomSeparator,\n  } = props;\n  const {\n    allMessages,\n    hasMorePrev,\n    setInitialTimeStamp,\n    setAnimatedMessageId,\n    setHighLightedMessageId,\n    isMessageGroupingEnabled,\n    scrollRef,\n    onScrollCallback,\n    onScrollDownCallback,\n    messagesDispatcher,\n    messageActionTypes,\n    currentGroupChannel,\n  } = useChannelContext();\n  const [scrollBottom, setScrollBottom] = useState(0);\n\n  const onScroll = (e) => {\n    const element = e.target;\n    const {\n      scrollTop,\n      clientHeight,\n      scrollHeight,\n    } = element;\n\n    if (scrollTop === 0) {\n      if (!hasMorePrev) {\n        return;\n      }\n      const nodes = scrollRef.current.querySelectorAll(SCROLL_REF_CLASS_NAME);\n      const first = nodes && nodes[0];\n      onScrollCallback(([messages]) => {\n        if (messages) {\n          // https://github.com/scabbiaza/react-scroll-position-on-updating-dom\n          // Set block to nearest to prevent unexpected scrolling from outer components\n          try {\n            first.scrollIntoView({ block: \"start\", inline: \"nearest\" });\n          } catch (error) {\n            //\n          }\n        }\n      });\n    }\n\n    if (isAboutSame(clientHeight + scrollTop, scrollHeight, 10)) {\n      onScrollDownCallback(([messages]) => {\n        if (messages) {\n          try {\n            element.scrollTop = scrollHeight - clientHeight;\n          } catch (error) {\n            //\n          }\n        }\n      });\n    }\n\n    // save the lastest scroll bottom value\n    if (scrollRef?.current) {\n      const current = scrollRef?.current;\n      setScrollBottom(current.scrollHeight - current.scrollTop - current.offsetHeight)\n    }\n\n    // do this later\n    setTimeout(() => {\n      // mark as read if scroll is at end\n      if (clientHeight + scrollTop === scrollHeight) {\n        messagesDispatcher({\n          type: messageActionTypes.MARK_AS_READ,\n          payload: { channel: currentGroupChannel },\n        });\n        try {\n          currentGroupChannel?.markAsRead();\n        } catch {\n          //\n        }\n      }\n    }, 500);\n  };\n\n  const onClickScrollBot = () => {\n    setInitialTimeStamp?.(null);\n    setAnimatedMessageId?.(null);\n    setHighLightedMessageId?.(null);\n    if (scrollRef?.current?.scrollTop > -1) {\n      scrollRef.current.scrollTop = scrollRef?.current?.scrollHeight - scrollRef?.current?.offsetHeight;\n    }\n  };\n\n  // Because every message components are re-rendered everytime by every scroll events\n  const memoizedAllMessages = useMemo(() => {\n    return (\n      allMessages.map((m, idx) => {\n        const previousMessage = allMessages[idx - 1];\n        const nextMessage = allMessages[idx + 1];\n        const [chainTop, chainBottom] = isMessageGroupingEnabled\n          ? compareMessagesForGrouping(previousMessage, m, nextMessage)\n          : [false, false];\n        const previousMessageCreatedAt = previousMessage?.createdAt;\n        const currentCreatedAt = m.createdAt;\n        // https://stackoverflow.com/a/41855608\n        const hasSeparator = !(previousMessageCreatedAt && (\n          isSameDay(currentCreatedAt, previousMessageCreatedAt)\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          <Message\n            handleScroll={handleScroll}\n            renderMessage={renderMessage}\n            message={m}\n            hasSeparator={hasSeparator}\n            chainTop={chainTop}\n            chainBottom={chainBottom}\n            renderCustomSeparator={renderCustomSeparator}\n            key={m.messageId + uuidv4()}\n          />\n        );\n      })\n    );\n  }, [allMessages]);\n\n  if (allMessages.length < 1) {\n    return (\n      <>\n        {\n          renderPlaceholderEmpty?.() || (\n            <PlaceHolder\n              className=\"sendbird-conversation__no-messages\"\n              type={PlaceHolderTypes.NO_MESSAGES}\n            />)\n        }\n      </>\n    );\n  }\n  return (\n    <div className=\"sendbird-conversation__messages\">\n      <div className=\"sendbird-conversation__scroll-container\">\n        <div className=\"sendbird-conversation__padding\" />\n        <div\n          className=\"sendbird-conversation__messages-padding\"\n          ref={scrollRef}\n          onScroll={onScroll}\n        >\n          {memoizedAllMessages}\n        </div>\n      </div>\n      {\n        // This flag is an unmatched variable\n        (scrollBottom > 1) && (\n          <div\n            className=\"sendbird-conversation__scroll-bottom-button\"\n            onClick={onClickScrollBot}\n            onKeyDown={onClickScrollBot}\n            tabIndex={0}\n            role=\"button\"\n          >\n            <Icon\n              width=\"24px\"\n              height=\"24px\"\n              type={IconTypes.CHEVRON_DOWN}\n              fillColor={IconColors.PRIMARY}\n            />\n          </div>\n        )\n      }\n    </div>\n  );\n};\n\nexport default MessageList;\n"],"names":["SCROLL_REF_CLASS_NAME","MessageList","props","renderMessage","renderPlaceholderEmpty","renderCustomSeparator","_a","useChannelContext","allMessages","hasMorePrev","setInitialTimeStamp","setAnimatedMessageId","setHighLightedMessageId","isMessageGroupingEnabled","scrollRef","onScrollCallback","onScrollDownCallback","messagesDispatcher","messageActionTypes","currentGroupChannel","_b","useState","scrollBottom","setScrollBottom","onScroll","e","element","target","scrollTop","clientHeight","scrollHeight","nodes","current","querySelectorAll","first_1","messages","scrollIntoView","block","inline","error","isAboutSame","offsetHeight","setTimeout","type","MARK_AS_READ","payload","channel","markAsRead","onClickScrollBot","memoizedAllMessages","useMemo","map","m","idx","previousMessage","nextMessage","compareMessagesForGrouping","chainTop","chainBottom","previousMessageCreatedAt","createdAt","currentCreatedAt","hasSeparator","isSameDay","handleScroll","bottom","React","messageId","uuidv4","length","PlaceHolderTypes","NO_MESSAGES","IconTypes","CHEVRON_DOWN","IconColors","PRIMARY"],"mappings":"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"}

package/Channel/components/RemoveMessageModal.js

@@ -1,30 +1,30 @@
 import React__default, { useContext } from 'react';
 import Modal from '../../ui/Modal.js';
-import { a as ButtonTypes } from '../../index-33a103e9.js';
-import { a as LocalizationContext } from '../../LocalizationContext-7f115178.js';
-import { u as useChannelContext } from '../../ChannelProvider-01a680e0.js';
+import { a as ButtonTypes } from '../../index-cdd2789a.js';
+import { a as LocalizationContext } from '../../LocalizationContext-08cebf79.js';
+import { u as useChannelContext } from '../../ChannelProvider-21d4378a.js';
 import 'prop-types';
 import 'react-dom';
-import '../../index-201c73a9.js';
+import '../../index-8528dcd1.js';
 import '../../ui/IconButton.js';
-import '../../_rollupPluginBabelHelpers-2a8797d8.js';
+import '../../_rollupPluginBabelHelpers-9a08c8bf.js';
 import '../../ui/Icon.js';
-import '../../index-eeac3879.js';
-import '../../stringSet-a6858154.js';
-import '../../utils-5477ddbc.js';
-import '../../index-9570e69e.js';
-import '../../UserProfileContext-eccdbd50.js';
+import '../../index-0d4dcc94.js';
+import '../../stringSet-efeb1ad3.js';
+import '../../utils-0db9b91e.js';
+import '../../index-623fd405.js';
+import '../../UserProfileContext-97bec8f7.js';
 import '../../useSendbirdStateContext.js';
 import '../../withSendbird.js';
-import '../../index-e15303b6.js';
-import '../../topics-58103dff.js';
-import '../../index-a355e1d8.js';
-import '../../tslib.es6-28c0bd97.js';
-import '../../compareIds-ccf594a3.js';
-import '../../const-4674ec61.js';
-import '../../groupChannel-9bc7ca19.js';
-import '../../__bundle-7dfccc8c-62bd23b5.js';
-import '../../uuid-38ace415.js';
+import '../../index-f222d022.js';
+import '../../topics-7181983e.js';
+import '../../index-afd61eff.js';
+import '../../tslib.es6-91aa0158.js';
+import '../../compareIds-3f1a5a5a.js';
+import '../../const-a6734af7.js';
+import '../../groupChannel-10e918af.js';
+import '../../__bundle-7dfccc8c-ff995ba0.js';
+import '../../uuid-902e6498.js';
 import '../../ui/ContextMenu.js';
 import '../../ui/SortByRow.js';
 import '../../ui/ReactionButton.js';

package/Channel/components/SuggestedMentionList.js

@@ -1,26 +1,26 @@
 import React__default, { useRef, useContext, useEffect, useMemo, useState } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-eeac3879.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-0d4dcc94.js';
 import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
 import Avatar from '../../ui/Avatar.js';
-import { a as LocalizationContext } from '../../LocalizationContext-7f115178.js';
-import { u as uuidv4 } from '../../uuid-38ace415.js';
-import { u as useChannelContext } from '../../ChannelProvider-01a680e0.js';
+import { a as LocalizationContext } from '../../LocalizationContext-08cebf79.js';
+import { u as uuidv4 } from '../../uuid-902e6498.js';
+import { u as useChannelContext } from '../../ChannelProvider-21d4378a.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { U as USER_MENTION_TEMP_CHAR, M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT } from '../../const-4674ec61.js';
-import { M as MessageInputKeys } from '../../const-d3d5e7fc.js';
-import '../../_rollupPluginBabelHelpers-2a8797d8.js';
+import { U as USER_MENTION_TEMP_CHAR, M as MAX_USER_MENTION_COUNT, a as MAX_USER_SUGGESTION_COUNT } from '../../const-a6734af7.js';
+import { M as MessageInputKeys } from '../../const-b1f038b0.js';
+import '../../_rollupPluginBabelHelpers-9a08c8bf.js';
 import 'prop-types';
-import '../../stringSet-a6858154.js';
-import '../../tslib.es6-28c0bd97.js';
+import '../../stringSet-efeb1ad3.js';
+import '../../tslib.es6-91aa0158.js';
 import '../../ui/ImageRenderer.js';
-import '../../index-9570e69e.js';
-import '../../UserProfileContext-eccdbd50.js';
-import '../../index-e15303b6.js';
-import '../../topics-58103dff.js';
-import '../../index-a355e1d8.js';
-import '../../compareIds-ccf594a3.js';
-import '../../groupChannel-9bc7ca19.js';
-import '../../__bundle-7dfccc8c-62bd23b5.js';
+import '../../index-623fd405.js';
+import '../../UserProfileContext-97bec8f7.js';
+import '../../index-f222d022.js';
+import '../../topics-7181983e.js';
+import '../../index-afd61eff.js';
+import '../../compareIds-3f1a5a5a.js';
+import '../../groupChannel-10e918af.js';
+import '../../__bundle-7dfccc8c-ff995ba0.js';
 import '../../ui/ContextMenu.js';
 import 'react-dom';
 import '../../ui/SortByRow.js';

package/Channel/components/TypingIndicator.js

@@ -1,22 +1,22 @@
 import React__default, { useContext, useState, useEffect } from 'react';
-import { Y as Yr } from '../../groupChannel-9bc7ca19.js';
-import { a as LocalizationContext } from '../../LocalizationContext-7f115178.js';
-import { u as uuidv4 } from '../../uuid-38ace415.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-eeac3879.js';
-import { u as useChannelContext } from '../../ChannelProvider-01a680e0.js';
+import { Y as Yr } from '../../groupChannel-10e918af.js';
+import { a as LocalizationContext } from '../../LocalizationContext-08cebf79.js';
+import { u as uuidv4 } from '../../uuid-902e6498.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-0d4dcc94.js';
+import { u as useChannelContext } from '../../ChannelProvider-21d4378a.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import '../../__bundle-7dfccc8c-62bd23b5.js';
-import '../../stringSet-a6858154.js';
-import '../../index-9570e69e.js';
-import '../../_rollupPluginBabelHelpers-2a8797d8.js';
+import '../../__bundle-7dfccc8c-ff995ba0.js';
+import '../../stringSet-efeb1ad3.js';
+import '../../index-623fd405.js';
+import '../../_rollupPluginBabelHelpers-9a08c8bf.js';
 import 'prop-types';
-import '../../UserProfileContext-eccdbd50.js';
-import '../../index-e15303b6.js';
-import '../../topics-58103dff.js';
-import '../../index-a355e1d8.js';
-import '../../tslib.es6-28c0bd97.js';
-import '../../compareIds-ccf594a3.js';
-import '../../const-4674ec61.js';
+import '../../UserProfileContext-97bec8f7.js';
+import '../../index-f222d022.js';
+import '../../topics-7181983e.js';
+import '../../index-afd61eff.js';
+import '../../tslib.es6-91aa0158.js';
+import '../../compareIds-3f1a5a5a.js';
+import '../../const-a6734af7.js';
 import '../../ui/ContextMenu.js';
 import 'react-dom';
 import '../../ui/SortByRow.js';

package/Channel/components/UnreadCount.js

@@ -1,10 +1,10 @@
 import React__default, { useContext } from 'react';
-import { a as LocalizationContext } from '../../LocalizationContext-7f115178.js';
-import { L as Label, b as LabelColors, a as LabelTypography } from '../../index-eeac3879.js';
+import { a as LocalizationContext } from '../../LocalizationContext-08cebf79.js';
+import { L as Label, b as LabelColors, a as LabelTypography } from '../../index-0d4dcc94.js';
 import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
-import '../../stringSet-a6858154.js';
-import '../../index-9570e69e.js';
-import '../../_rollupPluginBabelHelpers-2a8797d8.js';
+import '../../stringSet-efeb1ad3.js';
+import '../../index-623fd405.js';
+import '../../_rollupPluginBabelHelpers-9a08c8bf.js';
 import 'prop-types';
 
 var UnreadCount = function UnreadCount(props) {

package/Channel/context.js

@@ -1,23 +1,23 @@
 import 'react';
-import '../UserProfileContext-eccdbd50.js';
+import '../UserProfileContext-97bec8f7.js';
 import '../useSendbirdStateContext.js';
-export { C as ChannelProvider, u as useChannelContext } from '../ChannelProvider-01a680e0.js';
+export { C as ChannelProvider, u as useChannelContext } from '../ChannelProvider-21d4378a.js';
 import 'prop-types';
 import '../withSendbird.js';
-import '../_rollupPluginBabelHelpers-2a8797d8.js';
-import '../index-e15303b6.js';
-import '../index-9570e69e.js';
-import '../topics-58103dff.js';
-import '../index-a355e1d8.js';
-import '../tslib.es6-28c0bd97.js';
-import '../compareIds-ccf594a3.js';
-import '../const-4674ec61.js';
-import '../groupChannel-9bc7ca19.js';
-import '../__bundle-7dfccc8c-62bd23b5.js';
-import '../uuid-38ace415.js';
+import '../_rollupPluginBabelHelpers-9a08c8bf.js';
+import '../index-f222d022.js';
+import '../index-623fd405.js';
+import '../topics-7181983e.js';
+import '../index-afd61eff.js';
+import '../tslib.es6-91aa0158.js';
+import '../compareIds-3f1a5a5a.js';
+import '../const-a6734af7.js';
+import '../groupChannel-10e918af.js';
+import '../__bundle-7dfccc8c-ff995ba0.js';
+import '../uuid-902e6498.js';
 import '../ui/ContextMenu.js';
-import '../index-eeac3879.js';
-import '../stringSet-a6858154.js';
+import '../index-0d4dcc94.js';
+import '../stringSet-efeb1ad3.js';
 import 'react-dom';
 import '../ui/SortByRow.js';
 import '../ui/ReactionButton.js';

package/Channel.js

@@ -1,52 +1,52 @@
 import React__default from 'react';
-import { C as ChannelProvider } from './ChannelProvider-01a680e0.js';
+import { C as ChannelProvider } from './ChannelProvider-21d4378a.js';
 import ChannelUI from './Channel/components/ChannelUI.js';
-import './UserProfileContext-eccdbd50.js';
+import './UserProfileContext-97bec8f7.js';
 import 'prop-types';
 import './useSendbirdStateContext.js';
 import './withSendbird.js';
-import './_rollupPluginBabelHelpers-2a8797d8.js';
-import './index-e15303b6.js';
-import './index-9570e69e.js';
-import './topics-58103dff.js';
-import './index-a355e1d8.js';
-import './tslib.es6-28c0bd97.js';
-import './compareIds-ccf594a3.js';
-import './const-4674ec61.js';
-import './groupChannel-9bc7ca19.js';
-import './__bundle-7dfccc8c-62bd23b5.js';
-import './uuid-38ace415.js';
+import './_rollupPluginBabelHelpers-9a08c8bf.js';
+import './index-f222d022.js';
+import './index-623fd405.js';
+import './topics-7181983e.js';
+import './index-afd61eff.js';
+import './tslib.es6-91aa0158.js';
+import './compareIds-3f1a5a5a.js';
+import './const-a6734af7.js';
+import './groupChannel-10e918af.js';
+import './__bundle-7dfccc8c-ff995ba0.js';
+import './uuid-902e6498.js';
 import './ui/ContextMenu.js';
-import './index-eeac3879.js';
-import './stringSet-a6858154.js';
+import './index-0d4dcc94.js';
+import './stringSet-efeb1ad3.js';
 import 'react-dom';
 import './ui/SortByRow.js';
 import './ui/ReactionButton.js';
 import './ui/ImageRenderer.js';
 import './ui/Icon.js';
-import './index-04458193.js';
+import './index-41a3e405.js';
 import './ui/Loader.js';
-import './LocalizationContext-7f115178.js';
+import './LocalizationContext-08cebf79.js';
 import './ui/ConnectionStatus.js';
 import './Channel/components/ChannelHeader.js';
 import './ui/IconButton.js';
 import './ui/ChannelAvatar.js';
 import './ui/Avatar.js';
-import './utils-5fe76946.js';
+import './utils-7b9c4aab.js';
 import './Channel/components/MessageList.js';
-import './index-4e2ac873.js';
+import './index-13e3837f.js';
 import './Channel/components/Message.js';
 import './Channel/components/SuggestedMentionList.js';
-import './const-d3d5e7fc.js';
+import './const-b1f038b0.js';
 import './ui/DateSeparator.js';
-import './color-1727a3fb.js';
+import './color-aef1bef8.js';
 import './ui/MessageInput.js';
-import './index-33a103e9.js';
+import './index-cdd2789a.js';
 import './ui/MentionUserLabel.js';
 import './ui/MessageContent.js';
 import './ui/UserProfile.js';
 import './sendbirdSelectors.js';
-import './utils-5477ddbc.js';
+import './utils-0db9b91e.js';
 import './ui/MessageStatus.js';
 import './ui/MessageItemMenu.js';
 import './ui/MessageItemReactionMenu.js';
@@ -66,7 +66,7 @@ import './ui/OGMessageItemBody.js';
 import './ui/UnknownMessageItemBody.js';
 import './ui/QuoteMessage.js';
 import './Channel/components/FileViewer.js';
-import './index-201c73a9.js';
+import './index-8528dcd1.js';
 import './Channel/components/RemoveMessageModal.js';
 import './ui/Modal.js';
 import './Channel/components/TypingIndicator.js';

package/ChannelList/components/AddChannel.js

@@ -3,34 +3,34 @@ import IconButton from '../../ui/IconButton.js';
 import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
 import CreateChannel from '../../CreateChannel.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import '../../_rollupPluginBabelHelpers-2a8797d8.js';
+import '../../_rollupPluginBabelHelpers-9a08c8bf.js';
 import 'prop-types';
 import '../../CreateChannel/components/CreateChannelUI.js';
-import '../../CreateChannelProvider-efa959ed.js';
+import '../../CreateChannelProvider-53259d87.js';
 import '../../sendbirdSelectors.js';
-import '../../topics-58103dff.js';
-import '../../utils-5477ddbc.js';
+import '../../topics-7181983e.js';
+import '../../utils-0db9b91e.js';
 import '../../CreateChannel/components/InviteUsers.js';
-import '../../tslib.es6-28c0bd97.js';
-import '../../LocalizationContext-7f115178.js';
-import '../../stringSet-a6858154.js';
-import '../../index-9570e69e.js';
+import '../../tslib.es6-91aa0158.js';
+import '../../LocalizationContext-08cebf79.js';
+import '../../stringSet-efeb1ad3.js';
+import '../../index-623fd405.js';
 import '../../ui/Modal.js';
 import 'react-dom';
-import '../../index-201c73a9.js';
-import '../../index-33a103e9.js';
-import '../../index-eeac3879.js';
+import '../../index-8528dcd1.js';
+import '../../index-cdd2789a.js';
+import '../../index-0d4dcc94.js';
 import '../../ui/UserListItem.js';
-import '../../UserProfileContext-eccdbd50.js';
+import '../../UserProfileContext-97bec8f7.js';
 import '../../ui/Avatar.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-38ace415.js';
+import '../../uuid-902e6498.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/Checkbox.js';
 import '../../ui/UserProfile.js';
 import '../../withSendbird.js';
 import '../../ui/ContextMenu.js';
-import '../../index-a355e1d8.js';
+import '../../index-afd61eff.js';
 import '../../ui/SortByRow.js';
 import '../../CreateChannel/components/SelectChannelType.js';
 

package/ChannelList/components/ChannelListHeader.js

@@ -1,18 +1,18 @@
 import React__default, { useContext } from 'react';
-import { a as LocalizationContext } from '../../LocalizationContext-7f115178.js';
+import { a as LocalizationContext } from '../../LocalizationContext-08cebf79.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-eeac3879.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-0d4dcc94.js';
 import IconButton from '../../ui/IconButton.js';
 import Avatar from '../../ui/Avatar.js';
-import '../../stringSet-a6858154.js';
-import '../../index-9570e69e.js';
+import '../../stringSet-efeb1ad3.js';
+import '../../index-623fd405.js';
 import '../../withSendbird.js';
-import '../../_rollupPluginBabelHelpers-2a8797d8.js';
+import '../../_rollupPluginBabelHelpers-9a08c8bf.js';
 import 'prop-types';
-import '../../tslib.es6-28c0bd97.js';
+import '../../tslib.es6-91aa0158.js';
 import '../../ui/ImageRenderer.js';
 import '../../ui/Icon.js';
-import '../../uuid-38ace415.js';
+import '../../uuid-902e6498.js';
 
 var ChannelListHeader = function ChannelListHeader(_a) {
   var _b;

package/ChannelList/components/ChannelListUI.js

@@ -1,66 +1,66 @@
-import React__default, { useState } from 'react';
+import React__default, { useState, useEffect } from 'react';
 import ChannelListHeader from './ChannelListHeader.js';
 import { AddChannel } from './AddChannel.js';
 import ChannelPreview from './ChannelPreview.js';
 import ChannelPreviewAction from './ChannelPreviewAction.js';
-import { u as useChannelListContext, F as FETCH_CHANNELS_START, a as FETCH_CHANNELS_SUCCESS, b as FETCH_CHANNELS_FAILURE, L as LEAVE_CHANNEL_SUCCESS, S as SET_CURRENT_CHANNEL } from '../../ChannelListProvider-471abb8f.js';
+import { u as useChannelListContext, F as FETCH_CHANNELS_START, a as FETCH_CHANNELS_SUCCESS, b as FETCH_CHANNELS_FAILURE, L as LEAVE_CHANNEL_SUCCESS, S as SET_CURRENT_CHANNEL } from '../../ChannelListProvider-945445c9.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
 import EditProfile from '../../EditUserProfile.js';
-import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-04458193.js';
-import '../../LocalizationContext-7f115178.js';
-import '../../stringSet-a6858154.js';
-import '../../index-9570e69e.js';
-import '../../index-eeac3879.js';
-import '../../_rollupPluginBabelHelpers-2a8797d8.js';
+import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-41a3e405.js';
+import '../../LocalizationContext-08cebf79.js';
+import '../../stringSet-efeb1ad3.js';
+import '../../index-623fd405.js';
+import '../../index-0d4dcc94.js';
+import '../../_rollupPluginBabelHelpers-9a08c8bf.js';
 import 'prop-types';
 import '../../ui/IconButton.js';
 import '../../ui/Avatar.js';
-import '../../tslib.es6-28c0bd97.js';
+import '../../tslib.es6-91aa0158.js';
 import '../../ui/ImageRenderer.js';
 import '../../ui/Icon.js';
-import '../../uuid-38ace415.js';
+import '../../uuid-902e6498.js';
 import '../../CreateChannel.js';
 import '../../CreateChannel/components/CreateChannelUI.js';
-import '../../CreateChannelProvider-efa959ed.js';
+import '../../CreateChannelProvider-53259d87.js';
 import '../../sendbirdSelectors.js';
-import '../../topics-58103dff.js';
-import '../../utils-5477ddbc.js';
+import '../../topics-7181983e.js';
+import '../../utils-0db9b91e.js';
 import '../../CreateChannel/components/InviteUsers.js';
 import '../../ui/Modal.js';
 import 'react-dom';
-import '../../index-201c73a9.js';
-import '../../index-33a103e9.js';
+import '../../index-8528dcd1.js';
+import '../../index-cdd2789a.js';
 import '../../ui/UserListItem.js';
-import '../../UserProfileContext-eccdbd50.js';
+import '../../UserProfileContext-97bec8f7.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/Checkbox.js';
 import '../../ui/UserProfile.js';
 import '../../withSendbird.js';
 import '../../ui/ContextMenu.js';
-import '../../index-a355e1d8.js';
+import '../../index-afd61eff.js';
 import '../../ui/SortByRow.js';
 import '../../CreateChannel/components/SelectChannelType.js';
 import '../../ui/ChannelAvatar.js';
-import '../../utils-5fe76946.js';
+import '../../utils-7b9c4aab.js';
 import '../../ui/Badge.js';
-import '../../index-64b4e22e.js';
-import '../../index-4e2ac873.js';
-import '../../index-e15303b6.js';
+import '../../index-cc9419b6.js';
+import '../../index-13e3837f.js';
+import '../../index-f222d022.js';
 import '../../ui/MentionUserLabel.js';
 import '../../Channel/components/TypingIndicator.js';
-import '../../groupChannel-9bc7ca19.js';
-import '../../__bundle-7dfccc8c-62bd23b5.js';
-import '../../ChannelProvider-01a680e0.js';
-import '../../compareIds-ccf594a3.js';
-import '../../const-4674ec61.js';
+import '../../groupChannel-10e918af.js';
+import '../../__bundle-7dfccc8c-ff995ba0.js';
+import '../../ChannelProvider-21d4378a.js';
+import '../../compareIds-3f1a5a5a.js';
+import '../../const-a6734af7.js';
 import '../../ui/ReactionButton.js';
 import '../../ui/MessageStatus.js';
 import '../../ui/Loader.js';
-import '../../index-b188a276.js';
+import '../../index-73193bfa.js';
 import '../../ui/Input.js';
 import '../../ui/TextButton.js';
-import '../../color-1727a3fb.js';
-import '../../actionTypes-a992088f.js';
+import '../../color-aef1bef8.js';
+import '../../actionTypes-eea40cdf.js';
 
 var DELIVERY_RECIPT = 'delivery_receipt';
 
@@ -95,6 +95,30 @@ var ChannelListUI = function ChannelListUI(props) {
   var sdk = sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.sdk;
   var sdkError = sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.error;
   var sdkIntialized = (sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.initialized) || false;
+
+  var _e = useState([]),
+      channelsTomarkAsRead = _e[0],
+      setChannelsToMarkAsRead = _e[1];
+
+  useEffect(function () {
+    // https://stackoverflow.com/a/60907638
+    var isMounted = true;
+
+    if ((channelsTomarkAsRead === null || channelsTomarkAsRead === void 0 ? void 0 : channelsTomarkAsRead.length) > 0) {
+      channelsTomarkAsRead === null || channelsTomarkAsRead === void 0 ? void 0 : channelsTomarkAsRead.forEach(function (c, idx) {
+        // Plan-based rate limits - minimum limit is 5 requests per second
+        setTimeout(function () {
+          if (isMounted) {
+            c === null || c === void 0 ? void 0 : c.markAsDelivered();
+          }
+        }, 2000 * idx);
+      });
+    }
+
+    return function () {
+      isMounted = false;
+    };
+  }, [channelsTomarkAsRead]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-channel-list__header"
   }, /*#__PURE__*/React__default.createElement(ChannelListHeader, {
@@ -143,12 +167,7 @@ var ChannelListUI = function ChannelListUI(props) {
           if (canSetMarkAsDelivered) {
             logger.info('ChannelList: Marking all channels as read'); // eslint-disable-next-line no-unused-expressions
 
-            channelList === null || channelList === void 0 ? void 0 : channelList.forEach(function (c, idx) {
-              // Plan-based rate limits - minimum limit is 5 requests per second
-              setTimeout(function () {
-                c === null || c === void 0 ? void 0 : c.markAsDelivered();
-              }, 300 * idx);
-            });
+            setChannelsToMarkAsRead(channelList);
           }
         }).catch(function (err) {
           logger.info('ChannelList: Fetching channels failed', err);