@sendbird/uikit-react 3.3.7 → 3.4.0-rc.1

package/dist/OpenChannel/components/OpenChannelMessageList.js

@@ -0,0 +1,167 @@
+import React__default, { useRef, useState, useMemo } from 'react';
+import { i as isSameDay } from '../../index-a3d3d77a.js';
+import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
+import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-8a78af9f.js';
+import { u as useOpenChannelContext, c as compareMessagesForGrouping } from '../../OpenChannelProvider-180d3e3a.js';
+import MessagOpenChannelMessageeHoc from './OpenChannelMessage.js';
+import '../../index-6b63d598.js';
+import '../../index-5c8b0523.js';
+import 'prop-types';
+import '../../tslib.es6-96c33448.js';
+import '../../LocalizationContext-948efac4.js';
+import '../../stringSet-fbd7c37c.js';
+import '../../index-8ff79952.js';
+import '../../ui/Loader.js';
+import '../../UserProfileContext-74d60d34.js';
+import '../../compareIds-3442d021.js';
+import '../../topics-d6268256.js';
+import '@sendbird/chat';
+import '@sendbird/chat/openChannel';
+import '../../uuid-d8fc0ef1.js';
+import '../../useSendbirdStateContext.js';
+import '../../withSendbird.js';
+import '../../_rollupPluginBabelHelpers-e4ed87a8.js';
+import '../../ui/OpenchannelUserMessage.js';
+import '../../ui/Avatar.js';
+import '../../ui/ImageRenderer.js';
+import '../../ui/ContextMenu.js';
+import 'react-dom';
+import '../../ui/SortByRow.js';
+import '../../index-4217213f.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../ui/IconButton.js';
+import '../../ui/UserProfile.js';
+import '../../sendbirdSelectors.js';
+import '../../utils-273068f6.js';
+import '../../ui/Button.js';
+import '../../utils-aa379202.js';
+import '../../index-cb271040.js';
+import '../../MediaQueryContext-b04e7ffd.js';
+import '../../useLongPress-96570844.js';
+import '../../ui/OpenChannelAdminMessage.js';
+import '../../ui/OpenchannelOGMessage.js';
+import '../../ui/LinkLabel.js';
+import '../../ui/Word.js';
+import '../../ui/MentionLabel.js';
+import '../../ui/OpenchannelThumbnailMessage.js';
+import '../../ui/OpenchannelFileMessage.js';
+import '../../ui/TextButton.js';
+import '../../color-206fa031.js';
+import '../../ui/DateSeparator.js';
+import '../../ui/MessageInput.js';
+import 'react-dom/server';
+import '../../const-78033061.js';
+import '../../const-8f606c40.js';
+import '../../ui/MentionUserLabel.js';
+import '../../ui/FileViewer.js';
+import '../../index-39098053.js';
+import '../../ui/Modal.js';
+
+function OpenchannelMessageList(props, ref) {
+  var _a = useOpenChannelContext(),
+      _b = _a.isMessageGroupingEnabled,
+      isMessageGroupingEnabled = _b === void 0 ? true : _b,
+      allMessages = _a.allMessages,
+      hasMore = _a.hasMore,
+      onScroll = _a.onScroll;
+
+  var scrollRef = ref || useRef(null);
+
+  var _c = useState(false),
+      showScrollDownButton = _c[0],
+      setShowScrollDownButton = _c[1];
+
+  var handleOnScroll = function (e) {
+    var element = e.target;
+    var scrollTop = element.scrollTop,
+        scrollHeight = element.scrollHeight,
+        clientHeight = element.clientHeight;
+
+    if (scrollHeight > scrollTop + clientHeight + 1) {
+      setShowScrollDownButton(true);
+    } else {
+      setShowScrollDownButton(false);
+    }
+
+    if (!hasMore) {
+      return;
+    }
+
+    if (scrollTop === 0) {
+      var nodes = scrollRef.current.querySelectorAll('.sendbird-msg--scroll-ref');
+      var first_1 = nodes && nodes[0];
+      onScroll(function () {
+        try {
+          first_1.scrollIntoView();
+        } catch (error) {}
+      });
+    }
+  };
+
+  var scrollToBottom = function () {
+    if (scrollRef && scrollRef.current) {
+      scrollRef.current.scrollTo(0, scrollRef.current.scrollHeight);
+      setShowScrollDownButton(false);
+    }
+  };
+
+  var memoizedMessageList = useMemo(function () {
+    var _a;
+
+    if (allMessages.length > 0) {
+      return allMessages.map(function (message, index) {
+        var previousMessage = allMessages[index - 1];
+        var nextMessage = allMessages[index - 1];
+        var previousMessageCreatedAt = previousMessage && previousMessage.createdAt;
+        var currentCreatedAt = message === null || message === void 0 ? void 0 : message.createdAt; // https://stackoverflow.com/a/41855608
+
+        var hasSeparator = !(previousMessageCreatedAt && isSameDay(currentCreatedAt, previousMessageCreatedAt));
+
+        var _a = isMessageGroupingEnabled ? compareMessagesForGrouping(previousMessage, message, nextMessage) : [false, false],
+            chainTop = _a[0],
+            chainBottom = _a[1];
+
+        return /*#__PURE__*/React__default.createElement(MessagOpenChannelMessageeHoc, {
+          key: (message === null || message === void 0 ? void 0 : message.messageId) || (message === null || message === void 0 ? void 0 : message.reqId),
+          message: message,
+          chainTop: chainTop,
+          chainBottom: chainBottom,
+          hasSeparator: hasSeparator,
+          renderMessage: props === null || props === void 0 ? void 0 : props.renderMessage
+        });
+      });
+    }
+
+    return ((_a = props === null || props === void 0 ? void 0 : props.renderPlaceHolderEmptyList) === null || _a === void 0 ? void 0 : _a.call(props)) || /*#__PURE__*/React__default.createElement(PlaceHolder, {
+      className: "sendbird-openchannel-conversation-scroll__container__place-holder",
+      type: PlaceHolderTypes.NO_MESSAGES
+    });
+  }, [allMessages]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-openchannel-conversation-scroll"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-openchannel-conversation-scroll__container"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-openchannel-conversation-scroll__container__padding"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: ['sendbird-openchannel-conversation-scroll__container__item-container', allMessages.length > 0 ? '' : 'no-messages'].join(' '),
+    onScroll: handleOnScroll,
+    ref: scrollRef
+  }, memoizedMessageList)), showScrollDownButton && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-openchannel-conversation-scroll__container__scroll-bottom-button",
+    onClick: scrollToBottom,
+    onKeyDown: scrollToBottom,
+    tabIndex: 0,
+    role: "button"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    width: "24px",
+    height: "24px",
+    type: IconTypes.CHEVRON_DOWN,
+    fillColor: IconColors.CONTENT
+  })));
+}
+
+var OpenChannelMessageList = /*#__PURE__*/React__default.forwardRef(OpenchannelMessageList);
+
+export { OpenChannelMessageList as default };
+//# sourceMappingURL=OpenChannelMessageList.js.map

