@sendbird/uikit-react 3.9.1-rc-2 → 3.9.1

package/cjs/OpenChannel.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var React = require('react');
+var OpenChannel_components_OpenChannelUI = require('./OpenChannel/components/OpenChannelUI.js');
+var OpenChannel_context = require('./chunks/bundle-Pq-6iw-6.js');
+require('./OpenChannel/components/OpenChannelInput.js');
+require('./chunks/bundle-6JxglfHi.js');
+require('./chunks/bundle-NItu6zWb.js');
+require('./chunks/bundle-EGiFBVbp.js');
+require('./ui/MessageInput.js');
+require('./chunks/bundle-crXcinmk.js');
+require('./chunks/bundle-otHh2GZm.js');
+require('./chunks/bundle-nrZuUm2h.js');
+require('./ui/IconButton.js');
+require('./ui/Button.js');
+require('./chunks/bundle-GBjPe_zz.js');
+require('./chunks/bundle-_FZAAyq7.js');
+require('dompurify');
+require('./chunks/bundle-6PamDVow.js');
+require('./chunks/bundle-lGiBWL17.js');
+require('./chunks/bundle-I-kMnHYy.js');
+require('./ui/Icon.js');
+require('./chunks/bundle-gEqE3TId.js');
+require('./useSendbirdStateContext.js');
+require('./withSendbird.js');
+require('./chunks/bundle-rXNfPqQR.js');
+require('./utils/message/getOutgoingMessageState.js');
+require('./chunks/bundle-0Ja4l4WD.js');
+require('./chunks/bundle-h09WWCLD.js');
+require('./OpenChannel/components/FrozenChannelNotification.js');
+require('./OpenChannel/components/OpenChannelHeader.js');
+require('./chunks/bundle-LOvxZyn6.js');
+require('./ui/ImageRenderer.js');
+require('./chunks/bundle-H1oA9eVZ.js');
+require('./chunks/bundle-af-Vhz_F.js');
+require('./chunks/bundle-Csb8JrWu.js');
+require('./ui/PlaceHolder.js');
+require('./ui/Loader.js');
+require('./OpenChannel/components/OpenChannelMessageList.js');
+require('./chunks/bundle-GnjLS8Jn.js');
+require('./chunks/bundle-Epp2z49V.js');
+require('./OpenChannel/components/OpenChannelMessage.js');
+require('./ui/OpenchannelUserMessage.js');
+require('./ui/ContextMenu.js');
+require('react-dom');
+require('./ui/SortByRow.js');
+require('./ui/UserProfile.js');
+require('./chunks/bundle-YOewBep4.js');
+require('./sendbirdSelectors.js');
+require('./chunks/bundle-P1tJL1VF.js');
+require('./chunks/bundle-6ING8CcH.js');
+require('./chunks/bundle-R3WLzhtN.js');
+require('./chunks/bundle-Ur6-okMD.js');
+require('./ui/OpenChannelAdminMessage.js');
+require('./ui/OpenchannelOGMessage.js');
+require('./ui/LinkLabel.js');
+require('./chunks/bundle-Vk8BUCRm.js');
+require('./Message/context.js');
+require('./ui/MentionLabel.js');
+require('./ui/OpenchannelThumbnailMessage.js');
+require('./ui/OpenchannelFileMessage.js');
+require('./ui/TextButton.js');
+require('./chunks/bundle-R3Ze9NdG.js');
+require('./ui/DateSeparator.js');
+require('./chunks/bundle-GHF9IYi-.js');
+require('./hooks/useModal.js');
+require('./chunks/bundle-IJoXsg7h.js');
+require('./chunks/bundle-noiyvZaq.js');
+require('./chunks/bundle-nnKzOqh3.js');
+require('./chunks/bundle-6Zb-iZx5.js');
+require('./chunks/bundle-8vsXz_gj.js');
+require('@sendbird/chat');
+require('@sendbird/chat/openChannel');
+require('./chunks/bundle-aNw5UWgi.js');
+
+var OpenChannel = function (props) {
+    return (React.createElement(OpenChannel_context.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 },
+        React.createElement(OpenChannel_components_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 })));
+};
+
+module.exports = OpenChannel;
+//# sourceMappingURL=OpenChannel.js.map

