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

package/dist/chunks/bundle-_HbjO2rd.js

@@ -0,0 +1,262 @@
+import React__default, { useState, useEffect } from 'react';
+import { u as useChannelContext } from './bundle-UApGrG-m.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, s as scrollIntoLast } from './bundle-GWEiVUz_.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-Vp2hvuBO.js';
+import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
+import { MessageProvider } from '../Message/context.js';
+import { a as useDebounce, u as useHandleOnScrollCallback } from './bundle-q496PSxP.js';
+import TypingIndicatorBubble from '../ui/TypingIndicatorBubble.js';
+import { usePreservedCallback } from '@sendbird/uikit-tools';
+
+var TypingIndicatorType;
+(function (TypingIndicatorType) {
+    TypingIndicatorType["Text"] = "text";
+    TypingIndicatorType["Bubble"] = "bubble";
+})(TypingIndicatorType || (TypingIndicatorType = {}));
+
+var DELAY = 500;
+function useSetScrollToBottom(_a) {
+    var loading = _a.loading;
+    var _b = useState(0), scrollBottom = _b[0], setScrollBottom = _b[1];
+    useEffect(function () {
+        if (loading) {
+            setScrollBottom(0);
+        }
+    }, [loading]);
+    var scrollCb = function (e) {
+        var element = e.target;
+        try {
+            setScrollBottom(element.scrollHeight - element.scrollTop - element.offsetHeight);
+        }
+        catch (_a) {
+            //
+        }
+    };
+    return {
+        scrollBottom: scrollBottom,
+        scrollToBottomHandler: useDebounce(scrollCb, DELAY),
+    };
+}
+
+function useScrollBehavior() {
+    var _a = useChannelContext(), scrollRef = _a.scrollRef, _b = _a.scrollBehavior, scrollBehavior = _b === void 0 ? 'auto' : _b;
+    useEffect(function () {
+        if (scrollRef.current) {
+            scrollRef.current.style.scrollBehavior = scrollBehavior;
+        }
+    }, [scrollRef.current]);
+    return null;
+}
+
+var BUFFER_DELAY = 500;
+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 useDebounce(cb, BUFFER_DELAY);
+}
+
+var SCROLL_BOTTOM_PADDING = 50;
+var MessageList = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var _g = _a.className, className = _g === void 0 ? '' : _g, renderMessage = _a.renderMessage, renderPlaceholderEmpty = _a.renderPlaceholderEmpty, renderCustomSeparator = _a.renderCustomSeparator, renderPlaceholderLoader = _a.renderPlaceholderLoader, renderFrozenNotification = _a.renderFrozenNotification;
+    var _h = useChannelContext(), allMessages = _h.allMessages, localMessages = _h.localMessages, hasMorePrev = _h.hasMorePrev, hasMoreNext = _h.hasMoreNext, setInitialTimeStamp = _h.setInitialTimeStamp, setAnimatedMessageId = _h.setAnimatedMessageId, setHighLightedMessageId = _h.setHighLightedMessageId, isMessageGroupingEnabled = _h.isMessageGroupingEnabled, scrollRef = _h.scrollRef, onScrollCallback = _h.onScrollCallback, onScrollDownCallback = _h.onScrollDownCallback, messagesDispatcher = _h.messagesDispatcher, messageActionTypes = _h.messageActionTypes, currentGroupChannel = _h.currentGroupChannel, disableMarkAsRead = _h.disableMarkAsRead, filterMessageList = _h.filterMessageList, replyType = _h.replyType, loading = _h.loading, isScrolled = _h.isScrolled, unreadSince = _h.unreadSince, unreadSinceDate = _h.unreadSinceDate, typingMembers = _h.typingMembers;
+    var store = useSendbirdStateContext();
+    var allMessagesFiltered = (typeof filterMessageList === 'function')
+        ? allMessages.filter(filterMessageList)
+        : allMessages;
+    var markAsReadScheduler = store.config.markAsReadScheduler;
+    var _j = useState(false), isScrollBottom = _j[0], setIsScrollBottom = _j[1];
+    useScrollBehavior();
+    var onScroll = function () {
+        var element = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+        if (element == null) {
+            return;
+        }
+        var scrollTop = element.scrollTop, clientHeight = element.clientHeight, scrollHeight = element.scrollHeight;
+        if (isAboutSame(scrollTop, 0, SCROLL_BUFFER)) {
+            onScrollCallback();
+        }
+        if (isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER) && hasMoreNext) {
+            onScrollDownCallback(function (_a) {
+                var messages = _a[0];
+                if (messages) {
+                    try {
+                        setTimeout(function () { return scrollIntoLast(0, scrollRef); }, 
+                        /**
+                         * Rendering MFM takes long time so we need this.
+                         * But later we should find better solution.
+                         */
+                        1000);
+                        // element.scrollTop = scrollHeight - clientHeight;
+                        // scrollRef.current.scrollTop = scrollHeight - clientHeight;
+                    }
+                    catch (error) {
+                        //
+                    }
+                }
+            });
+        }
+        if (!disableMarkAsRead
+            && isAboutSame(clientHeight + scrollTop, scrollHeight, SCROLL_BUFFER)
+            && !!currentGroupChannel) {
+            messagesDispatcher({
+                type: messageActionTypes.MARK_AS_READ,
+                payload: { channel: currentGroupChannel },
+            });
+            markAsReadScheduler.push(currentGroupChannel);
+        }
+    };
+    var onClickScrollBot = function () {
+        var _a, _b, _c, _d, _e;
+        setInitialTimeStamp === null || setInitialTimeStamp === void 0 ? void 0 : setInitialTimeStamp(null);
+        setAnimatedMessageId === null || setAnimatedMessageId === void 0 ? void 0 : setAnimatedMessageId(null);
+        setHighLightedMessageId === null || setHighLightedMessageId === void 0 ? void 0 : setHighLightedMessageId(null);
+        if (((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) > -1) {
+            scrollRef.current.scrollTop = ((_c = (_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) !== null && _c !== void 0 ? _c : 0) - ((_e = (_d = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) !== null && _e !== void 0 ? _e : 0);
+        }
+    };
+    /**
+     * 1. Move the messsage list scroll
+     *    when each message's height is changed by `reactions` OR `showEdit`
+     * 2. Keep the scrollBottom value after fetching new message list
+     */
+    var moveScroll = function (isBottomMessageAffected) {
+        if (isBottomMessageAffected === void 0) { isBottomMessageAffected = false; }
+        var current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+        if (current) {
+            var bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
+            if (scrollBottom < bottom
+                && (!isBottomMessageAffected || scrollBottom < SCROLL_BUFFER)) {
+                // Move the scroll as much as the height of the message has changed
+                current.scrollTop += bottom - scrollBottom;
+            }
+        }
+    };
+    var handleOnScroll = useHandleOnScrollCallback({
+        hasMore: hasMorePrev,
+        hasNext: hasMoreNext,
+        onScroll: onScroll,
+        scrollRef: scrollRef,
+    });
+    var onScrollReachedEndDetector = useOnScrollPositionChangeDetector({
+        onReachedBottom: function () {
+            /**
+             * Note that this event is already being called in onScroll() above. However, it is only being called when
+             * hasMoreNext is true but it needs to be called when hasNext is false when reached bottom as well.
+             */
+            if (!hasMoreNext && !disableMarkAsRead && !!currentGroupChannel) {
+                messagesDispatcher({
+                    type: messageActionTypes.MARK_AS_READ,
+                    payload: { channel: currentGroupChannel },
+                });
+                markAsReadScheduler.push(currentGroupChannel);
+            }
+            setIsScrollBottom(true);
+        },
+        onReachedTop: function () {
+            setIsScrollBottom(false);
+        },
+        onInBetween: function () {
+            setIsScrollBottom(false);
+        },
+    });
+    var _k = useSetScrollToBottom({ loading: loading }), scrollToBottomHandler = _k.scrollToBottomHandler, scrollBottom = _k.scrollBottom;
+    if (loading) {
+        return (typeof renderPlaceholderLoader === 'function')
+            ? renderPlaceholderLoader()
+            : React__default.createElement(PlaceHolder, { type: PlaceHolderTypes.LOADING });
+    }
+    if (allMessagesFiltered.length < 1) {
+        if (renderPlaceholderEmpty && typeof renderPlaceholderEmpty === 'function') {
+            return renderPlaceholderEmpty();
+        }
+        return React__default.createElement(PlaceHolder, { className: "sendbird-conversation__no-messages", type: PlaceHolderTypes.NO_MESSAGES });
+    }
+    return (React__default.createElement(React__default.Fragment, null,
+        !isScrolled && React__default.createElement(PlaceHolder, { type: PlaceHolderTypes.LOADING }),
+        React__default.createElement("div", { className: "sendbird-conversation__messages ".concat(className) },
+            React__default.createElement("div", { className: "sendbird-conversation__scroll-container" },
+                React__default.createElement("div", { className: "sendbird-conversation__padding" }),
+                React__default.createElement("div", { className: "sendbird-conversation__messages-padding", ref: scrollRef, onScroll: function (e) {
+                        handleOnScroll();
+                        scrollToBottomHandler(e);
+                        onScrollReachedEndDetector(e);
+                    } },
+                    allMessagesFiltered.map(function (m, idx) {
+                        var _a, _b;
+                        var _c = getMessagePartsInfo({
+                            allMessages: allMessagesFiltered,
+                            replyType: replyType,
+                            isMessageGroupingEnabled: isMessageGroupingEnabled,
+                            currentIndex: idx,
+                            currentMessage: m,
+                            currentChannel: currentGroupChannel,
+                        }), chainTop = _c.chainTop, chainBottom = _c.chainBottom, hasSeparator = _c.hasSeparator;
+                        var isByMe = ((_a = m === null || m === void 0 ? void 0 : m.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.userId);
+                        return (React__default.createElement(MessageProvider, { message: m, key: m === null || m === void 0 ? void 0 : m.messageId, isByMe: isByMe },
+                            React__default.createElement(Message, { handleScroll: moveScroll, renderMessage: renderMessage, message: m, hasSeparator: hasSeparator, chainTop: chainTop, chainBottom: chainBottom, renderCustomSeparator: renderCustomSeparator })));
+                    }),
+                    localMessages.map(function (m, idx) {
+                        var _a, _b;
+                        var _c = getMessagePartsInfo({
+                            allMessages: allMessagesFiltered,
+                            replyType: replyType,
+                            isMessageGroupingEnabled: isMessageGroupingEnabled,
+                            currentIndex: idx,
+                            currentMessage: m,
+                            currentChannel: currentGroupChannel,
+                        }), chainTop = _c.chainTop, chainBottom = _c.chainBottom;
+                        var isByMe = ((_a = m === null || m === void 0 ? void 0 : m.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.userId);
+                        return (React__default.createElement(MessageProvider, { message: m, key: m === null || m === void 0 ? void 0 : m.messageId, isByMe: isByMe },
+                            React__default.createElement(Message, { handleScroll: moveScroll, renderMessage: renderMessage, message: m, chainTop: chainTop, chainBottom: chainBottom, renderCustomSeparator: renderCustomSeparator })));
+                    }),
+                    !hasMoreNext
+                        && ((_c = (_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.groupChannel) === null || _c === void 0 ? void 0 : _c.enableTypingIndicator)
+                        && ((_f = (_e = (_d = store === null || store === void 0 ? void 0 : store.config) === null || _d === void 0 ? void 0 : _d.groupChannel) === null || _e === void 0 ? void 0 : _e.typingIndicatorTypes) === null || _f === void 0 ? void 0 : _f.has(TypingIndicatorType.Bubble))
+                        && React__default.createElement(TypingIndicatorBubble, { typingMembers: typingMembers, handleScroll: moveScroll }))),
+            (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.isFrozen) && (renderFrozenNotification
+                ? renderFrozenNotification()
+                : React__default.createElement(FrozenNotification, { className: "sendbird-conversation__messages__notification" })),
+            /**
+             * Show unread count IFF scroll is not bottom or is bottom but hasNext is true.
+             */
+            (!isScrollBottom || hasMoreNext) && (unreadSince || unreadSinceDate) && (React__default.createElement(UnreadCount, { className: "sendbird-conversation__messages__notification", count: currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.unreadMessageCount, time: unreadSince, lastReadAt: unreadSinceDate, onClick: function () {
+                    if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)
+                        scrollRef.current.scrollTop = Number.MAX_SAFE_INTEGER;
+                    if (!disableMarkAsRead && !!currentGroupChannel) {
+                        markAsReadScheduler.push(currentGroupChannel);
+                        messagesDispatcher({
+                            type: messageActionTypes.MARK_AS_READ,
+                            payload: { channel: currentGroupChannel },
+                        });
+                    }
+                    setInitialTimeStamp(null);
+                    setAnimatedMessageId(null);
+                    setHighLightedMessageId(null);
+                } })),
+            // This flag is an unmatched variable
+            scrollBottom > SCROLL_BOTTOM_PADDING && (React__default.createElement("div", { className: "sendbird-conversation__scroll-bottom-button", onClick: onClickScrollBot, onKeyDown: onClickScrollBot, tabIndex: 0, role: "button" },
+                React__default.createElement(Icon, { width: "24px", height: "24px", type: IconTypes.CHEVRON_DOWN, fillColor: IconColors.PRIMARY }))))));
+};
+
+export { MessageList as M, TypingIndicatorType as T };
+//# sourceMappingURL=bundle-_HbjO2rd.js.map

package/dist/chunks/bundle-_HbjO2rd.js.map

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

package/dist/chunks/bundle-a2JLFpDM.js

@@ -0,0 +1,78 @@
+import { a as __spreadArray } from './bundle-qHAQziqO.js';
+import React__default from 'react';
+import { g as getStringSet } from './bundle-MF8abnx2.js';
+
+var Typography = {
+    H_1: 'H_1',
+    H_2: 'H_2',
+    SUBTITLE_1: 'SUBTITLE_1',
+    SUBTITLE_2: 'SUBTITLE_2',
+    BODY_1: 'BODY_1',
+    BODY_2: 'BODY_2',
+    BUTTON_1: 'BUTTON_1',
+    BUTTON_2: 'BUTTON_2',
+    CAPTION_1: 'CAPTION_1',
+    CAPTION_2: 'CAPTION_2',
+    CAPTION_3: 'CAPTION_3',
+};
+var Colors = {
+    ONBACKGROUND_1: 'ONBACKGROUND_1',
+    ONBACKGROUND_2: 'ONBACKGROUND_2',
+    ONBACKGROUND_3: 'ONBACKGROUND_3',
+    ONBACKGROUND_4: 'ONBACKGROUND_4',
+    ONCONTENT_1: 'ONCONTENT_1',
+    ONCONTENT_2: 'ONCONTENT_2',
+    PRIMARY: 'PRIMARY',
+    ERROR: 'ERROR',
+    SECONDARY_3: 'SECONDARY_3',
+};
+
+function changeTypographyToClassName(type) {
+    switch (type) {
+        case Typography.H_1: return 'sendbird-label--h-1';
+        case Typography.H_2: return 'sendbird-label--h-2';
+        case Typography.SUBTITLE_1: return 'sendbird-label--subtitle-1';
+        case Typography.SUBTITLE_2: return 'sendbird-label--subtitle-2';
+        case Typography.BODY_1: return 'sendbird-label--body-1';
+        case Typography.BODY_2: return 'sendbird-label--body-2';
+        case Typography.BUTTON_1: return 'sendbird-label--button-1';
+        case Typography.BUTTON_2: return 'sendbird-label--button-2';
+        case Typography.CAPTION_1: return 'sendbird-label--caption-1';
+        case Typography.CAPTION_2: return 'sendbird-label--caption-2';
+        case Typography.CAPTION_3: return 'sendbird-label--caption-3';
+        default: return '';
+    }
+}
+function changeColorToClassName(color) {
+    switch (color) {
+        case Colors.ONBACKGROUND_1: return 'sendbird-label--color-onbackground-1';
+        case Colors.ONBACKGROUND_2: return 'sendbird-label--color-onbackground-2';
+        case Colors.ONBACKGROUND_3: return 'sendbird-label--color-onbackground-3';
+        case Colors.ONBACKGROUND_4: return 'sendbird-label--color-onbackground-4';
+        case Colors.ONCONTENT_1: return 'sendbird-label--color-oncontent-1';
+        case Colors.ONCONTENT_2: return 'sendbird-label--color-oncontent-2';
+        case Colors.PRIMARY: return 'sendbird-label--color-primary'; // should be Primary-3 fix me
+        case Colors.ERROR: return 'sendbird-label--color-error';
+        case Colors.SECONDARY_3: return 'sendbird-label--color-secondary-3';
+        default: return '';
+    }
+}
+
+function Label(_a) {
+    var _b = _a.className, className = _b === void 0 ? [] : _b, type = _a.type, color = _a.color, _c = _a.children, children = _c === void 0 ? null : _c;
+    return (
+    // Donot make this into div
+    // Mention uses Label. If we use div, it would break the mention detection on Paste
+    // https://github.com/sendbird/sendbird-uikit-react/pull/479
+    React__default.createElement("span", { className: __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-label',
+            changeTypographyToClassName(type),
+            changeColorToClassName(color),
+        ], false).join(' ') }, children));
+}
+var LabelTypography = Typography;
+var LabelColors = Colors;
+var LabelStringSet = getStringSet('en');
+
+export { Label as L, LabelTypography as a, LabelColors as b, LabelStringSet as c, changeColorToClassName as d };
+//# sourceMappingURL=bundle-a2JLFpDM.js.map

package/dist/chunks/bundle-a2JLFpDM.js.map

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

package/dist/chunks/bundle-a8y3Ewac.js

@@ -0,0 +1,174 @@
+import { i as isSameDay } from './bundle-7sEsVYzR.js';
+import { r as requiredArgs, t as toDate, a as toInteger } from './bundle-6KxAQ3DO.js';
+
+/**
+ * @name isToday
+ * @category Day Helpers
+ * @summary Is the given date today?
+ * @pure false
+ *
+ * @description
+ * Is the given date today?
+ *
+ * > ⚠️ Please note that this function is not present in the FP submodule as
+ * > it uses `Date.now()` internally hence impure and can't be safely curried.
+ *
+ * @param {Date|Number} date - the date to check
+ * @returns {Boolean} the date is today
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // If today is 6 October 2014, is 6 October 14:00:00 today?
+ * const result = isToday(new Date(2014, 9, 6, 14, 0))
+ * //=> true
+ */
+
+function isToday(dirtyDate) {
+  requiredArgs(1, arguments);
+  return isSameDay(dirtyDate, Date.now());
+}
+
+/**
+ * @name isSameYear
+ * @category Year Helpers
+ * @summary Are the given dates in the same year?
+ *
+ * @description
+ * Are the given dates in the same year?
+ *
+ * @param {Date|Number} dateLeft - the first date to check
+ * @param {Date|Number} dateRight - the second date to check
+ * @returns {Boolean} the dates are in the same year
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Are 2 September 2014 and 25 September 2014 in the same year?
+ * const result = isSameYear(new Date(2014, 8, 2), new Date(2014, 8, 25))
+ * //=> true
+ */
+
+function isSameYear(dirtyDateLeft, dirtyDateRight) {
+  requiredArgs(2, arguments);
+  var dateLeft = toDate(dirtyDateLeft);
+  var dateRight = toDate(dirtyDateRight);
+  return dateLeft.getFullYear() === dateRight.getFullYear();
+}
+
+/**
+ * @name isThisYear
+ * @category Year Helpers
+ * @summary Is the given date in the same year as the current date?
+ * @pure false
+ *
+ * @description
+ * Is the given date in the same year as the current date?
+ *
+ * > ⚠️ Please note that this function is not present in the FP submodule as
+ * > it uses `Date.now()` internally hence impure and can't be safely curried.
+ *
+ * @param {Date|Number} date - the date to check
+ * @returns {Boolean} the date is in this year
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // If today is 25 September 2014, is 2 July 2014 in this year?
+ * const result = isThisYear(new Date(2014, 6, 2))
+ * //=> true
+ */
+
+function isThisYear(dirtyDate) {
+  requiredArgs(1, arguments);
+  return isSameYear(dirtyDate, Date.now());
+}
+
+/**
+ * @name addDays
+ * @category Day Helpers
+ * @summary Add the specified number of days to the given date.
+ *
+ * @description
+ * Add the specified number of days to the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of days to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} - the new date with the days added
+ * @throws {TypeError} - 2 arguments required
+ *
+ * @example
+ * // Add 10 days to 1 September 2014:
+ * const result = addDays(new Date(2014, 8, 1), 10)
+ * //=> Thu Sep 11 2014 00:00:00
+ */
+
+function addDays(dirtyDate, dirtyAmount) {
+  requiredArgs(2, arguments);
+  var date = toDate(dirtyDate);
+  var amount = toInteger(dirtyAmount);
+
+  if (isNaN(amount)) {
+    return new Date(NaN);
+  }
+
+  if (!amount) {
+    // If 0 days, no-op to avoid changing times in the hour before end of DST
+    return date;
+  }
+
+  date.setDate(date.getDate() + amount);
+  return date;
+}
+
+/**
+ * @name subDays
+ * @category Day Helpers
+ * @summary Subtract the specified number of days from the given date.
+ *
+ * @description
+ * Subtract the specified number of days from the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of days to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} the new date with the days subtracted
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Subtract 10 days from 1 September 2014:
+ * const result = subDays(new Date(2014, 8, 1), 10)
+ * //=> Fri Aug 22 2014 00:00:00
+ */
+
+function subDays(dirtyDate, dirtyAmount) {
+  requiredArgs(2, arguments);
+  var amount = toInteger(dirtyAmount);
+  return addDays(dirtyDate, -amount);
+}
+
+/**
+ * @name isYesterday
+ * @category Day Helpers
+ * @summary Is the given date yesterday?
+ * @pure false
+ *
+ * @description
+ * Is the given date yesterday?
+ *
+ * > ⚠️ Please note that this function is not present in the FP submodule as
+ * > it uses `Date.now()` internally hence impure and can't be safely curried.
+ *
+ * @param {Date|Number} date - the date to check
+ * @returns {Boolean} the date is yesterday
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // If today is 6 October 2014, is 5 October 14:00:00 yesterday?
+ * const result = isYesterday(new Date(2014, 9, 5, 14, 0))
+ * //=> true
+ */
+
+function isYesterday(dirtyDate) {
+  requiredArgs(1, arguments);
+  return isSameDay(dirtyDate, subDays(Date.now(), 1));
+}
+
+export { isYesterday as a, isThisYear as b, isToday as i };
+//# sourceMappingURL=bundle-a8y3Ewac.js.map

package/dist/chunks/bundle-a8y3Ewac.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-a8y3Ewac.js","sources":["../../node_modules/date-fns/esm/isToday/index.js","../../node_modules/date-fns/esm/isSameYear/index.js","../../node_modules/date-fns/esm/isThisYear/index.js","../../node_modules/date-fns/esm/addDays/index.js","../../node_modules/date-fns/esm/subDays/index.js","../../node_modules/date-fns/esm/isYesterday/index.js"],"sourcesContent":["import isSameDay from \"../isSameDay/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isToday\n * @category Day Helpers\n * @summary Is the given date today?\n * @pure false\n *\n * @description\n * Is the given date today?\n *\n * > ⚠️ Please note that this function is not present in the FP submodule as\n * > it uses `Date.now()` internally hence impure and can't be safely curried.\n *\n * @param {Date|Number} date - the date to check\n * @returns {Boolean} the date is today\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // If today is 6 October 2014, is 6 October 14:00:00 today?\n * const result = isToday(new Date(2014, 9, 6, 14, 0))\n * //=> true\n */\n\nexport default function isToday(dirtyDate) {\n  requiredArgs(1, arguments);\n  return isSameDay(dirtyDate, Date.now());\n}","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isSameYear\n * @category Year Helpers\n * @summary Are the given dates in the same year?\n *\n * @description\n * Are the given dates in the same year?\n *\n * @param {Date|Number} dateLeft - the first date to check\n * @param {Date|Number} dateRight - the second date to check\n * @returns {Boolean} the dates are in the same year\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Are 2 September 2014 and 25 September 2014 in the same year?\n * const result = isSameYear(new Date(2014, 8, 2), new Date(2014, 8, 25))\n * //=> true\n */\n\nexport default function isSameYear(dirtyDateLeft, dirtyDateRight) {\n  requiredArgs(2, arguments);\n  var dateLeft = toDate(dirtyDateLeft);\n  var dateRight = toDate(dirtyDateRight);\n  return dateLeft.getFullYear() === dateRight.getFullYear();\n}","import isSameYear from \"../isSameYear/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isThisYear\n * @category Year Helpers\n * @summary Is the given date in the same year as the current date?\n * @pure false\n *\n * @description\n * Is the given date in the same year as the current date?\n *\n * > ⚠️ Please note that this function is not present in the FP submodule as\n * > it uses `Date.now()` internally hence impure and can't be safely curried.\n *\n * @param {Date|Number} date - the date to check\n * @returns {Boolean} the date is in this year\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // If today is 25 September 2014, is 2 July 2014 in this year?\n * const result = isThisYear(new Date(2014, 6, 2))\n * //=> true\n */\n\nexport default function isThisYear(dirtyDate) {\n  requiredArgs(1, arguments);\n  return isSameYear(dirtyDate, Date.now());\n}","import toInteger from \"../_lib/toInteger/index.js\";\nimport toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name addDays\n * @category Day Helpers\n * @summary Add the specified number of days to the given date.\n *\n * @description\n * Add the specified number of days to the given date.\n *\n * @param {Date|Number} date - the date to be changed\n * @param {Number} amount - the amount of days to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.\n * @returns {Date} - the new date with the days added\n * @throws {TypeError} - 2 arguments required\n *\n * @example\n * // Add 10 days to 1 September 2014:\n * const result = addDays(new Date(2014, 8, 1), 10)\n * //=> Thu Sep 11 2014 00:00:00\n */\n\nexport default function addDays(dirtyDate, dirtyAmount) {\n  requiredArgs(2, arguments);\n  var date = toDate(dirtyDate);\n  var amount = toInteger(dirtyAmount);\n\n  if (isNaN(amount)) {\n    return new Date(NaN);\n  }\n\n  if (!amount) {\n    // If 0 days, no-op to avoid changing times in the hour before end of DST\n    return date;\n  }\n\n  date.setDate(date.getDate() + amount);\n  return date;\n}","import addDays from \"../addDays/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\nimport toInteger from \"../_lib/toInteger/index.js\";\n/**\n * @name subDays\n * @category Day Helpers\n * @summary Subtract the specified number of days from the given date.\n *\n * @description\n * Subtract the specified number of days from the given date.\n *\n * @param {Date|Number} date - the date to be changed\n * @param {Number} amount - the amount of days to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.\n * @returns {Date} the new date with the days subtracted\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Subtract 10 days from 1 September 2014:\n * const result = subDays(new Date(2014, 8, 1), 10)\n * //=> Fri Aug 22 2014 00:00:00\n */\n\nexport default function subDays(dirtyDate, dirtyAmount) {\n  requiredArgs(2, arguments);\n  var amount = toInteger(dirtyAmount);\n  return addDays(dirtyDate, -amount);\n}","import isSameDay from \"../isSameDay/index.js\";\nimport subDays from \"../subDays/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isYesterday\n * @category Day Helpers\n * @summary Is the given date yesterday?\n * @pure false\n *\n * @description\n * Is the given date yesterday?\n *\n * > ⚠️ Please note that this function is not present in the FP submodule as\n * > it uses `Date.now()` internally hence impure and can't be safely curried.\n *\n * @param {Date|Number} date - the date to check\n * @returns {Boolean} the date is yesterday\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // If today is 6 October 2014, is 5 October 14:00:00 yesterday?\n * const result = isYesterday(new Date(2014, 9, 5, 14, 0))\n * //=> true\n */\n\nexport default function isYesterday(dirtyDate) {\n  requiredArgs(1, arguments);\n  return isSameDay(dirtyDate, subDays(Date.now(), 1));\n}"],"names":[],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5]}