package/dist/OpenChannel/components/OpenChannelUI.js

@@ -0,0 +1,118 @@
+import React__default from 'react';
+import { u as useOpenChannelContext } from '../../OpenChannelProvider-180d3e3a.js';
+import OpenChannelInput from './OpenChannelInput.js';
+import FrozenNotification from './FrozenChannelNotification.js';
+import OpenchannelConversationHeader from './OpenChannelHeader.js';
+import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-8a78af9f.js';
+import OpenChannelMessageList from './OpenChannelMessageList.js';
+import '../../index-6b63d598.js';
+import '../../index-5c8b0523.js';
+import '../../UserProfileContext-74d60d34.js';
+import 'prop-types';
+import '../../tslib.es6-96c33448.js';
+import '../../compareIds-3442d021.js';
+import '../../topics-d6268256.js';
+import '@sendbird/chat';
+import '@sendbird/chat/openChannel';
+import '../../uuid-d8fc0ef1.js';
+import '../../useSendbirdStateContext.js';
+import '../../withSendbird.js';
+import '../../_rollupPluginBabelHelpers-e4ed87a8.js';
+import '../../LocalizationContext-948efac4.js';
+import '../../stringSet-fbd7c37c.js';
+import '../../ui/MessageInput.js';
+import 'react-dom/server';
+import '../../const-78033061.js';
+import '../../const-8f606c40.js';
+import '../../ui/IconButton.js';
+import '../../ui/Button.js';
+import '../../index-8ff79952.js';
+import '../../ui/MentionUserLabel.js';
+import '../../ui/Icon.js';
+import '../../index-4217213f.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../ui/Avatar.js';
+import '../../ui/ImageRenderer.js';
+import '../../MediaQueryContext-b04e7ffd.js';
+import '../../ui/Loader.js';
+import '../../index-a3d3d77a.js';
+import './OpenChannelMessage.js';
+import '../../ui/OpenchannelUserMessage.js';
+import '../../ui/ContextMenu.js';
+import 'react-dom';
+import '../../ui/SortByRow.js';
+import '../../ui/UserProfile.js';
+import '../../sendbirdSelectors.js';
+import '../../utils-273068f6.js';
+import '../../utils-aa379202.js';
+import '../../index-cb271040.js';
+import '../../useLongPress-96570844.js';
+import '../../ui/OpenChannelAdminMessage.js';
+import '../../ui/OpenchannelOGMessage.js';
+import '../../ui/LinkLabel.js';
+import '../../ui/Word.js';
+import '../../ui/MentionLabel.js';
+import '../../ui/OpenchannelThumbnailMessage.js';
+import '../../ui/OpenchannelFileMessage.js';
+import '../../ui/TextButton.js';
+import '../../color-206fa031.js';
+import '../../ui/DateSeparator.js';
+import '../../ui/FileViewer.js';
+import '../../index-39098053.js';
+import '../../ui/Modal.js';
+
+var COMPONENT_CLASS_NAME = 'sendbird-openchannel-conversation';
+
+var OpenChannelUI = function (_a) {
+  var renderMessage = _a.renderMessage,
+      renderHeader = _a.renderHeader,
+      renderInput = _a.renderInput,
+      renderPlaceHolderEmptyList = _a.renderPlaceHolderEmptyList,
+      renderPlaceHolderError = _a.renderPlaceHolderError,
+      renderPlaceHolderLoading = _a.renderPlaceHolderLoading;
+
+  var _b = useOpenChannelContext(),
+      currentOpenChannel = _b.currentOpenChannel,
+      amIBanned = _b.amIBanned,
+      loading = _b.loading,
+      isInvalid = _b.isInvalid,
+      messageInputRef = _b.messageInputRef,
+      conversationScrollRef = _b.conversationScrollRef;
+
+  if (!currentOpenChannel || !(currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.url) || amIBanned) {
+    return (renderPlaceHolderError === null || renderPlaceHolderError === void 0 ? void 0 : renderPlaceHolderError()) || /*#__PURE__*/React__default.createElement("div", {
+      className: COMPONENT_CLASS_NAME
+    }, /*#__PURE__*/React__default.createElement(PlaceHolder, {
+      type: PlaceHolderTypes.NO_CHANNELS
+    }));
+  }
+
+  if (loading) {
+    return (renderPlaceHolderLoading === null || renderPlaceHolderLoading === void 0 ? void 0 : renderPlaceHolderLoading()) || /*#__PURE__*/React__default.createElement("div", {
+      className: COMPONENT_CLASS_NAME
+    }, /*#__PURE__*/React__default.createElement(PlaceHolder, {
+      type: PlaceHolderTypes.LOADING
+    }));
+  }
+
+  if (isInvalid) {
+    return (renderPlaceHolderError === null || renderPlaceHolderError === void 0 ? void 0 : renderPlaceHolderError()) || /*#__PURE__*/React__default.createElement("div", {
+      className: COMPONENT_CLASS_NAME
+    }, /*#__PURE__*/React__default.createElement(PlaceHolder, {
+      type: PlaceHolderTypes.WRONG
+    }));
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: COMPONENT_CLASS_NAME
+  }, (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || /*#__PURE__*/React__default.createElement(OpenchannelConversationHeader, null), (currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isFrozen) && /*#__PURE__*/React__default.createElement(FrozenNotification, null), /*#__PURE__*/React__default.createElement(OpenChannelMessageList, {
+    ref: conversationScrollRef,
+    renderMessage: renderMessage,
+    renderPlaceHolderEmptyList: renderPlaceHolderEmptyList
+  }), (renderInput === null || renderInput === void 0 ? void 0 : renderInput()) || /*#__PURE__*/React__default.createElement(OpenChannelInput, {
+    ref: messageInputRef
+  }));
+};
+
+export { OpenChannelUI as default };
+//# sourceMappingURL=OpenChannelUI.js.map

