@sendbird/uikit-react 3.10.1 → 3.11.0

package/cjs/ui/ChannelAvatar.js

@@ -1,14 +1,13 @@
 'use strict';
 
 var React = require('react');
-var ui_Avatar = require('../chunks/bundle-7VJjqIPJ.js');
+var ui_Avatar = require('../chunks/bundle-rUpy0DGt.js');
 var ui_Icon = require('./Icon.js');
-var utils = require('../chunks/bundle-vphYV1gz.js');
-require('../chunks/bundle-bXLZZTmP.js');
+var utils = require('../chunks/bundle-lXjDRYAu.js');
+require('../chunks/bundle-RVs527mS.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-INJtS58R.js');
-require('../chunks/bundle--d5w7FVF.js');
-require('../chunks/bundle-LRCFL23q.js');
+require('../chunks/bundle-nQDclaWr.js');
+require('../chunks/bundle-wU4qxzey.js');
 
 function ChannelAvatar(_a) {
     var channel = _a.channel, userId = _a.userId, theme = _a.theme, _b = _a.width, width = _b === void 0 ? 56 : _b, _c = _a.height, height = _c === void 0 ? 56 : _c;
@@ -24,7 +23,7 @@ function ChannelAvatar(_a) {
                 } },
                 React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.BROADCAST, fillColor: ui_Icon.IconColors.CONTENT, width: width * 0.575, height: height * 0.575 })))
             : (React.createElement(ui_Avatar.Avatar, { className: "sendbird-chat-header--avatar--broadcast-channel", src: utils.getChannelAvatarSource(channel, userId), width: width, height: height, alt: channel === null || channel === void 0 ? void 0 : channel.name })))
-        : (React.createElement(ui_Avatar.Avatar, { className: "sendbird-chat-header--avatar--group-channel", src: utils.getChannelAvatarSource(channel, userId), width: "".concat(width, "px"), height: "".concat(height, "px"), alt: channel === null || channel === void 0 ? void 0 : channel.name }))); }, [channel === null || channel === void 0 ? void 0 : channel.members, channel === null || channel === void 0 ? void 0 : channel.coverUrl, theme]);
+        : (React.createElement(ui_Avatar.Avatar, { className: "sendbird-chat-header--avatar--group-channel", src: utils.getChannelAvatarSource(channel, userId), width: "".concat(width, "px"), height: "".concat(height, "px"), alt: channel === null || channel === void 0 ? void 0 : channel.name }))); }, [utils.getChannelAvatarSource(channel, userId), theme]);
     return (React.createElement(React.Fragment, null, memoizedAvatar));
 }
 

package/cjs/ui/ChannelAvatar.js.map

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

package/cjs/ui/ConnectionStatus.js

