@sendbird/uikit-react 3.14.3-rc.1 → 3.14.4

package/ChannelSettings/components/ChannelSettingsUI.js

@@ -1,111 +1,114 @@
-import { _ as __assign } from '../../chunks/bundle-Dd7yWAzk.js';
+import { _ as __assign } from '../../chunks/bundle-7oF7KbGv.js';
 import React__default, { useContext, useState } from 'react';
 import { useSendbirdStateContext } from '../../useSendbirdStateContext.js';
 import { useChannelSettingsContext } from '../context.js';
 import { ChannelSettingsHeader } from './ChannelSettingsHeader.js';
 import PlaceHolder, { PlaceHolderTypes } from '../../ui/PlaceHolder.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../chunks/bundle-DjFflxR1.js';
-import { L as LocalizationContext } from '../../chunks/bundle-DW4HEvvh.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../chunks/bundle-LYAWKk4n.js';
+import { L as LocalizationContext } from '../../chunks/bundle-Bx5vhTbU.js';
 import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
 import ChannelProfile from './ChannelProfile.js';
 import ModerationPanel from './ModerationPanel.js';
 import LeaveChannel from './LeaveChannel.js';
 import UserPanel from './UserPanel.js';
-import { d as deleteNullish } from '../../chunks/bundle-ByTQtdFM.js';
+import { d as deleteNullish } from '../../chunks/bundle-ByvmbZD0.js';
 import '../../withSendbird.js';
-import '../../chunks/bundle-BZt7yK_Y.js';
-import '../../chunks/bundle-D7HxTsM2.js';
+import '../../chunks/bundle-B7barEsR.js';
+import '../../chunks/bundle-BJ46V6XQ.js';
+import '../../ui/Header.js';
+import '../../chunks/bundle-Diqj6For.js';
+import '../../ui/TextButton.js';
+import '../../chunks/bundle-HoQqraNc.js';
 import '../../ui/IconButton.js';
 import '../../ui/Loader.js';
-import '../../chunks/bundle-CwG4pj5M.js';
-import '../../chunks/bundle-DD0CjCiu.js';
+import '../../chunks/bundle-C8im5l9B.js';
+import '../../chunks/bundle-C1ds4cil.js';
 import '../../ui/ChannelAvatar.js';
-import '../../chunks/bundle-BeTPrbXl.js';
+import '../../chunks/bundle-CNJMLyGJ.js';
 import '../../ui/ImageRenderer.js';
-import '../../chunks/bundle-BCL7kk-0.js';
-import '../../chunks/bundle-D0Atuq2W.js';
-import '../../ui/TextButton.js';
-import '../../chunks/bundle-Vk50O4-7.js';
+import '../../chunks/bundle-CT8ZXUi2.js';
+import '../../chunks/bundle-_-vntp1z.js';
 import './EditDetailsModal.js';
-import '../../chunks/bundle-bTVomhqp.js';
+import '../../chunks/bundle-C4Z-NWqF.js';
+import '../../chunks/bundle-BWCGFXhj.js';
+import '@sendbird/chat/groupChannel';
+import '../../utils/message/getOutgoingMessageState.js';
 import 'react-dom';
-import '../../chunks/bundle-BrPQ1xtW.js';
 import '../../ui/Button.js';
+import '@sendbird/uikit-tools';
+import 'css-vars-ponyfill';
+import '@sendbird/chat';
+import '@sendbird/chat/openChannel';
+import '../../chunks/bundle-CIwVkd-E.js';
+import '../../chunks/bundle-CD9AzC6s.js';
+import '../../chunks/bundle-BbWD2VuS.js';
 import '../../ui/Input.js';
 import '../../ui/Accordion.js';
 import '../../ui/AccordionGroup.js';
 import '../../ui/Badge.js';
 import '../../ui/Toggle.js';
 import '../../ui/ContextMenu.js';
-import '@sendbird/chat';
-import '@sendbird/chat/openChannel';
 import '../../ui/SortByRow.js';