package/dist/OpenChannel/context.js

@@ -0,0 +1,16 @@
+import 'react';
+export { O as OpenChannelProvider, u as useOpenChannelContext } from '../OpenChannelProvider-180d3e3a.js';
+import '../UserProfileContext-74d60d34.js';
+import '../topics-d6268256.js';
+import '../useSendbirdStateContext.js';
+import '../index-6b63d598.js';
+import '../index-5c8b0523.js';
+import '../tslib.es6-96c33448.js';
+import '../compareIds-3442d021.js';
+import '@sendbird/chat';
+import '@sendbird/chat/openChannel';
+import '../uuid-d8fc0ef1.js';
+import 'prop-types';
+import '../withSendbird.js';
+import '../_rollupPluginBabelHelpers-e4ed87a8.js';
+//# sourceMappingURL=context.js.map

package/dist/OpenChannel.js

@@ -0,0 +1,88 @@
+import React__default from 'react';
+import OpenChannelUI from './OpenChannel/components/OpenChannelUI.js';
+import { O as OpenChannelProvider } from './OpenChannelProvider-180d3e3a.js';
+import './OpenChannel/components/OpenChannelInput.js';
+import './LocalizationContext-948efac4.js';
+import './stringSet-fbd7c37c.js';
+import './index-5c8b0523.js';
+import './ui/MessageInput.js';
+import './_rollupPluginBabelHelpers-e4ed87a8.js';
+import 'react-dom/server';
+import 'prop-types';
+import './const-78033061.js';
+import './const-8f606c40.js';
+import './ui/IconButton.js';
+import './tslib.es6-96c33448.js';
+import './ui/Button.js';
+import './index-8ff79952.js';
+import './ui/MentionUserLabel.js';
+import './ui/Icon.js';
+import './index-4217213f.js';
+import './utils/message/getOutgoingMessageState.js';
+import './OpenChannel/components/FrozenChannelNotification.js';
+import './OpenChannel/components/OpenChannelHeader.js';
+import './ui/Avatar.js';
+import './ui/ImageRenderer.js';
+import './uuid-d8fc0ef1.js';
+import './MediaQueryContext-b04e7ffd.js';
+import './index-8a78af9f.js';
+import './ui/Loader.js';
+import './OpenChannel/components/OpenChannelMessageList.js';
+import './index-a3d3d77a.js';
+import './index-6b63d598.js';
+import './OpenChannel/components/OpenChannelMessage.js';
+import './ui/OpenchannelUserMessage.js';
+import './ui/ContextMenu.js';
+import 'react-dom';
+import './ui/SortByRow.js';
+import './ui/UserProfile.js';
+import './UserProfileContext-74d60d34.js';
+import './sendbirdSelectors.js';
+import './topics-d6268256.js';
+import './utils-273068f6.js';
+import './useSendbirdStateContext.js';
+import './withSendbird.js';
+import './utils-aa379202.js';
+import './index-cb271040.js';
+import './useLongPress-96570844.js';
+import './ui/OpenChannelAdminMessage.js';
+import './ui/OpenchannelOGMessage.js';
+import './ui/LinkLabel.js';
+import './ui/Word.js';
+import './ui/MentionLabel.js';
+import './ui/OpenchannelThumbnailMessage.js';
+import './ui/OpenchannelFileMessage.js';
+import './ui/TextButton.js';
+import './color-206fa031.js';
+import './ui/DateSeparator.js';
+import './ui/FileViewer.js';
+import './index-39098053.js';
+import './ui/Modal.js';
+import './compareIds-3442d021.js';
+import '@sendbird/chat';
+import '@sendbird/chat/openChannel';
+
+var OpenChannel = function (props) {
+  return /*#__PURE__*/React__default.createElement(OpenChannelProvider, {
+    channelUrl: props === null || props === void 0 ? void 0 : props.channelUrl,
+    isMessageGroupingEnabled: props === null || props === void 0 ? void 0 : props.isMessageGroupingEnabled,
+    queries: props === null || props === void 0 ? void 0 : props.queries,
+    messageLimit: props === null || props === void 0 ? void 0 : props.messageLimit,
+    onBeforeSendUserMessage: props === null || props === void 0 ? void 0 : props.onBeforeSendUserMessage,
+    onBeforeSendFileMessage: props === null || props === void 0 ? void 0 : props.onBeforeSendFileMessage,
+    onChatHeaderActionClick: props === null || props === void 0 ? void 0 : props.onChatHeaderActionClick,
+    disableUserProfile: props === null || props === void 0 ? void 0 : props.disableUserProfile,
+    renderUserProfile: props === null || props === void 0 ? void 0 : props.renderUserProfile,
+    onBackClick: props === null || props === void 0 ? void 0 : props.onBackClick
+  }, /*#__PURE__*/React__default.createElement(OpenChannelUI, {
+    renderMessage: props === null || props === void 0 ? void 0 : props.renderMessage,
+    renderHeader: props === null || props === void 0 ? void 0 : props.renderHeader,
+    renderInput: props === null || props === void 0 ? void 0 : props.renderInput,
+    renderPlaceHolderEmptyList: props === null || props === void 0 ? void 0 : props.renderPlaceHolderEmptyList,
+    renderPlaceHolderError: props === null || props === void 0 ? void 0 : props.renderPlaceHolderError,
+    renderPlaceHolderLoading: props === null || props === void 0 ? void 0 : props.renderPlaceHolderLoading
+  }));
+};
+
+export { OpenChannel as default };
+//# sourceMappingURL=OpenChannel.js.map

