@sendbird/uikit-react 3.10.1 → 3.11.0

package/ui/EmojiReactions.js

@@ -4,39 +4,39 @@ import ReactionButton from './ReactionButton.js';
 import ImageRenderer from './ImageRenderer.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import ContextMenu, { EmojiListItems } from './ContextMenu.js';
-import { N as getEmojiUrl, O as isReactedBy, P as getEmojiTooltipString, p as getEmojiListAll, Q as getEmojiMapAll, n as getClassName } from '../chunks/bundle-uk2Y0AQu.js';
+import { M as getEmojiUrl, N as isReactedBy, O as getEmojiTooltipString, u as getEmojiListAll, P as getEmojiMapAll, r as getClassName } from '../chunks/bundle-GQt7EDbt.js';
 import BottomSheet from './BottomSheet.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-dWJnfDPH.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-kVopRZZG.js';
 import UserListItem from './UserListItem.js';
-import { _ as __assign } from '../chunks/bundle-GKopZh-T.js';
+import { _ as __assign } from '../chunks/bundle-fgwje9pW.js';
 import Tooltip from './Tooltip.js';
 import TooltipWrapper from './TooltipWrapper.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-KmauOTrg.js';
-import { u as useLongPress } from '../chunks/bundle-W8t7rR3H.js';
-import { L as LocalizationContext } from '../chunks/bundle-y_LgB6DS.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-SbHFlBY0.js';
+import { u as useLongPress } from '../chunks/bundle-jXtqc1kU.js';
+import { L as LocalizationContext } from '../chunks/bundle-hOV701rb.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
 import { useMessageContext } from '../Message/context.js';
-import '../chunks/bundle-YmIrZYPF.js';
-import '../chunks/bundle-WpHDilD_.js';
+import '../chunks/bundle-oRyfuopS.js';
+import '../chunks/bundle-tOpyp2TM.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../chunks/bundle-aeQZ5WsP.js';
+import '../chunks/bundle-4IsRvL2E.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-kfNTRju0.js';
+import '../chunks/bundle-n9wVwJwL.js';
 import '../hooks/useModal.js';
-import '../chunks/bundle-VPanFdbf.js';
+import '../chunks/bundle-K0s-Ect1.js';
 import './IconButton.js';
 import './Button.js';
-import '../chunks/bundle-TV4-nyqN.js';
-import '../chunks/bundle-cXqs96Pt.js';
-import '../chunks/bundle-X3h4GiLa.js';
-import '../chunks/bundle-Kv4GXRTs.js';
+import '../chunks/bundle-b6xyPdyj.js';
+import '../chunks/bundle-NQlEMhhs.js';
+import '../chunks/bundle-2QckWBqt.js';
+import '../chunks/bundle-Rq3p335Q.js';
 import './MutedAvatarOverlay.js';
 import './Checkbox.js';
 import './UserProfile.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-ku6CEjGk.js';
+import '../chunks/bundle-pfcIdF14.js';
 import '../withSendbird.js';
 
 var ReactedMembersBottomSheet = function (_a) {
@@ -57,8 +57,11 @@ var ReactedMembersBottomSheet = function (_a) {
                 return (React__default.createElement("div", { key: reaction.key, className: "\n                  sendbird-message__bottomsheet__reacted-members__item\n                  ".concat(selectedEmoji === reaction.key ? 'sendbird-message__bottomsheet__reacted-members__item__selected' : '', "\n                "), onClick: function () {
                         setSelectedEmoji(reaction.key);
                     } },
-                    React__default.createElement(ImageRenderer, { url: emojiUrl, width: "28px", height: "28px", placeHolder: function (style) { return (React__default.createElement("div", { style: style },
-                            React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } }),
+                    React__default.createElement(ImageRenderer, { url: emojiUrl, width: "28px", height: "28px", placeHolder: function (_a) {
+                            var style = _a.style;
+                            return (React__default.createElement("div", { style: style },
+                                React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                        } }),
                     React__default.createElement(Label, { type: LabelTypography.BUTTON_2, color: selectedEmoji === reaction.key ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_3 }, reaction.userIds.length)));
             })),
             React__default.createElement("div", { className: "sendbird-message__bottomsheet__reactor-list" }, // making a member list who reacted to the message with the `selectedEmoji`
@@ -126,8 +129,11 @@ var MobileEmojisBottomSheet = function (_a) {
                     toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
                     hideMenu();
                 }, dataSbId: "ui_mobile_emoji_reactions_menu_".concat(emoji.key) },
-                React__default.createElement(ImageRenderer, { url: emoji.url, width: "38px", height: "38px", placeHolder: function (style) { return (React__default.createElement("div", { style: style },
-                        React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } })));
+                React__default.createElement(ImageRenderer, { url: emoji.url, width: "38px", height: "38px", placeHolder: function (_a) {
+                        var style = _a.style;
+                        return (React__default.createElement("div", { style: style },
+                            React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                    } })));
         }))));
 };
 