-import '../../chunks/bundle-Cgpa9xMh.js';
-import '@sendbird/chat/groupChannel';
-import '../../utils/message/getOutgoingMessageState.js';
-import '../../chunks/bundle-58U1RLA2.js';
 import './UserListItem.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/UserProfile.js';
 import '../../sendbirdSelectors.js';
-import '../../chunks/bundle-DtHyIHaJ.js';
+import '../../chunks/bundle-BWuyd0AD.js';
 import '../../ui/UserListItem.js';
 import '../../ui/Checkbox.js';
-import '../../chunks/bundle-C5KSa4Q_.js';
-import '../../chunks/bundle-B7UQ7Txq.js';
-import '../../chunks/bundle-BP5nTWqh.js';
+import '../../chunks/bundle-DaoHZIZy.js';
+import '../../chunks/bundle-DDkUg3Os.js';
 import '@sendbird/chat/message';
-import '@sendbird/uikit-tools';
-import '../../chunks/bundle-DvRNa17t.js';
-import '../../chunks/bundle-Dgyb-yNN.js';
+import '../../chunks/bundle-uBJzoaNT.js';
+import '../../chunks/bundle-BjrRhdgd.js';
 
-var ChannelSettingsUI = function (props) {
-    var _a;
-    var _b = deleteNullish(props), _c = _b.renderHeader, renderHeader = _c === void 0 ? function (p) { return React__default.createElement(ChannelSettingsHeader, __assign({}, p)); } : _c, renderLeaveChannel = _b.renderLeaveChannel, renderChannelProfile = _b.renderChannelProfile, renderModerationPanel = _b.renderModerationPanel, renderPlaceholderError = _b.renderPlaceholderError, renderPlaceholderLoading = _b.renderPlaceholderLoading;
-    var state = useSendbirdStateContext();
-    var isOnline = (_a = state === null || state === void 0 ? void 0 : state.config) === null || _a === void 0 ? void 0 : _a.isOnline;
-    var stringSet = useContext(LocalizationContext).stringSet;
-    var _d = useChannelSettingsContext(), channel = _d.channel, invalidChannel = _d.invalidChannel, onCloseClick = _d.onCloseClick, loading = _d.loading;
-    var _e = useState(false), showLeaveChannelModal = _e[0], setShowLeaveChannelModal = _e[1];
-    if (loading) {
-        if (renderPlaceholderLoading)
-            return renderPlaceholderLoading();
-        return React__default.createElement(PlaceHolder, { type: PlaceHolderTypes.LOADING });
-    }
-    var headerProps = { onCloseClick: onCloseClick };
-    if (invalidChannel || !channel) {
-        return (React__default.createElement("div", null,
-            renderHeader(headerProps),
-            React__default.createElement("div", null, renderPlaceholderError ? renderPlaceholderError() : React__default.createElement(PlaceHolder, { type: PlaceHolderTypes.WRONG }))));
-    }
-    return (React__default.createElement(React__default.Fragment, null,
-        renderHeader(headerProps),
-        React__default.createElement("div", { className: "sendbird-channel-settings__scroll-area" },
-            (renderChannelProfile === null || renderChannelProfile === void 0 ? void 0 : renderChannelProfile()) || React__default.createElement(ChannelProfile, null),
-            (renderModerationPanel === null || renderModerationPanel === void 0 ? void 0 : renderModerationPanel()) || ((channel === null || channel === void 0 ? void 0 : channel.myRole) === 'operator' ? React__default.createElement(ModerationPanel, null) : React__default.createElement(UserPanel, null)),
-            (renderLeaveChannel === null || renderLeaveChannel === void 0 ? void 0 : renderLeaveChannel()) || (React__default.createElement("div", { className: [
-                    'sendbird-channel-settings__panel-item',
-                    'sendbird-channel-settings__leave-channel',
-                    !isOnline ? 'sendbird-channel-settings__panel-item__disabled' : '',
-                ].join(' '), role: "button", onKeyDown: function () {
-                    if (!isOnline) {
-                        return;
-                    }
-                    setShowLeaveChannelModal(true);
-                }, onClick: function () {
-                    if (!isOnline) {
-                        return;
-                    }
-                    setShowLeaveChannelModal(true);
-                }, tabIndex: 0 },
-                React__default.createElement(Icon, { className: ['sendbird-channel-settings__panel-icon-left', 'sendbird-channel-settings__panel-icon__leave'].join(' '), type: IconTypes.LEAVE, fillColor: IconColors.ERROR, height: "24px", width: "24px" }),
-                React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.CHANNEL_SETTING__LEAVE_CHANNEL__TITLE))),
-            showLeaveChannelModal && (React__default.createElement(LeaveChannel, { onCancel: function () {
-                    setShowLeaveChannelModal(false);
-                }, onSubmit: function () {
-                    setShowLeaveChannelModal(false);
-                    onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
-                } })))));
+var ChannelSettingsUI = function (props) {
+    var _a;
+    var _b = deleteNullish(props), _c = _b.renderHeader, renderHeader = _c === void 0 ? function (p) { return React__default.createElement(ChannelSettingsHeader, __assign({}, p)); } : _c, renderLeaveChannel = _b.renderLeaveChannel, renderChannelProfile = _b.renderChannelProfile, renderModerationPanel = _b.renderModerationPanel, renderPlaceholderError = _b.renderPlaceholderError, renderPlaceholderLoading = _b.renderPlaceholderLoading;
+    var state = useSendbirdStateContext();
+    var isOnline = (_a = state === null || state === void 0 ? void 0 : state.config) === null || _a === void 0 ? void 0 : _a.isOnline;
+    var stringSet = useContext(LocalizationContext).stringSet;
+    var _d = useChannelSettingsContext(), channel = _d.channel, invalidChannel = _d.invalidChannel, onCloseClick = _d.onCloseClick, loading = _d.loading;
+    var _e = useState(false), showLeaveChannelModal = _e[0], setShowLeaveChannelModal = _e[1];
+    if (loading) {
+        if (renderPlaceholderLoading)
+            return renderPlaceholderLoading();
+        return React__default.createElement(PlaceHolder, { type: PlaceHolderTypes.LOADING });
+    }
+    var headerProps = { onCloseClick: onCloseClick };
+    if (invalidChannel || !channel) {
+        return (React__default.createElement("div", null,
+            renderHeader(headerProps),
+            React__default.createElement("div", null, renderPlaceholderError ? renderPlaceholderError() : React__default.createElement(PlaceHolder, { type: PlaceHolderTypes.WRONG }))));
+    }
+    return (React__default.createElement(React__default.Fragment, null,
+        renderHeader(headerProps),
+        React__default.createElement("div", { className: "sendbird-channel-settings__scroll-area" },
+            (renderChannelProfile === null || renderChannelProfile === void 0 ? void 0 : renderChannelProfile()) || React__default.createElement(ChannelProfile, null),
+            (renderModerationPanel === null || renderModerationPanel === void 0 ? void 0 : renderModerationPanel()) || ((channel === null || channel === void 0 ? void 0 : channel.myRole) === 'operator' ? React__default.createElement(ModerationPanel, null) : React__default.createElement(UserPanel, null)),
+            (renderLeaveChannel === null || renderLeaveChannel === void 0 ? void 0 : renderLeaveChannel()) || (React__default.createElement("div", { className: [
+                    'sendbird-channel-settings__panel-item',
+                    'sendbird-channel-settings__leave-channel',
+                    !isOnline ? 'sendbird-channel-settings__panel-item__disabled' : '',
+                ].join(' '), role: "button", onKeyDown: function () {
+                    if (!isOnline) {
+                        return;
+                    }
+                    setShowLeaveChannelModal(true);
+                }, onClick: function () {
+                    if (!isOnline) {
+                        return;
+                    }
+                    setShowLeaveChannelModal(true);
+                }, tabIndex: 0 },
+                React__default.createElement(Icon, { className: ['sendbird-channel-settings__panel-icon-left', 'sendbird-channel-settings__panel-icon__leave'].join(' '), type: IconTypes.LEAVE, fillColor: IconColors.ERROR, height: "24px", width: "24px" }),
+                React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.CHANNEL_SETTING__LEAVE_CHANNEL__TITLE))),
+            showLeaveChannelModal && (React__default.createElement(LeaveChannel, { onCancel: function () {
+                    setShowLeaveChannelModal(false);
+                }, onSubmit: function () {
+                    setShowLeaveChannelModal(false);
+                    onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
+                } })))));
 };
 
 export { ChannelSettingsUI as default };