@@ -2,12 +2,12 @@
 
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-7J3nX_hP.js');
-var LocalizationContext = require('../chunks/bundle-qtXdbPNE.js');
-require('../chunks/bundle-bXLZZTmP.js');
-require('../chunks/bundle-LRCFL23q.js');
-require('../chunks/bundle-kSScygqj.js');
-require('../chunks/bundle-RSklGv-u.js');
+var ui_Label = require('../chunks/bundle-JaD2Ao-u.js');
+var LocalizationContext = require('../chunks/bundle-WLD9KKbn.js');
+require('../chunks/bundle-RVs527mS.js');
+require('../chunks/bundle-nQDclaWr.js');
+require('../chunks/bundle-OBj337Le.js');
+require('../chunks/bundle-ZL4COF6I.js');
 
 function ConnectionStatus() {
     var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;

package/cjs/ui/ContextMenu.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var _tslib = require('../chunks/bundle-bXLZZTmP.js');
+var _tslib = require('../chunks/bundle-RVs527mS.js');
 var reactDom = require('react-dom');
 var ui_SortByRow = require('./SortByRow.js');
-var index = require('../chunks/bundle-p6kWiWDv.js');
-var ui_Label = require('../chunks/bundle-7J3nX_hP.js');
-require('../chunks/bundle-INJtS58R.js');
+var index = require('../chunks/bundle-fnv2bNo-.js');
+var ui_Label = require('../chunks/bundle-JaD2Ao-u.js');
+require('../chunks/bundle-sW6CpN9W.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-65IwoStx.js');
-require('../chunks/bundle-kSScygqj.js');
+require('../chunks/bundle--RWWGoZo.js');
+require('../chunks/bundle-OBj337Le.js');
 
 // padding to handle height of last item in message-list
 var HEIGHT_PADDING = 60;

package/cjs/ui/DateSeparator.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-bXLZZTmP.js');
+var _tslib = require('../chunks/bundle-RVs527mS.js');
 var React = require('react');
-var color = require('../chunks/bundle-7J-qpEzM.js');
-var ui_Label = require('../chunks/bundle-7J3nX_hP.js');
-require('../chunks/bundle-kSScygqj.js');
+var color = require('../chunks/bundle-Og0K_sLb.js');
+var ui_Label = require('../chunks/bundle-JaD2Ao-u.js');
+require('../chunks/bundle-OBj337Le.js');
 
 var DateSeparator = function (_a) {
     var _b = _a.children, children = _b === void 0 ? null : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.separatorColor, separatorColor = _d === void 0 ? color.Colors.ONBACKGROUND_4 : _d;

package/cjs/ui/EmojiReactions.js

@@ -6,39 +6,39 @@ var ui_ReactionButton = require('./ReactionButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_Icon = require('./Icon.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var index = require('../chunks/bundle-p6kWiWDv.js');
+var index = require('../chunks/bundle-fnv2bNo-.js');
 var ui_BottomSheet = require('./BottomSheet.js');
-var ui_Label = require('../chunks/bundle-7J3nX_hP.js');
+var ui_Label = require('../chunks/bundle-JaD2Ao-u.js');
 var ui_UserListItem = require('./UserListItem.js');
-var _tslib = require('../chunks/bundle-bXLZZTmP.js');
+var _tslib = require('../chunks/bundle-RVs527mS.js');
 var ui_Tooltip = require('./Tooltip.js');
 var ui_TooltipWrapper = require('./TooltipWrapper.js');
-var MediaQueryContext = require('../chunks/bundle-WzrocC57.js');
-var useLongPress = require('../chunks/bundle-TFo3Eb8z.js');
-var LocalizationContext = require('../chunks/bundle-qtXdbPNE.js');
+var MediaQueryContext = require('../chunks/bundle-2ToiwW-_.js');
+var useLongPress = require('../chunks/bundle-rmOQxjwa.js');
+var LocalizationContext = require('../chunks/bundle-WLD9KKbn.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var Message_context = require('../Message/context.js');
-require('../chunks/bundle-kSScygqj.js');
-require('../chunks/bundle-LRCFL23q.js');
+require('../chunks/bundle-OBj337Le.js');
+require('../chunks/bundle-nQDclaWr.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../chunks/bundle-INJtS58R.js');
+require('../chunks/bundle-sW6CpN9W.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-65IwoStx.js');
+require('../chunks/bundle--RWWGoZo.js');
 require('../hooks/useModal.js');
-require('../chunks/bundle-Oc2T5_VP.js');
+require('../chunks/bundle-lnLwvZ7H.js');
 require('./IconButton.js');
 require('./Button.js');
-require('../chunks/bundle-RSklGv-u.js');
-require('../chunks/bundle-7AS0Rcch.js');
-require('../chunks/bundle-7VJjqIPJ.js');
-require('../chunks/bundle--d5w7FVF.js');
+require('../chunks/bundle-ZL4COF6I.js');
+require('../chunks/bundle-3S8jBmCV.js');
+require('../chunks/bundle-rUpy0DGt.js');
+require('../chunks/bundle-wU4qxzey.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
 require('./UserProfile.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-135pRm7i.js');
+require('../chunks/bundle-K8ngPNTR.js');
 require('../withSendbird.js');
 
 var ReactedMembersBottomSheet = function (_a) {
@@ -59,8 +59,11 @@ var ReactedMembersBottomSheet = function (_a) {
                 return (React.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.createElement(ui_ImageRenderer.default, { url: emojiUrl, width: "28px", height: "28px", placeHolder: function (style) { return (React.createElement("div", { style: style },
-                            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.QUESTION, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } }),
+                    React.createElement(ui_ImageRenderer.default, { url: emojiUrl, width: "28px", height: "28px", placeHolder: function (_a) {
+                            var style = _a.style;
+                            return (React.createElement("div", { style: style },
+                                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.QUESTION, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                        } }),
                     React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BUTTON_2, color: selectedEmoji === reaction.key ? ui_Label.LabelColors.PRIMARY : ui_Label.LabelColors.ONBACKGROUND_3 }, reaction.userIds.length)));
             })),
             React.createElement("div", { className: "sendbird-message__bottomsheet__reactor-list" }, // making a member list who reacted to the message with the `selectedEmoji`
@@ -128,8 +131,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.createElement(ui_ImageRenderer.default, { url: emoji.url, width: "38px", height: "38px", placeHolder: function (style) { return (React.createElement("div", { style: style },
-                        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.QUESTION, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } })));
+                React.createElement(ui_ImageRenderer.default, { url: emoji.url, width: "38px", height: "38px", placeHolder: function (_a) {
+                        var style = _a.style;
+                        return (React.createElement("div", { style: style },
+                            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.QUESTION, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                    } })));
         }))));
 };
 
