@sendbird/uikit-react 3.14.11 → 3.14.12

package/cjs/chunks/bundle-BGntYUSD.js

@@ -0,0 +1,282 @@
+'use strict';
+
+var _tslib = require('./bundle-Cu2j1EmN.js');
+var React = require('react');
+var SendbirdChat = require('@sendbird/chat');
+var openChannel = require('@sendbird/chat/openChannel');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+require('../withSendbird.js');
+var ui_ContextMenu = require('./bundle-B_eF_lLw.js');
+require('react-dom');
+var ui_IconButton = require('../ui/IconButton.js');
+require('./bundle-VyDwmxN4.js');
+var LocalizationContext = require('./bundle-Bq4FcvTF.js');
+var utils = require('./bundle-CO52Wsr3.js');
+var ui_Icon = require('../ui/Icon.js');
+
+// Utility function to handle processing state and promise execution
+var processToggleAction = function (isProcessing, action, errorHandler) { return _tslib.__awaiter(void 0, void 0, void 0, function () {
+    var error_1;
+    return _tslib.__generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (isProcessing.current) {
+                    errorHandler === null || errorHandler === void 0 ? void 0 : errorHandler(new Error('Processing in progress'));
+                    return [2 /*return*/];
+                }
+                isProcessing.current = true;
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 3, 4, 5]);
+                return [4 /*yield*/, action()];
+            case 2:
+                _a.sent();
+                return [3 /*break*/, 5];
+            case 3:
+                error_1 = _a.sent();
+                errorHandler === null || errorHandler === void 0 ? void 0 : errorHandler(error_1);
+                return [3 /*break*/, 5];
+            case 4:
+                isProcessing.current = false;
+                return [7 /*endfinally*/];
+            case 5: return [2 /*return*/];
+        }
+    });
+}); };
+var getInitialIsOperator = function (channel, user) {
+    if (!channel)
+        return false;
+    if (channel instanceof openChannel.OpenChannel) {
+        return channel.isOperator(user);
+    }
+    return (user === null || user === void 0 ? void 0 : user.role) === SendbirdChat.Role.OPERATOR;
+};
+var getInitialIsMuted = function (channel, user) {
+    return channel ? user === null || user === void 0 ? void 0 : user.isMuted : false;
+};
+var useToggleOperator = function (_a) {
+    var channel = _a.channel, user = _a.user, onToggleOperatorState = _a.onToggleOperatorState, _isOperator = _a.isOperator;
+    var _b = React.useState(_isOperator !== null && _isOperator !== void 0 ? _isOperator : getInitialIsOperator(channel, user)), isOperator = _b[0], setIsOperator = _b[1];
+    var isProcessing = React.useRef(false);
+    var toggleOperator = React.useCallback(function () {
+        // If channel is undefined, resolve immediately
+        if (!channel)
+            return Promise.resolve();
+        return processToggleAction(isProcessing, function () { return _tslib.__awaiter(void 0, void 0, void 0, function () {
+            var togglePromise, newStatus;
+            return _tslib.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        togglePromise = isOperator
+                            ? channel.removeOperators([user.userId])
+                            : channel.addOperators([user.userId]);
+                        return [4 /*yield*/, togglePromise];
+                    case 1:
+                        _a.sent();
+                        newStatus = !isOperator;
+                        setIsOperator(newStatus);
+                        onToggleOperatorState === null || onToggleOperatorState === void 0 ? void 0 : onToggleOperatorState({ user: user, newStatus: newStatus });
+                        return [2 /*return*/];
+                }
+            });
+        }); }, function (error) {
+            onToggleOperatorState === null || onToggleOperatorState === void 0 ? void 0 : onToggleOperatorState({ user: user, newStatus: isOperator, error: error });
+        });
+    }, [isOperator, channel.url, user.userId, onToggleOperatorState]);
+    return {
+        isOperator: isOperator,
+        toggleOperator: toggleOperator,
+    };
+};
+var useToggleMute = function (_a) {
+    var channel = _a.channel, user = _a.user, onToggleMuteState = _a.onToggleMuteState, _isMuted = _a.isMuted;
+    var _b = React.useState(_isMuted !== null && _isMuted !== void 0 ? _isMuted : getInitialIsMuted(channel, user)), isMuted = _b[0], setIsMuted = _b[1];
+    var isProcessing = React.useRef(false);
+    var toggleMute = React.useCallback(function () {
+        // If channel is undefined, resolve immediately
+        if (!channel)
+            return Promise.resolve();
+        return processToggleAction(isProcessing, function () { return _tslib.__awaiter(void 0, void 0, void 0, function () {
+            var togglePromise, newStatus;
+            return _tslib.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        togglePromise = isMuted
+                            ? channel.unmuteUser(user)
+                            : channel.muteUser(user);
+                        return [4 /*yield*/, togglePromise];
+                    case 1:
+                        _a.sent();
+                        newStatus = !isMuted;
+                        setIsMuted(newStatus);
+                        onToggleMuteState === null || onToggleMuteState === void 0 ? void 0 : onToggleMuteState({ user: user, newStatus: newStatus });
+                        return [2 /*return*/];
+                }
+            });
+        }); }, function (error) {
+            onToggleMuteState === null || onToggleMuteState === void 0 ? void 0 : onToggleMuteState({ user: user, newStatus: isMuted, error: error });
+        });
+    }, [isMuted, channel.url, user.userId, onToggleMuteState]);
+    return {
+        isMuted: isMuted,
+        toggleMute: toggleMute,
+    };
+};
+var useToggleBan = function (_a) {
+    var channel = _a.channel, user = _a.user, onToggleBanState = _a.onToggleBanState, _isBanned = _a.isBanned;
+    var _b = React.useState(_isBanned !== null && _isBanned !== void 0 ? _isBanned : false), isBanned = _b[0], setIsBanned = _b[1]; // Initially starting with false
+    var isProcessing = React.useRef(false);
+    var toggleBan = React.useCallback(function () {
+        // If channel is undefined, resolve immediately
+        if (!channel)
+            return Promise.resolve();
+        return processToggleAction(isProcessing, function () { return _tslib.__awaiter(void 0, void 0, void 0, function () {
+            var togglePromise, newStatus;
+            return _tslib.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        togglePromise = isBanned
+                            ? channel.unbanUser(user)
+                            : channel.banUser(user);
+                        return [4 /*yield*/, togglePromise];
+                    case 1:
+                        _a.sent();
+                        newStatus = !isBanned;
+                        setIsBanned(newStatus);
+                        onToggleBanState === null || onToggleBanState === void 0 ? void 0 : onToggleBanState({ user: user, newStatus: newStatus });
+                        return [2 /*return*/];
+                }
+            });
+        }); }, function (error) {
+            onToggleBanState === null || onToggleBanState === void 0 ? void 0 : onToggleBanState({ user: user, newStatus: isBanned, error: error });
+        });
+    }, [isBanned, channel.url, user.userId, onToggleBanState]);
+    return {
+        isBanned: isBanned,
+        toggleBan: toggleBan,
+    };
+};
+
+var UserListItemMenuContext = React.createContext(undefined);
+var UserListItemMenuProvider = function (_a) {
+    var children = _a.children, values = _tslib.__rest(_a, ["children"]);
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var currentUserId = config.userId;
+    var channel = values.channel, user = values.user;
+    var isCurrentUser = user.userId === currentUserId;
+    var isCurrentUserOperator = (function () {
+        if (!channel)
+            return false;
+        return channel instanceof openChannel.OpenChannel
+            ? channel.isOperator(currentUserId)
+            : channel.myRole === SendbirdChat.Role.OPERATOR;
+    })();
+    var operatorState = useToggleOperator(values);
+    var muteState = useToggleMute(values);
+    var banState = useToggleBan(values);
+    return (React.createElement(UserListItemMenuContext.Provider, { value: _tslib.__assign(_tslib.__assign(_tslib.__assign(_tslib.__assign(_tslib.__assign({}, values), operatorState), muteState), banState), { isCurrentUser: isCurrentUser, isCurrentUserOperator: isCurrentUserOperator }) }, children));
+};
+var useUserListItemMenuContext = function () {
+    var context = React.useContext(UserListItemMenuContext);
+    if (!context) {
+        throw new Error('useUserListItemMenuContext must be used within a UserListItemMenuProvider.');
+    }
+    return context;
+};
+
+var OperatorToggleMenuItem = function (props) {
+    var _a;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var _b = useUserListItemMenuContext(), isOperator = _b.isOperator, toggleOperator = _b.toggleOperator, isCurrentUser = _b.isCurrentUser, isCurrentUserOperator = _b.isCurrentUserOperator, hideMenu = _b.hideMenu;
+    if (!isCurrentUserOperator)
+        return React.createElement(React.Fragment, null);
+    return (React.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
+            var _a;
+            (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            toggleOperator();
+            hideMenu();
+        }, disabled: isCurrentUser }), (_a = props === null || props === void 0 ? void 0 : props.children) !== null && _a !== void 0 ? _a : (isOperator
+        ? stringSet.CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR
+        : stringSet.CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR)));
+};
+var MuteToggleMenuItem = function (props) {
+    var _a;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var _b = useUserListItemMenuContext(), isMuted = _b.isMuted, toggleMute = _b.toggleMute, isCurrentUserOperator = _b.isCurrentUserOperator, hideMenu = _b.hideMenu, channel = _b.channel;
+    if (!isCurrentUserOperator || (channel === null || channel === void 0 ? void 0 : channel.isBroadcast))
+        return React.createElement(React.Fragment, null);
+    return (React.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
+            var _a;
+            (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            toggleMute();
+            hideMenu();
+        } }), (_a = props === null || props === void 0 ? void 0 : props.children) !== null && _a !== void 0 ? _a : (isMuted
+        ? stringSet.CHANNEL_SETTING__MODERATION__UNMUTE
+        : stringSet.CHANNEL_SETTING__MODERATION__MUTE)));
+};
+var BanToggleMenuItem = function (props) {
+    var _a;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var _b = useUserListItemMenuContext(), isBanned = _b.isBanned, toggleBan = _b.toggleBan, isCurrentUserOperator = _b.isCurrentUserOperator, hideMenu = _b.hideMenu;
+    if (!isCurrentUserOperator)
+        return React.createElement(React.Fragment, null);
+    return (React.createElement(ui_ContextMenu.MenuItem, _tslib.__assign({}, props, { onClick: function (e) {
+            var _a;
+            (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            toggleBan();
+            hideMenu();
+        } }), (_a = props === null || props === void 0 ? void 0 : props.children) !== null && _a !== void 0 ? _a : (isBanned
+        ? stringSet.CHANNEL_SETTING__MODERATION__UNBAN
+        : stringSet.CHANNEL_SETTING__MODERATION__BAN)));
+};
+
+var TriggerIcon = function (_a) {
+    var toggleMenu = _a.toggleMenu, ref = _a.ref;
+    return (React.createElement(ui_IconButton, { ref: ref, className: "sendbird-user-message__more__menu", width: "32px", height: "32px", onClick: toggleMenu },
+        React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.CONTENT_INVERSE })));
+};
+var DefaultMenuItems = function (_a) {
+    var items = _a.items;
+    var OperatorToggleMenuItem = items.OperatorToggleMenuItem, MuteToggleMenuItem = items.MuteToggleMenuItem, BanToggleMenuItem = items.BanToggleMenuItem;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(OperatorToggleMenuItem, null),
+        React.createElement(MuteToggleMenuItem, null),
+        React.createElement(BanToggleMenuItem, null)));
+};
+
+var UserListItemMenu = function (props) {
+    var user = props.user, className = props.className, _a = props.renderTrigger, renderTrigger = _a === void 0 ? TriggerIcon : _a, _b = props.renderMenuItems, renderMenuItems = _b === void 0 ? DefaultMenuItems : _b;
+    var _c = React.useState(false), isMenuVisible = _c[0], setMenuVisibility = _c[1];
+    var containerRef = React.useRef(null);
+    var triggerRef = React.useRef(null);
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var currentUserId = config.userId;
+    var toggleMenu = function () {
+        setMenuVisibility(function (prev) { return !prev; });
+    };
+    var hideMenu = function () {
+        setMenuVisibility(false);
+    };
+    if (user.userId === currentUserId) {
+        return null;
+    }
+    return (React.createElement("div", { className: utils.classnames('sendbird-user-list-item-menu', className), ref: containerRef },
+        React.createElement(UserListItemMenuProvider, _tslib.__assign({}, props, { hideMenu: hideMenu, toggleMenu: toggleMenu }),
+            renderTrigger({ ref: triggerRef, toggleMenu: toggleMenu }),
+            isMenuVisible && (React.createElement(ui_ContextMenu.MenuItems
+            // TODO: Add id using getObservingId for useElementObserver
+            , { 
+                // TODO: Add id using getObservingId for useElementObserver
+                parentRef: triggerRef, parentContainRef: containerRef, closeDropdown: hideMenu }, renderMenuItems({
+                items: {
+                    OperatorToggleMenuItem: OperatorToggleMenuItem,
+                    MuteToggleMenuItem: MuteToggleMenuItem,
+                    BanToggleMenuItem: BanToggleMenuItem,
+                },
+            }))))));
+};
+
+exports.UserListItemMenu = UserListItemMenu;
+exports.UserListItemMenuProvider = UserListItemMenuProvider;
+exports.useUserListItemMenuContext = useUserListItemMenuContext;
+//# sourceMappingURL=bundle-BGntYUSD.js.map