package/ChannelSettings/components/ChannelSettingsUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelSettingsUI.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ChannelSettingsUI.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/ChannelSettings/components/EditDetailsModal.js

@@ -1,96 +1,106 @@
 import React__default, { useRef, useState, useContext } from 'react';
 import { useChannelSettingsContext } from '../context.js';
-import { L as LocalizationContext } from '../../chunks/bundle-DW4HEvvh.js';
+import { L as LocalizationContext } from '../../chunks/bundle-Bx5vhTbU.js';
 import { useSendbirdStateContext } from '../../useSendbirdStateContext.js';
-import { M as Modal } from '../../chunks/bundle-bTVomhqp.js';
+import { M as Modal } from '../../chunks/bundle-C4Z-NWqF.js';
 import Input, { InputLabel } from '../../ui/Input.js';
-import { A as Avatar } from '../../chunks/bundle-BeTPrbXl.js';
-import '../../chunks/bundle-Dd7yWAzk.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../chunks/bundle-DjFflxR1.js';
+import { A as Avatar } from '../../chunks/bundle-CNJMLyGJ.js';
+import '../../chunks/bundle-7oF7KbGv.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../chunks/bundle-LYAWKk4n.js';
 import { ButtonTypes } from '../../ui/Button.js';
 import TextButton from '../../ui/TextButton.js';
 import ChannelAvatar from '../../ui/ChannelAvatar.js';
