@sendbird/uikit-react 3.10.1 → 3.11.0

package/chunks/{bundle-WpHDilD_.js → bundle-tOpyp2TM.js}

@@ -1,5 +1,4 @@
 var noop = function () { };
-var isAboutSame = function (a, b, px) { return Math.abs(a - b) <= px; };
 var isMobileIOS = function (userAgent) {
     var isIOS = /iPhone|iPad|iPod/i.test(userAgent);
     var isWebkit = /WebKit/i.test(userAgent);
@@ -7,5 +6,5 @@ var isMobileIOS = function (userAgent) {
     return isIOS && (isWebkit || isSafari);
 };
 
-export { isMobileIOS as a, isAboutSame as i, noop as n };
-//# sourceMappingURL=bundle-WpHDilD_.js.map
+export { isMobileIOS as i, noop as n };
+//# sourceMappingURL=bundle-tOpyp2TM.js.map

package/chunks/bundle-tOpyp2TM.js.map

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

package/chunks/{bundle-aVVX2zHR.js → bundle-thvveea5.js}

@@ -1,5 +1,5 @@
-import { d as isFileMessage, b as isMultipleFilesMessage } from './bundle-uk2Y0AQu.js';
-import { K } from './bundle-kfNTRju0.js';
+import { c as isFileMessage, a as isMultipleFilesMessage } from './bundle-GQt7EDbt.js';
+import { K } from './bundle-n9wVwJwL.js';
 
 function getMessageFirstFileType(message) {
     return K(message)
@@ -66,4 +66,4 @@ function getMessageFirstFileThumbnailUrl(message) {
 }
 
 export { getMessageFirstFileType as a, getMessageFirstFileName as b, getMessageFirstFileThumbnailUrl as c, getMessageFirstFileUrl as g };
-//# sourceMappingURL=bundle-aVVX2zHR.js.map
+//# sourceMappingURL=bundle-thvveea5.js.map

package/chunks/bundle-thvveea5.js.map

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

package/chunks/{bundle-1WAo3loP.js → bundle-ueo2Sf-L.js}

@@ -15,4 +15,4 @@ var NodeNames = {
 };
 
 export { MessageInputKeys as M, NodeTypes as N, NodeNames as a };
-//# sourceMappingURL=bundle-1WAo3loP.js.map
+//# sourceMappingURL=bundle-ueo2Sf-L.js.map

package/chunks/bundle-ueo2Sf-L.js.map

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

package/chunks/bundle-vBXnDJn4.js

@@ -0,0 +1,120 @@
+import React__default, { useState } from 'react';
+import { C as ChannelPreview } from './bundle-AnoUW9yQ.js';
+import { C as ChannelPreviewAction } from './bundle-zuRObww2.js';
+import { u as useChannelListContext, L as LEAVE_CHANNEL_SUCCESS, S as SET_CURRENT_CHANNEL } from './bundle-areDE3aT.js';
+import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
+import { G as GroupChannelListHeader } from './bundle-IbFVsltH.js';
+import EditUserProfile from '../EditUserProfile.js';
+import PlaceHolder, { PlaceHolderTypes } from '../ui/PlaceHolder.js';
+import { u as useOnScrollPositionChangeDetector } from './bundle-143lYf48.js';
+import { A as AddChannel } from './bundle-oszCig8K.js';
+
+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;
+    var _b = useState(false), showProfileEdit = _b[0], setShowProfileEdit = _b[1];
+    var stores = useSendbirdStateContext().stores;
+    var renderer = {
+        addChannel: renderAddChannel,
+        channel: renderChannel,
+        placeholder: {
+            loading: function () {
+                if (initialized)
+                    return null;
+                if (renderPlaceHolderLoading)
+                    return renderPlaceHolderLoading();
+                return React__default.createElement(PlaceHolder, { type: PlaceHolderTypes.LOADING });
+            },
+            empty: function () {
+                if (!initialized)
+                    return null;
+                if (renderPlaceHolderEmptyList)
+                    return renderPlaceHolderEmptyList();
+                return React__default.createElement(PlaceHolder, { type: PlaceHolderTypes.NO_CHANNELS });
+            },
+            error: function () {
+                if (!initialized || !stores.sdkStore.error)
+                    return null;
+                if (renderPlaceHolderError)
+                    return renderPlaceHolderError();
+                return React__default.createElement(PlaceHolder, { type: PlaceHolderTypes.WRONG });
+            },
+        },
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "sendbird-channel-list__header" }, (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || (React__default.createElement(GroupChannelListHeader, { onEdit: function () { return allowProfileEdit && setShowProfileEdit(true); }, allowProfileEdit: allowProfileEdit, renderIconButton: function () { return renderer.addChannel(); } }))),
+        showProfileEdit && (React__default.createElement(EditUserProfile, { onThemeChange: onChangeTheme, onCancel: function () { return setShowProfileEdit(false); }, onEditProfile: function (user) {
+                setShowProfileEdit(false);
+                onUserProfileUpdated(user);
+            } })),
+        React__default.createElement(ChannelListComponent, { data: channels, renderItem: renderer.channel, onLoadMore: onLoadMore, placeholderLoading: renderer.placeholder.loading(), placeholderEmpty: renderer.placeholder.empty(), placeholderError: renderer.placeholder.error() })));
+};
+/**
+ * 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;
+    var onScroll = useOnScrollPositionChangeDetector({
+        onReachedBottom: function () { return onLoadMore(); },
+    });
+    return (React__default.createElement("div", { className: 'sendbird-channel-list__body', onScroll: onScroll },
+        placeholderError,
+        React__default.createElement("div", null, data.map(function (item, index) { return renderItem({ item: item, index: index }); })),
+        placeholderLoading,
+        data.length === 0 && placeholderEmpty));
+};
+
+var ChannelListUI = function (props) {
+    var renderHeader = props.renderHeader, renderChannelPreview = props.renderChannelPreview, renderPlaceHolderError = props.renderPlaceHolderError, renderPlaceHolderLoading = props.renderPlaceHolderLoading, renderPlaceHolderEmptyList = props.renderPlaceHolderEmptyList;
+    var _a = 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 _b = useSendbirdStateContext(), stores = _b.stores, config = _b.config;
+    var logger = config.logger, _c = config.isOnline, isOnline = _c === void 0 ? false : _c;
+    var sdk = stores.sdkStore.sdk;
+    var renderListItem = function (props) {
+        var channel = props.item, index = props.index;
+        var onLeaveChannel = function (channel, cb) {
+            logger.info('ChannelList: Leaving channel', channel);
+            channel
+                .leave()
+                .then(function (res) {
+                logger.info('ChannelList: Leaving channel success', res);
+                if (cb && typeof cb === 'function')
+                    cb(channel, null);
+                channelListDispatcher({
+                    type: LEAVE_CHANNEL_SUCCESS,
+                    payload: channel.url,
+                });
+            })
+                .catch(function (err) {
+                logger.error('ChannelList: Leaving channel failed', err);
+                if (cb && typeof cb === 'function')
+                    cb(channel, err);
+            });
+        };
+        var onClickChannel = 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: SET_CURRENT_CHANNEL,
+                payload: channel,
+            });
+        };
+        if (renderChannelPreview) {
+            return (React__default.createElement("div", { key: channel === null || channel === void 0 ? void 0 : channel.url, onClick: onClickChannel }, renderChannelPreview({ channel: channel, onLeaveChannel: onLeaveChannel })));
+        }
+        return (React__default.createElement(ChannelPreview, { key: channel === null || channel === void 0 ? void 0 : channel.url, tabIndex: index, onClick: onClickChannel, channel: channel, onLeaveChannel: function () { return onLeaveChannel(channel, null); }, isActive: (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 () { return (React__default.createElement(ChannelPreviewAction, { channel: channel, disabled: !isOnline, onLeaveChannel: function () { return onLeaveChannel(channel, null); } })); } }));
+    };
+    return (React__default.createElement(GroupChannelListUIView, { renderHeader: renderHeader, renderChannel: renderListItem, renderPlaceHolderError: renderPlaceHolderError, renderPlaceHolderLoading: renderPlaceHolderLoading, renderPlaceHolderEmptyList: renderPlaceHolderEmptyList, onChangeTheme: onThemeChange, allowProfileEdit: allowProfileEdit, onUserProfileUpdated: onProfileEditSuccess, channels: allChannels, onLoadMore: fetchChannelList, initialized: initialized, renderAddChannel: function () { return React__default.createElement(AddChannel, null); } }));
+};
+
+export { ChannelListUI as C, GroupChannelListUIView as G };
+//# sourceMappingURL=bundle-vBXnDJn4.js.map

package/chunks/bundle-vBXnDJn4.js.map

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

package/chunks/{bundle-ZcE3JzW_.js → bundle-wBOLbuH7.js}

@@ -12,25 +12,26 @@ var CHANNEL_TYPE;
 var CreateChannelContext = React__default.createContext(undefined);
 var CreateChannelProvider = function (props) {
     var _a;
-    var children = props.children, onCreateChannel = props.onCreateChannel, onBeforeCreateChannel = props.onBeforeCreateChannel, overrideInviteUser = props.overrideInviteUser, userListQuery = props.userListQuery;
+    var children = props.children, onCreateChannelClick = props.onCreateChannelClick, onBeforeCreateChannel = props.onBeforeCreateChannel, onChannelCreated = props.onChannelCreated, userListQuery = props.userListQuery, onCreateChannel = props.onCreateChannel, overrideInviteUser = props.overrideInviteUser;
     var store = useSendbirdStateContext();
-    var userListQuery_ = (_a = store === null || store === void 0 ? void 0 : store.config) === null || _a === void 0 ? void 0 : _a.userListQuery;
-    var createChannel = getCreateGroupChannel(store);
+    var _userListQuery = userListQuery !== null && userListQuery !== void 0 ? userListQuery : (_a = store === null || store === void 0 ? void 0 : store.config) === null || _a === void 0 ? void 0 : _a.userListQuery;
     var _b = useState(0), step = _b[0], setStep = _b[1];
     var _c = useState(CHANNEL_TYPE.GROUP), type = _c[0], setType = _c[1];
     return (React__default.createElement(CreateChannelContext.Provider, { value: {
+            createChannel: getCreateGroupChannel(store),
+            onCreateChannelClick: onCreateChannelClick,
             onBeforeCreateChannel: onBeforeCreateChannel,
-            createChannel: createChannel,
-            onCreateChannel: onCreateChannel,
-            overrideInviteUser: overrideInviteUser,
-            userListQuery: userListQuery || userListQuery_,
+            onChannelCreated: onChannelCreated,
+            userListQuery: _userListQuery,
             step: step,
             setStep: setStep,
             type: type,
             setType: setType,
+            onCreateChannel: onCreateChannel,
+            overrideInviteUser: overrideInviteUser,
         } }, children));
 };
 var useCreateChannelContext = function () { return (React__default.useContext(CreateChannelContext)); };
 
 export { CreateChannelProvider as C, CHANNEL_TYPE as a, useCreateChannelContext as u };
-//# sourceMappingURL=bundle-ZcE3JzW_.js.map
+//# sourceMappingURL=bundle-wBOLbuH7.js.map

package/chunks/bundle-wBOLbuH7.js.map

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

package/chunks/{bundle-NYZlEPQ4.js → bundle-wsahaI_Z.js}

@@ -1,18 +1,19 @@
 import React__default, { useState, useEffect } from 'react';
-import { u as useChannelContext } from './bundle-J79McRkg.js';
+import { useChannelContext } from '../Channel/context.js';
 import PlaceHolder, { PlaceHolderTypes } from '../ui/PlaceHolder.js';
 import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
-import Message from '../Channel/components/Message.js';
-import { e as isAboutSame } from './bundle-xsV7pD8p.js';
+import { M as Message } from './bundle-qGLQQXlH.js';
+import { i as isAboutSame } from './bundle-BbdMr4SL.js';
 import { getMessagePartsInfo } from '../Channel/utils/getMessagePartsInfo.js';
-import UnreadCount from '../Channel/components/UnreadCount.js';
-import FrozenNotification from '../Channel/components/FrozenNotification.js';
-import { S as SCROLL_BUFFER } from './bundle-ZKM9Qk_j.js';
+import { U as UnreadCount } from './bundle-HRsLD2CW.js';
+import { F as FrozenNotification } from './bundle-xkOWTTW1.js';
+import { S as SCROLL_BUFFER } from './bundle-zpdae5WH.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
 import { MessageProvider } from '../Message/context.js';
-import { a as useThrottleCallback, u as useHandleOnScrollCallback } from './bundle-Fkv6nKcy.js';
+import { u as useHandleOnScrollCallback } from './bundle-MGkFgiJm.js';
+import { u as useThrottleCallback } from './bundle-l3_ubbH6.js';
 import TypingIndicatorBubble from '../ui/TypingIndicatorBubble.js';
-import { usePreservedCallback } from '@sendbird/uikit-tools';
+import { u as useOnScrollPositionChangeDetector } from './bundle-143lYf48.js';
 
 var TypingIndicatorType;
 (function (TypingIndicatorType) {
@@ -54,26 +55,7 @@ function useScrollBehavior() {
     return null;
 }
 
-var BUFFER_DELAY = 100;
-function useOnScrollPositionChangeDetector(props) {
-    var onReachedTop = props.onReachedTop, onReachedBottom = props.onReachedBottom, onInBetween = props.onInBetween;
-    var cb = usePreservedCallback(function (event) {
-        if (event === null || event === void 0 ? void 0 : event.target) {
-            var _a = event.target, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-            if (isAboutSame(scrollTop, 0, SCROLL_BUFFER)) {
-                onReachedTop();
-            }
-            else if (isAboutSame(scrollHeight, clientHeight + scrollTop, SCROLL_BUFFER)) {
-                onReachedBottom();
-            }
-            else {
-                onInBetween();
-            }
-        }
-    });
-    return useThrottleCallback(cb, BUFFER_DELAY, { trailing: true });
-}
-
+/* We operate the CSS files for Channel&GroupChannel modules in the GroupChannel */
 var SCROLL_BOTTOM_PADDING = 50;
 var MessageList = function (_a) {
     var _b, _c, _d, _e, _f;
@@ -245,4 +227,4 @@ var MessageList = function (_a) {
 };
 
 export { MessageList as M, TypingIndicatorType as T };
-//# sourceMappingURL=bundle-NYZlEPQ4.js.map
+//# sourceMappingURL=bundle-wsahaI_Z.js.map

package/{cjs/chunks/bundle-3K153hLM.js.map → chunks/bundle-wsahaI_Z.js.map}

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

package/chunks/{bundle-tca5p7Pl.js → bundle-x1NoGtpJ.js}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { n as noop } from './bundle-WpHDilD_.js';
+import { n as noop } from './bundle-tOpyp2TM.js';
 
 var Context = React__default.createContext({
     opened: '',
@@ -9,4 +9,4 @@ var Consumer = Context.Consumer;
 var Provider = Context.Provider;
 
 export { Consumer as C, Provider as P };
-//# sourceMappingURL=bundle-tca5p7Pl.js.map
+//# sourceMappingURL=bundle-x1NoGtpJ.js.map

package/chunks/bundle-x1NoGtpJ.js.map

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

package/chunks/bundle-xkOWTTW1.js

@@ -0,0 +1,13 @@
+import React__default, { useContext } from 'react';
+import { L as LocalizationContext } from './bundle-hOV701rb.js';
+import { L as Label, a as LabelTypography } from './bundle-kVopRZZG.js';
+
+var FrozenNotification = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b;
+    var stringSet = useContext(LocalizationContext).stringSet;
+    return (React__default.createElement("div", { className: "sendbird-notification sendbird-notification--frozen ".concat(className) },
+        React__default.createElement(Label, { className: "sendbird-notification__text", type: LabelTypography.CAPTION_2 }, stringSet.CHANNEL_FROZEN)));
+};
+
+export { FrozenNotification as F };
+//# sourceMappingURL=bundle-xkOWTTW1.js.map

package/chunks/bundle-xkOWTTW1.js.map

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

package/chunks/{bundle-WDOQg3ty.js → bundle-yE5T9BpV.js}

@@ -1,4 +1,4 @@
-import { d as defaultLocale } from './bundle-TV4-nyqN.js';
+import { d as defaultLocale } from './bundle-b6xyPdyj.js';
 
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -16,6 +16,43 @@ function requiredArgs(required, args) {
   }
 }
 
+/**
+ * @name isDate
+ * @category Common Helpers
+ * @summary Is the given value a date?
+ *
+ * @description
+ * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
+ *
+ * @param {*} value - the value to check
+ * @returns {boolean} true if the given value is a date
+ * @throws {TypeError} 1 arguments required
+ *
+ * @example
+ * // For a valid date:
+ * const result = isDate(new Date())
+ * //=> true
+ *
+ * @example
+ * // For an invalid date:
+ * const result = isDate(new Date(NaN))
+ * //=> true
+ *
+ * @example
+ * // For some value:
+ * const result = isDate('2014-02-31')
+ * //=> false
+ *
+ * @example
+ * // For an object:
+ * const result = isDate({})
+ * //=> false
+ */
+function isDate(value) {
+  requiredArgs(1, arguments);
+  return value instanceof Date || _typeof(value) === 'object' && Object.prototype.toString.call(value) === '[object Date]';
+}
+
 /**
  * @name toDate
  * @category Common Helpers
@@ -67,43 +104,6 @@ function toDate(argument) {
   }
 }
 
-/**
- * @name isDate
- * @category Common Helpers
- * @summary Is the given value a date?
- *
- * @description
- * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes.
- *
- * @param {*} value - the value to check
- * @returns {boolean} true if the given value is a date
- * @throws {TypeError} 1 arguments required
- *
- * @example
- * // For a valid date:
- * const result = isDate(new Date())
- * //=> true
- *
- * @example
- * // For an invalid date:
- * const result = isDate(new Date(NaN))
- * //=> true
- *
- * @example
- * // For some value:
- * const result = isDate('2014-02-31')
- * //=> false
- *
- * @example
- * // For an object:
- * const result = isDate({})
- * //=> false
- */
-function isDate(value) {
-  requiredArgs(1, arguments);
-  return value instanceof Date || _typeof(value) === 'object' && Object.prototype.toString.call(value) === '[object Date]';
-}
-
 /**
  * @name isValid
  * @category Common Helpers
@@ -1711,4 +1711,4 @@ function cleanEscapedString(input) {
 }
 
 export { toInteger as a, format as f, requiredArgs as r, toDate as t };
-//# sourceMappingURL=bundle-WDOQg3ty.js.map
+//# sourceMappingURL=bundle-yE5T9BpV.js.map