@@ -160,8 +166,11 @@ var EmojiReactions = function (_a) {
                         toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
                         e === null || e === void 0 ? void 0 : e.stopPropagation();
                     }, dataSbId: "ui_emoji_reactions_menu_".concat(emoji.key) },
-                    React__default.createElement(ImageRenderer, { url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '', width: "28px", height: "28px", placeHolder: function (style) { return (React__default.createElement("div", { style: style },
-                            React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } })));
+                    React__default.createElement(ImageRenderer, { url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '', width: "28px", height: "28px", placeHolder: function (_a) {
+                            var style = _a.style;
+                            return (React__default.createElement("div", { style: style },
+                                React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                        } })));
             }))); } })),
         (isMobile && showAddReactionBadge) && (React__default.createElement(AddReactionBadgeItem, { onClick: function () {
                 setShowEmojiList(true);

package/ui/EmojiReactions.js.map

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

package/ui/FileMessageItemBody.js

@@ -1,16 +1,16 @@
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-dWJnfDPH.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-kVopRZZG.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import TextButton from './TextButton.js';
-import { n as getClassName, u as getUIKitFileType, v as truncateString } from '../chunks/bundle-uk2Y0AQu.js';
-import { C as Colors } from '../chunks/bundle-OZZH5fXZ.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-KmauOTrg.js';
-import '../chunks/bundle-GKopZh-T.js';
-import '../chunks/bundle-YmIrZYPF.js';
-import '../chunks/bundle-WpHDilD_.js';
+import { r as getClassName, k as getUIKitFileType, t as truncateString } from '../chunks/bundle-GQt7EDbt.js';
+import { C as Colors } from '../chunks/bundle-j8bOxoFa.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-SbHFlBY0.js';
+import '../chunks/bundle-fgwje9pW.js';
+import '../chunks/bundle-oRyfuopS.js';
+import '../chunks/bundle-tOpyp2TM.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-kfNTRju0.js';
+import '../chunks/bundle-n9wVwJwL.js';
 
 function FileMessageItemBody(_a) {
     var _b;

package/ui/FileViewer.js

@@ -1,27 +1,26 @@
-import '../chunks/bundle-GKopZh-T.js';
+import '../chunks/bundle-fgwje9pW.js';
 import 'react';
 import 'react-dom';
-import '../chunks/bundle-y_LgB6DS.js';
+import '../chunks/bundle-hOV701rb.js';
 import '../hooks/useModal.js';
-import '../chunks/bundle-uk2Y0AQu.js';
-import '../chunks/bundle-WpHDilD_.js';
-import '../chunks/bundle-X3h4GiLa.js';
-import '../chunks/bundle-dWJnfDPH.js';
+import '../chunks/bundle-GQt7EDbt.js';
+import '../chunks/bundle-tOpyp2TM.js';
+import '../chunks/bundle-2QckWBqt.js';
+import '../chunks/bundle-kVopRZZG.js';
 import './Icon.js';
-export { b as FileViewerComponent, F as default } from '../chunks/bundle-DeRyZP32.js';
-import '../chunks/bundle-xgiw36M5.js';
-import '../chunks/bundle-VPanFdbf.js';
-import '../chunks/bundle-YmIrZYPF.js';
-import '../chunks/bundle-TV4-nyqN.js';
-import '../chunks/bundle-kfNTRju0.js';
-import '../chunks/bundle-KmauOTrg.js';
+export { b as FileViewerComponent, F as default } from '../chunks/bundle-bTljiK8B.js';
+import '../chunks/bundle-9lUB2eTP.js';
+import '../chunks/bundle-K0s-Ect1.js';
+import '../chunks/bundle-oRyfuopS.js';
+import '../chunks/bundle-b6xyPdyj.js';
+import '../chunks/bundle-n9wVwJwL.js';
+import '../chunks/bundle-SbHFlBY0.js';
 import './IconButton.js';
 import './Button.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-aeQZ5WsP.js';
-import '../chunks/bundle-Kv4GXRTs.js';
-import '../chunks/bundle-ZKM9Qk_j.js';
+import '../chunks/bundle-Rq3p335Q.js';
+import '../chunks/bundle-zpdae5WH.js';
 import '@sendbird/uikit-tools';
 //# sourceMappingURL=FileViewer.js.map

package/ui/FileViewer.js.map

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

package/ui/Icon.js

@@ -1,7 +1,7 @@
-import { a as __spreadArray } from '../chunks/bundle-GKopZh-T.js';
+import { a as __spreadArray } from '../chunks/bundle-fgwje9pW.js';
 import * as React from 'react';
 import React__default from 'react';
-import { n as noop } from '../chunks/bundle-WpHDilD_.js';
+import { n as noop } from '../chunks/bundle-tOpyp2TM.js';
 
 /* eslint-disable no-redeclare */
 var Types = {

package/ui/IconButton.js

@@ -1,4 +1,4 @@
-import { a as __spreadArray, _ as __assign } from '../chunks/bundle-GKopZh-T.js';
+import { a as __spreadArray, _ as __assign } from '../chunks/bundle-fgwje9pW.js';
 import React__default, { useState } from 'react';
 
 var IconButton = React__default.forwardRef(function (props, ref) {

package/ui/ImageRenderer.js

@@ -1,5 +1,6 @@
-import { a as __spreadArray, _ as __assign } from '../chunks/bundle-GKopZh-T.js';
-import React__default, { useMemo, useState, useEffect, useRef } from 'react';
+import { a as __spreadArray, _ as __assign } from '../chunks/bundle-fgwje9pW.js';
+import React__default, { useMemo, useState, useLayoutEffect, useRef } from 'react';
+import { n as noop } from '../chunks/bundle-tOpyp2TM.js';
 
 var numberToPx = (function (value) {
     return typeof value === 'number' ? "".concat(value, "px") : value;
@@ -23,38 +24,27 @@ function useDynamicSideLength(_a) {
 
 var useIsElementInViewport = function (elementRef) {
     var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
-    var callback = function (entries) {
-        var entry = entries[0];
-        setIsVisible(entry.isIntersecting);
-    };
-    useEffect(function () {
-        var observer = new IntersectionObserver(callback);
-        if (elementRef.current) {
+    useLayoutEffect(function () {
+        var observer = new IntersectionObserver(function (entries) {
+            var entry = entries[0];
+            if (entry)
+                setIsVisible(entry.isIntersecting);
+        });
+        if (elementRef.current)
             observer.observe(elementRef.current);
-        }
         return function () { return observer.disconnect(); };
-    }, [elementRef]);
+    }, [elementRef.current]);
     return isVisible;
 };
 
 var useLazyImageLoader = function (elementRef) {
+    var isLoaded = useRef(false);
     var isVisible = useIsElementInViewport(elementRef);
-    var _a = useState(false), isLoaded = _a[0], setIsLoaded = _a[1];
-    useEffect(function () {
-        if (isLoaded || !isVisible) {
-            return;
-        }
-        setIsLoaded(true);
-    }, [isVisible]);
-    return isLoaded;
+    if (isVisible)
+        isLoaded.current = true;
+    return isLoaded.current;
 };
 
-/*
-  ImageRenderer displays image with url or source
-  it checks if the source exist with img tag first
-  if it exists onLoad is called, if not onError is called
-  and those properties switch img tag to real purposing element
-*/
 function getBorderRadiusForImageRenderer(circle, borderRadius) {
     if (circle === void 0) { circle = false; }
     if (borderRadius === void 0) { borderRadius = null; }
@@ -69,27 +59,28 @@ function getBorderRadiusForMultipleImageRenderer(borderRadius, index, totalCount
     var bottomLeft = index === lastIndex - 1 ? value * 2 : value;
     return "".concat(topLeft, "px ").concat(topRight, "px ").concat(bottomRight, "px ").concat(bottomLeft, "px");
 }
+/*
+  ImageRenderer displays image with url or source
+  it checks if the source exist with img tag first
+  if it exists onLoad is called, if not onError is called
+  and those properties switch img tag to real purposing element
+*/
 var ImageRenderer = function (_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, url = _a.url, _c = _a.alt, alt = _c === void 0 ? '' : _c, _d = _a.width, width = _d === void 0 ? null : _d, _e = _a.maxSideLength, maxSideLength = _e === void 0 ? null : _e, _f = _a.height, height = _f === void 0 ? null : _f, _g = _a.circle, circle = _g === void 0 ? false : _g, _h = _a.fixedSize, fixedSize = _h === void 0 ? false : _h, _j = _a.placeHolder, placeHolder = _j === void 0 ? null : _j, _k = _a.defaultComponent, defaultComponent = _k === void 0 ? null : _k, _l = _a.borderRadius, borderRadius = _l === void 0 ? null : _l, _m = _a.onLoad, onLoad = _m === void 0 ? function () { } : _m, _o = _a.onError, onError = _o === void 0 ? function () { } : _o, shadeOnHover = _a.shadeOnHover, _p = _a.isUploaded, isUploaded = _p === void 0 ? true : _p;
+    var _b = _a.className, className = _b === void 0 ? '' : _b, url = _a.url, _c = _a.alt, alt = _c === void 0 ? '' : _c, _d = _a.width, width = _d === void 0 ? null : _d, _e = _a.maxSideLength, maxSideLength = _e === void 0 ? null : _e, _f = _a.height, height = _f === void 0 ? null : _f, _g = _a.circle, circle = _g === void 0 ? false : _g, _h = _a.fixedSize, fixedSize = _h === void 0 ? false : _h, _j = _a.placeHolder, placeHolder = _j === void 0 ? null : _j, _k = _a.defaultComponent, defaultComponent = _k === void 0 ? null : _k, _l = _a.borderRadius, borderRadius = _l === void 0 ? null : _l, _m = _a.onLoad, onLoad = _m === void 0 ? noop : _m, _o = _a.onError, onError = _o === void 0 ? noop : _o, shadeOnHover = _a.shadeOnHover, _p = _a.isUploaded, isUploaded = _p === void 0 ? true : _p;
     var ref = useRef(null);
     var isLoaded = useLazyImageLoader(ref);
     var internalUrl = isLoaded ? url : null;
-    var _q = useState(false), showDefaultComponent = _q[0], setShowDefaultComponent = _q[1];
-    var _r = useState(true), showPlaceHolder = _r[0], setShowPlaceHolder = _r[1];
+    var _q = useState(false), defaultComponentVisible = _q[0], setDefaultComponentVisible = _q[1];
+    var _r = useState(true), placeholderVisible = _r[0], setPlaceholderVisible = _r[1];
     var _s = useDynamicSideLength({
         width: width,
         height: height,
         maxSideLength: maxSideLength,
         defaultMinLength: '400px',
     }), dynamicMinWidth = _s[0], dynamicMinHeight = _s[1];
-    var DefaultComponent = useMemo(function () {
-        return typeof defaultComponent === 'function'
-            ? defaultComponent()
-            : defaultComponent;
-    }, [defaultComponent]);
-    var PlaceHolder = useMemo(function () {
-        return (placeHolder && typeof placeHolder === 'function')
-            ? placeHolder({
+    var renderPlaceholder = function () {
+        if (typeof placeHolder === 'function') {
+            return placeHolder({
                 style: {
                     width: '100%',
                     minWidth: dynamicMinWidth,
@@ -100,45 +91,81 @@ var ImageRenderer = function (_a) {
                     justifyContent: 'center',
                     alignItems: 'center',
                 },
-            })
-            : null;
-    }, [placeHolder]);
-    var HiddenImageLoader = useMemo(function () {
-        setShowDefaultComponent(false);
-        // reset the state when url is changed
-        return (React__default.createElement("img", { className: "sendbird-image-renderer__hidden-image-loader", src: internalUrl, alt: alt, onLoad: function () {
-                setShowPlaceHolder(false);
-                onLoad();
-            }, onError: function () {
-                setShowDefaultComponent(true);
-                onError();
+            });
+        }
+        return placeHolder;
+    };
+    var renderDefault = function () {
+        if (typeof defaultComponent === 'function')
+            return defaultComponent();
+        return defaultComponent;
+    };
+    var renderImage = function () {
+        return (React__default.createElement("div", { className: "sendbird-image-renderer__image", style: {
+                width: '100%',
+                minWidth: dynamicMinWidth,
+                maxWidth: fixedSize ? dynamicMinWidth : '400px',
+                height: dynamicMinHeight,
+                position: 'absolute',
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'center',
+                backgroundSize: 'cover',
+                backgroundImage: "url(".concat(internalUrl, ")"),
+                borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius),
             } }));
-    }, [internalUrl]);
-    return dynamicMinWidth && dynamicMinHeight && (React__default.createElement("div", { className: __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
-            'sendbird-image-renderer',
-        ], false).join(' '), style: {
+    };
+    return (dynamicMinWidth
+        && dynamicMinHeight && (React__default.createElement("div", { ref: ref, className: __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), true), ['sendbird-image-renderer'], false).join(' '), style: {
             width: '100%',
             minWidth: dynamicMinWidth,
             maxWidth: fixedSize ? dynamicMinWidth : '400px',
             height: dynamicMinHeight,
-        }, ref: ref },
-        showPlaceHolder && PlaceHolder,
-        showDefaultComponent
-            ? DefaultComponent
-            : (React__default.createElement("div", { className: "sendbird-image-renderer__image", style: {
-                    width: '100%',
-                    minWidth: dynamicMinWidth,
-                    maxWidth: fixedSize ? dynamicMinWidth : '400px',
-                    height: dynamicMinHeight,
-                    position: 'absolute',
-                    backgroundRepeat: 'no-repeat',
-                    backgroundPosition: 'center',
-                    backgroundSize: 'cover',
-                    backgroundImage: "url(".concat(internalUrl, ")"),
-                    borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius),
-                } })),
-        HiddenImageLoader,
-        shadeOnHover && React__default.createElement("div", { className: "sendbird-multiple-files-image-renderer__image-cover", style: __assign({ borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius) }, (isUploaded ? {} : { display: 'inline-flex' })) })));
+        } },
+        placeholderVisible && renderPlaceholder(),
+        defaultComponentVisible ? renderDefault() : renderImage(),
+        shadeOnHover && (React__default.createElement("div", { className: "sendbird-multiple-files-image-renderer__image-cover", style: __assign({ borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius) }, (isUploaded ? {} : { display: 'inline-flex' })) })),
+        React__default.createElement(HiddenImageLoader, { src: internalUrl, alt: alt, onLoadStart: function () {
+                setPlaceholderVisible(true);
+                setDefaultComponentVisible(false);
+            }, onLoad: function () {
+                setPlaceholderVisible(false);
+                setDefaultComponentVisible(false);
+                onLoad();
+            }, onError: function () {
+                setPlaceholderVisible(false);
+                setDefaultComponentVisible(true);
+                onError();
+            } }))));
+};
+// Image is loaded as a background-image, but this component serves as a hidden component to receive events indicating whether the image has actually been loaded.
+var HiddenImageLoader = function (props) {
+    var src = props.src, alt = props.alt, _a = props.onLoadStart, onLoadStart = _a === void 0 ? noop : _a, _b = props.onLoad, onLoad = _b === void 0 ? noop : _b, _c = props.onError, onError = _c === void 0 ? noop : _c;
+    var reloadCtx = useRef({
+        currSrc: src,
+        prevSrc: src,
+        loadFailure: false,
+    });
+    if (reloadCtx.current.currSrc !== src) {
+        reloadCtx.current.prevSrc = reloadCtx.current.currSrc;
+        reloadCtx.current.currSrc = src;
+    }
+    // SideEffect: If the image URL has changed or loading has failed, please try again
+    useLayoutEffect(function () {
+        if (src) {
+            var sourceChanged = reloadCtx.current.prevSrc !== reloadCtx.current.currSrc;
+            var loadFailure = reloadCtx.current.loadFailure;
+            if (sourceChanged || loadFailure) {
+                onLoadStart();
+            }
+        }
+    }, [src, navigator.onLine]);
+    return (React__default.createElement("img", { className: "sendbird-image-renderer__hidden-image-loader", src: src, alt: alt, onLoad: function () {
+            reloadCtx.current.loadFailure = false;
+            onLoad();
+        }, onError: function () {
+            reloadCtx.current.loadFailure = true;
+            onError();
+        } }));
 };
 
 export { ImageRenderer as default, getBorderRadiusForImageRenderer, getBorderRadiusForMultipleImageRenderer };

package/ui/ImageRenderer.js.map

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

package/ui/Input.js

@@ -1,7 +1,7 @@
 import React__default, { useState } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-dWJnfDPH.js';
-import '../chunks/bundle-GKopZh-T.js';
-import '../chunks/bundle-YmIrZYPF.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-kVopRZZG.js';
+import '../chunks/bundle-fgwje9pW.js';
+import '../chunks/bundle-oRyfuopS.js';
 
 var InputLabel = function (_a) {
     var children = _a.children;

package/ui/Label.js

@@ -1,5 +1,5 @@
-import '../chunks/bundle-GKopZh-T.js';
+import '../chunks/bundle-fgwje9pW.js';
 import 'react';
-export { b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../chunks/bundle-dWJnfDPH.js';
-import '../chunks/bundle-YmIrZYPF.js';
+export { b as LabelColors, c as LabelStringSet, a as LabelTypography, L as default } from '../chunks/bundle-kVopRZZG.js';
+import '../chunks/bundle-oRyfuopS.js';
 //# sourceMappingURL=Label.js.map

package/ui/LinkLabel.js

@@ -1,7 +1,7 @@
-import { a as __spreadArray } from '../chunks/bundle-GKopZh-T.js';
+import { a as __spreadArray } from '../chunks/bundle-fgwje9pW.js';
 import React__default from 'react';
-import { L as Label, d as changeColorToClassName, a as LabelTypography, b as LabelColors } from '../chunks/bundle-dWJnfDPH.js';
-import '../chunks/bundle-YmIrZYPF.js';
+import { L as Label, d as changeColorToClassName, a as LabelTypography, b as LabelColors } from '../chunks/bundle-kVopRZZG.js';
+import '../chunks/bundle-oRyfuopS.js';
 
 var http = /https?:\/\//;
 function LinkLabel(_a) {

package/ui/Loader.js

@@ -1,7 +1,7 @@
-import { a as __spreadArray } from '../chunks/bundle-GKopZh-T.js';
+import { a as __spreadArray } from '../chunks/bundle-fgwje9pW.js';
 import React__default from 'react';
 import Icon, { IconTypes } from './Icon.js';
-import '../chunks/bundle-WpHDilD_.js';
+import '../chunks/bundle-tOpyp2TM.js';
 
 function Loader(_a) {
     var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.width, width = _c === void 0 ? '26px' : _c, _d = _a.height, height = _d === void 0 ? '26px' : _d, children = _a.children;

package/ui/MentionLabel.js

@@ -1,26 +1,26 @@
 import React__default, { useRef, useState, useCallback } from 'react';
 import ContextMenu, { MenuItems } from './ContextMenu.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-dWJnfDPH.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-kVopRZZG.js';
 import UserProfile from './UserProfile.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import '../chunks/bundle-GKopZh-T.js';
+import '../chunks/bundle-fgwje9pW.js';
 import 'react-dom';
 import './SortByRow.js';
-import '../chunks/bundle-aeQZ5WsP.js';
-import '../chunks/bundle-uk2Y0AQu.js';
+import '../chunks/bundle-4IsRvL2E.js';
+import '../chunks/bundle-GQt7EDbt.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-kfNTRju0.js';
-import '../chunks/bundle-YmIrZYPF.js';
-import '../chunks/bundle-y_LgB6DS.js';
-import '../chunks/bundle-TV4-nyqN.js';
-import '../chunks/bundle-cXqs96Pt.js';
+import '../chunks/bundle-n9wVwJwL.js';
+import '../chunks/bundle-oRyfuopS.js';
+import '../chunks/bundle-hOV701rb.js';
+import '../chunks/bundle-b6xyPdyj.js';
+import '../chunks/bundle-NQlEMhhs.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-ku6CEjGk.js';
-import '../chunks/bundle-WpHDilD_.js';
-import '../chunks/bundle-X3h4GiLa.js';
+import '../chunks/bundle-pfcIdF14.js';
+import '../chunks/bundle-tOpyp2TM.js';
+import '../chunks/bundle-2QckWBqt.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-Kv4GXRTs.js';
+import '../chunks/bundle-Rq3p335Q.js';
 import './Icon.js';
 import './Button.js';
 import '../withSendbird.js';

package/ui/MentionUserLabel.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { M as MENTION_USER_LABEL_CLASSNAME } from '../chunks/bundle-_-2NCsYr.js';
+import { M as MENTION_USER_LABEL_CLASSNAME } from '../chunks/bundle-4l6RpXkL.js';
 
 function MentionUserLabel(_a) {
     var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, _c = _a.isReverse, isReverse = _c === void 0 ? false : _c, color = _a.color, userId = _a.userId;