-import { u as uuidv4 } from '../../chunks/bundle-D7HxTsM2.js';
-import '../../chunks/bundle-BZt7yK_Y.js';
-import '../../chunks/bundle-CwG4pj5M.js';
-import '../../chunks/bundle-DD0CjCiu.js';
+import { u as uuidv4 } from '../../chunks/bundle-BJ46V6XQ.js';
+import '../../chunks/bundle-B7barEsR.js';
+import '../../chunks/bundle-C8im5l9B.js';
+import '../../chunks/bundle-C1ds4cil.js';
 import '../../withSendbird.js';
+import '../../chunks/bundle-BWCGFXhj.js';
+import '@sendbird/chat/groupChannel';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../chunks/bundle-ByvmbZD0.js';
 import 'react-dom';
-import '../../chunks/bundle-ByTQtdFM.js';
-import '../../chunks/bundle-BrPQ1xtW.js';
+import '../../chunks/bundle-Diqj6For.js';
 import '../../ui/IconButton.js';
 import '../../ui/Icon.js';
+import '@sendbird/uikit-tools';
+import 'css-vars-ponyfill';
+import '@sendbird/chat';
+import '@sendbird/chat/openChannel';
+import '../../chunks/bundle-CIwVkd-E.js';
+import '../../chunks/bundle-CD9AzC6s.js';
+import '../../chunks/bundle-BbWD2VuS.js';
 import '../../ui/ImageRenderer.js';
-import '../../chunks/bundle-BCL7kk-0.js';
-import '../../chunks/bundle-Vk50O4-7.js';
-import '../../chunks/bundle-D0Atuq2W.js';
+import '../../chunks/bundle-CT8ZXUi2.js';
+import '../../chunks/bundle-HoQqraNc.js';
+import '../../chunks/bundle-_-vntp1z.js';
 