package/cjs/OpenChannelList/components/OpenChannelListUI.js

@@ -0,0 +1,116 @@
+'use strict';
+
+var React = require('react');
+var OpenChannelList_components_OpenChannelPreview = require('./OpenChannelPreview.js');
+var ui_PlaceHolder = require('../../ui/PlaceHolder.js');
+var ui_IconButton = require('../../ui/IconButton.js');
+var ui_Icon = require('../../ui/Icon.js');
+var ui_Label = require('../../chunks/bundle-GBjPe_zz.js');
+var OpenChannelList_context = require('../../chunks/bundle-_gWcsZfN.js');
+var CreateOpenChannel = require('../../CreateOpenChannel.js');
+var LocalizationContext = require('../../chunks/bundle-6JxglfHi.js');
+var consts = require('../../chunks/bundle-noiyvZaq.js');
+require('../../chunks/bundle-LOvxZyn6.js');
+require('../../chunks/bundle-crXcinmk.js');
+require('../../ui/ImageRenderer.js');
+require('../../chunks/bundle-H1oA9eVZ.js');
+require('../../chunks/bundle-af-Vhz_F.js');
+require('../../ui/Loader.js');
+require('../../chunks/bundle-gEqE3TId.js');
+require('../../chunks/bundle-NItu6zWb.js');
+require('../../chunks/bundle-EGiFBVbp.js');
+require('../../chunks/bundle-P1tJL1VF.js');
+require('../../useSendbirdStateContext.js');
+require('../../withSendbird.js');
+require('../../CreateOpenChannel/components/CreateOpenChannelUI.js');
+require('../../ui/Button.js');
+require('../../chunks/bundle-IJoXsg7h.js');
+require('react-dom');
+require('../../chunks/bundle-Csb8JrWu.js');
+require('../../ui/Input.js');
+require('../../ui/TextButton.js');
+require('../../chunks/bundle-R3Ze9NdG.js');
+require('../../CreateOpenChannel/context.js');
+
+function OpenChannelListUI(_a) {
+    var renderHeader = _a.renderHeader, renderChannelPreview = _a.renderChannelPreview, renderPlaceHolderEmpty = _a.renderPlaceHolderEmpty, renderPlaceHolderError = _a.renderPlaceHolderError, renderPlaceHolderLoading = _a.renderPlaceHolderLoading;
+    var _b = React.useState(false), showCreateChannelModal = _b[0], setShowCreateChannel = _b[1];
+    var scrollRef = React.useRef(null);
+    var _c = OpenChannelList_context.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 = React.useContext(LocalizationContext.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, consts.SCROLL_BUFFER)) {
+            fetchNextChannels(function (messages) {
+                if (messages) {
+                    try {
+                        element.scrollTop = scrollHeight - clientHeight;
+                    }
+                    catch (error) {
+                        //
+                    }
+                }
+            });
+        }
+    };
+    var handleOnClickCreateChannel = function () {
+        setShowCreateChannel(true);
+    };
+    var MemoizedHeader = React.useMemo(function () {
+        return (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || null;
+    }, [renderHeader]);
+    var MemoizedPlaceHolder = React.useMemo(function () {
+        if (fetchingStatus === OpenChannelList_context.OpenChannelListFetchingStatus.EMPTY) {
+            return (renderPlaceHolderEmpty === null || renderPlaceHolderEmpty === void 0 ? void 0 : renderPlaceHolderEmpty()) || (React.createElement(ui_PlaceHolder.default, { className: "sendbird-open-channel-list-ui__channel-list--place-holder--empty", type: ui_PlaceHolder.PlaceHolderTypes.NO_CHANNELS }));
+        }
+        if (fetchingStatus === OpenChannelList_context.OpenChannelListFetchingStatus.FETCHING) {
+            return (renderPlaceHolderLoading === null || renderPlaceHolderLoading === void 0 ? void 0 : renderPlaceHolderLoading()) || (React.createElement("div", { className: "sendbird-open-channel-list-ui__channel-list--place-holder--loading" },
+                React.createElement(ui_PlaceHolder.default, { iconSize: "24px", type: ui_PlaceHolder.PlaceHolderTypes.LOADING })));
+        }
+        if (fetchingStatus === OpenChannelList_context.OpenChannelListFetchingStatus.ERROR) {
+            return (renderPlaceHolderError === null || renderPlaceHolderError === void 0 ? void 0 : renderPlaceHolderError()) || (React.createElement(ui_PlaceHolder.default, { className: "sendbird-open-channel-list-ui__channel-list--place-holder--error", type: ui_PlaceHolder.PlaceHolderTypes.WRONG }));
+        }
+        return null;
+    }, [fetchingStatus, renderPlaceHolderEmpty, renderPlaceHolderLoading, renderPlaceHolderError]);
+    var MemoizedAllChannels = React.useMemo(function () {
+        if (fetchingStatus === OpenChannelList_context.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: OpenChannelList_context.OpenChannelListActionTypes.SET_CURRENT_OPEN_CHANNEL,
+                        payload: channel,
+                    });
+                };
+                return renderChannelPreview
+                    ? (React.createElement("div", { className: "sendbird-open-channel-list-ui__channel-list__item", onClick: handleClick }, renderChannelPreview({ channel: channel, isSelected: isSelected, onChannelSelected: onChannelSelected })))
+                    : (React.createElement(OpenChannelList_components_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 (React.createElement("div", { className: "sendbird-open-channel-list-ui" },
+        showCreateChannelModal && (React.createElement(CreateOpenChannel, { closeModal: function () { return setShowCreateChannel(false); }, onCreateChannel: function (openChannel) {
+                onChannelSelected === null || onChannelSelected === void 0 ? void 0 : onChannelSelected(openChannel);
+                openChannelListDispatcher({
+                    type: OpenChannelList_context.OpenChannelListActionTypes.CREATE_OPEN_CHANNEL,
+                    payload: openChannel,
+                });
+            } })),
+        MemoizedHeader || (React.createElement("div", { className: "sendbird-open-channel-list-ui__header" },
+            React.createElement(ui_Label.Label, { className: "sendbird-open-channel-list-ui__header__title", type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.OPEN_CHANNEL_LIST__TITLE),
+            React.createElement(ui_IconButton, { className: "sendbird-open-channel-list-ui__header__button-refresh", width: "32px", height: "32px", type: "button", onClick: function () { return refreshOpenChannelList(); } },
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.REFRESH, fillColor: ui_Icon.IconColors.PRIMARY, width: "22px", height: "22px" })),
+            React.createElement(ui_IconButton, { className: "sendbird-open-channel-list-ui__header__button-create-channel", width: "32px", height: "32px", type: "button", onClick: handleOnClickCreateChannel },
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CREATE, fillColor: ui_Icon.IconColors.PRIMARY, width: "22px", height: "22px" })))),
+        React.createElement("div", { className: "sendbird-open-channel-list-ui__channel-list", ref: scrollRef, onScroll: handleScroll },
+            MemoizedPlaceHolder,
+            MemoizedAllChannels)));
+}
+
+module.exports = OpenChannelListUI;
+//# sourceMappingURL=OpenChannelListUI.js.map