package/dist/OpenChannelList/components/OpenChannelListUI.js

@@ -0,0 +1,197 @@
+import React__default, { useState, useRef, useContext, useMemo } from 'react';
+import OpenChannelPreview from './OpenChannelPreview.js';
+import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-8a78af9f.js';
+import IconButton from '../../ui/IconButton.js';
+import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-8ff79952.js';
+import { u as useOpenChannelListContext, a as OpenChannelListFetchingStatus, b as OpenChannelListActionTypes } from '../../OpenChannelListProvider-13b17927.js';
+import CreateOpenChannel from '../../CreateOpenChannel.js';
+import { a as LocalizationContext } from '../../LocalizationContext-948efac4.js';
+import '../../ui/Avatar.js';
+import '../../tslib.es6-96c33448.js';
+import '../../ui/ImageRenderer.js';
+import '../../uuid-d8fc0ef1.js';
+import 'prop-types';
+import '../../ui/Loader.js';
+import '../../stringSet-fbd7c37c.js';
+import '../../topics-d6268256.js';
+import '../../useSendbirdStateContext.js';
+import '../../withSendbird.js';
+import '../../_rollupPluginBabelHelpers-e4ed87a8.js';
+import '../../CreateOpenChannel/components/CreateOpenChannelUI.js';
+import '../../ui/Button.js';
+import '../../ui/Modal.js';
+import 'react-dom';
+import '../../index-39098053.js';
+import '../../MediaQueryContext-b04e7ffd.js';
+import '../../index-5c8b0523.js';
+import '../../ui/Input.js';
+import '../../ui/TextButton.js';
+import '../../color-206fa031.js';
+import '../../CreateOpenChannel/context.js';
+
+function OpenChannelListUI(_a) {
+  var renderHeader = _a.renderHeader,
+      renderChannelPreview = _a.renderChannelPreview,
+      renderPlaceHolderEmpty = _a.renderPlaceHolderEmpty,
+      renderPlaceHolderError = _a.renderPlaceHolderError,
+      renderPlaceHolderLoading = _a.renderPlaceHolderLoading;
+
+  var _b = useState(false),
+      showCreateChannelModal = _b[0],
+      setShowCreateChannel = _b[1];
+
+  var scrollRef = useRef(null);
+
+  var _c = useOpenChannelListContext(),
+      logger = _c.logger,
+      currentChannel = _c.currentChannel,
+      allChannels = _c.allChannels,
+      fetchingStatus = _c.fetchingStatus,
+      onChannelSelected = _c.onChannelSelected,
+      fetchNextChannels = _c.fetchNextChannels,
+      refreshOpenChannelList = _c.refreshOpenChannelList,
+      openChannelListDispatcher = _c.openChannelListDispatcher;
+
+  var stringSet = useContext(LocalizationContext).stringSet;
+
+  var handleScroll = function (e) {
+    var element = e.target;
+    var scrollTop = element.scrollTop,
+        clientHeight = element.clientHeight,
+        scrollHeight = element.scrollHeight;
+
+    var isAboutSame = function (a, b, px) {
+      return Math.abs(a - b) <= px;
+    };
+
+    if (isAboutSame(clientHeight + scrollTop, scrollHeight, 10)) {
+      fetchNextChannels(function (messages) {
+        if (messages) {
+          try {
+            element.scrollTop = scrollHeight - clientHeight;
+          } catch (error) {//
+          }
+        }
+      });
+    }
+  };
+
+  var handleOnClickCreateChannel = function () {
+    setShowCreateChannel(true);
+  };
+
+  var MemoizedHeader = useMemo(function () {
+    return (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || null;
+  }, [renderHeader]);
+  var MemoizedPlaceHolder = useMemo(function () {
+    if (fetchingStatus === OpenChannelListFetchingStatus.EMPTY) {
+      return (renderPlaceHolderEmpty === null || renderPlaceHolderEmpty === void 0 ? void 0 : renderPlaceHolderEmpty()) || /*#__PURE__*/React__default.createElement(PlaceHolder, {
+        className: "sendbird-open-channel-list-ui__channel-list--place-holder--empty",
+        type: PlaceHolderTypes.NO_CHANNELS
+      });
+    }
+
+    if (fetchingStatus === OpenChannelListFetchingStatus.FETCHING) {
+      return (renderPlaceHolderLoading === null || renderPlaceHolderLoading === void 0 ? void 0 : renderPlaceHolderLoading()) || /*#__PURE__*/React__default.createElement("div", {
+        className: "sendbird-open-channel-list-ui__channel-list--place-holder--loading"
+      }, /*#__PURE__*/React__default.createElement(PlaceHolder, {
+        iconSize: "24px",
+        type: PlaceHolderTypes.LOADING
+      }));
+    }
+
+    if (fetchingStatus === OpenChannelListFetchingStatus.ERROR) {
+      return (renderPlaceHolderError === null || renderPlaceHolderError === void 0 ? void 0 : renderPlaceHolderError()) || /*#__PURE__*/React__default.createElement(PlaceHolder, {
+        className: "sendbird-open-channel-list-ui__channel-list--place-holder--error",
+        type: PlaceHolderTypes.WRONG
+      });
+    }
+
+    return null;
+  }, [fetchingStatus, renderPlaceHolderEmpty, renderPlaceHolderLoading, renderPlaceHolderError]);
+  var MemoizedAllChannels = useMemo(function () {
+    if (fetchingStatus === OpenChannelListFetchingStatus.DONE) {
+      return allChannels.map(function (channel) {
+        var isSelected = (channel === null || channel === void 0 ? void 0 : channel.url) === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url);
+
+        var handleClick = function (e) {
+          onChannelSelected === null || onChannelSelected === void 0 ? void 0 : onChannelSelected(channel, e);
+          logger.info('OpenChannelList|ChannelPreview: A channel is selected', channel);
+          openChannelListDispatcher({
+            type: OpenChannelListActionTypes.SET_CURRENT_OPEN_CHANNEL,
+            payload: channel
+          });
+        };
+
+        return renderChannelPreview ? /*#__PURE__*/React__default.createElement("div", {
+          className: "sendbird-open-channel-list-ui__channel-list__item",
+          onClick: handleClick
+        }, renderChannelPreview({
+          channel: channel,
+          isSelected: isSelected,
+          onChannelSelected: onChannelSelected
+        })) : /*#__PURE__*/React__default.createElement(OpenChannelPreview, {
+          className: "sendbird-open-channel-list-ui__channel-list__item",
+          channel: channel,
+          isSelected: isSelected,
+          onClick: handleClick,
+          key: channel === null || channel === void 0 ? void 0 : channel.url
+        });
+      });
+    }
+
+    return null;
+  }, [allChannels, allChannels.length, currentChannel]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-open-channel-list-ui"
+  }, showCreateChannelModal && /*#__PURE__*/React__default.createElement(CreateOpenChannel, {
+    closeModal: function () {
+      return setShowCreateChannel(false);
+    },
+    onCreateChannel: function (openChannel) {
+      onChannelSelected === null || onChannelSelected === void 0 ? void 0 : onChannelSelected(openChannel);
+      openChannelListDispatcher({
+        type: OpenChannelListActionTypes.CREATE_OPEN_CHANNEL,
+        payload: openChannel
+      });
+    }
+  }), MemoizedHeader || /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-open-channel-list-ui__header"
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-open-channel-list-ui__header__title",
+    type: LabelTypography.H_2,
+    color: LabelColors.ONBACKGROUND_1
+  }, stringSet.OPEN_CHANNEL_LIST__TITLE), /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "sendbird-open-channel-list-ui__header__button-refresh",
+    width: "32px",
+    height: "32px",
+    type: "button",
+    onClick: function () {
+      return refreshOpenChannelList();
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.REFRESH,
+    fillColor: IconColors.PRIMARY,
+    width: "22px",
+    height: "22px"
+  })), /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "sendbird-open-channel-list-ui__header__button-create-channel",
+    width: "32px",
+    height: "32px",
+    type: "button",
+    onClick: handleOnClickCreateChannel
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.CREATE,
+    fillColor: IconColors.PRIMARY,
+    width: "22px",
+    height: "22px"
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-open-channel-list-ui__channel-list",
+    ref: scrollRef,
+    onScroll: handleScroll
+  }, MemoizedPlaceHolder, MemoizedAllChannels));
+}
+
+export { OpenChannelListUI as default };
+//# sourceMappingURL=OpenChannelListUI.js.map