-var EditDetails = function (props) {
-    var _a, _b, _c;
-    var onSubmit = props.onSubmit, onCancel = props.onCancel;
-    var _d = useChannelSettingsContext(), channel = _d.channel, onChannelModified = _d.onChannelModified, onBeforeUpdateChannel = _d.onBeforeUpdateChannel, setChannelUpdateId = _d.setChannelUpdateId;
-    var title = channel === null || channel === void 0 ? void 0 : channel.name;
-    var state = useSendbirdStateContext();
-    var userId = (_a = state === null || state === void 0 ? void 0 : state.config) === null || _a === void 0 ? void 0 : _a.userId;
-    var theme = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.theme;
-    var logger = (_c = state === null || state === void 0 ? void 0 : state.config) === null || _c === void 0 ? void 0 : _c.logger;
-    var inputRef = useRef(null);
-    var formRef = useRef(null);
-    var hiddenInputRef = useRef(null);
-    var _e = useState(null), currentImg = _e[0], setCurrentImg = _e[1];
-    var _f = useState(null), newFile = _f[0], setNewFile = _f[1];
-    var stringSet = useContext(LocalizationContext).stringSet;
-    return (React__default.createElement(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', {
-                currentTitle: currentTitle,
-                currentImg: currentImg,
-            });
-            if (onBeforeUpdateChannel) {
-                logger.info('ChannelSettings: onBeforeUpdateChannel');
-                var params = onBeforeUpdateChannel(currentTitle, currentImg, channel === null || channel === void 0 ? void 0 : channel.data);
-                channel === null || channel === void 0 ? void 0 : channel.updateChannel(params).then(function (groupChannel) {
-                    onChannelModified === null || onChannelModified === void 0 ? void 0 : onChannelModified(groupChannel);
-                    setChannelUpdateId(uuidv4());
-                    onSubmit();
-                });
-            }
-            else {
-                logger.info('ChannelSettings: normal');
-                channel === null || channel === void 0 ? void 0 : channel.updateChannel({
-                    coverImage: currentImg,
-                    name: currentTitle,
-                    data: (channel === null || channel === void 0 ? void 0 : channel.data) || '',
-                }).then(function (groupChannel) {
-                    logger.info('ChannelSettings: Channel information updated', groupChannel);
-                    onChannelModified === null || onChannelModified === void 0 ? void 0 : onChannelModified(groupChannel);
-                    setChannelUpdateId(uuidv4());
-                    onSubmit();
-                });
-            }
-        }, type: ButtonTypes.PRIMARY },
-        React__default.createElement("form", { className: "channel-profile-form", ref: formRef, onSubmit: function (e) { e.preventDefault(); } },
-            React__default.createElement("div", { className: "channel-profile-form__img-section" },
-                React__default.createElement(InputLabel, null, stringSet.MODAL__CHANNEL_INFORMATION__CHANNEL_IMAGE),
-                React__default.createElement("div", { className: "channel-profile-form__avatar" }, currentImg
-                    ? (React__default.createElement(Avatar, { height: "80px", width: "80px", src: currentImg })) : (React__default.createElement(ChannelAvatar, { height: 80, width: 80, channel: channel, userId: userId, theme: theme }))),
-                React__default.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__default.createElement(TextButton, { className: "channel-profile-form__avatar-button", onClick: function () { return hiddenInputRef.current.click(); }, disableUnderline: true },
-                    React__default.createElement(Label, { type: LabelTypography.BUTTON_1, color: LabelColors.PRIMARY }, stringSet.MODAL__CHANNEL_INFORMATION__UPLOAD))),
-            React__default.createElement("div", { className: "channel-profile-form__name-section" },
-                React__default.createElement(InputLabel, null, stringSet.MODAL__CHANNEL_INFORMATION__CHANNEL_NAME),
-                React__default.createElement(Input, { required: title !== '', name: "channel-profile-form__name", ref: inputRef, value: title, placeHolder: stringSet.MODAL__CHANNEL_INFORMATION__INPUT__PLACE_HOLDER })))));
+var EditDetails = function (props) {
+    var _a, _b, _c;
+    var onSubmit = props.onSubmit, onCancel = props.onCancel;
+    var _d = useChannelSettingsContext(), channel = _d.channel, onChannelModified = _d.onChannelModified, onBeforeUpdateChannel = _d.onBeforeUpdateChannel, setChannelUpdateId = _d.setChannelUpdateId;
+    var title = channel === null || channel === void 0 ? void 0 : channel.name;
+    var state = useSendbirdStateContext();
+    var userId = (_a = state === null || state === void 0 ? void 0 : state.config) === null || _a === void 0 ? void 0 : _a.userId;
+    var theme = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.theme;
+    var logger = (_c = state === null || state === void 0 ? void 0 : state.config) === null || _c === void 0 ? void 0 : _c.logger;
+    var inputRef = useRef(null);
+    var formRef = useRef(null);
+    var hiddenInputRef = useRef(null);
+    var _e = useState(null), currentImg = _e[0], setCurrentImg = _e[1];
+    var _f = useState(null), newFile = _f[0], setNewFile = _f[1];
+    var stringSet = useContext(LocalizationContext).stringSet;
+    return (React__default.createElement(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', {
+                currentTitle: currentTitle,
+                currentImg: currentImg,
+            });
+            if (onBeforeUpdateChannel) {
+                logger.info('ChannelSettings: onBeforeUpdateChannel');
+                var params = onBeforeUpdateChannel(currentTitle, currentImg, channel === null || channel === void 0 ? void 0 : channel.data);
+                channel === null || channel === void 0 ? void 0 : channel.updateChannel(params).then(function (groupChannel) {
+                    onChannelModified === null || onChannelModified === void 0 ? void 0 : onChannelModified(groupChannel);
+                    setChannelUpdateId(uuidv4());
+                    onSubmit();
+                });
+            }
+            else {
+                logger.info('ChannelSettings: normal');
+                channel === null || channel === void 0 ? void 0 : channel.updateChannel({
+                    coverImage: currentImg,
+                    name: currentTitle,
+                    data: (channel === null || channel === void 0 ? void 0 : channel.data) || '',
+                }).then(function (groupChannel) {
+                    logger.info('ChannelSettings: Channel information updated', groupChannel);
+                    onChannelModified === null || onChannelModified === void 0 ? void 0 : onChannelModified(groupChannel);
+                    setChannelUpdateId(uuidv4());
+                    onSubmit();
+                });
+            }
+        }, type: ButtonTypes.PRIMARY },
+        React__default.createElement("form", { className: "channel-profile-form", ref: formRef, onSubmit: function (e) { e.preventDefault(); } },
+            React__default.createElement("div", { className: "channel-profile-form__img-section" },
+                React__default.createElement(InputLabel, null, stringSet.MODAL__CHANNEL_INFORMATION__CHANNEL_IMAGE),
+                React__default.createElement("div", { className: "channel-profile-form__avatar" }, currentImg
+                    ? (React__default.createElement(Avatar, { height: "80px", width: "80px", src: currentImg })) : (React__default.createElement(ChannelAvatar, { height: 80, width: 80, channel: channel, userId: userId, theme: theme }))),
+                React__default.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__default.createElement(TextButton, { className: "channel-profile-form__avatar-button", onClick: function () { return hiddenInputRef.current.click(); }, disableUnderline: true },
+                    React__default.createElement(Label, { type: LabelTypography.BUTTON_1, color: LabelColors.PRIMARY }, stringSet.MODAL__CHANNEL_INFORMATION__UPLOAD))),
+            React__default.createElement("div", { className: "channel-profile-form__name-section" },
+                React__default.createElement(InputLabel, null, stringSet.MODAL__CHANNEL_INFORMATION__CHANNEL_NAME),
+                React__default.createElement(Input, { required: title !== '', name: "channel-profile-form__name", ref: inputRef, value: title, placeHolder: stringSet.MODAL__CHANNEL_INFORMATION__INPUT__PLACE_HOLDER })))));
 };
 
 export { EditDetails as default };