package/cjs/OpenChannelList/components/OpenChannelPreview.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var ui_Avatar = require('../../chunks/bundle-LOvxZyn6.js');
+var ui_Icon = require('../../ui/Icon.js');
+var ui_Label = require('../../chunks/bundle-GBjPe_zz.js');
+require('../../chunks/bundle-crXcinmk.js');
+require('../../ui/ImageRenderer.js');
+require('../../chunks/bundle-H1oA9eVZ.js');
+require('../../chunks/bundle-af-Vhz_F.js');
+require('../../chunks/bundle-gEqE3TId.js');
+require('../../chunks/bundle-NItu6zWb.js');
+
+function OpenChannelPreview(_a) {
+    var className = _a.className, isSelected = _a.isSelected, channel = _a.channel, onClick = _a.onClick;
+    return (React.createElement("div", { className: "sendbird-open-channel-preview ".concat(isSelected ? 'selected' : '', " ").concat(className), onClick: onClick },
+        React.createElement("div", { className: "sendbird-open-channel-preview__cover-image" },
+            React.createElement(ui_Avatar.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 (React.createElement("div", { className: "sendbird-open-channel-preview__cover-image__avatar--default" },
+                    React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CHANNELS, fillColor: ui_Icon.IconColors.CONTENT, width: "24px", height: "24px" }))); } })),
+        React.createElement("div", { className: "sendbird-open-channel-preview__context" },
+            React.createElement("div", { className: "sendbird-open-channel-preview__context__title" },
+                React.createElement(ui_Label.Label, { className: "sendbird-open-channel-preview__context__title__channel-name ".concat((channel === null || channel === void 0 ? void 0 : channel.isFrozen) ? 'frozen' : ''), type: ui_Label.LabelTypography.SUBTITLE_2, color: isSelected ? ui_Label.LabelColors.PRIMARY : ui_Label.LabelColors.ONBACKGROUND_1 }, channel === null || channel === void 0 ? void 0 : channel.name),
+                (channel === null || channel === void 0 ? void 0 : channel.isFrozen)
+                    ? (React.createElement(ui_Icon.default, { className: "sendbird-open-channel-preview__context__title__frozen", type: ui_Icon.IconTypes.FREEZE, fillColor: ui_Icon.IconColors.PRIMARY, width: "16px", height: "16px" })) : ''),
+            React.createElement("div", { className: "sendbird-open-channel-preview__context__participants" },
+                React.createElement(ui_Icon.default, { className: "sendbird-open-channel-preview__context__participants__icon", type: ui_Icon.IconTypes.MEMBERS, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: "14px", height: "14px" }),
+                React.createElement(ui_Label.Label, { className: "sendbird-open-channel-preview__context__participants__count", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, (channel === null || channel === void 0 ? void 0 : channel.participantCount) || '0')))));
+}
+
+module.exports = OpenChannelPreview;
+//# sourceMappingURL=OpenChannelPreview.js.map