package/dist/chunks/bundle-dVgSt0b0.js

@@ -0,0 +1,36 @@
+import React__default from 'react';
+import { K } from './bundle-x4ZuQz8S.js';
+import { T as TOKEN_TYPES, U as USER_MENTION_PREFIX, g as getWhiteSpacePreservedText } from './bundle-uDaAbuPs.js';
+import { useMessageContext } from '../Message/context.js';
+import MentionLabel from '../ui/MentionLabel.js';
+import LinkLabel from '../ui/LinkLabel.js';
+import { a as LabelTypography } from './bundle-a2JLFpDM.js';
+
+// this function is used to generate a unique key for token in message
+// it changes with updated time and index
+// messageUpdatedAt is the key part of this key generator
+function keyGenerator(createdAt, messageUpdatedAt, index) {
+    return "sb-msg_".concat(createdAt, "_").concat(messageUpdatedAt, "_").concat(index);
+}
+
+function TextFragment(_a) {
+    var tokens = _a.tokens;
+    var messageStore = useMessageContext();
+    var message = messageStore === null || messageStore === void 0 ? void 0 : messageStore.message;
+    var isByMe = messageStore === null || messageStore === void 0 ? void 0 : messageStore.isByMe;
+    var updatedAt = message.updatedAt, createdAt = message.createdAt;
+    return (React__default.createElement(React__default.Fragment, null, tokens === null || tokens === void 0 ? void 0 : tokens.map(function (token, idx) {
+        var key = keyGenerator(createdAt, updatedAt, idx);
+        return K(token.type)
+            .with(TOKEN_TYPES.mention, function () { return (React__default.createElement("span", { className: "sendbird-word", key: key },
+            React__default.createElement(MentionLabel, { mentionTemplate: USER_MENTION_PREFIX, 
+                // @ts-ignore
+                mentionedUserId: token.userId, mentionedUserNickname: token.value, isByMe: isByMe }))); })
+            .with(TOKEN_TYPES.url, function () { return (React__default.createElement("span", { className: "sendbird-word", key: key },
+            React__default.createElement(LinkLabel, { className: "sendbird-word__url", src: token.value, type: LabelTypography.BODY_1 }, token.value))); })
+            .otherwise(function () { return React__default.createElement(React__default.Fragment, { key: key }, getWhiteSpacePreservedText(token.value)); });
+    })));
+}
+
+export { TextFragment as T };
+//# sourceMappingURL=bundle-dVgSt0b0.js.map