package/ChannelSettings/components/EditDetailsModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditDetailsModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"EditDetailsModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/ChannelSettings/components/LeaveChannel.js

@@ -1,66 +1,76 @@
 import React__default from 'react';
 import { useSendbirdStateContext } from '../../useSendbirdStateContext.js';
 import { useChannelSettingsContext } from '../context.js';
-import { n as noop } from '../../chunks/bundle-ByTQtdFM.js';
-import { M as Modal } from '../../chunks/bundle-bTVomhqp.js';
-import { u as useLocalization } from '../../chunks/bundle-DW4HEvvh.js';
-import { u as useMediaQueryContext } from '../../chunks/bundle-BrPQ1xtW.js';
+import { n as noop } from '../../chunks/bundle-ByvmbZD0.js';
+import { M as Modal } from '../../chunks/bundle-C4Z-NWqF.js';
+import { u as useLocalization } from '../../chunks/bundle-Bx5vhTbU.js';
+import { u as useMediaQueryContext } from '../../chunks/bundle-Diqj6For.js';
 import TextButton from '../../ui/TextButton.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../chunks/bundle-DjFflxR1.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../chunks/bundle-LYAWKk4n.js';
 import '../../withSendbird.js';
-import '../../chunks/bundle-Dd7yWAzk.js';
-import '../../chunks/bundle-BZt7yK_Y.js';
-import '../../chunks/bundle-D7HxTsM2.js';
+import '../../chunks/bundle-7oF7KbGv.js';
+import '../../chunks/bundle-B7barEsR.js';
+import '../../chunks/bundle-BJ46V6XQ.js';
+import '../../chunks/bundle-BWCGFXhj.js';
+import '@sendbird/chat/groupChannel';
+import '../../utils/message/getOutgoingMessageState.js';
 import 'react-dom';
 import '../../ui/IconButton.js';
 import '../../ui/Button.js';
 import '../../ui/Icon.js';