package/dist/OpenChannelList/components/OpenChannelPreview.js

@@ -0,0 +1,67 @@
+import React__default from 'react';
+import Avatar from '../../ui/Avatar.js';
+import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-8ff79952.js';
+import '../../tslib.es6-96c33448.js';
+import '../../ui/ImageRenderer.js';
+import '../../uuid-d8fc0ef1.js';
+import 'prop-types';
+import '../../stringSet-fbd7c37c.js';
+
+function OpenChannelPreview(_a) {
+  var className = _a.className,
+      isSelected = _a.isSelected,
+      channel = _a.channel,
+      onClick = _a.onClick;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-open-channel-preview ".concat(isSelected ? 'selected' : '', " ").concat(className),
+    onClick: onClick
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-open-channel-preview__cover-image"
+  }, /*#__PURE__*/React__default.createElement(Avatar, {
+    className: "sendbird-open-channel-preview__cover-image__avatar",
+    src: channel === null || channel === void 0 ? void 0 : channel.coverUrl,
+    alt: "cover-image",
+    width: "42px",
+    height: "42px",
+    customDefaultComponent: function () {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "sendbird-open-channel-preview__cover-image__avatar--default"
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.CHANNELS,
+        fillColor: IconColors.CONTENT,
+        width: "24px",
+        height: "24px"
+      }));
+    }
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-open-channel-preview__context"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-open-channel-preview__context__title"
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-open-channel-preview__context__title__channel-name ".concat((channel === null || channel === void 0 ? void 0 : channel.isFrozen) ? 'frozen' : ''),
+    type: LabelTypography.SUBTITLE_2,
+    color: isSelected ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_1
+  }, channel === null || channel === void 0 ? void 0 : channel.name), (channel === null || channel === void 0 ? void 0 : channel.isFrozen) ? /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-open-channel-preview__context__title__frozen",
+    type: IconTypes.FREEZE,
+    fillColor: IconColors.PRIMARY,
+    width: "16px",
+    height: "16px"
+  }) : ''), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-open-channel-preview__context__participants"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-open-channel-preview__context__participants__icon",
+    type: IconTypes.MEMBERS,
+    fillColor: IconColors.ON_BACKGROUND_2,
+    width: "14px",
+    height: "14px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-open-channel-preview__context__participants__count",
+    type: LabelTypography.CAPTION_3,
+    color: LabelColors.ONBACKGROUND_2
+  }, (channel === null || channel === void 0 ? void 0 : channel.participantCount) || '0'))));
+}
+
+export { OpenChannelPreview as default };
+//# sourceMappingURL=OpenChannelPreview.js.map

package/dist/OpenChannelList/context.js

@@ -0,0 +1,8 @@
+import 'react';
+import '../topics-d6268256.js';
+import '../useSendbirdStateContext.js';
+export { O as OpenChannelListProvider, c as default, u as useOpenChannelListContext } from '../OpenChannelListProvider-13b17927.js';
+import '../withSendbird.js';
+import '../_rollupPluginBabelHelpers-e4ed87a8.js';
+import '../tslib.es6-96c33448.js';
+//# sourceMappingURL=context.js.map