package/dist/chunks/bundle-dVgSt0b0.js.map

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

package/dist/chunks/bundle-dxJV8pSS.js

@@ -0,0 +1,76 @@
+import React__default, { useState, useEffect } from 'react';
+
+var DEFAULT_MOBILE = false;
+// const DEFAULT_MOBILE = '768px';
+var MOBILE_CLASSNAME = 'sendbird--mobile-mode';
+var MediaQueryContext = React__default.createContext({
+    breakpoint: DEFAULT_MOBILE,
+    isMobile: false,
+});
+var addClassNameToBody = function () {
+    try {
+        var body = document.querySelector('body');
+        body === null || body === void 0 ? void 0 : body.classList.add(MOBILE_CLASSNAME);
+    }
+    catch (_a) {
+        // noop
+    }
+};
+var removeClassNameFromBody = function () {
+    try {
+        var body = document.querySelector('body');
+        body === null || body === void 0 ? void 0 : body.classList.remove(MOBILE_CLASSNAME);
+    }
+    catch (_a) {
+        // noop
+    }
+};
+var MediaQueryProvider = function (props) {
+    var children = props.children, logger = props.logger;
+    var breakpoint = (props === null || props === void 0 ? void 0 : props.breakpoint) || false;
+    var _a = useState(false), isMobile = _a[0], setIsMobile = _a[1];
+    useEffect(function () {
+        var _a;
+        var updateSize = function () {
+            var _a, _b, _c, _d, _e;
+            if (typeof breakpoint === 'boolean') {
+                setIsMobile(breakpoint);
+                if (breakpoint) {
+                    (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'MediaQueryProvider: isMobile: true');
+                    addClassNameToBody();
+                }
+                else {
+                    (_b = logger === null || logger === void 0 ? void 0 : logger.info) === null || _b === void 0 ? void 0 : _b.call(logger, 'MediaQueryProvider: isMobile: false');
+                    removeClassNameFromBody();
+                }
+            }
+            else {
+                var mq = window.matchMedia("(max-width: ".concat(breakpoint, ")"));
+                (_c = logger === null || logger === void 0 ? void 0 : logger.info) === null || _c === void 0 ? void 0 : _c.call(logger, "MediaQueryProvider: Screensize updated to ".concat(breakpoint));
+                if (mq.matches) {
+                    setIsMobile(true);
+                    addClassNameToBody();
+                    (_d = logger === null || logger === void 0 ? void 0 : logger.info) === null || _d === void 0 ? void 0 : _d.call(logger, 'MediaQueryProvider: isMobile: true');
+                }
+                else {
+                    setIsMobile(false);
+                    removeClassNameFromBody();
+                    (_e = logger === null || logger === void 0 ? void 0 : logger.info) === null || _e === void 0 ? void 0 : _e.call(logger, 'MediaQueryProvider: isMobile: false');
+                }
+            }
+        };
+        updateSize();
+        window.addEventListener('resize', updateSize);
+        (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'MediaQueryProvider: addEventListener', { updateSize: updateSize });
+        return function () {
+            var _a;
+            window.removeEventListener('resize', updateSize);
+            (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'MediaQueryProvider: removeEventListener', { updateSize: updateSize });
+        };
+    }, [breakpoint]);
+    return (React__default.createElement(MediaQueryContext.Provider, { value: { breakpoint: breakpoint, isMobile: isMobile } }, children));
+};
+var useMediaQueryContext = function () { return React__default.useContext(MediaQueryContext); };
+
+export { MediaQueryProvider as M, useMediaQueryContext as u };
+//# sourceMappingURL=bundle-dxJV8pSS.js.map

package/dist/chunks/bundle-dxJV8pSS.js.map

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