package/cjs/OpenChannelList/context.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('../chunks/bundle-P1tJL1VF.js');
+require('../useSendbirdStateContext.js');
+var OpenChannelList_context = require('../chunks/bundle-_gWcsZfN.js');
+require('../withSendbird.js');
+require('../chunks/bundle-crXcinmk.js');
+
+
+
+exports.OpenChannelListProvider = OpenChannelList_context.OpenChannelListProvider;
+exports.default = OpenChannelList_context.OpenChannelListProvider$1;
+exports.useOpenChannelListContext = OpenChannelList_context.useOpenChannelListContext;
+//# sourceMappingURL=context.js.map

package/cjs/OpenChannelList.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var React = require('react');
+var OpenChannelList_components_OpenChannelListUI = require('./OpenChannelList/components/OpenChannelListUI.js');
+var OpenChannelList_context = require('./chunks/bundle-_gWcsZfN.js');
+require('./OpenChannelList/components/OpenChannelPreview.js');
+require('./chunks/bundle-LOvxZyn6.js');
+require('./chunks/bundle-crXcinmk.js');
+require('./ui/ImageRenderer.js');
+require('./chunks/bundle-H1oA9eVZ.js');
+require('./chunks/bundle-af-Vhz_F.js');
+require('./ui/Icon.js');
+require('./chunks/bundle-gEqE3TId.js');
+require('./chunks/bundle-GBjPe_zz.js');
+require('./chunks/bundle-NItu6zWb.js');
+require('./ui/PlaceHolder.js');
+require('./chunks/bundle-6JxglfHi.js');
+require('./chunks/bundle-EGiFBVbp.js');
+require('./ui/Loader.js');
+require('./ui/IconButton.js');
+require('./CreateOpenChannel.js');
+require('./CreateOpenChannel/components/CreateOpenChannelUI.js');
+require('./ui/Button.js');
+require('./chunks/bundle-IJoXsg7h.js');
+require('react-dom');
+require('./chunks/bundle-Csb8JrWu.js');
+require('./ui/Input.js');
+require('./ui/TextButton.js');
+require('./chunks/bundle-R3Ze9NdG.js');
+require('./CreateOpenChannel/context.js');
+require('./useSendbirdStateContext.js');
+require('./withSendbird.js');
+require('./chunks/bundle-noiyvZaq.js');
+require('./chunks/bundle-P1tJL1VF.js');
+
+function OpenChannelList(_a) {
+    var 
+    // provider
+    className = _a.className, queries = _a.queries, onChannelSelected = _a.onChannelSelected, 
+    // ui
+    renderHeader = _a.renderHeader, renderChannelPreview = _a.renderChannelPreview, renderPlaceHolderEmpty = _a.renderPlaceHolderEmpty, renderPlaceHolderError = _a.renderPlaceHolderError, renderPlaceHolderLoading = _a.renderPlaceHolderLoading;
+    return (React.createElement(OpenChannelList_context.OpenChannelListProvider, { className: className, queries: queries, onChannelSelected: onChannelSelected },
+        React.createElement(OpenChannelList_components_OpenChannelListUI, { renderHeader: renderHeader, renderChannelPreview: renderChannelPreview, renderPlaceHolderEmpty: renderPlaceHolderEmpty, renderPlaceHolderError: renderPlaceHolderError, renderPlaceHolderLoading: renderPlaceHolderLoading })));
+}
+
+module.exports = OpenChannelList;
+//# sourceMappingURL=OpenChannelList.js.map