@@ -162,8 +168,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.createElement(ui_ImageRenderer.default, { url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '', width: "28px", height: "28px", placeHolder: function (style) { return (React.createElement("div", { style: style },
-                            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.QUESTION, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } })));
+                    React.createElement(ui_ImageRenderer.default, { url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '', width: "28px", height: "28px", placeHolder: function (_a) {
+                            var style = _a.style;
+                            return (React.createElement("div", { style: style },
+                                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.QUESTION, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                        } })));
             }))); } })),
         (isMobile && showAddReactionBadge) && (React.createElement(AddReactionBadgeItem, { onClick: function () {
                 setShowEmojiList(true);

package/cjs/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/cjs/ui/FileMessageItemBody.js

@@ -1,18 +1,18 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../chunks/bundle-7J3nX_hP.js');
+var ui_Label = require('../chunks/bundle-JaD2Ao-u.js');
 var ui_Icon = require('./Icon.js');
 var ui_TextButton = require('./TextButton.js');
-var index = require('../chunks/bundle-p6kWiWDv.js');
-var color = require('../chunks/bundle-7J-qpEzM.js');
-var MediaQueryContext = require('../chunks/bundle-WzrocC57.js');
-require('../chunks/bundle-bXLZZTmP.js');
-require('../chunks/bundle-kSScygqj.js');
-require('../chunks/bundle-LRCFL23q.js');
+var index = require('../chunks/bundle-fnv2bNo-.js');
+var color = require('../chunks/bundle-Og0K_sLb.js');
+var MediaQueryContext = require('../chunks/bundle-2ToiwW-_.js');
+require('../chunks/bundle-RVs527mS.js');
+require('../chunks/bundle-OBj337Le.js');
+require('../chunks/bundle-nQDclaWr.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-65IwoStx.js');
+require('../chunks/bundle--RWWGoZo.js');
 
 function FileMessageItemBody(_a) {
     var _b;

package/cjs/ui/FileViewer.js

@@ -2,31 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunks/bundle-bXLZZTmP.js');
+require('../chunks/bundle-RVs527mS.js');
 require('react');
 require('react-dom');
-require('../chunks/bundle-qtXdbPNE.js');
+require('../chunks/bundle-WLD9KKbn.js');
 require('../hooks/useModal.js');
-require('../chunks/bundle-p6kWiWDv.js');
-require('../chunks/bundle-LRCFL23q.js');
-require('../chunks/bundle-7VJjqIPJ.js');
-require('../chunks/bundle-7J3nX_hP.js');
+require('../chunks/bundle-fnv2bNo-.js');
+require('../chunks/bundle-nQDclaWr.js');
+require('../chunks/bundle-rUpy0DGt.js');
+require('../chunks/bundle-JaD2Ao-u.js');
 require('./Icon.js');
-var ui_FileViewer = require('../chunks/bundle-68NdNRjR.js');
-require('../chunks/bundle-n6iwTZAo.js');
-require('../chunks/bundle-Oc2T5_VP.js');
-require('../chunks/bundle-kSScygqj.js');
-require('../chunks/bundle-RSklGv-u.js');
-require('../chunks/bundle-65IwoStx.js');
-require('../chunks/bundle-WzrocC57.js');
+var ui_FileViewer = require('../chunks/bundle-3GWdY_5G.js');
+require('../chunks/bundle-_QsPNZ6J.js');
+require('../chunks/bundle-lnLwvZ7H.js');
+require('../chunks/bundle-OBj337Le.js');
+require('../chunks/bundle-ZL4COF6I.js');
+require('../chunks/bundle--RWWGoZo.js');
+require('../chunks/bundle-2ToiwW-_.js');
 require('./IconButton.js');
 require('./Button.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-INJtS58R.js');
-require('../chunks/bundle--d5w7FVF.js');
-require('../chunks/bundle-JbxviE94.js');
+require('../chunks/bundle-wU4qxzey.js');
+require('../chunks/bundle-SggLEV_z.js');
 require('@sendbird/uikit-tools');
 
 

package/cjs/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/cjs/ui/Icon.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-bXLZZTmP.js');
+var _tslib = require('../chunks/bundle-RVs527mS.js');
 var React = require('react');
-var utils = require('../chunks/bundle-LRCFL23q.js');
+var utils = require('../chunks/bundle-nQDclaWr.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);

package/cjs/ui/IconButton.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-bXLZZTmP.js');
+var _tslib = require('../chunks/bundle-RVs527mS.js');
 var React = require('react');
 
 var IconButton = React.forwardRef(function (props, ref) {

package/cjs/ui/ImageRenderer.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-bXLZZTmP.js');
+var _tslib = require('../chunks/bundle-RVs527mS.js');
 var React = require('react');
+var utils = require('../chunks/bundle-nQDclaWr.js');
 
 var numberToPx = (function (value) {
     return typeof value === 'number' ? "".concat(value, "px") : value;
@@ -27,38 +28,27 @@ function useDynamicSideLength(_a) {
 
 var useIsElementInViewport = function (elementRef) {
     var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
-    var callback = function (entries) {
-        var entry = entries[0];
-        setIsVisible(entry.isIntersecting);
-    };
-    React.useEffect(function () {
-        var observer = new IntersectionObserver(callback);
-        if (elementRef.current) {
+    React.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 = React.useRef(false);
     var isVisible = useIsElementInViewport(elementRef);
-    var _a = React.useState(false), isLoaded = _a[0], setIsLoaded = _a[1];
-    React.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; }
@@ -73,27 +63,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 ? utils.noop : _m, _o = _a.onError, onError = _o === void 0 ? utils.noop : _o, shadeOnHover = _a.shadeOnHover, _p = _a.isUploaded, isUploaded = _p === void 0 ? true : _p;
     var ref = React.useRef(null);
     var isLoaded = useLazyImageLoader(ref);
     var internalUrl = isLoaded ? url : null;
-    var _q = React.useState(false), showDefaultComponent = _q[0], setShowDefaultComponent = _q[1];
-    var _r = React.useState(true), showPlaceHolder = _r[0], setShowPlaceHolder = _r[1];
+    var _q = React.useState(false), defaultComponentVisible = _q[0], setDefaultComponentVisible = _q[1];
+    var _r = React.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 = React.useMemo(function () {
-        return typeof defaultComponent === 'function'
-            ? defaultComponent()
-            : defaultComponent;
-    }, [defaultComponent]);
-    var PlaceHolder = React.useMemo(function () {
-        return (placeHolder && typeof placeHolder === 'function')
-            ? placeHolder({
+    var renderPlaceholder = function () {
+        if (typeof placeHolder === 'function') {
+            return placeHolder({
                 style: {
                     width: '100%',
                     minWidth: dynamicMinWidth,
@@ -104,45 +95,81 @@ var ImageRenderer = function (_a) {
                     justifyContent: 'center',
                     alignItems: 'center',
                 },
-            })
-            : null;
-    }, [placeHolder]);
-    var HiddenImageLoader = React.useMemo(function () {
-        setShowDefaultComponent(false);
-        // reset the state when url is changed
-        return (React.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.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.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
-            'sendbird-image-renderer',
-        ], false).join(' '), style: {
+    };
+    return (dynamicMinWidth
+        && dynamicMinHeight && (React.createElement("div", { ref: ref, className: _tslib.__spreadArray(_tslib.__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.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.createElement("div", { className: "sendbird-multiple-files-image-renderer__image-cover", style: _tslib.__assign({ borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius) }, (isUploaded ? {} : { display: 'inline-flex' })) })));
+        } },
+        placeholderVisible && renderPlaceholder(),
+        defaultComponentVisible ? renderDefault() : renderImage(),
+        shadeOnHover && (React.createElement("div", { className: "sendbird-multiple-files-image-renderer__image-cover", style: _tslib.__assign({ borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius) }, (isUploaded ? {} : { display: 'inline-flex' })) })),
+        React.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 ? utils.noop : _a, _b = props.onLoad, onLoad = _b === void 0 ? utils.noop : _b, _c = props.onError, onError = _c === void 0 ? utils.noop : _c;
+    var reloadCtx = React.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
+    React.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.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();
+        } }));
 };
 
 exports.default = ImageRenderer;

package/cjs/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/cjs/ui/Input.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ui_Label = require('../chunks/bundle-7J3nX_hP.js');
-require('../chunks/bundle-bXLZZTmP.js');
-require('../chunks/bundle-kSScygqj.js');
+var ui_Label = require('../chunks/bundle-JaD2Ao-u.js');
+require('../chunks/bundle-RVs527mS.js');
+require('../chunks/bundle-OBj337Le.js');
 
 var InputLabel = function (_a) {
     var children = _a.children;

package/cjs/ui/Label.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunks/bundle-bXLZZTmP.js');
+require('../chunks/bundle-RVs527mS.js');
 require('react');
-var ui_Label = require('../chunks/bundle-7J3nX_hP.js');
-require('../chunks/bundle-kSScygqj.js');
+var ui_Label = require('../chunks/bundle-JaD2Ao-u.js');
+require('../chunks/bundle-OBj337Le.js');
 
 
 

package/cjs/ui/LinkLabel.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-bXLZZTmP.js');
+var _tslib = require('../chunks/bundle-RVs527mS.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-7J3nX_hP.js');
-require('../chunks/bundle-kSScygqj.js');
+var ui_Label = require('../chunks/bundle-JaD2Ao-u.js');
+require('../chunks/bundle-OBj337Le.js');
 
 var http = /https?:\/\//;
 function LinkLabel(_a) {

package/cjs/ui/Loader.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-bXLZZTmP.js');
+var _tslib = require('../chunks/bundle-RVs527mS.js');
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-require('../chunks/bundle-LRCFL23q.js');
+require('../chunks/bundle-nQDclaWr.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;