package/cjs/chunks/bundle-BGntYUSD.js.map

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

package/cjs/chunks/{bundle-1gIzHc0z.js → bundle-BHieBSdL.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var _tslib = require('./bundle-BOmwadBI.js');
+var _tslib = require('./bundle-Cu2j1EmN.js');
 var React = require('react');
-var MediaQueryContext = require('./bundle-BtRbaZbx.js');
+var MediaQueryContext = require('./bundle-D0U-xAFE.js');
 
 var DEFAULT_DURATION = 300;
 function preventDefault(e) {
@@ -76,4 +76,4 @@ function useLongPress(_a, _b) {
 }
 
 exports.useLongPress = useLongPress;
-//# sourceMappingURL=bundle-1gIzHc0z.js.map
+//# sourceMappingURL=bundle-BHieBSdL.js.map

package/cjs/chunks/bundle-BHieBSdL.js.map

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

package/cjs/chunks/{bundle-CzC7ikHP.js → bundle-BIlOa8cH.js}

@@ -12,4 +12,4 @@ exports.ThreadReplySelectType = void 0;
 exports.MAX_USER_MENTION_COUNT = MAX_USER_MENTION_COUNT;
 exports.MAX_USER_SUGGESTION_COUNT = MAX_USER_SUGGESTION_COUNT;
 exports.USER_MENTION_TEMP_CHAR = USER_MENTION_TEMP_CHAR;
-//# sourceMappingURL=bundle-CzC7ikHP.js.map
+//# sourceMappingURL=bundle-BIlOa8cH.js.map

package/cjs/chunks/bundle-BIlOa8cH.js.map

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

package/cjs/chunks/{bundle-CWLdgq5P.js → bundle-BJBhQrsD.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var consts = require('./bundle-BLhYL7sf.js');
+var consts = require('./bundle-DsscLs3k.js');
 var lame_all = require('../lame.all.js');
 
 // Thanks to https://codesandbox.io/s/media-recorder-api-downsampling-16k-mp3-encode-using-lame-js-forked-n1pblw
@@ -129,4 +129,4 @@ function bufferToWav(abuffer, len) {
 
 exports.downsampleToWav = downsampleToWav;
 exports.encodeMp3 = encodeMp3;
-//# sourceMappingURL=bundle-CWLdgq5P.js.map
+//# sourceMappingURL=bundle-BJBhQrsD.js.map

package/cjs/chunks/bundle-BJBhQrsD.js.map

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

package/cjs/chunks/{bundle-U0Gf3_8u.js → bundle-BKID5CS2.js}

@@ -3,4 +3,4 @@
 var OG_MESSAGE_BODY_CLASSNAME = 'sendbird-og-message-item-body__text-bubble';
 
 exports.OG_MESSAGE_BODY_CLASSNAME = OG_MESSAGE_BODY_CLASSNAME;
-//# sourceMappingURL=bundle-U0Gf3_8u.js.map
+//# sourceMappingURL=bundle-BKID5CS2.js.map

package/cjs/chunks/bundle-BKID5CS2.js.map

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

package/cjs/chunks/{bundle-ED_4YBBi.js → bundle-BKe7hLI0.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var ui_Label = require('./bundle-ChQCtrna.js');
+var ui_Label = require('./bundle-BM95N32D.js');
 
 var getChannelTitle = function (channel, currentUserId, stringSet) {
     var _a;
@@ -24,4 +24,4 @@ var getChannelTitle = function (channel, currentUserId, stringSet) {
 };
 
 exports.getChannelTitle = getChannelTitle;
-//# sourceMappingURL=bundle-ED_4YBBi.js.map
+//# sourceMappingURL=bundle-BKe7hLI0.js.map

package/cjs/chunks/bundle-BKe7hLI0.js.map

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

package/cjs/chunks/{bundle-ChQCtrna.js → bundle-BM95N32D.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var _tslib = require('./bundle-BOmwadBI.js');
+var _tslib = require('./bundle-Cu2j1EmN.js');
 var React = require('react');
-var stringSet = require('./bundle-DhdwG-eV.js');
+var stringSet = require('./bundle-CrkUdg03.js');
 
 var Typography = {
     H_1: 'H_1',
@@ -87,4 +87,4 @@ exports.LabelColors = LabelColors;
 exports.LabelStringSet = LabelStringSet;
 exports.LabelTypography = LabelTypography;
 exports.changeColorToClassName = changeColorToClassName;
-//# sourceMappingURL=bundle-ChQCtrna.js.map
+//# sourceMappingURL=bundle-BM95N32D.js.map

package/cjs/chunks/bundle-BM95N32D.js.map

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

package/cjs/chunks/{bundle-DukR2u0g.js → bundle-BV4k8A-L.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./bundle-CuZz1sho.js');
+var index = require('./bundle-VyDwmxN4.js');
 
 function getMessageFirstFileType(message) {
     return index.K(message)
@@ -70,4 +70,4 @@ exports.getMessageFirstFileName = getMessageFirstFileName;
 exports.getMessageFirstFileThumbnailUrl = getMessageFirstFileThumbnailUrl;
 exports.getMessageFirstFileType = getMessageFirstFileType;
 exports.getMessageFirstFileUrl = getMessageFirstFileUrl;
-//# sourceMappingURL=bundle-DukR2u0g.js.map
+//# sourceMappingURL=bundle-BV4k8A-L.js.map

package/cjs/chunks/bundle-BV4k8A-L.js.map

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

package/cjs/chunks/{bundle-U4f-rGRL.js → bundle-BZuuSeui.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var _tslib = require('./bundle-BOmwadBI.js');
+var _tslib = require('./bundle-Cu2j1EmN.js');
 var React = require('react');
-var SuggestedMentionListView = require('./bundle-DwnqAGGZ.js');
+var SuggestedMentionListView = require('./bundle-aANaw2cz.js');
 var Thread_context = require('../Thread/context.js');
 
 var SuggestedMentionList = function (props) {
@@ -11,4 +11,4 @@ var SuggestedMentionList = function (props) {
 };
 
 exports.SuggestedMentionList = SuggestedMentionList;
-//# sourceMappingURL=bundle-U4f-rGRL.js.map
+//# sourceMappingURL=bundle-BZuuSeui.js.map

package/cjs/chunks/bundle-BZuuSeui.js.map

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