-import '../../chunks/bundle-CwG4pj5M.js';
-import '../../chunks/bundle-DD0CjCiu.js';
-import '../../chunks/bundle-Vk50O4-7.js';
+import '@sendbird/uikit-tools';
+import 'css-vars-ponyfill';
+import '@sendbird/chat';
+import '@sendbird/chat/openChannel';
+import '../../chunks/bundle-CIwVkd-E.js';
+import '../../chunks/bundle-CD9AzC6s.js';
+import '../../chunks/bundle-BbWD2VuS.js';
+import '../../chunks/bundle-C8im5l9B.js';
+import '../../chunks/bundle-C1ds4cil.js';
+import '../../chunks/bundle-HoQqraNc.js';
 
-var LeaveChannel = function (props) {
-    var _a, _b;
-    var _c = props.onSubmit, onSubmit = _c === void 0 ? noop : _c, _d = props.onCancel, onCancel = _d === void 0 ? noop : _d;
-    var _e = useChannelSettingsContext(), channel = _e.channel, onLeaveChannel = _e.onLeaveChannel;
-    var stringSet = useLocalization().stringSet;
-    var state = useSendbirdStateContext();
-    var logger = (_a = state === null || state === void 0 ? void 0 : state.config) === null || _a === void 0 ? void 0 : _a.logger;
-    var isOnline = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.isOnline;
-    var isMobile = useMediaQueryContext().isMobile;
-    var getChannelName = function (channel) {
-        if ((channel === null || channel === void 0 ? void 0 : channel.name) && (channel === null || channel === void 0 ? void 0 : channel.name) !== 'Group Channel') {
-            return channel.name;
-        }
-        if ((channel === null || channel === void 0 ? void 0 : channel.name) === 'Group Channel' || !(channel === null || channel === void 0 ? void 0 : channel.name)) {
-            return ((channel === null || channel === void 0 ? void 0 : channel.members) || []).map(function (member) { return member.nickname || stringSet.NO_NAME; }).join(', ');
-        }
-        return stringSet.NO_TITLE;
-    };
-    if (isMobile) {
-        return (React__default.createElement(Modal, { className: "sendbird-channel-settings__leave--mobile", titleText: getChannelName(channel), hideFooter: true, isCloseOnClickOutside: true, onCancel: onCancel },
-            React__default.createElement(TextButton, { onClick: function () {
-                    logger.info('ChannelSettings: Leaving channel', channel);
-                    channel === null || channel === void 0 ? void 0 : channel.leave().then(function () {
-                        logger.info('ChannelSettings: Leaving channel successful!', channel);
-                        onLeaveChannel();
-                    });
-                }, className: "sendbird-channel-settings__leave-label--mobile" },
-                React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.CHANNEL_PREVIEW_MOBILE_LEAVE))));
-    }
-    return (React__default.createElement(Modal, { isFullScreenOnMobile: true, disabled: !isOnline, onCancel: onCancel, onSubmit: function () {
-            logger.info('ChannelSettings: Leaving channel', channel);
-            channel === null || channel === void 0 ? void 0 : channel.leave().then(function () {
-                logger.info('ChannelSettings: Leaving channel successful!', channel);
-                // is for backward compactability
-                if (onLeaveChannel) {
-                    onLeaveChannel();
-                }
-                else {
-                    onSubmit();
-                }
-            });
-        }, submitText: stringSet.MODAL__LEAVE_CHANNEL__FOOTER, titleText: stringSet.MODAL__LEAVE_CHANNEL__TITLE }));
+var LeaveChannel = function (props) {
+    var _a, _b;
+    var _c = props.onSubmit, onSubmit = _c === void 0 ? noop : _c, _d = props.onCancel, onCancel = _d === void 0 ? noop : _d;
+    var _e = useChannelSettingsContext(), channel = _e.channel, onLeaveChannel = _e.onLeaveChannel;
+    var stringSet = useLocalization().stringSet;
+    var state = useSendbirdStateContext();
+    var logger = (_a = state === null || state === void 0 ? void 0 : state.config) === null || _a === void 0 ? void 0 : _a.logger;
+    var isOnline = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.isOnline;
+    var isMobile = useMediaQueryContext().isMobile;
+    var getChannelName = function (channel) {
+        if ((channel === null || channel === void 0 ? void 0 : channel.name) && (channel === null || channel === void 0 ? void 0 : channel.name) !== 'Group Channel') {
+            return channel.name;
+        }
+        if ((channel === null || channel === void 0 ? void 0 : channel.name) === 'Group Channel' || !(channel === null || channel === void 0 ? void 0 : channel.name)) {
+            return ((channel === null || channel === void 0 ? void 0 : channel.members) || []).map(function (member) { return member.nickname || stringSet.NO_NAME; }).join(', ');
+        }
+        return stringSet.NO_TITLE;
+    };
+    if (isMobile) {
+        return (React__default.createElement(Modal, { className: "sendbird-channel-settings__leave--mobile", titleText: getChannelName(channel), hideFooter: true, isCloseOnClickOutside: true, onCancel: onCancel },
+            React__default.createElement(TextButton, { onClick: function () {
+                    logger.info('ChannelSettings: Leaving channel', channel);
+                    channel === null || channel === void 0 ? void 0 : channel.leave().then(function () {
+                        logger.info('ChannelSettings: Leaving channel successful!', channel);
+                        onLeaveChannel();
+                    });
+                }, className: "sendbird-channel-settings__leave-label--mobile" },
+                React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.CHANNEL_PREVIEW_MOBILE_LEAVE))));
+    }
+    return (React__default.createElement(Modal, { isFullScreenOnMobile: true, disabled: !isOnline, onCancel: onCancel, onSubmit: function () {
+            logger.info('ChannelSettings: Leaving channel', channel);
+            channel === null || channel === void 0 ? void 0 : channel.leave().then(function () {
+                logger.info('ChannelSettings: Leaving channel successful!', channel);
+                // is for backward compactability
+                if (onLeaveChannel) {
+                    onLeaveChannel();
+                }
+                else {
+                    onSubmit();
+                }
+            });
+        }, submitText: stringSet.MODAL__LEAVE_CHANNEL__FOOTER, titleText: stringSet.MODAL__LEAVE_CHANNEL__TITLE }));
 };
 
 export { LeaveChannel as default };

package/ChannelSettings/components/LeaveChannel.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeaveChannel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"LeaveChannel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}