@sendbird/uikit-react 3.15.13 → 3.15.14-rc

package/cjs/chunks/bundle-Ctgz-ey7.js

@@ -0,0 +1,761 @@
+'use strict';
+
+var _tslib = require('./bundle-BPkbLqnu.js');
+var React = require('react');
+var groupChannel = require('@sendbird/chat/groupChannel');
+var GroupChannel = require('../GroupChannel.js');
+var GroupChannelListProvider = require('./bundle-Cbdc9ZJY.js');
+var GroupChannelList_components_GroupChannelListHeader = require('../GroupChannelList/components/GroupChannelListHeader.js');
+var EditUserProfile = require('../EditUserProfile.js');
+var ui_PlaceHolder = require('../ui/PlaceHolder.js');
+var index = require('./bundle-DNSLlJbl.js');
+var useSendbird = require('./bundle-BgQpYkVd.js');
+var GroupChannelList_components_GroupChannelPreviewAction = require('../GroupChannelList/components/GroupChannelPreviewAction.js');
+var GroupChannelList_components_GroupChannelListItem = require('../GroupChannelList/components/GroupChannelListItem.js');
+var ui_IconButton = require('../ui/IconButton.js');
+var ui_Icon = require('../ui/Icon.js');
+var LocalizationContext = require('./bundle-DKTpL0g1.js');
+var MediaQueryContext = require('./bundle-D0lw9Bpa.js');
+var ui_Modal = require('./bundle-9tkwiavu.js');
+var ui_Label = require('./bundle-BFcjbhNL.js');
+var ui_Button = require('../ui/Button.js');
+var ui_UserListItem = require('../ui/UserListItem.js');
+var utils = require('./bundle-BDIgb36c.js');
+var SendbirdContext = require('./bundle-LSngpiw3.js');
+var sendbirdSelectors = require('../sendbirdSelectors.js');
+require('@sendbird/uikit-tools');
+var VoicePlayer_context = require('./bundle-Csp1LbIg.js');
+require('../VoiceRecorder/context.js');
+require('../hooks/useModal.js');
+require('./bundle-DYhBZd6j.js');
+require('css-vars-ponyfill');
+require('@sendbird/chat');
+var ui_ContextMenu = require('./bundle-CqCReWdH.js');
+require('@sendbird/chat/openChannel');
+require('react-dom');
+require('./bundle-BauO6Klm.js');
+require('./bundle-BreESs72.js');
+require('./bundle-lK-G2WrJ.js');
+require('./bundle-B9hMMeRS.js');
+require('../ui/Header.js');
+require('./bundle-DzywW4aT.js');
+require('./bundle-BETqmgP_.js');
+require('../ui/MessageInput.js');
+require('./bundle-DyKOhVHq.js');
+require('../ui/ReactionButton.js');
+require('../ui/ReactionBadge.js');
+require('./bundle-CK1N-Lna.js');
+require('../Message/context.js');
+require('./bundle-BJftto_l.js');
+require('@sendbird/chat/message');
+require('../ui/ThreadReplies.js');
+require('./bundle-es5xApqy.js');
+require('../ui/TemplateMessageItemBody.js');
+require('../ui/FeedbackIconButton.js');
+require('../ui/Input.js');
+require('../ui/MessageContent.js');
+require('./bundle-DB7AA9OZ.js');
+require('../GroupChannel/components/MessageList.js');
+require('./bundle-BT0N2gkH.js');
+require('../EditUserProfile/context.js');
+require('../Channel/context.js');
+var ChannelList_context = require('./bundle-CJLuEmh0.js');
+require('./bundle-BNJqog7S.js');
+require('../ChannelSettings/hooks/useMenuList.js');
+require('./bundle-CKctMt7s.js');
+require('./bundle-CmF5XsRI.js');
+require('./bundle-CPmEIY0J.js');
+require('../Thread/context/types.js');
+require('../utils/message/getOutgoingMessageState.js');
+require('date-fns');
+require('../Thread/components/ThreadMessageInput.js');
+var Channel = require('../Channel.js');
+var ChannelList_components_ChannelPreview = require('../ChannelList/components/ChannelPreview.js');
+var ChannelSettings = require('../ChannelSettings.js');
+var MessageSearch = require('../MessageSearch.js');
+var Thread = require('../Thread.js');
+var uuid = require('./bundle-89fX6BxE.js');
+require('./bundle-BX-bINZz.js');
+require('../OpenChannel/components/OpenChannelInput.js');
+require('../OpenChannel/components/OpenChannelMessageList.js');
+require('../OpenChannelSettings/context.js');
+require('../ui/AccordionGroup.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var GroupChannelListUIView = function (_a) {
+    var renderHeader = _a.renderHeader, renderPlaceHolderError = _a.renderPlaceHolderError, renderPlaceHolderLoading = _a.renderPlaceHolderLoading, renderPlaceHolderEmptyList = _a.renderPlaceHolderEmptyList, onChangeTheme = _a.onChangeTheme, onUserProfileUpdated = _a.onUserProfileUpdated, allowProfileEdit = _a.allowProfileEdit, channels = _a.channels, onLoadMore = _a.onLoadMore, initialized = _a.initialized, renderChannel = _a.renderChannel, renderAddChannel = _a.renderAddChannel, scrollRef = _a.scrollRef;
+    var _b = React.useState(false), showProfileEdit = _b[0], setShowProfileEdit = _b[1];
+    var stores = useSendbird.useSendbird().state.stores;
+    var renderer = {
+        addChannel: renderAddChannel,
+        channel: renderChannel,
+        placeholder: {
+            loading: function () {
+                if (initialized)
+                    return null;
+                if (renderPlaceHolderLoading)
+                    return renderPlaceHolderLoading();
+                return React__default.default.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.LOADING });
+            },
+            empty: function () {
+                if (!initialized)
+                    return null;
+                if (renderPlaceHolderEmptyList)
+                    return renderPlaceHolderEmptyList();
+                return React__default.default.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.NO_CHANNELS });
+            },
+            error: function () {
+                if (!initialized || !stores.sdkStore.error)
+                    return null;
+                if (renderPlaceHolderError)
+                    return renderPlaceHolderError();
+                return React__default.default.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.WRONG });
+            },
+        },
+    };
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement("div", { className: "sendbird-channel-list__header" }, (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || (React__default.default.createElement(GroupChannelList_components_GroupChannelListHeader.GroupChannelListHeader, { onEdit: function () { return allowProfileEdit && setShowProfileEdit(true); }, allowProfileEdit: allowProfileEdit, renderIconButton: function () { return renderer.addChannel(); } }))),
+        showProfileEdit && (React__default.default.createElement(EditUserProfile, { onThemeChange: onChangeTheme, onCancel: function () { return setShowProfileEdit(false); }, onEditProfile: function (user) {
+                setShowProfileEdit(false);
+                onUserProfileUpdated(user);
+            } })),
+        React__default.default.createElement(ChannelListComponent, { data: channels, renderItem: renderer.channel, onLoadMore: onLoadMore, placeholderLoading: renderer.placeholder.loading(), placeholderEmpty: renderer.placeholder.empty(), placeholderError: renderer.placeholder.error(), scrollRef: scrollRef })));
+};
+/**
+ * To do: Implement windowing
+ * Implement windowing if you are dealing with large number of messages/channels
+ * https://github.com/bvaughn/react-window -> recommendation
+ * We hesitate to bring one more dependency to our library,
+ * we are planning to implement it inside the library
+ * */
+var ChannelListComponent = function (props) {
+    var data = props.data, renderItem = props.renderItem, onLoadMore = props.onLoadMore, placeholderLoading = props.placeholderLoading, placeholderError = props.placeholderError, placeholderEmpty = props.placeholderEmpty, scrollRef = props.scrollRef;
+    var onScroll = index.useOnScrollPositionChangeDetector({
+        onReachedBottom: function () { return onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore(); },
+    });
+    return (React__default.default.createElement("div", { className: 'sendbird-channel-list__body', onScroll: onScroll, ref: scrollRef },
+        placeholderError,
+        React__default.default.createElement("div", null, data.map(function (item, index) { return renderItem({ item: item, index: index }); })),
+        placeholderLoading,
+        data.length === 0 && placeholderEmpty));
+};
+
+var filterUser = function (idsToFilter) { return function (currentId) { return idsToFilter === null || idsToFilter === void 0 ? void 0 : idsToFilter.includes(currentId); }; };
+var setChannelType = function (params, type) {
+    if (type === 'broadcast') {
+        // eslint-disable-next-line no-param-reassign
+        params.isBroadcast = true;
+    }
+    if (type === 'supergroup') {
+        // eslint-disable-next-line no-param-reassign
+        params.isSuper = true;
+    }
+    return params;
+};
+var createDefaultUserListQuery = function (_a) {
+    var sdk = _a.sdk, userFilledApplicationUserListQuery = _a.userFilledApplicationUserListQuery;
+    var params = sdk.createApplicationUserListQuery();
+    if (userFilledApplicationUserListQuery) {
+        Object.keys(userFilledApplicationUserListQuery).forEach(function (key) {
+            // @ts-ignore
+            params[key] = userFilledApplicationUserListQuery[key];
+        });
+    }
+    return params;
+};
+
+var CHANNEL_TYPE;
+(function (CHANNEL_TYPE) {
+    CHANNEL_TYPE["GROUP"] = "group";
+    CHANNEL_TYPE["SUPERGROUP"] = "supergroup";
+    CHANNEL_TYPE["BROADCAST"] = "broadcast";
+})(CHANNEL_TYPE || (CHANNEL_TYPE = {}));
+
+var CreateChannelContext = React__default.default.createContext(null);
+var initialState = {
+    sdk: undefined,
+    userListQuery: undefined,
+    onCreateChannelClick: undefined,
+    onChannelCreated: undefined,
+    onBeforeCreateChannel: undefined,
+    pageStep: 0,
+    type: CHANNEL_TYPE.GROUP,
+    onCreateChannel: undefined,
+    overrideInviteUser: undefined,
+};
+var CreateChannelManager = function (props) {
+    var onCreateChannelClick = props.onCreateChannelClick, onBeforeCreateChannel = props.onBeforeCreateChannel, onChannelCreated = props.onChannelCreated, userListQuery = props.userListQuery, onCreateChannel = props.onCreateChannel, overrideInviteUser = props.overrideInviteUser;
+    var updateState = useCreateChannelStore().updateState;
+    var config = useSendbird.useSendbird().state.config;
+    var _userListQuery = userListQuery !== null && userListQuery !== void 0 ? userListQuery : config === null || config === void 0 ? void 0 : config.userListQuery;
+    React.useEffect(function () {
+        updateState({
+            onCreateChannelClick: onCreateChannelClick,
+            onBeforeCreateChannel: onBeforeCreateChannel,
+            onChannelCreated: onChannelCreated,
+            userListQuery: _userListQuery,
+            onCreateChannel: onCreateChannel,
+            overrideInviteUser: overrideInviteUser,
+        });
+    }, [
+        onCreateChannelClick,
+        onBeforeCreateChannel,
+        onChannelCreated,
+        userListQuery,
+        onCreateChannel,
+        overrideInviteUser,
+        _userListQuery,
+    ]);
+    return null;
+};
+var CreateChannelProvider = function (props) {
+    var children = props.children;
+    return (React__default.default.createElement(InternalCreateChannelProvider, null,
+        React__default.default.createElement(CreateChannelManager, _tslib.__assign({}, props)),
+        children));
+};
+var createCreateChannelStore = function () { return SendbirdContext.createStore(initialState); };
+var InternalCreateChannelProvider = function (_a) {
+    var children = _a.children;
+    var storeRef = React.useRef(createCreateChannelStore());
+    return (React__default.default.createElement(CreateChannelContext.Provider, { value: storeRef.current }, children));
+};
+var useCreateChannelStore = function () {
+    return SendbirdContext.useStore(CreateChannelContext, function (state) { return state; }, initialState);
+};
+var useCreateChannelContext = function () {
+    var _a = useCreateChannel(), state = _a.state, actions = _a.actions;
+    return _tslib.__assign(_tslib.__assign({}, state), actions);
+};
+
+var useCreateChannel = function () {
+    var store = React.useContext(CreateChannelContext);
+    var sendbirdStore = useSendbirdStateContext();
+    if (!store)
+        throw new Error('useCreateChannel must be used within a CreateChannelProvider');
+    var state = SendbirdContext.shimExports.useSyncExternalStore(store.subscribe, store.getState);
+    var actions = React.useMemo(function () { return ({
+        setPageStep: function (pageStep) { return store.setState(function (state) { return (_tslib.__assign(_tslib.__assign({}, state), { pageStep: pageStep })); }); },
+        setType: function (type) { return store.setState(function (state) { return (_tslib.__assign(_tslib.__assign({}, state), { type: type })); }); },
+        createChannel: sendbirdSelectors.getCreateGroupChannel(sendbirdStore),
+    }); }, [store]);
+    return { state: state, actions: actions };
+};
+
+var BUFFER = 50;
+var InviteUsers = function (_a) {
+    var onCancel = _a.onCancel, userListQuery = _a.userListQuery;
+    var _b = useCreateChannel(), _c = _b.state, onCreateChannelClick = _c.onCreateChannelClick, onBeforeCreateChannel = _c.onBeforeCreateChannel, onChannelCreated = _c.onChannelCreated, onCreateChannel = _c.onCreateChannel, overrideInviteUser = _c.overrideInviteUser, type = _c.type, createChannel = _b.actions.createChannel;
+    var _d = useSendbird.useSendbird().state, userId = _d.config.userId, sdk = _d.stores.sdkStore.sdk;
+    var idsToFilter = [userId];
+    var _e = React.useState([]), users = _e[0], setUsers = _e[1];
+    var _f = React.useState({}), selectedUsers = _f[0], setSelectedUsers = _f[1];
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var _g = React.useState(null), usersDataSource = _g[0], setUsersDataSource = _g[1];
+    var selectedCount = Object.keys(selectedUsers).length;
+    var titleText = stringSet.MODAL__CREATE_CHANNEL__TITLE;
+    var submitText = stringSet.BUTTON__CREATE;
+    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+    var _h = React.useState(window.innerHeight), scrollableAreaHeight = _h[0], setScrollableAreaHeight = _h[1];
+    React.useEffect(function () {
+        var applicationUserListQuery = userListQuery ? userListQuery() : createDefaultUserListQuery({ sdk: sdk });
+        setUsersDataSource(applicationUserListQuery);
+        if (!(applicationUserListQuery === null || applicationUserListQuery === void 0 ? void 0 : applicationUserListQuery.isLoading)) {
+            applicationUserListQuery.next().then(function (it) {
+                setUsers(it);
+            });
+        }
+    }, []);
+    // To fix navbar break in mobile we set dynamic height to the scrollable area
+    React.useEffect(function () {
+        var scrollableAreaHeight = function () {
+            setScrollableAreaHeight(window.innerHeight);
+        };
+        window.addEventListener('resize', scrollableAreaHeight);
+        return function () {
+            window.removeEventListener('resize', scrollableAreaHeight);
+        };
+    }, []);
+    return (React__default.default.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, titleText: titleText, submitText: submitText, type: ui_Button.ButtonTypes.PRIMARY, 
+        // Disable the create button if no users are selected,
+        // but if there's only the logged-in user in the user list,
+        // then the create button should be enabled
+        disabled: users.length > 1 && Object.keys(selectedUsers).length === 0, onCancel: onCancel, onSubmit: function () {
+            var selectedUserList = Object.keys(selectedUsers).length > 0
+                ? Object.keys(selectedUsers)
+                : [userId];
+            var _onChannelCreated = onChannelCreated !== null && onChannelCreated !== void 0 ? onChannelCreated : onCreateChannel;
+            var _onCreateChannelClick = onCreateChannelClick !== null && onCreateChannelClick !== void 0 ? onCreateChannelClick : overrideInviteUser;
+            if (typeof _onCreateChannelClick === 'function') {
+                _onCreateChannelClick({
+                    users: selectedUserList,
+                    onClose: onCancel !== null && onCancel !== void 0 ? onCancel : utils.noop,
+                    channelType: type,
+                });
+                return;
+            }
+            if (onBeforeCreateChannel) {
+                var params = onBeforeCreateChannel(selectedUserList);
+                setChannelType(params, type);
+                createChannel(params).then(function (channel) { return _onChannelCreated === null || _onChannelCreated === void 0 ? void 0 : _onChannelCreated(channel); });
+            }
+            else {
+                var params = {};
+                params.invitedUserIds = selectedUserList;
+                params.isDistinct = false;
+                if (userId) {
+                    params.operatorUserIds = [userId];
+                }
+                setChannelType(params, type);
+                // do not have custom params
+                createChannel(params).then(function (channel) { return _onChannelCreated === null || _onChannelCreated === void 0 ? void 0 : _onChannelCreated(channel); });
+            }
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        } },
+        React__default.default.createElement("div", null,
+            React__default.default.createElement(ui_Label.Label, { color: (selectedCount > 0) ? ui_Label.LabelColors.PRIMARY : ui_Label.LabelColors.ONBACKGROUND_3, type: ui_Label.LabelTypography.CAPTION_1 }, "".concat(selectedCount, " ").concat(stringSet.MODAL__INVITE_MEMBER__SELECTED)),
+            React__default.default.createElement("div", { className: "sendbird-create-channel--scroll", style: isMobile ? { height: "calc(".concat(scrollableAreaHeight, "px - 200px)") } : {}, onScroll: function (e) {
+                    if (!usersDataSource)
+                        return;
+                    var eventTarget = e.target;
+                    var hasNext = usersDataSource.hasNext, isLoading = usersDataSource.isLoading;
+                    var fetchMore = ((eventTarget.clientHeight + eventTarget.scrollTop + BUFFER) > eventTarget.scrollHeight);
+                    if (hasNext && fetchMore && !isLoading) {
+                        usersDataSource.next().then(function (usersBatch) {
+                            setUsers(_tslib.__spreadArray(_tslib.__spreadArray([], users, true), usersBatch, true));
+                        });
+                    }
+                } }, users.map(function (user) { return (!filterUser(idsToFilter)(user.userId)) && (React__default.default.createElement(ui_UserListItem.UserListItem, { key: user.userId, user: user, checkBox: true, checked: selectedUsers[user.userId], onChange: function (event) {
+                    var _a;
+                    var modifiedSelectedUsers = _tslib.__assign(_tslib.__assign({}, selectedUsers), (_a = {}, _a[event.target.id] = event.target.checked, _a));
+                    if (!event.target.checked) {
+                        delete modifiedSelectedUsers[event.target.id];
+                    }
+                    setSelectedUsers(modifiedSelectedUsers);
+                } })); })))));
+};
+
+var isBroadcastChannelEnabled = function (sdk) {
+    var _a;
+    var ALLOW_BROADCAST_CHANNEL = 'allow_broadcast_channel';
+    var applicationAttributes = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) === null || _a === void 0 ? void 0 : _a.applicationAttributes;
+    if (Array.isArray(applicationAttributes)) {
+        return applicationAttributes.includes(ALLOW_BROADCAST_CHANNEL);
+    }
+    return false;
+};
+var isSuperGroupChannelEnabled = function (sdk) {
+    var _a;
+    var ALLOW_SUPER_GROUP_CHANNEL = 'allow_super_group_channel';
+    var applicationAttributes = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) === null || _a === void 0 ? void 0 : _a.applicationAttributes;
+    if (Array.isArray(applicationAttributes)) {
+        return applicationAttributes.includes(ALLOW_SUPER_GROUP_CHANNEL);
+    }
+    return false;
+};
+
+var SelectChannelType = function (props) {
+    var onCancel = props.onCancel;
+    var state = useSendbird.useSendbird().state;
+    var sdk = sendbirdSelectors.getSdk(state);
+    var _a = useCreateChannel().actions, setPageStep = _a.setPageStep, setType = _a.setType;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var isBroadcastAvailable = isBroadcastChannelEnabled(sdk);
+    var isSupergroupAvailable = isSuperGroupChannelEnabled(sdk);
+    return (React__default.default.createElement(ui_Modal.Modal, { titleText: stringSet === null || stringSet === void 0 ? void 0 : stringSet.MODAL__CREATE_CHANNEL__TITLE, hideFooter: true, onCancel: function () { onCancel === null || onCancel === void 0 ? void 0 : onCancel(); }, className: "sendbird-add-channel__modal" },
+        React__default.default.createElement("div", { className: "sendbird-add-channel__rectangle-wrap" },
+            React__default.default.createElement("div", { className: "sendbird-add-channel__rectangle", onClick: function () {
+                    setType(CHANNEL_TYPE.GROUP);
+                    setPageStep(1);
+                }, role: "button", tabIndex: 0, onKeyDown: function () {
+                    setType(CHANNEL_TYPE.GROUP);
+                    setPageStep(1);
+                } },
+                React__default.default.createElement(ui_Icon.default, { className: "sendbird-add-channel__rectangle__chat-icon", type: ui_Icon.IconTypes.CHAT, fillColor: ui_Icon.IconColors.PRIMARY, width: "28px", height: "28px" }),
+                React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.MODAL__CREATE_CHANNEL__GROUP)),
+            isSupergroupAvailable && (React__default.default.createElement("div", { className: "sendbird-add-channel__rectangle", onClick: function () {
+                    setType(CHANNEL_TYPE.SUPERGROUP);
+                    setPageStep(1);
+                }, role: "button", tabIndex: 0, onKeyDown: function () {
+                    setType(CHANNEL_TYPE.SUPERGROUP);
+                    setPageStep(1);
+                } },
+                React__default.default.createElement(ui_Icon.default, { className: "sendbird-add-channel__rectangle__supergroup-icon", type: ui_Icon.IconTypes.SUPERGROUP, fillColor: ui_Icon.IconColors.PRIMARY, width: "28px", height: "28px" }),
+                React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.MODAL__CREATE_CHANNEL__SUPER))),
+            isBroadcastAvailable && (React__default.default.createElement("div", { className: "sendbird-add-channel__rectangle", onClick: function () {
+                    setType(CHANNEL_TYPE.BROADCAST);
+                    setPageStep(1);
+                }, role: "button", tabIndex: 0, onKeyDown: function () {
+                    setType(CHANNEL_TYPE.BROADCAST);
+                    setPageStep(1);
+                } },
+                React__default.default.createElement(ui_Icon.default, { className: "sendbird-add-channel__rectangle__broadcast-icon", type: ui_Icon.IconTypes.BROADCAST, fillColor: ui_Icon.IconColors.PRIMARY, width: "28px", height: "28px" }),
+                React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.MODAL__CREATE_CHANNEL__BROADCAST))))));
+};
+
+var CreateChannel$1 = function (props) {
+    var onCancel = props.onCancel, renderStepOne = props.renderStepOne;
+    var _a = useCreateChannel(), _b = _a.state, pageStep = _b.pageStep, userListQuery = _b.userListQuery, setPageStep = _a.actions.setPageStep;
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        pageStep === 0 && ((renderStepOne === null || renderStepOne === void 0 ? void 0 : renderStepOne()) || (React__default.default.createElement(SelectChannelType, { onCancel: onCancel }))),
+        pageStep === 1 && (React__default.default.createElement(InviteUsers, { userListQuery: userListQuery, onCancel: function () {
+                setPageStep(0);
+                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+            } }))));
+};
+
+var CreateChannel = function (props) {
+    return (React__default.default.createElement(CreateChannelProvider, _tslib.__assign({}, props),
+        React__default.default.createElement(CreateChannel$1, _tslib.__assign({}, props))));
+};
+
+var AddGroupChannelView = function (_a) {
+    var createChannelVisible = _a.createChannelVisible, onChangeCreateChannelVisible = _a.onChangeCreateChannelVisible, onBeforeCreateChannel = _a.onBeforeCreateChannel, onCreateChannelClick = _a.onCreateChannelClick, onChannelCreated = _a.onChannelCreated;
+    var config = useSendbird.useSendbird().state.config;
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(ui_IconButton, { height: '32px', width: '32px', disabled: !config.isOnline, onClick: function () { return onChangeCreateChannelVisible(true); } },
+            React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CREATE, fillColor: ui_Icon.IconColors.PRIMARY, width: '24px', height: '24px' })),
+        createChannelVisible && (React__default.default.createElement(CreateChannel, { onCancel: function () { return onChangeCreateChannelVisible(false); }, onChannelCreated: function (channel) {
+                onChannelCreated === null || onChannelCreated === void 0 ? void 0 : onChannelCreated(channel);
+                onChangeCreateChannelVisible(false);
+            }, onBeforeCreateChannel: onBeforeCreateChannel, onCreateChannelClick: onCreateChannelClick }))));
+};
+
+var AddGroupChannel = function () {
+    var _a = React.useState(false), createChannelVisible = _a[0], setCreateChannelVisible = _a[1];
+    var _b = GroupChannelListProvider.useGroupChannelList().state, onChannelCreated = _b.onChannelCreated, onBeforeCreateChannel = _b.onBeforeCreateChannel, onCreateChannelClick = _b.onCreateChannelClick;
+    return (React__default.default.createElement(AddGroupChannelView, { createChannelVisible: createChannelVisible, onChangeCreateChannelVisible: setCreateChannelVisible, onCreateChannelClick: onCreateChannelClick, onBeforeCreateChannel: onBeforeCreateChannel, onChannelCreated: onChannelCreated }));
+};
+
+var GroupChannelListUI = function (props) {
+    var renderHeader = props.renderHeader, renderChannelPreview = props.renderChannelPreview, renderPlaceHolderError = props.renderPlaceHolderError, renderPlaceHolderLoading = props.renderPlaceHolderLoading, renderPlaceHolderEmptyList = props.renderPlaceHolderEmptyList;
+    var _a = GroupChannelListProvider.useGroupChannelList().state, onChannelSelect = _a.onChannelSelect, onThemeChange = _a.onThemeChange, allowProfileEdit = _a.allowProfileEdit, typingChannelUrls = _a.typingChannelUrls, groupChannels = _a.groupChannels, initialized = _a.initialized, selectedChannelUrl = _a.selectedChannelUrl, loadMore = _a.loadMore, onUserProfileUpdated = _a.onUserProfileUpdated, scrollRef = _a.scrollRef;
+    var _b = useSendbird.useSendbird().state, stores = _b.stores, _c = _b.config, logger = _c.logger, isOnline = _c.isOnline;
+    var sdk = stores.sdkStore.sdk;
+    var renderListItem = function (renderProps) {
+        var channel = renderProps.item, index = renderProps.index;
+        var itemProps = {
+            channel: channel,
+            tabIndex: index,
+            isSelected: channel.url === selectedChannelUrl,
+            isTyping: typingChannelUrls.includes(channel.url),
+            renderChannelAction: function (props) { return React__default.default.createElement(GroupChannelList_components_GroupChannelPreviewAction.GroupChannelPreviewAction, _tslib.__assign({}, props)); },
+            onClick: function () {
+                if (isOnline || (sdk === null || sdk === void 0 ? void 0 : sdk.isCacheEnabled)) {
+                    logger.info('ChannelList: Clicked on channel:', channel);
+                    onChannelSelect(channel);
+                }
+                else {
+                    logger.warning('ChannelList: Inactivated clicking channel item during offline.');
+                }
+            },
+            onLeaveChannel: function () {
+                return _tslib.__awaiter(this, void 0, void 0, function () {
+                    return _tslib.__generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                logger.info('ChannelList: Leaving channel', channel);
+                                return [4 /*yield*/, channel.leave()];
+                            case 1:
+                                _a.sent();
+                                logger.info('ChannelList: Leaving channel success');
+                                return [2 /*return*/];
+                        }
+                    });
+                });
+            },
+        };
+        if (renderChannelPreview) {
+            return (React__default.default.createElement("div", { key: channel.url, onClick: itemProps.onClick }, renderChannelPreview(itemProps)));
+        }
+        return React__default.default.createElement(GroupChannelList_components_GroupChannelListItem.GroupChannelListItem, _tslib.__assign({ key: channel.url }, itemProps));
+    };
+    return (React__default.default.createElement(GroupChannelListUIView, { renderHeader: renderHeader, renderChannel: renderListItem, renderPlaceHolderError: renderPlaceHolderError, renderPlaceHolderLoading: renderPlaceHolderLoading, renderPlaceHolderEmptyList: renderPlaceHolderEmptyList, onChangeTheme: onThemeChange !== null && onThemeChange !== void 0 ? onThemeChange : utils.noop, allowProfileEdit: allowProfileEdit, onUserProfileUpdated: onUserProfileUpdated !== null && onUserProfileUpdated !== void 0 ? onUserProfileUpdated : utils.noop, channels: groupChannels, onLoadMore: loadMore, initialized: initialized, renderAddChannel: function () { return React__default.default.createElement(AddGroupChannel, null); }, scrollRef: scrollRef }));
+};
+
+var GroupChannelList = function (props) {
+    return (React__default.default.createElement(GroupChannelListProvider.GroupChannelListProvider, _tslib.__assign({}, props),
+        React__default.default.createElement(GroupChannelListUI, _tslib.__assign({}, props))));
+};
+
+var AddChannel = function () {
+    var _a = React.useState(false), showModal = _a[0], setShowModal = _a[1];
+    var _b = ChannelList_context.useChannelListContext(), overrideInviteUser = _b.overrideInviteUser, onBeforeCreateChannel = _b.onBeforeCreateChannel, onChannelSelect = _b.onChannelSelect;
+    return (React__default.default.createElement(AddGroupChannelView, { createChannelVisible: showModal, onChangeCreateChannelVisible: setShowModal, onCreateChannelClick: overrideInviteUser, onBeforeCreateChannel: onBeforeCreateChannel, onChannelCreated: function (it) { return onChannelSelect === null || onChannelSelect === void 0 ? void 0 : onChannelSelect(it); } }));
+};
+
+/**
+ * @deprecated This component is deprecated and will be removed in the next major update.
+ * Please use the `GroupChannel` component from '@sendbird/uikit-react/GroupChannel' instead.
+ * For more information, please refer to the migration guide:
+ * https://docs.sendbird.com/docs/chat/uikit/v3/react/introduction/group-channel-migration-guide
+ */
+var ChannelListUI = function (props) {
+    var renderHeader = props.renderHeader, renderChannelPreview = props.renderChannelPreview, renderPlaceHolderError = props.renderPlaceHolderError, renderPlaceHolderLoading = props.renderPlaceHolderLoading, renderPlaceHolderEmptyList = props.renderPlaceHolderEmptyList;
+    var _a = ChannelList_context.useChannelListContext(), onThemeChange = _a.onThemeChange, allowProfileEdit = _a.allowProfileEdit, allChannels = _a.allChannels, currentChannel = _a.currentChannel, channelListDispatcher = _a.channelListDispatcher, typingChannels = _a.typingChannels, initialized = _a.initialized, fetchChannelList = _a.fetchChannelList, onProfileEditSuccess = _a.onProfileEditSuccess;
+    var state = useSendbird.useSendbird().state;
+    var stores = state.stores, config = state.config;
+    var logger = config.logger, _b = config.isOnline, isOnline = _b === void 0 ? false : _b;
+    var sdk = stores.sdkStore.sdk;
+    var renderListItem = function (props) {
+        var channel = props.item, index = props.index;
+        var previewProps = {
+            channel: channel,
+            tabIndex: index,
+            isSelected: (channel === null || channel === void 0 ? void 0 : channel.url) === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url),
+            isTyping: typingChannels === null || typingChannels === void 0 ? void 0 : typingChannels.some(function (_a) {
+                var url = _a.url;
+                return url === (channel === null || channel === void 0 ? void 0 : channel.url);
+            }),
+            renderChannelAction: function (props) { return React__default.default.createElement(GroupChannelList_components_GroupChannelPreviewAction.GroupChannelPreviewAction, _tslib.__assign({}, props)); },
+            onClick: function () {
+                if (!isOnline && !(sdk === null || sdk === void 0 ? void 0 : sdk.isCacheEnabled)) {
+                    logger.warning('ChannelList: Inactivated clicking channel item during offline.');
+                    return;
+                }
+                logger.info('ChannelList: Clicked on channel:', channel);
+                channelListDispatcher({
+                    type: ChannelList_context.SET_CURRENT_CHANNEL,
+                    payload: channel,
+                });
+            },
+            onLeaveChannel: function (channel, cb) {
+                return _tslib.__awaiter(this, void 0, void 0, function () {
+                    var response, err_1;
+                    return _tslib.__generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                logger.info('ChannelList: Leaving channel', channel);
+                                if (!channel) return [3 /*break*/, 4];
+                                _a.label = 1;
+                            case 1:
+                                _a.trys.push([1, 3, , 4]);
+                                return [4 /*yield*/, channel.leave()];
+                            case 2:
+                                response = _a.sent();
+                                logger.info('ChannelList: Leaving channel success', response);
+                                if (cb && typeof cb === 'function')
+                                    cb(channel, null);
+                                channelListDispatcher({
+                                    type: ChannelList_context.LEAVE_CHANNEL_SUCCESS,
+                                    payload: channel.url,
+                                });
+                                return [3 /*break*/, 4];
+                            case 3:
+                                err_1 = _a.sent();
+                                logger.error('ChannelList: Leaving channel failed', err_1);
+                                if (cb && typeof cb === 'function')
+                                    cb(channel, err_1);
+                                return [3 /*break*/, 4];
+                            case 4: return [2 /*return*/];
+                        }
+                    });
+                });
+            },
+        };
+        if (renderChannelPreview) {
+            return (React__default.default.createElement("div", { key: channel === null || channel === void 0 ? void 0 : channel.url, onClick: previewProps.onClick }, renderChannelPreview(previewProps)));
+        }
+        return React__default.default.createElement(ChannelList_components_ChannelPreview, _tslib.__assign({ key: channel === null || channel === void 0 ? void 0 : channel.url }, previewProps));
+    };
+    return (React__default.default.createElement(GroupChannelListUIView, { renderHeader: renderHeader, renderChannel: renderListItem, renderPlaceHolderError: renderPlaceHolderError, renderPlaceHolderLoading: renderPlaceHolderLoading, renderPlaceHolderEmptyList: renderPlaceHolderEmptyList, onChangeTheme: onThemeChange !== null && onThemeChange !== void 0 ? onThemeChange : utils.noop, allowProfileEdit: allowProfileEdit, onUserProfileUpdated: onProfileEditSuccess !== null && onProfileEditSuccess !== void 0 ? onProfileEditSuccess : utils.noop, channels: allChannels, onLoadMore: fetchChannelList, initialized: initialized, renderAddChannel: function () { return React__default.default.createElement(AddChannel, null); } }));
+};
+
+/**
+ * @deprecated This component is deprecated and will be removed in the next major update.
+ * Please use the `GroupChannelList` component from '@sendbird/uikit-react/GroupChannelList' instead.
+ * For more information, please refer to the migration guide:
+ * https://docs.sendbird.com/docs/chat/uikit/v3/react/introduction/group-channel-migration-guide
+ */
+var ChannelList = function (props) {
+    return (React__default.default.createElement(ChannelList_context.ChannelListProvider, _tslib.__assign({}, props),
+        React__default.default.createElement(ChannelListUI, _tslib.__assign({}, props))));
+};
+
+var PANELS;
+(function (PANELS) {
+    PANELS["CHANNEL_LIST"] = "CHANNEL_LIST";
+    PANELS["CHANNEL"] = "CHANNEL";
+    PANELS["CHANNEL_SETTINGS"] = "CHANNEL_SETTINGS";
+    PANELS["MESSAGE_SEARCH"] = "MESSAGE_SEARCH";
+    PANELS["THREAD"] = "THREAD";
+})(PANELS || (PANELS = {}));
+var MobileLayout = function (props) {
+    var _a, _b, _c;
+    var replyType = props.replyType, isMessageGroupingEnabled = props.isMessageGroupingEnabled, isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled, allowProfileEdit = props.allowProfileEdit, isReactionEnabled = props.isReactionEnabled, showSearchIcon = props.showSearchIcon, onProfileEditSuccess = props.onProfileEditSuccess, currentChannel = props.currentChannel, setCurrentChannel = props.setCurrentChannel, startingPoint = props.startingPoint, setStartingPoint = props.setStartingPoint, threadTargetMessage = props.threadTargetMessage, setThreadTargetMessage = props.setThreadTargetMessage, highlightedMessage = props.highlightedMessage, setHighlightedMessage = props.setHighlightedMessage, enableLegacyChannelModules = props.enableLegacyChannelModules;
+    var _d = React.useState(PANELS.CHANNEL_LIST), panel = _d[0], setPanel = _d[1];
+    var store = useSendbird.useSendbird().state;
+    var sdk = (_b = (_a = store === null || store === void 0 ? void 0 : store.stores) === null || _a === void 0 ? void 0 : _a.sdkStore) === null || _b === void 0 ? void 0 : _b.sdk;
+    var userId = (_c = store === null || store === void 0 ? void 0 : store.config) === null || _c === void 0 ? void 0 : _c.userId;
+    var pause = VoicePlayer_context.useVoicePlayerContext().pause;
+    var goToMessage = function (message, timeoutCb) {
+        setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint((message === null || message === void 0 ? void 0 : message.createdAt) || null);
+        setTimeout(function () {
+            timeoutCb === null || timeoutCb === void 0 ? void 0 : timeoutCb((message === null || message === void 0 ? void 0 : message.messageId) || null);
+        }, 500);
+    };
+    React.useEffect(function () {
+        if (panel !== PANELS.CHANNEL) {
+            goToMessage(null, function () { return setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null); });
+        }
+    }, [panel]);
+    React.useEffect(function () {
+        var _a, _b;
+        var handlerId = uuid.uuidv4();
+        if ((_a = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _a === void 0 ? void 0 : _a.addGroupChannelHandler) {
+            var handler = new groupChannel.GroupChannelHandler({
+                onUserBanned: function (groupChannel, user) {
+                    if (groupChannel.url === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) && (user === null || user === void 0 ? void 0 : user.userId) === userId) {
+                        setPanel(PANELS.CHANNEL_LIST);
+                    }
+                },
+                onChannelDeleted: function (channelUrl) {
+                    if (channelUrl === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url)) {
+                        setPanel(PANELS.CHANNEL_LIST);
+                    }
+                },
+                onUserLeft: function (groupChannel, user) {
+                    if (groupChannel.url === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) && (user === null || user === void 0 ? void 0 : user.userId) === userId) {
+                        setPanel(PANELS.CHANNEL_LIST);
+                    }
+                },
+            });
+            (_b = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _b === void 0 ? void 0 : _b.addGroupChannelHandler(handlerId, handler);
+        }
+        return function () {
+            var _a, _b;
+            (_b = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _a === void 0 ? void 0 : _a.removeGroupChannelHandler) === null || _b === void 0 ? void 0 : _b.call(_a, handlerId);
+        };
+    }, [sdk, currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
+    // if currentChannel is changed while on Thread
+    // then change panel type to CHANNEL
+    React.useEffect(function () {
+        if (panel === PANELS.THREAD) {
+            setPanel(PANELS.CHANNEL);
+        }
+    }, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
+    var channelListProps = {
+        allowProfileEdit: allowProfileEdit,
+        onProfileEditSuccess: onProfileEditSuccess,
+        disableAutoSelect: true,
+        onChannelSelect: function (channel) {
+            setCurrentChannel(channel !== null && channel !== void 0 ? channel : undefined);
+            if (channel) {
+                setPanel(PANELS.CHANNEL);
+            }
+            else {
+                setPanel(PANELS.CHANNEL_LIST);
+            }
+        },
+        // for GroupChannelList
+        onChannelCreated: function (channel) {
+            setCurrentChannel(channel);
+            setPanel(PANELS.CHANNEL);
+        },
+        onUserProfileUpdated: onProfileEditSuccess,
+    };
+    var channelProps = {
+        channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
+        onChatHeaderActionClick: function () {
+            setPanel(PANELS.CHANNEL_SETTINGS);
+        },
+        onBackClick: function () {
+            setPanel(PANELS.CHANNEL_LIST);
+            pause(VoicePlayer_context.ALL);
+        },
+        onSearchClick: function () {
+            setPanel(PANELS.MESSAGE_SEARCH);
+        },
+        onReplyInThread: function (_a) {
+            var message = _a.message;
+            if (replyType === 'THREAD') {
+                setPanel(PANELS.THREAD);
+                setThreadTargetMessage(message);
+            }
+        },
+        onQuoteMessageClick: function (_a) {
+            var message = _a.message;
+            // thread message
+            if (replyType === 'THREAD') {
+                setThreadTargetMessage(message);
+                setPanel(PANELS.THREAD);
+            }
+        },
+        animatedMessage: highlightedMessage,
+        onMessageAnimated: function () { return setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null); },
+        showSearchIcon: showSearchIcon,
+        startingPoint: startingPoint !== null && startingPoint !== void 0 ? startingPoint : undefined,
+        isReactionEnabled: isReactionEnabled,
+        replyType: replyType,
+        isMessageGroupingEnabled: isMessageGroupingEnabled,
+        isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
+        // for GroupChannel
+        animatedMessageId: highlightedMessage,
+        onReplyInThreadClick: function (_a) {
+            var message = _a.message;
+            if (replyType === 'THREAD') {
+                setPanel(PANELS.THREAD);
+                setThreadTargetMessage(message);
+            }
+        },
+    };
+    return (React__default.default.createElement("div", { className: "sb_mobile", id: ui_ContextMenu.APP_LAYOUT_ROOT },
+        panel === PANELS.CHANNEL_LIST && (React__default.default.createElement("div", { className: "sb_mobile__panelwrap" }, enableLegacyChannelModules ? React__default.default.createElement(ChannelList, _tslib.__assign({}, channelListProps)) : React__default.default.createElement(GroupChannelList, _tslib.__assign({}, channelListProps)))),
+        panel === PANELS.CHANNEL && (React__default.default.createElement("div", { className: "sb_mobile__panelwrap" }, enableLegacyChannelModules ? React__default.default.createElement(Channel, _tslib.__assign({}, channelProps)) : React__default.default.createElement(GroupChannel.GroupChannel, _tslib.__assign({}, channelProps)))),
+        panel === PANELS.CHANNEL_SETTINGS && (React__default.default.createElement("div", { className: "sb_mobile__panelwrap" },
+            React__default.default.createElement(ChannelSettings, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onCloseClick: function () {
+                    setPanel(PANELS.CHANNEL);
+                }, onLeaveChannel: function () {
+                    setPanel(PANELS.CHANNEL_LIST);
+                } }))),
+        panel === PANELS.MESSAGE_SEARCH && (React__default.default.createElement("div", { className: "sb_mobile__panelwrap" },
+            React__default.default.createElement(MessageSearch, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onCloseClick: function () {
+                    setPanel(PANELS.CHANNEL);
+                }, onResultClick: function (message) {
+                    setPanel(PANELS.CHANNEL);
+                    goToMessage(message, function (messageId) {
+                        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(messageId);
+                    });
+                } }))),
+        panel === PANELS.THREAD && (React__default.default.createElement("div", { className: "sb_mobile__panelwrap" },
+            React__default.default.createElement(Thread, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', message: threadTargetMessage, onHeaderActionClick: function () {
+                    setPanel(PANELS.CHANNEL);
+                    pause(VoicePlayer_context.ALL);
+                }, onMoveToParentMessage: function (_a) {
+                    var message = _a.message, channel = _a.channel;
+                    setCurrentChannel(channel);
+                    goToMessage(message, function (messageId) {
+                        setPanel(PANELS.CHANNEL);
+                        setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(messageId);
+                    });
+                } })))));
+};
+
+// NOTE: Do not use this hook internally.
+// This hook is exported to support backward compatibility.
+// Keep this function for backward compatibility.
+function useSendbirdStateContext() {
+    var _a = useSendbird.useSendbird(), state = _a.state, actions = _a.actions;
+    return _tslib.__assign(_tslib.__assign({}, state), actions);
+}
+
+exports.AddChannel = AddChannel;
+exports.AddGroupChannel = AddGroupChannel;
+exports.ChannelList = ChannelList;
+exports.ChannelListUI = ChannelListUI;
+exports.CreateChannel = CreateChannel$1;
+exports.CreateChannel$1 = CreateChannel;
+exports.CreateChannelContext = CreateChannelContext;
+exports.CreateChannelProvider = CreateChannelProvider;
+exports.GroupChannelList = GroupChannelList;
+exports.GroupChannelListUI = GroupChannelListUI;
+exports.InviteUsers = InviteUsers;
+exports.MobileLayout = MobileLayout;
+exports.SelectChannelType = SelectChannelType;
+exports.useCreateChannel = useCreateChannel;
+exports.useCreateChannelContext = useCreateChannelContext;
+exports.useSendbirdStateContext = useSendbirdStateContext;
+//# sourceMappingURL=bundle-Ctgz-ey7.js.map