package/cjs/OpenChannelSettings/components/EditDetailsModal.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('../../chunks/bundle-6JxglfHi.js');
+var pubSub_topics = require('../../chunks/bundle-P1tJL1VF.js');
+var ui_Modal = require('../../chunks/bundle-IJoXsg7h.js');
+var ui_Input = require('../../ui/Input.js');
+var ui_Avatar = require('../../chunks/bundle-LOvxZyn6.js');
+require('../../chunks/bundle-crXcinmk.js');
+var ui_Label = require('../../chunks/bundle-GBjPe_zz.js');
+var ui_Button = require('../../ui/Button.js');
+var ui_TextButton = require('../../ui/TextButton.js');
+var ui_OpenChannelAvatar = require('../../ui/OpenChannelAvatar.js');
+var OpenChannelSettings_context = require('../context.js');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+require('../../chunks/bundle-NItu6zWb.js');
+require('../../chunks/bundle-EGiFBVbp.js');
+require('react-dom');
+require('../../chunks/bundle-gEqE3TId.js');
+require('../../chunks/bundle-Csb8JrWu.js');
+require('../../ui/IconButton.js');
+require('../../ui/Icon.js');
+require('../../ui/ImageRenderer.js');
+require('../../chunks/bundle-H1oA9eVZ.js');
+require('../../chunks/bundle-af-Vhz_F.js');
+require('../../chunks/bundle-R3Ze9NdG.js');
+require('../../chunks/bundle-q4_bj8Re.js');
+require('@sendbird/chat/openChannel');
+require('../../chunks/bundle-YOewBep4.js');
+require('../../withSendbird.js');
+
+var EditDetails = function (props) {
+    var onCancel = props.onCancel;
+    var globalState = useSendbirdStateContext.useSendbirdStateContext();
+    var _a = globalState.config, logger = _a.logger, theme = _a.theme, pubSub = _a.pubSub;
+    var _b = OpenChannelSettings_context.useOpenChannelSettingsContext(), channel = _b.channel, onBeforeUpdateChannel = _b.onBeforeUpdateChannel, onChannelModified = _b.onChannelModified, setChannel = _b.setChannel;
+    var inputRef = React.useRef(null);
+    var formRef = React.useRef(null);
+    var hiddenInputRef = React.useRef(null);
+    var _c = React.useState(null), currentImg = _c[0], setCurrentImg = _c[1];
+    var _d = React.useState(null), newFile = _d[0], setNewFile = _d[1];
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var title = channel === null || channel === void 0 ? void 0 : channel.name;
+    return (React.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, titleText: stringSet.MODAL__CHANNEL_INFORMATION__TITLE, submitText: stringSet.BUTTON__SAVE, onCancel: onCancel, onSubmit: function () {
+            if (title !== '' && !inputRef.current.value) {
+                if (formRef.current.reportValidity) { // might not work in explorer
+                    formRef.current.reportValidity();
+                }
+                return;
+            }
+            var currentTitle = inputRef.current.value;
+            var currentImg = newFile;
+            logger.info('ChannelSettings: Channel information being updated');
+            var params = onBeforeUpdateChannel
+                ? onBeforeUpdateChannel(currentTitle, currentImg, channel === null || channel === void 0 ? void 0 : channel.data)
+                : {
+                    name: currentTitle,
+                    coverUrlOrImage: currentImg,
+                    data: channel === null || channel === void 0 ? void 0 : channel.data,
+                };
+            logger.info('ChannelSettings: Updating channel information', params);
+            channel === null || channel === void 0 ? void 0 : channel.updateChannel(params).then(function (updatedChannel) {
+                logger.info('ChannelSettings: Channel information update succeeded', updatedChannel);
+                onChannelModified === null || onChannelModified === void 0 ? void 0 : onChannelModified(updatedChannel);
+                setChannel(updatedChannel);
+                pubSub === null || pubSub === void 0 ? void 0 : pubSub.publish(pubSub_topics.pubSubTopics.UPDATE_OPEN_CHANNEL, updatedChannel);
+            }).catch(function (error) {
+                logger.error('ChannelSettings: Channel infomation update failed', error);
+                setChannel(null);
+            });
+            onCancel();
+        }, type: ui_Button.ButtonTypes.PRIMARY },
+        React.createElement("form", { className: "channel-profile-form", ref: formRef, onSubmit: function (e) { e.preventDefault(); } },
+            React.createElement("div", { className: "channel-profile-form__img-section" },
+                React.createElement(ui_Input.InputLabel, null, stringSet.MODAL__CHANNEL_INFORMATION__CHANNEL_IMAGE),
+                React.createElement("div", { className: "channel-profile-form__avatar" }, currentImg
+                    ? (React.createElement(ui_Avatar.Avatar, { height: "80px", width: "80px", src: currentImg })) : (React.createElement(ui_OpenChannelAvatar, { height: 80, width: 80, channel: channel, theme: theme }))),
+                React.createElement("input", { ref: hiddenInputRef, type: "file", accept: "image/gif, image/jpeg, image/png", style: { display: 'none' }, onChange: function (e) {
+                        setCurrentImg(URL.createObjectURL(e.target.files[0]));
+                        setNewFile(e.target.files[0]);
+                        hiddenInputRef.current.value = '';
+                    } }),
+                React.createElement(ui_TextButton, { className: "channel-profile-form__avatar-button", onClick: function () { return hiddenInputRef.current.click(); }, disableUnderline: true },
+                    React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BUTTON_1, color: ui_Label.LabelColors.PRIMARY }, stringSet.MODAL__CHANNEL_INFORMATION__UPLOAD))),
+            React.createElement("div", { className: "channel-profile-form__name-section" },
+                React.createElement(ui_Input.InputLabel, null, stringSet.MODAL__CHANNEL_INFORMATION__CHANNEL_NAME),
+                React.createElement(ui_Input.default, { required: title !== '', name: "channel-profile-form__name", ref: inputRef, value: title, placeHolder: stringSet.MODAL__CHANNEL_INFORMATION__INPUT__PLACE_HOLDER })))));
+};
+
+module.exports = EditDetails;
+//# sourceMappingURL=EditDetailsModal.js.map

package/cjs/OpenChannelSettings/components/OpenChannelProfile.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('../../chunks/bundle-6JxglfHi.js');
+var ui_Label = require('../../chunks/bundle-GBjPe_zz.js');
+var ui_TextButton = require('../../ui/TextButton.js');
+var ui_OpenChannelAvatar = require('../../ui/OpenChannelAvatar.js');
+var OpenChannelSettings_components_EditDetailsModal = require('./EditDetailsModal.js');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var OpenChannelSettings_context = require('../context.js');
+require('../../chunks/bundle-NItu6zWb.js');
+require('../../chunks/bundle-EGiFBVbp.js');
+require('../../chunks/bundle-crXcinmk.js');
+require('../../chunks/bundle-R3Ze9NdG.js');
+require('../../chunks/bundle-LOvxZyn6.js');
+require('../../ui/ImageRenderer.js');
+require('../../chunks/bundle-H1oA9eVZ.js');
+require('../../chunks/bundle-af-Vhz_F.js');
+require('../../ui/Icon.js');
+require('../../chunks/bundle-gEqE3TId.js');
+require('../../chunks/bundle-q4_bj8Re.js');
+require('../../chunks/bundle-P1tJL1VF.js');
+require('../../chunks/bundle-IJoXsg7h.js');
+require('react-dom');
+require('../../chunks/bundle-Csb8JrWu.js');
+require('../../ui/IconButton.js');
+require('../../ui/Button.js');
+require('../../ui/Input.js');
+require('../../withSendbird.js');
+require('@sendbird/chat/openChannel');
+require('../../chunks/bundle-YOewBep4.js');
+
+function ChannelProfile() {
+    var _a, _b;
+    var globalState = useSendbirdStateContext.useSendbirdStateContext();
+    var disabled = !((_a = globalState === null || globalState === void 0 ? void 0 : globalState.config) === null || _a === void 0 ? void 0 : _a.isOnline);
+    var theme = (_b = globalState === null || globalState === void 0 ? void 0 : globalState.config) === null || _b === void 0 ? void 0 : _b.theme;
+    var channel = OpenChannelSettings_context.useOpenChannelSettingsContext().channel;
+    var title = channel === null || channel === void 0 ? void 0 : channel.name;
+    var _c = React.useState(false), showModal = _c[0], setShowModal = _c[1];
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    return (React.createElement("div", { className: "sendbird-openchannel-profile" },
+        React.createElement("div", { className: "sendbird-openchannel-profile--inner" },
+            React.createElement("div", { className: "sendbird-openchannel-profile__avatar" },
+                React.createElement(ui_OpenChannelAvatar, { channel: channel, theme: theme, height: 80, width: 80 })),
+            React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_1, className: "sendbird-openchannel-profile__title" }, title || stringSet.OPEN_CHANNEL_SETTINGS__NO_TITLE),
+            React.createElement(ui_TextButton, { disabled: disabled, className: "sendbird-openchannel-profile__edit", onClick: function () {
+                    if (disabled) {
+                        return;
+                    }
+                    setShowModal(true);
+                }, disableUnderline: true },
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BUTTON_1, color: disabled ? ui_Label.LabelColors.ONBACKGROUND_2 : ui_Label.LabelColors.PRIMARY }, stringSet.CHANNEL_SETTING__PROFILE__EDIT)),
+            showModal && (React.createElement(OpenChannelSettings_components_EditDetailsModal, { onCancel: function () { return setShowModal(false); } })))));
+}
+
+module.exports = ChannelProfile;
+//# sourceMappingURL=OpenChannelProfile.js.map

package/cjs/OpenChannelSettings/components/OpenChannelSettingsUI.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var React = require('react');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var OpenChannelSettings_context = require('../context.js');
+var LocalizationContext = require('../../chunks/bundle-6JxglfHi.js');
+var ui_Label = require('../../chunks/bundle-GBjPe_zz.js');
+var ui_Icon = require('../../ui/Icon.js');
+var ui_PlaceHolder = require('../../ui/PlaceHolder.js');
+var OpenChannelSettings_components_OperatorUI = require('./OperatorUI.js');
+var OpenChannelSettings_components_ParticipantUI = require('../../chunks/bundle-W4NFKk4o.js');
+require('../../withSendbird.js');
+require('../../chunks/bundle-crXcinmk.js');
+require('@sendbird/chat/openChannel');
+require('../../chunks/bundle-YOewBep4.js');
+require('../../chunks/bundle-H1oA9eVZ.js');
+require('../../chunks/bundle-NItu6zWb.js');
+require('../../chunks/bundle-EGiFBVbp.js');
+require('../../chunks/bundle-gEqE3TId.js');
+require('../../ui/Loader.js');
+require('./OpenChannelProfile.js');
+require('../../ui/TextButton.js');
+require('../../chunks/bundle-R3Ze9NdG.js');
+require('../../ui/OpenChannelAvatar.js');
+require('../../chunks/bundle-LOvxZyn6.js');
+require('../../ui/ImageRenderer.js');
+require('../../chunks/bundle-af-Vhz_F.js');
+require('../../chunks/bundle-q4_bj8Re.js');
+require('./EditDetailsModal.js');
+require('../../chunks/bundle-P1tJL1VF.js');
+require('../../chunks/bundle-IJoXsg7h.js');
+require('react-dom');
+require('../../chunks/bundle-Csb8JrWu.js');
+require('../../ui/IconButton.js');
+require('../../ui/Button.js');
+require('../../ui/Input.js');
+require('../../ui/Accordion.js');
+require('../../ui/AccordionGroup.js');
+require('../../chunks/bundle-Xr9HRCcW.js');
+require('../../ui/ContextMenu.js');
+require('../../ui/SortByRow.js');
+require('../../chunks/bundle-rXNfPqQR.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../chunks/bundle-0Ja4l4WD.js');
+require('../../ui/UserListItem.js');
+require('../../ui/MutedAvatarOverlay.js');
+require('../../ui/Checkbox.js');
+require('../../ui/UserProfile.js');
+require('../../sendbirdSelectors.js');
+
+function InvalidChannel(_a) {
+    var onCloseClick = _a.onCloseClick;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    return (React.createElement("div", { className: "sendbird-openchannel-settings" },
+        React.createElement("div", { className: "sendbird-openchannel-settings__header" },
+            React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.CHANNEL_SETTING__HEADER__TITLE),
+            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CLOSE, className: "sendbird-openchannel-settings__close-icon", height: "24px", width: "24px", onClick: function () {
+                    onCloseClick();
+                } })),
+        React.createElement("div", { className: "sendbird-openchannel-settings__placeholder" },
+            React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.WRONG }))));
+}
+
+var OpenChannelUI = function (_a) {
+    var _b, _c, _d;
+    var renderOperatorUI = _a.renderOperatorUI, renderParticipantList = _a.renderParticipantList;
+    var _e = OpenChannelSettings_context.useOpenChannelSettingsContext(), channel = _e.channel, onCloseClick = _e.onCloseClick, isChannelInitialized = _e.isChannelInitialized;
+    var globalStore = useSendbirdStateContext.useSendbirdStateContext();
+    var logger = (_b = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config) === null || _b === void 0 ? void 0 : _b.logger;
+    var user = (_d = (_c = globalStore === null || globalStore === void 0 ? void 0 : globalStore.stores) === null || _c === void 0 ? void 0 : _c.userStore) === null || _d === void 0 ? void 0 : _d.user;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    if (isChannelInitialized && !channel) {
+        return (React.createElement(InvalidChannel, { onCloseClick: function () {
+                logger.info('OpenChannelSettings: Click close');
+                if (onCloseClick) {
+                    onCloseClick();
+                }
+            } }));
+    }
+    return (React.createElement("div", { className: 'sendbird-openchannel-settings' },
+        (channel === null || channel === void 0 ? void 0 : channel.isOperator(user)) && ((renderOperatorUI === null || renderOperatorUI === void 0 ? void 0 : renderOperatorUI()) || (React.createElement(OpenChannelSettings_components_OperatorUI.OperatorUI, null))),
+        !(channel === null || channel === void 0 ? void 0 : channel.isOperator(user)) && (React.createElement("div", { className: "sendbird-openchannel-settings__participant" },
+            React.createElement("div", { className: "sendbird-openchannel-settings__header" },
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.OPEN_CHANNEL_SETTINGS__PARTICIPANTS_TITLE),
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CLOSE, className: "sendbird-openchannel-settings__close-icon", height: "24px", width: "24px", onClick: function () {
+                        onCloseClick();
+                    } })),
+            (renderParticipantList === null || renderParticipantList === void 0 ? void 0 : renderParticipantList()) || (React.createElement(OpenChannelSettings_components_ParticipantUI.ParticipantList, null))))));
+};
+
+module.exports = OpenChannelUI;
+//# sourceMappingURL=OpenChannelSettingsUI.js.map